/* ═══════════════════════════════════════════════════════════
   Be.My.Jewel — site styles
   Palette : deep brown · burnt orange · warm beige · off-white
             medium grey · dark charcoal
   Type    : PP Fragment (headings) · Inter 400 (subheads) · Inter 300 (body)
   ═══════════════════════════════════════════════════════════ */

/* ---------- fonts ----------------------------------------------------------
   All self-hosted as WOFF2, subset to Latin + the punctuation the site actually
   uses. PP Fragment is the licensed Pangram Pangram family; the kit ships no
   italic, so emphasis uses PP Fragment *Glare* — the designed high-contrast cut
   — rather than a browser-synthesised slant.

   Inter is ONE variable file covering weights 300–500, not three static cuts.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"PP Fragment"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../assets/fonts/PPFragment-SerifLight.woff2") format("woff2");
}
@font-face{
  font-family:"PP Fragment"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../assets/fonts/PPFragment-SerifRegular.woff2") format("woff2");
}
@font-face{
  font-family:"PP Fragment Glare"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../assets/fonts/PPFragment-GlareLight.woff2") format("woff2");
}
@font-face{
  font-family:"PP Fragment Glare"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../assets/fonts/PPFragment-GlareRegular.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-weight:300 500; font-style:normal; font-display:swap;
  src:url("../assets/fonts/inter-var.woff2") format("woff2-variations"),
      url("../assets/fonts/inter-var.woff2") format("woff2");
}

/* ---------- brand ---------- */
:root{
  --brown:      #43302B;
  --brown-dk:   #2E211D;
  --orange:     #C25B42;
  --orange-dk:  #A8452E;
  --orange-lt:  #D9805F;
  --beige:      #C3BC96;
  --beige-lt:   #DCD8BF;
  --beige-pale: #E7E4D2;
  --offwhite:   #EFEFE9;
  --grey:       #5B5757;
  --charcoal:   #2E2E2E;

  /* semantic — light context (default) */
  --bg:        var(--offwhite);
  --surface:   #F6F5F0;
  --surface-2: #E6E4D9;
  --fg:        var(--brown);
  --accent:    var(--orange);
  --accent-2:  var(--orange-dk);
  --on-accent: #FBFAF6;
  --muted:     rgba(67,48,43,.95);
  --muted-2:   rgba(67,48,43,.88);
  --line:      rgba(194,91,66,.28);
  --line-soft: rgba(67,48,43,.14);
  --shadow:    rgba(67,48,43,.16);

  /* type */
  --display: "PP Fragment", "Instrument Serif", "Bodoni Moda", Didot, Georgia, serif;
  --glare:   "PP Fragment Glare", "PP Fragment", "Instrument Serif", Didot, Georgia, serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  --pad: clamp(18px, 5vw, 84px);
  --maxw: 1280px;
}

/* ---------- dark / accent bands ---------- */
.band{ background:var(--bg); color:var(--fg); position:relative; z-index:1 }
.band--brown{
  --bg:var(--brown); --surface:rgba(239,239,233,.055); --surface-2:rgba(239,239,233,.09);
  --fg:var(--offwhite); --accent:var(--beige); --accent-2:var(--orange-lt); --on-accent:var(--brown-dk);
  --muted:rgba(239,239,233,.92); --muted-2:rgba(239,239,233,.8);
  --line:rgba(195,188,150,.34); --line-soft:rgba(239,239,233,.14);
  --shadow:rgba(0,0,0,.5);
}
.band--charcoal{
  --bg:var(--charcoal); --surface:rgba(239,239,233,.05); --surface-2:rgba(239,239,233,.085);
  --fg:var(--offwhite); --accent:var(--beige); --accent-2:var(--orange-lt); --on-accent:#1F1F1F;
  --muted:rgba(239,239,233,.92); --muted-2:rgba(239,239,233,.8);
  --line:rgba(195,188,150,.30); --line-soft:rgba(239,239,233,.13);
  --shadow:rgba(0,0,0,.55);
}
.band--orange{
  --bg:#B44F37; --surface:rgba(255,255,255,.1);
  --fg:#FBFAF6; --accent:#FBFAF6; --accent-2:var(--brown); --on-accent:var(--orange-dk);
  --muted:rgba(251,250,246,.96); --muted-2:rgba(251,250,246,.9);
  --line:rgba(251,250,246,.34); --line-soft:rgba(251,250,246,.2);
  --shadow:rgba(93,32,18,.3);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  background:var(--offwhite); color:var(--brown);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }
img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:0 }
button{ cursor:pointer }
::selection{ background:var(--orange); color:#FBFAF6 }

::-webkit-scrollbar{ width:9px }
::-webkit-scrollbar-track{ background:var(--surface-2) }
::-webkit-scrollbar-thumb{ background:rgba(194,91,66,.45); border-radius:9px }
::-webkit-scrollbar-thumb:hover{ background:var(--orange) }

/* headings — display serif */
h1,h2,h3,h4,.display{ font-family:var(--display); font-weight:400; letter-spacing:-.01em }
/* PP Fragment ships no italic — emphasis uses the Glare cut, not a fake slant.
   font-style:normal is required or the browser synthesises a slant on top. */
.lead em,.what__sticky em,.om-col em,.step__card em{ font-family:var(--glare); font-style:normal }
/* subheadings — Inter Regular */
.subhead,.sec-sub,.lead,.om-col h4,.dash__side h5,.foot__cols h6{ font-family:var(--sans); font-weight:400 }
/* paragraphs — Inter Light */
p,li{ font-weight:300 }

/* ---------- wordmark (PNG mask → paints in currentColor) ---------- */
.mark{
  display:block; aspect-ratio:473/64; background:currentColor;
  -webkit-mask:url(../assets/wordmark.png) left center/contain no-repeat;
          mask:url(../assets/wordmark.png) left center/contain no-repeat;
}

/* ---------- ambient background ---------- */
.bg-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:strict }
/* transform-only keyframes so these stay on the compositor and never repaint */
.orb{
  position:absolute; border-radius:50%; filter:blur(52px); opacity:.5;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
.orb--1{ width:46vw; height:46vw; left:-8vw; top:6vh;  background:radial-gradient(circle,rgba(195,188,150,.85),transparent 68%); animation:drift1 26s ease-in-out infinite }
.orb--2{ width:38vw; height:38vw; right:-6vw; top:38vh; background:radial-gradient(circle,rgba(194,91,66,.42),transparent 68%);  animation:drift2 32s ease-in-out infinite }
.orb--3{ width:34vw; height:34vw; left:34vw;  top:72vh; background:radial-gradient(circle,rgba(220,216,191,.9),transparent 68%);  animation:drift3 24s ease-in-out infinite }
@keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(6vw,-5vh,0) scale(1.14) } }
@keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0) scale(1.08) } 50%{ transform:translate3d(-7vw,7vh,0) scale(.92) } }
@keyframes drift3{ 0%,100%{ transform:translate3d(0,0,0) scale(.95) } 50%{ transform:translate3d(-5vw,-8vh,0) scale(1.16) } }

