/* ==========================================================================
   STARTLAB — Design System
   Ivoire / crème / taupe / brun chocolat + touche caramel.
   Display: Fraunces — Corps: Inter
   ========================================================================== */

:root{
  --ivory:      #F7F2E9;
  --cream:      #EFE6D4;
  --paper:      #FBF8F2;
  --taupe:      #A8967D;
  --taupe-dim:  #C9BCA6;
  --choco:      #2E241C;
  --choco-soft: #4A3C2E;
  --black:      #141009;
  --caramel:    #C6754A;
  --caramel-dim:#E7C9A8;
  --line:       rgba(46,36,28,0.12);
  --line-soft:  rgba(46,36,28,0.07);

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1360px;
  --gutter: clamp(24px, 5vw, 72px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ivory);
  color: var(--choco);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background: var(--choco); color: var(--ivory); }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

/* ---------- Grain texture overlay ---------- */
.grain{
  position: fixed; inset:0; z-index: 998; pointer-events:none;
  opacity: 0.035; mix-blend-mode: multiply;
  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");
}

/* ---------- Typography ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  display:flex;
  align-items:center;
  gap: 12px;
}
.eyebrow::before{
  content:"";
  width: 28px; height:1px;
  background: var(--caramel);
  display:inline-block;
}

h1, .h1{
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--black);
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 470;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--black);
}
h3, .h3{
  font-family: var(--font-display);
  font-weight: 460;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  color: var(--black);
}
.lede{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--choco-soft);
  max-width: 46ch;
}
.italic{ font-style: italic; }
.serif-num{ font-family: var(--font-display); font-variant-numeric: oldstyle-nums; }

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .5s var(--ease), background .4s ease, color .4s ease, border-color .4s ease;
  isolation: isolate;
  overflow: hidden;
}
.btn::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.28), transparent 60%);
  opacity:0; transition: opacity .4s ease;
  pointer-events:none; z-index:0;
}
.btn:hover::before{ opacity:1; }
.btn > *{ position:relative; z-index:1; }
.btn svg{ width:14px; height:14px; transition: transform .45s var(--ease); flex:none; }
.btn:hover svg{ transform: translateX(4px); }

.btn-dark{ background: var(--black); color: var(--ivory); }
.btn-dark:hover{ background: var(--choco-soft); }

.btn-line{ background: transparent; color: var(--black); border-color: var(--line); }
.btn-line:hover{ border-color: var(--black); background: rgba(20,16,9,0.04); }

.btn-ivory{ background: var(--ivory); color: var(--black); }
.btn-ivory:hover{ background: var(--caramel-dim); }

.btn-caramel{ background: var(--caramel); color: var(--ivory); }
.btn-caramel:hover{ background: var(--choco); }

.magnetic-target{ display:inline-block; }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition: padding .5s var(--ease), background .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  padding-top: 14px; padding-bottom: 14px;
  background: rgba(247,242,233,0.96);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line-soft);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--black);
}
.brand-mark{ width:22px; height:22px; flex:none; }
.brand small{
  display:block;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--taupe);
  margin-top: 2px;
}

.main-nav{ display:flex; align-items:center; gap: 40px; }
.main-nav ul{ display:flex; gap: 30px; }
.main-nav ul a{
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--choco-soft);
  position: relative; padding-bottom: 4px;
}
.main-nav ul a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--caramel);
  transition: right .4s var(--ease);
}
.main-nav ul a:hover::after{ right:0; }
.header-cta{ display:none; }
@media (min-width: 1080px){ .header-cta{ display:inline-flex; } }
.main-nav ul{ display:none; }
@media (min-width: 900px){ .main-nav ul{ display:flex; } }

.nav-toggle{
  display:flex; flex-direction:column; gap:5px; width:26px; background:none; border:none; padding:6px;
}
@media (min-width: 900px){ .nav-toggle{ display:none; } }
.nav-toggle span{ height:1px; width:100%; background: var(--black); transition: transform .35s var(--ease), opacity .35s ease; }

.mobile-nav{
  position: fixed; inset:0; z-index: 490;
  background: var(--black);
  color: var(--ivory);
  display:flex; flex-direction:column; justify-content:center; gap: 22px;
  padding: 40px var(--gutter);
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
}
.mobile-nav.open{ transform: translateY(0); }
.mobile-nav a:not(.btn){ font-family: var(--font-display); font-size: 34px; }
.mobile-nav .btn{ margin-top: 20px; align-self:flex-start; }

/* ---------- Scroll Thread (signature element) ---------- */
.thread-rail{
  position: fixed;
  left: 26px; top: 0; bottom:0;
  width: 40px;
  z-index: 400;
  display:none;
  pointer-events:none;
}
@media (min-width: 1180px){ .thread-rail{ display:block; } }
.thread-rail svg{ width:100%; height:100%; overflow:visible; }
.thread-line-bg{ stroke: var(--line); stroke-width:1.4; fill:none; }
.thread-line-fg{ stroke: var(--caramel); stroke-width:1.4; fill:none; }
.thread-dot{ fill: var(--ivory); stroke: var(--taupe); stroke-width: 1.3; transition: fill .4s ease, stroke .4s ease, r .3s ease; }
.thread-dot.active{ fill: var(--caramel); stroke: var(--caramel); }

