/* AXIS CREW — Axis in Motion.
   Apple-style scroll scenes on the Quiet Precision system. Every chapter has a static
   layout; pinned scenes apply only with motion on, at 761px+ wide and 620px+ tall.
   Tokens, base, controls, navigation, hero, chapters, dialogs, original intro,
   motion contracts, responsive layouts and the explicit static preference. */

:root{
  color-scheme:light;
  --ink:#1d1d1f;
  --ink-hover:#333336;
  --secondary:#6e6e73;
  --muted:#86868b;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --paper:#fff;
  --surface:#f5f5f7;
  --surface-strong:#e8e8ed;
  --night:#000;
  --orange:#ff5a1f;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.88);
  --glass-line:rgba(0,0,0,.08);
  --scrim:rgba(0,0,0,.38);
  --focus-ring:rgba(29,29,31,.18);

  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --font-latin:"Inter Tight","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  --text-hero:clamp(42px,min(6.6vw,(58svh - 278px) / 2.24),120px);
  --text-display:clamp(44px,6.3vw,104px);
  --text-statement:clamp(32px,4.8vw,76px);
  --text-headline:clamp(36px,4.4vw,68px);
  --text-title:clamp(32px,3.4vw,48px);
  --text-title-2:28px;
  --text-lead:clamp(18px,1.5vw,22px);
  --text-body:17px;
  --text-callout:15px;
  --text-footnote:13px;
  --text-caption:12px;

  --gutter:clamp(20px,5vw,96px);
  --wide:1440px;
  --inline:max(var(--gutter),calc((100% - var(--wide)) / 2));
  --chapter:clamp(96px,11vw,160px);
  --header:48px;
  --radius-sm:12px;
  --radius-md:28px;
  --radius-lg:28px;
  --radius-pill:980px;
  --shadow-soft:0 2px 6px rgba(0,0,0,.03),0 16px 40px -16px rgba(0,0,0,.12);
  --shadow-float:0 24px 64px -40px rgba(0,0,0,.22);
  --shadow-dialog:0 40px 120px rgba(0,0,0,.28);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-change:cubic-bezier(.4,0,.2,1);
  --dur-quick:160ms;
  --dur-base:320ms;
  --dur-reveal:620ms;
}

/* English lines run longer than Korean ones; the display steps sit one size lower. */
:root:lang(en){--text-hero:clamp(38px,min(5.2vw,(58svh - 278px) / 2.24),104px);--text-display:clamp(40px,5vw,88px);--text-statement:clamp(30px,4vw,64px);--text-headline:clamp(32px,3.6vw,56px)}

/* Base. The two translation levels are measured by motion.js; keep them 1:1. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px);word-break:keep-all;overflow-x:clip;background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:var(--text-body);line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.modal-open{overflow:hidden}
main{display:block;overflow-x:clip}
button,input,select,textarea{font:inherit;letter-spacing:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
::selection{background:var(--line-soft);color:#1d1d1f}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
ul,ol{padding:0;margin:0;list-style:none}
.skip-link{position:fixed;top:-100px;left:20px;z-index:100;padding:12px 18px;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);font-size:14px;font-weight:600}
.skip-link:focus{top:12px}
.tone-lead{color:var(--muted)}

/* Chapter frame: a compact index, then a composition particular to each chapter. */
.light{background:var(--paper)}
.section-pad{display:flex;flex-direction:column;padding-block:var(--chapter);padding-inline:var(--inline)}
.section-top{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(44px,5vw,80px);padding-bottom:22px}
.section-top:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left;transition:transform 850ms var(--ease-out)}
.js .section-top:not(.in-view):after{transform:scaleX(0)}
.section-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 28px;min-width:0}
.section-label,.section-note,.eyebrow{font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;line-height:1.5;letter-spacing:.07em}
.section-label{display:flex;align-items:center;gap:10px;color:var(--secondary)}
.section-heading .section-label:before{content:'';flex:none;width:6px;height:6px;background:var(--orange)}
.section-title{font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.025em;color:var(--ink)}
.section-note{color:var(--secondary);text-align:right}
.status-dot{display:inline-block;flex:none;width:6px;height:6px;background:var(--orange)}
.tiny-cross{position:relative;display:inline-block;width:16px;height:16px;overflow:hidden;font-size:0;color:var(--ink)}
.tiny-cross:before,.tiny-cross:after{content:'';position:absolute;top:7px;left:1px;width:14px;height:1px;background:currentColor}
.tiny-cross:after{transform:rotate(90deg)}