/* ---------- shared ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.wrap--wide{ max-width:1600px }
.wrap--narrow{ max-width:860px }

.section{ position:relative; z-index:1; padding:clamp(76px,11vh,150px) 0 }

.sec-head{ margin-bottom:clamp(38px,6vw,80px) }
.sec-head--center{ text-align:center; margin-inline:auto; max-width:860px }
.sec-num{
  display:inline-block; font-family:var(--sans); font-weight:400;
  font-size:clamp(10px,1.6vw,11px); letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:16px;
}
.band--brown .sec-num,.band--charcoal .sec-num,.band--orange .sec-num{ color:var(--accent) }
.sec-title{
  font-family:var(--display); font-weight:400; letter-spacing:-.018em; color:var(--fg);
  font-size:clamp(2.05rem,6.4vw,4.6rem); line-height:1.04;
}
.sec-title span{ display:block }
.sec-sub{ margin-top:20px; color:var(--muted); font-size:clamp(.98rem,1.5vw,1.14rem); max-width:60ch }
.sec-head--center .sec-sub{ margin-inline:auto }
.lead{ font-size:clamp(1.06rem,2vw,1.34rem); line-height:1.55; color:var(--fg) }
/* the intro runs as one ~90-word block, so it sits between lead and body size —
   full lead size at that length reads as a wall rather than an opening line */
.what__sticky .lead{ font-size:clamp(1rem,1.45vw,1.16rem); line-height:1.72 }
.what__sticky p + p{ margin-top:18px; color:var(--muted) }
em{ font-style:italic }

/* ---------- grain + progress ---------- */
/* No mix-blend-mode here on purpose: a full-viewport blended layer forces the
   whole page to re-composite on every scroll frame, which is what made scrolling
   stutter. Plain low opacity looks the same and costs nothing. */
.grain{
  position:fixed; inset:-16%; z-index:9998; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; will-change:transform;
}
@keyframes grain{
  0%,100%{ transform:translate3d(0,0,0) } 20%{ transform:translate3d(-3%,2%,0) }
  40%{ transform:translate3d(2%,-3%,0) } 60%{ transform:translate3d(-2%,-2%,0) } 80%{ transform:translate3d(3%,1%,0) }
}
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9997; background:rgba(67,48,43,.1) }
/* driven by scaleX so the scroll pass only ever writes a transform */
.scroll-progress span{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--beige),var(--orange),var(--orange-dk));
  will-change:transform;
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--offwhite);
  display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden }
.preloader__inner{ display:grid; justify-items:center; gap:26px; width:min(300px,68vw); color:var(--brown) }
.preloader__logo{ width:100%; opacity:0; animation:preIn 1s var(--ease) .1s forwards }
@keyframes preIn{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
.preloader__bar{ width:100%; height:1px; background:rgba(67,48,43,.16); overflow:hidden }
.preloader__bar span{ display:block; height:100%; width:0; background:var(--orange); transition:width .25s linear }
.preloader__meta{ font-size:11px; letter-spacing:.3em; color:var(--muted-2) }

/* ---------- ring cursor ---------- */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; will-change:transform }
.cursor{
  width:36px; height:36px; margin:-18px 0 0 -18px;
  border:1.4px solid var(--orange); border-radius:50%;
  display:grid; place-items:center; background:transparent;
  transition:width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease),
             border-color .4s var(--ease), border-width .4s var(--ease),
             background-color .4s var(--ease), opacity .3s;
}
.cursor__label{
  font-family:var(--sans); font-weight:400; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange-dk); opacity:0; transition:opacity .25s;
}
/* stays a ring on hover — just a wider, softer one */
.cursor.is-big{
  width:92px; height:92px; margin:-46px 0 0 -46px;
  border-width:1px; background:rgba(194,91,66,.1);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.cursor.is-big .cursor__label{ opacity:1 }
.cursor.is-hidden{ opacity:0 }
/* over dark bands the ring flips to beige */
.cursor.on-dark{ border-color:var(--beige) }
.cursor.on-dark.is-big{ background:rgba(195,188,150,.14) }
.cursor.on-dark .cursor__label{ color:var(--offwhite) }
.cursor-dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--orange);
  transition:background-color .4s, transform .25s var(--ease);
}
.cursor-dot.on-dark{ background:var(--beige) }
.cursor-dot.is-big{ transform:scale(0) }
@media (pointer:coarse),(max-width:900px){ .cursor,.cursor-dot{ display:none } }

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:clamp(12px,2vw,24px); color:var(--brown);
  padding:clamp(16px,2.4vw,26px) var(--pad);
  transition:padding .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease),
             backdrop-filter .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:11px var(--pad); color:var(--brown); background:rgba(239,239,233,.88);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:rgba(67,48,43,.12); box-shadow:0 10px 34px -26px var(--shadow);
}
.nav__brand{ display:block; width:clamp(122px,13vw,178px); transition:width .5s var(--ease) }
.nav.is-stuck .nav__brand{ width:clamp(108px,11vw,150px) }
.nav__links{ display:flex; gap:2px; margin-left:auto }
.nav__link{
  position:relative; font-size:12.5px; font-weight:400; letter-spacing:.03em;
  color:currentColor; opacity:.95; padding:8px 10px; white-space:nowrap; transition:opacity .35s, color .35s;
}
.nav__link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__link:hover{ opacity:1 }
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left }
.nav__link.is-active{ opacity:1; color:var(--orange-dk) }
.nav.is-stuck .nav__link.is-active{ color:var(--orange-dk) }

.nav__actions{ display:flex; align-items:center; gap:10px }
.nav__signin{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:100px;
  font-size:12.5px; font-weight:400; letter-spacing:.05em; color:currentColor; opacity:.9;
  border:1px solid currentColor; transition:opacity .35s, background-color .4s var(--ease), color .4s;
}
.nav__signin svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round }
.nav__signin:hover{ opacity:1; background:var(--brown); color:var(--offwhite) }
.nav.is-stuck .nav__signin{ border-color:rgba(67,48,43,.3) }
.nav.is-stuck .nav__signin:hover{ background:var(--brown); color:var(--offwhite); border-color:var(--brown) }

.nav__burger{ display:none; width:44px; height:44px; margin-left:auto; position:relative }
.nav__burger i{
  position:absolute; left:11px; width:22px; height:1.4px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s;
}
.nav__burger i:nth-child(1){ top:19px } .nav__burger i:nth-child(2){ top:25px }
.nav__burger.is-open{ color:var(--offwhite) }
.nav__burger.is-open i:nth-child(1){ transform:translateY(3px) rotate(45deg) }
.nav__burger.is-open i:nth-child(2){ transform:translateY(-3px) rotate(-45deg) }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:880; background:var(--brown); color:var(--offwhite);
  display:grid; place-items:center; opacity:0; visibility:hidden; overflow-y:auto;
  clip-path:circle(0% at calc(100% - 44px) 40px); transition:clip-path .8s var(--ease), opacity .3s, visibility .8s;
}
.menu.is-open{ opacity:1; visibility:visible; clip-path:circle(150% at calc(100% - 44px) 40px) }
.menu__list{ display:grid; gap:2px; padding:96px var(--pad) 48px; width:100% }
.menu__item{
  font-family:var(--display); font-size:clamp(1.55rem,7vw,2.7rem); line-height:1.3;
  display:flex; align-items:baseline; gap:16px; opacity:0; transform:translateY(24px);
  border-bottom:1px solid rgba(239,239,233,.15); padding:9px 0;
}
.menu.is-open .menu__item{ animation:menuIn .7s var(--ease) forwards }
.menu.is-open .menu__item:nth-child(1){ animation-delay:.10s }
.menu.is-open .menu__item:nth-child(2){ animation-delay:.15s }
.menu.is-open .menu__item:nth-child(3){ animation-delay:.20s }
.menu.is-open .menu__item:nth-child(4){ animation-delay:.25s }
.menu.is-open .menu__item:nth-child(5){ animation-delay:.30s }
.menu.is-open .menu__item:nth-child(6){ animation-delay:.35s }
.menu.is-open .menu__item:nth-child(7){ animation-delay:.40s }
.menu.is-open .menu__item:nth-child(8){ animation-delay:.45s }
@keyframes menuIn{ to{ opacity:1; transform:none } }
.menu__item em{ font-family:var(--sans); font-weight:400; font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--beige) }
.menu__item--signin{ color:var(--beige) }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:15px clamp(20px,2.6vw,30px); border-radius:100px;
  font-family:var(--sans); font-weight:400; font-size:clamp(12px,1.4vw,13.5px);
  letter-spacing:.08em; text-transform:uppercase; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), transform .4s var(--ease), border-color .4s;
}
.btn--sm{ padding:10px 19px; font-size:11.5px }
.btn--full{ width:100%; margin-top:6px }
.btn__ico svg{ width:15px; height:15px; fill:currentColor }

