/* ==========================================================================
   HYPNOTIK / coming-soon landing page
   Tokens follow the Hypnotik visual identity. Surface ratio target is
   70% black or steel, 20% white or chalk, 7% violet, 3% cyan.
   There is deliberately no red in this palette.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Core surfaces */
  --black: #0a0a0b;          /* Hypnotik Black. Primary surface. */
  --black-raised: #111114;   /* Raised black panel. Access section. */
  --steel: #22242a;          /* Steel. Raised surface on black, hairline blocks. */
  --white: #f7f7f5;          /* Optic White. Primary light surface and type on black. */
  --chalk: #d6d6d2;          /* Body copy on black. */
  --mat-grey: #6e7076;       /* Secondary type, 14px and up only. */
  --ink-muted: #4f5258;      /* Supporting text on Optic White. */

  /* Signature accents */
  --violet: #6b21d6;         /* Violet Spiral. 6.96:1 on white, 2.65:1 on black. */
  --violet-deep: #4d137f;    /* Violet on light surfaces where 4.5:1 is required. */
  --cyan: #00cbde;           /* Signal Cyan. Data and technical annotation. Black only. */

  /* States. Desaturated so they sit inside the palette rather than shouting. */
  --success: #55d38a;        /* 10.4:1 on black */
  --warning: #d9a441;        /* 8.8:1 on black */
  --error: #d4785f;          /* 6.3:1 on black */

  --line: rgba(214, 214, 210, 0.22);
  --line-strong: rgba(247, 247, 245, 0.46);

  --display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(4rem, 6vw, 6.5rem);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Registered so the interference drift can interpolate them. */
@property --drift-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --drift-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input {
  font-synthesis: none;
}

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

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: var(--cyan);
}

button,
input,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* Cyan is about 2:1 on Optic White. Light surfaces get a violet ring. */
.light-band :focus-visible {
  outline-color: var(--violet-deep);
}

::selection {
  background: var(--cyan);
  color: var(--black);
}

.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-180%);
  border: 1px solid var(--white);
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0.375rem 0 0 var(--violet);
  padding-left: 1.5rem;
}

.skip-link:focus {
  transform: translateY(0);
}

.eyebrow,
.marker-code,
.status-index,
.status-label,
.art-label,
.access-number,
.endline {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0;
  color: var(--cyan);
}

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: 4.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--black);
}

.header-inner {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  padding-block: 0.85rem;
  text-decoration: none;
}

.brand-lockup {
  width: clamp(8.5rem, 13vw, 11.25rem);
  height: auto;
}

.header-cta,
.text-cta {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--white);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease;
}

.header-cta:hover,
.text-cta:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 4.75rem);
  padding-top: clamp(3.75rem, 7vw, 7rem);
}

/* The Ripple. Concentric squares, stroke stepping 1px to 8px so the field is
   never uniform, masked to fade out. Tonal only. Felt, not read. */
.hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' width='1000' height='1000'%3E%3Cg fill='none' stroke='%23D6D6D2'%3E%3Crect x='2' y='2' width='996' height='996' stroke-width='1'/%3E%3Crect x='62' y='62' width='876' height='876' stroke-width='3'/%3E%3Crect x='132' y='132' width='736' height='736' stroke-width='1'/%3E%3Crect x='207' y='207' width='586' height='586' stroke-width='5'/%3E%3Crect x='287' y='287' width='426' height='426' stroke-width='2'/%3E%3Crect x='372' y='372' width='256' height='256' stroke-width='8'/%3E%3Crect x='442' y='442' width='116' height='116' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 78% 42%;
  background-repeat: no-repeat;
  background-size: min(148vh, 118vw) auto;
  content: "";
  opacity: 0.12;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 74% 44%, #000 12%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 72% at 74% 44%, #000 12%, transparent 78%);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.hero-copy {
  z-index: 2;
  grid-column: span 7;
  min-width: 0;
}

.hero-title,
.editorial-band h2,
.closing-section h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero-title {
  margin-top: 1.2rem;
  font-size: clamp(3.25rem, 7.8vw, 7.5rem);
  font-stretch: 112%;
}

.hero-title span {
  display: block;
}

/* Chromatic interference. Two offset layers in violet and cyan blended with
   screen, so the fringes only appear where they overhang the white glyphs and
   land on the black surface. The readable text itself is untouched. */
.title-chroma {
  position: relative;
  color: var(--white);
}

