/* ============================================================
   베일 v2 — light warm atelier.
   Concept: the veil, lifted. Everything arrives soft and resolves sharp.
   Palette: warm paper + ink + one teal whisper (#40847D).
   ============================================================ */

/* ---- fonts (self-hosted) ---- */
@font-face{font-family:'MaruBuri';src:url('/fonts/MaruBuri-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'MaruBuri';src:url('/fonts/MaruBuri-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'MaruBuri';src:url('/fonts/MaruBuri-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Pretendard';src:url('/fonts/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-display:swap}

/* ---- tokens ---- */
:root{
  --paper:rgb(245,241,234);        /* warm off-white */
  --paper-2:rgb(236,230,219);         /* deeper panel */
  --paper-3:rgb(226,218,203);      /* frames / wells */
  --ink:rgb(33,30,26);            /* warm near-black */
  --ink-soft:rgb(90,85,78);
  --hairline:rgba(33,30,26,.13);
  --teal:#40847D;
  --teal-ink:rgb(46,102,96);
  --f-serif:'MaruBuri',ui-serif,Georgia,serif;
  --f-sans:'Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);   /* entrances */
  --ease-move:cubic-bezier(.65,0,.35,1);  /* moves */
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}

/* ---- reset ---- */
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.has-cur *{cursor:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
ol,ul{list-style:none}
::selection{background:var(--teal);color:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:16px;z-index:2000;background:var(--ink);color:var(--paper);
  padding:.7em 1.2em;border-radius:8px;font-size:.8rem;transition:top .3s}
.skip:focus{top:16px}

/* ---- ambient: threads + grain ---- */
.threads{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;top:-60%;right:-60%;bottom:-60%;left:-60%;width:220%;height:220%;z-index:3;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:no-preference){
  .grain{animation:grain 1.1s steps(8) infinite}
}
@keyframes grain{
  0%{transform:translate(0,0)}12.5%{transform:translate(-2.2%,1.4%)}25%{transform:translate(1.6%,-2%)}
  37.5%{transform:translate(-1.2%,-1.6%)}50%{transform:translate(2%,1.2%)}62.5%{transform:translate(-1.8%,2.1%)}
  75%{transform:translate(1.1%,1.8%)}87.5%{transform:translate(2.3%,-1.1%)}100%{transform:translate(0,0)}
}
main,footer{position:relative;z-index:1}
.nav{z-index:900}

/* ---- cursor lens ---- */
.cur__dot,.cur__ring{position:fixed;top:0;left:0;z-index:1600;pointer-events:none;border-radius:50%;
  transform:translate(-100px,-100px)}
.cur__dot{width:5px;height:5px;background:var(--ink);margin:-2.5px 0 0 -2.5px}
.cur__ring{width:38px;height:38px;border:1px solid var(--teal);margin:-19px 0 0 -19px;opacity:.75;
  transition:width .45s var(--ease-out),height .45s var(--ease-out),margin .45s var(--ease-out),
    opacity .3s,border-color .3s}
.cur__ring.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;opacity:1}

/* ---- shared section furniture ---- */
.section{position:relative;padding:clamp(110px,15vw,210px) var(--gutter)}
.section__head{max-width:var(--maxw);margin:0 auto clamp(52px,7vw,104px)}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.32em;color:var(--teal-ink);margin-bottom:22px}
.st{font-family:var(--f-serif);font-weight:600;letter-spacing:-.015em;line-height:1.22;text-wrap:balance}
.st--title{font-size:clamp(2.1rem,5.2vw,4.4rem)}
.st__line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.st__line>span{display:block;transform:translateY(112%);transition:transform 1s var(--ease-out)}
.st.is-in .st__line>span{transform:none}
.st .st__line:nth-child(2)>span{transition-delay:.09s}
.st .st__line:nth-child(3)>span{transition-delay:.18s}

/* generic entrance: soft, left→right */
.rv{opacity:0;transform:translate(-26px,14px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  font-size:.92rem;font-weight:600;letter-spacing:.01em;padding:1em 2.3em;border-radius:100px;
  transition:background .4s,transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.btn:hover{background:var(--teal-ink);box-shadow:0 18px 40px -18px rgba(46,102,96,.55)}
.btn:disabled{opacity:.5;pointer-events:none}

/* ============================================================
   Nav
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.6vw,26px) var(--gutter);transition:background .5s,box-shadow .5s,transform .55s var(--ease-out)}
.nav.is-solid{background:rgba(245,241,234,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hairline)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo{display:block;line-height:0}
.nav__logo img{height:23px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(20px,3vw,42px);font-size:.88rem;font-weight:500}
.nav__links a:not(.nav__cta){position:relative;opacity:.8;transition:opacity .3s}
.nav__links a:not(.nav__cta):after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:100%;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav__links a:not(.nav__cta):hover{opacity:1}
.nav__links a:not(.nav__cta):hover:after{transform:scaleX(1)}
.nav__cta{border:1px solid var(--ink);border-radius:100px;padding:.62em 1.5em;font-weight:600;
  transition:background .35s,color .35s,border-color .35s}
.nav__cta:hover{background:var(--ink);color:var(--paper)}
.nav__menu{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:10px;z-index:10}
.nav__menu span{display:block;width:26px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease-out)}

/* ============================================================
   S1 — Hero: the unveil
   ============================================================ */
.hero{position:relative;height:230vh}
.hero__sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:clip}

/* revealed layer: the work, veiled at first */
.hero__work{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;
  filter:blur(18px) saturate(.8);opacity:.38;transform:scale(1.07);will-change:filter,opacity,transform}
/* panels carry their base pose in --tf so the hover twist can compose on top */
.hero__panel{position:absolute;border-radius:16px;overflow:hidden;background:var(--paper-3);
  box-shadow:0 60px 120px -50px rgba(33,30,26,.5);transform:var(--tf);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.hero__panel img{width:100%;height:auto}
/* explicit heights (aspect-ratio is missing on older iOS — the crop box
   collapsed and panels showed the entire 3440px strip) */
.hero__panel--a{--tf:translate(-50%,-46%) rotate(-2deg);width:min(44vw,540px);height:min(50.6vw,621px);left:50%;top:50%}
.hero__panel--b{--tf:rotate(2.5deg);width:min(26vw,330px);height:min(32.5vw,413px);left:4%;top:16%}
.hero__panel--c{--tf:rotate(-3.5deg);width:min(24vw,300px);height:min(30vw,375px);right:3.5%;bottom:8%}
/* the twist: cursor-following 3D tilt (JS feeds --rx/--ry), straightens the base rotation */
@media(hover:hover) and (pointer:fine){
  .hero__panel:hover{z-index:6;
    transform:var(--tf) perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-12px) scale(1.035);
    box-shadow:0 80px 150px -55px rgba(33,30,26,.62);
    transition:transform .22s var(--ease-out),box-shadow .45s var(--ease-out)}
}
.hero__veil,.hero__cue{pointer-events:none}
.hero__motes{pointer-events:none}
/* the brand film: covers the veiled hero on load, fades away into the page.
   Poster-first — the page never waits on it. Desktop only (JS gates it). */
.hero__film{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;background:var(--paper);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s var(--ease-out),visibility 0s .55s}
.hero__film.is-on{opacity:1;visibility:visible;transition:opacity .4s var(--ease-out)}
.hero__film video{width:100%;height:100%;object-fit:cover;display:block}

/* the veil itself: paper scrim + wordmark. JS drives --hole (0% → 160%). */
.hero__veil{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:rgba(245,241,234,.94);}
/* entrance is pure CSS (no JS dependency — a script failure must never
   leave the logo invisible) */
.hero__mark{line-height:0;
  opacity:0;transform:translateY(46px);animation:markIn 1s var(--ease-out) .25s forwards}
@keyframes markIn{to{opacity:1;transform:none}}
.hero__logo{position:relative;display:block}
.hero__mark img{width:clamp(260px,42vw,580px);height:auto;display:block}
/* leaves sprout around the wordmark once it has risen */
.leaves{position:absolute;top:-26%;right:-14%;bottom:-26%;left:-14%;width:128%;height:152%;overflow:visible;pointer-events:none}
.lfp{fill:#1F3D34}
.lfp--teal{fill:var(--teal)}
.lfp--soft{fill:#6E9A82}
.lf{opacity:0;transform:scale(0) rotate(-26deg);transform-box:view-box}
.lf{animation:leafPop .8s var(--ease-out) forwards}
.lf1{animation-delay:.85s}
.lf2{animation-delay:1s}
.lf3{animation-delay:1.12s}
.lf4{animation-delay:1.24s}
.lf5{animation-delay:1.36s}
.lf6{animation-delay:1.48s}
@keyframes leafPop{0%{opacity:0;transform:scale(0) rotate(-26deg)}55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@media(prefers-reduced-motion:no-preference){
  .lfp{animation:leafSway 5.5s ease-in-out infinite alternate}
  .lf2 .lfp{animation-delay:-1.4s}.lf3 .lfp{animation-delay:-2.6s}
  .lf4 .lfp{animation-delay:-.8s}.lf5 .lfp{animation-delay:-3.4s}.lf6 .lfp{animation-delay:-2s}
}
@keyframes leafSway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
.hero__tag{margin-top:18px;font-size:clamp(.95rem,1.6vw,1.2rem);color:var(--ink-soft);letter-spacing:.06em;
  opacity:0;transform:translateY(14px);animation:markIn .9s var(--ease-out) .7s forwards}
.hero__veil>*{grid-area:1/1}
.hero__veil{grid-template-rows:1fr auto auto 1fr}
.hero__mark{grid-row:2;align-self:end;justify-self:center}
.hero__tag{grid-row:3;justify-self:center}

.hero__motes{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}
.hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:10px;color:var(--ink-soft);font-size:.68rem;letter-spacing:.3em;
  transition:opacity .5s}
.hero__cue i{width:1px;height:44px;background:var(--hairline);position:relative;overflow:hidden;display:block}
.hero__cue i:after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--teal)}
@media(prefers-reduced-motion:no-preference){.hero__cue i:after{animation:cue 2s var(--ease-move) infinite}}
@keyframes cue{0%{top:-40%}60%,100%{top:110%}}
.hero__cue.is-gone{opacity:0}

/* ============================================================
   S2 — 철학
   ============================================================ */
.phil{max-width:var(--maxw);margin:0 auto}
.phil__lines{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,22px)}
.phil .st{font-size:clamp(1.55rem,3.9vw,3.7rem);font-weight:600}
.phil .st--quiet{color:var(--ink-soft);font-weight:400}
/* underline lives INSIDE the box (background, not :after) — the masked line's
   overflow:hidden was clipping an absolutely-positioned underline on mobile */
.kw{font-style:normal;display:inline-block;filter:blur(9px);opacity:.55;padding-bottom:.12em;
  background:linear-gradient(var(--teal),var(--teal)) left bottom/0% 2px no-repeat;
  transition:filter 1.1s var(--ease-out),opacity 1.1s var(--ease-out),background-size .9s var(--ease-out) .35s}
.kw.is-clear{filter:blur(0);opacity:1;background-size:100% 2px}

/* ============================================================
   S3 — 작업
   ============================================================ */
.work__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,480px);
  gap:clamp(32px,6vw,96px);align-items:start}
.worklist{border-top:1px solid var(--hairline)}
.worklist__item{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  column-gap:clamp(14px,2vw,26px);align-items:baseline;padding:clamp(22px,3vw,34px) 4px;
  border-bottom:1px solid var(--hairline);transition:padding .5s var(--ease-out)}
.worklist__idx{grid-column:1;grid-row:1/3;font-family:var(--f-serif);font-size:.85rem;color:var(--ink-soft);
  transition:color .4s}
.worklist__name{grid-column:2;grid-row:1;font-family:var(--f-serif);font-weight:600;
  font-size:clamp(1.5rem,3.1vw,2.5rem);letter-spacing:-.01em;line-height:1.15;
  transform:translateX(0);transition:transform .55s var(--ease-out),color .4s}
.worklist__meta{grid-column:2;grid-row:2;font-size:.78rem;color:var(--ink-soft);margin-top:8px}
.worklist__live,.worklist__demo{font-weight:600;color:var(--teal-ink);position:relative;padding-left:12px}
.worklist__live:before,.worklist__demo:before{content:"";position:absolute;left:0;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;background:var(--teal)}
.worklist__demo:before{background:var(--ink-soft)}
.worklist__go{grid-column:3;grid-row:1/3;align-self:center;font-size:1.15rem;color:var(--teal-ink);opacity:0;
  transform:translate(-10px,6px);transition:opacity .4s,transform .5s var(--ease-out)}
.worklist__item:hover .worklist__go,.worklist__item.is-active .worklist__go{opacity:1;transform:none}
.worklist__item.is-active .worklist__name{transform:translateX(10px);color:var(--ink)}
.worklist__item.is-active .worklist__idx{color:var(--teal-ink)}
.worklist__item:before{content:"";position:absolute;left:-4px;top:-1px;height:1px;width:0;background:var(--teal);
  transition:width .8s var(--ease-out)}
.worklist__item.is-active:before{width:calc(100% + 8px)}

.workstage{position:sticky;top:12vh}
.workstage:before{content:"";display:block;padding-top:120%}
/* neutral browser chrome — reads as an actual browser, no brand tint */
.wframe{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:14px;overflow:hidden;background:#26231F;border:1px solid rgba(33,30,26,.25);
  box-shadow:0 44px 90px -42px rgba(33,30,26,.55);
  opacity:0;filter:blur(9px);transform:scale(.965);
  transition:opacity .6s var(--ease-out),filter .6s var(--ease-out),transform .7s var(--ease-out)}
.wframe.is-active{opacity:1;filter:blur(0);transform:none;z-index:2}
.wframe__bar{display:flex;align-items:center;gap:6px;padding:11px 13px;background:#33302B;
  border-bottom:1px solid rgba(255,255,255,.06)}
.wframe__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.wframe__bar span{margin-left:9px;font-size:.62rem;letter-spacing:.03em;color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.3);padding:.3em .9em;border-radius:5px}
.wframe__view{position:absolute;top:37px;right:0;bottom:0;left:0;overflow:hidden}
.wframe__view img{width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){
  .wframe__view img{animation:wscroll 30s linear infinite;animation-play-state:paused}
  .wframe.is-active .wframe__view img{animation-play-state:running}
}
/* constant speed, no slow ease-in at the start — brief holds at the ends only */
@keyframes wscroll{0%,3%{transform:translateY(0)}47%,53%{transform:translateY(-80%)}97%,100%{transform:translateY(0)}}

