/* ==========================================================================
   AROA shared shell
   Structure ported from zip-up.net (measured), IA cues from awesomeent.kr.
   ========================================================================== */
:root{
  --bg:#000;
  --surface:#0d0d0d;       /* recessed panels sit below the page */
  --fg:#fff;
  --sub:#bdbdbd;
  --meta:#8d8d8d;
  --line:#1e1e1e;
  --dim:#3a3a3a;           /* placeholder text */
  --accent:#d49349;        /* sampled from BI/LOGO_Main_오렌지.png */
  --col:980px;
  --gutter:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* Korean must not break mid-word. This keeps long names intact. */
  word-break:keep-all;
  overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
img,video{
  display:block;max-width:100%;
  -webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;
}

.wrap{width:min(var(--col),calc(100% - 48px));margin-inline:auto}

/* ---------- HEADER : 120px fixed, transparent ---------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;height:120px;
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0));
  backdrop-filter:blur(2px);
}
/* header runs wider than the content column: logo stays on the column's
   left edge, nav is free to reach toward the right viewport edge */
.site-header .wrap{
  width:100%;margin:0;display:flex;align-items:center;gap:32px;
  padding-left:max(24px,calc((100% - var(--col)) / 2));
  padding-right:24px;
}
/* Header lockup: mark + wordmark sit together inside one fully rounded bar,
   the way the reference sets its wordmark inside a stadium outline. */
.brandmark{display:flex;align-items:center;flex-shrink:0}
.lockup{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 19px;
  background:var(--accent);border-radius:999px;
  transition:filter .18s ease;
}
/* the wordmark is keyed out of the BI plate, so the pill shows through it */
.lockup img{height:17px;width:auto;display:block}
.brandmark:hover .lockup{filter:brightness(1.08)}
.gnb{display:flex;align-items:center;gap:0 4px;margin-left:auto}
.gnb a{
  font-size:13px;font-weight:500;letter-spacing:.05em;
  padding:8px 6px;color:var(--fg);white-space:nowrap;
  transition:color .18s ease;
}
/* nav reads as three groups: brand pages / work fields / contact */
.gnb-sep{flex:none;width:1px;height:11px;background:#3a3a3a;margin:0 11px}
.gnb a:hover{color:var(--accent)}
.gnb a[aria-current="page"]{color:var(--accent)}
.nav-toggle{display:none}

/* ---------- BILINGUAL STATEMENT, framed as a prompt and its answer ----------
   Two stacked surfaces: what was asked, then what AROA answered. The type runs
   one size throughout so the card reads as generated output, not a headline. */
/* the prompt sits left, the brand mark holds the right of the row */
.statement-row{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.statement-mark{width:210px;height:auto;flex:none}
.ask{max-width:760px}
.ask-in{
  display:flex;align-items:center;gap:13px;
  padding:15px 15px 15px 20px;border-radius:18px;
  background:#0b0b0b;border:1px solid var(--line);
}
.ask-caret{flex:none;width:2px;height:17px;border-radius:1px;background:var(--accent)}
.ask-q{flex:1;min-height:1.2em;font-size:15px;letter-spacing:-.005em;color:rgba(255,255,255,.9)}
.ask-send{
  flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--accent);
}
.ask-send svg{width:14px;height:14px;display:block}

/* the answer's space is held from the start, so nothing below ever moves;
   the card itself only appears once it has something to say */
.ask-stage{position:relative;margin-top:12px}
.ask-out{padding:24px 26px 26px;border-radius:18px;background:#121212}
.ask.is-armed .ask-out{opacity:0}
.ask.is-armed.is-streaming .ask-out,.ask.is-armed.is-done .ask-out{opacity:1;transition:opacity .22s ease}
.ans-kr{font-size:17.5px;font-weight:600;line-height:1.75;letter-spacing:-.012em}
.ans-en{margin-top:11px;font-size:13.5px;font-weight:400;line-height:1.7;color:var(--sub)}
.ask-cursor{
  display:inline-block;width:2.5px;height:.8em;margin-left:5px;vertical-align:-1px;
  background:var(--accent);border-radius:1px;animation:ask-blink 1.2s steps(1,end) infinite;
}
@keyframes ask-blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* while it thinks, three dots stand alone where the first line will land */
.ask-dots{position:absolute;left:26px;top:26px;display:none;gap:5px;align-items:center;height:1.2em}
.ask.is-thinking .ask-dots{display:flex}
.ask-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:ask-dot 1s ease-in-out infinite;
}
.ask-dots i:nth-child(2){animation-delay:.14s}
.ask-dots i:nth-child(3){animation-delay:.28s}
@keyframes ask-dot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* only while the script drives it: nothing is hidden if the script never runs */
.ask.is-armed .ans-en{opacity:0}
.ask.is-armed.is-done .ans-en{opacity:1;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){
  .ask-cursor{animation:none}
  .ask-dots i{animation:none}
}

/* body text, split left (KR) / right (EN) */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.cols p{font-size:16px;line-height:1.8}
.cols p + p{margin-top:20px}
.cols .en{color:var(--sub);font-size:15px;line-height:1.75}
.cols .close{font-size:19px;line-height:1.65;font-weight:600}
.cols .en .close{color:var(--fg);font-size:16px;font-weight:600}

/* "read more" link */
.more{
  display:inline-flex;align-items:center;gap:9px;margin-top:38px;
  font-size:14px;letter-spacing:.06em;color:var(--fg);
  padding-bottom:5px;border-bottom:1px solid #3a3a3a;
  transition:color .18s ease,border-color .18s ease;
}
.more::after{content:"→";transition:translate .18s ease}
.more:hover{color:var(--accent);border-color:var(--accent)}
.more:hover::after{translate:4px 0}

/* ---------- HOME HERO ---------- */
.hero{padding-top:120px}
.hero-media{position:relative;width:100%;aspect-ratio:2.5/1;overflow:hidden;background:var(--surface)}
.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.82) 100%);
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 24px 46px max(24px,calc((100% - var(--col)) / 2));
}
.hc-title{font-size:clamp(44px,5.2vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1}
/* the lockup scales with the canvas; the copy beside it stays at reading size */
.hc-title .lockup{height:clamp(56px,4.6vw,92px);padding:0 clamp(26px,2.1vw,42px)}
.hc-title .lockup img{height:clamp(24px,2vw,40px)}
/* brand lockup left, copy right, both sitting on the same baseline */
.hero-copy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 60px;align-items:end}
.hc-text{padding-bottom:4px;max-width:560px}
/* same lockup as the WHY page hero: mark → role → BY endorsement */
.hc-role{
  margin-top:clamp(14px,1.25vw,22px);font-size:clamp(21px,1.65vw,30px);
  font-weight:600;line-height:1.35;letter-spacing:-.01em;color:#fff;
}
.hc-by{
  margin-top:clamp(11px,1vw,18px);display:flex;align-items:center;gap:clamp(12px,.95vw,18px);
  font-size:clamp(12px,.85vw,15px);letter-spacing:.14em;color:rgba(255,255,255,.62);
}
.hc-by img{height:clamp(24px,2vw,38px);width:auto;display:block;opacity:.94}
.hc-lead{font-size:18px;font-weight:600;letter-spacing:-.005em;color:#fff}
.hc-body{margin-top:10px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.72)}
.hc-body b{font-weight:700;color:#fff}

/* ---------- HOME : who we are ---------- */
.home-statement{margin-top:56px;padding:56px 0 64px;border-top:1px solid var(--line)}

/* ---------- HOME : channels AWESOME built itself ---------- */
.channels{padding:0 0 30px}
.channels-label{
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);
  font-size:13px;letter-spacing:.04em;color:var(--sub);
}