.title-chroma::before,
.title-chroma::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: attr(data-text);
  mix-blend-mode: screen;
  pointer-events: none;
}

.title-chroma::before {
  color: var(--violet);
  transform: translate3d(0.018em, 0.012em, 0);
}

.title-chroma::after {
  color: var(--cyan);
  opacity: 0.62;
  transform: translate3d(-0.014em, -0.009em, 0);
}

@supports not (mix-blend-mode: screen) {
  .title-chroma::before,
  .title-chroma::after {
    content: none;
  }
}

.hero-lead {
  max-width: 60ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  color: var(--chalk);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

.hero-offer {
  max-width: 60ch;
  margin: 1rem 0 0;
  color: var(--white);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 600;
}

.hero-art {
  position: relative;
  grid-column: span 5;
  align-self: stretch;
  min-height: min(38rem, 66vw);
  display: grid;
  align-items: center;
  justify-items: center;
}

.interference {
  width: min(100%, 36rem);
  aspect-ratio: 1;
  overflow: visible;
}

.field {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 180ms ease-out;
}

.field rect {
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
}

.field rect:nth-child(1) { stroke-width: 1; }
.field rect:nth-child(2) { stroke-width: 1.75; }
.field rect:nth-child(3) { stroke-width: 2.5; }
.field rect:nth-child(4) { stroke-width: 3.5; }
.field rect:nth-child(5) { stroke-width: 5; }
.field rect:nth-child(6) { stroke-width: 7; }

/* Pointer offset (--violet-x etc, set by script.js) and autonomous drift
   (--drift-x etc, driven by the keyframes) are separate translations so the
   two never fight over the transform property. */
.field-violet {
  color: var(--violet);
  transform:
    translate(var(--violet-x, 0), var(--violet-y, 0))
    translate(var(--drift-x, 0), var(--drift-y, 0))
    rotate(5deg);
  animation: drift-violet 26s var(--ease) infinite;
}

.field-cyan {
  color: var(--cyan);
  opacity: 0.72;
  transform:
    translate(var(--cyan-x, 0), var(--cyan-y, 0))
    translate(var(--drift-x, 0), var(--drift-y, 0))
    rotate(-3deg);
  animation: drift-cyan 23s var(--ease) infinite;
}

@keyframes drift-violet {
  0%, 100% { --drift-x: 0px; --drift-y: 0px; }
  33% { --drift-x: 1.6px; --drift-y: -1.1px; }
  66% { --drift-x: -1.2px; --drift-y: 1.5px; }
}

@keyframes drift-cyan {
  0%, 100% { --drift-x: 0px; --drift-y: 0px; }
  40% { --drift-x: -1.8px; --drift-y: 1.3px; }
  72% { --drift-x: 1.4px; --drift-y: -1.6px; }
}

.art-quiet-zone {
  fill: var(--black);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.art-mark {
  opacity: 0.96;
}

.art-label {
  position: absolute;
  right: 0;
  bottom: 1rem;
  margin: 0;
  color: var(--chalk);
  writing-mode: vertical-rl;
}

/* --------------------------------------------------------------------------
   Klaviyo embed
   -------------------------------------------------------------------------- */

.klaviyo-embed-shell {
  position: relative;
  max-width: 46rem;
  min-height: 8rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.klaviyo-form-Twicbi:empty {
  display: grid;
  min-height: 3.5rem;
  place-items: center;
}

.klaviyo-form-Twicbi:empty::before {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--line-strong);
  border-top-color: var(--cyan);
  content: "";
  animation: form-loader 720ms linear infinite;
}

html[data-klaviyo-form-ready="true"] .klaviyo-embed-shell {
  min-height: 0;
}

.form-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.klaviyo-form-Twicbi form {
  min-height: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

.klaviyo-form-Twicbi form > div {
  min-height: 0 !important;
  justify-content: flex-start !important;
}

.klaviyo-form-Twicbi [data-testid="form-row"] {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.klaviyo-form-Twicbi [data-testid="form-component"]:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.klaviyo-form-Twicbi [data-testid="form-component"] {
  box-sizing: border-box !important;
  padding: 0 !important;
}

.klaviyo-form-Twicbi [data-testid="form-component"]:last-child {
  width: 15rem !important;
  flex: 0 0 auto !important;
}

.klaviyo-form-Twicbi input,
.klaviyo-form-Twicbi button {
  box-sizing: border-box !important;
  height: 3.5rem !important;
  min-height: 3.5rem !important;
  border-radius: 0 !important;
}

.klaviyo-form-Twicbi input {
  width: 100% !important;
  border: 1px solid var(--white) !important;
  background: var(--white) !important;
  color: var(--black) !important;
  font-family: var(--body) !important;
  font-size: 1rem !important;
  padding: 0.95rem 1rem !important;
}

.klaviyo-form-Twicbi input::placeholder {
  color: #62646a !important;
  opacity: 1 !important;
}

.klaviyo-form-Twicbi button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 15rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  border: 1px solid var(--white) !important;
  border-left: 0 !important;
  background-color: var(--violet) !important;
  color: var(--white) !important;
  font-family: var(--display) !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  padding: 0.95rem 1.25rem !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: filter 160ms ease, transform 120ms ease !important;
}

.klaviyo-form-Twicbi button::after {
  color: var(--cyan);
  content: "↗";
  font-family: var(--mono);
  font-size: 1rem;
}

.klaviyo-form-Twicbi button:hover:not(:disabled) {
  filter: brightness(1.14);
}

.klaviyo-form-Twicbi button:active:not(:disabled) {
  transform: scale(0.985);
}

.klaviyo-form-Twicbi input:focus-visible,
.klaviyo-form-Twicbi button:focus-visible {
  outline: 3px solid var(--cyan) !important;
  outline-offset: 3px !important;
}

.form-consent {
  max-width: 68ch;
  margin: 0.35rem 0 0;
  color: var(--chalk);
  font-size: 0.75rem;
  line-height: 1.55;
}

@keyframes form-loader {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Status rail
   -------------------------------------------------------------------------- */

.status-rail {
  display: grid;
  margin-top: clamp(4rem, 7vw, 7rem);
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
}

.status-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--line);
}

.status-item:first-child {
  padding-left: 0;
}

.status-item:last-child {
  border-right: 0;
}

.status-index {
  grid-row: span 2;
  color: var(--cyan);
}

.status-label {
  color: var(--chalk);
}

.status-item strong {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Editorial bands
   -------------------------------------------------------------------------- */

.editorial-band {
  position: relative;
  padding-block: var(--section);
  border-top: 1px solid var(--line);
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
}

.section-marker {
  display: flex;
  grid-column: span 3;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 6rem;
  padding-top: 0.4rem;
}

.marker-code {
  color: var(--chalk);
}

.section-copy {
  grid-column: 5 / span 8;
}

.editorial-band h2,
.closing-section h2 {
  font-size: clamp(2.75rem, 5vw, 5.25rem);
}

.body-grid {
  display: grid;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 3rem;
}

.body-grid p,
.section-copy > p,
.standard-close p,
.access-qualification p,
.closing-copy p {
  max-width: 64ch;
  margin: 0;
  color: var(--chalk);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
}

.body-grid p:first-child,
.section-intro {
  color: var(--white);
  font-weight: 500;
}

.record-section .section-intro {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.record-section .section-copy > p + p {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Light band and the spec readout
   -------------------------------------------------------------------------- */

.light-band {
  background: var(--white);
  color: var(--black);
}

.light-band .eyebrow {
  color: var(--violet-deep);
}

.light-band .marker-code,
.light-band .section-copy > p,
.light-band .standard-close p {
  color: var(--ink-muted);
}

.light-band .section-intro {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--black);
}

/* Black inset panel. Cyan is only legible on black, so the technical readout
   brings its own surface with it rather than sitting on Optic White. */
.spec-block {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--black);
  color: var(--white);
}

.spec-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem clamp(1rem, 2vw, 1.5rem);
  background: var(--steel);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spec-block-head span:last-child {
  color: var(--cyan);
}

.spec-readout {
  display: grid;
  margin: 0;
  padding: 0.35rem clamp(1rem, 2vw, 1.5rem) 1.15rem;
}

.spec-readout div {
  display: grid;
  grid-template-columns: minmax(9rem, 16ch) 1fr;
  gap: 0.35rem 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(214, 214, 210, 0.14);
}

.spec-readout div:last-child {
  border-bottom: 0;
}

.spec-readout dt,
.spec-readout dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.spec-readout dt {
  color: var(--mat-grey);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.spec-readout dd {
  color: var(--cyan);
  letter-spacing: 0.02em;
}

.light-band .spec-note {
  margin-top: 1.5rem;
  color: var(--ink-muted);
}

.standard-line {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 3px solid var(--black);
  color: var(--black) !important;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   State section
   -------------------------------------------------------------------------- */

.state-section {
  min-height: 36rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.state-copy {
  position: relative;
  z-index: 2;
}

.state-copy .section-intro {
  max-width: 48ch;
  margin-top: 2rem;
  color: var(--white);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.state-copy > p:last-child {
  margin-top: 1.5rem;
}

.state-ripple {
  position: absolute;
  right: max(-20vw, -18rem);
  bottom: max(-22vw, -20rem);
  width: min(70vw, 62rem);
  aspect-ratio: 1;
  opacity: 0.22;
}

.state-ripple span {
  position: absolute;
  border: solid var(--mat-grey);
}

.state-ripple span:nth-child(1) { inset: 0; border-width: 1px; }
.state-ripple span:nth-child(2) { inset: 9%; border-width: 2px; }
.state-ripple span:nth-child(3) { inset: 20%; border-width: 3px; }
.state-ripple span:nth-child(4) { inset: 33%; border-width: 5px; }
.state-ripple span:nth-child(5) { inset: 48%; border-width: 8px; }

/* --------------------------------------------------------------------------
   Access section
   -------------------------------------------------------------------------- */

.access-section {
  background: var(--black-raised);
}

.access-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: 2rem;
}

.access-marker {
  display: block;
  margin-top: 0.5rem;
}

.access-heading h2 {
  margin-top: 1rem;
}

.text-cta {
  justify-self: end;
  gap: 1rem;
}

.access-list {
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.access-list li {
  display: grid;
  grid-template-columns: minmax(3.5rem, 0.5fr) minmax(14rem, 2fr) 3fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}

.access-number {
  color: var(--cyan);
}

.access-list h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.access-list p {
  margin: 0;
  color: var(--chalk);
}

.access-qualification {
  display: grid;
  margin-top: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.access-qualification p {
  padding-top: 1rem;
  border-top: 1px solid var(--line-strong);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-list {
  margin-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--line-strong);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  list-style: none;
  text-transform: uppercase;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  flex: 0 0 auto;
  color: var(--cyan);
  content: "+";
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details[open] summary {
  color: var(--cyan);
}

.faq-list details p {
  max-width: 62ch;
  margin: 0;
  padding: 0 3rem 1.25rem 0;
  color: var(--chalk);
}

/* --------------------------------------------------------------------------
   Closing section
   Black surface with a violet structural rule and the Interference field
   bleeding in from the corner, so violet stays inside its 7% budget.
   -------------------------------------------------------------------------- */

.closing-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section);
  padding-left: clamp(0.75rem, 1.5vw, 1.25rem);
  border-top: 1px solid var(--line);
  background: var(--black);
  color: var(--white);
}

/* Woven texture. Two perpendicular thread sets at 4%, hard edged and tonal. */
.closing-section::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M0 1H6M1 0V6' fill='none' stroke='%23F7F7F5' stroke-opacity='.5' stroke-width='.5'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.04;
}

/* Violet structural rule, full bleed on the left edge. */
.closing-section::after {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(0.75rem, 1.5vw, 1.25rem);
  background: var(--violet);
  content: "";
}

.closing-interference {
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -8rem;
  width: min(24vw, 18rem);
  aspect-ratio: 1;
  opacity: 0.5;
  pointer-events: none;
}

.closing-interference svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Cyan edge accent, kept. */
.closing-section .container::after {
  content: none;
}

.closing-grid {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(2.5rem, 6vw, 7rem);
}

.closing-grid::after {
  position: absolute;
  top: -1.25rem;
  right: calc(var(--gutter) * -1);
  bottom: -1.25rem;
  width: 0.375rem;
  background: var(--cyan);
  content: "";
}

.closing-copy p {
  margin-top: 1.5rem;
  color: var(--chalk);
}

.closing-copy p + p {
  margin-top: 0.75rem;
}

.closing-cta {
  display: inline-flex;
  width: 100%;
  min-height: 3.75rem;
  align-items: center;
  align-self: end;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--white);
  background: var(--violet);
  color: var(--white);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 1rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter 160ms ease, transform 120ms ease;
}

.closing-cta:hover {
  filter: brightness(1.14);
  text-decoration: none;
}

.closing-cta:active {
  transform: scale(0.985);
}

.button-arrow {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 3rem;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.footer-lockup {
  width: clamp(8.5rem, 14vw, 12rem);
  height: auto;
}

.endline {
  margin: 1rem 0 0;
  color: var(--chalk);
}

.footer-meta {
  max-width: 26rem;
  color: var(--chalk);
  font-size: 0.8125rem;
  text-align: right;
}

.footer-meta p {
  margin: 0 0 0.5rem;
}

.noscript-message {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 1rem;
  border: 1px solid var(--error);
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  animation: reveal 500ms var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
}

.js .section-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}

.js .section-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 67.5rem) {
  .hero-grid {
    gap: 2.5rem;
  }

  .hero-title {
    font-size: clamp(3rem, 7vw, 5rem);
  }

  .hero-art {
    min-height: 28rem;
  }

  .section-copy {
    grid-column: 4 / span 9;
  }

  .section-marker {
    grid-column: span 3;
  }

  .standard-close,
  .access-qualification {
    grid-template-columns: 1fr;
  }

  .standard-close p,
  .access-qualification p {
    max-width: 64ch;
  }
}

@media (max-width: 47.5rem) {
  .site-header,
  .header-inner {
    min-height: 4rem;
  }

  .header-cta {
    min-height: 2.5rem;
    font-size: 0.6875rem;
  }

  .hero {
    min-height: 0;
    padding-top: 4.5rem;
  }

  .hero::before {
    background-position: 50% 62%;
    background-size: 150vw auto;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 62%, #000 10%, transparent 76%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 62%, #000 10%, transparent 76%);
  }

  .hero-grid,
  .editorial-grid,
  .closing-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy,
  .hero-art,
  .section-marker,
  .section-copy {
    grid-column: 1;
  }

  .hero-title {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .hero-art {
    min-height: 18rem;
    margin-top: 1rem;
  }

  .interference {
    width: min(100%, 21rem);
  }

  .art-label {
    right: 0.25rem;
    bottom: 0;
  }

  .status-rail {
    margin-top: 3rem;
    grid-template-columns: 1fr;
  }

  .status-item,
  .status-item:first-child {
    padding: 1rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .status-item:last-child {
    border-bottom: 0;
  }

  .section-marker {
    min-height: 0;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 1.5rem;
  }

  .access-marker {
    margin-top: 0;
  }

  .editorial-band h2,
  .closing-section h2 {
    font-size: clamp(2.75rem, 13vw, 4.75rem);
  }

  .body-grid {
    grid-template-columns: 1fr;
  }

  .spec-readout div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .state-section {
    min-height: 31rem;
  }

  .state-ripple {
    right: -13rem;
    bottom: -13rem;
    width: 34rem;
  }

  .access-heading {
    grid-template-columns: 1fr;
  }

  .text-cta {
    justify-self: start;
  }

  .access-list li {
    grid-template-columns: 3rem 1fr;
  }

  .access-list p {
    grid-column: 2;
  }

  .closing-interference {
    right: -6rem;
    bottom: -10rem;
    width: 14rem;
    opacity: 0.32;
  }

  .closing-grid::after {
    content: none;
  }

  .closing-cta {
    margin-top: 0.5rem;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-meta {
    text-align: left;
  }
}

@media (max-width: 35rem) {
  .header-inner {
    gap: 1rem;
  }

  .brand-lockup {
    width: 8rem;
  }

  .header-cta {
    max-width: none;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
  }

  .klaviyo-form-Twicbi [data-testid="form-row"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .klaviyo-form-Twicbi [data-testid="form-component"],
  .klaviyo-form-Twicbi input,
  .klaviyo-form-Twicbi button {
    width: 100% !important;
    max-width: none !important;
  }

  .klaviyo-form-Twicbi [data-testid="form-component"]:last-child {
    width: 100% !important;
  }

  .klaviyo-form-Twicbi button {
    min-width: 0 !important;
    border-left: 1px solid var(--white) !important;
  }

  .hero-title {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .body-grid,
  .access-qualification {
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .field-violet,
  .field-cyan {
    animation: none !important;
  }

  .js .reveal,
  .js .section-reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .klaviyo-embed-shell,
  .closing-cta,
  .text-cta,
  .noscript-message {
    display: none !important;
  }

  body,
  .light-band,
  .access-section,
  .closing-section {
    background: #fff;
    color: #000;
  }

  body * {
    color: #000 !important;
    text-shadow: none !important;
  }

  .title-chroma::before,
  .title-chroma::after {
    content: none !important;
  }
}