/* ============================================================
   CNKT - Premium Username Acquisition
   Redesign based on MotionSites "Orbis NFT" free template,
   re-themed light per client feedback: light grey background
   with salmon secondary writing. CNKT = connect.

   Theme lock: single light theme (grey) across the page.
   Accent lock: one accent (salmon #FF7161). Charcoal ink is
   the neutral text/button family. Error red is a semantic
   form-state color only.
   Radius scale (template-defined, documented):
     nav pill 28px / cards 32px / media 24px / bars 20px /
     icon buttons 16px / inputs 14px / pills 999px
   ============================================================ */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Condiment';
  src: url('../fonts/condiment-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F1F2F3;          /* light grey */
  --bg-deep: #E5E8E9;     /* slightly deeper grey */
  --ink: #212629;         /* charcoal ink (no pure black) */
  --ink-dim: rgba(33, 38, 41, 0.75);
  --accent: #FF7161;      /* bright pinky-orange salmon (client asked brighter; car ref ~#F8837B) */
  --error: #B3261E;
  --glass: rgba(255, 255, 255, 0.42);
  --hairline: rgba(33, 38, 41, 0.14);
  --shadow-tint: rgba(30, 35, 40, 0.12);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-script: 'Condiment', cursive;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --r-nav: 28px;
  --r-card: 32px;
  --r-media: 24px;
  --r-bar: 20px;
  --r-icon: 16px;
  --r-input: 14px;
  --container: 1440px;
  --pad-x: clamp(20px, 4vw, 64px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* z-scale: content 1 / topbar 10 / grain 60 / mobile menu 70 / skip link 80 */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-deep) 100%) fixed;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: rgba(255, 113, 97, 0.28); }

:focus-visible {
  outline: 2px solid var(--ink); /* ink ring: the bright accent alone is below 3:1 on grey */
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 80;
  padding: 10px 18px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---- grain overlay (fixed, non-interactive: cheap GPU-wise) ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.10 0 0 0 0 0.11 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- liquid glass (Orbis effect, tuned for the light theme) ---- */
.liquid-glass {
  background: var(--glass);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    0 12px 34px var(--shadow-tint);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 20%,
    rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.05) 60%,
    rgba(255,255,255,0.45) 80%, rgba(255,255,255,0.95) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--pad-x), env(safe-area-inset-left, 0px)) max(var(--pad-x), env(safe-area-inset-right, 0px));
}

/* ---- shared type ---- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.script {
  font-family: var(--font-script);
  text-transform: none;
  color: var(--accent);
  opacity: 0.95;
  padding-inline-end: 0.32em; /* Condiment flourishes sit past the last glyph */
  padding-bottom: 0.18em;
  line-height: 1.25;
}

.mono-copy {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

/* ============================== SITE BAR ============================== */

.site-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
}
.site-bar .container {
  padding-top: 16px;
  padding-bottom: 12px;
}

/* ============================== HERO ============================== */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 var(--r-card) var(--r-card);
}

/* ---- connection constellation: CNKT linking the platforms ---- */
.constellation {
  position: absolute;
  z-index: 0;
  width: min(66vh, 560px);
  aspect-ratio: 1 / 1;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.constellation .ring { position: absolute; inset: 0; }
.constellation .web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.constellation {
  /* client settled on grey slightly darker than the background
     (earlier tries: purple #7A5FD0, aqua alt #2AA79B) */
  --web: #9AA3A8;
}
/* full Metatron web: every original strand stays visible after draw */
.constellation .web line {
  stroke: var(--web);
  opacity: 0.55;
  stroke-width: 0.55;
  stroke-linecap: butt;
}
.constellation .web circle {
  fill: none;
  stroke: var(--web);
  opacity: 0.55;
  stroke-width: 0.55;
}
.constellation .web .dot {
  fill: var(--web);
  stroke: none;
  opacity: 0.65;
}
.constellation .node {
  position: absolute;
  width: 17%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(154, 163, 168, 0.8); /* same weight and grey as the web */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 10px 26px rgba(30, 35, 40, 0.10);
}
.constellation .k {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.constellation .node svg { width: 48%; height: 48%; }
.constellation .n-4 svg { width: 54%; height: 54%; } /* isometric cube has less mass than a filled circle */
.constellation .node b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1; /* tight box so the glyph sits optically centered */
  color: rgba(33, 38, 41, 0.55);
}
.constellation .n-c { left: 50%; top: 50%; }
.constellation .n-c b { font-size: clamp(13px, 1.2vw, 19px); letter-spacing: 0.08em; color: rgba(33, 38, 41, 0.7); }
.constellation .n-0 { left: 50%; top: 12%; }
.constellation .n-1 { left: 82.9%; top: 31%; }
.constellation .n-2 { left: 82.9%; top: 69%; }
.constellation .n-3 { left: 50%; top: 88%; }
.constellation .n-4 { left: 17.1%; top: 69%; }
.constellation .n-5 { left: 17.1%; top: 31%; }
@media (max-width: 1023px) {
  .constellation {
    width: min(58vw, 340px);
    right: -6%;
    top: 18%;
    transform: none;
    opacity: 0.34;
  }
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(241, 242, 243, 0.35) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 28px;
  padding-bottom: clamp(48px, 8vh, 96px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px; /* nav band stays under the 80px cap */
  z-index: 10;
}

.logo {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--ink);
}
.logo-k { color: var(--accent); }

.nav {
  display: none;
  border-radius: var(--r-nav);
  padding: 20px 52px;
}
.nav a {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  margin-inline: 18px;
  transition: color 0.25s var(--ease-out);
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-icon);
  padding: 14px 20px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out);
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.75); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .menu-btn { display: none; }
}

/* mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(241, 242, 243, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 44px);
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 18px;
  color: var(--ink);
  transition: color 0.25s var(--ease-out);
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu .close-btn {
  position: absolute;
  top: 24px; right: 24px;
  border-radius: var(--r-icon);
  padding: 14px 20px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.hero-copy {
  margin-top: auto;
  max-width: 900px;
}

.hero-title {
  position: relative;
  font-size: clamp(40px, 7.5vw, 90px);
  line-height: 1.05;
  max-width: 820px;
}
@media (min-width: 768px) { .hero-title { line-height: 1; } }

.hero-script {
  position: absolute;
  right: -0.5em;
  bottom: -0.35em;
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 1.1;
  padding-bottom: 4px; /* descender reserve for the script face */
  transform: rotate(-1deg);
  white-space: nowrap;
}

.hero-sub {
  max-width: 520px;
  margin: 28px 0 36px;
}

/* Anton text + accent bar CTA (Orbis "SEE ALL" button language) */
.bar-cta {
  display: inline-block;
  text-decoration: none;
}
.bar-cta > span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.25s var(--ease-out);
}
.bar-cta .bar {
  display: block;
  height: clamp(6px, 0.7vw, 10px);
  background: var(--accent);
  margin-top: 8px;
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.bar-cta:hover > span { color: var(--accent); }
.bar-cta:hover .bar { transform: scaleX(1.12); }

/* ============================ SECTIONS ============================ */

section { position: relative; }

.section-pad {
  padding-block: clamp(72px, 11vh, 128px);
}

/* frosted section shell */
.video-section {
  overflow: hidden;
  border-radius: var(--r-card);
  margin-inline: clamp(0px, 1vw, 20px);
  background: rgba(255, 255, 255, 0.25);
}
.video-section .container { position: relative; z-index: 2; }
.video-section .section-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}

.h2 {
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.04;
  position: relative;
}

.h2 .script-overlay {
  position: absolute;
  left: 55%;
  bottom: -0.95em;
  font-size: clamp(30px, 4vw, 64px);
  padding-bottom: 6px; /* descender reserve */
  transform: rotate(-2deg);
  white-space: nowrap;
}

.script-inline {
  font-size: 1.06em;
  padding-bottom: 4px;
}

/* ---- acquired handles marquee ---- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  padding: 20px 0;
  margin-top: 20px;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: baseline;
  gap: clamp(36px, 5vw, 72px);
  padding-right: clamp(36px, 5vw, 72px);
}
.m-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.m-item b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.m-item span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* -------- Who we serve -------- */

.serve { margin-top: 20px; }

.serve-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: clamp(40px, 6vh, 72px);
}
@media (min-width: 1024px) {
  .serve-top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.serve-top .mono-copy { max-width: 300px; }

.serve-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .serve-panels { grid-template-columns: 1fr 1fr; }
}

.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-card);
  padding: clamp(20px, 2vw, 30px);
  transition: background-color 0.3s var(--ease-out);
}
.panel:hover { background: rgba(255, 255, 255, 0.65); }

.panel figure {
  margin: 0 0 22px;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 16 / 8.5;
}
.panel figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.panel:hover figure img { transform: scale(1.03); }