/* ============================================================
   S4 — 명료 (mess → clarity + 26)
   ============================================================ */
/* translucent so the organized thread field shows through (the payoff) */
.clarity{background:rgba(236,230,219,.78)}
.clarity__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(320px,520px) 1fr;
  gap:clamp(40px,7vw,110px);align-items:center}
.cframe{position:relative;border-radius:14px;background:var(--paper);
  border:1px solid var(--hairline);overflow:hidden;box-shadow:0 30px 70px -40px rgba(33,30,26,.35)}
.cframe:before{content:"";display:block;padding-top:72%}
.cb{position:absolute;border-radius:6px;background:rgba(33,30,26,.14);
  transition:transform 1.1s var(--ease-out),opacity 1.1s var(--ease-out),filter 1.1s var(--ease-out),background .9s}
/* final, clean layout */
.cb--nav{left:6%;top:7%;width:88%;height:7%;border-radius:99px}
.cb--hero{left:6%;top:21%;width:56%;height:34%}
.cb--cta{left:66%;top:21%;width:28%;height:15%;background:rgba(46,102,96,.5);border-radius:99px}
.cb--ln1{left:66%;top:41%;width:28%;height:5%}
.cb--ln2{left:66%;top:50%;width:20%;height:5%}
.cb--c1{left:6%;top:62%;width:27%;height:22%}
.cb--c2{left:36.5%;top:62%;width:27%;height:22%}
.cb--c3{left:67%;top:62%;width:27%;height:22%}
.cb--foot{left:6%;top:90%;width:88%;height:4%;opacity:.55}
/* messy initial state (per-block scatter), resolved by .is-clear */
[data-cframe]:not(.is-clear) .cb{filter:blur(3px);opacity:.5}
[data-cframe]:not(.is-clear) .cb--nav{transform:translate(-9%,140%) rotate(-7deg)}
[data-cframe]:not(.is-clear) .cb--hero{transform:translate(14%,36%) rotate(5deg) scale(.82)}
[data-cframe]:not(.is-clear) .cb--cta{transform:translate(-52%,190%) rotate(14deg)}
[data-cframe]:not(.is-clear) .cb--ln1{transform:translate(-30%,-360%) rotate(-11deg)}
[data-cframe]:not(.is-clear) .cb--ln2{transform:translate(22%,-190%) rotate(8deg)}
[data-cframe]:not(.is-clear) .cb--c1{transform:translate(26%,-84%) rotate(9deg) scale(.9)}
[data-cframe]:not(.is-clear) .cb--c2{transform:translate(-18%,-130%) rotate(-6deg) scale(1.12)}
[data-cframe]:not(.is-clear) .cb--c3{transform:translate(-40%,-40%) rotate(13deg) scale(.86)}
[data-cframe]:not(.is-clear) .cb--foot{transform:translate(6%,-560%) rotate(-4deg)}
.cframe.is-clear .cb{transform:none;filter:blur(0);opacity:1}
.cframe.is-clear .cb--foot{opacity:.55}
/* resolve stagger */
.cframe.is-clear .cb--nav{transition-delay:0s}
.cframe.is-clear .cb--hero{transition-delay:.06s}
.cframe.is-clear .cb--cta{transition-delay:.12s}
.cframe.is-clear .cb--ln1{transition-delay:.18s}
.cframe.is-clear .cb--ln2{transition-delay:.24s}
.cframe.is-clear .cb--c1{transition-delay:.3s}
.cframe.is-clear .cb--c2{transition-delay:.36s}
.cframe.is-clear .cb--c3{transition-delay:.42s}
.cframe.is-clear .cb--foot{transition-delay:.48s}
.clarity__cap{margin-top:16px;font-size:.8rem;color:var(--ink-soft);letter-spacing:.02em}
.clarity__num{font-family:var(--f-serif);font-weight:700;font-size:clamp(5.5rem,13vw,10.5rem);line-height:1;
  letter-spacing:-.02em;color:var(--ink);display:flex;align-items:baseline;gap:.08em}