/* Controls. Only the main action is filled; secondary actions retain real glass. */
.glass,.pill-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;border:1px solid var(--glass-line);border-radius:var(--radius-pill);background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;transition:background var(--dur-quick) var(--ease-change),border-color var(--dur-quick) var(--ease-change),transform var(--dur-quick) var(--ease-out)}
.glass:hover,.pill-link:hover{background:var(--glass-strong);border-color:rgba(0,0,0,.2)}
.glass:active,.pill-link:active{transform:scale(.98)}
.glass>span,.pill-link>span{font-size:16px;line-height:1;transition:transform 180ms var(--ease-out)}
.glass:hover>span,.pill-link:hover>span{transform:translate(2px,-2px)}
.glass.header-cta,.glass.hero-cta,.glass.contact-button{border-color:transparent;background:var(--ink);color:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass.header-cta:hover,.glass.hero-cta:hover,.glass.contact-button:hover{border-color:transparent;background:var(--ink-hover)}
.pill-link{margin-top:28px}

/* Navigation. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:28px;height:var(--header);padding-inline:var(--inline);border-bottom:1px solid transparent;background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);transition:border-color var(--dur-base) var(--ease-change)}
.site-header.is-fixed{border-bottom-color:rgba(0,0,0,.08)}
.wordmark{display:inline-flex;align-items:center;min-height:40px;line-height:1}
.brand-logo{display:block;width:72px;height:auto;overflow:visible;color:var(--ink)}
.brand-logo .intro-letter{fill:currentColor}
.desktop-nav{display:flex;align-items:center;gap:clamp(20px,2.5vw,40px)}
.desktop-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:8px 0;color:var(--secondary);font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:color var(--dur-quick) var(--ease-change)}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--ink)}
.desktop-nav a:after{content:'';position:absolute;left:50%;bottom:0;width:4px;height:4px;background:var(--orange);transform:translateX(-50%) scale(0);transition:transform var(--dur-base) var(--ease-out)}
.desktop-nav a.active:after{transform:translateX(-50%) scale(1)}
.glass.header-cta{position:relative;min-height:30px;padding:6px 14px;gap:6px;font-size:12px}
.glass.header-cta:before{content:'';position:absolute;inset:-5px 0}
.glass.header-cta>span{font-size:13px}
.menu-toggle{display:none}
.mobile-menu[hidden]{display:none}

/* Hero. The film expansion is the single signature scene. */
.hero{position:relative;padding:calc(var(--header) + clamp(56px,10vh,112px)) var(--gutter) 48px;overflow-x:clip;background:var(--paper);color:var(--ink);text-align:center}
.hero-stage{display:flex;flex-direction:column;align-items:center}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;max-width:var(--wide)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:32px;color:var(--secondary);letter-spacing:.12em}
.hero h1{max-width:100%;font-size:var(--text-hero);font-weight:700;line-height:1.12;letter-spacing:-.055em}
.hero h1>span{display:block}
.hero-heading-end{display:inline-flex;align-items:center;gap:.14em;white-space:nowrap}
.hero-heading-mark{position:relative;display:inline-block;flex:none;width:1.04em;height:.96em;overflow:hidden}
.hero-heading-mark>img{position:absolute;left:50%;top:50%;width:1.6em;height:1.6em;max-width:none;transform:translate(-50%,-50%)}
.hero-bottom-copy{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:30px}
.hero-bottom-copy>p{max-width:42ch;color:var(--secondary);font-size:var(--text-lead);font-weight:400;line-height:1.6;letter-spacing:-.015em;text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}
.glass.hero-cta{min-height:52px;padding:15px 28px;font-size:17px}
.hero-contact-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-size:17px;font-weight:500;line-height:1.2}
.hero-contact-link span{font-size:16px;transition:transform 180ms var(--ease-out)}
.hero-contact-link:hover{text-decoration:underline;text-underline-offset:5px}
.hero-contact-link:hover span{transform:translate(2px,-2px)}
.hero-film{position:relative;z-index:1;width:100%;max-width:1680px;min-width:0;margin:clamp(48px,5vw,80px) 0 0}
.hero-film-frame{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow-float)}
.hero-film video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;border-radius:inherit;background:var(--paper)}
.hero-film figcaption.hero-film-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px 0;color:var(--secondary);font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;line-height:1.5;letter-spacing:.07em;text-align:left}
.hero-film-actions{display:flex;align-items:center;gap:8px}
.hero-film-actions .film-control{width:44px;height:44px;min-height:44px;padding:0;gap:0;border:1px solid var(--glass-line);border-radius:var(--radius-pill);background:var(--glass);box-shadow:none;color:var(--ink)}
.hero-film-actions .film-control:hover{background:var(--surface)}
.film-control svg{flex:none;width:18px;height:18px}
.film-control>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;transform:none!important}
.film-pause-icon,.film-muted-icon{display:none}
.is-playing .film-play-icon,.is-muted .film-sound-icon{display:none}
.is-playing .film-pause-icon,.is-muted .film-muted-icon{display:block}
.hero-film-status{margin-top:12px;color:var(--secondary);font-size:var(--text-footnote);line-height:1.6;text-align:center}
.hero-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;max-width:1680px;margin-top:32px;padding-top:18px;border-top:1px solid var(--line-soft);color:var(--secondary);font-family:var(--font-latin);font-size:var(--text-caption);font-weight:500;line-height:1.5;letter-spacing:.07em}
.scroll-cue{display:inline-flex;align-items:center;gap:12px;min-height:40px}
.scroll-cue>span:last-child{margin-left:2px;font-size:15px}
.scroll-line{width:1px;height:22px;background:var(--line)}
.hero-coordinate{letter-spacing:.12em}
.hero-eyebrow,.hero h1>span,.hero-bottom-copy,.hero-film-frame,.hero-film-caption,.hero-footer{animation:hero-in 900ms var(--ease-out) both}
.hero h1>span:nth-child(1){animation-delay:80ms}
.hero h1>span:nth-child(2){animation-delay:160ms}
.hero-bottom-copy{animation-delay:240ms}
.hero-film-frame{animation-delay:320ms}
.hero-film-caption,.hero-footer{animation-delay:420ms}
:root.intro-pending:not(.intro-revealing) :is(.hero-eyebrow,.hero h1>span,.hero-bottom-copy,.hero-film-frame,.hero-film-caption,.hero-footer){animation-play-state:paused}

/* Statement. Three existing sentences form one large typographic stage. */
.intro{padding:clamp(96px,10vw,160px) var(--inline);text-align:center}
.intro>.section-label{justify-content:center;margin-bottom:32px}
.intro-statement{max-width:1180px;margin-inline:auto;color:var(--muted);font-size:var(--text-statement);font-weight:700;line-height:1.38;letter-spacing:-.045em}
.intro-statement>span:not(.word),.intro-statement strong{color:var(--ink);font-weight:700}
.intro-stage{display:flex;flex-direction:column;align-items:center}
.intro-statement strong:after{content:'';display:inline-block;width:.2em;height:.2em;margin-left:.06em;vertical-align:.62em;background:var(--orange)}

/* 01. Two equal showcases, with a readable expertise/AI axis above. */
.fields-layout{display:grid;gap:48px}
.fields-heading{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px 64px;align-items:center}
.fields-heading h2,.process-heading h2,.team-copy h2{font-size:var(--text-headline);font-weight:700;line-height:1.22;letter-spacing:-.045em}
.fields-heading h2{align-self:end}
.fields-heading>p,.process-heading>p{color:var(--secondary);font-size:var(--text-lead);font-weight:400;line-height:1.6}
.fields-heading>p{grid-column:1;align-self:start}
.reference-axis{grid-column:2;grid-row:1/3;display:block;justify-self:end;width:320px;height:320px;color:var(--ink)}
.field-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.field-tile{position:relative;display:flex;flex-direction:column;min-width:0;min-height:clamp(520px,42vw,640px);padding:clamp(32px,3.4vw,52px);overflow:hidden;border-radius:36px;background:var(--surface)}
.field-label{display:flex;align-items:center;gap:12px;color:var(--secondary);font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;letter-spacing:.09em}
.field-index{font-variant-numeric:tabular-nums}
.field-name{margin-top:14px;font-size:var(--text-title);font-weight:700;line-height:1.2;letter-spacing:-.045em}
.field-tile .service-art{display:block;width:100%;height:auto;margin-top:auto;padding:40px 4% 24px;color:var(--ink);transition:transform 600ms var(--ease-out)}
.field-tile:hover .service-art{transform:scale(1.03)}
.field-more{position:absolute;inset:0;z-index:2;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer}
.field-more:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.field-more>span{position:absolute;right:clamp(24px,2.4vw,36px);bottom:clamp(24px,2.4vw,36px);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:26px;font-weight:300;line-height:1;transition:transform var(--dur-base) var(--ease-out),background var(--dur-quick) var(--ease-change)}
.field-more:hover>span{transform:scale(1.08);background:var(--ink-hover)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags li{padding:8px 14px;border-radius:var(--radius-pill);background:var(--surface);color:var(--secondary);font-size:13px;font-weight:500;line-height:1.4}
.field-dialog{max-width:min(980px,calc(100% - 32px))}
.field-dialog .dialog-inner>h2{font-size:clamp(36px,4.6vw,64px);line-height:1.15;letter-spacing:-.05em}
.field-dialog .dialog-lead{max-width:40ch;font-size:var(--text-lead);line-height:1.6}
.field-dialog-art{display:block;width:100%;height:auto;margin-top:36px;padding:clamp(20px,4vw,48px);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink)}
.field-dialog .tags{margin-top:28px}
.field-dialog .pill-link{margin-top:32px}

