/* about page */
.cj{--chalk:#F3F0E6;--gold:#C9A45C;font-family:'Figtree',system-ui,sans-serif;color:#F3F0E6;background:#122A1F;position:relative;overflow-x:clip;-webkit-font-smoothing:antialiased;animation:pageIn .7s ease both}
.hand{font-family:'Patrick Hand','Comic Sans MS',cursive}
.lbl{font-family:'Patrick Hand',cursive;font-size:22px;color:#C9A45C;display:inline-flex;align-items:center;gap:12px;margin:0}
.h2{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(40px,5.4vw,76px);line-height:.98;margin:10px 0 0;text-transform:uppercase;text-wrap:balance}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:rgba(243,240,230,.8);max-width:60ch;margin:0;text-wrap:pretty}
@keyframes rvUp{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.rv{animation:rvUp linear both;animation-timeline:view();animation-range:entry 0% entry 55%}.rv.d2{animation-range:entry 8% entry 68%}.rv.d3{animation-range:entry 16% entry 80%}.rv.d4{animation-range:entry 24% entry 92%}.rv.d5{animation-range:entry 32% entry 100%}}}
.sec{padding:clamp(84px,10vw,140px) 0;position:relative}
.ab-hero{padding:clamp(80px,10vw,130px) 0 clamp(90px,10vw,140px);position:relative;overflow:hidden}
.ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:clamp(48px,7vw,100px);align-items:center}
.h1{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(52px,7.4vw,108px);line-height:.92;margin:18px 0 30px;text-transform:uppercase}
.h1 .ln{display:block;animation:wordIn 1s cubic-bezier(.2,.8,.2,1) both}
.h1 .ln2{animation-delay:.2s;color:#C9A45C}
@keyframes wordIn{from{opacity:0;transform:translateY(46px) rotate(1.5deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.frame{position:relative;padding:12px;border-radius:22px;box-shadow:0 40px 70px -30px rgba(0,0,0,.9)}
.frame img{display:block;width:100%;object-fit:cover;border-radius:12px}
.paper{position:absolute;background:#E8DCC4;color:#2A1F14;font-family:'Patrick Hand',cursive;font-size:23px;line-height:1.15;padding:14px 20px;box-shadow:0 12px 22px -8px rgba(0,0,0,.6)}
.paper::before{content:"";position:absolute;left:50%;top:-12px;width:70px;height:22px;margin-left:-35px;background:rgba(243,240,230,.55);transform:rotate(-3deg)}
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0;border-top:1px dashed rgba(243,240,230,.22)}
.val{display:flex;gap:18px;align-items:flex-start;padding:28px 8px 28px 0;border-bottom:1px dashed rgba(243,240,230,.22)}
.val .ic{width:52px;height:52px;flex:none;border-radius:50%;border:2px dashed rgba(243,240,230,.5);display:flex;align-items:center;justify-content:center;transition:transform .6s}
.val:hover .ic{transform:rotate(-14deg)}
.val .ic svg{width:24px;height:24px}
.val h3{margin:4px 0 6px;font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.val p{margin:0;color:rgba(243,240,230,.76);line-height:1.55}
.bb{padding:14px;border-radius:30px;box-shadow:0 50px 90px -40px rgba(0,0,0,.9);position:relative}
.bb-in{border-radius:20px;padding:clamp(48px,6vw,84px) clamp(20px,5vw,64px) clamp(56px,6vw,90px);position:relative;overflow:hidden}
.tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative;margin-top:64px}
.tl-line{position:absolute;left:10%;right:10%;top:46px;height:2px;background-image:linear-gradient(90deg,#F3F0E6 55%,transparent 0);background-size:16px 2px;opacity:.7;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.tl-line{animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 55%}}}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.step .ic{width:94px;height:94px;border-radius:50%;background:#1C3A2B;box-shadow:inset 0 0 0 2px #F3F0E6;display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.step:hover .ic{transform:translateY(-6px) rotate(-6deg);box-shadow:inset 0 0 0 2px #C9A45C}
.step .ic svg{width:40px;height:40px}
.step .n{font-family:'Patrick Hand',cursive;font-size:20px;color:#C9A45C}
.step h3{font-family:'Cabin Sketch',cursive;font-weight:700;font-size:clamp(24px,2.2vw,32px);margin:0;letter-spacing:.02em}
.step p{margin:0;color:rgba(243,240,230,.78);line-height:1.5;font-size:15px;max-width:24ch}
.arrowhd{position:absolute;top:38px;width:18px;height:18px;color:#F3F0E6;opacity:.7}
@media (max-width:900px){.tl{grid-template-columns:1fr;gap:34px}.tl-line{left:46px;right:auto;top:30px;bottom:30px;width:2px;height:auto;background-image:linear-gradient(180deg,#F3F0E6 55%,transparent 0);background-size:2px 16px;transform-origin:top}.step{flex-direction:row;text-align:left;align-items:center}.step .ic{flex:none}.arrowhd{display:none}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (max-width:900px){.tl-line{animation-name:growY}}}
.name-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:clamp(48px,7vw,110px);align-items:center}
.logo-frame{position:relative;width:min(440px,100%);aspect-ratio:1;justify-self:center}
.logo-frame img{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 40px 80px -30px rgba(0,0,0,.95);animation:float 8s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(-2deg)}}
.logo-frame .orbit{position:absolute;inset:-26px;border:2px dashed rgba(243,240,230,.3);border-radius:50%;animation:spin 50s linear infinite}
.quote{font-family:'Patrick Hand',cursive;font-size:clamp(26px,2.6vw,34px);line-height:1.3;margin:28px 0;padding-left:24px;border-left:0;position:relative;color:#F3F0E6}
.quote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;border-left:2px dashed #C9A45C}