.btn--gold{ background:var(--orange-dk); color:#FBFAF6 }
.btn--gold::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--brown);
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn--gold:hover::before{ transform:translateY(0) }

.btn--ghost{ border:1px solid currentColor; color:inherit }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--brown);
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn--ghost:hover{ color:var(--offwhite) }
.btn--ghost:hover::before{ transform:translateY(0) }

.nav__cta{ border:1px solid currentColor; color:inherit }
.nav__cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--brown);
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.nav__cta:hover{ color:var(--offwhite) }
.nav__cta:hover::before{ transform:translateY(0) }
.nav.is-stuck .nav__cta{ border-color:rgba(67,48,43,.3) }
.nav.is-stuck .nav__cta::before{ background:var(--brown) }
.nav.is-stuck .nav__cta:hover{ color:var(--offwhite); border-color:var(--brown) }

.link-arrow{
  display:inline-flex; align-items:center; gap:12px; margin-top:28px;
  font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange-dk);
  border-bottom:1px solid rgba(194,91,66,.4); padding-bottom:6px;
}
.link-arrow svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease) }
.link-arrow:hover svg{ transform:translateX(7px) }

/* ═══════════════ HERO ═══════════════
   The video banner is out while a new film is produced. To put it back, restore
   .hero__media / .hero__scrim / .hero__grain / .hero__sound from git history and
   paste _film-section.html.bak back into index.html. */
.hero{
  position:relative; z-index:1; min-height:100svh; display:flex; align-items:center;
  padding:clamp(104px,13vh,136px) var(--pad) clamp(64px,9vh,96px); overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 78% 16%, rgba(195,188,150,.55), transparent 70%),
    radial-gradient(ellipse 62% 52% at 8% 90%, rgba(194,91,66,.16), transparent 68%),
    var(--offwhite);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.7 }
.hero__glow{
  position:absolute; left:52%; top:44%; width:min(1150px,120vw); aspect-ratio:1; z-index:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(194,91,66,.14) 0%, rgba(195,188,150,.18) 36%, transparent 66%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.85 } 50%{ transform:translate(-50%,-50%) scale(1.1); opacity:1 } }

.hero__inner{
  position:relative; z-index:3; width:100%; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,382px);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__copy{ min-width:0 }

/* ---------- sign-in panel ----------
   Mirrors www.bemyjewel.com/login: serif heading, underline fields, flat
   full-width button. One deliberate difference — the live page runs white text
   on a light beige (~2.4:1, well under AA), so the button here uses a deeper
   tone from the same family that clears 4.5:1. */
.signin{
  padding:clamp(28px,3.2vw,38px) clamp(26px,3vw,34px);
  border-radius:10px; border:1px solid rgba(67,48,43,.14);
  background:rgba(251,250,246,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -46px var(--shadow);
}
.signin__title{ font-family:var(--display); font-weight:400; font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1.1; color:var(--brown) }
.signin__sub{ margin-top:6px; font-size:.98rem; color:var(--muted-2) }
.signin__form{ display:grid; gap:4px; margin-top:clamp(22px,3vw,30px) }

/* underline fields */
.sfield{ position:relative; padding-top:18px }
.sfield input{
  width:100%; padding:8px 2px 10px; border:0; border-bottom:1px solid rgba(67,48,43,.28);
  border-radius:0; background:transparent; color:var(--brown); font-size:1.02rem; font-weight:300;
  transition:border-color .35s var(--ease);
}
.sfield input:focus{ outline:none; border-bottom-color:var(--orange) }
.sfield label{
  position:absolute; left:2px; top:26px; font-size:1.02rem; color:var(--muted-2);
  pointer-events:none; transition:all .3s var(--ease);
}
.sfield input:focus + label,
.sfield input:not(:placeholder-shown) + label{
  top:0; font-size:10.5px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-dk);
}
.sfield.is-bad input{ border-bottom-color:var(--orange-dk) }

.signin__forgot{
  justify-self:end; margin:12px 0 6px; font-size:.92rem; color:var(--brown);
  border-bottom:1px solid rgba(67,48,43,.4); padding-bottom:1px; transition:color .3s, border-color .3s;
}
.signin__forgot:hover{ color:var(--orange-dk); border-bottom-color:var(--orange-dk) }

.signin__btn{
  width:100%; margin-top:8px; padding:19px 20px; border-radius:2px;
  background:#7A7050; color:#FBFAF6;
  font-family:var(--sans); font-weight:400; font-size:13.5px;
  letter-spacing:.22em; text-transform:uppercase;
  transition:background-color .4s var(--ease), transform .4s var(--ease);
}
.signin__btn:hover{ background:var(--brown) }
.signin__btn:active{ transform:translateY(1px) }

.signin__note{ font-size:11px; line-height:1.5; color:var(--muted-2); text-align:center }
.signin__note.is-bad{ color:var(--orange-dk) }
.signin__foot{ margin-top:20px; text-align:center; font-size:.93rem; color:var(--muted-2) }
.signin__foot a{ color:var(--brown); font-weight:500; border-bottom:1px solid rgba(67,48,43,.5); padding-bottom:1px }
.signin__foot a:hover{ color:var(--orange-dk); border-bottom-color:var(--orange-dk) }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-weight:400; font-size:clamp(9.5px,1.5vw,11px);
  letter-spacing:.24em; text-transform:uppercase; color:rgba(67,48,43,.94);
  border:1px solid rgba(67,48,43,.2); padding:8px 17px; border-radius:100px;
  background:rgba(251,250,246,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(194,91,66,.55); animation:ping 2.4s infinite; flex:none }
@keyframes ping{ 70%{ box-shadow:0 0 0 9px rgba(194,91,66,0) } 100%{ box-shadow:0 0 0 0 rgba(194,91,66,0) } }
.hero__title{
  font-family:var(--display); font-weight:400; letter-spacing:-.022em; color:var(--brown);
  font-size:clamp(2.4rem,min(6.4vw,10.6vh),6rem); line-height:1.02; margin:clamp(14px,2.4vh,24px) 0 0;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em }
