/* ============================================================
   Xiyu.Studio — Sections
   ============================================================ */

.skip-link{
  position:absolute; top:-100px; left:16px; z-index:1000;
  background:var(--ink-900); color:#fff; padding:12px 20px; border-radius:var(--radius-s);
  transition: top var(--dur-s);
}
.skip-link:focus{ top:16px; }

/* ---------- Cursor orb ---------- */
.cursor-orb{
  position: fixed;
  top:0; left:0;
  width: 22px; height:22px;
  border-radius:50%;
  border: 1.5px solid rgba(12,12,16,0.5);
  pointer-events:none;
  z-index: 999;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  transition: width var(--dur-m) var(--ease-out), height var(--dur-m) var(--ease-out), border-color var(--dur-m), background var(--dur-m);
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .cursor-orb{ display:block; }
}
.cursor-orb.is-active{
  width: 54px; height:54px;
  background: rgba(255,255,255,0.9);
  border-color: transparent;
}

/* ---------- Ambient aura (palette shifts per section via JS) ---------- */
.aura{
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  --aura-a: rgba(241,94,111,0.16);
  --aura-b: rgba(110,99,240,0.14);
  background:
    radial-gradient(60% 60% at 20% 28%, var(--aura-a), transparent 72%),
    radial-gradient(60% 60% at 80% 72%, var(--aura-b), transparent 72%);
  transform: translateZ(0);
}

/* ---------- Spine (full-doc scroll line) ---------- */
.spine-svg{
  position:absolute;
  top:0; left:0;
  width:100%;
  overflow:visible;
  pointer-events:none;
  z-index:-1;
}
.spine-path{
  fill:none;
  stroke: url(#ribbonGradientV);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.6;
}
.spine-bead{
  fill: var(--grad-2);
  filter: drop-shadow(0 0 8px rgba(110,99,240,0.8));
}
@media (max-width: 1023px){
  .spine-svg{ display:none; }
}

/* ---------- Nav ---------- */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 20px 0;
  transition: padding var(--dur-m) var(--ease-out), background var(--dur-m), backdrop-filter var(--dur-m), box-shadow var(--dur-m);
}
.nav.is-scrolled{
  padding: 12px 0;
  background: rgba(253,252,251,0.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner{
  display:flex;
  align-items:center;
  gap: var(--space-4);
}
.nav__logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size: 18px;
  margin-right:auto;
}
.logo-mark{ width: 34px; height: auto; object-fit: contain; }
.nav__logo-dot{ color: var(--grad-1); }

.nav__links{
  display:none;
  align-items:center;
  gap: var(--space-4);
  font-size: 14px;
  font-weight:500;
  color: var(--ink-500);
}
.nav__links a{ position:relative; padding: 4px 0; transition: color var(--dur-s); }
.nav__links a:hover{ color: var(--ink-900); }
.nav__links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background: var(--gradient-ribbon);
  transition: width var(--dur-m) var(--ease-out);
}
.nav__links a:hover::after{ width:100%; }
.nav__about{
  font: inherit;
  background: none;
  border: none;
  padding: 4px 0;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-s);
}
.nav__about:hover{ color: var(--ink-900); }
.nav__about::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background: var(--gradient-ribbon);
  transition: width var(--dur-m) var(--ease-out);
}
.nav__about:hover::after{ width:100%; }

@media (min-width: 900px){
  .nav__links{ display:flex; }
}
.nav__cta{ padding: 12px 22px; font-size:14px; display:none; }
@media (min-width: 640px){ .nav__cta{ display:inline-flex; } }