.panel h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--ink);
}
.panel p {
  margin: 0 0 18px;
  white-space: nowrap;
}

.panel ul {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.panel ul li {
  padding: 12px 2px;
}
.panel ul li + li {
  border-top: 1px solid var(--hairline);
}

/* -------- Why usernames matter -------- */

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(40px, 6vh, 72px);
}
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
.why-kicker {
  margin: 0 0 8px;
  font-family: var(--font-script);
  font-size: clamp(28px, 3.8vw, 52px);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--accent);
  padding-inline-end: 0.32em;
  padding-bottom: 0.18em;
  transform: rotate(-2deg);
}

.why-body p {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.why-body p + p { margin-top: 1.15em; }
.why-staccato {
  color: var(--ink-dim);
}
.why-close {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.why-points {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .why-points { grid-template-columns: 1fr 1fr 1fr; }
}

.why-point {
  padding: 22px 0;
}
.why-point + .why-point {
  border-top: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .why-point {
    padding: 32px 28px 4px 0;
  }
  .why-point + .why-point {
    border-top: 0;
    border-left: 1px solid var(--hairline);
    padding-left: 28px;
  }
}

.why-point h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: var(--ink);
}
.why-point p {
  margin: 0;
  max-width: 38ch;
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  text-transform: none;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* -------- Collection / acquisitions -------- */

.collection-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 4vh, 40px);
}

.slider-nav {
  display: flex;
  gap: 12px;
}
.slider-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  box-shadow: 0 8px 26px var(--shadow-tint);
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.slider-btn:hover { transform: scale(1.08); background: var(--accent); color: var(--ink); }
.slider-btn:active { transform: scale(0.96); }
.slider-btn[disabled] { opacity: 0.35; cursor: default; transform: none; }
.slider-btn svg { width: 20px; height: 20px; }

.cards {
  display: flex;
  gap: 24px;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0;
}
.cards::-webkit-scrollbar { display: none; }
.cards .card {
  flex: 0 0 min(86vw, 380px);
  scroll-snap-align: start;
}

.card {
  border-radius: var(--r-card);
  padding: 18px;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.card:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 44px var(--shadow-tint);
  transform: translateY(-4px);
}

.card-media {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/* "asset plate": the handle itself is the artwork */
.plate {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 20% 15%, #FFFFFF 0%, #ECEDEE 45%, #E0E3E5 100%);
}
.plate-glow {
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(170, 180, 188, 0.40) 55deg,
    transparent 110deg,
    rgba(255, 113, 97, 0.24) 200deg,
    transparent 260deg);
  animation: plate-spin 16s linear infinite;
  will-change: transform;
}
.plate-alt .plate-glow { animation-duration: 21s; animation-direction: reverse; }
.plate-third .plate-glow { animation-duration: 26s; }
@keyframes plate-spin { to { transform: rotate(1turn); } }
.plate-icon {
  position: absolute;
  width: 58%;
  height: 58%;
  opacity: 0.07;
}
.plate-handle {
  position: relative;
  font-size: clamp(30px, 2.6vw, 44px);
  padding: 0 14px;
  text-align: center;
  word-break: break-word;
  transition: transform 0.5s var(--ease-out);
}
.card:hover .plate-handle { transform: scale(1.05); }

.card-bar {
  margin-top: 14px;
  border-radius: var(--r-bar);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.card-handle {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.card-meta {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin-top: 3px;
}

.card-arrow {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 8px 26px var(--shadow-tint);
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.card-arrow:hover { transform: scale(1.1); background: var(--accent); color: var(--ink); }
.card-arrow svg { width: 20px; height: 20px; }

/* per-card glow variation so the five plates do not rotate in sync */
.plate-fourth .plate-glow { animation-duration: 24s; animation-direction: reverse; }
.plate-fifth .plate-glow { animation-duration: 29s; }

.collection-note {
  margin-top: 36px;
  color: var(--ink-dim);
}

/* -------- How it works -------- */

.how-col {
  max-width: 1100px;
  margin-inline: auto;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: clamp(40px, 6vh, 64px);
}

/* flow arrows: salmon badges docked half-in half-out of the top
   edge of the step they lead into, so alignment is bound to the
   card geometry at any width */
.step-arrow {
  position: absolute;
  top: -23px;
  left: 50%;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(255, 113, 97, 0.35);
  transform: translateX(-50%);
}
.step-arrow svg {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
}

.step {
  position: relative;
  overflow: visible; /* the docked arrow badge pokes out of the card */
  width: 100%;
  border-radius: var(--r-card);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 3vw, 44px);
  max-width: none;
  transition: background-color 0.3s var(--ease-out);
}
/* accent bar draws in when the step activates, like a progress tick */
.step::after {
  content: '';
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.7s var(--ease-out) 0.25s;
}
.step.in::after { transform: scaleY(1); }
.step:hover { background: rgba(255, 255, 255, 0.7); }

.step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ink);
}
.step p { margin: 0; }

