:root { --shell:1280px; --header-height:75px; --radius:10px; color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 28px)} body{margin:0;overflow-x:clip;background:var(--white);color:var(--ink);font-family:Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;font-size:16px;line-height:2;word-break:keep-all;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body,h1,h2,h3,p,ol,ul,figure{margin:0} ol,ul{padding:0;list-style:none} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.site-footer a:focus-visible{outline-color:var(--white)} .skip-link{position:fixed;top:12px;left:12px;z-index:300;padding:10px 16px;border-radius:7px;background:var(--blue);color:var(--white);font-weight:700;transform:translateY(-180%);transition:transform .2s ease}.skip-link:focus{transform:translateY(0)} .reference-shell{width:min(calc(100% - 100px),var(--shell));margin-inline:auto} .site-header{position:sticky;top:0;z-index:120;height:var(--header-height);border-bottom:1px solid rgba(0,0,0,.063);background:rgba(255,255,255,.82);backdrop-filter:blur(10px);box-shadow:none} .site-header__inner{display:flex;align-items:center;gap:28px;width:var(--page);height:100%;margin-inline:auto} .brand{display:inline-flex;align-items:center;justify-self:start;line-height:0}.brand-logo-picture{display:block;line-height:0}.brand-logo{display:block;width:auto;height:40px}.brand-logo--footer{height:40px} .site-nav{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}.site-nav a{position:relative;padding:13px 20px;font-size:17px;font-weight:600;line-height:1;letter-spacing:-0.018em}.header-inquiry{position:relative;font-size:16px;font-weight:700;line-height:1;letter-spacing:-0.018em} .site-nav a::after{position:absolute;right:0;bottom:-8px;left:0;height:2px;background:var(--blue);content:"";transform:scaleX(0);transform-origin:right;transition:transform .2s ease}.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left} .header-inquiry{display:inline-flex;min-height:46px;align-items:center;justify-content:center;justify-self:end;padding-inline:24px;border:1px solid var(--ink);border-radius:7px;background:var(--white);color:var(--ink);transition:color .3s ease,background-color .3s ease,border-color .3s ease}.header-inquiry:hover,.header-inquiry:focus-visible{border-color:var(--blue);background:var(--blue);color:var(--white)}.mobile-header-actions,.mobile-nav{display:none}.mobile-header-inquiry,.mobile-menu-toggle{min-height:44px;align-items:center;justify-content:center;border:1px solid var(--ink);border-radius:7px;background:var(--white);font:inherit;font-weight:700}.mobile-header-inquiry{padding-inline:14px}.mobile-menu-toggle{width:44px;padding:0;cursor:pointer}.mobile-menu-toggle__line,.mobile-menu-toggle__line::before,.mobile-menu-toggle__line::after{display:block;width:16px;height:2px;border-radius:10px;background:var(--ink);content:"";transition:transform .2s ease}.mobile-menu-toggle__line{position:relative}.mobile-menu-toggle__line::before{position:absolute;top:-5px}.mobile-menu-toggle__line::after{position:absolute;top:5px}.site-header.is-mobile-menu-open .mobile-menu-toggle__line{background:transparent}.site-header.is-mobile-menu-open .mobile-menu-toggle__line::before{transform:translateY(5px) rotate(45deg)}.site-header.is-mobile-menu-open .mobile-menu-toggle__line::after{transform:translateY(-5px) rotate(-45deg)} main>section{position:relative} .hero{display:flex;min-height:calc(100svh - var(--header-height));align-items:center;padding-block:62px;background:var(--white)} .hero__inner{display:grid;grid-template-columns:minmax(440px,.9fr) minmax(600px,1.1fr);align-items:center;gap:clamp(48px,6vw,108px)}.hero__copy{min-width:0;container-type:inline-size} .hero h1{max-width:650px;font-size:clamp(34px,12cqw,70px);font-weight:700;line-height:1.17;letter-spacing:-0.018em;white-space:nowrap}.hero-title__line{display:inline-block}.hero h1 strong{position:relative;color:var(--blue);font-weight:inherit;z-index:0}.hero h1 strong::after{position:absolute;right:-.02em;bottom:.06em;left:-.02em;z-index:-1;height:.22em;border-radius:7px;background:var(--highlight);content:""} .hero__description{max-width:610px;margin-top:31px;font-size:20px;line-height:1.65} .hero-inquiry__button{display:inline-flex;min-width:200px;min-height:52px;align-items:center;justify-content:center;margin-top:38px;padding-inline:26px;border-radius:7px;background:var(--blue);color:var(--white);font-size:17px;font-weight:700;transition:transform .2s ease,background-color .2s ease}.hero-inquiry__button:hover{background:var(--blue-hover);transform:translateY(-1px)} [data-reveal]{opacity:1;transform:none}.reveal-ready [data-reveal]{transition:opacity .7s ease-out,transform .7s ease-out}.reveal-ready [data-reveal]:not(.is-visible){opacity:0;transform:translateY(24px)} .section{padding-block:120px}.section-title{font-size:45px;font-weight:700;line-height:1.4;letter-spacing:-0.018em;text-wrap:balance}.section-lead{margin-top:19px;color:var(--muted);font-size:16px;line-height:1.7}.feature-card{display:grid;grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);min-height:470px;align-items:center;gap:clamp(44px,6vw,100px);padding:70px 100px;border-radius:var(--radius);overflow:hidden} .feature-card h2,.feature-card h3,.work-intro h2,.contact-card h2{font-size:45px;font-weight:700;line-height:1.4;letter-spacing:-0.018em;text-wrap:balance}.feature-card__lead,.work-intro__lead{margin-top:22px;color:var(--muted);font-size:16px;line-height:1.7}.feature-card__support,.work-intro__support{margin-top:17px;color:var(--muted);font-size:15px;line-height:1.7} .services{padding-block:120px;background:var(--white)}.services__header{text-align:center}.services__support{margin-top:19px;color:var(--muted);font-size:16px}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:64px}.service-card{position:relative;min-height:230px;padding:32px 28px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;background:var(--white);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.service-card:hover{border-color:var(--blue);box-shadow:none;transform:translateY(-3px)}.service-card__index{color:var(--blue);font-size:14px;font-weight:700;letter-spacing:.08em}.service-card h3{margin-top:30px;font-size:20px;line-height:1.4;letter-spacing:-0.018em}.service-card p{margin-top:11px;color:var(--muted);font-size:14px;line-height:1.65}.service-card__more{position:static;margin-top:auto;padding-top:20px;color:var(--blue);font-size:12px;font-weight:700} .process{padding-block:120px;background:var(--tint)}.process__header{max-width:790px;margin-inline:auto;text-align:center;container-type:inline-size}.process-track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;margin-top:80px}.process-track::before{position:absolute;top:78px;right:7%;left:7%;height:2px;background:var(--line);content:""}.process-step{position:relative;z-index:1;min-width:0;text-align:center}.process-step__visual{display:grid;width:156px;max-width:100%;aspect-ratio:1;place-items:center;margin-inline:auto;border:1px solid var(--line);border-radius:50%;background-color:var(--white);box-shadow:none}.process-step__visual img{width:90%;height:90%;overflow:visible;object-fit:contain}.process-step h3{margin-top:27px;font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-0.018em}.process-step p{margin:9px auto 0;max-width:180px;color:var(--muted);font-size:13px;line-height:1.6} .work{padding:120px 0 0;background:var(--white)}.work-intro{max-width:780px;min-height:0;margin-inline:auto;text-align:center} .motion-cta{position:relative;display:inline-flex;min-height:48px;align-items:center;justify-content:center;margin-top:36px;padding:0 22px;overflow:hidden;border:1px solid var(--blue);border-radius:7px;background:var(--white);color:var(--ink);font-size:15px;font-weight:400;line-height:1;transition:background-color .3s ease,color .3s ease}.motion-cta__label{position:relative;z-index:1;transform:translateX(15px);transition:transform .5s ease,color .3s ease}.motion-cta__icon{position:absolute;top:50%;left:10px;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--blue);color:var(--white);font-size:16px;font-weight:700;line-height:1;transform:translateY(-50%);transition:left .5s ease,background-color .3s ease,color .3s ease}.motion-cta>span.motion-cta__icon{transition:left 1.25s ease,background-color .3s ease,color .3s ease}.motion-cta:hover,.motion-cta:focus-visible{background:var(--blue);color:var(--white)}.motion-cta:hover .motion-cta__label,.motion-cta:focus-visible .motion-cta__label{transform:translateX(-26px)}.motion-cta:hover .motion-cta__icon,.motion-cta:focus-visible .motion-cta__icon{left:calc(100% - 38px);background:var(--white);color:var(--blue)} .portfolio-marquee{position:relative;width:100%;margin-top:82px;overflow:hidden}.portfolio-marquee::before,.portfolio-marquee::after{position:absolute;top:0;bottom:0;z-index:4;width:5vw;content:"";pointer-events:none}.portfolio-marquee::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}.portfolio-marquee::after{right:0;background:linear-gradient(-90deg,var(--white),transparent)} .portfolio-marquee__track{display:flex;width:max-content;gap:24px;padding:12px 0 30px;animation:portfolioMove 50s linear infinite;will-change:transform}.portfolio-marquee__track:hover,.portfolio-marquee:has(.portfolio-card:focus-visible) .portfolio-marquee__track,.portfolio-marquee.is-paused .portfolio-marquee__track{animation-play-state:paused}.portfolio-marquee__set{display:flex;gap:24px}@keyframes portfolioMove{to{transform:translateX(calc(-50% - 12px))}} .portfolio-card{position:relative;display:block;flex:0 0 397px;overflow:hidden;border:1px solid rgba(34,26,26,.09);border-radius:10px;background:var(--white);box-shadow:none}.portfolio-card__image{aspect-ratio:1/1;overflow:hidden;background:var(--surface)}.portfolio-card__image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s ease}.portfolio-card:hover .portfolio-card__image img{transform:scale(1.025)}.portfolio-card__caption{display:flex;min-height:117px;align-items:flex-end;justify-content:space-between;gap:20px;padding:30px}.portfolio-card h3{font-size:20px;line-height:1.35;letter-spacing:-0.018em}.portfolio-card__label{flex:0 0 auto;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.03em;opacity:.76} .about{padding-block:120px;background:var(--tint)}.about-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);min-height:0;align-items:center;gap:clamp(52px,7vw,112px);padding:0;border:0;border-radius:0;background:transparent}.about-card>div{container-type:inline-size}.about-card h2{margin-top:16px;font-size:45px;font-weight:700;line-height:1.4;letter-spacing:-0.018em;text-wrap:balance}.about-card__lead{max-width:650px;margin-top:22px;color:var(--muted);font-size:16px;line-height:1.7}.about-card__support{max-width:650px;margin-top:13px;color:var(--muted);font-size:15px;line-height:1.75}.about-proof{display:grid;gap:12px}.about-proof__item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:4px 14px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--white)}.about-proof__item>span{grid-row:1/3;color:var(--blue);font-size:14px;font-weight:700}.about-proof__item strong{font-size:16px;line-height:1.45}.about-proof__item p{color:var(--muted);font-size:13px;line-height:1.55} .column-preview{padding-block:120px;background:var(--white)}.column-preview__head{max-width:790px;margin-inline:auto;text-align:center;container-type:inline-size}.column-preview__head h2{margin-top:13px;font-size:45px;font-weight:700;line-height:1.4;letter-spacing:-0.018em;text-wrap:balance}.column-preview__head p{max-width:650px;margin-top:16px;color:var(--muted);font-size:16px;line-height:1.7}.column-preview__archive{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:0 22px;border:1px solid var(--blue);border-radius:7px;font-size:15px;font-weight:700;transition:background-color .2s ease,color .2s ease}.column-preview__archive:hover,.column-preview__archive:focus-visible{background:var(--blue);color:var(--white)}.column-preview__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}.column-preview__card{display:flex;min-width:0;min-height:250px;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.column-preview__card:hover,.column-preview__card:focus-visible{border-color:var(--blue);box-shadow:none;transform:translateY(-3px)}.column-preview__meta{margin-top:0;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.04em}.column-preview__card h3{margin-top:18px;font-size:20px;line-height:1.45;letter-spacing:-0.018em}.column-preview__card p{margin-top:auto;padding-top:22px;color:var(--muted);font-size:14px;line-height:1.65} .contact{padding-block:120px;background:var(--dark);color:var(--white)}.contact-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:300px;align-items:center;gap:70px;padding:64px 76px;overflow:hidden;background:transparent}.contact-card h2{color:var(--white)}.contact-card p{max-width:650px;margin-top:18px;color:rgba(255,255,255,.72);font-size:17px}.contact-card .motion-cta{margin-top:0;border-color:var(--white);background:var(--white);color:var(--blue)}.contact-card .motion-cta:hover,.contact-card .motion-cta:focus-visible{background:var(--white);color:var(--blue)}.contact-card .motion-cta:hover .motion-cta__icon,.contact-card .motion-cta:focus-visible .motion-cta__icon{background:var(--blue);color:var(--white)} .site-footer{padding:70px 0 38px;background:var(--dark);color:var(--white)}.site-footer__top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:70px}.site-footer__description{max-width:480px;margin-top:20px;color:rgba(255,255,255,.68);font-size:14px}.site-footer__nav{display:grid;gap:8px;color:rgba(255,255,255,.72);font-size:14px}.site-footer__nav a:hover{color:var(--white)}.footer-email{display:inline-flex;padding:12px 17px;border:1px solid var(--white);border-radius:7px;background:transparent;color:var(--white);font-size:14px;font-weight:700}.site-footer__bottom{display:flex;justify-content:space-between;gap:30px;margin-top:55px;padding-top:25px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.5);font-size:12px} @media(max-width:1180px){.site-header__inner{grid-template-columns:190px 1fr 190px;padding-inline:32px}.site-nav{gap:24px}.hero__inner{grid-template-columns:minmax(360px,.9fr) minmax(480px,1.1fr);gap:32px}.feature-card{grid-template-columns:minmax(0,.82fr) minmax(430px,1.18fr);padding:54px}.petal-mark{margin-left:0}.about-card{grid-template-columns:minmax(0,1fr) minmax(360px,.85fr)}.process-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:55px 24px}.process-track::before{display:none}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:960px){:root{--header-height:78px}.reference-shell{width:min(calc(100% - 56px),var(--shell))}.site-header__inner{display:flex;justify-content:space-between;padding-inline:28px}.site-nav,.header-inquiry{display:none}.mobile-header-actions{display:flex;align-items:center;gap:8px;font-size:13px}.mobile-header-inquiry,.mobile-menu-toggle{display:inline-flex}.mobile-nav{position:absolute;top:calc(100% + 10px);right:18px;left:18px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--white);box-shadow:none}.mobile-nav a{display:flex;min-height:44px;align-items:center;padding:0 12px;border-radius:10px;background:var(--surface);font-size:14px;font-weight:700}.site-header.is-mobile-menu-open .mobile-nav{display:grid}.hero{min-height:auto;padding-block:82px 105px}.hero__inner{grid-template-columns:1fr;gap:30px}.hero__copy{order:1;text-align:center}.hero h1,.hero__description,.hero__support,.hero-actions{justify-content:center}.feature-card,.about-card{grid-template-columns:1fr}.feature-card{min-height:auto;padding:54px}.column-preview__head{text-align:center}.column-preview__grid{grid-template-columns:1fr}.contact-card{grid-template-columns:1fr;align-items:start}} @media(max-width:700px){:root{--header-height:70px}body{font-size:16px}.reference-shell{width:min(calc(100% - 36px),var(--shell))}.site-header__inner{padding-inline:18px}.site-header .brand-logo{height:32px}.mobile-header-actions{gap:6px;font-size:12px}.mobile-header-inquiry{padding-inline:11px}.mobile-nav{right:12px;left:12px}.hero{padding-block:52px 86px}.hero h1{font-size:clamp(34px,10.2vw,44px)}.hero__description{margin-top:24px;font-size:18px}.hero-actions{flex-direction:column}.hero-actions .hero-inquiry__button,.hero-actions .motion-cta{width:100%}.cta-panel .motion-cta{width:100%}.section{padding-block:86px}.feature-card{gap:38px;padding:38px 24px;border-radius:10px}.feature-card h2,.feature-card h3,.work-intro h2,.contact-card h2{font-size:34px;line-height:1.35}.feature-card__lead,.work-intro__lead,.section-lead,.column-preview__head p{font-size:15px}.about{padding-block:78px 96px}.about-card{gap:36px}.section-title,.about-card h2,.column-preview__head h2{font-size:34px;line-height:1.35}.about-card__lead{font-size:15px}.about-proof__item{grid-template-columns:34px minmax(0,1fr);padding:16px}.services{padding-block:90px}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}.service-card{min-height:0;padding:20px 16px}.service-card p{font-size:13px}.service-card h3{margin-top:12px}.process{padding-block:96px}.process-track{grid-template-columns:1fr;gap:44px;margin-top:58px}.process-step{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:20px;text-align:left}.process-step__visual{grid-row:1/3;width:112px}.process-step h3{margin-top:0}.process-step p{margin:8px 0 0}.work{padding-top:98px}.petal-mark{width:58px;height:58px;margin-inline:auto}.portfolio-marquee{margin-top:58px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x mandatory}.portfolio-marquee::-webkit-scrollbar{display:none}.portfolio-marquee::before,.portfolio-marquee::after{display:none}.portfolio-marquee__track{gap:18px;padding-inline:18px;animation:none;will-change:auto}.portfolio-marquee__set{gap:18px}.portfolio-marquee__set[aria-hidden="true"]{display:none}.portfolio-card{flex-basis:min(84vw,355px);scroll-snap-align:start}.column-preview{padding-block:88px}.column-preview__grid{gap:22px;margin-top:40px}.column-preview__card{min-height:220px;padding:24px}.column-preview__card h3{font-size:20px}.contact{padding-block:80px}.contact-card{min-height:0;gap:32px;padding:42px 25px}.site-footer__top{grid-template-columns:1fr;gap:32px}.site-footer__bottom{align-items:flex-start;flex-direction:column}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}[data-reveal]{opacity:1;transform:none}} .motion-cta{min-width:0;min-height:48px} .motion-cta>span.motion-cta__label{transform:translateX(15px)} .motion-cta:hover>span.motion-cta__label,.motion-cta:focus-visible>span.motion-cta__label{transform:translateX(-26px)} .motion-cta>span.motion-cta__icon{position:absolute} .motion-cta>span.motion-cta__icon,.motion-cta:hover>span.motion-cta__icon,.motion-cta:focus-visible>span.motion-cta__icon{transform:translateY(-50%)} /* Buttons: solid fill is the default, outline is the secondary. No pill, no wipe, no shadow. */ .nav-inquiry,.header-inquiry,.mobile-header-inquiry,.hero-inquiry__button{border:1px solid var(--blue);border-radius:7px;background:var(--blue);color:var(--white);font-weight:700;letter-spacing:-0.018em;transition:background-color .3s ease,border-color .3s ease,color .3s ease} .nav-inquiry:hover,.nav-inquiry:focus-visible,.header-inquiry:hover,.header-inquiry:focus-visible,.mobile-header-inquiry:hover,.mobile-header-inquiry:focus-visible,.hero-inquiry__button:hover,.hero-inquiry__button:focus-visible{border-color:var(--blue-hover);background:var(--blue-hover);color:var(--white);transform:none} .motion-cta,.column-preview__archive{border:1px solid var(--blue);border-radius:7px;background:var(--white);color:var(--blue);font-weight:700;letter-spacing:-0.018em;transition:background-color .3s ease,border-color .3s ease,color .3s ease} .motion-cta:hover,.motion-cta:focus-visible,.column-preview__archive:hover,.column-preview__archive:focus-visible{border-color:var(--blue);background:var(--blue);color:var(--white);transform:none} .footer-email{border:1px solid var(--white);border-radius:7px;background:transparent;color:var(--white);font-weight:700;letter-spacing:-0.018em;transition:background-color .3s ease,color .3s ease} .footer-email:hover,.footer-email:focus-visible{background:var(--white);color:var(--blue)} .contact-card .motion-cta{border-color:var(--white);background:var(--white);color:var(--blue)} .contact-card .motion-cta:hover,.contact-card .motion-cta:focus-visible{border-color:var(--tint);background:var(--tint);color:var(--blue)} .motion-cta>span.motion-cta__label,.motion-cta:hover>span.motion-cta__label,.motion-cta:focus-visible>span.motion-cta__label{transform:none} .motion-cta__arrow,.motion-cta__icon{display:none} @media (hover:none) and (pointer:coarse){ .nav-inquiry,.header-inquiry,.mobile-header-inquiry,.hero-inquiry__button,.motion-cta,.column-preview__archive,.footer-email{transition:transform .12s ease,border-color .12s ease,background-color .12s ease;-webkit-tap-highlight-color:transparent} .nav-inquiry:hover,.header-inquiry:hover,.mobile-header-inquiry:hover,.hero-inquiry__button:hover{background:var(--blue);border-color:var(--blue);color:var(--white)} .motion-cta:hover,.column-preview__archive:hover{background:var(--white);border-color:var(--blue);color:var(--blue)} .contact-card .motion-cta:hover{background:var(--white);border-color:var(--white);color:var(--blue)} .footer-email:hover{background:transparent;border-color:var(--white);color:var(--white)} .nav-inquiry:active,.header-inquiry:active,.mobile-header-inquiry:active,.hero-inquiry__button:active{background:var(--blue-hover);border-color:var(--blue-hover);color:var(--white);transform:scale(.97)} .motion-cta:active,.column-preview__archive:active{background:var(--blue);border-color:var(--blue);color:var(--white);transform:scale(.97)} .contact-card .motion-cta:active{background:var(--tint);border-color:var(--tint);color:var(--blue);transform:scale(.97)} .footer-email:active{background:var(--white);border-color:var(--white);color:var(--blue);transform:scale(.97)}} /* Shared CTA panel matches the home title scale. */ .cta-panel h2{font-size:45px;line-height:1.4}.cta-panel p{font-size:16px;line-height:1.7} @media(max-width:700px){.cta-panel h2{font-size:34px;line-height:1.35}.cta-panel p{font-size:15px}} /* --- Home motion (approved plan) --- */ .reveal-ready .portfolio-marquee:not(.is-visible){transform:translateX(60px)} .reveal-ready .portfolio-marquee:not(.is-visible) .portfolio-marquee__track{animation-play-state:paused} .portfolio-card{transition:transform .3s ease,border-color .3s ease} .portfolio-card:hover{transform:translateY(-4px);border-color:var(--blue)} .portfolio-card__label{transition:opacity .3s ease} .portfolio-card:hover .portfolio-card__label{opacity:1} .about-proof__item>span{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;transition:background-color .25s ease,color .25s ease} .about-proof__item:hover>span{background:var(--blue);color:var(--white)} .service-card__arrow{display:inline-block;transition:transform .25s ease} .service-card:hover .service-card__arrow{transform:translateX(4px)} .process-track::before{transform-origin:left center;transition:transform 1s ease-out .2s} .reveal-ready .process-track:not(.is-visible)::before{transform:scaleX(0)} .process-step__visual{transition:border-color .3s ease,transform .3s ease} .process-step:hover .process-step__visual{border-color:var(--blue);transform:scale(1.04)} .column-preview__card h3{transition:color .25s ease} .column-preview__card:hover h3{color:var(--blue)} /* Hero: primary + secondary CTA side by side. */ .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:38px} .hero-actions .hero-inquiry__button,.hero-actions .motion-cta{margin-top:0} /* Column header text centred; the archive link sits under the cards. */ .column-preview__head p{margin-inline:auto} .column-preview__more{display:flex;justify-content:center;margin-top:40px} /* Home section rhythm: every block 120px. */ .cta-section{padding-block:120px} @media(max-width:360px){.service-grid{grid-template-columns:1fr}} .hero__assurance{margin-top:16px;color:var(--muted);font-size:13px;line-height:1.6} .column-preview__card{padding:0;overflow:hidden}.column-preview__image{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}.column-preview__body{display:flex;flex:1;flex-direction:column;padding:28px}.column-preview__body h3{margin-top:14px}.column-preview__body p{margin-top:auto;padding-top:20px} /* Restored star hero. Copy stays visible when JavaScript is unavailable. */ .hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--header-height));background:#0b0d12;color:#f5f7ff} #star-field{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none} .hero__inner{display:block;position:relative} .hero__copy{width:min(100%,760px);margin-inline:auto;text-align:center;position:relative} .hero__copy::before{content:"";position:absolute;inset:-70px -100px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,rgba(11,13,18,.92) 15%,rgba(11,13,18,.6) 48%,transparent 72%)} .hero h1{max-width:none;color:#f5f7ff;font-size:clamp(34px,8.8cqw,70px)} .hero h1 strong{color:#f5f7ff} .hero h1 strong::after{display:none} .hero__description{margin-inline:auto;color:#d5d8e2} .hero-actions{justify-content:center} .hero__assurance{color:#b9bfce} .hero .motion-cta{color:#f5f7ff;border-color:#667085;background:rgba(11,13,18,.75)} .hero .motion-cta:hover,.hero .motion-cta:focus-visible{border-color:#f5f7ff;background:#242936;color:#fff} @media(max-width:700px){.hero{min-height:calc(100svh - var(--header-height));padding-block:72px}.hero h1{font-size:clamp(28px,8.8vw,44px)}.hero__copy::before{inset:-60px -30px}.hero__description{font-size:16px}.hero-actions{max-width:360px;margin-inline:auto}.hero__assurance{font-size:12px}} /* Glass navigation floats over the stars, then follows the page surface. Perf: fixed + blur(18px) recomposited the full width each frame; 10px matches static-pages.css (layer promotion lives there). */ .site-header{position:fixed;inset:0 0 auto;width:100%;background:rgba(11,13,18,.58);border-bottom-color:rgba(255,255,255,.13);color:#f5f7ff;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);transition:background-color .25s ease,border-color .25s ease,color .25s ease} .site-header .brand-logo{filter:brightness(0) invert(1)} .site-header .site-nav a{color:inherit} .site-header .site-nav a:hover,.site-header .site-nav a:focus-visible{color:#a9c6ff} .site-header .mobile-menu-toggle{color:inherit;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)} .site-header .mobile-menu-toggle__lines,.site-header .mobile-menu-toggle__lines::before,.site-header .mobile-menu-toggle__lines::after{background:currentColor} .site-header.is-mobile-menu-open .mobile-menu-toggle__lines{background:transparent} .site-header .mobile-menu{background:rgba(11,13,18,.97);border-color:rgba(255,255,255,.15)} .site-header .mobile-menu a{background:rgba(255,255,255,.08);color:#f5f7ff} .site-header[data-surface="light"]{background:rgba(255,255,255,.78);border-bottom-color:rgba(0,0,0,.08);color:var(--ink)} .site-header[data-surface="light"] .brand-logo{filter:none} .site-header[data-surface="light"] .site-nav a:hover,.site-header[data-surface="light"] .site-nav a:focus-visible{color:var(--blue)} .site-header[data-surface="light"] .mobile-menu-toggle{background:rgba(255,255,255,.5);border-color:var(--line)} .site-header[data-surface="light"] .mobile-menu{background:rgba(255,255,255,.97);border-color:var(--line)} .site-header[data-surface="light"] .mobile-menu a{background:var(--surface);color:var(--ink)} .hero{min-height:100svh;padding-top:calc(62px + var(--header-height))} @media(max-width:700px){.hero{min-height:100svh;padding-top:calc(72px + var(--header-height))}} @media(prefers-reduced-motion:reduce){.site-header{transition:none}} /* Reserve the complete second line so typing never moves the copy or CTAs. */ .hero-brand{position:relative;display:inline-block;font-size:1.2em;color:#fff;text-shadow:0 0 36px #2465eb48} .hero-brand::before{content:"";position:absolute;inset:5% -18%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#2465eb28,transparent 70%)} .hero-brand>span{display:inline-block;background:linear-gradient(110deg,#fff 35%,#b9d5ff 46%,#fff 52%,#fff 65%);background-size:300% 100%;background-position:100% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroBrandReveal .75s cubic-bezier(.2,.7,.2,1) both,heroWordShimmer 1.2s 1s ease-out both} .hero-brand>span:nth-child(2){animation-delay:.12s,1.12s} .hero-brand>span:nth-child(3){animation-delay:.24s,1.24s} .hero-brand-particle{font-size:.65em;margin-left:.08em;color:#f5f7ff} @keyframes heroBrandReveal{from{opacity:0;transform:translateY(14px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}} @media(prefers-reduced-motion:reduce){.hero-brand>span{animation:none;background:none;color:#fff}} .hero .hero-typing-line{display:block;min-height:1.17em;font-size:clamp(20px,8cqw,52px)} .hero-typing-text{display:inline-block;position:relative;min-height:1em;vertical-align:top} .hero-typing-emphasis{color:#a9c6ff} .hero-typing-line.is-typing .hero-typing-text::after{content:"";position:absolute;top:.13em;right:-.16em;width:2px;height:.86em;background:#b9d3ff;animation:heroCaretBlink 1s steps(1) infinite} .hero-typing-emphasis.is-shimmering{background:linear-gradient(110deg,#a9c6ff 35%,#fff 48%,#dbeaff 52%,#a9c6ff 65%);background-size:300% 100%;background-position:100% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroWordShimmer 1.1s ease-out both} @keyframes heroCaretBlink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes heroWordShimmer{from{background-position:100% 50%}to{background-position:0% 50%}} .hero[data-type-paused="true"] .hero-typing-text::after,.hero[data-type-paused="true"] .hero-typing-emphasis{animation-play-state:paused} @media(prefers-reduced-motion:reduce){.hero-typing-text::after{display:none}.hero-typing-emphasis.is-shimmering{background:none;color:#a9c6ff;animation:none}} .methods{padding:120px 0;background:#f4f6f9}.methods-header{text-align:center;margin-bottom:76px}.method-rows{display:grid;gap:72px}.method-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:70px}/* Perf: the 40px shadow lives on the static panel, not the playing