/* 02. A full-width vertical timeline preserves the controller's measured order. */
.process{background:var(--surface)}
.contact{background:var(--paper)}
.process-layout{display:grid;gap:64px}
.process-heading{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 80px;align-items:start}
.process-heading h2{grid-row:1/3}
.process-heading>p{max-width:30ch;padding-top:8px}
.process-heading>.pill-link{justify-self:start;align-self:end;margin-top:0}
.process-glyph{display:none}
.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.process-step{position:relative;display:flex;flex-direction:column;gap:32px;min-width:0;min-height:clamp(340px,28vw,420px);padding:clamp(28px,2.4vw,40px);border-radius:var(--radius-lg);background:var(--paper)}
.step-num{color:var(--ink);font-family:var(--font-latin);font-size:clamp(64px,6.4vw,104px);font-weight:600;line-height:.9;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.step-copy{display:grid;gap:14px;margin-top:auto}
.step-en{margin-bottom:8px;color:var(--secondary);font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;letter-spacing:.09em}
.process-step h3{font-size:clamp(22px,1.9vw,28px);font-weight:700;line-height:1.3;letter-spacing:-.035em}
.step-copy>p{color:var(--secondary);font-size:var(--text-body);line-height:1.7}
.step-symbol{position:absolute;top:clamp(28px,2.4vw,40px);right:clamp(28px,2.4vw,40px);color:var(--secondary);font-size:22px;line-height:1}

/* 03. Large black title stage, followed by an expansive white demonstration. */
.cases{--ink:#f5f5f7;--secondary:#a1a1a6;--muted:#86868b;--line:rgba(255,255,255,.2);--line-soft:rgba(255,255,255,.12);background:var(--night);color:var(--ink)}
.case-preview{display:grid;gap:56px;justify-items:center}
.case-preview-copy{min-width:0;max-width:1100px;text-align:center}
.case-preview-category{margin-bottom:24px;color:var(--secondary);font-size:var(--text-footnote);font-weight:500;line-height:1.6}
.case-preview h2{font-size:clamp(40px,4.8vw,76px);font-weight:700;line-height:1.2;letter-spacing:-.045em}
.case-preview-description{margin-top:28px;color:var(--secondary);font-size:var(--text-lead);line-height:1.7}
.case-preview-visual{--ink:#1d1d1f;--secondary:#6e6e73;--muted:#86868b;--line:#d2d2d7;--line-soft:#e8e8ed;width:100%;min-width:0;padding:clamp(28px,3.2vw,48px);border-radius:var(--radius-lg);background:var(--paper);color:var(--ink)}
.case-preview-visual>.pill-link{margin-top:32px}
.case-demonstration{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.case-preview-visual .case-demonstration{margin:0;padding:0;border:0}
.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.flow-heading h3{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.03em}
.flow-heading p{margin-top:8px;color:var(--secondary);font-size:var(--text-footnote);line-height:1.6}
.case-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1.2fr) 22px minmax(0,1fr);gap:8px;align-items:stretch;padding:4px 0 8px}
.flow-node{position:relative;display:flex;flex-direction:column;min-width:0;min-height:300px;padding:24px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),border-color 100ms var(--ease-change)}
.flow-step-label{margin-bottom:24px;color:var(--secondary);font-size:var(--text-caption);font-weight:600;line-height:1.5}
.flow-file-icon{width:36px;height:36px;margin-bottom:20px}
.flow-node h4{font-size:21px;font-weight:700;line-height:1.4;letter-spacing:-.03em}
.flow-node>p:not(.flow-step-label){margin-top:8px;margin-bottom:20px;color:var(--secondary);font-size:var(--text-body);line-height:1.6}
.flow-node-status{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);color:var(--secondary);font-size:var(--text-caption);line-height:1.5}
.flow-node.is-current{border-color:var(--ink)}
.flow-node.is-current .flow-node-status{color:var(--ink)}
.flow-node.is-complete .flow-node-status:after{content:' ✓';color:var(--ink)}
.flow-node-engine{border-color:transparent;background:var(--surface)}
.flow-axis-word{display:flex;align-items:flex-start;gap:5px;margin:4px 0 24px;font-family:var(--font-latin);font-size:36px;font-weight:700;line-height:1;letter-spacing:-.055em}
.flow-axis-word>span{width:7px;height:7px;background:var(--orange)}
.flow-farms{display:flex;flex-direction:column;gap:8px;margin:18px 0}
.flow-farms li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:var(--radius-pill);background:var(--surface);font-size:13px;transition:opacity 130ms var(--ease-out),transform 130ms var(--ease-out)}
.flow-farms strong{font-weight:500;white-space:nowrap}
.flow-farms li>span{color:var(--secondary);font-size:12px;white-space:nowrap}
.flow-farms b{margin:0 1px;font-size:13px;font-weight:400}
.flow-node-result{border-color:var(--ink);background:var(--ink);color:#fff}
.flow-node-result .flow-step-label,.flow-node-result>p:not(.flow-step-label){color:#a1a1a6}
.flow-node-result .flow-node-status{border-color:rgba(255,255,255,.2);color:#a1a1a6}
.flow-node-result.is-current .flow-node-status,.flow-node-result.is-complete .flow-node-status:after{color:#fff}
.flow-arrow{align-self:center;height:24px;transition:opacity 100ms var(--ease-out)}
.flow-arrow svg{display:block;width:100%;height:100%}
.flow-arrow path{stroke:var(--secondary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 180ms var(--ease-out)}
.sequence-ready .flow-node:not(.is-visible){opacity:0;visibility:hidden;transform:translate3d(0,14px,0)}
.sequence-ready .flow-arrow:not(.is-visible){opacity:0}
.sequence-ready .flow-arrow:not(.is-visible) path{stroke-dashoffset:1}
.sequence-ready .flow-farms li:not(.is-visible){opacity:0;visibility:hidden;transform:translate3d(-8px,0,0)}
.sequence-ready .flow-node{transition-duration:310ms,310ms,120ms}
.flow-status{min-height:22px;margin-top:16px;color:var(--secondary);font-size:var(--text-footnote);line-height:1.7}
.case-outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.case-outcomes article{padding-top:24px;border-top:1px solid var(--line)}
.case-outcomes article>span{color:var(--secondary);font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;letter-spacing:.06em}
.case-outcomes h3{margin-top:16px;font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.035em}
.case-outcomes p{margin-top:12px;color:var(--secondary);font-size:var(--text-body);line-height:1.7}
.case-preview-flow{min-width:0}
.cases .case-outcomes{width:100%;gap:20px;margin-top:0}
.cases .case-outcomes article{padding:clamp(28px,3vw,44px);border:0;border-radius:var(--radius-lg);background:#1d1d1f}
.cases .case-cta{margin-top:0;border-color:transparent;background:#f5f5f7;color:#1d1d1f;-webkit-backdrop-filter:none;backdrop-filter:none}
.cases .case-cta:hover{border-color:transparent;background:#fff}

/* 04. A two-line manifesto followed by the expertise constellation. */
.crew-slogan{width:100%;margin:clamp(16px,3vw,48px) 0 clamp(80px,9vw,140px);text-align:center}
.crew-slogan-en{font-family:var(--font-latin);font-size:clamp(64px,10vw,200px);font-weight:700;line-height:1;letter-spacing:-.055em;text-wrap:balance}
.crew-slogan-en>span{display:block}
.crew-slogan-lead{color:var(--muted)}
.crew-slogan-main{color:var(--ink);white-space:nowrap}
.crew-slogan-ko{margin-top:24px;color:var(--secondary);font-size:var(--text-lead);font-weight:400;line-height:1.6}
.team-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center;width:100%;max-width:1280px;margin-inline:auto}
.team-copy{min-width:0}
.team-copy h2{font-size:clamp(32px,3.2vw,48px)}
.team-copy>p{max-width:36ch;margin-top:28px;color:var(--secondary);font-size:var(--text-body);line-height:1.8}
.team-signature{display:block;margin-top:40px;color:var(--secondary);font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;line-height:1.8;letter-spacing:.08em}
.crew-orbit{position:relative;justify-self:center;width:100%;max-width:560px;aspect-ratio:1;isolation:isolate}
.crew-orbit-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.crew-orbit-track{stroke:var(--line);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1100ms var(--ease-out)}
.crew-orbit-inner{stroke:var(--line);stroke-width:1;stroke-dasharray:3 6;transition:opacity 500ms var(--ease-out) 150ms}
.crew-hub{position:absolute;top:52.5%;left:50%;width:28%;aspect-ratio:1;transform:translate(-50%,-50%)}
.crew-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;border-radius:50%;background:var(--orange);color:#1d1d1f;transform-origin:center;transition:opacity 500ms var(--ease-out) 100ms,transform 500ms var(--ease-out) 100ms}
.crew-core strong{font-family:var(--font-latin);font-size:clamp(36px,4.2vw,64px);font-weight:700;line-height:1;letter-spacing:-.05em}
.crew-core>span{font-size:14px;font-weight:500}
.crew-members{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform-origin:50% 52.5%}
.crew-node{position:absolute;width:clamp(82px,20%,112px);transform:translate(-50%,-50%)}
.crew-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;aspect-ratio:1;padding:12% 4%;border:1px solid var(--glass-line);border-radius:var(--radius-lg);background:var(--glass-strong);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:var(--shadow-soft);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:var(--crew-delay)}
.crew-card svg{flex:none;width:30px;height:30px}
.crew-card strong{font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.02em;white-space:nowrap}
.crew-education{top:14%;left:50%}.crew-humanities{top:41%;left:87%}.crew-art{top:85%;left:74%}.crew-sports{top:85%;left:26%}.crew-diverse{top:41%;left:13%}
.js .crew-orbit:not(.in-view) .crew-orbit-track{stroke-dashoffset:1}
.js .crew-orbit:not(.in-view) .crew-orbit-inner{opacity:0}
.js .crew-orbit:not(.in-view) .crew-core{opacity:0;transform:scale(.94)}
.js .crew-orbit:not(.in-view) .crew-card{opacity:0;transform:translateY(16px) scale(.94)}

/* 05. A direct, centered final question. */
.contact-status{display:flex;align-items:center;gap:8px;color:var(--secondary);font-size:var(--text-footnote);font-weight:400}
.contact-main{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;margin:16px auto 0;text-align:center}
.contact-tile{max-width:var(--wide);padding:clamp(72px,9vw,144px) clamp(24px,5vw,80px);border-radius:clamp(28px,3vw,44px);background:var(--surface)}
.contact-pre{margin-bottom:24px;color:var(--secondary);font-size:var(--text-lead);font-weight:400;line-height:1.6}
.contact h2{font-size:var(--text-display);font-weight:700;line-height:1.13;letter-spacing:-.055em}
.contact-bottom{display:flex;flex-direction:column;align-items:center;gap:32px;margin-top:32px}
.contact-bottom p{color:var(--secondary);font-size:var(--text-body);line-height:1.75}
.glass.contact-button{min-height:56px;padding:16px 32px;font-size:17px}
.contact-note{max-width:60ch;margin-top:28px;color:var(--secondary);font-size:var(--text-footnote);line-height:1.7}

/* Footer stays fully visible even when it cannot reach the entrance zone. */
.site-footer{padding:32px var(--inline) 24px;border-top:1px solid var(--line);background:var(--surface);color:var(--secondary)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.footer-crumbs{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:var(--text-caption);font-weight:500}
.footer-crumbs .wordmark{min-height:40px}
.footer-top .brand-logo{width:56px}
.footer-crumb-sep{color:var(--muted);font-size:15px}
.footer-sitemap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:28px 0 20px;border-bottom:1px solid var(--line)}
.footer-heading{margin-bottom:6px;color:var(--ink);font-size:var(--text-caption);font-weight:600;line-height:1.6;letter-spacing:0}
.footer-col a,.footer-link{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;color:var(--secondary);font-size:var(--text-caption);line-height:1.5;text-align:left;cursor:pointer;transition:color var(--dur-quick) var(--ease-change)}
.footer-col a:hover,.footer-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.footer-top>p{font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;letter-spacing:.1em}
.back-top{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-family:var(--font-latin);font-size:var(--text-caption);font-weight:600;letter-spacing:.07em;transition:color var(--dur-quick) var(--ease-change)}
.back-top:hover{color:var(--ink)}
.back-top span{font-size:15px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;font-size:var(--text-caption);line-height:1.7}
/* Language switch: bottom of the footer, as on apple.com. */
.lang-switch{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--secondary);font-size:var(--text-caption);white-space:nowrap}
.lang-switch svg{flex:none;width:14px;height:14px}
.lang-switch a{display:inline-flex;align-items:center;min-height:40px;color:var(--secondary);transition:color var(--dur-quick) var(--ease-change)}
.lang-switch a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lang-switch a[aria-current]{color:var(--ink);font-weight:600}
.motion-toggle{min-width:40px;min-height:40px;padding:8px 4px;border:0;background:none;color:var(--secondary);font-size:var(--text-caption);line-height:1.6;white-space:nowrap}
.motion-toggle:hover{color:var(--ink)}
.admin-link{flex-shrink:0;gap:6px;white-space:nowrap}
.scroll-progress{position:fixed;left:0;bottom:0;z-index:90;width:0;height:2px;background:var(--orange);pointer-events:none}

/* Dialogs */
dialog{width:100%;max-width:min(880px,calc(100% - 32px));max-height:90svh;padding:0;border:0;border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-dialog);overscroll-behavior:contain}
dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}
dialog[open]{animation:dialog-in var(--dur-base) var(--ease-out);transform-origin:center}
dialog[open]::backdrop{animation:backdrop-in 240ms var(--ease-out)}
dialog[open].is-closing{animation:dialog-out 220ms cubic-bezier(.4,0,1,1) both;pointer-events:none}
dialog[open].is-closing::backdrop{animation:backdrop-out 200ms ease-in both}
.dialog-inner{padding:clamp(28px,4vw,56px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}
.dialog-close{display:grid;flex-shrink:0;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);font-size:24px;line-height:1;transition:background var(--dur-quick) var(--ease-change)}
.dialog-close:hover{background:var(--surface-strong)}
.dialog-category{margin-bottom:16px;color:var(--secondary);font-size:var(--text-footnote);font-weight:600}
.dialog-inner>h2{font-size:clamp(30px,3.6vw,48px);font-weight:700;line-height:1.3;letter-spacing:-.04em}
.dialog-lead{max-width:64ch;margin-top:20px;color:var(--secondary);font-size:var(--text-body);line-height:1.75}
.case-dialog{max-width:min(1180px,calc(100% - 32px))}
.case-dialog .dialog-inner>h2{font-size:clamp(28px,3.2vw,44px)}
.case-dialog .dialog-lead{max-width:74ch;font-size:var(--text-body)}
.form-notice{margin-top:20px;padding:14px 18px;border-radius:var(--radius-lg);background:var(--surface);color:var(--secondary);font-size:var(--text-footnote);line-height:1.7}
#inquiry-form{margin-top:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;color:var(--ink);font-size:var(--text-footnote);font-weight:600}
label>span{color:var(--secondary)}
input,select,textarea{display:block;width:100%;margin-top:8px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font-size:17px;font-weight:400;line-height:1.5;transition:border-color var(--dur-quick) var(--ease-change),box-shadow var(--dur-quick) var(--ease-change)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--focus-ring)}
select{-webkit-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
textarea{min-height:128px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--secondary);font-size:17px}
.full-label{margin-top:20px}
/* The inquiry calendar expands in the form, so it never covers another field. */
.date-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:54px;margin-top:8px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--secondary);font-size:17px;line-height:1.5;text-align:left}
.date-trigger:hover{border-color:var(--muted)}
.date-trigger[aria-expanded="true"]{border-color:var(--ink)}
.date-trigger.has-date{color:var(--ink)}
.date-caption{min-width:0}
.date-icon{display:flex;flex:none;color:var(--ink)}
.date-icon svg{width:22px;height:22px}
.date-calendar{width:360px;max-width:100%;margin-top:12px;padding:12px;border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:var(--paper)}
.date-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 12px 12px}
.date-month{font-size:17px;font-weight:600;letter-spacing:-.025em}
.date-navigation{display:flex;gap:4px}
.date-nav{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);font-size:26px;line-height:1}
.date-nav:hover{background:var(--surface-strong)}
.date-grid{display:grid;gap:3px}
.date-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.date-weekday{display:grid;place-items:center;height:32px;color:var(--secondary);font-size:12px;font-weight:500}
.date-cell{display:grid;place-items:center;min-width:0}
.date-day{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:var(--ink);font-family:var(--font-latin);font-size:15px;line-height:1}
.date-day.is-outside{color:var(--secondary)}
.date-day[aria-current="date"]{border-color:var(--line)}
.date-day:hover{background:var(--surface)}
.date-day.is-selected{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.date-day:focus-visible{position:relative;z-index:1;outline-offset:1px}
.date-calendar-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 4px 0;padding:8px 4px 0;border-top:1px solid var(--line-soft)}
.date-action{min-height:40px;min-width:40px;padding:8px 12px;border:0;border-radius:var(--radius-pill);background:none;color:var(--secondary);font-size:13px}
.date-action:hover{background:var(--surface);color:var(--ink)}
.date-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:420px){.date-calendar{padding:6px}.date-calendar-heading{padding-left:8px}}
.form-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:28px;padding:15px 24px;border:0;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);font-size:17px;font-weight:600;transition:background var(--dur-quick) var(--ease-change),transform var(--dur-quick) var(--ease-out)}
.form-submit:hover{background:var(--ink-hover)}
.form-submit:active{transform:scale(.99)}
.form-submit span{font-size:18px}
.form-message{margin-top:14px;color:var(--secondary);font-size:var(--text-footnote);line-height:1.7}