.channel-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter);list-style:none}
.channel-row a{display:block}
.ch-thumb{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--surface)}
.ch-thumb img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) brightness(.82);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease;
}
.channel-row a:hover .ch-thumb img{transform:scale(1.05);filter:grayscale(0) brightness(1)}
.ch-name{display:block;margin-top:12px;font-size:16px;font-weight:700;line-height:1.35}
.ch-meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-top:5px;font-size:12px;color:var(--meta);
}
.ch-meta b{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.channels-note{margin-top:18px;font-size:12px;color:var(--dim)}

/* ---------- WORKSPACE : studios and office ---------- */
.ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px var(--gutter)}
.ws-grid figure{margin:0}
.ws-grid img{
  width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface);
  filter:grayscale(.35) brightness(.9);transition:filter .4s ease;
}
.ws-grid figure:hover img{filter:grayscale(0) brightness(1)}
.ws-grid figcaption{margin-top:11px;font-size:15px;font-weight:600}

/* MEET AROA: what else the team takes on */
.scope{margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}
.scope-lead{font-size:14px;color:var(--meta);margin-bottom:24px}
.scope-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px var(--gutter)}
.scope-cols h4{font-size:17px;font-weight:700;line-height:1.3}
.scope-cols h4 span{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--meta)}
.scope-cols ul{list-style:none;margin-top:14px}
.scope-cols li{
  display:flex;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);font-size:14px;
}
.scope-cols li b{font-weight:600;white-space:nowrap}
.scope-cols li span{color:var(--sub);text-align:right}