/* ---------- Section base ---------- */
section{ position: relative; }
.section-pad{ padding: clamp(90px, 12vw, 168px) 0; }
.bleed-dark{ background: var(--black); color: var(--ivory); }
.bleed-dark h2, .bleed-dark h1, .bleed-dark h3{ color: var(--ivory); }
.bleed-cream{ background: var(--cream); }
.divider{ height:1px; background: var(--line); width:100%; }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding: 8px 14px; border-radius: 999px; border:1px solid var(--line); color: var(--choco-soft);
  background: var(--paper);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height: 100vh;
  min-height: 100svh;
  display:flex;
  align-items:center;
  padding-top: 120px;
  padding-bottom: 60px;
  overflow: hidden;
}
.hero-bg-glow{
  position:absolute; top:-10%; right:-10%; width:60%; height:70%;
  background: radial-gradient(circle at center, rgba(198,117,74,0.16), transparent 70%);
  filter: blur(10px);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items:center;
  position:relative;
  z-index:2;
}
@media (min-width: 980px){
  .hero-grid{ grid-template-columns: 1.05fr 0.95fr; gap: 40px; }
}
.hero-eyebrow{ margin-bottom: 26px; }
.hero h1{ overflow:hidden; }
.hero h1 .line{ display:block; overflow:hidden; padding-bottom: 0.06em; }
.hero h1 .line span{ display:block; transform: translateY(110%); }
.hero-sub{ margin-top: 28px; opacity:0; transform: translateY(16px); }
.hero-ctas{ margin-top: 40px; display:flex; flex-wrap:wrap; gap:16px; opacity:0; transform: translateY(16px); }
.hero-meta{ margin-top: 56px; display:flex; gap:36px; opacity:0; transform: translateY(16px); flex-wrap:wrap;}
.hero-meta div{ font-size:12px; color: var(--taupe); letter-spacing:.05em; text-transform:uppercase; }
.hero-meta strong{ display:block; font-family: var(--font-display); font-size:26px; color: var(--black); font-weight:480; letter-spacing:0; text-transform:none; }

/* Hero visual: laptop dashboard mock */
.hero-visual{ position:relative; }
.laptop-mock{
  position: relative;
  background: linear-gradient(160deg, #EFE6D4, #F7F2E9);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 60px 90px -40px rgba(46,36,28,0.35), 0 2px 0 rgba(255,255,255,0.6) inset;
  border: 1px solid var(--line);
  transform: perspective(1400px) rotateX(4deg) rotateY(-7deg);
  transform-style: preserve-3d;
}
.laptop-screen{
  background: var(--paper);
  border-radius: 12px;
  padding: 20px 20px 16px;
  border: 1px solid var(--line-soft);
  min-height: 320px;
}
.laptop-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.laptop-topbar .dots{ display:flex; gap:6px; }
.laptop-topbar .dots span{ width:8px; height:8px; border-radius:50%; background: var(--line); }
.laptop-topbar .title{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--taupe); font-weight:600; }