.hero__title i{ font-family:var(--glare); font-style:normal; color:var(--orange-lt) }
.hero__sub{ margin-top:clamp(16px,2.6vh,28px); max-width:56ch; color:rgba(67,48,43,.96); font-size:clamp(.95rem,1.6vw,1.1rem) }
.hero__sub strong{ color:var(--brown); font-weight:500 }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3.4vh,34px) }
/* two-up inside the narrower copy column so all four always fit */
.hero__proof{
  list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px clamp(20px,2.6vw,36px);
  margin-top:clamp(24px,4vh,44px); padding-top:clamp(16px,2.4vh,24px);
  border-top:1px solid rgba(67,48,43,.18);
  font-family:var(--sans); font-weight:400; font-size:clamp(10.5px,1.5vw,12.5px);
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2);
}
.hero__proof b{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.75rem); color:var(--orange); margin-right:8px; font-weight:400; vertical-align:-2px }
.hero__scroll{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:4;
  display:grid; justify-items:center; gap:10px;
}
.hero__scroll-line{ width:1px; height:44px; background:rgba(67,48,43,.2); overflow:hidden; position:relative }
.hero__scroll-line i{ position:absolute; inset:0; background:var(--orange); animation:scrollDown 2s var(--ease-io) infinite }
@keyframes scrollDown{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }
.hero__scroll-txt{ font-size:9.5px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--muted-2) }
@media (max-height:720px),(max-width:600px){ .hero__scroll{ display:none } }

/* ---------- marquee ---------- */
.marquee{
  position:relative; z-index:1; border-block:1px solid rgba(67,48,43,.12);
  padding:clamp(14px,2vw,20px) 0; overflow:hidden; background:var(--beige-pale);
}
/* Two identical groups side by side, each carrying its own trailing gap, so the
   track is exactly 2x one group and translateX(-50%) lands precisely on the seam.
   A plain `gap` on the track leaves it a half-gap short, which shows as a small
   jump every loop. Speed is constant and owned entirely by the keyframes. */
.marquee__track{
  display:flex; width:max-content;
  animation:march 46s linear infinite; will-change:transform;
}
.marquee__group{
  display:flex; align-items:center; flex:none;
  gap:clamp(20px,3vw,34px); padding-right:clamp(20px,3vw,34px);
}
.marquee__track span{ font-family:var(--glare); font-size:clamp(1.05rem,2.6vw,1.9rem); font-style:normal; color:rgba(67,48,43,.86); white-space:nowrap }
.marquee__track em{ color:var(--orange-dk); font-size:.8rem }
@keyframes march{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
.marquee:hover .marquee__track{ animation-play-state:paused }

/* ═══════════════ WHAT ═══════════════ */
.what__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,96px); align-items:start }
.what__sticky{ position:sticky; top:120px }
.what__cards{ display:grid; gap:16px }
.wcard{
  position:relative; padding:clamp(24px,3vw,34px) clamp(22px,3vw,34px) clamp(24px,3vw,34px) clamp(28px,3.4vw,40px);
  border:1px solid rgba(67,48,43,.13); border-radius:4px; background:var(--surface);
  transition:border-color .5s var(--ease), transform .5s var(--ease), background .5s, box-shadow .5s var(--ease);
  transform-style:preserve-3d;
}
.wcard:hover{ border-color:rgba(194,91,66,.45); background:#FBFAF6; box-shadow:0 26px 50px -34px var(--shadow) }
.wcard__ix{
  position:absolute; left:-1px; top:32px; width:3px; height:26px; background:var(--orange);
  text-indent:-999em; overflow:hidden; transition:height .5s var(--ease);
}
.wcard:hover .wcard__ix{ height:calc(100% - 64px) }
.wcard h3{ font-family:var(--display); font-size:clamp(1.32rem,2.4vw,1.62rem); margin-bottom:10px; color:var(--brown) }
.wcard p{ color:var(--muted); font-size:clamp(.92rem,1.4vw,.97rem) }

/* ═══════════════ COMPARE ═══════════════ */
.switcher{
  position:relative; display:flex; width:fit-content; max-width:100%; gap:4px; padding:5px;
  border:1px solid rgba(67,48,43,.16); border-radius:100px; margin:0 auto clamp(34px,5vw,52px);
  background:var(--surface);
}
.switcher__btn{
  position:relative; z-index:2; padding:11px clamp(14px,2.4vw,26px); border-radius:100px;
  font-family:var(--sans); font-weight:400; font-size:clamp(10.5px,1.5vw,12.5px);
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted); transition:color .4s; white-space:nowrap;
}
.switcher__btn.is-active{ color:#FBFAF6 }
.switcher__pill{
  position:absolute; z-index:1; top:5px; bottom:5px; border-radius:100px; background:var(--brown);
  transition:transform .55s var(--ease), width .55s var(--ease);
}
.panes{ position:relative }
.pane{ display:none; animation:paneIn .65s var(--ease) }
.pane.is-active{ display:block }
@keyframes paneIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

.chaos{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(28px,4vw,64px); align-items:center }
.chaos__bubbles{ position:relative; min-height:400px }
.bub{
  position:absolute; left:var(--x); top:var(--y); max-width:250px;
  padding:12px 17px; border-radius:16px 16px 16px 3px; font-size:clamp(.8rem,1.4vw,.9rem);
  background:var(--surface); border:1px solid rgba(67,48,43,.12); color:var(--muted);
  box-shadow:0 14px 28px -22px var(--shadow);
  animation:float 5.5s ease-in-out infinite; animation-delay:var(--d);
}
.bub:nth-child(even){ border-radius:16px 16px 3px 16px; background:var(--beige-pale) }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-.5deg) } 50%{ transform:translateY(-13px) rotate(.6deg) } }
.chaos__list{ list-style:none; display:grid; gap:14px }
.chaos__list li{
  padding-left:26px; position:relative; color:var(--muted); font-size:clamp(.92rem,1.5vw,1rem);
  border-bottom:1px solid rgba(67,48,43,.12); padding-bottom:14px;
}
.chaos__list li::before{ content:"✕"; position:absolute; left:0; top:2px; color:var(--orange-dk); font-size:.82rem }
.chaos__list--good{ margin-top:30px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 34px }
.chaos__list--good li::before{ content:"✦"; color:var(--orange) }
.chaos__list b{ color:var(--brown); font-weight:500 }

.order-mock{ border:1px solid rgba(67,48,43,.14); border-radius:8px; overflow:hidden; background:var(--surface); box-shadow:0 36px 70px -50px var(--shadow) }
.order-mock__bar{
  display:flex; align-items:center; gap:9px; padding:14px 18px; flex-wrap:wrap;
  border-bottom:1px solid rgba(67,48,43,.12); background:var(--beige-pale); font-size:clamp(.8rem,1.4vw,.9rem);
}
.order-mock__bar b{ font-weight:400; margin-left:8px }
.omdot{ width:9px; height:9px; border-radius:50%; background:rgba(67,48,43,.2); flex:none }
.chip{ font-family:var(--sans); font-weight:400; font-size:10px; letter-spacing:.13em; text-transform:uppercase; padding:5px 11px; border-radius:100px; border:1px solid currentColor; white-space:nowrap }
.chip--live{ margin-left:auto; color:var(--orange-dk) }
.chip--new{ color:#4F7050 } .chip--design{ color:#41627F }
.chip--prod{ color:var(--orange-dk) } .chip--ship{ color:var(--grey) }
.order-mock__body{ padding:clamp(20px,3.4vw,44px) }
.om-track{ position:relative; display:flex; justify-content:space-between; gap:4px; padding-bottom:12px }
.om-track__line{ position:absolute; left:8px; right:8px; top:7px; height:1px; background:rgba(67,48,43,.16) }
.om-track__line i{ display:block; height:100%; width:0; background:var(--orange); transition:width 1.6s var(--ease) }
.pane.is-active .om-track__line i{ width:58% }
.om-step{ position:relative; display:grid; justify-items:center; gap:10px; font-family:var(--sans); font-weight:400; font-size:clamp(8px,1.3vw,10.5px); letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); flex:1; text-align:center }
.om-step span{ width:15px; height:15px; border-radius:50%; border:1px solid rgba(67,48,43,.24); background:var(--surface) }
.om-step.is-done span{ background:var(--orange); border-color:var(--orange) }
.om-step.is-done{ color:var(--muted) }
.om-step.is-now span{ background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 0 rgba(194,91,66,.5); animation:ping 2s infinite }
.om-step.is-now{ color:var(--orange-dk) }
.om-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px); margin-top:clamp(28px,4vw,44px); padding-top:26px; border-top:1px solid rgba(67,48,43,.12) }
.om-col h4{ font-family:var(--sans); font-weight:400; font-size:clamp(.98rem,1.6vw,1.1rem); margin-bottom:8px; color:var(--orange-dk); letter-spacing:.01em }
.om-col p{ color:var(--muted); font-size:clamp(.88rem,1.4vw,.95rem) }