/* ---------- HOME : what AROA is ---------- */
.home-about{padding:70px 0 88px;border-top:1px solid var(--line)}
.home-about .cols{margin-top:8px}
.home-about .cols p{font-size:16px;line-height:1.85}
.home-about .cols .close{margin-top:26px}

/* ---------- HOME SERVICE DIRECTORY ---------- */
.service-directory{padding:8px 0 96px;border-top:1px solid var(--line)}
.directory-head{text-align:center;padding:54px 0 42px}
.directory-head h2{margin-top:16px;font-size:50px;line-height:1.12;letter-spacing:-.04em;font-weight:750}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service-link{position:relative;min-height:340px;padding:28px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.service-link::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.92));transition:background .35s ease}
.service-link img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.48);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.service-link:hover img{transform:scale(1.04);filter:grayscale(.15) brightness(.68)}
.service-no{position:absolute;left:28px;top:24px;font-size:12px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.service-grid .service-link:nth-child(1) img{object-position:88% 50%}
.service-grid .service-link:nth-child(3) img{object-position:50% 66%}
.service-link h3{font-size:30px;line-height:1.05;letter-spacing:-.02em}
.service-link p{margin-top:8px;font-size:12px;letter-spacing:.13em;color:var(--sub)}
.service-link i{position:absolute;right:28px;bottom:30px;font-size:11px;font-style:normal;letter-spacing:.13em;color:var(--accent)}


/* ---------- SECTION ---------- */
/* anchor jumps must clear the 120px fixed header */
[id]{scroll-margin-top:150px}
/* category pages have no hero, so they clear the fixed header themselves */
.work-page{padding-top:190px}
.sec{padding-bottom:84px}
.sec-head{margin-bottom:26px}
.sec-head h2{font-size:45px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--accent)}
.sec-head .sub{margin-top:6px;font-size:15px;color:var(--sub)}
.sec-note{max-width:660px;margin:0 0 30px;font-size:15px;line-height:1.75;color:var(--sub)}
.sec-note strong{color:var(--fg);font-weight:600}

/* ---------- WORK GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px var(--gutter)}

.item{display:block}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface);border:1px solid transparent}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb video{opacity:0;transition:opacity .35s ease}
.item:hover .thumb video{opacity:1}
.thumb .play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  display:grid;place-items:center;
  transition:opacity .25s ease,background .25s ease;
}
.thumb .play::after{
  content:"";border-left:11px solid #fff;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  margin-left:3px;
}
.item:hover .play{opacity:0}
.thumb .dur{
  position:absolute;right:10px;bottom:8px;
  font-size:12px;letter-spacing:.06em;color:var(--sub);
  font-variant-numeric:tabular-nums;
}

.cap{padding-top:12px}
.cap .brand{font-size:24px;font-weight:700;line-height:1.34}
.cap .line{margin-top:3px;font-size:16px;line-height:1.34;color:var(--sub)}
.cap .tag{display:inline-block;margin-top:6px;font-size:12px;letter-spacing:.08em;color:var(--accent)}

/* empty slot */
/* vertical work tiles (9:16 fields) */
.grid.vgrid{grid-template-columns:repeat(4,1fr)}
.item.vert .thumb{aspect-ratio:9/16}