.mock-kpis{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:14px; }
.mock-kpi{ background: var(--ivory); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; }
.mock-kpi .lbl{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); }
.mock-kpi .val{ font-family: var(--font-display); font-size:20px; color:var(--black); margin-top:3px; }
.mock-kpi .delta{ font-size:10px; color: var(--caramel); font-weight:600; }

.mock-chart{ background: var(--ivory); border:1px solid var(--line-soft); border-radius:10px; padding:14px; display:flex; align-items:flex-end; gap:8px; height:88px; margin-bottom:14px; }
.mock-chart i{ display:block; flex:1; height:100%; background: linear-gradient(180deg, var(--taupe-dim), var(--taupe)); border-radius:3px 3px 0 0; transform-origin:bottom; transform:scaleY(0); }

.mock-tasks{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.mock-col{ background: var(--ivory); border:1px solid var(--line-soft); border-radius:10px; padding:10px; }
.mock-col .h{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); margin-bottom:8px; }
.mock-card{ background: var(--paper); border:1px solid var(--line-soft); border-radius:7px; padding:7px 8px; font-size:10px; margin-bottom:6px; color: var(--choco-soft); box-shadow: 0 1px 2px rgba(0,0,0,0.03); }

.float-chip{
  position:absolute; z-index:6; background: var(--paper); border:1px solid var(--line); border-radius:12px;
  padding: 10px 14px; font-size:11px; font-weight:600; letter-spacing:.04em; color: var(--choco);
  box-shadow: 0 18px 30px -14px rgba(46,36,28,0.28);
  display:flex; align-items:center; gap:8px;
  opacity:0; white-space:nowrap;
}
.float-chip .dot{ width:6px; height:6px; border-radius:50%; background: var(--caramel); flex:none; }
.hero-fly-chip{
  position:absolute; width:24px; height:24px; border-radius:50%;
  background: var(--caramel); color: var(--ivory);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 20px -6px rgba(198,117,74,0.55);
  pointer-events:none; z-index:5;
}
.hero-fly-chip svg{ width:12px; height:12px; }
.chip-1{ top:-6%; left:-6%; }
.chip-2{ top:6%; right:-8%; }
.chip-3{ bottom:14%; left:-10%; }
.chip-4{ bottom:-5%; right:8%; }
.laptop-mock{ z-index:1; }
@media (max-width: 640px){
  .float-chip{ display:none; }
}

/* ==========================================================================
   PROBLEM / CHAOS -> ORDER
   ========================================================================== */
.chaos-section{ min-height: 220vh; background: var(--black); color: var(--ivory); }
.chaos-sticky{ position: sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; overflow:hidden; }
.chaos-inner{ width:100%; position:relative; z-index:3; }
.chaos-head{ text-align:center; max-width: 760px; margin: 0 auto 8px; }
.chaos-head .eyebrow{ justify-content:center; color: var(--taupe-dim); }
.chaos-head .eyebrow::before{ background: var(--caramel); }
.chaos-lines{ margin-top: 48px; display:flex; flex-direction:column; gap: 6px; align-items:center; text-align:center; }
.chaos-line{
  font-family: var(--font-display); font-weight: 440;
  font-size: clamp(20px, 3vw, 34px);
  color: rgba(247,242,233,0.28);
  transition: color .5s ease;
}
.chaos-line.is-active{ color: var(--ivory); }
.chaos-final{ margin-top:56px; text-align:center; }
.chaos-final .h3{ color: var(--ivory); }
.chaos-final .caramel{ color: var(--caramel); }

.chaos-particles{ position:absolute; inset:0; z-index:1; }
.chaos-note{
  position:absolute;
  width: 74px; height: 74px;
  background: var(--cream);
  color: var(--choco);
  font-size: 9.5px; font-weight:700; letter-spacing:.02em;
  padding: 9px; border-radius: 3px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  display:flex; align-items:flex-start;
}
.chaos-note.alt{ background: var(--caramel-dim); }
.chaos-note.dark{ background: var(--choco-soft); color: var(--ivory); }

