/* ---------- CraftFrame shared styles ---------- */
:root{
  --bg:#0a0a0a;
  --ink:#f5efe3;
  --dim:rgba(245,239,227,0.55);
  --line:rgba(245,239,227,0.14);
  --accent:#ff4628;
  --accent-soft:#f5b94a;
  --card:#141414;
  --grain:0.08;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#0a0a0a}

.serif{font-family:'Fraunces',serif;font-feature-settings:"ss01";font-optical-sizing:auto}
.mono{font-family:'JetBrains Mono',monospace;font-feature-settings:"ss02"}

.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(1){transition-delay:.02s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.08s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.14s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.20s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.26s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.32s}

@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{animation:marq 38s linear infinite}
.marquee-slow{animation-duration:64s}
.marquee-rev{animation-direction:reverse}

@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 14s linear infinite;transform-origin:center}

@keyframes wordcycle{
  0%,14%{transform:translateY(0%)}
  18%,34%{transform:translateY(-100%)}
  38%,54%{transform:translateY(-200%)}
  58%,74%{transform:translateY(-300%)}
  78%,94%{transform:translateY(-400%)}
  100%{transform:translateY(-500%)}
}
.wordstack{display:inline-flex;flex-direction:column;overflow:hidden;vertical-align:top;line-height:1}
.wordstack-track{display:flex;flex-direction:column;animation:wordcycle 15s infinite cubic-bezier(.77,0,.17,1);will-change:transform}
.wordstack-track > *{display:block;line-height:1;flex:0 0 auto;height:1em}

@keyframes tick{50%{opacity:0}}
.tick{animation:tick 1s steps(2) infinite}

@keyframes slideIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Kinetic word (letter stagger) ---------- */
.kw{display:inline-flex;font-family:'Fraunces',serif;font-style:italic;color:var(--accent);vertical-align:baseline;line-height:1;overflow:hidden;padding:0.12em 0}
.kw-ch{display:inline-block;transform-origin:50% 100%;opacity:0;will-change:transform,opacity,filter}
.kw-in{animation:kwIn 0.7s cubic-bezier(.2,.9,.2,1) forwards}
.kw-out{animation:kwOut 0.6s cubic-bezier(.7,.05,.85,.06) forwards}
@keyframes kwIn{
  0%{opacity:0;transform:translateY(0.75em) rotate(6deg);filter:blur(6px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}
}
@keyframes kwOut{
  0%{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}
  100%{opacity:0;transform:translateY(-0.75em) rotate(-6deg);filter:blur(6px)}
}

/* ---------- Kinetic hero ---------- */
/* (legacy kinetic-hero layout removed — now using simple heading + KineticWord component) */

/* ---------- Brand mark ---------- */
@keyframes cfDraw{
  0%{stroke-dashoffset:var(--cf-len)}
  50%{stroke-dashoffset:0}
  100%{stroke-dashoffset:calc(var(--cf-len) * -1)}
}
@keyframes cfBreathe{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.08)}
}
@keyframes cfRotate{
  from{transform:rotate(0)}to{transform:rotate(360deg)}
}
@keyframes cfPulse{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.7;transform:scale(1.12)}
}
@keyframes cfOrbit{
  from{transform:rotate(0) translateX(46%) rotate(0)}
  to{transform:rotate(360deg) translateX(46%) rotate(-360deg)}
}
@keyframes cfOrbitSlow{
  from{transform:rotate(0) translateX(56%) rotate(0)}
  to{transform:rotate(-360deg) translateX(56%) rotate(360deg)}
}
@keyframes cfTick{0%,100%{opacity:.25}50%{opacity:1}}