/* Brand intro: the original outline-to-fill AXIS entrance, unchanged in timing. */
.brand-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#fff;color:var(--ink);font-family:var(--font-latin);opacity:1;transition:opacity 400ms var(--ease-out)}
.intro-pending .brand-intro[hidden]{display:grid!important}
.intro-pending body{overflow:hidden}
.brand-intro.is-leaving{opacity:0;pointer-events:none}
.intro-brand{width:clamp(190px,31vw,440px);text-align:center;transform-origin:center;animation:intro-brand-in 480ms var(--ease-out) both}
.intro-logo{display:block;width:100%;overflow:visible}
.intro-logo .intro-letter{fill:transparent;stroke:currentColor;stroke-width:12;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:logo-draw 1.6s cubic-bezier(.35,.1,.35,1) var(--letter-delay) both,logo-fill .4s ease 2.1s both}
.intro-logo .intro-square{transform-box:fill-box;transform-origin:50% 50%;animation:logo-square .32s var(--ease-out) 2.2s both}
.intro-brand>p{margin-top:27px;color:var(--secondary);font-size:12px;letter-spacing:.2em;animation:intro-caption .3s var(--ease-out) 2.3s both}
.intro-corner{position:absolute;bottom:34px;left:var(--gutter);color:var(--secondary);font-size:12px;letter-spacing:.08em}
.intro-skip{position:absolute;right:var(--gutter);bottom:25px;display:flex;align-items:center;gap:15px;padding:10px;border:0;background:none;color:var(--secondary);font-size:12px}
.intro-skip span{font-size:18px}
:root.motion-reduced .intro-logo .intro-letter{fill:currentColor;stroke:none;stroke-dashoffset:0}
:root.motion-reduced .intro-logo .intro-square,:root.motion-reduced .intro-brand>p{opacity:1;transform:none}
.brand-intro:not(.intro-playing) .intro-logo .intro-letter{animation:none;fill:transparent;stroke-dashoffset:1}
.brand-intro:not(.intro-playing) .intro-logo .intro-square{animation:none;opacity:0}
.brand-intro:not(.intro-playing) .intro-brand>p{animation:none;opacity:0}
.brand-intro:not(.intro-playing) .intro-brand{animation:none}

