/* ============================================================ 결 스튜디오 — Vale 데모 (v2-style, interior studio) Warm paper + charcoal + one teal whisper (#40847D). Self-contained: reveals (.rv / .veil-in), reduced-motion safe. Media queries live at the END of this file. ============================================================ */ /* ---- fonts (self-hosted, shared with root) ---- */ @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} :root{ --paper:rgb(245,241,234); --paper-2:rgb(236,230,219); --paper-3:rgb(226,218,203); --ink:rgb(20,20,20); --ink-warm:rgb(33,30,26); --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); --gutter:clamp(20px,5vw,72px); --maxw:1180px; } *,*:before,*:after{margin:0;padding:0;box-sizing:border-box} html{overflow-x:hidden;scroll-behavior:smooth} /* the horizontal clip lives on ONLY. Putting overflow-x:hidden on the body too (while html is already non-visible) turns the body into its own scroll container, and position:sticky children — the strata stage — stop pinning entirely. */ body{background:var(--paper);color:var(--ink-warm);font-family:var(--f-sans);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;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 grain (matches root) */ .grain{position:fixed;top:-60%;right:-60%;bottom:-60%;left:-60%;width:220%;height:220%;z-index:3;pointer-events:none; opacity:.045;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")} main,footer{position:relative;z-index:1} /* ---- reveals ---- */ .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .rv.is-in{opacity:1;transform:none} .rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s} .veil-in{opacity:0;transform:translateY(14px);filter:blur(6px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)} .veil-in.is-in{opacity:1;transform:none;filter:none} .veil-in.d1{transition-delay:.12s}.veil-in.d2{transition-delay:.24s} .veil-in.d3{transition-delay:.36s}.veil-in.d4{transition-delay:.48s} /* ---- shared furniture ---- */ .section{position:relative;padding:clamp(84px,11vw,150px) var(--gutter)} .section__head{max-width:var(--maxw);margin:0 auto clamp(40px,5.5vw,72px)} .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.3em;color:var(--teal-ink);margin-bottom:20px} .section__head h2{font-family:var(--f-serif);font-weight:600;line-height:1.22; font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:-.01em} .lead{margin-top:20px;max-width:52ch;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.08rem)} em{font-style:normal;color:var(--teal-ink)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--ink);color:var(--paper); font-size:.9rem;font-weight:600;padding:.95em 1.7em;border-radius:100px;border:1px solid var(--ink);cursor:pointer; transition:background .35s,border-color .35s,transform .35s var(--ease-out),color .35s} .btn:hover{background:var(--teal-ink);border-color:var(--teal-ink);transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--ink-warm);border-color:var(--hairline)} .btn--ghost:hover{background:transparent;color:var(--teal-ink);border-color:var(--teal-ink)} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between; gap:20px;padding:16px var(--gutter);background:rgba(245,241,234,.82);backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--hairline)} .nav__logo{display:inline-flex;align-items:center;gap:11px} .mark{width:32px;height:32px;flex:none} .mark__frame{fill:none;stroke:var(--teal-ink);stroke-width:1.7} .mark__grain{fill:none;stroke:var(--teal-ink);stroke-width:1.5;stroke-linecap:round;opacity:.55} .mark__cut{fill:none;stroke:var(--teal-ink);stroke-width:1.7;stroke-linecap:round} .nav__word{font-family:var(--f-serif);font-size:1.12rem;font-weight:600;letter-spacing:-.01em} .nav__word b{font-weight:700} .nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);font-size:.9rem} .nav__links a{color:var(--ink-soft);transition:color .3s} .nav__links a:hover{color:var(--ink-warm)} .nav__cta{background:var(--ink);color:var(--paper)!important;padding:.6em 1.15em;border-radius:100px;font-weight:600; transition:background .35s} .nav__cta:hover{background:var(--teal-ink)} .nav__menu{display:none;width:44px;height:44px;border:1px solid var(--hairline);border-radius:10px;background:none; cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center} .nav__menu span{width:18px;height:1.5px;background:var(--ink-warm);transition:transform .3s,opacity .3s} .nav.is-open .nav__menu span:first-child{transform:translateY(3.25px) rotate(45deg)} .nav.is-open .nav__menu span:last-child{transform:translateY(-3.25px) rotate(-45deg)} /* ---- demo pill ---- */ .demo-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:940;display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:100px; background:rgba(20,20,20,.9);color:var(--paper);font-size:.72rem;backdrop-filter:blur(8px); box-shadow:0 18px 44px -18px rgba(20,20,20,.6);max-width:calc(100vw - 32px)} .demo-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 0 rgba(64,132,125,.6); animation:pulse 2.6s var(--ease-out) infinite} .demo-pill__label{opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .demo-pill__back{background:rgba(245,241,234,.14);padding:.5em 1em;border-radius:100px;font-weight:600;flex:none; transition:background .3s} .demo-pill__back:hover{background:rgba(245,241,234,.28)} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(64,132,125,.5)}70%{box-shadow:0 0 0 8px rgba(64,132,125,0)}100%{box-shadow:0 0 0 0 rgba(64,132,125,0)}} /* ---- hero ---- */ .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center; padding:clamp(48px,7vw,96px) var(--gutter) clamp(70px,9vw,120px);max-width:var(--maxw);margin:0 auto} .hero__title{font-family:var(--f-serif);font-weight:700;line-height:1.12;letter-spacing:-.02em; font-size:clamp(2.5rem,6.4vw,4.4rem);margin:14px 0 0} .hero__lead{margin-top:24px;max-width:46ch;color:var(--ink-soft);font-size:clamp(1.02rem,1.5vw,1.15rem)} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .hero__stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);margin-top:44px; padding-top:28px;border-top:1px solid var(--hairline)} .hero__stats b{display:block;font-family:var(--f-serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-.01em} .hero__stats b span{color:var(--teal-ink);font-size:.65em} .hero__stats small{color:var(--ink-soft);font-size:.8rem} .hero__img{position:relative;border-radius:18px;overflow:hidden;background:var(--paper-3); box-shadow:0 48px 100px -46px rgba(20,20,20,.5)} .hero__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11} .hero__img figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 15px;color:var(--paper); font-size:.76rem;letter-spacing:.02em;background:linear-gradient(transparent,rgba(20,20,20,.6))} /* ---- hero brand film ---- The film is baked on the same warm paper as the page, so it sits on --paper-2 with no letterbox and no dark chrome. 16:9 is reserved up front (width/height + aspect-ratio) so the poster swap costs no layout shift. */ .hero__film{position:relative;border-radius:18px;overflow:hidden;background:var(--paper-2); box-shadow:0 48px 100px -46px rgba(20,20,20,.5)} .hero__film-v{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2)} .hero__film-v img{width:100%;height:auto} .hero__film figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 15px;color:var(--paper); font-size:.76rem;letter-spacing:.02em;background:linear-gradient(transparent,rgba(20,20,20,.62))} /* WCAG 2.2.2: a looping autoplay film needs a real pause control */ .hero__film-btn{position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center; border:0;border-radius:50%;cursor:pointer;background:rgba(20,20,20,.55);color:var(--paper); backdrop-filter:blur(6px);opacity:.55;transition:opacity .3s,background .3s} .hero__film:hover .hero__film-btn,.hero__film-btn:focus-visible{opacity:1;background:rgba(20,20,20,.78)} .hero__film-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round} .hero__film-btn .ic-play{fill:currentColor;stroke:none;display:none} .hero__film.is-paused .hero__film-btn{opacity:1} .hero__film.is-paused .ic-pause{display:none} .hero__film.is-paused .ic-play{display:block} /* ---- work / portfolio ---- */ .proj-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)} .proj{background:#fff;border:1px solid var(--hairline);border-radius:16px;overflow:hidden; box-shadow:0 20px 50px -34px rgba(20,20,20,.4);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)} .proj:hover{transform:translateY(-5px);box-shadow:0 34px 66px -34px rgba(20,20,20,.45)} .proj__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)} .proj__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)} .proj:hover .proj__img img{transform:scale(1.05)} .proj__tag{position:absolute;top:12px;left:12px;background:rgba(20,20,20,.78);color:var(--paper); font-size:.68rem;font-weight:600;padding:.35em .8em;border-radius:100px;backdrop-filter:blur(4px)} .proj__body{padding:18px 20px 22px} .proj__body h3{font-family:var(--f-serif);font-size:1.18rem;font-weight:600;display:flex;align-items:baseline; justify-content:space-between;gap:10px} .proj__body h3 span{font-family:var(--f-sans);font-size:.78rem;font-weight:600;color:var(--teal-ink);flex:none} .proj__body p{margin-top:8px;color:var(--ink-soft);font-size:.9rem} .proj__meta{display:inline-block;margin-top:14px;font-size:.74rem;letter-spacing:.03em;color:var(--ink-soft); padding-top:12px;border-top:1px solid var(--hairline);width:100%} /* ---- process ---- */ .steps{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--hairline)} .steps li{display:flex;align-items:flex-start;gap:clamp(18px,3vw,44px);padding:clamp(22px,3vw,32px) 0; border-bottom:1px solid var(--hairline)} .steps__n{font-family:var(--f-serif);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600;color:var(--teal-ink); flex:none;width:2.2em} .steps li div{flex:1;min-width:0} .steps li b{font-family:var(--f-serif);font-size:1.2rem;font-weight:600} .steps li p{margin-top:6px;color:var(--ink-soft);font-size:.94rem;max-width:52ch} .steps__when{flex:none;align-self:center;font-size:.76rem;font-weight:600;color:var(--ink-warm); background:var(--paper-2);padding:.5em 1em;border-radius:100px;white-space:nowrap} /* ---- pricing ---- */ .price-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)} .price{position:relative;background:#fff;border:1px solid var(--hairline);border-radius:18px; padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,30px);display:flex;flex-direction:column} .price--feat{background:var(--ink);color:var(--paper);border-color:var(--ink)} .price__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--teal);color:var(--paper); font-size:.66rem;font-weight:600;padding:.4em .9em;border-radius:100px;white-space:nowrap} .price__size{font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--teal-ink)} .price--feat .price__size{color:#8fd3c9} .price__num{font-family:var(--f-serif);font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.01em;margin:10px 0 4px} .price__num small{font-size:.42em;font-weight:600;color:var(--ink-soft)} .price--feat .price__num small{color:rgba(245,241,234,.6)} .price p{color:var(--ink-soft);font-size:.86rem} .price--feat p{color:rgba(245,241,234,.7)} .price ul{margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:11px} .price--feat ul{border-color:rgba(245,241,234,.18)} .price li{position:relative;padding-left:22px;font-size:.9rem;color:var(--ink-warm)} .price--feat li{color:rgba(245,241,234,.92)} .price li:before{content:"";position:absolute;left:0;top:.5em;width:11px;height:6px;border-left:1.6px solid var(--teal); border-bottom:1.6px solid var(--teal);transform:rotate(-45deg)} .price-foot{max-width:var(--maxw);margin:clamp(26px,3vw,40px) auto 0;font-size:.8rem;color:var(--ink-soft);text-align:center} /* ---- consult ---- */ .consult{background:var(--paper-2)} .consult__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr; gap:clamp(34px,5vw,72px);align-items:center} .consult__intro h2{font-family:var(--f-serif);font-weight:600;line-height:1.22;font-size:clamp(1.7rem,3.6vw,2.6rem)} .consult__form{background:var(--paper);border:1px solid var(--hairline);border-radius:20px; padding:clamp(24px,3vw,38px);display:grid;grid-template-columns:1fr 1fr;gap:16px; box-shadow:0 40px 90px -50px rgba(20,20,20,.4)} .consult__form .f{display:flex;flex-direction:column;gap:7px} .consult__form label{font-size:.78rem;font-weight:600;color:var(--ink-soft)} .consult__form input{border:1px solid var(--hairline);border-radius:10px;padding:.85em 1em;font-family:inherit; font-size:.92rem;color:var(--ink-warm);background:#fff;transition:border-color .3s} .consult__form input:focus{outline:none;border-color:var(--teal)} .consult__form .btn{grid-column:1/-1;margin-top:4px} .consult__note{grid-column:1/-1;font-size:.74rem;color:var(--ink-soft);text-align:center} .consult__note.is-ok{color:var(--teal-ink);font-weight:600} /* ---- footer ---- */ .footer{border-top:1px solid var(--hairline);padding:clamp(48px,6vw,84px) 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:24px;flex-wrap:wrap;padding-bottom:clamp(26px,3.5vw,44px);border-bottom:1px solid var(--hairline)} .footer__tag{font-family:var(--f-serif);font-size:1.05rem;color:var(--ink-soft)} .footer__note{max-width:var(--maxw);margin:0 auto;padding-top:26px;font-size:.82rem;color:var(--ink-soft);line-height:1.75} .footer__note b{color:var(--ink-warm)} .footer__note a{color:var(--teal-ink);border-bottom:1px solid rgba(46,102,96,.35)} .footer__biz{margin-top:10px;font-size:.76rem;opacity:.85} .footer__cta{display:inline-block;max-width:var(--maxw);margin:clamp(22px,3vw,34px) auto 0;font-size:.9rem; font-weight:600;color:var(--teal-ink);transition:color .3s} .footer__cta:hover{color:var(--ink-warm)} /* ---- chatbot (matches root aesthetic) ---- */ .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(20,20,20,.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;inset: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(20,20,20,.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);font-family:var(--f-serif); font-weight:700;color:var(--paper);font-size:.9rem} .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 strong{display:block;font-size:.8rem;color:var(--paper);white-space:nowrap} .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} .bot__x:hover{background:rgba(245,241,234,.2)} .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-warm);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} .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} @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}} .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-warm);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} /* ============================================================ Strata — the scroll-scrubbed showstopper A tall section whose stage sticks: gyeol.js scrubs 121 WebP frames across a canvas as scroll progress moves 0 → 1, so the finished room comes apart into 마감 → 설비 → 골조. No scroll listeners — an IO-gated rAF loop reads getBoundingClientRect. Reduced motion flattens the whole thing (end of file). ============================================================ */ .strata{position:relative;height:340vh;background:var(--paper-2)} .strata__stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center} .strata__canvas{width:100%;height:100%;display:block} /* the frames are contain-fitted, so paper shows above and below; this just deepens it under the captions so the text never sits on the render itself */ .strata__stage:after{content:"";position:absolute;right:0;bottom:0;left:0;height:42%;pointer-events:none; background:linear-gradient(to top,var(--paper-2) 14%,rgba(236,230,219,0))} .strata__head,.strata__captions,.strata__progress{z-index:2} .strata__head{position:absolute;top:clamp(72px,11vh,118px);left:var(--gutter);right:var(--gutter); max-width:var(--maxw);margin:0 auto;pointer-events:none} .strata__head .eyebrow{margin-bottom:10px} .strata__head h2{font-family:var(--f-serif);font-weight:600;line-height:1.24;color:var(--ink); font-size:clamp(1.5rem,3.4vw,2.6rem)} .strata__captions{position:absolute;left:var(--gutter);bottom:clamp(64px,11vh,112px);width:min(430px,78vw)} .strata__cap{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(16px); transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);pointer-events:none} .strata__cap.is-on{opacity:1;transform:none} .strata__cap b{display:block;font-family:var(--f-serif);font-weight:600;color:var(--ink); font-size:clamp(1.25rem,2.4vw,1.85rem)} .strata__cap span{display:block;margin-top:8px;font-size:.92rem;color:var(--ink-soft)} .strata__progress{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%); width:2px;height:min(36vh,280px);background:rgba(33,30,26,.14);border-radius:2px} .strata__progress i{display:block;width:100%;height:100%;background:var(--teal); transform:scaleY(0);transform-origin:top;border-radius:2px;will-change:transform} /* ============================================================ Responsive + reduced motion (media queries — END of file) ============================================================ */ @media(max-width:900px){ .hero{grid-template-columns:1fr;padding-top:clamp(30px,6vw,60px)} .hero__img,.hero__film{order:-1} .consult__inner{grid-template-columns:1fr} .proj-grid,.price-grid{grid-template-columns:repeat(2,1fr)} .price--feat{transform:none} } @media(max-width:760px){ .nav__links{position:fixed;inset:0 0 0 auto;width:min(80vw,300px);flex-direction:column;align-items:flex-start; justify-content:center;gap:22px;padding:32px;background:var(--paper);border-left:1px solid var(--hairline); transform:translateX(100%);transition:transform .45s var(--ease-out);font-size:1.1rem} .nav.is-open .nav__links{transform:none} .nav__menu{display:flex} .nav__cta{align-self:flex-start} .proj-grid,.price-grid{grid-template-columns:1fr;max-width:440px} .consult__form{grid-template-columns:1fr} .steps li{flex-wrap:wrap;gap:12px 18px} .steps__when{align-self:flex-start;margin-left:calc(2.2em + 18px)} .demo-pill__label{display:none} /* a portrait viewport contain-fits the 16:9 frames small, so the scrub needs less runway and the captions need the room the progress rail was using */ .strata{height:250vh} .strata__captions{width:calc(100% - var(--gutter) * 2)} .strata__progress{display:none} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv,.veil-in{opacity:1!important;transform:none!important;filter:none!important;transition:none} .grain{animation:none} .demo-pill__dot{animation:none} .msg--typing i{animation:none;opacity:.5} .proj:hover{transform:none} .proj:hover .proj__img img{transform:none} .btn:hover{transform:none} /* the film never autoplays here (gyeol.js pauses it); keep the way to start it visible instead of hiding it behind hover */ .hero__film-btn{opacity:1} /* strata: no scrub and no pin — a still of the finished room with all four 층위 spelled out underneath, so the section still says what it says */ .strata{height:auto} /* a column, not the pinned grid — align-items:stretch is what keeps the copy full-width instead of inheriting the stage's place-items:center */ .strata__stage{position:relative;height:auto;overflow:visible; display:flex;flex-direction:column;align-items:stretch; padding:clamp(64px,9vw,120px) var(--gutter);max-width:var(--maxw);margin:0 auto} .strata__stage:after{display:none} .strata__canvas{height:auto;aspect-ratio:16/9;border-radius:14px} /* heading before the picture: the canvas is first in the DOM because the scrubbed version needs it underneath everything */ .strata__head{order:-1;position:static;padding:0;margin:0 0 clamp(24px,4vw,40px)} .strata__captions{position:static;width:auto;margin-top:clamp(28px,4vw,44px); display:grid;gap:22px} .strata__cap{position:static;opacity:1;transform:none;transition:none} .strata__progress{display:none} }