/* click-to-play lightbox */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.93);padding:48px;cursor:zoom-out}
.lightbox video{max-width:min(1080px,90vw);max-height:82vh;width:auto;height:auto;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.65);cursor:auto}
.lb-close{position:fixed;top:16px;right:22px;z-index:2;padding:6px;font-size:30px;line-height:1;color:#fff;background:none;border:0;cursor:pointer;opacity:.65}
.lb-close:hover{opacity:1}

.item.slot .thumb{border:1px solid var(--line);background:transparent;display:grid;place-items:center}
.item.slot .thumb::after{content:"TBD";font-size:12px;letter-spacing:.18em;color:var(--dim)}
.item.slot .cap .brand{color:var(--dim)}
.item.slot .cap .line{color:#2c2c2c}

/* ---------- CREATOR ROW ---------- */
.creators{display:grid;grid-template-columns:repeat(2,1fr);gap:44px var(--gutter)}
.creator-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.creator-head img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.creator-head .h{font-size:20px;font-weight:700;line-height:1.3}
.creator-head .m{font-size:14px;color:var(--sub);margin-top:2px}
.creator-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.shot{position:relative;display:block;overflow:hidden;background:var(--surface)}
.shot img{width:100%;aspect-ratio:9/16;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{transform:scale(1.03)}
.shot::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
}
.shot-view{
  position:absolute;left:9px;bottom:8px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.shot-view svg{width:12px;height:12px;opacity:.85}

/* ==========================================================================
   MEET AROA
   ========================================================================== */

/* page hero: full-bleed brand film, wordmark lockup over it */
/* The BI plate is a light orange artwork carrying its own wordmark, so the
   container matches its 16:9 ratio (nothing is cropped on wide screens) and
   the scrim only darkens the top strip and the empty area under the moth. */
/* width must be pinned: with min-height set, aspect-ratio would otherwise
   inflate the *width* (520 x 16/9 = 924px) and push the page sideways */
.page-hero{
  position:relative;width:100%;max-width:100%;
  aspect-ratio:16/9;min-height:520px;
  display:flex;align-items:flex-end;overflow:hidden;background:var(--surface);
}
.page-hero .bg{position:absolute;inset:0}
.page-hero .bg video,.page-hero .bg img{width:100%;height:100%;object-fit:cover}
.page-hero .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 16%,
    rgba(0,0,0,0) 40%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.88) 100%);
}
.page-hero .wrap{position:relative;padding-bottom:72px;padding-top:180px}
/* the plate is amber, so the pill inverts: white fill, amber wordmark */
.page-hero h1{line-height:0}
.page-hero h1 .lockup{height:84px;padding:0 32px;background:#fff}
.page-hero h1 .lockup img{height:36px}
.page-hero .role{margin-top:16px;font-size:24px;font-weight:600;line-height:1.35}
.page-hero .by{
  margin-top:22px;display:flex;align-items:center;gap:12px;
  font-size:13px;letter-spacing:.14em;color:var(--sub);
}
/* the wordmark carries the company name on its own, "BY" is the only text */
.page-hero .by img{height:32px;width:auto;opacity:.92}

/* One section-title treatment across the site:
   WHY AROA? / CAPABILITY / MEET AROA all read the same. */
.manifesto>h2,.caps h2,.home-about>h2{
  font-size:45px;font-weight:800;line-height:1.2;letter-spacing:-.01em;
  color:var(--accent);margin-bottom:8px;
}
.manifesto>.sub,.caps .sub,.home-about>.sub{
  font-size:15px;line-height:1.6;color:var(--sub);margin-bottom:34px;
}



/* WHY AROA editorial reasons */
.manifesto{border-top:1px solid var(--line);padding:84px 0}

/* one continuous statement, no numbered blocks */
.why-body{border-top:1px solid var(--line);padding-top:40px}
/* the authored line breaks need 772px at most; cap the measure so the reflow
   below that breakpoint never runs the full column width */
.why-text{max-width:790px}
@media (max-width:820px){ .why-text p br{display:none} }
.why-media{margin-top:48px}
.why-media video{display:block;width:min(520px,100%);margin:0 auto;aspect-ratio:16/9;background:var(--surface)}
.why-body p{font-size:16px;line-height:1.9}
.why-body p + p{margin-top:24px}
.why-body em{font-style:normal;color:var(--accent)}
.why-body .en{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);columns:2;column-gap:64px}
.why-body .en p{font-size:13.5px;line-height:1.8;color:var(--meta);break-inside:avoid}
.why-body .en p + p{margin-top:14px}