.clarity__num i{font-style:normal;font-size:.22em;font-weight:600;color:var(--ink-soft)}
.clarity__line{font-family:var(--f-serif);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.8rem);
  letter-spacing:-.01em;margin-top:18px;text-wrap:balance}
.clarity__sub{margin-top:14px;color:var(--ink-soft);font-size:clamp(.92rem,1.3vw,1.05rem)}

/* ============================================================
   S5 — 서비스
   ============================================================ */
.services__list{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--hairline)}
.service{position:relative;display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(24px,4.5vw,72px);
  align-items:center;padding:clamp(38px,5.5vw,72px) 0;border-bottom:1px solid var(--hairline)}
.service:after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--teal);
  transition:width .9s var(--ease-out)}
.service:hover:after{width:100%}
.service__body{transition:transform .65s var(--ease-out)}
.service:hover .service__body{transform:translateX(clamp(8px,1.6vw,22px))}
.service__body h3{font-family:var(--f-serif);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.7rem);letter-spacing:-.015em}
.service__body p{margin-top:16px;max-width:46ch;color:var(--ink-soft);font-size:clamp(.95rem,1.25vw,1.1rem)}
.service__out{display:inline-block;margin-top:20px;color:var(--teal-ink);font-weight:600;font-size:.84rem;
  opacity:.5;transform:translateX(-10px);transition:opacity .5s,transform .6s var(--ease-out)}
