@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --black: #000000;
  --white: #f4f4f0;
  --acid: #b8ff00;
  --muted: #8b8b84;
  --line: rgba(244, 244, 240, .18);
  --pad: clamp(1rem, 2.4vw, 2rem);
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  color: var(--white);
  background: var(--black);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--black); }
button, a { font: inherit; }
a { color: inherit; }

.study-shell { min-height: 100vh; background: var(--black); }
.animation-lab { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--black); }
.intro-underlay { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); overflow: hidden; }
.full-logo { display: block; position: absolute; left: 1.5%; bottom: clamp(24px, 4vh, 60px); width: 97%; aspect-ratio: 324.51 / 55.19; overflow: hidden; transform: none; }
.full-logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.full-logo-svg path, .full-logo-svg rect { transform-box: fill-box; transform-origin: center bottom; opacity: 0; transform: translateY(120%); will-change: transform, opacity; }
.intro-underlay.logo-visible .full-logo-svg path, .intro-underlay.logo-visible .full-logo-svg rect { animation: logoPartUp 1.8s cubic-bezier(.77, 0, .175, 1) calc(.2s + var(--stagger, 0s)) forwards; }

.intro-screen { position: absolute; z-index: 2; inset: 0; height: 100%; overflow: hidden; background: var(--black); }
.intro-screen.closing { animation: screenClose 1.8s cubic-bezier(.77, 0, .175, 1) forwards; }
.intro-frame { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: var(--pad); }
.intro-center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; margin-top: 0; }
.intro-composition { --close-shift: 9.25rem; display: flex; align-items: flex-start; justify-content: center; height: 20rem; color: var(--white); font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 800; }
.intro-brand { display: block; flex: 0 0 auto; width: 15rem; height: auto; margin-top: .05rem; opacity: 0; transform: translateY(100%); }
.intro-square { display: inline-block; flex: 0 0 auto; width: 1.76rem; height: 1.76rem; margin: .0656rem 0 0; background: #ff4e31; opacity: 0; transform: scale(0); transform-origin: center; }
.intro-screen.ready .intro-brand { animation: nUp 1s cubic-bezier(.77, 0, .175, 1) forwards; }
.intro-screen.ready .intro-square { animation: aposPop .6s cubic-bezier(.34, 1.56, .64, 1) .2s forwards; }
.intro-composition.closing .intro-brand { animation: brandClose .8s cubic-bezier(.77, 0, .175, 1) forwards; }
.intro-composition.closing .intro-square { animation: squareClose .8s cubic-bezier(.77, 0, .175, 1) forwards; }
.loader-image-wrap { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 20rem; margin-top: -25%; pointer-events: none; }
.loader-image { position: absolute; width: 14rem; height: 14rem; object-fit: contain; opacity: 0; transform: scale(0); }
.loader-image.active { animation: imageIn .52s cubic-bezier(.22, 1, .36, 1) .28s forwards; }
.loader-image.swap-out { animation: imageOut .6s cubic-bezier(.77, 0, .175, 1) forwards; }
.loader-image.swap-in { animation: imageInFast .24s cubic-bezier(.22, 1, .36, 1) forwards; }
.loader-image-wrap.expanded { animation: widen .85s cubic-bezier(.77, 0, .175, 1) forwards; }


@keyframes nUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes aposPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes widen { from { width: var(--intro-gap-closed); } to { width: var(--intro-gap-open); } }
@keyframes brandClose { from { opacity: 1; transform: translateX(0); } to { opacity: 1; transform: translateX(var(--close-shift)); } }
@keyframes squareClose { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 1; transform: translateX(calc(var(--close-shift) * -1)) scale(1); } }
@keyframes imageIn { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@keyframes imageInFast { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes imageOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0); } }
@keyframes screenClose { from { height: 100%; } to { height: 0%; } }
@keyframes logoPartUp { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 991px) {
  .loader-image-wrap { width: .75rem; height: 10rem; }
  .loader-image { width: 7rem; height: 7rem; }
  .intro-composition { height: 10rem; }
  .intro-composition { --close-shift: 4.625rem; }
  .intro-brand { width: 7.5rem; }
  .intro-square { width: .88rem; height: .88rem; margin: .0578rem 0 0; }
}
@media (max-width: 640px) {
  .animation-lab { min-height: 520px; }
  .full-logo { width: 97%; }
  .intro-center { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* WindyDevelop continuation: source-matched scroll sections */
.study-shell { position: relative; z-index: 2; background: #050505; padding-bottom: 0; }
.animation-lab { position: relative; z-index: 3; }
.scroll-section { position: relative; z-index: 2; }
.about-section { min-height: 100svh; color: #11110f; background: #fff; }
.about-inner { min-height: 100svh; padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem) clamp(4rem, 9vw, 8rem); display: flex; flex-direction: column; justify-content: center; }
.section-label { margin: 0; padding-bottom: 1rem; border-bottom: 1px solid #d7d3cc; color: #77736d; font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-copy { max-width: 1060px; margin: clamp(4rem, 9vw, 8rem) auto; font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: clamp(2rem, 5vw, 5.4rem); font-weight: 700; line-height: .98; letter-spacing: -.075em; word-break: keep-all; }
.about-copy p { margin: 0; }
.line-mask { display: block; overflow: hidden; }
.text-up { display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity .5s ease-out, transform .5s ease-out; }
.text-up.is-visible { opacity: 1; transform: translateY(0); }
.about-copy strong { color: #ff5a2f; }
.reveal-up { opacity: 0; transform: translateY(50px); transition: opacity 1s ease-out, transform .5s ease-out; }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
.blank-content { --blank-content-height: clamp(34rem, 72vh, 58rem); min-height: var(--blank-content-height); color: #11110f; background: #fff; }
.blank-content-inner { min-height: var(--blank-content-height); padding: 3rem clamp(1rem, 5vw, 5rem) 5rem; }
.blank-content-note { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-top: clamp(8rem, 20vh, 14rem); }
.blank-content-note > span { color: #ff5a2f; font: 700 .68rem "Pretendard Variable", Pretendard, sans-serif; letter-spacing: .12em; }
.blank-content-note p { max-width: 25rem; margin: 0; color: #77736d; font: .82rem/1.6 "Pretendard Variable", Pretendard, sans-serif; }
.blank-lines { display: grid; gap: 1rem; margin-top: clamp(5rem, 12vh, 9rem); }
.blank-lines i { display: block; height: 1px; background: #d7d3cc; }
.bottom-main { min-height: 571px; color: #f4f4f0; background: #050505; }
.bottom-inner { padding: clamp(6rem, 12vw, 10rem) clamp(1rem, 5vw, 5rem) 6rem; }
.orange-label { color: #ff5a2f; border-color: rgba(244,244,240,.18); }
.bottom-copy { margin: clamp(4rem, 7vw, 6rem) 0 3rem; font-family: "Pretendard Variable", Pretendard, sans-serif; }
.bottom-copy h2 { max-width: 12ch; margin: 0 0 3rem; font-size: clamp(3rem, 8vw, 8.5rem); line-height: .82; letter-spacing: -.09em; }
.bottom-copy p { max-width: 42rem; margin: 0; color: #c4c4bc; font: clamp(1rem, 2vw, 1.35rem)/1.45 "Pretendard Variable", Pretendard, sans-serif; }
.bottom-button { display: inline-flex; align-items: center; gap: 1.75rem; padding: 1rem 1.2rem; border: 1px solid rgba(244,244,240,.5); color: #f4f4f0; font: 700 .7rem "Pretendard Variable", Pretendard, sans-serif; letter-spacing: .08em; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.bottom-button span { color: #ff5a2f; font-size: 1.3rem; }
.bottom-button:hover { border-color: #ff5a2f; color: #11110f; background: #ff5a2f; }
@media (max-width: 720px) {
  .about-copy { margin: 4rem 0 6rem; font-size: clamp(2.15rem, 10vw, 4rem); }
  .blank-content-note { display: block; margin-top: 8rem; }
  .blank-content-note p { margin-top: 2rem; }
  .bottom-copy h2 { font-size: clamp(3.6rem, 17vw, 7rem); }
}
@media (prefers-reduced-motion: reduce) {
  .text-up, .reveal-up { opacity: 1; transform: none; transition: none; }
}


/* WindyDevelop full continuation: core, work and footer motion */
.core-section, .works-section { color: #f4f4f0; background: #050505; }
.core-inner, .works-inner { padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem) clamp(7rem, 12vw, 12rem); }
.section-head { margin-bottom: clamp(4rem, 9vw, 8rem); }
.display-title { margin: 0 0 1rem; font: 700 clamp(3.2rem, 10vw, 10rem)/.78 "Pretendard Variable", Pretendard, sans-serif; letter-spacing: -.09em; }
.section-subtitle { margin: 0; color: #bcbcb5; font: clamp(1rem, 2.2vw, 1.6rem)/1.35 "Pretendard Variable", Pretendard, sans-serif; }
.core-list { display: flex; flex-direction: column; gap: 1px; background: rgba(244,244,240,.2); }
.core-card { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(22rem, 43vw, 39rem); background: #050505; opacity: 0; transform: translateY(100px); transition: opacity 1s ease-out, transform .8s ease-out; }
.core-card.is-visible { opacity: 1; transform: translateY(0); }
.core-card:nth-child(2) { transition-delay: .08s; }
.core-card:nth-child(3) { transition-delay: .16s; }
.core-card:nth-child(4) { transition-delay: .24s; }
.core-card-copy { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 4vw, 4rem); border-right: 1px solid rgba(244,244,240,.2); }
.core-card h3 { max-width: 10ch; margin: 0 0 1.5rem; font: 700 clamp(2.2rem, 5vw, 5.4rem)/.85 "Pretendard Variable", Pretendard, sans-serif; letter-spacing: -.08em; }
.core-card-copy p { max-width: 28rem; margin: 0; color: #bcbcb5; font: clamp(.88rem, 1.4vw, 1.05rem)/1.55 "Pretendard Variable", Pretendard, sans-serif; }
.technique { display: flex; flex-direction: column; gap: .45rem; color: #ff5a2f; font: 700 .68rem "Pretendard Variable", Pretendard, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.technique span { color: #f4f4f0; font-weight: 400; letter-spacing: 0; text-transform: none; }
.core-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(1.5rem, 4vw, 4rem); color: #11110f; }
.core-visual span { font: 700 .72rem "Pretendard Variable", Pretendard, sans-serif; }
.core-visual b { align-self: flex-end; font: 700 clamp(2rem, 6vw, 6rem)/.75 "Pretendard Variable", Pretendard, sans-serif; letter-spacing: -.09em; }
.core-visual::after { content: ""; position: absolute; width: 45%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(17,17,15,.5); right: 12%; top: 25%; transform: rotate(22deg) scale(1.3); }
.visual-broadcast { background: #ff5a2f; }
.visual-brand { background: #91a8ff; }
.visual-content { background: #d7ff2f; }
.visual-audience { background: #f2ede6; }
.visual-brand::after { border-radius: 0; transform: rotate(45deg) scale(1.1); }
.visual-content::after { border-radius: 10%; transform: rotate(12deg) scale(1.2); }
.visual-audience::after { border-style: dashed; transform: rotate(-20deg) scale(1.1); }
.works-section { background: #11110f; }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); }
.work-card { opacity: 0; transform: translateY(100px); transition: opacity 1s ease-out, transform .8s ease-out; }
.work-card.is-visible { opacity: 1; transform: translateY(0); }
.work-card:nth-child(2) { transition-delay: .08s; transform: translateY(140px); }
.work-card:nth-child(3) { transition-delay: .16s; }
.work-card:nth-child(4) { transition-delay: .24s; transform: translateY(140px); }
.work-art { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.18; padding: clamp(1.2rem, 3vw, 2.5rem); color: #11110f; }
.work-art span { font: 700 .7rem "Pretendard Variable", Pretendard, sans-serif; }
.work-art b { font: 700 clamp(2rem, 6vw, 6rem)/.8 "Pretendard Variable", Pretendard, sans-serif; letter-spacing: -.09em; }
.work-orange .work-art { background: #ff5a2f; }
.work-blue .work-art { background: #91a8ff; }
.work-yellow .work-art { background: #d7ff2f; }
.work-red .work-art { background: #ef5c5c; }
.work-card h3 { margin: 1rem 0 0; font: 700 clamp(1.2rem, 2.5vw, 2.2rem)/.9 "Pretendard Variable", Pretendard, sans-serif; letter-spacing: -.06em; }
.view-all-button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: clamp(3rem, 6vw, 6rem); padding: 1.2rem 0; border-top: 1px solid rgba(244,244,240,.25); border-bottom: 1px solid rgba(244,244,240,.25); color: #f4f4f0; font: 700 .75rem "Pretendard Variable", Pretendard, sans-serif; letter-spacing: .08em; transition: color .25s ease, border-color .25s ease; }
.view-all-button span { color: #ff5a2f; font-size: 1.4rem; }
.view-all-button:hover { color: #ff5a2f; border-color: #ff5a2f; }
.bottom-main { min-height: 650px; }
.marquee-wrapper { width: 100%; overflow: hidden; margin-top: clamp(5rem, 9vw, 9rem); border-top: 1px solid rgba(244,244,240,.2); border-bottom: 1px solid rgba(244,244,240,.2); }
.marquee-track { display: flex; width: max-content; align-items: center; gap: clamp(4rem, 8vw, 9rem); padding: 1.4rem 0; animation: logoMarquee 100s linear infinite; }
.marquee-item { display: grid; place-items: center; width: clamp(6rem, 10vw, 10rem); height: clamp(3rem, 5vw, 5rem); flex: 0 0 auto; }
.marquee-item img { width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: .72; }
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .core-card { grid-template-columns: 1fr; min-height: auto; }
  .core-card-copy { min-height: 24rem; border-right: 0; border-bottom: 1px solid rgba(244,244,240,.2); }
  .core-visual { min-height: 17rem; }
  .works-grid { grid-template-columns: 1fr; }
  .work-card:nth-child(2), .work-card:nth-child(4) { transform: translateY(0); }
  .work-card:nth-child(2).is-visible, .work-card:nth-child(4).is-visible { transform: translateY(0); }
  .bottom-main { min-height: 720px; }
}

.work-card:nth-child(2).is-visible, .work-card:nth-child(4).is-visible { transform: translateY(0); }

/* Company footer: fixed behind the opaque main sections, revealed by document scroll. */
.study-shell { background: transparent; padding-bottom: var(--footer-reveal-height, 420px); pointer-events: none; }
.study-shell > * { pointer-events: auto; }
.company-footer { position: fixed; inset: auto 0 0; z-index: 1; box-sizing: border-box; width: 100%; min-height: 0; padding: clamp(64px, 6vw, 88px) 3.367vw 2.53vw; background: #ff4e31; color: #000; font-family: "Pretendard Variable", Pretendard, sans-serif; transform: translateZ(0); }
.company-footer-top { display: block; }
.company-name { margin: 0 0 1.689vw; font-size: clamp(20px, 1.689vw, 28px); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.company-info { font-style: normal; font-size: 16px; line-height: 1.6; }
.company-info p { display: flex; gap: 10px; margin: 0; min-width: 0; }
.company-info b { flex: 0 0 auto; font-weight: 700; }
.company-info a { text-decoration: none; overflow-wrap: anywhere; }
.company-info a:hover { text-decoration: underline; text-underline-offset: 3px; }
.company-info a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.company-contact { display: flex; flex-wrap: wrap; column-gap: 20px; }
.company-footer-rule { height: 1.6px; margin: 3.367vw 0; background: #000; }
.company-footer-logo { display: block; width: 100%; height: auto; filter: brightness(0); }
@media (max-width: 720px) {
  .company-footer { padding: 56px 20px max(24px, env(safe-area-inset-bottom)); }
  .company-name { margin-bottom: 20px; font-size: 22px; }
  .company-info { font-size: 14px; line-height: 1.65; }
  .company-info p { gap: 8px; }
  .company-address span { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
  .company-contact { display: block; }
  .company-footer-rule { margin: 28px 0; height: 1px; }
}
/* Short landscape viewports retain a fully readable footer rather than clipping it. */
@media (max-height: 400px) {
  .company-footer { position: relative; }
  .study-shell { padding-bottom: 0; }
}

/* Clean presentation: retain the opening animation; keep all content static. */
html, body, .animation-lab, .intro-screen, .intro-underlay { background: #000; }
.scroll-section, .core-card, .core-visual, .work-art { color: #111; background: #fff; }
.scroll-section *, .scroll-section *::before, .scroll-section *::after {
  animation: none !important; transition: none !important;
}
.scroll-section .text-up, .scroll-section .reveal-up,
.scroll-section .core-card, .scroll-section .work-card,
.scroll-section .work-card:nth-child(n), .scroll-section .marquee-track {
  opacity: 1; transform: none;
}
.section-subtitle, .core-card-copy p, .bottom-copy p { color: #444; }
.technique span { color: #111; }
.core-list { background: #ddd; }
.core-card-copy { border-color: #ddd; }
.view-all-button, .bottom-button { color: #111; border-color: #aaa; }
.marquee-wrapper { border-color: #ddd; }
.marquee-item img { filter: brightness(0); opacity: 1; }


/* Figma middle sections — isolated from the existing intro and footer styles. */
.figma-middle { --design-unit: min(1vw, 14.4px); background:#fff; color:#111; font-family:"Pretendard Variable",Pretendard,sans-serif; }
.figma-middle * { box-sizing:border-box; }
.figma-middle h1,.figma-middle h2,.figma-middle h3,.figma-middle p { margin:0; }
.brand-story { background:#000; color:#fff; padding:calc(var(--design-unit)*17.2222) 24px calc(var(--design-unit)*11.25); }
.brand-statement { text-align:center; margin:auto; max-width:1100px; }
.brand-statement h1 { font-size:clamp(28px,3.05556vw,44px); font-weight:700; line-height:1.205; letter-spacing:-.025em; }
.brand-statement p { margin-top:33px; font-size:clamp(17px,1.66667vw,24px); line-height:1.5; letter-spacing:-.015em; word-break:keep-all; }
.services { max-width:939px; width:70%; margin:calc(var(--design-unit)*39.5139) auto 0; display:grid; grid-template-columns:197fr 431fr; column-gap:min(21.5972vw,311px); }
.services>h2 { font-size:58px; line-height:1.207; font-weight:700; letter-spacing:-.015em; }
.service-list { min-width:0; }
.service-list article { padding:0 18px 32px; min-height:176px; border-bottom:1px solid #8e8e8e; }
.service-list article+article { padding-top:26px; }
.service-list article:last-child { border-bottom:0; min-height:146px; }
.service-list h3 { font-size:28px; font-weight:700; line-height:34px; }
.service-list p { margin-top:22px; font-size:19px; line-height:29px; word-break:keep-all; }
.projects { padding:249px 24px 144px; background:#fff; text-align:center; }
.projects>h2 { font-size:58px; line-height:70px; font-weight:700; letter-spacing:-.02em; }
.project-grid { width:min(100%,1018px); margin:136px auto 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:52px; row-gap:51px; }
.project-open { display:block; width:100%; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.project-image { display:block; position:relative; overflow:hidden; width:100%; aspect-ratio:469.624/305.101; }
.project-image img { display:block; position:absolute; max-width:none; object-fit:cover; }
.project-image.documentary img { width:135.087%; height:116.664%; left:-17.599%; top:-3.038%; }
.project-image.doctor img { width:158.882%; height:136.709%; left:-34.539%; top:-18.227%; }
.project-title { display:block; margin:26px 13px 0; font-size:28px; font-weight:700; line-height:34px; word-break:keep-all; }
.project-meta { display:block; margin:11px 13px 0; font-size:18px; line-height:22px; color:#1a1a1a; }
.pill-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:173px; height:57px; padding:0 22px; border:0; border-radius:9999px; color:#111; text-decoration:none; font:500 23px/1 "Pretendard Variable",Pretendard,sans-serif; cursor:pointer; }
.pill-button span { font:400 36px/1 sans-serif; }
.more-projects { margin-top:71px; background:#bdbdbd; }
.collaboration { padding:218px 24px 100px; background:#fff; text-align:center; }
.collaboration>h2 { font-size:clamp(36px,5.05556vw,73px); line-height:1.205; font-weight:700; letter-spacing:-.02em; }
.collaboration>p { margin:35px auto 0; font-size:24px; line-height:36px; word-break:keep-all; }
.inquiry-button { margin-top:87px; background:#f15a24; }
.network-logos { max-width:1300px; margin:249px auto 0; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:14px; }
.network-tile { display:grid; place-items:center; min-width:0; aspect-ratio:131.5/78; background:#fff; border-radius:8px; }
.network-crop { display:block; position:relative; overflow:hidden; width:calc(var(--crop-w)*1px); max-width:92%; }
.network-crop img { position:absolute; max-width:none; object-fit:fill; }
.project-open:focus-visible,.pill-button:focus-visible { outline:3px solid #f15a24; outline-offset:6px; }
.project-dialog { border:0; border-radius:16px; padding:36px; width:min(700px,92vw); max-height:85svh; color:#111; background:white; font-family:"Pretendard Variable",Pretendard,sans-serif; }
.project-dialog::backdrop { background:#0009; }
.dialog-close { position:absolute; top:10px; right:16px; border:0; background:none; font-size:32px; cursor:pointer; }
.project-dialog-body article { margin:24px 0; }
.project-dialog-body img { max-width:100%; height:auto; }
.project-dialog a { color:#d5400d; }
@media(min-width:1441px) { .projects { padding-top:249px; } }
@media(max-width:1100px) {
 .services { width:90%; column-gap:12vw; }
 .service-list h3 { font-size:25px; }
 .service-list p { font-size:18px; }
 .projects { padding-top:150px; }
 .project-title { font-size:23px; }
 .network-logos { gap:5px; }
}
@media(max-width:720px) {
 .brand-story { padding:100px 24px 90px; }
 .brand-statement h1 { font-size:28px; line-height:1.4; word-break:keep-all; }
 .brand-statement p { margin-top:25px; font-size:17px; line-height:1.8; }
 .desktop-break { display:none; }
 .services { width:100%; margin-top:130px; display:block; }
 .services>h2 { font-size:40px; line-height:1.05; margin-bottom:60px; }
 .service-list article { padding:0 0 28px; min-height:0; }
 .service-list article+article { padding-top:28px; }
 .service-list article:last-child { min-height:0; }
 .service-list h3 { font-size:24px; }
 .service-list p { margin-top:14px; font-size:17px; line-height:1.7; }
 .projects { padding:100px 24px; }
 .projects>h2 { font-size:40px; line-height:1.2; }
 .project-grid { margin-top:65px; grid-template-columns:1fr; gap:45px; }
 .project-title { margin:20px 0 0; font-size:23px; line-height:1.35; }
 .project-meta { margin:9px 0 0; font-size:16px; }
 .more-projects { margin-top:55px; }
 .collaboration { padding:100px 24px 65px; }
 .collaboration>h2 { font-size:clamp(30px,8.2vw,48px); line-height:1.15; }
 .collaboration>p { margin-top:28px; font-size:18px; line-height:1.7; }
 .inquiry-button { margin-top:45px; }
 .network-logos { margin-top:110px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 8px; }
 .pill-button { font-size:20px; }
}

.figma-middle .service-list article:not(:last-child) { border-bottom:0; background-image:url("./images/figma/42206.svg"); background-repeat:no-repeat; background-position:left bottom; background-size:100% 1px; }
.figma-middle .project-image { mask-image:url("./images/figma/4d19c.svg"); mask-size:100% 100%; mask-repeat:no-repeat; }

/* Partner logos: two identical groups create a continuous leftward loop. */
.network-logos { display:block; max-width:none; width:calc(100% + 48px); margin-left:-24px; margin-right:-24px; overflow:hidden; }
.network-track { display:flex; width:max-content; animation:partnerLogoFlow 36s linear infinite; will-change:transform; }
.network-group { display:flex; flex:none; align-items:center; gap:16px; padding-right:16px; }
.network-group .network-tile { flex:0 0 132px; width:132px; }
.network-logos img { filter:grayscale(1); opacity:.58; }
@keyframes partnerLogoFlow { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media(max-width:720px) { .network-group { gap:12px; padding-right:12px; } .network-group .network-tile { flex-basis:110px; width:110px; } .network-track { animation-duration:30s; } }
@media(prefers-reduced-motion:reduce) { .network-track { animation:none; } }

/* Reference motion: 40px rise, 1s duration, title/body delays .3s/.5s. */
.story-motion-ready .brand-statement h1,
.story-motion-ready .brand-statement p { transform:translateY(40px); opacity:0; transition:transform 1s ease, opacity 1s ease; }
.story-motion-ready .brand-statement h1 { transition-delay:.3s; }
.story-motion-ready .brand-statement p { transition-delay:.5s; }
.story-motion-ready .brand-statement.is-revealed h1,
.story-motion-ready .brand-statement.is-revealed p { transform:translateY(0); opacity:1; }
@media(prefers-reduced-motion:reduce) { .story-motion-ready .brand-statement h1,.story-motion-ready .brand-statement p { transform:none; opacity:1; transition:none; } }

/* Shared header, portfolio routes and hover interactions. */
.site-header { position:fixed; top:0; left:0; z-index:20; width:100%; display:flex; align-items:center; justify-content:space-between; padding:28px 4.5vw; font-family:"Pretendard Variable",Pretendard,sans-serif; }
.home-page .site-header { background:#000e; color:#fff; }
.sub-page .site-header { background:#fffffff0; color:#111; }
.header-symbol { display:flex; align-items:flex-start; gap:5px; width:92px; text-decoration:none; }
.header-symbol img { display:block; width:80px; height:auto; }
.header-symbol>span { display:block; flex:none; width:9.4px; height:9.4px; margin-top:.1px; background:#ff4e31; }
.site-header nav { display:flex; align-items:center; gap:40px; }
.site-header nav a { color:inherit; text-decoration:none; font-size:20px; font-weight:700; }
.site-header nav a:hover { color:#ff4e31; }
.pill-button { background:#ededed; color:#111; transition:background-color .25s ease,color .25s ease; }
.pill-button:hover,.pill-button:focus-visible { background-color:#ff4e31; color:#111; }
.project-open { text-decoration:none; }
.project-image { isolation:isolate; }
.project-image img { transition:transform .3s ease-out; transform-origin:center; }
.project-open:hover .project-image img,.project-open:focus-visible .project-image img { transform:scale(1.1); }
.work-tags { display:flex; gap:10px; flex-wrap:wrap; margin:15px 13px 0; }
.work-tags>span { border-radius:999px; padding:6px 14px; background:#eee; font-size:14px; font-weight:400; line-height:1.3; }
.sub-surface { min-height:100svh; position:relative; background:#fff; color:#111; font-family:"Pretendard Variable",Pretendard,sans-serif; }
.work-index { max-width:1066px; margin:auto; padding:365px 24px 220px; }
.work-index h1 { margin:0; text-align:center; font-size:58px; line-height:1.2; }
.title-dot { color:#ff4e31; margin-left:15px; }
.work-index .project-grid { margin-top:210px; }
.project-detail { width:min(1034px,calc(100% - 48px)); margin:auto; padding:240px 0 140px; }
.detail-hero { display:block; width:100%; height:auto; }
.project-detail h1 { font-size:42px; line-height:1.25; margin:60px 0 50px; }
.project-detail dl { margin:0; font-size:19px; line-height:1.7; }
.project-detail dt { font-weight:700; margin-top:18px; }
.project-detail dd { margin:4px 0 0; word-break:keep-all; }
.detail-tags { margin:60px 0 80px; }
.detail-gallery { display:grid; gap:55px; }
.detail-gallery img { display:block; width:100%; height:auto; }
.detail-pair { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.detail-back { margin-top:70px; text-decoration:none; }
@media(max-width:720px) { .site-header { padding:20px 24px; } .header-symbol { width:70px; gap:4px; } .header-symbol img { width:60px; } .header-symbol>span { width:7px;height:7px; } .site-header nav { gap:22px; } .site-header nav a { font-size:16px; } .work-index { padding:180px 24px 100px; } .work-index h1 { font-size:40px; } .work-index .project-grid { margin-top:80px; } .project-detail { padding-top:150px; } .project-detail h1 { font-size:30px;margin:35px 0; } .project-detail dl { font-size:17px; } .detail-tags { margin:35px 0 45px; } .detail-gallery { gap:24px; } .detail-pair { gap:16px; } .work-tags { margin-left:0; } }
@media(prefers-reduced-motion:reduce) { .project-image img,.pill-button { transition:none; } }

/* Transparent difference header: white on dark, black on light. */
.site-header,.home-page .site-header,.sub-page .site-header { background:transparent; color:#fff; mix-blend-mode:difference; }
.header-symbol img { filter:brightness(0) invert(1); }
.header-symbol>span { background:#fff; }
.site-header nav a:hover { color:#fff; opacity:.6; }
.home-page .site-header { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s ease; }
.intro-complete .home-page .site-header { opacity:1; visibility:visible; pointer-events:auto; }
.brand-story { padding-top:clamp(200px,30vh,380px); }
.heading-dot { display:inline-block; margin-left:.09em; color:#ff4e31; }
.figma-middle .service-list article,.figma-middle .service-list article+article,.figma-middle .service-list article:last-child { min-height:0; padding:32px 18px; background-image:none; border:0; }
.figma-middle .service-list article:not(:last-child) { border-bottom:1px solid #8e8e8e; background:none; }
.service-list h3 { margin:0; }
.service-list p { margin-bottom:0; }
.services>h2 { padding-top:32px; }
.pill-button { background:transparent; border:1px solid #111; }
.pill-button:hover,.pill-button:focus-visible { background-color:#ff4e31; border-color:#ff4e31; }
.network-group { gap:30px; padding-right:30px; }
.network-group .network-tile { flex-basis:176px; width:176px; }
.network-crop { width:calc(var(--crop-w)*1.3px); }
/* Compact information footer, preserving the existing scroll reveal. */
.company-footer { padding:60px 4.5vw 64px; background:#ff4e31; color:#000; }
.company-footer .company-footer-logo { width:280px; max-width:60%; height:auto; margin:0 0 64px; filter:brightness(0); }
.footer-details { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(0,1.65fr); gap:60px; font-style:normal; }
.footer-details dl { margin:0; display:grid; align-content:start; row-gap:24px; }
.footer-details dl>div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:24px; align-items:baseline; font-size:clamp(16px,1.5vw,23px); line-height:1.5; }
.footer-details dt { font-weight:600; }.footer-details dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
@media(max-width:720px) {
 .brand-story { padding-top:180px; }
 .figma-middle .service-list article,.figma-middle .service-list article+article,.figma-middle .service-list article:last-child { padding:28px 0; }
 .services>h2 { padding-top:0; }
 .network-group { gap:24px; padding-right:24px; }.network-group .network-tile { flex-basis:145px; width:145px; }.network-crop { width:calc(var(--crop-w)*1.15px); }
 .company-footer { padding:40px 24px; }.company-footer .company-footer-logo { width:210px;margin-bottom:36px; }
 .footer-details { grid-template-columns:1fr;gap:18px; }.footer-details dl { row-gap:18px; }.footer-details dl>div { grid-template-columns:78px minmax(0,1fr);gap:16px;font-size:15px; }
}
/* Original footer scale and type, with the requested information columns. */
.company-footer { padding:clamp(64px,6vw,88px) 3.367vw 2.53vw; }
.company-footer .company-footer-logo { width:100%;max-width:none;height:auto;margin:0; }
.footer-details { font-size:16px;line-height:1.6; }
.footer-details dl { row-gap:10px; }
.footer-details dl>div { font-size:16px;line-height:1.6; }
.footer-details dt { font-weight:700; }.footer-details dd { font-weight:400; }
.heading-dot,.title-dot { display:inline-block;width:.23em;height:.23em;margin-left:.27em;background:#ff4e31;vertical-align:baseline; }
.keyword-heading { margin:60px 0 24px;font-size:30px;font-weight:700;line-height:1.2; }
.project-detail .detail-tags { margin:0 0 80px;display:flex;flex-wrap:wrap;gap:14px; }
.project-detail .detail-tags>span { display:inline-block;background:#eee;border-radius:999px;padding:9px 20px;font-size:22px;font-weight:400;line-height:1.3; }
@media(max-width:720px) {
 .company-footer { padding:56px 20px max(24px,env(safe-area-inset-bottom)); }
 .company-footer .company-footer-logo { width:100%;max-width:none;margin:0; }
 .footer-details,.footer-details dl>div { font-size:14px;line-height:1.65; }
 .footer-details dl { row-gap:10px; }
 .keyword-heading { margin:35px 0 20px;font-size:24px; }
 .project-detail .detail-tags { margin-bottom:45px;gap:10px; }
 .project-detail .detail-tags>span { font-size:16px;padding:7px 14px; }
}

/* Typography balance and tighter footer spacing. */
.site-header nav a { font-size:18px;font-weight:600; }
.brand-statement h1 { font-size:clamp(28px,3.2vw,46px);font-weight:700; }
.services>h2,.projects>h2,.work-index h1 { font-size:58px;font-weight:700; }
.service-list h3 { font-size:28px;font-weight:600; }
.service-list p { font-size:18px;font-weight:400; }
.project-title { font-size:28px;font-weight:600; }
.work-tags>span { font-size:14px;font-weight:500; }
.pill-button { font-size:20px;font-weight:600; }
.project-detail h1 { font-size:42px;font-weight:700; }
.keyword-heading { margin:40px 0 16px;font-size:19px;font-weight:700;line-height:1.7; }
.project-detail .detail-tags { margin-left:0;gap:10px; }
.project-detail .detail-tags>span { padding:6px 14px;font-size:18px;font-weight:500; }
.company-footer { padding-top:40px; }
.footer-details { grid-template-columns:minmax(230px,320px) minmax(0,1fr);gap:32px; }
.footer-details dl>div { grid-template-columns:80px minmax(0,1fr);gap:16px;font-size:16px; }
.company-footer-rule { margin:24px 0; }
@media(max-width:1000px) and (min-width:721px) {
 .footer-details { grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:24px; }
}
@media(max-width:720px) {
 .site-header nav a { font-size:16px;font-weight:600; }
 .brand-statement h1 { font-size:28px; }
 .services>h2,.projects>h2,.work-index h1 { font-size:40px; }
 .service-list h3 { font-size:24px; }
 .service-list p { font-size:17px; }
 .project-title { font-size:23px; }
 .pill-button { font-size:18px; }
 .project-detail h1 { font-size:30px; }
 .keyword-heading { font-size:17px;margin:30px 0 14px; }
 .project-detail .detail-tags>span { font-size:16px; }
 .company-footer { padding-top:32px; }
 .footer-details { grid-template-columns:1fr;gap:10px; }
 .footer-details dl>div { font-size:16px;grid-template-columns:72px minmax(0,1fr);gap:12px; }
 .company-footer-rule { margin:20px 0; }
}

/* Shorter section rhythm and consistently aligned project information. */
.brand-story { padding-top:clamp(140px,20vh,240px);padding-bottom:120px; }
.services { margin-top:240px; }
.projects { padding-top:150px;padding-bottom:110px; }
.projects .project-grid { margin-top:72px; }
.work-index .project-grid { margin-top:100px; }
.footer-details { grid-template-columns:max-content minmax(0,1fr);gap:72px; }
.footer-details dl>div { grid-template-columns:80px minmax(0,1fr);gap:24px; }
.footer-details dl:first-child { min-width:220px; }
.project-detail dl { margin:0; }
.project-detail dt,.keyword-heading { margin:0;font-size:24px;font-weight:700;line-height:1.4; }
.project-detail dt:not(:first-child) { margin-top:48px; }
.project-detail dd { margin:16px 0 0;font-size:20px;font-weight:400;line-height:1.6; }
.project-detail .keyword-heading { margin:48px 0 16px; }
.project-detail .detail-tags { margin:0 0 80px;gap:8px; }
.project-detail .detail-tags>span { font-size:16px;font-weight:500;padding:8px 16px;line-height:1.4; }
@media(max-width:1000px) and (min-width:721px) { .footer-details { grid-template-columns:max-content minmax(0,1fr);gap:40px; } }
@media(max-width:720px) {
 .brand-story { padding-top:120px;padding-bottom:80px; }.services { margin-top:110px; }
 .projects { padding-top:90px;padding-bottom:80px; }.projects .project-grid { margin-top:45px; }.work-index .project-grid { margin-top:60px; }
 .detail-pair { grid-template-columns:1fr;gap:24px; }
 .footer-details { grid-template-columns:1fr;gap:10px; }.footer-details dl:first-child { min-width:0; }.footer-details dl>div { grid-template-columns:72px minmax(0,1fr);gap:12px; }
 }

/* Seamless footer edge and more breathing room around the divider. */
.company-footer { padding-top:64px;border:0;box-shadow:0 -2px 0 #ff4e31; }
.company-footer-rule { margin:40px 0 48px; }
.project-detail dd { margin-top:8px; }
.project-detail dt:not(:first-child) { margin-top:28px; }
.project-detail .keyword-heading { margin:28px 0 8px; }
@media(max-width:720px) {
 .company-footer { padding-top:48px; }
 .company-footer-rule { margin:32px 0 36px; }
}

/* Return-home transition keeps only the original rising wordmark. */
.logo-only .intro-screen { display:none; }

/* Keep the orange square on the same line as DO. */
.services>h2 { white-space:nowrap; }

/* 2026-11 Figma PDF content update: preserve original intro and orange footer. */
:root { --windy-black:#090909; --windy-paper:#F7F7F7; --windy-ink:#171717; }
.figma-middle { background:var(--windy-paper); }
.brand-story { background:var(--windy-black); color:#F5F5F5; }
.figma-about-layout { width:min(1120px,90%); margin:0 auto; display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(48px,8vw,150px); align-items:start; }
.figma-about-label { font-size:clamp(40px,4.05vw,58px); line-height:1.03; font-weight:700; letter-spacing:-.025em; }
.figma-about-label .heading-dot { display:inline-block; width:10px; height:10px; background:#ff4e31; margin-left:10px; vertical-align:baseline; }
.figma-about-layout .brand-statement { max-width:none; margin:0; text-align:left; }
.figma-about-layout .brand-statement h1 { font-size:clamp(24px,2.7vw,39px); line-height:1.3; }
.figma-about-layout .brand-statement p { font-size:clamp(16px,1.35vw,19px); line-height:1.9; color:#D1D1D1; font-weight:400; }



.services { margin-top:clamp(140px,18vw,260px); }
.projects,.collaboration { background:var(--windy-paper); color:var(--windy-ink); }
.projects .project-title,.projects .work-tags { display:none !important; }
.projects .project-image { border-radius:10px; }
.projects .project-grid { row-gap:18px; }
.project-placeholder { aspect-ratio:469.624/305.101; background:#c8c8c8; border-radius:10px; }



.collaboration { padding-top:clamp(90px,11vw,160px); }
@media(max-width:720px) {
 .figma-about-layout { display:block; width:100%; }
 .figma-about-label { margin-bottom:46px; }
 .figma-about-layout .brand-statement { text-align:left; }
 .figma-about-layout .brand-statement p br { display:none; }



 .projects .project-grid { row-gap:14px; }
}

/* PDF 3 additions: staggered work cards and static orange initials. */
.projects .project-card:nth-child(even) { transform:translateY(48px); }
.projects .more-projects { margin-top:110px; }
@media(max-width:720px) { .projects .project-card:nth-child(even) { transform:none; }.projects .more-projects { margin-top:55px; } }

/* Requested visual alignment refinements. */
.full-logo { bottom:clamp(64px,9vh,120px); }
:root { --windy-black:#000;--windy-paper:#F7F7F7; }
.brand-story { background:#000; }
.figma-about-layout,.services { width:min(1120px,90%);max-width:1120px;margin-left:auto;margin-right:auto;grid-template-columns:220px minmax(0,1fr);column-gap:clamp(48px,8vw,150px); }
.projects,.collaboration,.sub-surface { background:#F7F7F7; }
.projects .project-grid,.work-index .project-grid { width:min(100%,1200px);column-gap:32px;row-gap:30px; }
.work-index { max-width:1248px; }
.projects .project-card:nth-child(even) { transform:none; }
.project-image,.projects .project-image,.project-placeholder { border-radius:16px;overflow:hidden; }
.work-index .project-title,.work-index .work-tags { display:none; }
.network-tile,.network-group .network-tile,.network-crop { background:transparent; }
.network-logos img { mix-blend-mode:multiply;filter:grayscale(1); }
@media(max-width:720px) {
 .full-logo { bottom:64px; }
 .figma-about-layout,.services { width:100%;display:block; }
 .projects .project-grid,.work-index .project-grid { row-gap:24px; }
 .project-image,.projects .project-image,.project-placeholder { border-radius:12px; }
}

/* Restore WHAT WE DO layout; align ABOUT to its original left edge. */
.services { max-width:939px;width:70%;grid-template-columns:197fr 431fr;column-gap:min(21.5972vw,311px); }
.figma-about-layout { max-width:939px;width:70%; }
.reference-motion-ready .projects .project-card,.reference-motion-ready .work-index .project-card { opacity:0;transform:translateY(20px);transition:opacity 1s ease-out,transform .3s ease-out; }
.reference-motion-ready .projects .project-card.reference-visible,.reference-motion-ready .work-index .project-card.reference-visible { opacity:1;transform:translateY(0); }
@media(min-width:721px) and (max-width:1100px) { .services,.figma-about-layout { width:90%; }.services { column-gap:12vw; } }
@media(max-width:720px) { .services,.figma-about-layout { width:100%;display:block; } }

/* Each narrative beat has a viewport of space, without forced scroll snapping. */
.brand-story { padding:0 24px; }
.figma-about-layout,.services { min-height:100svh;align-content:center;padding-top:96px;padding-bottom:96px;margin-top:0;margin-bottom:0; }


.collaboration { padding:0 24px 80px; }
.contact-center { min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 0; }
.contact-center>h2 { margin:0;font-size:clamp(36px,5.05vw,73px);line-height:1.2;font-weight:700;letter-spacing:-.02em; }
.contact-center>p { margin:35px 0 0;font-size:24px;line-height:1.5; }
.contact-center>.inquiry-button { margin-top:55px; }
.collaboration .network-logos { margin-top:70px; }
.contact-slogan-row { display:flex;justify-content:center;gap:.25em; }
.contact-slogan-word { display:inline-flex;align-items:baseline;white-space:nowrap; }
.contact-slogan-word b { color:#ff4e31;font-weight:inherit; }
@media(max-width:720px) {
 .figma-about-layout,.services { display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:100px 0; }
 .figma-about-label { margin-bottom:40px; }.services>h2 { margin-bottom:48px; }

 .contact-center>h2 { font-size:clamp(32px,8.2vw,48px); }
 .contact-center>p { font-size:18px; }.contact-center>.inquiry-button { margin-top:36px; }
}





/* Slightly tighter leading with a softer supporting-text hierarchy. */
.figma-about-label,.services>h2 { line-height:1.05; }
.figma-about-layout .brand-statement h1 { line-height:1.2; }
.figma-about-layout .brand-statement p { line-height:1.65;color:#D1D1D1; }
.service-list h3 { line-height:1.2; }
.service-list p { line-height:1.45;color:#D1D1D1; }


.contact-center>h2 { line-height:1.1; }
.contact-center>p { line-height:1.4;color:#666; }
.project-detail dt,.keyword-heading { line-height:1.3; }
.project-detail dd { line-height:1.45; }
.footer-details,.footer-details dl>div { line-height:1.45; }
@media(max-width:720px) {
 .figma-about-layout .brand-statement p { line-height:1.6; }
 .service-list p { line-height:1.5; }

 .contact-center>p { line-height:1.4; }
 .footer-details,.footer-details dl>div { line-height:1.45; }
}

/* Detail-page supporting text follows the light-background hierarchy. */
.project-detail dt,.project-detail .keyword-heading { color:#666666;line-height:1.2; }
.project-detail dd { color:#333333;line-height:1.35; }
.project-detail .detail-tags>span { color:#333333;line-height:1.3; }

/* Detail labels, enlarged cover, compact footer labels and blog destination. */
.project-detail dt,.project-detail .keyword-heading { font-size:20px; }
.detail-hero { width:calc(100% + 96px);max-width:none;margin-left:-48px;border-radius:18px; }
.footer-details dl>div { grid-template-columns:64px minmax(0,1fr);gap:12px; }
.works-blog { margin-top:110px;padding:64px 24px 0;border-top:1px solid #d5d5d5;text-align:center; }
.works-blog p { margin:0 0 28px;color:#666;font-size:20px;line-height:1.5;word-break:keep-all; }
.works-blog .pill-button { gap:12px; }
.works-blog .pill-button span { font-size:24px; }
@media(max-width:1200px) { .detail-hero { width:100%;margin-left:0; } }
@media(max-width:720px) {
 .project-detail dt,.project-detail .keyword-heading { font-size:18px; }
 .detail-hero { width:calc(100% + 16px);margin-left:-8px;border-radius:12px; }
 .footer-details dl>div { grid-template-columns:60px minmax(0,1fr);gap:8px; }
 .works-blog { margin-top:70px;padding:40px 0 0; }.works-blog p { font-size:17px; }
}

.footer-socials { position:absolute;top:60px;right:3.367vw;display:flex;align-items:center;gap:18px; }
.footer-socials a,.footer-socials button { display:grid;place-items:center;width:32px;height:32px;padding:0;background:none;border:0;color:#000; }
.footer-socials svg { width:28px;height:28px; }.footer-socials a:hover { opacity:.6; }.footer-socials button:disabled { opacity:.35;cursor:default; }
.contact-actions { position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:55px; }
.contact-actions .inquiry-button { margin-top:0; }
.email-copy svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7; }
.email-copy .copy-label { font:inherit; }.email-copy { gap:10px; }
.copy-feedback { position:absolute;top:calc(100% + 12px);left:0;right:0;font-size:14px;color:#666; }
@media(max-width:900px) { .footer-socials { position:static;justify-content:flex-end;margin:0 0 24px; } }
@media(max-width:720px) { .contact-actions { margin-top:36px;gap:10px; }.contact-actions .pill-button { min-width:145px;padding:0 16px; } }

/* Keep the partner flow close to the contact actions. */
.contact-center { min-height:0;padding:160px 0 48px; }
.collaboration .network-logos { margin-top:20px; }
.work-pagination { margin-top:64px;text-align:center; }
.load-more { gap:10px; }.load-more:disabled { opacity:.45;cursor:default;background:transparent;border-color:#aaa; }
.load-more:disabled:hover { background:transparent;border-color:#aaa;color:#111; }
.project-card[hidden] { display:none!important; }
@media(max-width:720px) { .contact-center { min-height:0;padding:110px 0 36px; }.collaboration .network-logos { margin-top:12px; }.work-pagination { margin-top:45px; } }

/* Stronger button outlines, compact copy control, and a single-line phrase. */
.pill-button { border-width:2px; }
.contact-actions .email-copy { min-width:0;width:57px;height:57px;padding:0;border-radius:50%;gap:0; }
.email-copy svg { width:22px;height:22px; }
.contact-center>h2 { display:flex;justify-content:center;align-items:baseline;gap:.25em;font-size:clamp(24px,4.6vw,68px);white-space:nowrap; }
.contact-slogan-row { display:inline-flex; }
@media(max-width:720px) { .contact-center>h2 { font-size:clamp(18px,4.5vw,32px);gap:.2em; }.contact-actions .email-copy { min-width:0;width:57px;padding:0; } }

/* Small partner offset; service entries reveal individually on scroll. */
.collaboration .network-logos { margin-top:44px; }
.service-motion-ready .service-list article { opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .5s ease-out; }
.service-motion-ready .service-list article.service-visible { opacity:1;transform:translateY(0); }
@media(max-width:720px) { .collaboration .network-logos { margin-top:32px; } }
@media(prefers-reduced-motion:reduce) { .service-motion-ready .service-list article { opacity:1;transform:none;transition:none; } }

/* Larger centered closing phrase and more room before partner logos. */
.contact-center>h2 { font-size:clamp(30px,5.6vw,82px); }
.collaboration .network-logos { margin-top:80px; }
@media(max-width:720px) { .contact-center>h2 { font-size:clamp(22px,5.1vw,38px); }.collaboration .network-logos { margin-top:60px; } }

.collaboration .network-logos { margin-top:120px; }
@media(max-width:720px) { .collaboration .network-logos { margin-top:90px; } }

.intro-immediate .intro-screen { display:none; }
.intro-immediate .full-logo-svg path,.intro-immediate .full-logo-svg rect { opacity:1!important;transform:none!important;animation:none!important; }

.work-pagination .load-more { min-width:0;width:58px;height:58px;padding:0;border-radius:50%; }
.work-pagination .load-more span { font-size:32px;line-height:1; }

/* Left-to-right hover fill, shared across all pages. */
.footer-socials {gap:14px}
.footer-socials a,.footer-socials button {width:44px;height:44px;border-radius:50%;background:#000;color:#fff}
.footer-socials svg {width:25px;height:25px}
.social-blog-word {font-size:15px;font-weight:800;letter-spacing:-.04em}
.pill-button,.contact-actions .email-copy,.work-pagination .load-more {
 border-radius:0!important;position:relative;overflow:hidden;isolation:isolate;
 background:linear-gradient(#ff4e31,#ff4e31) left center / 0% 100% no-repeat transparent;
 transition:background-size .45s cubic-bezier(.22,.61,.36,1),color .25s,border-color .25s;
}
.pill-button:hover,.pill-button:focus-visible {
 background:linear-gradient(#ff4e31,#ff4e31) left center / 100% 100% no-repeat transparent;
 border-color:#ff4e31;color:#111;
}
.pill-button:active {transform:none}
.pill-button::after {content:none!important}
.load-more:disabled,.load-more:disabled:hover {background-size:0% 100%;transform:none}
@media(prefers-reduced-motion:reduce){.pill-button{transition:none}}

.about-scroll {
  position: relative;
  width: calc(100% + 48px);
  margin-inline: -24px;
  background: #000;
}
.about-scroll-ready { height: 320svh; }
.about-scroll-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.about-scroll-copy { position: relative; z-index: 1; padding: 0 16px; text-align: center; }
.about-scroll-copy .about-scroll-panel {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(22px, 1.9vw, 36px);
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: -.035em;
  word-break: keep-all;
}
.about-scroll-copy span { display: block; }
.about-scroll-copy .about-scroll-panel + .about-scroll-panel { margin-top: 24px; }
.about-scroll-ready .about-scroll-panel { display: none; }
.about-scroll-ready .about-scroll-panel.is-active {
  margin: 0;
  display: block;
  animation: about-panel-enter .30s ease-out both;
}
@keyframes about-panel-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.about-scroll-photos { position: absolute; inset: 0; pointer-events: none; }
.about-scroll-photos img {
  position: absolute;
  display: block;
  width: min(var(--photo-width), var(--photo-max));
  height: auto;
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  border-radius: 0;
  transform: translateY(calc(var(--about-scroll-progress, 0) * var(--photo-travel, -28px)));
}
.about-scroll-photos img:nth-child(even) {
  --photo-travel: 24px;
}
.about-scroll-photos img:nth-child(3n) {
  --photo-travel: -42px;
}
.about-scroll-photos img:nth-child(1) { --photo-width: 24vw; --photo-max: 360px; --photo-ratio: 16 / 9; left: 6%; top: 8%; }
.about-scroll-photos img:nth-child(2) { --photo-width: 11vw; --photo-max: 175px; --photo-ratio: 1; right: 9%; top: 10%; }
.about-scroll-photos img:nth-child(3) { --photo-width: 12vw; --photo-max: 185px; --photo-ratio: 4 / 5; left: 2%; top: 45%; }
.about-scroll-photos img:nth-child(4) { --photo-width: 19vw; --photo-max: 290px; --photo-ratio: 3 / 2; right: 1.5%; top: 48%; }
.about-scroll-photos img:nth-child(5) { --photo-width: 9vw; --photo-max: 135px; --photo-ratio: 4 / 3; left: 13%; bottom: 7%; }
.about-scroll-photos img:nth-child(6) { --photo-width: 14vw; --photo-max: 210px; --photo-ratio: 1; right: 16%; bottom: 9%; }
.collaboration .network-logos { margin-top: 148px; }
.collaboration .network-crop { scale: .9; }

@media (max-width: 720px) {
  .about-scroll { width: 100%; margin-inline: 0; }
  .about-scroll-copy .about-scroll-panel { font-size: clamp(17px, 4.5vw, 26px); }
  .about-scroll-photos img:nth-child(1) { --photo-width: 37vw; left: 5%; top: 12%; }
  .about-scroll-photos img:nth-child(2) { --photo-width: 23vw; right: 6%; top: 14%; }
  .about-scroll-photos img:nth-child(3) { --photo-width: 17vw; top: auto; left: 5%; bottom: 7%; }
  .about-scroll-photos img:nth-child(4) { --photo-width: 20vw; top: auto; right: 5%; bottom: 8%; }
  .about-scroll-photos img:nth-child(5) { --photo-width: 18vw; left: 10%; bottom: 16%; }
  .about-scroll-photos img:nth-child(6) { --photo-width: 24vw; right: 10%; bottom: 17%; }
  .collaboration .network-logos { margin-top: 110px; }
}
@media (max-height: 660px) {
  .about-scroll-photos img { max-width: 15vw; }
  .about-scroll-photos img:nth-child(1),
  .about-scroll-photos img:nth-child(2) { top: 6%; }
  .about-scroll-photos img:nth-child(5),
  .about-scroll-photos img:nth-child(6) { bottom: 5%; }
}

.expansion-scene {
  --expansion-gap: clamp(10px, 1.5vw, 24px);
  margin-inline: -24px;
}
.expansion-stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr;
  place-items: center;
  padding: 32px var(--expansion-gap);
  isolation: isolate;
}
.expansion-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #090909;
}
.expansion-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.expansion-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .37);
}
.expansion-copy {
  position: relative;
  text-align: center;
  color: #f5f5f5;
  word-break: keep-all;
}
.expansion-copy h2 { margin: 0; font-size: clamp(20px, 2.8vw, 43px); line-height: 1.28; font-weight: 700; }
.expansion-copy h2 span { display: block; }
.expansion-copy p { margin: 16px 0 0; font-size: clamp(14px, 1.5vw, 22px); line-height: 1.55; font-weight: 600; }
.expansion-ready { height: 245svh; }
.expansion-ready .expansion-stage { position: sticky; top: 0; height: 100svh; }
.expansion-ready .expansion-visual { clip-path: inset(var(--crop-y, 40%) var(--crop-x, 42%)); }
.expansion-ready .expansion-visual::after { opacity: var(--expansion-shade, 0); }
.about-scroll-ready .about-scroll-stage { opacity: var(--about-exit-opacity, 1); }
.expansion-ready .expansion-visual { opacity: var(--expansion-image-opacity, 0); }
.expansion-ready .expansion-copy { opacity: var(--expansion-title-opacity, 0); }
.expansion-ready .expansion-detail {
  display: grid;
  grid-template-rows: var(--expansion-detail-height, 0fr);
  opacity: var(--expansion-detail, 0);
}
.expansion-ready .expansion-detail > * { min-height: 0; overflow: hidden; }
.expansion-ready .expansion-detail > p { margin: 0; padding-top: calc(16px * var(--expansion-detail, 0)); }

/* Homepage reading sizes. */
.figma-about-layout .brand-statement h1 { font-size: clamp(27px, 3vw, 43px); }
.figma-about-layout .brand-statement p { font-size: clamp(17px, 1.55vw, 22px); }
.about-scroll-copy .about-scroll-panel { font-size: clamp(23px, 2.2vw, 41px); }
.expansion-copy h2 { font-size: clamp(22px, 3vw, 47px); }
.expansion-copy p { font-size: clamp(16px, 1.65vw, 24px); }
.service-list h3 { font-size: clamp(25px, 2.15vw, 33px); }
.service-list p { font-size: clamp(18px, 1.5vw, 22px); }
.contact-center > p { font-size: clamp(19px, 1.85vw, 27px); }

@media (max-width: 720px) {
  .about-scroll-copy .about-scroll-panel { font-size: clamp(18px, 4.8vw, 29px); }
}

.projects .project-image, .work-index .project-image,
.project-placeholder, .project-image img,
.project-detail .detail-hero, .project-detail .detail-gallery img {
  border-radius: 0;
}

.work-pagination .load-more {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #111;
  font: inherit;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -.035em;
  opacity: 1;
}
.work-pagination .load-more:not(:disabled):hover { color: #ff4e31; cursor: pointer; }
.work-pagination .load-more:focus-visible { outline: 2px solid #ff4e31; outline-offset: 6px; }

.figma-about-layout .brand-statement h1 {
  white-space: nowrap;
  font-size: clamp(25px, 2.65vw, 43px);
}
@media (max-width: 720px) {
  .figma-about-layout .brand-statement h1 { font-size: clamp(15px, 4.7vw, 30px); }
}

.contact-center > h2, .contact-slogan-word b,
.contact-center > p, .copy-feedback, .works-blog p,
.work-index .work-tags > span, .project-detail {
  color: #000;
}

/* Project information uses one left edge and a consistent type scale. */
.project-detail {
  --detail-title-size: 42px;
  --detail-body-size: 20px;
}
.project-detail h1 {
  margin: clamp(32px, 4vw, 60px) 0 clamp(30px, 4vw, 58px);
  font-size: var(--detail-title-size);
  font-weight: 700;
  line-height: 1.2;
}
.project-detail dt, .project-detail .keyword-heading {
  color: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.project-detail dd {
  margin-top: 8px;
  color: inherit;
  font-size: var(--detail-body-size);
  font-weight: 400;
  line-height: 1.55;
}
.project-detail dt:not(:first-child), .project-detail .keyword-heading {
  margin-top: clamp(22px, 2.4vw, 34px);
}
.project-detail .keyword-heading { margin-bottom: 12px; }
.project-detail .detail-tags { gap: 8px; }
.project-detail .detail-tags > span {
  padding: 5px 14px;
  border: 1px solid #999;
  background: transparent;
  color: inherit;
  font-size: 16px;
  font-weight: 400;
}

html:has(#contact:target) { scroll-behavior: auto; }

.brand-story .brand-statement p, .brand-story .service-list p,
.brand-story .expansion-copy p, .brand-story .about-scroll-panel {
  color: #fff;
}

@media (max-width: 720px) {
  .project-detail { --detail-title-size: 30px; }
  .project-detail dt, .project-detail .keyword-heading { font-size: 18px; }
}

/* Center the intro marks and reserve room for the wider SVG artwork. */
.intro-center { position: absolute; inset: 0; }
.intro-composition {
  --intro-brand-width: clamp(5.4rem, 25vw, 19rem);
  --intro-square-size: clamp(1rem, 3.1vw, 2.2rem);
  --intro-axis-offset: calc((var(--intro-square-size) - var(--intro-brand-width) * 42.69 / 67.33) / 2);
  --intro-gap-closed: clamp(.75rem, 1.6vw, 1.5rem);
  --intro-gap-open: clamp(10rem, 40vw, 30rem);
  --close-shift: calc((var(--intro-gap-open) - var(--intro-gap-closed)) / 2);
  height: auto;
  align-items: center;
}
.intro-brand { width: var(--intro-brand-width); margin: 0; }
.intro-square {
  width: var(--intro-square-size);
  height: var(--intro-square-size);
  position: relative;
  /* Match the top of the W's right stroke without changing the closing motion. */
  top: var(--intro-axis-offset);
  margin: 0;
}
.loader-image-wrap {
  top: var(--intro-axis-offset);
  width: var(--intro-gap-closed);
  height: clamp(5rem, 16vw, 12rem);
  margin: 0;
}
.loader-image {
  width: calc(var(--intro-gap-open) * .84);
  height: 100%;
}

/* Fit the contact content and partner logos into the opening viewport. */
.projects { padding-bottom: clamp(110px, 11vw, 175px); }
#contact {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  padding-bottom: clamp(16px, 3svh, 32px);
}
#contact .contact-center {
  min-height: 0;
  padding-block: clamp(52px, 8svh, 90px) 24px;
}
#contact .network-logos { margin-top: 0; }

@media (max-width: 720px) {
  .projects { padding-bottom: 108px; }
}

/* Increase reading sizes without changing section titles or controls. */
.figma-about-layout .brand-statement h1 { font-size: clamp(27px, 2.8vw, 46px); }
.figma-about-layout .brand-statement p { font-size: clamp(18px, 1.7vw, 24px); }
.about-scroll-copy .about-scroll-panel { font-size: clamp(25px, 2.45vw, 46px); }
.expansion-copy h2 { font-size: clamp(24px, 3.25vw, 51px); }
.expansion-copy p { font-size: clamp(17px, 1.82vw, 26px); }
.service-list h3 { font-size: clamp(27px, 2.35vw, 36px); }
.service-list p { font-size: clamp(19px, 1.65vw, 24px); }
.contact-center > h2 { font-size: clamp(30px, 5.8vw, 88px); }
.contact-center > p { font-size: clamp(20px, 2vw, 29px); }
.works-blog p { font-size: clamp(18px, 1.6vw, 23px); }
.project-detail { --detail-title-size: 46px; --detail-body-size: 22px; }
.project-detail dt, .project-detail .keyword-heading { font-size: 22px; }
.project-detail .detail-tags > span { font-size: 17px; }
.footer-details dl > div { font-size: 17px; }
.footer-details dd { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .figma-about-layout .brand-statement h1 { font-size: clamp(16px, 4.9vw, 32px); }
  .about-scroll-copy .about-scroll-panel { font-size: clamp(19px, 5.15vw, 31px); }
  .contact-center > h2 { font-size: clamp(20px, 5.35vw, 41px); }
  .project-detail { --detail-title-size: 33px; --detail-body-size: 20px; }
  .project-detail dt, .project-detail .keyword-heading { font-size: 19px; }
}

.expansion-ready .expansion-stage {
  opacity: var(--expansion-exit-opacity, 1);
}
.expansion-ready .expansion-visual {
  transform: scale(var(--expansion-exit-scale, 1));
}

/* WORK content gallery and embedded replay (existing site layout retained) */
.project-card[hidden]{display:none!important}
.work-video{width:100%;margin:8px 0 0}
.work-video-title{font-size:24px;font-weight:700;margin:0 0 22px}
.work-video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#111;border-radius:10px;overflow:hidden}
.work-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.work-video-fallback{display:inline-block;margin-top:14px;color:inherit;text-underline-offset:4px}
.detail-pair img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
@media(max-width:720px){.detail-pair{grid-template-columns:1fr}.detail-pair img{height:auto;aspect-ratio:auto}.work-video-title{font-size:20px}}

/* WORK thumbnail fit: show complete source images without cropping.
   Scoped to WORK grids; leave detail galleries and other motion untouched. */
.projects .project-image img,
.work-index .project-image img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center !important;
  left: auto !important;
  top: auto !important;
}