/* -------- CTA + contact form -------- */

.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
@media (min-width: 1024px) {
  .cta-grid { grid-template-columns: 1fr 1fr; }
}

.cta-copy { position: relative; }

.cta-script {
  display: inline-block;
  max-width: 100%;
  font-size: clamp(28px, 3.4vw, 56px);
  padding-bottom: 0.22em;
  line-height: 1.35;
  transform: rotate(-2deg);
  transform-origin: left center;
  margin-bottom: 10px;
}

.cta-lines {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.06;
}
.cta-lines .accent-line { color: var(--accent); }

.form-panel {
  border-radius: var(--r-card);
  padding: clamp(24px, 2.6vw, 40px);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}

.field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  color: var(--ink);
}

.field input,
.field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 13px 16px;
  transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 113, 97, 0.18);
}
.field textarea { min-height: 120px; resize: vertical; }

.field .error-msg {
  display: none;
  color: var(--error);
  font-size: 12px;
  margin-top: 6px;
}
.field.invalid input,
.field.invalid textarea { border-color: var(--error); }
.field.invalid .error-msg { display: block; }

.turnstile-wrap {
  margin: 2px 0 4px;
}
.turnstile-wrap .cf-turnstile {
  display: block;
}

.submit-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 16px 34px;
  border-radius: 999px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.submit-btn:hover {
  background: var(--accent);
  color: var(--ink); /* ink label: light-on-bright-salmon would fail AA */
  box-shadow: 0 10px 30px rgba(255, 113, 97, 0.35);
  transform: translateY(-1px);
}
.submit-btn:active { transform: scale(0.98); }
.submit-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.submit-btn:disabled:hover {
  background: var(--ink);
  color: var(--bg);
}

.form-error {
  color: var(--error);
  font-size: 13px;
  margin: 0 0 12px;
}

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-success {
  text-align: center;
  padding: 40px 10px;
}
.form-success .display { font-size: clamp(26px, 3vw, 40px); }
.form-success p { color: var(--ink-dim); }

/* ============================== FOOTER ============================== */

footer {
  padding: clamp(56px, 8vh, 96px) 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr; }
}

.footer-brand .logo { font-size: 26px; }
.footer-brand .logo-script {
  display: block;
  font-size: 22px;
  margin: 2px 0 10px;
  padding-bottom: 4px; /* descender reserve */
}
.footer-brand p {
  max-width: 44ch;
  color: var(--ink-dim);
  font-size: 13px;
  text-transform: uppercase;
}

.newsletter h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ink);
}
.newsletter > p {
  color: var(--ink-dim);
  font-size: 13px;
  text-transform: uppercase;
  margin: 0 0 20px;
  max-width: 48ch;
}

.newsletter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.newsletter-row .field { flex: 1 1 240px; }
.newsletter-submit { align-self: end; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-dim);
}
.check-row input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-links a {
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}
.footer-links a:hover { color: var(--accent); }
.footer-bottom .copyright { color: var(--ink-dim); }

/* ==================== TABLET + PHONE ==================== */
@media (max-width: 1023px) {
  html {
    scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
  }

  .site-bar {
    position: sticky;
    background: rgba(241, 242, 243, 0.9);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 var(--hairline);
  }

  .hero {
    min-height: auto;
  }
  .hero-inner {
    padding-top: 28px;
    padding-bottom: 56px;
  }
  .hero-copy {
    margin-top: 8px;
    max-width: 36rem;
  }
  .hero-shade {
    background: linear-gradient(180deg,
      rgba(241, 242, 243, 0.22) 0%,
      rgba(241, 242, 243, 0.55) 42%,
      rgba(241, 242, 243, 0.82) 100%);
  }

  .h2 .script-overlay {
    position: static;
    display: block;
    margin-top: 6px;
    font-size: clamp(26px, 6vw, 40px);
    white-space: normal;
    transform: rotate(-2deg);
  }

  .serve { margin-top: 12px; }
  .serve-top { gap: 18px; }
  .serve-top .mono-copy { max-width: none; }

  .video-section {
    margin-inline: 0;
    border-radius: 0;
    overflow: visible;
  }

  .cards {
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
  .cards .card { flex: 0 0 100%; }
  .cards .card:hover { transform: none; }

  .step { max-width: none; }

  .cta-script { font-size: clamp(24px, 6.6vw, 34px); }
  .cta-grid { gap: 32px; }

  .mobile-menu {
    padding: env(safe-area-inset-top, 0px) 20px env(safe-area-inset-bottom, 20px);
    background: rgba(241, 242, 243, 0.97);
  }
  .mobile-menu a {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
  }
  .mobile-menu .close-btn {
    top: max(16px, env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 16px));
  }
}