/* Keyframes */
@keyframes hero-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes scroll-line{to{transform:translateY(33px)}}
@keyframes logo-draw{to{stroke-dashoffset:0}}
@keyframes logo-fill{to{fill:currentColor;stroke-opacity:0}}
@keyframes logo-square{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes intro-caption{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-brand-in{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-out{to{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{to{opacity:0}}

/* Motion hooks written by motion.js: scroll-position scenes that replay on re-entry. */
.motion-ready .motion-section{transform:translate3d(0,var(--scene-y,0px),0);opacity:var(--scene-opacity,1)}
.motion-ready .motion-section.is-active{will-change:transform,opacity}
.motion-ready .reveal{opacity:var(--motion-opacity,1);transform:translate3d(var(--motion-x,0px),var(--motion-y,0px),0);transition:none}
.motion-ready .process-step{transition:none}
/* The footer ends the page inside the entrance zone, so it stays fully visible. */
.motion-ready .site-footer .reveal{opacity:1;transform:none}
.motion-ready [data-motion="wipe"]{clip-path:inset(0 var(--motion-mask,0%) 0 0)}
.motion-ready #fields{clip-path:inset(0 var(--scene-mask,0%) 0 0)}
.motion-ready #process{clip-path:inset(var(--scene-mask,0%) 0 0 0)}
.motion-ready #cases{clip-path:inset(0 0 0 var(--scene-mask,0%))}
.motion-ready #contact{clip-path:inset(0 0 var(--scene-mask,0%) 0)}
.motion-line{display:block;overflow:hidden;margin-block:-.06em;padding-block:.06em}
.motion-line-inner{display:block;transform:translate3d(0,0,0);transition:transform 780ms var(--ease-out);transition-delay:calc(var(--line-index,0) * 90ms)}
.motion-ready .reveal:not(.in-view) .motion-line-inner{transform:translate3d(0,110%,0)}
.motion-ready .hero-content{transform:translate3d(0,var(--hero-y,0px),0);opacity:var(--hero-opacity,1);transition:transform 110ms var(--ease-out),opacity 110ms var(--ease-out)}
.motion-ready .motion-section .section-top:after{transform:scaleX(var(--section-line,1));transition:transform 180ms var(--ease-out)}
.motion-ready .reference-axis .axis-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1000ms var(--ease-out)}
.motion-ready .motion-section:not(.is-active) .reference-axis .axis-draw{stroke-dashoffset:1}
.motion-ready .reference-axis rect{transform-box:fill-box;transform-origin:center;transition:opacity 440ms var(--ease-out) 320ms,transform 440ms var(--ease-out) 320ms}
.motion-ready .motion-section:not(.is-active) .reference-axis rect{opacity:0;transform:scale(.75)}
.motion-ready .crew-orbit-inner{transform-box:fill-box;transform-origin:center;transform:rotate(var(--section-angle,0deg));transition:opacity 500ms var(--ease-out),transform 180ms var(--ease-out)}
.motion-ready .process-glyph{transform:rotate(calc(-22deg + var(--section-angle,0deg)));transition:transform 180ms var(--ease-out)}

/* Scroll scenes. motion.js writes --scene-progress (0–1) on every [data-scene]. */
/* Entrances that finish on their own once the block is on screen; no scroll is needed to complete them. */
:root.motion-enabled .intro-statement .word{opacity:.14;transition:opacity 520ms var(--ease-out)}
:root.motion-enabled .intro-statement.in-view .word{opacity:1;transition-delay:calc(var(--w) * 70ms + 160ms)}
:root.motion-enabled .intro-statement strong:after{transform:scale(0);transition:transform 380ms var(--ease-out)}
:root.motion-enabled .intro-statement.in-view strong:after{transform:scale(1);transition-delay:calc(var(--words,11) * 70ms + 320ms)}
:root.motion-enabled .crew-slogan :is(.crew-slogan-lead,.crew-slogan-main,.crew-slogan-ko){opacity:0;transform:translate3d(0,48px,0);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out)}
:root.motion-enabled .crew-slogan.in-view :is(.crew-slogan-lead,.crew-slogan-main,.crew-slogan-ko){opacity:1;transform:none}
:root.motion-enabled .crew-slogan.in-view .crew-slogan-main{transition-delay:160ms}
:root.motion-enabled .crew-slogan.in-view .crew-slogan-ko{transition-delay:320ms}
:root.motion-enabled.motion-ready .crew-members{rotate:calc(var(--section-angle,0deg) * 1.6)}
:root.motion-enabled.motion-ready .crew-card{rotate:calc(var(--section-angle,0deg) * -1.6)}
@media (min-width:761px) and (min-height:620px){
  /* Hero: the headline leaves upward while the film rises and grows to the full width. */
  :root.motion-enabled .hero{--p:var(--scene-progress,0);--e:clamp(0,(var(--p) - .04) / .56,1);height:250svh;padding:0}
  :root.motion-enabled .hero-stage{position:sticky;top:0;display:block;height:100svh;overflow:hidden}
  :root.motion-enabled .hero-content{position:absolute;top:calc(var(--header) + clamp(40px,8svh,96px));left:50%;width:calc(100% - 2 * var(--gutter));transform:translate3d(-50%,calc(var(--p) * -22svh),0);opacity:clamp(0,1 - var(--p) * 2.6,1);transition:none}
  :root.motion-enabled .hero-content:has(:focus-visible){z-index:4;opacity:1;transform:translate3d(-50%,0,0)}
  :root.motion-enabled .hero-film{--film-w:min(100vw - 2 * var(--gutter),(100svh - var(--header) - 72px) * 16 / 9);position:absolute;top:calc(50% + var(--header) / 2);left:50%;z-index:3;width:var(--film-w);max-width:none;margin:0;transform:translate3d(-50%,calc(-50% + (1 - var(--e)) * (25svh - var(--header) / 2 + var(--film-w) * 9 / 64)),0) scale(calc(.5 + .5 * var(--e)));transform-origin:50% 50%;will-change:transform}
  :root.motion-enabled .hero-film figcaption.hero-film-caption{position:absolute;right:20px;bottom:20px;gap:14px;padding:6px 6px 6px 18px;border:1px solid var(--glass-line);border-radius:var(--radius-pill);background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--ink);opacity:clamp(0,(var(--p) - .58) * 10,1);animation:none}
  :root.motion-enabled .hero-film-caption:has(:focus-visible){opacity:1}
  :root.motion-enabled .hero-film-status{position:absolute;top:calc(100% + 12px);left:0;right:0;margin:0}
  :root.motion-enabled .hero-footer{position:absolute;right:var(--gutter);bottom:20px;left:var(--gutter);width:auto;margin:0}
  :root.motion-enabled .hero-footer>*{opacity:clamp(0,1 - var(--p) * 6,1)}
  :root.motion-enabled .hero-coordinate{visibility:hidden}
}

/* Responsive. Desktop starts at 761px, matching the controllers. */
@media (max-width:1100px){
  .site-header{gap:20px}
  .desktop-nav{gap:20px}
  .desktop-nav a{font-size:13px}
  .section-heading{gap:8px 20px}
  .fields-heading{grid-template-columns:minmax(0,1fr) 320px;gap:20px 32px}
  .process-heading{gap:24px 40px}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-flow{grid-template-columns:minmax(0,1fr);gap:12px}
  .flow-node{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 20px;min-height:0;padding:24px}
  .flow-step-label{grid-column:1/-1;margin-bottom:8px}
  .flow-file-icon{grid-column:1;grid-row:2/4;width:32px;height:32px;margin:0;align-self:center;justify-self:center}
  .flow-axis-word{grid-column:1;grid-row:2/4;align-self:center;justify-self:center;font-size:24px;writing-mode:horizontal-tb;margin:0}
  .flow-axis-word>span{flex:none;width:6px;height:6px}
  .flow-node h4,.flow-node>p:not(.flow-step-label){grid-column:2}
  .flow-node>p:not(.flow-step-label){margin:0 0 6px}
  .flow-node-status{grid-column:1/-1;margin-top:4px}
  .flow-node-farms h4{grid-column:1/-1}
  .flow-farms{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 0}
  .flow-farms li{flex-wrap:wrap;justify-content:flex-start;gap:4px 10px}
  .flow-arrow{justify-self:center;width:24px;height:24px;transform:rotate(90deg)}
  .case-outcomes{gap:24px}
  .case-outcomes h3{font-size:22px}
  .team-layout{gap:32px}
  .crew-card strong{font-size:12px}
  .crew-core>span{font-size:12px}
}
@media (max-width:900px) and (min-width:761px){
  .desktop-nav{gap:14px}
  .desktop-nav a{font-size:12px}
  .glass.header-cta{padding-inline:14px}
  .section-heading{display:grid;gap:6px}
  .fields-heading{grid-template-columns:minmax(0,1fr) 320px;column-gap:24px}
  .fields-heading h2{font-size:36px}
  .tags{gap:6px}
  .tags li{padding:7px 12px;font-size:12px}
  .team-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .team-copy{max-width:640px}
  .crew-orbit{max-width:480px}
  .crew-card strong{font-size:14px}
  .crew-core>span{font-size:14px}
}
@media (max-width:760px){
  :root{--gutter:20px;--chapter:80px;--text-headline:clamp(32px,8.5vw,48px)}
  .brand-logo{width:72px}
  .desktop-nav,.header-cta{display:none}
  .menu-toggle{z-index:32;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;padding:0;border:1px solid var(--glass-line);border-radius:var(--radius-pill);background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  .menu-toggle span{display:block;width:16px;height:1.5px;border-radius:1px;background:var(--ink);transition:transform .25s var(--ease-out)}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .mobile-menu{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;padding:96px var(--gutter) 36px;overflow-y:auto;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);color:var(--ink);opacity:0;transform:translateY(-14px);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
  .mobile-menu.is-visible{opacity:1;transform:translateY(0)}
  .mobile-menu a,.mobile-menu button[data-open]{display:flex;align-items:baseline;gap:16px;min-height:64px;padding:18px 0;border:0;border-bottom:1px solid var(--line-soft);background:none;text-align:left;font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.03em;opacity:0;transform:translateY(18px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
  .mobile-menu a>span,.mobile-menu button[data-open]>span{color:var(--secondary);font-family:var(--font-latin);font-size:12px;font-weight:600;letter-spacing:.04em}
  .mobile-menu.is-visible>a,.mobile-menu.is-visible>button[data-open]{opacity:1;transform:translateY(0)}
  .mobile-menu.is-visible>:nth-child(2){transition-delay:40ms}
  .mobile-menu.is-visible>:nth-child(3){transition-delay:80ms}
  .mobile-menu.is-visible>:nth-child(4){transition-delay:120ms}
  .mobile-menu.is-visible>:nth-child(5){transition-delay:160ms}
  .section-top{gap:16px;margin-bottom:36px;padding-bottom:18px}
  .section-heading{display:grid;gap:8px}
  .section-title{font-size:20px}
  .section-top>.section-note{display:none}
  .hero{padding-top:112px;padding-bottom:32px}
  .hero-eyebrow{margin-bottom:24px;letter-spacing:.08em}
  .hero h1{font-size:clamp(32px,8.5vw,60px);line-height:1.2;letter-spacing:-.05em}
  .hero-bottom-copy{gap:24px;margin-top:24px}
  .hero-bottom-copy>p{max-width:34ch;font-size:17px}
  .hero-actions{gap:12px 20px}
  .glass.hero-cta{min-height:48px;padding:13px 22px;font-size:17px}
  .hero-contact-link{font-size:17px}
  .hero-film{margin-top:40px}
  .hero-film figcaption.hero-film-caption{padding-top:12px}
  .hero-footer{gap:12px;margin-top:24px;padding-top:12px;font-size:12px}
  .hero-coordinate{display:none}
  .hero-research-note{letter-spacing:.02em}
  .intro{padding-block:88px}
  .intro>.section-label{margin-bottom:24px}
  .intro-statement{font-size:clamp(28px,7.5vw,48px);line-height:1.48;letter-spacing:-.045em}
  .fields-layout{gap:32px}
  .fields-heading{grid-template-columns:minmax(0,1fr);gap:16px}
  .fields-heading>p{font-size:17px}
  .reference-axis{grid-column:1;grid-row:auto;justify-self:center;width:320px;height:320px;max-width:100%;margin-top:8px}
  .field-tiles{grid-template-columns:minmax(0,1fr);gap:16px}
  .field-tile{min-height:440px;padding:28px;border-radius:28px}
  .field-tile .service-art{padding:32px 0 48px}
  .field-more>span{right:20px;bottom:20px}
  .footer-sitemap{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
  .tags{gap:8px}
  .tags li{font-size:12px}
  .process-layout{gap:40px}
  .process-heading{display:block}
  .process-heading>p{max-width:36ch;margin-top:20px;padding:0;font-size:17px}
  .process-heading>.pill-link{margin-top:24px}
  .process-steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .process-step{min-height:0;padding:28px 24px}
  .step-num{font-size:56px}
  .step-copy{gap:12px}
  .process-step h3{font-size:24px}
  .step-copy>p{font-size:17px;line-height:1.65}
  .step-symbol{font-size:18px}
  .case-preview{gap:36px}
  .case-preview-category{margin-bottom:20px}
  .case-preview h2{font-size:clamp(32px,8.5vw,48px);line-height:1.28}
  .case-preview-description{margin-top:24px;font-size:17px}
  .case-preview-description br{display:none}
  .case-preview-visual{padding:24px 20px}
  .flow-heading{margin-bottom:24px}
  .flow-heading h3{font-size:22px}
  .flow-heading p{font-size:12px}
  .case-flow{gap:12px}
  .flow-node{display:flex;min-height:0;padding:24px 20px}
  .flow-step-label{margin-bottom:16px}
  .flow-file-icon{width:32px;height:32px;margin-bottom:16px;align-self:flex-start}
  .flow-axis-word{align-self:flex-start;font-size:36px;writing-mode:horizontal-tb;margin:4px 0 20px}
  .flow-axis-word>span{width:7px;height:7px}
  .flow-node h4{font-size:22px}
  .flow-node>p:not(.flow-step-label){margin:8px 0 20px;font-size:17px}
  .flow-node-status{margin-top:0}
  .flow-farms{display:flex;margin:16px 0}
  .flow-farms li{flex-wrap:nowrap;justify-content:space-between;padding:10px 12px;font-size:13px}
  .flow-farms li>span{font-size:12px}
  .flow-status{margin-top:16px;font-size:12px}
  .case-outcomes{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:32px}
  .case-outcomes article{padding-top:20px}
  .case-outcomes h3{margin-top:12px;font-size:24px}
  .case-outcomes p{font-size:17px}
  .crew-slogan{margin:0 0 48px}
  .crew-slogan-en{font-size:clamp(42px,10.6vw,78px);line-height:1.07;letter-spacing:-.055em}
  .crew-slogan-ko{max-width:28ch;margin-top:20px;font-size:17px}
  .team-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .team-copy h2{font-size:clamp(30px,8vw,44px)}
  .team-copy>p{margin-top:20px;font-size:17px}
  .team-signature{margin-top:28px}
  .crew-orbit{max-width:420px;margin-inline:auto}
  .crew-card{gap:8px}
  .crew-card svg{width:26px;height:26px}
  .crew-card strong{font-size:12px}
  .crew-core{gap:5px}
  .crew-core strong{font-size:clamp(32px,9vw,52px)}
  .crew-core>span{font-size:12px}
  .contact .section-top{align-items:flex-start}
  .contact-status{max-width:13ch;gap:8px;font-size:12px;line-height:1.6}
  .contact-status .status-dot{flex:none}
  .contact-main{margin-top:8px}
  .contact-pre{max-width:28ch;margin-bottom:24px;font-size:17px}
  .contact h2{font-size:clamp(38px,10.3vw,64px);line-height:1.2}
  .contact-bottom{gap:28px;margin-top:28px}
  .contact-bottom p{font-size:17px}
  .glass.contact-button{font-size:17px}
  .contact-note{max-width:36ch;font-size:12px}
  .site-footer{padding:28px var(--gutter) 20px}
  .footer-top{flex-wrap:wrap;gap:16px;padding-bottom:20px}
  .footer-top>p{order:3;width:100%}
  .footer-bottom{flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:16px}
  .intro-brand{width:min(58vw,300px)}
  .intro-brand>p{margin-top:23px;font-size:12px;letter-spacing:.12em}
  .intro-corner{bottom:30px;max-width:170px;font-size:12px;line-height:1.8}
  .intro-skip{bottom:23px;min-height:40px;font-size:12px}
  .dialog-inner,.case-dialog .dialog-inner{padding:24px}
  .inquiry-dialog{max-width:calc(100vw - 24px)}
  .inquiry-dialog .dialog-inner{padding:20px}
  .dialog-top{margin-bottom:24px}
  .dialog-inner>h2,.case-dialog .dialog-inner>h2{font-size:28px;line-height:1.4}
  .dialog-category{margin-bottom:14px;font-size:12px}
  .dialog-lead,.case-dialog .dialog-lead{margin-top:16px;font-size:17px;line-height:1.7}
  .case-demonstration{margin-top:24px;padding-top:24px}
  .form-notice{padding:16px;font-size:13px;line-height:1.7}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:380px){
  .hero h1{font-size:32px}
  .hero-actions{flex-direction:column;gap:12px}
  .hero-research-note{display:none}
  .intro-statement{font-size:28px}
  .step-num{font-size:48px}
  .process-step h3{font-size:22px}
  .crew-slogan-en{font-size:40px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* Motion preference: the footer toggle stores "off" and every moving part settles. */
:root.motion-reduced{scroll-behavior:auto}
:root.motion-reduced *,:root.motion-reduced *:before,:root.motion-reduced *:after{animation:none!important;transition:none!important}
:root.motion-reduced .motion-section,:root.motion-reduced [data-motion]{clip-path:none!important}
:root.motion-reduced.motion-ready .motion-section{opacity:1;transform:none;will-change:auto}
:root.motion-reduced.motion-ready .reveal{opacity:1;transform:none!important}
:root.motion-reduced .motion-line-inner{transform:none!important}
:root.motion-reduced.motion-ready .hero-content{opacity:1;transform:none}
:root.motion-reduced .hero-eyebrow,:root.motion-reduced .hero h1>span,:root.motion-reduced .hero-bottom-copy,:root.motion-reduced .hero-film-frame,:root.motion-reduced .hero-film-caption,:root.motion-reduced .hero-footer{opacity:1;transform:none;scale:none}
:root.motion-reduced .intro-brand{transform:none!important}
:root.motion-reduced .sequence-ready .flow-node,:root.motion-reduced .sequence-ready .flow-farms li{transform:none}
:root.motion-reduced.js .section-top:after{transform:none}
:root.motion-reduced.js .crew-orbit .crew-orbit-track{stroke-dashoffset:0}
:root.motion-reduced.js .crew-orbit .crew-orbit-inner,:root.motion-reduced.js .crew-orbit .crew-core,:root.motion-reduced.js .crew-orbit .crew-card{opacity:1;transform:none!important}
:root.motion-reduced.motion-ready .reference-axis .axis-draw{stroke-dashoffset:0}
:root.motion-reduced.motion-ready .reference-axis rect{opacity:1;transform:none}
:root.motion-reduced.motion-ready .crew-orbit-inner,:root.motion-reduced.motion-ready .process-glyph{transform:none}

:root.motion-reduced .sequence-ready .flow-node,:root.motion-reduced .sequence-ready .flow-arrow,:root.motion-reduced .sequence-ready .flow-farms li{opacity:1!important;visibility:visible!important}
:root.motion-reduced .sequence-ready .flow-arrow path{stroke-dashoffset:0}

/* Inquiry transport: keep the native form and accessible status region. */
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-submit:disabled{opacity:.6;cursor:wait}
.form-message{overflow-wrap:anywhere}

/* Inquiry status stays within the contact chapter; public rows are plain text. */
.inquiry-tabs{display:flex;gap:4px;width:fit-content;max-width:100%;margin:16px auto 24px;padding:4px;border-radius:980px;background:var(--surface)}
.inquiry-tabs button{min-height:44px;padding:10px 24px;border:0;border-radius:980px;background:transparent;color:var(--secondary);font-size:15px;line-height:1.5}
.inquiry-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.inquiry-status-panel{width:100%;max-width:var(--wide);margin-inline:auto;padding:clamp(24px,5vw,64px);border-radius:28px;background:var(--surface)}
.inquiry-status-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.inquiry-status-heading h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em;line-height:1.25}
.inquiry-status-heading p{max-width:54ch;margin-top:12px;color:var(--secondary);font-size:15px;line-height:1.75;word-break:keep-all}
.inquiry-status-control{flex:none;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:980px;background:var(--paper);color:var(--ink);font-size:14px;line-height:1.5}
.inquiry-status-control:disabled{color:var(--secondary);background:transparent;cursor:default}
.inquiry-status-message{min-height:24px;margin:32px 0 12px;color:var(--secondary);font-size:14px;line-height:1.7}
.public-inquiry-list{padding:0;list-style:none}
.public-inquiry-list li{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;padding:20px 0;border-top:1px solid var(--line)}
.public-inquiry-title{min-width:0;font-size:17px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.inquiry-status-badge{display:inline-flex;flex:none;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:980px;color:var(--secondary);font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap}
.inquiry-status-badge.is-done{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.inquiry-status-pager{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px;font-size:14px;color:var(--secondary)}
.inquiry-title-note{margin-top:8px;color:var(--secondary);font-size:12px;line-height:1.7}
.inquiry-success{padding:40px 0 8px;text-align:center}
.inquiry-success-mark{width:56px;height:56px;margin:0 auto 24px;color:var(--ink)}
.inquiry-success h3{font-size:32px;font-weight:700;line-height:1.3;letter-spacing:-.04em}
.inquiry-success>p{max-width:46ch;margin:16px auto 28px;color:var(--secondary);font-size:17px;line-height:1.75;word-break:keep-all}
.inquiry-receipt{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px;border-radius:28px;background:var(--surface);text-align:left}
.inquiry-receipt strong{min-width:0;font-size:17px;font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.inquiry-success-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.inquiry-success-actions .form-submit{margin:0}
@media(max-width:760px){
  .inquiry-tabs button{padding-inline:20px}
  .inquiry-status-heading{flex-direction:column;gap:20px}
  .public-inquiry-list li{gap:12px}
  .inquiry-status-badge{padding:6px 10px}
  .inquiry-receipt{padding:20px;gap:12px}
  .inquiry-success-actions{flex-direction:column;align-items:stretch}
}