.service:hover .service__out{opacity:1;transform:none}
@media(min-width:761px){
  .service:nth-child(even){grid-template-columns:minmax(300px,420px) 1fr}
  .service:nth-child(even) .service__body{order:2}
  .service:nth-child(even) .service__demo{order:1}
  .service:nth-child(even):hover .service__body{transform:translateX(clamp(-22px,-1.6vw,-8px))}
}

/* self-drawing line icons */
.sicon{width:clamp(40px,4.5vw,54px);height:auto;margin-bottom:20px;overflow:visible}
.si{fill:none;stroke:var(--teal-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:200;stroke-dashoffset:200}
.si-d{stroke-dasharray:12;stroke-dashoffset:12}
.rv.is-in .si{animation:sidraw .9s var(--ease-out) forwards}
.rv.is-in .si-1{animation-delay:.1s}
.rv.is-in .si-2{animation-delay:.35s}
.rv.is-in .si-3{animation-delay:.5s}
.rv.is-in .si-4{animation-delay:.62s}
.rv.is-in .si-d{animation:sidraw .5s var(--ease-out) forwards}
.rv.is-in .si-d:nth-of-type(2){animation-delay:.45s}
.rv.is-in .si-d:nth-of-type(3){animation-delay:.58s}
.rv.is-in .si-d:nth-of-type(4){animation-delay:.71s}
@keyframes sidraw{to{stroke-dashoffset:0}}

/* mini browser demo (kept, restyled frame) */
.demo{position:relative}
.demo *{pointer-events:none}
.demo-browser{border-radius:14px;overflow:hidden;background:#26231F;border:1px solid rgba(33,30,26,.25);
  box-shadow:0 36px 80px -38px rgba(33,30,26,.5)}
.demo-browser__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#33302B;
  border-bottom:1px solid rgba(255,255,255,.06)}
.demo-browser__bar i{width:9px;height:9px;border-radius:50%;flex:none;background:rgba(255,255,255,.22)}
.demo-browser__url{margin-left:10px;flex:1;font-size:.64rem;letter-spacing:.04em;color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.3);border-radius:6px;padding:.35em .9em;max-width:70%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.demo-browser__view{position:relative;overflow:hidden}
.demo-browser__view:before{content:"";display:block;padding-top:66.25%}
/* always scrolling — a looping site preview shouldn't wait for focus (only the
   chat demo is gated, because a conversation replayed off-screen loses its story) */
.demo-browser__view img{position:absolute;top:0;left:0;width:100%;height:auto;animation:demoScroll 32s linear infinite}
@keyframes demoScroll{0%,3%{transform:translateY(0)}47%,53%{transform:translateY(-83.4%)}97%,100%{transform:translateY(0)}}

/* mini chat demo (kept) */
.demo-chat{background:var(--paper);color:var(--ink);border-radius:16px;overflow:hidden;
  border:1px solid var(--hairline);box-shadow:0 36px 80px -38px rgba(33,30,26,.42)}
.demo-chat__head{display:flex;align-items:center;gap:11px;padding:12px 15px;color:var(--paper);background:var(--ink)}
.demo-chat__avatar{position:relative;width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,241,234,.12);border:1px solid rgba(245,241,234,.2)}
.demo-chat__avatar img{width:17px;height:17px;object-fit:contain}
.demo-chat__dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--teal);
  border:2px solid var(--ink)}
.demo-chat__who strong{display:block;font-size:.83rem;letter-spacing:-.01em}
.demo-chat__who small{display:block;color:rgba(245,241,234,.55);font-size:.64rem;margin-top:1px}
.demo-chat__log{height:clamp(280px,30vw,340px);padding:16px;display:flex;flex-direction:column;justify-content:flex-end;
  gap:9px;overflow:hidden}
.demo-chat__log>*{display:none}
.demo-chat__log>.is-show{display:block;animation:demoPop .5s var(--ease-out) both}
@keyframes demoPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.demo-chat__time{font-size:.64rem;color:var(--ink-soft);text-align:center;margin-bottom:2px}
.demo-chat__msg{max-width:82%;padding:.65em .95em;border-radius:14px;font-size:.8rem;line-height:1.55}
.demo-chat__msg--user{background:var(--ink);color:var(--paper);align-self:flex-end;border-bottom-right-radius:4px;
  box-shadow:0 6px 18px -8px rgba(33,30,26,.5)}