/* ═══════════════ STEPS ═══════════════ */
.steps{ position:relative; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.steps__rail{ position:absolute; left:calc(var(--pad) + 29px); top:0; bottom:0; width:1px }
.steps__rail-line{ position:sticky; top:0; height:100vh; width:1px; background:rgba(67,48,43,.14) }
.steps__rail-line i{
  display:block; width:100%; height:100%; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(180deg,var(--orange),var(--beige)); will-change:transform;
}
.steps__list{ list-style:none; display:grid; gap:clamp(42px,7vw,96px) }
.step{ display:grid; grid-template-columns:60px 1fr; gap:clamp(20px,4vw,60px); align-items:start }
.step__marker{ position:sticky; top:44vh; display:grid; place-items:center }
.step__marker span{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(67,48,43,.18); background:var(--offwhite); color:var(--muted-2);
  font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.08em;
  transition:all .55s var(--ease);
}
.step.is-active .step__marker span{ border-color:var(--orange-dk); color:#FBFAF6; background:var(--orange-dk); box-shadow:0 12px 30px -12px rgba(194,91,66,.6) }
.step__card{ max-width:760px }
.step__tag{ display:inline-block; font-family:var(--sans); font-weight:400; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--orange-dk); margin-bottom:12px }
.step__card h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,4.4vw,2.9rem); line-height:1.1; margin-bottom:14px; color:var(--brown) }
.step__card > p{ color:var(--muted); font-size:clamp(.96rem,1.6vw,1.09rem); max-width:62ch }
.step__card b{ color:var(--brown); font-weight:500 }
.step__bullets{ list-style:none; display:grid; gap:10px; margin-top:24px }
.step__bullets li{ position:relative; padding-left:24px; font-size:clamp(.88rem,1.4vw,.95rem); color:var(--muted-2) }
.step__bullets li::before{ content:""; position:absolute; left:0; top:11px; width:11px; height:1px; background:var(--orange) }

/* ═══════════════ ONE VIEW (charcoal band) ═══════════════ */
.dash{
  border:1px solid rgba(239,239,233,.14); border-radius:10px; overflow:hidden;
  background:#262626; box-shadow:0 50px 120px -50px rgba(0,0,0,.8);
}
.dash__chrome{
  display:flex; align-items:center; gap:clamp(12px,2vw,20px); flex-wrap:wrap;
  padding:14px clamp(14px,2vw,22px); border-bottom:1px solid rgba(239,239,233,.1); background:rgba(239,239,233,.045);
}
.dash__logo{ width:clamp(88px,10vw,104px); color:var(--offwhite); opacity:.95 }
.dash__tabs{ display:flex; gap:4px; flex-wrap:wrap }
.dtab{
  font-family:var(--sans); font-weight:400; font-size:clamp(10.5px,1.4vw,11.5px); letter-spacing:.05em;
  padding:7px 13px; border-radius:100px; color:rgba(239,239,233,.72);
  border:1px solid transparent; transition:all .4s var(--ease); display:inline-flex; align-items:center; gap:6px;
}
.dtab em{ font-style:normal; font-size:9.5px; opacity:.7 }
.dtab:hover{ color:var(--offwhite); border-color:rgba(239,239,233,.2) }
.dtab.is-active{ background:var(--orange-dk); color:#FBFAF6; border-color:var(--orange-dk) }
.dtab.is-active em{ opacity:.85 }
.dash__live{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--beige) }
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--orange-lt); box-shadow:0 0 0 0 rgba(217,128,95,.6); animation:ping 2s infinite; flex:none }

.dash__body{ display:grid; grid-template-columns:1fr 320px }
.dash__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; padding:clamp(14px,2vw,22px); align-content:start }
.ocard{
  position:relative; padding:16px; border:1px solid rgba(239,239,233,.11); border-radius:6px;
  background:rgba(239,239,233,.035); color:var(--offwhite); transition:all .5s var(--ease);
}
.ocard:hover{ border-color:rgba(217,128,95,.6); background:rgba(194,91,66,.14); transform:translateY(-4px) }
.ocard.is-out{ opacity:0; transform:scale(.94); pointer-events:none; position:absolute; visibility:hidden }
.ocard header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px }
.ocard header b{ font-size:11.5px; font-weight:400; letter-spacing:.1em; color:rgba(239,239,233,.8) }
.ocard h4{ font-family:var(--display); font-weight:400; font-size:clamp(1.1rem,1.8vw,1.22rem); line-height:1.25; margin-bottom:6px }
.ocard__meta{ font-size:11.5px; letter-spacing:.03em; color:rgba(239,239,233,.82); margin-bottom:14px }
.ocard__bar{ height:2px; background:rgba(239,239,233,.14); border-radius:2px; overflow:hidden; margin-bottom:11px }
.ocard__bar i{ display:block; height:100%; width:var(--p); background:var(--orange-lt); transition:width 1.2s var(--ease) }
.ocard footer{ display:flex; justify-content:space-between; gap:8px; font-size:11px; letter-spacing:.03em; color:rgba(239,239,233,.82) }
.dash .chip--new{ color:#9CCB99 } .dash .chip--design{ color:#9FC0DE }
.dash .chip--prod{ color:var(--orange-lt) } .dash .chip--ship{ color:rgba(239,239,233,.82) }
.due--hot{ color:var(--beige) }
.ocard.is-urgent{ border-color:rgba(195,188,150,.5); background:rgba(195,188,150,.1) }
.ocard__flag{
  position:absolute; top:-9px; right:12px; font-family:var(--sans); font-weight:400; font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; background:var(--beige); color:var(--brown-dk);
  padding:4px 10px; border-radius:100px; animation:flagPulse 2.4s ease-in-out infinite;
}
@keyframes flagPulse{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(-3px); opacity:.82 } }

.dash__side{ border-left:1px solid rgba(239,239,233,.1); padding:clamp(16px,2vw,22px); background:rgba(0,0,0,.22) }
.dash__side h5{ font-family:var(--sans); font-weight:400; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--beige); margin-bottom:15px }
.feed{ list-style:none; display:grid; gap:14px; margin-bottom:28px }
.feed li{ display:grid; grid-template-columns:8px 1fr; gap:10px; font-size:12.5px; color:rgba(239,239,233,.92); line-height:1.55 }
.feed li em{ grid-column:2; font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(239,239,233,.78) }
.feed b{ color:var(--offwhite); font-weight:500 }
.fdot{ width:6px; height:6px; border-radius:50%; background:rgba(239,239,233,.24); margin-top:6px }
.fdot--gold{ background:var(--orange-lt); box-shadow:0 0 10px rgba(217,128,95,.7) }
.feed li.is-fresh{ animation:feedIn .6s var(--ease) }
@keyframes feedIn{ from{ opacity:0; transform:translateX(-10px) } to{ opacity:1; transform:none } }