/* A-Studio pipeline diagram */
.astudio-diagram{margin:4px 0 10px;padding-top:26px}
.astudio-diagram figcaption{
  font-size:11px;letter-spacing:.2em;color:var(--meta);margin-bottom:14px;
}
.diagram-scroll{overflow-x:auto;overflow-y:hidden}
.astudio-diagram svg{display:block;width:100%;min-width:820px;height:auto}
.diagram-note{margin-top:14px;font-size:13px;line-height:1.7;color:var(--meta)}

/* Capability list with hairline rows */
.caps{border-top:1px solid var(--line);padding:76px 0}
.cap-row{
  display:grid;grid-template-columns:220px 1fr;gap:24px var(--gutter);
  padding:26px 0;border-top:1px solid var(--line);
}
.cap-row:last-child{border-bottom:1px solid var(--line)}
.cap-row dt{font-size:24px;font-weight:700;line-height:1.3}
.cap-row dt .en{display:block;margin-top:4px;font-size:12px;letter-spacing:.14em;color:var(--meta);font-weight:400}
.cap-row dd{font-size:16px;line-height:1.8;color:var(--sub)}

/* closing */
.closing{
  position:relative;border-top:1px solid var(--line);
  padding:150px 0 160px;overflow:hidden;text-align:center;
}
.closing .moth{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(760px,94%);opacity:.22;pointer-events:none;
}
.closing .l1{position:relative;font-size:46px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.closing .l2{position:relative;margin-top:6px;font-size:46px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--accent)}
.closing .l3{position:relative;margin-top:30px;font-size:15px;letter-spacing:.5em;color:var(--sub)}

/* ---------- FOOTER : carries the full site map ---------- */
.site-footer{border-top:1px solid var(--line);padding:54px 0 60px}
.foot-tag{font-size:14px;color:var(--meta);letter-spacing:.02em;margin-bottom:38px}
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1.15fr 1.15fr;gap:32px var(--gutter)}
.foot-cols h3{
  font-size:12px;font-weight:400;color:var(--meta);
  letter-spacing:.16em;margin-bottom:14px;
}
.foot-cols li{list-style:none;font-size:13px;line-height:1.95}
.foot-cols li.role{color:var(--meta);margin-top:14px;line-height:1.6}
.foot-cols li:first-child.role{margin-top:0}
.foot-cols a{color:var(--sub);transition:color .18s ease}
.foot-cols a:hover{color:var(--accent)}
.foot-cols .val{color:var(--fg)}
.foot-cols .val a{color:var(--fg)}
.foot-bottom{
  margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--dim);letter-spacing:.03em;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .site-header .wrap{gap:24px}
  .page-hero h1{font-size:72px}
  .ans-kr{font-size:17px}
  .service-link h3{font-size:32px}
}
/* seven nav items measure 601px + 125px logo + gaps; below ~806px they are
   clipped, so the menu collapses here with margin to spare */