.demo-chat__msg--bot{background:#fff;border:1px solid rgba(33,30,26,.07);border-bottom-left-radius:4px;
  align-self:flex-start;box-shadow:0 4px 14px -8px rgba(33,30,26,.16)}
.demo-chat__typing{align-self:flex-start;background:#fff;border:1px solid rgba(33,30,26,.07);
  padding:.8em 1em;border-radius:14px;border-bottom-left-radius:4px}
.demo-chat__typing.is-show{display:flex;gap:4px}
.demo-chat__typing i{width:5px;height:5px;border-radius:50%;background:rgba(33,30,26,.35);animation:blink 1.2s infinite}
.demo-chat__typing i:nth-child(2){animation-delay:.18s}
.demo-chat__typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.demo-chat__card{position:relative;align-self:center;width:88%;background:#fff;border:1px solid rgba(46,102,96,.3);
  border-radius:12px;padding:.8em 1.1em .8em 3em;box-shadow:0 14px 34px -18px rgba(46,102,96,.4)}
.demo-chat__card b{display:block;font-size:.8rem;color:var(--teal-ink)}
.demo-chat__card span{font-size:.78rem;color:var(--ink-soft)}
.bkg-check{position:absolute;left:.9em;top:50%;width:22px;height:22px;margin-top:-11px;fill:none;
  stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo-chat.is-fade .demo-chat__log>*{opacity:0;transition:opacity .6s var(--ease-out)}

/* ============================================================
   S6 — 과정
   ============================================================ */
.process{background:rgba(236,230,219,.88)}
.steps{position:relative;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,44px);padding-top:34px}
.steps__rail{position:absolute;left:0;right:0;top:0;height:1px;background:var(--hairline);overflow:hidden}
.steps__rail i{display:block;height:100%;width:100%;background:var(--teal);transform:scaleX(0);
  transform-origin:left;transition:transform 1.4s var(--ease-move)}
.steps.is-in .steps__rail i{transform:scaleX(1)}
.steps__item{opacity:0;transform:translateX(-30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  cursor:pointer}
.steps__item.is-in{opacity:1;transform:none}
/* the card you point at plays; the rest wait dimmed */
.steps__item.is-in.is-dim{opacity:.42}
.steps__item.is-in.is-live{opacity:1}
.pstage{transition:box-shadow .55s var(--ease-out),border-color .55s,transform .55s var(--ease-out)}
.steps__item.is-live .pstage{transform:translateY(-5px);border-color:rgba(46,102,96,.4);
  box-shadow:0 30px 62px -30px rgba(33,30,26,.45)}
.steps__num{transition:color .4s}
.steps__item.is-live .steps__num{color:var(--teal)}
.steps__num{display:block;margin:18px 0 10px;font-family:var(--f-serif);font-size:.9rem;color:var(--teal-ink)}
.steps__body h3{font-family:var(--f-serif);font-weight:600;font-size:1.3rem;letter-spacing:-.01em}
.steps__body p{margin-top:8px;font-size:.85rem;color:var(--ink-soft);max-width:30ch}

/* every step's mini-stage */
.pstage{position:relative;border-radius:12px;background:var(--paper);
  border:1px solid var(--hairline);overflow:hidden;box-shadow:0 22px 50px -32px rgba(33,30,26,.32)}
.pstage:before{content:"";display:block;padding-top:68%}

/* 01 — 문의: message composes itself, then flies to the node */
.pcomposer{position:absolute;left:9%;right:9%;bottom:16%;display:flex;gap:6%;align-items:stretch}
.pcomposer__field{flex:1;min-width:0;display:flex;align-items:center;border:1px solid var(--hairline);
  border-radius:9px;padding:.5em .8em;font-size:.66rem;color:var(--ink);background:#fff;white-space:nowrap;overflow:hidden}
.pcomposer__caret{flex:none;width:1.5px;height:.95em;background:var(--teal);margin-left:2px}
@media(prefers-reduced-motion:no-preference){.pcomposer__caret{animation:caret 1s steps(2) infinite}}
@keyframes caret{50%{opacity:0}}
.pcomposer__btn{flex:none;display:grid;place-items:center;font-size:.62rem;font-weight:600;color:var(--paper);
  background:var(--ink);border-radius:9px;padding:0 1em;transition:transform .18s var(--ease-move)}
.pstage.is-press .pcomposer__btn{transform:scale(.92)}
.pcomposer__node{position:absolute;right:10%;top:16%;width:13px;height:13px;border-radius:50%;
  background:var(--paper-3);border:1px solid var(--hairline);transition:background .4s}
.pcomposer__node.is-hit{background:var(--teal)}
.pcomposer__node.is-hit:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:50%;border:1px solid var(--teal);
  animation:nodePulse .9s var(--ease-out) both}
@keyframes nodePulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.1);opacity:0}}
/* the flying bubble: outer span = X, inner span = Y (two easings = shallow arc) */
.pcomposer__fly{position:absolute;left:12%;bottom:34%;opacity:0;pointer-events:none}
.pcomposer__fly>span{display:inline-block;background:var(--ink);color:var(--paper);font-size:.6rem;
  padding:.45em .9em;border-radius:99px;border-bottom-right-radius:3px;white-space:nowrap;
  transform:rotate(6deg)}
.pcomposer__fly.is-go{opacity:1;transition:opacity .12s linear,transform .7s cubic-bezier(.3,.55,.25,1);
  transform:translateX(118px)}
.pcomposer__fly.is-go>span{transition:transform .7s cubic-bezier(.5,.05,.3,1);
  transform:translateY(-84px) rotate(0deg)}
.pcomposer__fly.is-end{opacity:0;transition:opacity .25s}

