/* ==========================================================
   THE TRY — design tokens
   Ink   #14120F   Paper #F4EFE4   Charcoal #1E1B16
   Signal #FF4423  Stone(dark) #A39C8E  Stone(light) #8C8578
   Display: Fraunces · Body: Inter · Utility: Space Mono
   ========================================================== */

:root{
  --ink:#14120F;
  --paper:#F4EFE4;
  --charcoal:#1E1B16;
  --signal:#FF4423;
  --signal-deep:#A6321A;
  --stone-on-ink:#A39C8E;
  --stone-on-paper:#8C8578;
  --line-on-ink:rgba(244,239,228,.14);
  --line-on-paper:rgba(30,27,22,.14);
  --radius:4px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:-.01em;
}

button{font-family:'Inter',sans-serif;}

/* ---------- INTRO CURTAIN ---------- */

.intro-curtain{
  position:fixed;
  inset:0;
  background:var(--ink);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:curtainOut 1.1s ease forwards .35s;
}
.intro-curtain span{
  font-family:'Fraunces',serif;
  font-size:2rem;
  letter-spacing:.06em;
  color:var(--paper);
  opacity:0;
  animation:markIn .5s ease forwards .1s;
}
@keyframes markIn{to{opacity:1;}}
@keyframes curtainOut{
  to{transform:translateY(-100%);pointer-events:none;}
}
@media (prefers-reduced-motion: reduce){
  .intro-curtain{display:none;}
}

/* ---------- GRAIN OVERLAY ---------- */

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:900;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- CUSTOM CURSOR ---------- */

.cursor-dot{
  position:fixed;
  top:0;
  left:0;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--signal);
  pointer-events:none;
  z-index:1500;
  transform:translate(-50%,-50%);
  transition:width .2s ease, height .2s ease, opacity .2s ease;
  opacity:0;
}
@media(hover:hover) and (pointer:fine){
  .cursor-dot{opacity:1;}
}
.cursor-dot.is-active{width:26px;height:26px;}

/* ---------- NAV ---------- */

.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  background:rgba(20,18,15,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transform:translateY(-100%);
  transition:transform .4s ease, border-color .4s ease;
}
.nav.is-visible{transform:translateY(0);border-color:var(--line-on-ink);}

.nav-mark{
  font-family:'Space Mono',monospace;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--paper);
  text-decoration:none;
}

.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{color:var(--stone-on-ink);text-decoration:none;font-size:14px;}
.nav-links a:hover{color:var(--paper);}

.btn-small{padding:10px 20px;font-size:13px;}

/* ---------- SPLIT TEXT REVEAL ---------- */

.split-heading .word{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.08em;
}
.split-heading .word-inner{
  display:inline-block;
  transform:translateY(115%);
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-h1.is-loaded .word-inner{transform:translateY(0);}
.split-heading.is-visible .word-inner{transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .split-heading .word-inner{transform:none;transition:none;}
}

/* ---------- HERO ---------- */

.hero{
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:100px 24px 40px;
  background:var(--ink);
  position:relative;
  overflow:hidden;
}
.hero::before,
.section-ink::before,
.runway-sticky::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%), rgba(255,68,35,.10), transparent 60%);
  opacity:0;
  transition:opacity .4s ease;
  z-index:0;
}
.hero:hover::before,
.section-ink:hover::before,
.runway-sticky:hover::before{opacity:1;}

.hero-inner,.lookbook,.scroll-indicator{position:relative;z-index:1;}
.section-ink{position:relative;overflow:hidden;}
.section-ink > *{position:relative;z-index:1;}
.runway-sticky{position:relative;}
.runway-sticky > *{position:relative;z-index:1;}

.hero-inner{max-width:760px;}

.eyebrow{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  border:1px solid var(--line-on-ink);
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:32px;
}

.hero h1{
  font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:1.05;
  margin-bottom:26px;
}