@media (max-width: 767px) {
  :root { --pad-x: 16px; --r-card: 24px; --r-media: 18px; }

  .hero-title { font-size: clamp(34px, 11vw, 48px); line-height: 1.02; }
  .hero-script {
    position: static;
    display: block;
    margin-top: 8px;
    font-size: clamp(22px, 7vw, 30px);
    white-space: normal;
  }
  .hero-sub { margin: 20px 0 28px; }
  .bar-cta > span { font-size: 22px; }

  .section-pad { padding-block: 48px; }
  .collection-head { margin-bottom: 16px; }
  .why-body p,
  .why-point p { max-width: none; }
  .why-grid { margin-bottom: 28px; }

  .panel { padding: 16px; }
  .panel figure { margin-bottom: 16px; aspect-ratio: 16 / 10; }
  .panel h3 { font-size: 20px; }
  .panel p { white-space: normal; }

  .card { padding: 14px; border-radius: 24px; }
  .card-bar { padding: 14px 16px; }
  .card-handle { font-size: 15px; }
  .plate-handle { font-size: clamp(22px, 7vw, 30px); }

  .form-panel { padding: 20px 16px; }
  .field input,
  .field textarea { font-size: 16px; } /* iOS: avoid focus zoom */
  .submit-btn { width: 100%; }
  .newsletter-row { flex-direction: column; }
  .newsletter-submit { align-self: stretch; }

  .footer-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .intro-word { font-size: clamp(40px, 12vw, 72px); }
}

/* hover only where hover exists: no sticky hover on touch */
@media (hover: none) {
  .card:hover,
  .panel:hover,
  .step:hover {
    background: inherit;
    box-shadow: inherit;
    transform: none;
  }
  .card:hover .plate-handle,
  .panel:hover figure img {
    transform: none;
  }
}

/* ========================= MOTION LAYER ========================= */
/* Motivations: hero cascade = brand entrance storytelling;
   reveals = reading hierarchy on scroll; hovers = tactile feedback. */

@media (prefers-reduced-motion: no-preference) {
  .hero .fx,
  .site-bar .fx {
    opacity: 0;
    transform: translateY(28px);
    animation: rise 0.9s var(--ease-out) forwards;
  }
  .hero .fx-1,
  .site-bar .fx-1 { animation-delay: 0.05s; }
  .hero .fx-2 { animation-delay: 0.18s; }
  .hero .fx-3 { animation-delay: 0.32s; }
  .hero .fx-4 { animation-delay: 0.46s; }

  @keyframes rise {
    to { opacity: 1; transform: none; }
  }

  .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }

  .step.reveal { transform: translateY(26px); }
  .step.reveal.in { transform: none; }
  .step h3,
  .step p {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .step h3 { transition-delay: 0.18s; }
  .step p { transition-delay: 0.3s; }
  .step.in h3,
  .step.in p { opacity: 1; transform: none; }
  .step .step-arrow {
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity 0.5s var(--ease-out) 0.4s, transform 0.5s var(--ease-out) 0.4s;
  }
  .step.in .step-arrow { opacity: 1; transform: translateX(-50%); }

  /* full web draws in, then stays. dasharray is cleared so the
     end frame is solid lines, not leftover construction dashes. */
  @keyframes web-draw {
    to { stroke-dashoffset: 0; stroke-dasharray: 1 0; }
  }
  @keyframes fade-in-65 { to { opacity: 0.65; } }
  @keyframes fade-in-full { to { opacity: 1; } }
  .constellation .web line {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: web-draw 1.1s ease-out forwards 2.7s;
  }
  .constellation .web .hex line { animation-delay: 2.95s; }
  .constellation .web .star line { animation-delay: 3.15s; }
  .constellation .web .inner-web line { animation-delay: 3.3s; }
  .constellation .web .metatron line { animation-delay: 3.5s; }
  .constellation .web circle {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: web-draw 1.2s ease-out forwards 3.2s;
  }
  .constellation .web .dot {
    opacity: 0;
    animation: fade-in-65 0.5s ease-out forwards 3.9s;
  }
  .constellation .node {
    opacity: 0;
    animation: fade-in-full 0.6s ease-out forwards;
  }
  .constellation .n-c { animation-delay: 3.2s; }
  .constellation .n-0 { animation-delay: 3.45s; }
  .constellation .n-1 { animation-delay: 3.55s; }
  .constellation .n-2 { animation-delay: 3.65s; }
  .constellation .n-3 { animation-delay: 3.75s; }
  .constellation .n-4 { animation-delay: 3.85s; }
  .constellation .n-5 { animation-delay: 3.95s; }

  /* scroll-driven drift on big section headings (progressive enhancement) */
  @supports (animation-timeline: view()) {
    .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes drift {
      from { transform: translateY(56px); opacity: 0.25; }
      to { transform: none; opacity: 1; }
    }
  }
}