.nav__burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px;
  border:1px solid var(--line); border-radius:50%;
  background:none; cursor:pointer;
}
@media (min-width: 900px){ .nav__burger{ display:none; } }
.nav__burger span{ width:16px; height:2px; margin-inline:auto; background:var(--ink-900); border-radius:2px; transition: transform var(--dur-m) var(--ease-out), opacity var(--dur-m); }
.nav__burger[aria-expanded="true"] span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 899px){
  .nav__links{
    position: fixed; inset: 76px 16px auto 16px;
    background: var(--paper-0);
    border-radius: var(--radius-m);
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.3);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-m) var(--ease-out), opacity var(--dur-m);
    font-size: 18px;
  }
  body.menu-open .nav__links{
    display: flex;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  padding-top: 120px;
  padding-bottom: var(--space-6);
  overflow:hidden;
}
.hero__bloom{
  position:absolute; inset:-20% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(closest-side, rgba(241,94,111,0.22), transparent 70%) 15% 20% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(69,172,229,0.20), transparent 70%) 85% 10% / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(46,229,184,0.20), transparent 70%) 75% 75% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(110,99,240,0.16), transparent 70%) 10% 80% / 60% 60% no-repeat;
  filter: blur(40px);
  z-index:0;
}
.hero__inner{ position:relative; z-index:2; max-width: 900px; margin-inline:auto; text-align:center; }
.hero__headline{
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  margin-top: var(--space-3);
}
.reveal-line{ display:block; overflow:hidden; padding-bottom: .05em; text-align:center; }
.reveal-line > span{ display:inline-block; transform: translateY(110%); }

.pill{
  display:inline-block;
  line-height: 1;
  padding: 0.19em 0.55em;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.32);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -10px 16px rgba(255,255,255,0.12),
    0 8px 24px -12px rgba(12,12,16,0.15);
}

.hero__foot{ margin-top: 44px; display:flex; flex-direction:column; align-items:center; gap: 28px; }
.hero__foot .lead{ margin:0 auto; text-align:center; }
.hero__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--space-2); }


/* ---------- Section spacing baseline ---------- */
section{ padding-block: var(--space-7); }
.connector{
  position:relative;
  padding-block: 0;
}
.connector__stage{
  position:relative;
  overflow:hidden;
  min-height: min(92vh, 720px);
  display:flex;
  align-items:center;
  padding-block: var(--space-6);
}
@media (min-width: 900px){
  /* tall scroll track; the stage stays stuck (native sticky — no pin math)
     for the extra 85svh while the line draws, then releases pixel-perfectly */
  .connector{ height: 185svh; }
  .connector__stage{
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-block: 48px;
  }
}
.connector__rope{
  position:absolute;
  left:50%; top:50%;
  width: min(1600px, 96vw);
  height:auto;
  transform: translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.connector .container{ position:relative; z-index:1; }
/* statement follows the site headline voice (same as "Clarity saves lives.") */
.connector__text{
  margin:0;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align:center;
  color: var(--ink-900);
}
/* ---------- Philosophy ---------- */
/* track + native sticky stage, same mechanics as the connector */
.philosophy{ position:relative; }
.philosophy__stage{
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (min-width: 900px){
  .philosophy{ height: 165svh; padding-block: 0; }
  .philosophy__stage{
    position: sticky;
    top: 0;
    height: 100svh;
  }
  .philosophy .container{ width:100%; }
}
.philosophy__stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: var(--space-3);
}
.philosophy__stack .lead{ max-width: 52ch; margin:0; }

.ink-title .w{ display:inline-block; }

/* ---------- Logo hook ---------- */
.logo-hook{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block: var(--space-6);
  overflow:hidden;
}
.knot-wrap{ will-change: transform; }
.knot-video{
  display:block;
  width: min(84vw, 780px);
  height:auto;
  aspect-ratio: 16 / 9; /* reserve the box before metadata loads — no layout shift below */
}

/* ---------- Work ---------- */
.work__head{ max-width: 640px; margin-bottom: var(--space-5); }
.work__head .section-title{ margin-top: var(--space-2); }
.work__grid{
  display:grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .work__grid{ grid-template-columns: repeat(3, 1fr); }
}
.work-card{
  border-radius: var(--radius-l);
  overflow:hidden;
  background: var(--paper-1);
}
.work-card__media{
  aspect-ratio: 5/6;
  overflow:hidden;
  position:relative;
}
.work-card__media a{ display:block; width:100%; height:100%; }
.work-thumb{
  width:100%; height:100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.work-card:hover .work-thumb{ transform: scale(1.06) rotate(1deg); }
.work-card__meta{ padding: var(--space-3) var(--space-3) var(--space-4); }
.work-card__meta h3{ font-size: 1.15rem; line-height: 1.25; }
.work-card__meta p{ margin: 12px 0 0; color: var(--ink-500); font-size:14px; line-height: 1.6; }
.work-card__date{ display:block; margin-top: 20px; font-size:12px; color: var(--ink-300); letter-spacing:.05em; text-transform:uppercase; }
.work__more{ margin-top: var(--space-5); }

/* ---------- Services ---------- */
.services__title{ margin: var(--space-2) 0 var(--space-5); }
.services__list{ border-top: 1px solid var(--line); }
.service-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  cursor:pointer;
}
.service-item__row{
  display:grid;
  grid-template-columns: 40px 1fr auto 24px;
  align-items:center;
  gap: var(--space-2);
}
.service-item__index{
  display:flex; align-items:center; justify-content:center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-300);
  font-size:14px;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-m) var(--ease-out), color var(--dur-m);
}
.service-item[aria-expanded="true"] .service-item__index,
.service-item:hover .service-item__index,
.service-item:focus-within .service-item__index{
  background: var(--ink-900);
  color: var(--paper-0);
}
.service-item h3{ font-size: clamp(1.3rem, 2.6vw, 1.9rem); transition: color var(--dur-m); }
.service-item__quote{
  display:none;
  color: var(--ink-300);
  font-style: italic;
  font-size: 14px;
  text-align:right;
  transition: color var(--dur-m);
}
.service-item:hover .service-item__quote,
.service-item[aria-expanded="true"] .service-item__quote{ color: var(--ink-500); }
@media (min-width: 720px){ .service-item__row .service-item__quote{ display:block; } }
.service-item__chev{ width:22px; height:22px; color: var(--ink-300); transition: transform var(--dur-m) var(--ease-out); }
.service-item[aria-expanded="true"] .service-item__chev,
.service-item:hover .service-item__chev,
.service-item:focus-within .service-item__chev{ transform: rotate(180deg); color: var(--grad-2); }
.service-item[aria-expanded="true"] h3,
.service-item:hover h3,
.service-item:focus-within h3{ background: var(--gradient-ribbon); -webkit-background-clip:text; background-clip:text; color:transparent; }