.hero-text{
  font-size:1.15rem;
  color:var(--stone-on-ink);
  max-width:600px;
  margin:0 auto 36px;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.btn-primary{
  background:var(--signal);
  color:var(--ink);
  border:none;
  padding:16px 30px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease;
  will-change:transform;
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(255,68,35,.28);
}

.btn-secondary{
  background:transparent;
  border:1px solid var(--line-on-ink);
  color:var(--paper);
  padding:16px 30px;
  border-radius:var(--radius);
  font-size:15px;
  cursor:pointer;
  transition:.25s ease;
}
.btn-secondary:hover{
  border-color:var(--paper);
  transform:translateY(-3px);
}

.hero-trust{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:.03em;
  color:var(--stone-on-ink);
}

/* ---------- LOOKBOOK SLIDER (signature element) ---------- */

.lookbook{
  position:relative;
  width:min(680px,90vw);
  aspect-ratio:2/1.05;
  margin-top:56px;
  border:1px solid var(--line-on-ink);
  border-radius:8px;
  overflow:hidden;
  cursor:ew-resize;
  user-select:none;
}

.slide-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.slide-before{background:var(--ink);}
.slide-after{
  background:var(--paper);
  clip-path:inset(0 0 0 52%);
}

.slide-tag{
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.slide-before .slide-tag{color:var(--stone-on-ink);}
.slide-after .slide-tag{color:var(--stone-on-paper);}

.garment{width:clamp(70px,16vw,110px);height:auto;max-height:70%;}

.garment-visual{
  transition:opacity .25s ease, transform .25s ease;
}
.garment-visual.is-swapping{
  opacity:0;
  transform:scale(.94);
}

.style-switch{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}
.style-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid var(--stone-on-ink);
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:.25s ease;
}
.style-dot.is-active{background:var(--signal);border-color:var(--signal);transform:scale(1.3);}

.slider-handle{
  position:absolute;
  top:0;
  left:52%;
  height:100%;
  width:2px;
  background:var(--signal);
  transform:translateX(-50%);
}
.slider-handle span{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--signal);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}

.scroll-indicator{
  margin-top:34px;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--stone-on-ink);
}

/* ---------- PROBLEM STATEMENT ---------- */

.problem-statement{
  background:var(--ink);
  text-align:center;
  padding:110px 24px;
  border-top:1px solid var(--line-on-ink);
  border-bottom:1px solid var(--line-on-ink);
}

.problem-heading{
  font-style:italic;
  font-size:clamp(1.8rem,4.4vw,3.1rem);
  max-width:800px;
  margin:0 auto 26px;
  color:var(--paper);
}

.problem-sub{
  max-width:600px;
  margin:0 auto;
  color:var(--stone-on-ink);
  font-size:1.05rem;
}

/* ---------- A FAMILIAR MOMENT ---------- */

.moment{
  background:var(--paper);
  color:var(--charcoal);
  padding:110px 24px;
}

.moment-inner{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}

.moment-inner h2{
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  margin:18px 0 30px;
}

.moment-text{
  font-size:1.08rem;
  color:var(--stone-on-paper);
  margin-bottom:20px;
}

.moment-emphasis{
  color:var(--charcoal);
  font-weight:500;
}

/* ---------- TRUST STRIP ---------- */

.strip{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:36px;
  padding:26px 20px;
  border-top:1px solid var(--line-on-ink);
  border-bottom:1px solid var(--line-on-ink);
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--stone-on-ink);
  text-transform:uppercase;
}

/* ---------- MARQUEE ---------- */

.marquee{
  overflow:hidden;
  background:var(--ink);
  border-bottom:1px solid var(--line-on-ink);
  padding:22px 0;
}

.marquee-track{
  display:flex;
  width:max-content;
  gap:48px;
  animation:marqueeScroll 22s linear infinite;
}

.marquee-track span{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:1.4rem;
  color:var(--stone-on-ink);
  white-space:nowrap;
}
.marquee-track span:nth-child(odd){color:var(--signal);}

@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}

/* ---------- SECTIONS ---------- */

.section{
  padding:120px 24px;
}
.section-ink{background:var(--ink);color:var(--paper);}
.section-paper{background:var(--paper);color:var(--charcoal);}

.section-eyebrow{
  display:block;
  text-align:center;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:18px;
}
.section-paper .section-eyebrow{color:var(--signal-deep);}

.section h2{
  text-align:center;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  max-width:640px;
  margin:0 auto 64px;
}

/* RUNWAY — pinned horizontal scroll */

.runway-wrap{
  position:relative;
  height:340vh;
  background:var(--ink);
}