.cf-mark{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit}
.cf-mark .cf-sun{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#ff4628 0%,rgba(255,70,40,0.55) 28%,rgba(245,185,74,0.28) 46%,transparent 68%);filter:blur(30px);animation:cfBreathe 7s ease-in-out infinite}
.cf-mark .cf-ring{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(245,239,227,0.18);animation:cfPulse 6s ease-in-out infinite}
.cf-mark .cf-ring.two{width:94%;border-color:rgba(245,239,227,0.08);animation-duration:9s;animation-delay:-2s}
.cf-mark .cf-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);margin:-5px 0 0 -5px;box-shadow:0 0 24px var(--accent)}
.cf-mark .cf-dot.d1{animation:cfOrbit 14s linear infinite}
.cf-mark .cf-dot.d2{width:6px;height:6px;margin:-3px 0 0 -3px;background:#f5efe3;box-shadow:0 0 16px #f5efe3;animation:cfOrbitSlow 22s linear infinite}
.cf-mark svg.cf-art{position:relative;width:76%;height:76%;color:var(--ink);transform-origin:center}
.cf-mark .cf-frame{stroke:currentColor;fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke}
.cf-mark .cf-inf{stroke:var(--accent);fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(255,70,40,0.55))}
.cf-mark .cf-inf-legacy{--cf-len:720;stroke-dasharray:var(--cf-len);animation:cfDraw 6s cubic-bezier(.65,0,.35,1) infinite}
.cf-mark .cf-inf-ghost{stroke:currentColor;opacity:.08;fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.cf-mark .cf-inf-trail{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.85;filter:drop-shadow(0 0 8px var(--accent))}
.cf-mark .cf-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(245,239,227,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,239,227,0.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle at 50% 50%,black 0%,black 35%,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 50%,black 0%,black 35%,transparent 70%)}
.cf-mark .cf-corners{position:absolute;inset:16px;pointer-events:none}
.cf-mark .cf-corners span{position:absolute;width:14px;height:14px;border-color:var(--dim);border-style:solid;border-width:0}
.cf-mark .cf-corners span.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.cf-mark .cf-corners span.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.cf-mark .cf-corners span.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.cf-mark .cf-corners span.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.cf-mark .cf-label{position:absolute;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.cf-mark .cf-label.tl{top:26px;left:26px}
.cf-mark .cf-label.tr{top:26px;right:26px}
.cf-mark .cf-label.bl{bottom:26px;left:26px}
.cf-mark .cf-label.br{bottom:26px;right:26px}
.cf-mark .cf-label .tk{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle;animation:cfTick 1.6s ease-in-out infinite}
.cf-mark.compact .cf-label{font-size:9px;letter-spacing:.18em}
.cf-mark.compact .cf-label.tl,.cf-mark.compact .cf-label.tr{top:18px}
.cf-mark.compact .cf-label.bl,.cf-mark.compact .cf-label.br{bottom:18px}

.link-u{position:relative;display:inline-block}
.link-u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.7,.1,.3,1)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

.navitem{position:relative;display:inline-block}
.navitem .preview{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%) translateY(10px) scale(.92);width:220px;height:140px;border-radius:14px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);border:1px solid var(--line);background:#1a1a1a;z-index:200}
.navitem:hover .preview{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.3rem;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:-0.01em;transition:transform .3s ease,background .3s ease,color .3s ease;cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#0a0a0a}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#0a0a0a;border-color:var(--ink)}

.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

.display{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-0.035em;line-height:0.92;font-variation-settings:"SOFT" 100,"WONK" 1}
.display em{font-style:italic;color:var(--accent);font-weight:400}
.display .ital{font-style:italic}

.card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#121212 0%,#0d0d0d 100%);transition:border-color .4s ease,transform .5s ease}
.card:hover{border-color:rgba(255,70,40,0.5)}

.num{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--accent)}

.cursor-dot{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:300;transition:transform .18s ease,width .25s ease,height .25s ease;mix-blend-mode:difference}
.cursor-ring{position:fixed;width:38px;height:38px;border:1px solid rgba(245,239,227,0.5);border-radius:50%;pointer-events:none;z-index:299;transition:transform .35s cubic-bezier(.2,.7,.2,1),width .3s ease,height .3s ease,border-color .3s ease}
@media(hover:none){.cursor-dot,.cursor-ring{display:none}}