/* ==================== INTRO: CONNECT morphs into CNKT ====================
   Pure CSS choreography (no JS needed): the letters O, N, E collapse and
   the second C flips into an emerald K. Skipped entirely under reduced
   motion, where the base display: none applies. */

.intro { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .intro {
    position: fixed;
    inset: 0;
    z-index: 55; /* under the grain (60) so it stays textured */
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--bg) 0%, var(--bg-deep) 100%);
    pointer-events: none;
    animation: intro-exit 0.65s var(--ease-out) 2.25s forwards;
  }
  .intro-word {
    display: flex;
    font-size: clamp(56px, 14vw, 170px);
    line-height: 1.05;
    color: var(--ink);
  }
  .intro .l {
    display: inline-block;
    opacity: 0;
    transform: translateY(44px);
    animation: rise 0.5s var(--ease-out) var(--d, 0s) forwards;
  }
  .intro .l:nth-child(1) { --d: 0.05s; }
  .intro .l:nth-child(2) { --d: 0.11s; }
  .intro .l:nth-child(3) { --d: 0.17s; }
  .intro .l:nth-child(4) { --d: 0.23s; }
  .intro .l:nth-child(5) { --d: 0.29s; }
  .intro .l:nth-child(6) { --d: 0.35s; }
  .intro .l:nth-child(7) { --d: 0.41s; }
  .intro .drop {
    max-width: 0.8em;
    overflow: hidden;
    animation:
      rise 0.5s var(--ease-out) var(--d, 0s) forwards,
      letter-drop 0.5s var(--ease-out) 1.25s forwards;
  }
  .intro .swap { position: relative; }
  .intro .swap .c {
    display: inline-block;
    transform-origin: 50% 60%;
    animation: flip-out 0.4s ease 1.35s forwards;
  }
  .intro .swap .k {
    position: absolute;
    left: 0; top: 0;
    display: inline-block;
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: 50% 60%;
    color: var(--accent);
    animation: flip-in 0.4s ease 1.55s forwards;
  }
  @keyframes letter-drop { to { max-width: 0; opacity: 0; } }
  @keyframes flip-out { to { transform: rotateX(90deg); opacity: 0; } }
  @keyframes flip-in { to { transform: rotateX(0); opacity: 1; } }
  @keyframes intro-exit { to { transform: translateY(-101%); visibility: hidden; } }

  /* The page stays hidden behind the curtain and then arrives as ONE
     piece. Before this the hero text landed in three separate beats
     after the intro had already lifted, which read as pop-pop-pop. */
  .site-bar,
  .hero,
  main,
  footer {
    animation: shell-in 0.9s var(--ease-out) 2.3s both;
  }
  @keyframes shell-in { from { opacity: 0; } to { opacity: 1; } }

  /* micro-offsets only: the hero rises as a single wave, not a cascade */
  .hero .fx-1,
  .site-bar .fx-1 { animation-delay: 2.4s; }
  .hero .fx-2 { animation-delay: 2.46s; }
  .hero .fx-3 { animation-delay: 2.52s; }
  .hero .fx-4 { animation-delay: 2.58s; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero .fx, .site-bar .fx { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}