.runway-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.runway-head{
  padding-left:8vw;
  margin-bottom:48px;
}
.runway-head h2{margin:0;text-align:left;}
.runway-head .section-eyebrow{text-align:left;}

.runway-track{
  display:flex;
  gap:24px;
  padding-left:8vw;
  will-change:transform;
}

.runway-track .look-card{
  flex:0 0 min(400px,78vw);
  background:#1B1712;
  border:1px solid var(--line-on-ink);
  border-radius:8px;
}

.runway-hint{
  position:absolute;
  bottom:28px;
  right:8vw;
  font-family:'Space Mono',monospace;
  font-size:11px;
  color:var(--stone-on-ink);
}

@media(max-width:768px){
  .runway-wrap{height:auto;}
  .runway-sticky{position:static;height:auto;padding:90px 0;}
  .runway-track{overflow-x:auto;padding-bottom:20px;transform:none !important;}
  .runway-hint{display:none;}
}

/* LOOK card contents (also used above) */

.look-card{
  background:var(--ink);
  padding:36px 30px;
}

.look-number{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--signal);
  margin-bottom:22px;
}

.look-card h3{font-size:1.2rem;margin-bottom:12px;}
.look-card p{color:var(--stone-on-ink);font-size:.98rem;}

/* Convert grid (buying psychology section) */

.convert-grid{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:36px;
}

.convert-item{
  display:flex;
  gap:24px;
  align-items:flex-start;
  border-top:1px solid var(--line-on-ink);
  padding-top:28px;
}
.convert-item:first-child{border-top:none;padding-top:0;}

.convert-mark{
  font-family:'Space Mono',monospace;
  font-size:13px;
  color:var(--signal);
  flex:0 0 32px;
  padding-top:4px;
}

.convert-item h3{font-size:1.1rem;margin-bottom:10px;}
.convert-item p{color:var(--stone-on-ink);font-size:.98rem;max-width:640px;}

.convert-note{
  max-width:600px;
  margin:44px auto 0;
  text-align:center;
  font-family:'Space Mono',monospace;
  font-size:12px;
  color:var(--stone-on-ink);
}

/* Plain grid (paper section) */

.plain-grid{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:28px;
}

.plain-card{
  padding:8px 0;
  border-top:1px solid var(--line-on-paper);
  padding-top:24px;
}

.plain-card h3{font-size:1.15rem;margin-bottom:10px;color:var(--charcoal);}
.plain-card p{color:var(--stone-on-paper);font-size:.98rem;}

/* Timeline */

.timeline{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:34px;
}

.step{border-left:1px solid var(--line-on-ink);padding-left:22px;}

.step-number{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:13px;
  color:var(--signal);
  margin-bottom:14px;
}

.step h3{font-size:1.1rem;margin-bottom:10px;}
.step p{color:var(--stone-on-ink);font-size:.96rem;}

/* Swatches */

.swatches{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  max-width:820px;
  margin:0 auto;
}

.swatch{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:12px 20px;
  border:1px solid var(--line-on-paper);
  border-radius:2px;
  color:var(--charcoal);
}

/* Ledger */

.ledger{
  max-width:820px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-on-ink);
  border:1px solid var(--line-on-ink);
}

.ledger-col{background:var(--ink);padding:38px 34px;}
.ledger-col h3{font-size:1.15rem;margin-bottom:22px;color:var(--stone-on-ink);font-weight:400;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;}
.ledger-col ul{list-style:none;}
.ledger-col li{
  padding:12px 0;
  border-top:1px solid var(--line-on-ink);
  color:var(--stone-on-ink);
}
.ledger-col li:first-of-type{border-top:none;}

.ledger-col--accent{background:#1B1712;}
.ledger-col--accent h3{color:var(--signal);}
.ledger-col--accent li{color:var(--paper);}

/* Code window */

.code-window{
  max-width:620px;
  margin:0 auto;
  background:var(--ink);
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line-on-paper);
}

.code-window-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:12px 16px;
  background:#1B1712;
  border-bottom:1px solid var(--line-on-ink);
}

.code-dot{width:9px;height:9px;border-radius:50%;background:var(--stone-on-ink);opacity:.5;}