.tweaks{position:fixed;right:22px;bottom:22px;width:280px;background:#141414;border:1px solid var(--line);border-radius:18px;padding:18px;z-index:400;font-size:13px;box-shadow:0 20px 60px rgba(0,0,0,.6);display:none}
.tweaks.on{display:block}
.tweaks label{display:block;margin:12px 0 6px;color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.tweaks input[type=range]{width:100%}
.swatches{display:flex;gap:8px;margin-top:6px}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.sw.on{border-color:#fff}
.font-opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.font-opts button{background:#1e1e1e;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.font-opts button.on{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}

.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer}
.acc-q{display:flex;justify-content:space-between;align-items:center;gap:20px}
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1), margin-top .4s ease;color:var(--dim);max-width:720px}
.acc-item.open .acc-a{max-height:400px;margin-top:18px}
.acc-plus{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.acc-item.open .acc-plus{transform:rotate(45deg)}

.sp{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:500;width:0%}

.pin-wrap{position:relative}
.pin-sticky{position:sticky;top:0;height:100vh;overflow:hidden}

.logo svg path{fill:var(--ink)}

.container{max-width:1360px;margin:0 auto;padding:0 40px}
@media (max-width:900px){.container{padding:0 22px}}

nav.top{position:fixed;top:0;left:0;right:0;z-index:250;padding:24px 0;backdrop-filter:blur(10px);background:rgba(10,10,10,0.6);border-bottom:1px solid transparent;transition:border-color .3s ease}
nav.top.scrolled{border-bottom-color:var(--line)}

.ph{background:#1a1a1a;border-radius:14px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,70,40,.25),transparent 60%),radial-gradient(circle at 80% 70%,rgba(245,185,74,.2),transparent 55%)}
.ph-label{position:relative;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* forms */
.field{display:block;margin-bottom:24px}
.field label{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.field input,.field textarea,.field select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);font-family:'Fraunces',serif;font-size:26px;padding:10px 0;outline:none;transition:border-color .3s ease;letter-spacing:-0.02em}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical;font-size:20px}
.field .opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.field .opt{padding:10px 18px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:14px;transition:all .3s ease}
.field .opt:hover{border-color:var(--ink)}
.field .opt.on{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}

/* legal typography */
.prose h2{font-family:'Fraunces',serif;font-size:32px;font-weight:400;letter-spacing:-0.02em;margin-top:40px;margin-bottom:16px}
.prose h3{font-family:'Fraunces',serif;font-size:22px;font-weight:400;letter-spacing:-0.015em;margin-top:28px;margin-bottom:10px}
.prose p{font-size:15.5px;line-height:1.6;color:var(--dim);margin-bottom:14px;max-width:760px}
.prose ul{margin-left:0;margin-bottom:14px;max-width:760px;list-style:none}
.prose li{font-size:15.5px;line-height:1.6;color:var(--dim);padding-left:22px;position:relative;margin-bottom:8px}
.prose li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.prose strong{color:var(--ink);font-weight:500}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.placeholder-banner{background:rgba(255,70,40,0.08);border:1px solid rgba(255,70,40,0.3);padding:14px 20px;border-radius:12px;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:40px}

/* ---------- mobile menu button ---------- */
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:999px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .3s,border-color .3s}
.menu-toggle:hover{border-color:var(--ink)}
.menu-toggle svg{width:18px;height:18px}

.mobile-drawer{position:fixed;inset:0;background:#0a0a0a;z-index:260;display:none;flex-direction:column;padding:100px 28px 40px;overflow-y:auto;opacity:0;transition:opacity .4s cubic-bezier(.2,.7,.2,1)}
.mobile-drawer.open{display:flex;opacity:1}
.mobile-drawer a.menu-link{font-family:'Fraunces',serif;font-size:44px;font-weight:400;letter-spacing:-0.02em;padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--ink);line-height:1.1}
.mobile-drawer a.menu-link .arrow{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--dim)}
.mobile-drawer a.menu-link:active .arrow,.mobile-drawer a.menu-link:hover .arrow{color:var(--accent)}
.mobile-drawer .menu-cta{margin-top:auto;padding-top:40px}
.mobile-drawer .menu-meta{margin-top:30px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* Minimal nav collapse so hamburger works on narrow screens */
@media (max-width:960px){
  .hidden-mobile{display:none !important}
  .menu-toggle{display:inline-flex}
  .nav-cta-desktop{display:none !important}
}

/* ---------- Cookie banner ---------- */
/* Moved to src/cookie-banner.css — load that stylesheet alongside this one. */



/* ---------- 404 ---------- */
.err-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
@media (max-width:900px){.err-grid{grid-template-columns:1fr}}