.minicalc{ padding-top:22px; border-top:1px solid rgba(239,239,233,.1) }
.minicalc label{ display:flex; justify-content:space-between; font-size:11.5px; letter-spacing:.04em; color:rgba(239,239,233,.72); margin:13px 0 8px }
.minicalc label span{ color:var(--beige) }
.minicalc input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:2px; background:rgba(239,239,233,.18); border-radius:2px; cursor:pointer }
.minicalc input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--orange-lt); box-shadow:0 0 12px rgba(217,128,95,.6); cursor:grab }
.minicalc input[type=range]::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:var(--orange-lt) }
.minicalc__out{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:20px; padding-top:15px; border-top:1px solid rgba(239,239,233,.1) }
.minicalc__out span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(239,239,233,.7) }
.minicalc__out b{ font-family:var(--display); font-size:clamp(1.32rem,2.2vw,1.55rem); font-weight:400; color:var(--beige); font-variant-numeric:tabular-nums }
.minicalc__note{ margin-top:11px; font-size:10.5px; color:rgba(239,239,233,.64); line-height:1.5 }

/* ═══════════════ ROLES ═══════════════ */
.roles__tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(30px,4.5vw,44px) }
.rtab{
  display:inline-flex; align-items:baseline; gap:10px; padding:13px clamp(16px,2.4vw,27px); border-radius:100px;
  border:1px solid rgba(67,48,43,.18); font-family:var(--sans); font-weight:400;
  font-size:clamp(11px,1.5vw,12.5px); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); transition:all .45s var(--ease); background:var(--surface);
}
.rtab em{ font-style:normal; font-size:9.5px; color:var(--orange-dk); transition:color .4s }
.rtab:hover{ border-color:rgba(194,91,66,.5); color:var(--brown) }
.rtab.is-active{ background:var(--brown); border-color:var(--brown); color:#FBFAF6 }
.rtab.is-active em{ color:var(--beige) }

.roles__panels{ position:relative }
.rpanel{ display:none; grid-template-columns:1fr .92fr; gap:clamp(30px,6vw,84px); align-items:center }
.rpanel.is-active{ display:grid; animation:paneIn .7s var(--ease) }
.rpanel__text h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,4.4vw,3rem); line-height:1.08; margin-bottom:18px; color:var(--brown) }
.rpanel__text > p{ color:var(--muted); font-size:clamp(.98rem,1.6vw,1.05rem); max-width:56ch }
.ticks{ list-style:none; display:grid; gap:12px; margin-top:28px }
.ticks li{ position:relative; padding-left:30px; color:var(--muted); font-size:clamp(.92rem,1.5vw,.97rem) }
.ticks li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:7px;
  border-left:1.5px solid var(--orange); border-bottom:1.5px solid var(--orange); transform:rotate(-45deg);
}

/* phone */
.phone{
  width:min(250px,70%); margin-inline:auto; aspect-ratio:9/17.6; border-radius:34px; padding:10px;
  background:linear-gradient(150deg,#54403A,var(--brown-dk)); border:1px solid rgba(67,48,43,.3);
  box-shadow:0 40px 80px -40px var(--shadow), inset 0 1px 0 rgba(239,239,233,.12);
  position:relative; animation:hover 6s ease-in-out infinite;
}
@keyframes hover{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-16px) rotate(1deg) } }
.phone__notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:80px; height:19px; background:var(--brown-dk); border-radius:0 0 12px 12px; z-index:2 }
.phone__screen{ height:100%; border-radius:25px; background:#241A17; color:var(--offwhite); padding:32px 12px 15px; overflow:hidden; display:grid; gap:9px; align-content:start }
.ps-head{ display:flex; align-items:center; justify-content:space-between; font-size:9.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--beige); margin-bottom:5px }
.ps-card{ padding:13px; border-radius:8px; border:1px solid rgba(217,128,95,.45); background:rgba(194,91,66,.16) }
.ps-card b{ display:block; font-size:11.5px; font-weight:400; margin-bottom:7px }
.ps-card p{ font-size:10px; color:rgba(239,239,233,.7); margin-top:7px }
.ps-card .chip{ font-size:8.5px; padding:3px 8px; color:var(--orange-lt) }
.ps-bar{ height:2px; background:rgba(239,239,233,.16); border-radius:2px; margin-top:10px; overflow:hidden }
.ps-bar i{ display:block; height:100%; width:72%; background:var(--orange-lt) }
.ps-card--muted{ border-color:rgba(239,239,233,.12); background:rgba(239,239,233,.045) }

/* designer studio */
.studio{ border:1px solid rgba(67,48,43,.14); border-radius:8px; padding:clamp(22px,2.8vw,28px); background:var(--surface) }
.studio__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid rgba(67,48,43,.12) }
.studio__head b{ font-family:var(--display); font-size:clamp(1.1rem,2vw,1.3rem); font-weight:400; color:var(--brown) }
.studio__versions{ list-style:none; display:grid; gap:2px; margin:6px 0 16px }
.studio__versions li{
  display:flex; align-items:baseline; gap:12px; padding:13px 0; font-size:clamp(.9rem,1.5vw,.95rem);
  color:var(--brown); border-bottom:1px solid rgba(67,48,43,.1);
}
.studio__versions li span{
  flex:none; width:34px; height:22px; display:grid; place-items:center; border-radius:100px;
  font-family:var(--sans); font-weight:400; font-size:10.5px; letter-spacing:.06em;
  background:var(--orange-dk); color:#FBFAF6;
}
.studio__versions li.is-done{ color:var(--muted-2) }
.studio__versions li.is-done span{ background:transparent; border:1px solid rgba(67,48,43,.24); color:var(--muted-2) }
.studio__versions li em{ margin-left:auto; font-style:normal; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2) }
.studio__foot{ font-size:11.5px; letter-spacing:.06em; color:var(--muted-2) }

/* console */
.console{ border:1px solid rgba(67,48,43,.14); border-radius:8px; padding:clamp(20px,2.6vw,26px); background:var(--surface) }
.console__row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid rgba(67,48,43,.12); font-family:var(--sans); font-weight:400; font-size:clamp(10.5px,1.4vw,12px); letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2) }
.console__row b{ font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.5rem); font-weight:400; color:var(--brown); text-transform:none; letter-spacing:0 }
.console__row b.hot{ color:var(--orange-dk) }
.cbars{ display:flex; align-items:flex-end; gap:clamp(8px,1.6vw,12px); height:150px; padding:26px 0 0 }
.cbars i{ position:relative; flex:1; height:var(--h); background:linear-gradient(180deg,var(--orange),rgba(195,188,150,.5)); border-radius:3px 3px 0 0; transform-origin:bottom; animation:barUp 1.1s var(--ease) backwards }
.cbars i:nth-child(1){ animation-delay:.05s } .cbars i:nth-child(2){ animation-delay:.13s }
.cbars i:nth-child(3){ animation-delay:.21s } .cbars i:nth-child(4){ animation-delay:.29s }
.cbars i:nth-child(5){ animation-delay:.37s }
@keyframes barUp{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
.cbars em{ position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-style:normal; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2) }