/* 02 — 무료 시안: wireframe draws itself */
.pwire{position:absolute;top:12%;right:10%;bottom:12%;left:10%;width:80%;height:76%}
.pw{fill:none;stroke:var(--ink-soft);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420}
.pw-hero{stroke:var(--teal-ink)}
.pstage.is-play .pw{animation:sidraw 1s var(--ease-out) forwards}
.pstage.is-play .pw-frame{animation-duration:1.2s}
.pstage.is-play .pw-nav{animation-delay:.5s}
.pstage.is-play .pw-logo{animation-delay:.65s}
.pstage.is-play .pw-hero{animation-delay:.85s}
.pstage.is-play .pw-c1{animation-delay:1.15s}
.pstage.is-play .pw-c2{animation-delay:1.3s}
.pstage.is-play .pw-c3{animation-delay:1.45s}

/* 03 — 제작: the editor types */
.pcode{position:absolute;top:12%;right:10%;bottom:12%;left:10%;border-radius:9px;background:#26231F;overflow:hidden;
  box-shadow:0 14px 30px -18px rgba(33,30,26,.5)}
.pcode__bar{display:flex;gap:4px;padding:7px 9px;background:#33302B}
.pcode__bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.pcode__body{margin:0;padding:10px 12px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:.62rem;line-height:1.75;color:rgba(245,241,234,.85);white-space:pre-wrap;word-break:break-all}
.pcode__body .tk-s{color:#7FC7BE}
.pcode__body .tk-v{color:#9CCFC8}
.pcode__caret{display:inline-block;width:1.5px;height:.9em;background:#7FC7BE;vertical-align:-.1em;margin-left:1px}
@media(prefers-reduced-motion:no-preference){.pcode__caret{animation:caret 1s steps(2) infinite}}

/* 04 — 오픈: the site goes live */
.pgo{position:absolute;top:12%;right:10%;bottom:12%;left:10%;border-radius:9px;background:#fff;border:1px solid var(--hairline);overflow:hidden}
.pgo__bar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--paper-2);
  border-bottom:1px solid var(--hairline)}
.pgo__bar>i{width:6px;height:6px;border-radius:50%;background:rgba(33,30,26,.16);flex:none}
.pgo__url{margin-left:6px;flex:1;font-size:.56rem;letter-spacing:.03em;color:var(--ink-soft);
  background:#fff;border:1px solid var(--hairline);border-radius:5px;padding:.25em .7em;min-height:1.5em}
.pgo__dot{width:7px;height:7px;border-radius:50%;background:rgba(33,30,26,.18);flex:none;transition:background .4s}
.pgo__dot.is-live{background:var(--teal)}
.pgo__dot.is-live{box-shadow:0 0 0 0 rgba(46,102,96,.5);animation:goPulse 1.4s var(--ease-out) 1}
@keyframes goPulse{from{box-shadow:0 0 0 0 rgba(46,102,96,.45)}to{box-shadow:0 0 0 12px rgba(46,102,96,0)}}
.pgo__page{position:absolute;top:26%;right:0;bottom:0;left:0;padding:9% 8%}
.pgo__page i{display:block;border-radius:4px;background:rgba(33,30,26,.12);opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.pgo__page i:nth-child(1){width:44%;height:10%}
.pgo__page i:nth-child(2){width:84%;height:26%;margin-top:6%;background:rgba(46,102,96,.3)}
.pgo__page i:nth-child(3){width:60%;height:8%;margin-top:6%}
.pgo__page i:nth-child(4){width:30%;height:12%;margin-top:6%;border-radius:99px;background:rgba(33,30,26,.7)}
.pgo.is-paint .pgo__page i{opacity:1;transform:none}
.pgo.is-paint .pgo__page i:nth-child(2){transition-delay:.12s}
.pgo.is-paint .pgo__page i:nth-child(3){transition-delay:.24s}
.pgo.is-paint .pgo__page i:nth-child(4){transition-delay:.36s}
.pgo__veil{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(245,241,234,.92);transition:transform .9s var(--ease-move)}
.pgo.is-open .pgo__veil{transform:translateY(-101%)}

/* ============================================================
   S7 — 연락
   ============================================================ */
.quick{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,110px);
  align-items:start}
.quick__title{font-family:var(--f-serif);font-weight:600;font-size:clamp(2rem,4.6vw,3.9rem);letter-spacing:-.02em;
  line-height:1.2;text-wrap:balance}
.quick__title em{font-style:normal;color:var(--teal-ink)}
.quick__lead{margin-top:26px;max-width:44ch;color:var(--ink-soft);text-wrap:pretty}
.quick__alt{margin-top:14px;font-size:.85rem;color:var(--ink-soft)}
.quick__alt a{color:var(--teal-ink);font-weight:600;border-bottom:1px solid rgba(46,102,96,.4);
  transition:border-color .3s}
.quick__alt a:hover{border-color:var(--teal-ink)}

.quick__form{display:flex;flex-direction:column;gap:clamp(26px,3.4vw,40px);padding-top:10px}
.qfield{position:relative;padding-top:20px}
.qfield input{width:100%;background:none;border:0;border-bottom:1px solid var(--hairline);
  padding:.55em 2px .7em;font-family:inherit;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink);
  border-radius:0;transition:border-color .3s}
.qfield input:focus{outline:none}
.qfield label{position:absolute;left:2px;top:calc(20px + .55em);font-size:clamp(1.05rem,1.5vw,1.3rem);
  color:var(--ink-soft);pointer-events:none;transform-origin:left top;
  transition:transform .45s var(--ease-out),color .3s}
.qfield input:focus~label,.qfield input:not(:placeholder-shown)~label{transform:translateY(-1.9em) scale(.62);
  color:var(--teal-ink)}
.qfield__bar{position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.qfield input:focus~.qfield__bar{transform:scaleX(1)}
.qfield.is-bad input{border-color:#A03B2E}
.qfield.is-bad label{color:#A03B2E}
.quick__err{font-size:.8rem;color:#A03B2E;min-height:1.2em;margin:-10px 0}
.quick__form .btn{align-self:flex-start;margin-top:6px}
.quick__done{position:relative;padding:clamp(24px,3vw,36px) 0 8px;
  clip-path:inset(0 100% 0 0);animation:sealOpen .9s var(--ease-move) .1s forwards}
@keyframes sealOpen{to{clip-path:inset(0 0 0 0)}}
.quick__done h3{font-family:var(--f-serif);font-size:1.6rem;font-weight:600}
.quick__done h3:before{content:"";display:block;width:44px;height:2px;background:var(--teal);margin-bottom:18px}
.quick__done p{margin-top:10px;color:var(--ink-soft);max-width:38ch}

/* ============================================================
   Footer
   ============================================================ */
.footer{border-top:1px solid var(--hairline);padding:clamp(52px,7vw,90px) var(--gutter) 40px;background:var(--paper)}
.footer__top{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap;padding-bottom:clamp(30px,4vw,54px);border-bottom:1px solid var(--hairline)}
.footer__mark{height:30px;width:auto;display:block}
.footer__tag{margin-top:12px;font-family:var(--f-serif);font-size:1.05rem;color:var(--ink-soft)}
.footer__nav{display:flex;gap:clamp(18px,3vw,36px);font-size:.82rem;flex-wrap:wrap}
.footer__nav a{opacity:.65;transition:opacity .3s,color .3s}
.footer__nav a:hover{opacity:1;color:var(--teal-ink)}
.footer__biz{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:26px;
  font-size:.78rem;color:var(--ink-soft);line-height:1.7}
.footer__bottom{max-width:var(--maxw);margin:0 auto;padding-top:14px;font-size:.78rem;color:var(--ink-soft);opacity:.75}

/* ============================================================
   어시스턴트 (kept, restyled)
   ============================================================ */
.bot{position:fixed;right:clamp(16px,3vw,34px);bottom:calc(clamp(16px,3vw,34px) + env(safe-area-inset-bottom,0px));
  z-index:950;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.bot__fab{width:58px;height:58px;border-radius:50%;background:var(--ink);border:0;cursor:pointer;position:relative;
  box-shadow:0 18px 44px -14px rgba(33,30,26,.55);transition:transform .5s var(--ease-out),background .4s}
.bot__fab:hover{transform:scale(1.06);background:var(--teal-ink)}
.bot__fab svg{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:25px;height:25px;fill:none;stroke:var(--paper);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .4s var(--ease-out)}
.bot__fab .bot__fab-open{fill:var(--paper);stroke:none}
.bot__fab-close{opacity:0;transform:rotate(-90deg)}
.bot.is-open .bot__fab-open{opacity:0;transform:rotate(90deg)}
.bot.is-open .bot__fab-close{opacity:1;transform:none}
.bot__panel{position:absolute;bottom:72px;right:0;width:min(380px,calc(100vw - 32px));
  height:min(560px,calc(100dvh - 140px));display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--hairline);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(33,30,26,.45);
  transform:translateY(14px) scale(.98);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .5s var(--ease-out),opacity .4s,visibility 0s .5s}
.bot.is-open .bot__panel{transform:none;opacity:1;pointer-events:auto;visibility:visible;
  transition:transform .5s var(--ease-out),opacity .4s}
.bot__head{background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:13px 15px}
.bot__id{display:flex;align-items:center;gap:11px;min-width:0}
.bot__avatar{position:relative;width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,241,234,.12);border:1px solid rgba(245,241,234,.2)}
.bot__avatar img{width:19px;height:19px;object-fit:contain}
.bot__dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--teal);
  border:2px solid var(--ink)}
.bot__who{min-width:0}
.bot__who strong{display:block;font-size:.8rem;color:var(--paper);letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bot__who small{display:block;color:rgba(245,241,234,.55);font-size:.64rem;margin-top:2px}
.bot__x{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(245,241,234,.1);border:0;cursor:pointer}
.bot__x svg{width:14px;height:14px;fill:none;stroke:rgba(245,241,234,.75);stroke-width:2;stroke-linecap:round;
  transition:stroke .3s}
.bot__x:hover{background:rgba(245,241,234,.2)}
.bot__x:hover svg{stroke:var(--paper)}
.bot__log{flex:1;overflow-y:auto;padding:18px 18px 6px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;font-size:.8rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.msg--bot{background:#fff;color:var(--ink);align-self:flex-start;border:1px solid rgba(33,30,26,.06);
  padding:.8em 1em;border-radius:14px;border-bottom-left-radius:4px;
  box-shadow:0 4px 14px -8px rgba(33,30,26,.15)}
.msg--bot strong{font-weight:700;color:var(--teal-ink)}
.msg--user{background:var(--ink);color:var(--paper);align-self:flex-end;padding:.8em 1em;border-radius:14px;
  border-bottom-right-radius:4px}
.bot__resumed{align-self:center;font-size:.64rem;letter-spacing:.1em;color:var(--ink-soft)}
.msg__actions{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--hairline)}
.msg__action{display:inline-flex;align-items:center;gap:.5em;font-size:.72rem;font-weight:600;color:var(--teal-ink);
  border-bottom:1px solid rgba(46,102,96,.35);padding-bottom:2px;transition:color .3s,border-color .3s}
.msg__action i{font-style:normal;font-size:.9em;transition:transform .35s var(--ease-out)}
.msg__action:hover{color:var(--ink);border-color:var(--ink)}
.msg__action:hover i{transform:translateX(3px)}
.msg__action--kakao{border-bottom:0;background:#FEE500;color:#3A1D1D;border-radius:8px;padding:.5em .9em}
.msg__action--kakao:hover{background:#F5D800;color:#3A1D1D}
.msg--typing{display:flex;gap:5px;align-self:flex-start;background:#fff;border:1px solid rgba(33,30,26,.06);
  padding:.9em 1em;border-radius:14px;border-bottom-left-radius:4px}
.msg--typing i{width:6px;height:6px;border-radius:50%;background:rgba(33,30,26,.32);animation:blink 1.3s infinite}
.msg--typing i:nth-child(2){animation-delay:.2s}
.msg--typing i:nth-child(3){animation-delay:.4s}
.msg--bot.is-writing:after{content:"";display:inline-block;width:2px;height:.95em;margin-left:2px;
  vertical-align:-.12em;background:var(--teal)}
.bot__form{display:flex;gap:8px;padding:12px;align-items:center}
.bot__form input{flex:1;min-width:0;border:1px solid var(--hairline);border-radius:100px;padding:.8em 1.15em;
  font-family:inherit;font-size:.82rem;color:var(--ink);background:#fff}
.bot__form input:focus{outline:none;border-color:var(--teal)}
.bot__form button{width:40px;height:40px;flex:none;border-radius:50%;background:var(--ink);border:0;cursor:pointer;
  display:grid;place-items:center;transition:background .3s}
.bot__form button:hover{background:var(--teal-ink)}
.bot__form button svg{width:18px;height:18px;fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.bot__demo{font-size:.64rem;text-align:center;color:var(--ink-soft);padding:0 14px 12px}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:960px){
  .work__grid{grid-template-columns:1fr;gap:26px}
  /* compact index: single-line rows, tap switches, only ↗ navigates */
  .worklist__item{padding:14px 4px;column-gap:12px}
  .worklist__name{font-size:1.12rem}
  .worklist__idx{font-size:.72rem}
  .worklist__meta{font-size:.68rem;margin-top:3px}
  /* on touch the ↗ IS the link (row taps only switch) — make it a real button */
  .worklist__go{opacity:1;transform:none;font-size:.95rem;padding:8px 12px;
    border:1px solid rgba(46,102,96,.4);border-radius:99px}
  .workstage{position:relative;top:0;max-width:330px;margin:0 auto;width:100%}
  .workstage:before{padding-top:108.75%}
  .quick{grid-template-columns:1fr}
  .clarity__grid{grid-template-columns:1fr}
  .clarity__demo{max-width:520px}
  .steps{grid-template-columns:1fr 1fr;row-gap:44px}
}
@media(max-width:760px){
  .nav__links{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--paper);flex-direction:column;justify-content:center;
    align-items:flex-start;gap:clamp(22px,4.5vh,38px);padding:0 clamp(28px,9vw,64px);
    font-size:clamp(1.9rem,8.5vw,2.6rem);transform:translateX(100%);visibility:hidden;
    transition:transform .6s var(--ease-out),visibility 0s .6s}
  /* open menu must not sit inside a containing block (transform/backdrop) */
  .nav.is-navopen{transform:none!important;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none;z-index:960}
  .nav.is-navopen .nav__links{transform:none;visibility:visible;transition:transform .6s var(--ease-out)}
  .nav__links a{opacity:0;transform:translateY(26px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
    font-family:var(--f-serif);font-weight:600}
  .nav.is-navopen .nav__links a{opacity:1;transform:none}
  .nav.is-navopen .nav__links a:nth-child(1){transition-delay:.18s}
  .nav.is-navopen .nav__links a:nth-child(2){transition-delay:.26s}
  .nav.is-navopen .nav__links a:nth-child(3){transition-delay:.34s}
  .nav.is-navopen .nav__links a:nth-child(4){transition-delay:.42s}
  .nav.is-navopen .nav__links a:nth-child(5){transition-delay:.5s}
  .nav__links .nav__cta{font-size:1rem;font-family:var(--f-sans);padding:.85em 1.7em;margin-top:14px}
  .nav__menu{display:flex}
  .nav.is-navopen .nav__menu span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .nav.is-navopen .nav__menu span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
  /* mobile keeps all three panels — smaller, layered; veil fully opaque so
     nothing ghosts through on load */
  .hero__veil{background:var(--paper)}
  .hero__mark img{width:min(74vw,340px)}
  .hero__panel--a{--tf:translate(-50%,-48%) rotate(-2deg);width:66vw;height:75.9vw;left:50%;top:50%}
  .hero__panel--b{--tf:rotate(3deg);width:40vw;height:50vw;left:-7vw;top:9%}
  .hero__panel--c{--tf:rotate(-3.5deg);width:38vw;height:47.5vw;right:-6vw;bottom:6%}
  .steps{grid-template-columns:1fr}
  .steps__rail{display:none}
  .service{grid-template-columns:1fr}
  .service:nth-child(even) .service__body{order:0}
  .service:nth-child(even) .service__demo{order:0}
  .service__demo{max-width:460px}
  .worklist__name{font-size:1.6rem}
}

/* ============================================================
   Reduced motion: content first, no scrub, no canvas
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .threads,.hero__motes{display:none}
  .hero{height:auto}
  .hero__sticky{position:relative;height:100vh}
  /* keep the veil VEILED: reduce-motion phones were getting sharp panels
     behind a 72% scrim — the whole hero leaked on load */
  .hero__work{filter:blur(12px) saturate(.85);opacity:.28;transform:none}
  .hero__veil{-webkit-mask:none;mask:none;background:var(--paper)}
  .hero__mark,.hero__tag{opacity:1;transform:none;transition:none;animation:none}
  .lf{opacity:1;transform:none;animation:none!important}
  .lfp{animation:none!important}
  .st__line>span{transform:none;transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .steps__item{opacity:1;transform:none}
  .kw{filter:none;opacity:1}
  .kw:after{transform:scaleX(1)}
  [data-cframe]:not(.is-clear) .cb{transform:none;filter:none;opacity:1}
  .si,.si-d{stroke-dashoffset:0}
  .pw{stroke-dashoffset:0}
  .pgo__veil{transform:translateY(-101%)}
  .pgo__page i{opacity:1;transform:none}
  .pgo__dot{background:var(--teal)}
  .wframe{opacity:1;filter:none;transform:none}
  .wframe:not(.is-active){display:none}
  .cur__dot,.cur__ring{display:none}
  .demo-browser__view img{animation:none}
  .steps__item.is-in.is-dim{opacity:1}
}

/* ---- old-engine fallbacks (engines without aspect-ratio also lack flex gap) ---- */
@supports not (aspect-ratio:1/1){
  .nav__links a{margin-left:clamp(20px,3vw,42px)}
  .nav__links a:first-child{margin-left:0}
  .footer__nav a{margin-left:22px}
  .footer__nav a:first-child{margin-left:0}
  .quick__form>.qfield{margin-bottom:30px}
  .demo-chat__log>*{margin-top:9px}
  .bot__log>*{margin-top:12px}
  .chips .chip{margin-left:12px}
}