/* ==========================================================================
   FOUNDER STORY
   ========================================================================== */
.founder-grid{
  display:grid; grid-template-columns: 1fr; gap: 56px; align-items:center;
}
@media (min-width: 980px){ .founder-grid{ grid-template-columns: 0.85fr 1.15fr; gap: 88px; } }
.founder-media{ position:relative; }
.founder-media img{ border-radius: 4px; }
.founder-media .frame-a{ width: 100%; }
.founder-media .frame-b{
  position:absolute; width: 46%; bottom:-9%; right:-12%;
  border: 8px solid var(--ivory); box-shadow: 0 30px 60px -20px rgba(46,36,28,0.4);
}
.founder-quote{ font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height:1.35; color:var(--black); }
.founder-body p{ margin-top: 20px; color: var(--choco-soft); font-size: 16.5px; line-height:1.7; max-width: 56ch; }
.founder-signoff{ margin-top: 32px; display:flex; align-items:center; gap:14px; }
.founder-signoff .sig-name{ font-family: var(--font-display); font-size:17px; color: var(--black); }
.founder-signoff .sig-role{ font-size:12px; color: var(--taupe); letter-spacing:.03em; }
.founder-final{
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: clamp(19px,1.9vw,23px); color: var(--black); line-height:1.4;
}
.founder-final .caramel{ color: var(--caramel); font-style:italic; }

/* ==========================================================================
   METHOD / ROADMAP
   ========================================================================== */
.method-head{ max-width: 640px; margin-bottom: 72px; }
.roadmap-scroller{ position:relative; }
.roadmap-track{
  display:flex; gap: 0; overflow-x:auto; scroll-snap-type: x proximity;
  padding-bottom: 26px; -webkit-overflow-scrolling:touch;
  scrollbar-width: thin; scrollbar-color: var(--taupe) transparent;
}
.roadmap-line-svg{ position:absolute; left:0; right:0; top: 46px; height:4px; z-index:0; pointer-events:none; }
.roadmap-line-svg path{ stroke: var(--line); stroke-width:2; fill:none; }
.roadmap-line-svg path.fg{ stroke: var(--caramel); stroke-width:2; }

.rm-step{
  flex: 0 0 auto; width: clamp(190px, 22vw, 240px);
  padding-right: 26px; position:relative; z-index:1; scroll-snap-align:start;
  cursor:pointer;
}
.rm-num{
  width: 92px; height:92px; border-radius:50%; background: var(--paper);
  border: 1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: 26px; color: var(--taupe);
  transition: all .5s var(--ease); margin-bottom: 22px;
}
.rm-step.is-active .rm-num{ background: var(--black); border-color: var(--black); color: var(--caramel); transform: scale(1.06); }
.rm-title{ font-family: var(--font-body); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color: var(--black); margin-bottom:10px; }
.rm-desc{ font-size:13.5px; color: var(--choco-soft); line-height:1.55; max-width:26ch; opacity:0; max-height:0; overflow:hidden; transition: opacity .4s ease .1s, max-height .5s ease; }
.rm-step.is-active .rm-desc{ opacity:1; max-height:200px; }

/* ==========================================================================
   TOOLS
   ========================================================================== */
.tools-section{ overflow:hidden; }
.tools-grid{ display:grid; grid-template-columns:1fr; gap: 60px; align-items:center; }
@media (min-width: 980px){ .tools-grid{ grid-template-columns: 0.9fr 1.1fr; } }
.tools-stage{ position: relative; height: 460px; }
@media (max-width: 640px){ .tools-stage{ height: 380px; } .tool-window{ width: 128px; padding:9px 11px; font-size:10px; } .tools-center{ width:106px; height:106px; font-size:12px; padding:10px; } }
.tool-window{
  position:absolute; background: var(--paper); border:1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 48px -20px rgba(46,36,28,0.25);
  padding: 12px 14px; font-size:11px; font-weight:600; color: var(--choco);
  display:flex; align-items:center; gap:8px; width: 152px;
}
.tool-window .ico{ width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; background: var(--cream); flex:none; font-size:11px; }
.tools-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 132px; height: 132px; border-radius:50%; background: var(--black); color: var(--ivory);
  display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); font-size:14px; line-height:1.2; padding: 14px;
  box-shadow: 0 30px 60px -20px rgba(46,36,28,.5);
  z-index:5;
}
.tool-connector{ position:absolute; stroke: var(--line); stroke-width:1.4; fill:none; }
.tools-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }

/* ==========================================================================
   DASHBOARD EXPERIENCE
   ========================================================================== */
.dash-section{ background: var(--black); color: var(--ivory); }
.dash-head{ text-align:center; max-width: 640px; margin: 0 auto 60px; }
.dash-head .eyebrow{ justify-content:center; color: var(--taupe-dim); }
.dash-panel{
  background: var(--choco); border:1px solid rgba(247,242,233,0.1); border-radius: 18px;
  padding: clamp(18px,3vw,34px);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6);
}
.dash-toprow{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:14px;}
.dash-toprow .title{ font-family: var(--font-display); font-size:19px; }
.dash-toprow .sub{ font-size:12px; color: var(--taupe-dim); }
.dash-kpis{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-bottom: 20px; }
@media (min-width:760px){ .dash-kpis{ grid-template-columns: repeat(4,1fr); } }
.dash-kpi{ background: rgba(247,242,233,0.04); border:1px solid rgba(247,242,233,0.08); border-radius:12px; padding:16px; }
.dash-kpi .lbl{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--taupe-dim); }
.dash-kpi .val{ font-family: var(--font-display); font-size: clamp(24px,2.4vw,32px); margin-top:8px; color: var(--ivory); }
.dash-kpi .val.glow-pulse{ animation: kpiGlow 1.4s ease-out; }
@keyframes kpiGlow{
  0%{ text-shadow: 0 0 0 rgba(198,117,74,0); }
  45%{ text-shadow: 0 0 16px rgba(198,117,74,0.5); }
  100%{ text-shadow: 0 0 0 rgba(198,117,74,0); }
}
.dash-kpi .delta{ font-size:11px; font-weight:600; color: var(--caramel); margin-top:4px; }
.dash-main{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width: 860px){ .dash-main{ grid-template-columns: 1.3fr 1fr; } }
.dash-card{ background: rgba(247,242,233,0.04); border:1px solid rgba(247,242,233,0.08); border-radius:12px; padding:18px; }
.dash-card .h{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--taupe-dim); margin-bottom: 14px; }
.dash-bars{ display:flex; align-items:flex-end; gap:12px; height:120px; }
.dash-bars i{ display:block; flex:1; height:100%; background: linear-gradient(180deg, var(--caramel-dim), var(--caramel)); border-radius:4px 4px 0 0; transform: scaleY(0); transform-origin:bottom; opacity:0.9;}
.dash-tasks{ display:flex; flex-direction:column; gap:10px; }
.dash-task{ display:flex; align-items:center; gap:10px; font-size:12.5px; color: var(--ivory); }
.dash-task .box{ width:15px; height:15px; border-radius:4px; border:1px solid var(--taupe-dim); flex:none; display:flex; align-items:center; justify-content:center; }
.dash-task .box svg{ width:9px; height:9px; opacity:0; }
.dash-task.done .box{ background: var(--caramel); border-color: var(--caramel); }
.dash-task.done .box svg{ opacity:1; }
.dash-task.done span{ color: var(--taupe-dim); text-decoration: line-through; }

/* ==========================================================================
   THREE DOORS / OFFERS
   ========================================================================== */