.service-item__panel{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ease-in-out);
}
.service-item__panel-inner{
  overflow:hidden;
  min-height:0;
}
@media (min-width: 720px){
  /* align panel copy to the title column: 40px index + 16px gap */
  .service-item__panel-inner{ padding-left: 56px; padding-right: 56px; }
}
.service-item[aria-expanded="true"] .service-item__panel,
.service-item:hover .service-item__panel,
.service-item:focus-within .service-item__panel{ grid-template-rows: 1fr; }

/* staggered entrance for panel content */
.service-item__panel-inner > *{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 360ms ease, transform 420ms var(--ease-out);
}
.service-item[aria-expanded="true"] .service-item__panel-inner > *,
.service-item:hover .service-item__panel-inner > *,
.service-item:focus-within .service-item__panel-inner > *{
  opacity: 1;
  transform: translateY(0);
}
.service-item__panel-inner > *:nth-child(1){ transition-delay: 60ms; }
.service-item__panel-inner > *:nth-child(2){ transition-delay: 140ms; }
.service-item__panel-inner > *:nth-child(3){ transition-delay: 220ms; }
.service-item__panel-inner > *:nth-child(4){ transition-delay: 300ms; }

.service-item__panel p{
  margin: 0; padding-top: var(--space-3);
  color: var(--ink-700);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  max-width: 52ch;
}
.service-item__panel .service-item__label{
  padding-top: var(--space-4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.service-item__panel ul{
  list-style:none;
  margin: var(--space-2) 0 0;
  padding: 0 0 var(--space-2);
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.55;
}
@media (min-width: 900px){
  .service-item__panel ul{ columns: 2; column-gap: 40px; max-width: 64rem; }
}
.service-item__panel ul li{
  position:relative;
  padding-left: 24px;
  margin-bottom: 12px;
  break-inside: avoid;
}
.service-item__panel ul li::before{
  content:'';
  position:absolute;
  left:0; top: 0.52em;
  width: 8px; height: 8px;
  border-radius:50%;
  background: var(--gradient-ribbon);
}
.service-item__panel .service-item__note{
  padding: var(--space-2) 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 52ch;
}
.service-item__panel .service-item__note strong{ color: var(--ink-700); }

/* ---------- Formula ---------- */
.formula{ background: var(--paper-1); border-radius: var(--radius-l); margin-inline: var(--space-2); }
@media(min-width:900px){ .formula{ margin-inline: var(--space-5); } }
.formula__grid{
  display:grid; gap: var(--space-5); align-items:center;
}
@media (min-width: 900px){
  .formula__grid{ grid-template-columns: 1fr 1fr; }
}
.formula__equation{
  margin:0;
  font-family: var(--font-math);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.3;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  text-align:center;
  gap: 0.3em;
}
.formula__op{
  font-style: normal;
  font-weight: 400;
  color: var(--ink-300);
  margin-inline: 0.05em;
}
.formula__result{ font-weight: 600; }
.formula__noise{ position:relative; white-space:nowrap; }
.formula__strike{
  position:absolute;
  left:-4%; top:52%;
  width:108%; height:0.07em;
  border-radius: 999px;
  background: var(--grad-1);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events:none;
}

/* ---------- Positioning ---------- */
.positioning{ position:relative; overflow:hidden; }
.positioning .container{ position:relative; z-index:1; }
.positioning__bloom{
  position:absolute; inset:-10% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(closest-side, rgba(46,229,184,0.16), transparent 70%) 85% 15% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(110,99,240,0.14), transparent 70%) 10% 75% / 55% 55% no-repeat;
  filter: blur(40px);
  z-index:0;
}
.positioning__grid{
  display:grid; gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (min-width: 900px){
  .positioning__grid{ grid-template-columns: 1fr 1fr; }
}
.positioning__specs{
  display:grid;
  gap: 32px 40px;
  align-content:start;
}
@media (min-width: 640px){
  .positioning__specs{ grid-template-columns: 1fr 1fr; }
}
.positioning__specs .spec{
  position:relative;
  padding-top: 16px;
}
.spec__rule{
  position:absolute;
  top:0; left:0;
  width:100%; height:1px;
  background: var(--gradient-ribbon);
  opacity: 0.65;
}
.spec__label{
  display:block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-300);
  margin-bottom: 6px;
}
.spec__name{
  display:block;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

/* ---------- Process ---------- */
.process__phases{
  display:grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px){
  .process__phases{
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}
.phase-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  cursor:pointer;
}
@media (min-width: 720px){
  .phase-item{
    border-bottom:none;
    border-right: 1px solid var(--line);
    padding: var(--space-3) var(--space-3) var(--space-4);
  }
  .phase-item:last-child{ border-right:none; }
}
.phase-item__head{
  display:flex;
  align-items:center;
  gap: var(--space-2);
}
@media (min-width: 720px){
  .phase-item__head{ flex-direction:column; align-items:flex-start; gap:6px; }
}
.phase-item__index{
  font-size: 12px;
  font-weight:500;
  color: var(--ink-300);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.phase-item h3{
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  transition: color var(--dur-m);
  flex:1;
}
@media (min-width: 720px){ .phase-item h3{ flex:none; } }
.phase-item__chev{
  width:20px; height:20px; color: var(--ink-300);
  transition: transform var(--dur-m) var(--ease-out);
  margin-left:auto;
}
@media (min-width: 720px){ .phase-item__chev{ margin-left:0; } }
.phase-item[aria-expanded="true"] .phase-item__chev,
.phase-item:hover .phase-item__chev,
.phase-item:focus-within .phase-item__chev{ transform: rotate(180deg); color: var(--grad-2); }
.phase-item[aria-expanded="true"] h3,
.phase-item:hover h3,
.phase-item:focus-within h3{ background: var(--gradient-ribbon); -webkit-background-clip:text; background-clip:text; color:transparent; }

.phase-item__steps{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.phase-item__steps > *{ overflow:hidden; }
.phase-item[aria-expanded="true"] .phase-item__steps,
.phase-item:hover .phase-item__steps,
.phase-item:focus-within .phase-item__steps{ grid-template-rows: 1fr; }
.phase-item__steps ul{
  list-style:none; margin:0; padding-top: var(--space-2);
  display:grid; gap:8px;
}
.phase-item__steps li{
  display:flex; align-items:baseline; gap:8px;
  font-weight:500;
  color: var(--ink-700);
  font-size: 15px;
}
.phase-item__steps li span{
  font-size:12px; color: var(--ink-300); font-variant-numeric: tabular-nums;
}

/* ---------- Diagnose / Quiz ---------- */
.diagnose{ position:relative; overflow:hidden; }
.diagnose .container{ position:relative; z-index:1; }
.diagnose__bloom{
  position:absolute; inset:-10% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(closest-side, rgba(241,94,111,0.16), transparent 70%) 15% 20% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(69,172,229,0.16), transparent 70%) 85% 70% / 60% 60% no-repeat;
  filter: blur(40px);
  z-index:0;
}
.diagnose__grid{
  display:grid; gap: var(--space-5);
}
@media (min-width: 960px){
  .diagnose__grid{ grid-template-columns: 0.9fr 1.1fr; align-items:start; }
}
.quiz{
  background: rgba(255,255,255,0.32);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -10px 16px rgba(255,255,255,0.12),
    0 8px 24px -12px rgba(12,12,16,0.15);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  position:relative;
  min-height: 380px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.quiz__step{ display:none; }
.quiz__step.is-active{ display:block; animation: fadeUp var(--dur-l) var(--ease-out); }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
.quiz__q{ font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight:600; margin-bottom: var(--space-3); }
.quiz__options{ display:grid; gap: 10px; }
.quiz__options button{
  text-align:left;
  padding: 16px 20px;
  border-radius: var(--radius-m);
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -10px 16px rgba(255,255,255,0.12),
    0 8px 24px -12px rgba(12,12,16,0.15);
  cursor:pointer;
  font-size: 15px;
  transition: border-color var(--dur-m), transform var(--dur-m), background var(--dur-m);
}
.quiz__options button:hover{ border-color: var(--grad-2); transform: translateX(4px); }
.quiz__options button.is-selected{
  border-color: transparent;
  background: var(--gradient-ribbon); color:#fff;
}

.quiz__form{ display:grid; gap: var(--space-2); max-width: 420px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:13px; color: var(--ink-500); font-weight:500; }
.field input{
  padding: 14px 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--paper-0);
  font-size:15px;
  font-family:inherit;
}
.field input:focus{ outline: 2px solid var(--grad-2); outline-offset:1px; }
.quiz__form .btn{ margin-top: var(--space-1); justify-self:start; }

.quiz__result-title{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: var(--space-2) 0; }
.quiz__result-copy{ color: var(--ink-700); max-width: 52ch; margin-bottom: var(--space-2); }
.quiz__result-note{
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 0 var(--space-3);
}

.quiz__progress{
  position:absolute; top: var(--space-3); right: var(--space-4);
  display:flex; gap:6px;
}
.quiz__progress span{
  width:8px; height:8px; border-radius:50%;
  background: var(--ink-100);
  transition: background var(--dur-m);
}
.quiz__progress span.is-active{ background: var(--grad-2); }

/* ---------- Footer ---------- */
.footer{
  position:relative;
  background: var(--ink-900);
  color: var(--paper-0);
  padding-top: var(--space-7);
  padding-bottom: var(--space-4);
  overflow:hidden;
}
.footer__bloom{
  position:absolute; inset:0;
  background:
    radial-gradient(closest-side, rgba(241,94,111,0.25), transparent 70%) 10% 10% / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(46,229,184,0.2), transparent 70%) 90% 30% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(110,99,240,0.25), transparent 70%) 50% 100% / 70% 70% no-repeat;
  filter: blur(60px);
}
.footer .container{ position:relative; }
.footer__top{
  display:flex; flex-direction:column; gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(253,252,251,0.12);
}
@media (min-width: 900px){
  .footer__top{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.footer__cta{ font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 640px; }
.footer__cta-btn{ flex-shrink:0; }

.footer__grid{
  display:grid; gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid rgba(253,252,251,0.12);
}
@media (min-width: 720px){
  .footer__grid{ grid-template-columns: repeat(3, 1fr); }
}
.footer__col{ display:flex; flex-direction:column; gap: 10px; }
.footer__label{ color: rgba(253,252,251,0.4); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin: 0 0 6px; }
.footer__col a, .footer__col span{ color: rgba(253,252,251,0.85); font-size:15px; }
.footer__col a:hover{ color: var(--grad-4); }

.footer__wordmark{
  display:flex; align-items:center; gap:14px;
  padding-block: var(--space-5);
  font-size: clamp(2.4rem, 9vw, 7rem);
  font-weight:600;
}
.logo-mark--huge{ width: clamp(48px, 9vw, 110px); }

.footer__bottom{
  display:flex; flex-direction:column; gap:6px;
  font-size: 13px;
  color: rgba(253,252,251,0.4);
  padding-top: var(--space-3);
}
@media (min-width: 640px){
  .footer__bottom{ flex-direction:row; justify-content:space-between; }
}

/* ---------- About panel (half-page drawer from the left, house glass) ---------- */
.about-overlay{
  position:fixed; inset:0;
  z-index:200;
  background: rgba(12,12,16,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0;
  visibility:hidden;
}
.about-panel{
  position:fixed;
  top:0; left:0; bottom:0;
  width: min(50vw, 680px);
  z-index:201;
  background: rgba(253,252,251,0.85);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  color: var(--ink-900);
  /* positioning is owned entirely by GSAP (xPercent) — a CSS translate here
     gets baked in as a px offset and double-shifts the panel offscreen */
  visibility:hidden;
  /* rounded leading edge: the panel is a fixed frame that clips its
     scrolling inner — aura and Close stay pinned to the frame */
  border-radius: 0 28px 28px 0;
  overflow:hidden;
  /* soft, layered falloff — a wide ambient veil plus a tight contact shadow */
  box-shadow:
    40px 0 120px -40px rgba(12,12,16,0.28),
    8px 0 28px -12px rgba(12,12,16,0.10);
}
/* soft aura inside the panel, echoing the section blooms */
.about-panel::before{
  content:'';
  position:absolute;
  inset:-8% -20% auto -12%;
  height:55%;
  background:
    radial-gradient(50% 55% at 22% 30%, rgba(46,229,184,0.14), transparent 72%),
    radial-gradient(50% 55% at 78% 18%, rgba(110,99,240,0.12), transparent 72%);
  pointer-events:none;
}
@media (max-width: 899px){
  .about-panel{ width: min(92vw, 480px); }
}
.about-panel__close{
  /* absolute on the non-scrolling frame — always reachable */
  position: absolute;
  top: 20px; right: 24px;
  z-index: 2;
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(253,252,251,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-900);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor:pointer;
  transition: background var(--dur-m), color var(--dur-m), border-color var(--dur-m);
}
.about-panel__close:hover{
  background: var(--ink-900);
  color: var(--paper-0);
  border-color: transparent;
}
.about-panel__esc{
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-300);
  transition: border-color var(--dur-m), color var(--dur-m);
}
.about-panel__close:hover .about-panel__esc{
  border-color: rgba(253,252,251,0.4);
  color: rgba(253,252,251,0.75);
}
.about-panel__inner{
  position:relative;
  z-index:1;
  height:100%;
  overflow-y:auto;
  overscroll-behavior: contain;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.about-panel__letter{
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  padding: clamp(88px, 14vh, 130px) clamp(28px, 8%, 80px) var(--space-5);
}
/* hierarchy: eyebrow -> display thesis -> body -> philosophy label -> statement -> formula */
.about-panel__headline{
  margin: -6px 0 4px;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  max-width: 20ch;
}
.about-panel__text{
  margin:0;
  color: var(--ink-500);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: 0.005em;
  max-width: 46ch;
}
.about-panel__letter .eyebrow + .about-panel__statement{ margin-top: -4px; }
.about-panel__letter > .eyebrow:not(:first-child){ margin-top: var(--space-3); }
.about-panel__statement{
  margin:0;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.about-panel__formula{
  justify-content: flex-start;
  text-align: left;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
}
.about-panel__meta{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 12px var(--space-3);
  padding: var(--space-2) clamp(28px, 8%, 80px) var(--space-3);
  border-top: 1px solid var(--line);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.about-panel__figure{
  position:relative;
  margin:0;
  overflow:hidden; /* clips the over-scaled blurred video */
}
.about-panel__video{
  display:block;
  width:100%;
  height: min(72vh, 640px);
  object-fit: cover;
  /* soft ambient texture: blur softens the mark into drifting ribbons of color;
     the scale-up hides the blur's edge fringing */
  transform: scale(1.18);
  filter: blur(14px) saturate(135%);
}