/* bench */
.bench{ border:1px solid rgba(67,48,43,.14); border-radius:8px; padding:clamp(22px,2.8vw,28px); background:var(--surface) }
.bench__job b{ display:block; font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.4rem); font-weight:400; margin-bottom:6px; color:var(--brown) }
.bench__job span{ font-size:11.5px; letter-spacing:.06em; color:var(--muted-2) }
.bench__steps{ list-style:none; margin-top:24px; display:grid; gap:2px }
.bench__steps li{ position:relative; padding:12px 0 12px 36px; font-size:clamp(.9rem,1.5vw,.95rem); color:var(--muted-2); border-bottom:1px solid rgba(67,48,43,.1) }
.bench__steps li::before{ content:""; position:absolute; left:6px; top:16px; width:11px; height:11px; border-radius:50%; border:1px solid rgba(67,48,43,.24) }
.bench__steps li::after{ content:""; position:absolute; left:11px; top:27px; bottom:-2px; width:1px; background:rgba(67,48,43,.14) }
.bench__steps li:last-child::after{ display:none }
.bench__steps li.is-done{ color:var(--muted) }
.bench__steps li.is-done::before{ background:var(--orange); border-color:var(--orange) }
.bench__steps li.is-now{ color:var(--orange-dk) }
.bench__steps li.is-now::before{ background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 0 rgba(194,91,66,.55); animation:ping 2s infinite }

/* ═══════════════ CAPS ═══════════════ */
.caps__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1px; background:rgba(67,48,43,.13); border:1px solid rgba(67,48,43,.13) }
.cap{ position:relative; padding:clamp(24px,3vw,42px); background:var(--offwhite); overflow:hidden; transition:background .5s var(--ease) }
.cap:hover{ background:var(--surface) }
.cap::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(194,91,66,.14), transparent 68%);
  opacity:0; transition:opacity .45s;
}
.cap:hover::before{ opacity:1 }
.cap__ico{ width:26px; height:26px; fill:var(--orange); stroke:none; margin-bottom:20px; transition:transform .5s var(--ease) }
.cap:hover .cap__ico{ transform:translateY(-4px) scale(1.08) }
.cap h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.24rem,2.2vw,1.42rem); margin-bottom:9px; position:relative; color:var(--brown) }
.cap p{ color:var(--muted); font-size:clamp(.88rem,1.4vw,.94rem); position:relative }

/* ═══════════════ QUOTE (orange band) ═══════════════ */
.quote{ text-align:center; padding-block:clamp(84px,15vh,190px) }
.quote blockquote{ font-family:var(--glare); font-weight:400; font-style:normal; font-size:clamp(1.6rem,5.6vw,3.9rem); line-height:1.16; color:var(--fg) }
.quote blockquote span{ display:block }
.quote__by{ margin-top:30px; font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:#FBFAF6 }

/* ═══════════════ FAQ ═══════════════ */
.acc__item{ border-bottom:1px solid rgba(67,48,43,.14) }
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(20px,2.6vw,26px) 0; text-align:left; font-family:var(--display);
  font-size:clamp(1.08rem,2.6vw,1.6rem); font-weight:400; color:var(--brown); transition:color .4s;
}
.acc__q:hover{ color:var(--orange-dk) }
.acc__q i{ position:relative; width:14px; height:14px; flex:none }
.acc__q i::before,.acc__q i::after{ content:""; position:absolute; background:var(--orange); transition:transform .45s var(--ease) }
.acc__q i::before{ left:0; right:0; top:6.5px; height:1px }
.acc__q i::after{ top:0; bottom:0; left:6.5px; width:1px }
.acc__item.is-open .acc__q i::after{ transform:rotate(90deg) }
.acc__item.is-open .acc__q{ color:var(--orange-dk) }
.acc__a{ overflow:hidden; height:0; transition:height .5s var(--ease) }
.acc__a p{ padding:0 0 26px; color:var(--muted); max-width:66ch; font-size:clamp(.94rem,1.5vw,1rem) }

/* ═══════════════ DEMO ═══════════════ */
.demo{ position:relative; overflow:hidden }
.demo__glow{
  position:absolute; left:50%; top:0; width:min(1000px,120vw); aspect-ratio:1; transform:translate(-50%,-40%);
  background:radial-gradient(circle, rgba(195,188,150,.5), transparent 62%);
}
.form{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:8px; position:relative }
.field{ position:relative }
.field--full{ grid-column:1/-1 }
.form .btn{ grid-column:1/-1 }
.field input,.field select,.field textarea{
  width:100%; padding:20px 18px 8px; border:1px solid rgba(67,48,43,.2); border-radius:4px;
  background:var(--surface); color:var(--brown); font-size:.97rem; font-weight:300;
  transition:border-color .4s, background .4s;
}
.field textarea{ resize:vertical; min-height:96px; padding-top:26px }
.field select{ padding-top:22px; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 3px),calc(100% - 15px) calc(50% + 3px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--orange); background:#FBFAF6 }
.field label{ position:absolute; left:19px; top:18px; font-size:.95rem; color:var(--muted-2); pointer-events:none; transition:all .3s var(--ease) }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:7px; font-size:10px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-dk);
}
.label--static{ top:7px !important; font-size:10px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-dk) !important }
.field.is-bad input,.field.is-bad textarea{ border-color:var(--orange-dk); background:rgba(194,91,66,.07) }
.form__note{ grid-column:1/-1; text-align:center; font-size:11.5px; color:var(--muted-2); margin-top:4px }
.form__note.is-ok{ color:var(--orange-dk) }

/* ═══════════════ FOOTER (brown band) ═══════════════ */
.foot{ padding:clamp(48px,7vw,88px) 0 30px }
.foot__top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:clamp(30px,4.4vw,44px); border-bottom:1px solid rgba(239,239,233,.14) }
.foot__logo{ width:clamp(150px,20vw,190px); color:var(--offwhite) }
.foot__tag{ font-family:var(--glare); font-style:normal; font-size:clamp(1.08rem,2.2vw,1.3rem); color:var(--beige) }
.foot__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(24px,3.4vw,34px); padding:clamp(30px,4.4vw,44px) 0 }
.foot__cols h6{ font-family:var(--sans); font-weight:400; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--beige); margin-bottom:14px }
.foot__cols a{ display:block; color:rgba(239,239,233,.88); font-size:.93rem; padding:5px 0; transition:color .3s, transform .3s var(--ease) }
.foot__cols a:hover{ color:var(--offwhite); transform:translateX(5px) }
.foot__credit{ color:var(--beige) }
.foot__base{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid rgba(239,239,233,.14); font-size:10.5px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2) }

/* ═══════════════ REVEALS + PARALLAX ═══════════════ */
[data-reveal]{ opacity:0; will-change:opacity,transform }
[data-reveal="fade"]{ transform:translateY(24px) }
[data-reveal="rise"]{ transform:translateY(52px) }
[data-reveal="scale"]{ transform:translateY(40px) scale(.96) }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1.15s var(--ease) }
[data-reveal="lines"]{ opacity:1 }
[data-reveal="lines"] span{ display:block; overflow:hidden }
[data-reveal="lines"] span > i{ display:block; font-style:inherit; transform:translateY(105%); transition:transform 1.1s var(--ease) }
[data-reveal="lines"].is-in span > i{ transform:none }
[data-reveal="lines"].is-in span:nth-child(2) > i{ transition-delay:.09s }
[data-reveal="lines"].is-in span:nth-child(3) > i{ transition-delay:.18s }