.offers-stack{ position:relative; }
.offer-wrap{ position:relative; height: 145vh; }
.offer-wrap:last-child{ height:100vh; }
.offer-panel{
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
#offer-1{ z-index:1; }
#offer-2{ z-index:2; }
#offer-3{ z-index:3; }
.offer-inner{ width:100%; display:grid; grid-template-columns:1fr; gap:44px; align-items:center; position:relative; z-index:2;}
@media (min-width: 980px){ .offer-inner{ grid-template-columns: 1fr 1fr; gap: 70px; } }
.offer-num{ font-family: var(--font-display); font-size:15px; color: var(--caramel); margin-bottom:18px; letter-spacing:.05em; }
.offer-panel h2{ margin-bottom: 6px; }
.offer-sub{ font-family: var(--font-display); font-style:italic; font-size: clamp(18px,1.8vw,22px); color: var(--taupe); margin-bottom:24px; }
.offer-desc{ color: var(--choco-soft); font-size:16px; line-height:1.65; max-width: 46ch; margin-bottom: 26px; }
.offer-list{ display:flex; flex-direction:column; gap:10px; margin-bottom: 34px; }
.offer-list li{ display:flex; gap:10px; font-size:14px; color: var(--choco-soft); align-items:flex-start; }
.offer-list li::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--caramel); margin-top:8px; flex:none; }
.offer-media{ position:relative; border-radius: 6px; overflow:hidden; }
.offer-media img{ width:100%; height:100%; object-fit:cover; }
.offer-media .ratio{ position:relative; width:100%; padding-bottom:112%; }
.offer-media .ratio img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.offer-tagline{ position:absolute; bottom:0; left:0; right:0; padding: 22px 26px; background: linear-gradient(0deg, rgba(20,16,9,0.72), transparent); color:#fff; font-family:var(--font-display); font-size:15px; font-style:italic; }

#offer-1{ background: var(--ivory); }
#offer-2{ background: var(--cream); box-shadow: 0 -40px 80px -40px rgba(20,16,9,0.18); }
#offer-3{ background: var(--black); color: var(--ivory); box-shadow: 0 -40px 80px -40px rgba(20,16,9,0.35); }
#offer-3 h2, #offer-3 .offer-desc, #offer-3 .offer-list li{ color: var(--ivory); }
#offer-3 .offer-desc{ color: rgba(247,242,233,0.72); }
#offer-3 .offer-sub{ color: var(--caramel-dim); }

/* ==========================================================================
   DIAGNOSTIC
   ========================================================================== */
.diag-panel{
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(28px, 5vw, 60px);
  box-shadow: 0 40px 90px -50px rgba(46,36,28,0.4);
}
.diag-q{ display:none; }
.diag-q.active{ display:block; }
.diag-progress{ display:flex; gap:8px; margin-bottom: 40px; }
.diag-progress i{ height:2px; flex:1; background: var(--line); border-radius:2px; overflow:hidden; position:relative; }
.diag-progress i b{ position:absolute; inset:0; background: var(--caramel); transform: scaleX(0); transform-origin:left; transition: transform .5s var(--ease); }
.diag-progress i.done b{ transform: scaleX(1); }
.diag-options{ display:flex; flex-direction:column; gap:14px; margin-top: 30px; }
.diag-opt{
  text-align:left; background: var(--ivory); border:1px solid var(--line); border-radius:14px;
  padding: 20px 24px; font-size:16px; color: var(--choco); font-family: var(--font-body); font-weight:500;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  transition: border-color .35s ease, background .35s ease, transform .3s ease;
}
.diag-opt:hover{ border-color: var(--caramel); background: var(--paper); transform: translateX(4px); }
.diag-opt svg{ flex:none; width:16px; opacity:0.5; transition: transform .35s ease; }
.diag-opt:hover svg{ transform: translateX(4px); opacity:1; }
.diag-result{ display:none; text-align:center; }
.diag-result.active{ display:block; }
.diag-result .eyebrow{ justify-content:center; margin-bottom: 18px;}
.diag-result h3{ margin-bottom:14px; }
.diag-result p{ color: var(--choco-soft); max-width:52ch; margin: 0 auto 30px; font-size:16px; line-height:1.6; }
.diag-restart{ margin-top:22px; font-size:12px; text-decoration:underline; color: var(--taupe); text-underline-offset:3px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{ background: var(--black); color: var(--ivory); text-align:center; overflow:hidden; position:relative;}
.final-cta .wrap{ position:relative; z-index:2; }
.final-cta h2{ color: var(--ivory); max-width: 16ch; margin: 0 auto; }
.final-triplet{
  margin-top: 30px; display:flex; justify-content:center; gap: clamp(16px,4vw,48px); flex-wrap:wrap;
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-style:italic; color: var(--caramel-dim);
}
.final-ctas{ margin-top:48px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.final-meta{ margin-top: 70px; padding-top: 40px; border-top: 1px solid rgba(247,242,233,0.14); display:flex; justify-content:center; gap:48px; flex-wrap:wrap; text-align:center; }
.final-meta div{ font-size:12px; color: var(--taupe-dim); letter-spacing:.05em; text-transform:uppercase; line-height:1.8; }
.final-meta a{ color: var(--ivory); font-family: var(--font-display); font-size:16px; letter-spacing:0; text-transform:none; }
.final-meta a:hover{ color: var(--caramel-dim); }
.cta-glow{ position:absolute; top:20%; left:50%; transform:translateX(-50%); width:80%; height:60%; background: radial-gradient(circle, rgba(198,117,74,0.18), transparent 70%); pointer-events:none; }

/* ---------- Contact form ---------- */
.contact-form-wrap{ max-width: 640px; margin: 48px auto 0; }
.contact-form{ text-align:left; display:flex; flex-direction:column; gap:18px; }
.cf-row{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width: 640px){ .cf-row{ grid-template-columns:1fr 1fr; } }
.cf-field{ display:flex; flex-direction:column; gap:8px; }
.cf-field label{ font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--taupe-dim); }
.cf-field label span{ text-transform:none; font-weight:400; letter-spacing:0; opacity:0.7; }
.cf-field input, .cf-field select, .cf-field textarea{
  font-family: var(--font-body); font-size:15px; color: var(--ivory);
  background: rgba(247,242,233,0.05); border: 1px solid rgba(247,242,233,0.18); border-radius:10px;
  padding: 13px 16px; outline:none; transition: border-color .3s ease, background .3s ease;
  width:100%;
}
.cf-field select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6754A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; background-size:16px; padding-right:40px; }
.cf-field select option{ background: var(--choco); color: var(--ivory); }
.cf-field textarea{ resize: vertical; min-height:100px; font-family:var(--font-body); line-height:1.5; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{ border-color: var(--caramel); background: rgba(247,242,233,0.08); }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color: rgba(247,242,233,0.35); }
.cf-submit{ align-self:flex-start; margin-top:6px; }
.cf-submit[disabled]{ opacity:0.6; pointer-events:none; }
.cf-feedback{ font-size:13.5px; margin:0; min-height:20px; transition: opacity .3s ease; }
.cf-feedback.success{ color: var(--caramel-dim); }
.cf-feedback.error{ color: #E39C7A; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--ivory); padding-top: 70px; padding-bottom: 30px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap: 40px; padding-bottom: 50px; }
@media (min-width: 760px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .lede{ margin-top:16px; font-size:14.5px; }
.footer-col h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--taupe); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14px; color: var(--choco-soft); margin-bottom:11px; }
.footer-col a:hover{ color: var(--caramel); }
.footer-bottom{ padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12px; color: var(--taupe); }

/* ---------- Reveal utility ---------- */
.reveal{ opacity:0; transform: translateY(28px); }
.reveal-fade{ opacity:0; }

/* ---------- Section number tick ---------- */
.sec-index{
  position:absolute; top: 0; right: var(--gutter); font-family: var(--font-display); font-size:13px; color: var(--taupe-dim);
  display:none;
}
@media (min-width: 1180px){ .sec-index{ display:block; } }

/* ---------- Cursor ---------- */
.cursor-dot{
  position: fixed; width:8px; height:8px; border-radius:50%; background: var(--caramel);
  pointer-events:none; z-index:999; transform: translate(-50%,-50%); mix-blend-mode: normal;
  transition: transform .15s ease, opacity .2s ease;
  display:none;
}
@media (min-width: 900px){ .cursor-dot{ display:block; } }
.cursor-dot.grow{ transform: translate(-50%,-50%) scale(3.4); background: rgba(198,117,74,0.35); }

/* ---------- misc ---------- */
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top: 64px; }