.code-window-title{
  margin-left:10px;
  font-family:'Space Mono',monospace;
  font-size:11px;
  color:var(--stone-on-ink);
}

.code-body{
  padding:26px 22px;
  font-family:'Space Mono',monospace;
  font-size:13px;
  line-height:1.8;
  color:var(--paper);
  overflow-x:auto;
}
.code-tag{color:var(--stone-on-ink);}
.code-attr{color:var(--signal);}
.code-str{color:#9FD8A0;}

.code-caption{
  text-align:center;
  color:var(--stone-on-paper);
  font-size:.92rem;
  margin-top:22px;
}

/* FAQ */

.faq{max-width:680px;margin:0 auto;}

.faq-item{border-top:1px solid var(--line-on-paper);}
.faq-item:last-child{border-bottom:1px solid var(--line-on-paper);}

.faq-q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:none;
  border:none;
  text-align:left;
  padding:22px 4px;
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:500;
  color:var(--charcoal);
  cursor:pointer;
}
.faq-q span{color:var(--signal-deep);font-size:1.2rem;transition:transform .3s ease;}
.faq-item.is-open .faq-q span{transform:rotate(45deg);}

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-a p{padding:0 4px 22px;color:var(--stone-on-paper);max-width:560px;}
.faq-item.is-open .faq-a{max-height:160px;}

/* Final CTA */

.final-cta{
  text-align:center;
  padding:140px 24px;
  background:var(--paper);
  color:var(--charcoal);
}

.final-cta h2{
  font-size:clamp(2rem,4.4vw,3.2rem);
  margin-bottom:22px;
}

.final-cta p{
  max-width:520px;
  margin:0 auto 36px;
  color:var(--stone-on-paper);
}

.final-cta .btn-primary{margin:0 auto;}

/* Footer */

footer{
  text-align:center;
  padding:64px 24px;
  background:var(--ink);
  color:var(--stone-on-ink);
}
footer h3{color:var(--paper);font-size:1.3rem;margin-bottom:12px;}
footer p{font-size:.9rem;margin-top:6px;}

/* Modal */

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(20,18,15,.8);
  z-index:999;
}

.modal-content{
  background:var(--paper);
  color:var(--charcoal);
  width:90%;
  max-width:520px;
  margin:80px auto;
  padding:40px;
  border-radius:8px;
  position:relative;
}

.modal-content h2{color:var(--charcoal);margin-bottom:24px;font-size:1.5rem;}

.modal-content input,
.modal-content textarea{
  width:100%;
  margin-top:12px;
  padding:14px;
  background:transparent;
  border:1px solid var(--line-on-paper);
  color:var(--charcoal);
  border-radius:var(--radius);
  font-family:'Inter',sans-serif;
}
.modal-content input::placeholder,
.modal-content textarea::placeholder{color:var(--stone-on-paper);}

.modal-content textarea{height:110px;resize:none;}

.modal-content .btn-primary{margin-top:20px;width:100%;}

#closeModal{
  position:absolute;
  top:16px;
  right:22px;
  font-size:26px;
  cursor:pointer;
  color:var(--stone-on-paper);
}

/* Reveal animation */

.look-card,.plain-card,.step,.swatch,.convert-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.look-card.is-visible,.plain-card.is-visible,.step.is-visible,.swatch.is-visible,.convert-item.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .look-card,.plain-card,.step,.swatch{transition:none;opacity:1;transform:none;}
}

/* Focus visibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
.slider-handle:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:2px;
}

/* Mobile */

@media(max-width:768px){
  .ledger{grid-template-columns:1fr;}
  .lookbook{aspect-ratio:3/2.2;}
  .section{padding:90px 20px;}
}
/* ==========================================================
   ADD-ON: paste this block at the end of your existing style.css
   Adds only the error-message style needed for form validation.
   Uses the same design tokens already defined in :root — no new
   colors, no layout changes elsewhere.
   ========================================================== */

.form-error{
  display:none;
  color:var(--signal-deep);
  background:rgba(255,68,35,.08);
  border:1px solid rgba(255,68,35,.25);
  border-radius:var(--radius);
  padding:10px 14px;
  font-size:.85rem;
  margin-top:14px;
}
.form-error.is-visible{display:block;}

.modal-content .btn-primary[disabled]{
  opacity:.6;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}