/* eight nav items + pill lockup need about 960px; collapse with margin to spare */
@media (max-width:1000px){
  .why-media{margin-top:36px}
  .why-body .en{columns:1}
  .nav-toggle{
    display:block;margin-left:auto;background:none;border:0;color:#fff;
    font:inherit;font-size:13px;letter-spacing:.12em;cursor:pointer;padding:8px;
  }
  .gnb{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);border-top:1px solid var(--line);
    padding:8px max(24px,calc((100% - var(--col)) / 2)) 20px;
    display:none;
  }
  .gnb.open{display:flex}
  .gnb a{width:100%;padding:11px 0;font-size:15px}
  /* in the dropdown the group dividers become full-width rules */
  .gnb-sep{width:100%;height:1px;margin:9px 0;background:var(--line)}
}
@media (max-width:880px){
  .site-header{height:88px}
  [id]{scroll-margin-top:110px}
  .why-body p{font-size:17px}
  .hero{padding-top:88px}
  .sec-head h2,.manifesto h2,.caps h2{font-size:34px}
  .cols{grid-template-columns:1fr;gap:34px}
  .statement-row{grid-template-columns:1fr;gap:30px;justify-items:start}
  .statement-mark{width:150px}
  .ans-kr{font-size:16.5px}
  .ans-en{font-size:13px}
      .channel-row{grid-template-columns:repeat(3,1fr)}
  .ask-out{padding:22px 22px 24px}
  .ask{width:100%}
  .home-about{padding:60px 0 72px}
  .directory-head h2{font-size:38px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.vgrid{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:repeat(2,1fr);gap:32px var(--gutter)}
  .page-hero{min-height:520px}
  .page-hero .wrap{padding-top:140px;padding-bottom:56px}
  .page-hero h1 .lockup{height:70px;padding:0 27px}
  .page-hero h1 .lockup img{height:30px}
  .page-hero .role{font-size:20px}
  .directory-head{grid-template-columns:1fr;gap:18px}
  .directory-head h2{font-size:40px}
  .service-link{min-height:310px}
  .cap-row{grid-template-columns:1fr;gap:10px}
  .closing .l1,.closing .l2{font-size:34px}
  .creator-profile-reverse .creator-identity{order:1}.creator-profile-reverse .creator-gallery{order:2}
}
@media (max-width:620px){
  .grid,.creators{grid-template-columns:1fr}
  .grid.vgrid{grid-template-columns:repeat(2,1fr)}
  .lightbox{padding:16px}
  .home-about .cols p br,.cap-row dd br,.sec-note br,.diagram-note br{display:none}
  .hc-body{display:none}
  .hero-copy{grid-template-columns:1fr;gap:16px}
  .hc-text{padding-bottom:0}
  .hc-lead{font-size:14px}
  .hc-role{margin-top:12px;font-size:16px}
  .hc-by{margin-top:10px;gap:9px;font-size:11px}
  .hc-by img{height:20px}
  .hc-title{font-size:34px}
  .hc-title .lockup{height:46px;padding:0 21px}
  .hc-title .lockup img{height:20px}
  .hero-copy{padding-bottom:24px}
  .creators{gap:34px}
  .hero-media{aspect-ratio:16/9}
  .cap .brand{font-size:20px}
  .page-hero h1 .lockup{height:56px;padding:0 22px}
  .page-hero h1 .lockup img{height:24px}
  .ans-kr{font-size:15.5px}
  .ans-en{font-size:12.5px}
  .ask-q{font-size:14px}
  .ans-kr br,.ans-en br{display:none}
  .channel-row{grid-template-columns:repeat(2,1fr)}
  .ws-grid{grid-template-columns:1fr}
  .scope-cols{grid-template-columns:1fr}
  .ask-out{padding:20px 18px 22px;border-radius:16px}
  .ask-in{padding:13px 13px 13px 17px;border-radius:16px}
  .statement-mark{width:118px}
  .directory-head h2{font-size:30px}
    .manifesto,.caps{padding:56px 0}
  .why-body p{font-size:16px}
  .page-hero{aspect-ratio:auto;min-height:420px}
  /* Let authored line breaks flow naturally on narrow screens.
     The statement keeps its breaks: the lead-in span relies on them to stay
     on its own line, and removing them would run "AROA는" into the next word. */
  .service-directory{padding-bottom:70px}
  .service-grid{grid-template-columns:1fr}
  .service-link{min-height:250px;padding:22px}
  .service-no{left:22px;top:20px}
  .service-link h3{font-size:30px}
  .service-link i{right:22px;bottom:24px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .closing{padding:80px 0 90px}
  .closing .l1,.closing .l2{font-size:26px}
  .closing .l3{letter-spacing:.36em}
}