[data-parallax]{ will-change:transform }

/* stagger children of a revealed group */
[data-stagger] > *{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .9s var(--ease) }
[data-stagger].is-in > *{ opacity:1; transform:none }

.hero__title .word{ display:inline-block; transform:translateY(105%); opacity:0 }
.hero__title .line.is-in .word{ animation:wordUp 1.2s var(--ease) forwards }
@keyframes wordUp{ to{ transform:none; opacity:1 } }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1240px){
  .dash__body{ grid-template-columns:1fr 280px }
}
@media (max-width:1240px){
  .nav__links{ display:none } .nav__actions{ display:none } .nav__burger{ display:block }
  .what__grid{ grid-template-columns:1fr } .what__sticky{ position:static }
  .dash__body{ grid-template-columns:1fr } .dash__side{ border-left:0; border-top:1px solid rgba(239,239,233,.1) }
  .rpanel{ grid-template-columns:1fr } .rpanel__viz{ order:-1 }
  .chaos{ grid-template-columns:1fr }
  /* below two columns the absolute bubble coordinates collide — let them flow */
  .chaos__bubbles{ min-height:0; display:flex; flex-wrap:wrap; gap:12px 16px; justify-content:center }
  .chaos__bubbles .bub{ position:static; animation-name:floatSoft }
  .hero__inner{ grid-template-columns:1fr; gap:36px }
  .signin{ max-width:420px }
}
@keyframes floatSoft{ 0%,100%{ transform:translateY(0) rotate(-.5deg) } 50%{ transform:translateY(-7px) rotate(.5deg) } }

@media (max-width:900px){
  .dash__grid{ grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)) }
  .om-cols{ grid-template-columns:1fr; gap:20px }
}
@media (max-width:720px){
  .form{ grid-template-columns:1fr }
  .step{ grid-template-columns:42px 1fr; gap:16px }
  .step__marker span{ width:42px; height:42px; font-size:10.5px }
  .steps__rail{ left:calc(var(--pad) + 20px) }
  .foot__top{ flex-direction:column; align-items:flex-start; gap:14px }
  .orb{ filter:blur(44px) }
}
@media (max-width:560px){
  .switcher{ width:100% }
  .switcher__btn{ flex:1; padding:11px 6px }
  .om-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 8px }
  .om-track__line{ display:none }
  .dash__grid{ grid-template-columns:1fr }
}
@media (max-width:400px){
  .hero__proof{ grid-template-columns:1fr }
  .hero__actions .btn{ width:100% }
  .rtab{ width:100%; justify-content:flex-start }
}

/* ── Laptop (1280px and below) ── */
@media (max-width:1280px){
  :root{ --pad:40px }
  .hero__title{ font-size:clamp(2.4rem,4vw,3.6rem) }
  .section__title{ font-size:clamp(2rem,3.5vw,3rem) }
}

/* ── Tablet (900px and below) ── */
@media (max-width:900px){
  :root{ --pad:28px }

  /* Nav */
  .nav__links{ display:none }
  .nav__actions{ display:none }
  .nav__burger{ display:block }

  /* Hero */
  .hero{ padding-top:80px; padding-bottom:60px }
  .hero__inner{ grid-template-columns:1fr; gap:40px }
  .hero__copy{ text-align:center }
  .hero__eyebrow{ justify-content:center }
  .hero__actions{ justify-content:center; flex-wrap:wrap }
  .hero__proof{ justify-content:center }
  .signin{ max-width:100%; width:100% }

  /* Section headings */
  .section__title{ font-size:clamp(1.8rem,4vw,2.6rem) }
  .section__sub{ font-size:1rem; max-width:540px; margin-left:auto; margin-right:auto }
  .section__head{ text-align:center }
  .section__head .btn{ margin:0 auto }

  /* Steps */
  .steps{ padding-top:60px; padding-bottom:60px }

  /* Roles panel */
  .rpanel{ grid-template-columns:1fr }
  .rpanel__viz{ order:-1 }
  .rtabs{ flex-wrap:wrap; gap:8px }

  /* Dashboard */
  .dash__body{ grid-template-columns:1fr }
  .dash__side{ border-left:0; border-top:1px solid rgba(239,239,233,.1) }
  .dash__grid{ grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)) }

  /* Chaos bubbles */
  .chaos{ grid-template-columns:1fr }
  .chaos__bubbles{ min-height:0; display:flex; flex-wrap:wrap; gap:12px 16px; justify-content:center }
  .chaos__bubbles .bub{ position:static; animation-name:floatSoft }

  /* Footer */
  .foot__top{ flex-direction:column; align-items:flex-start; gap:20px }
  .foot__cols{ gap:20px }
}

/* ── Mobile (600px and below) ── */
@media (max-width:600px){
  :root{ --pad:20px }

  /* Hero */
  .hero{ padding-top:70px; padding-bottom:48px }
  .hero__title{ font-size:clamp(1.9rem,7vw,2.4rem) }
  .hero__sub{ font-size:0.95rem }
  .hero__actions{ flex-direction:column; align-items:stretch }
  .hero__actions .btn{ width:100%; text-align:center }
  .hero__proof{ grid-template-columns:1fr 1fr; gap:12px }

  /* Sign-in panel */
  .signin{ padding:24px 20px }
  .signin__title{ font-size:1.1rem }

  /* Sections */
  .section__title{ font-size:clamp(1.6rem,6.5vw,2rem) }
  .section__sub{ font-size:0.9rem }

  /* Steps */
  .form{ grid-template-columns:1fr }
  .step{ grid-template-columns:42px 1fr; gap:14px }
  .step__marker span{ width:42px; height:42px; font-size:10.5px }
  .steps__rail{ left:calc(var(--pad) + 20px) }

  /* Roles */
  .rtab{ width:100%; justify-content:flex-start }
  .rtabs{ flex-direction:column }
  .rpanel__copy{ padding:24px 0 }

  /* Dashboard */
  .dash__grid{ grid-template-columns:1fr }
  .om-cols{ grid-template-columns:1fr; gap:16px }
  .om-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 8px }
  .om-track__line{ display:none }

  /* Switcher */
  .switcher{ width:100% }
  .switcher__btn{ flex:1; padding:11px 6px; font-size:0.8rem }

  /* FAQ / What grid */
  .what__grid{ grid-template-columns:1fr }
  .what__sticky{ position:static }

  /* Footer */
  .foot__top{ gap:16px }
  .foot__cols{ grid-template-columns:1fr 1fr; gap:16px }
  .foot__brand{ max-width:100% }

  /* Orb */
  .orb{ filter:blur(44px) }
}

/* ── Small mobile (400px and below) ── */
@media (max-width:400px){
  .foot__cols{ grid-template-columns:1fr }
  .hero__proof{ grid-template-columns:1fr }
}


/* ═══════════════ HOW IT WORKS VIDEO ═══════════════ */
.how-vid-wrap {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 24px 72px rgba(42,36,32,.14);
  line-height: 0;
}
.how-vid-wrap video {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════ MOTION PREFERENCE ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  [data-reveal],[data-stagger] > *{ opacity:1 !important; transform:none !important }
  [data-reveal="lines"] span > i{ transform:none !important }
  .hero__title .word{ transform:none !important; opacity:1 !important }
  .grain,.bg-field{ display:none }

}