/* A shared reading and interaction layer, grounded in the existing identity. */
:root { --detail-ink:#302440; --detail-muted:#665e70; --detail-line:#dcd6e4; --detail-accent:#634f9d; --ease-out:cubic-bezier(.22,1,.36,1); }
body:not(.page-home) { color:var(--detail-ink); }
body:not(.page-home) .site-header { position:sticky; top:0; background:rgba(247,248,250,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.site-header::after { content:""; position:absolute; height:2px; bottom:-1px; inset-inline:0; background:var(--detail-accent); transform:scaleX(var(--reading-progress,0)); transform-origin:left; pointer-events:none; }
.page-home .site-header::after { display:none; }
.desktop-nav a::after { content:""; position:absolute; bottom:4px; left:0; right:0; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease-out); }
.desktop-nav a:hover::after,.desktop-nav a[aria-current]::after { transform:scaleX(1); }
.button,.text-link { transition:background .22s,color .22s,border-color .22s,transform .3s var(--ease-out); }
.button svg,.text-link svg,.case-link svg { transition:transform .3s var(--ease-out); }
.button:hover svg,.text-link:hover svg,.case-link:hover svg { transform:translateX(4px); }
.button:active { transform:translateY(0) scale(.98); }
.text-link:hover { color:var(--detail-accent); }
.mobile-menu:not([hidden]) { animation:menu-arrive .28s var(--ease-out); }
@keyframes menu-arrive { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }

/* Work is the visual evidence. Cards pair each screen closely with its caption. */
.work-image { border-radius:16px; background:#e9e6ee; outline:1px solid #3024400b; outline-offset:-1px; }
.work-image>img { transition:transform .75s var(--ease-out),filter .6s; }
.work-image:hover>img,.work-card:focus-within .work-image>img { transform:scale(1.025); }
.work-card:focus-within .work-open { opacity:1; transform:none; }
.work-caption { padding-top:16px; }
.work-caption h3 { font-family:Pretendard,sans-serif; font-size:25px; font-weight:700; letter-spacing:-.035em; }
.work-description { line-height:1.75; color:var(--detail-muted); }
.work-category { margin-bottom:4px; }
.work-year { border:1px solid var(--detail-line); border-radius:20px; padding:3px 9px; height:fit-content; font-variant-numeric:tabular-nums; }
.work-year:empty { display:none; }
.work-open { bottom:16px; right:16px; padding:11px 17px; box-shadow:0 4px 18px #3024400d; }
.archive-intro { display:grid; grid-template-columns:1.15fr .85fr; column-gap:64px; align-items:end; padding-block:72px 52px; }
.archive-intro>.eyebrow { grid-column:1/-1; margin-bottom:24px; }
.archive-intro h1 { font-size:clamp(38px,4.15vw,60px); }
.archive-intro .section-lead { margin:0 0 6px; font-size:17px; line-height:1.8; }
.page-works .industry-explore { width:fit-content; font-size:14px; margin-top:0; margin-bottom:28px; }
.work-filter { gap:20px; padding-block:16px; border-color:var(--detail-line); }
.filter-button { padding-inline:15px; transition:background .2s,color .2s; }
.filter-button.is-active { background:var(--detail-ink); }
.work-search { background:white; border:1px solid var(--detail-line); border-radius:28px; padding-left:18px; }
.work-search:focus-within { border-color:var(--detail-accent); }
.work-search input:focus { outline:none; }
.archive-count { padding-block:24px; font-variant-numeric:tabular-nums; }
.archive-grid { gap:44px 28px; }
.pagination .button { min-height:50px; font-size:14px; }
@media(min-width:1101px) {
  .page-home .selected-grid { column-gap:40px; row-gap:64px; }
  .page-home .selected-grid .work-card:nth-child(even) { margin-top:72px; }
  .page-home .selected-grid .work-card:nth-child(odd) { margin-bottom:72px; }
  .page-home .selected-grid { align-items:start; }
}

/* FAQs keep a short question row, then reveal its answer in place. */
.faq-list details { border-color:var(--detail-line); transition:background .24s; }
.faq-list summary { padding:24px 16px; font-family:Pretendard,sans-serif; font-size:18px; letter-spacing:-.025em; border-radius:8px; }
.faq-list summary:hover { background:#634f9d08; }
.faq-list summary>span:last-child:not(.copy-text) { width:32px; height:32px; flex:0 0 32px; border:1px solid var(--detail-line); border-radius:50%; display:grid; place-items:center; font-size:22px; }
.faq-list details[open] { background:#634f9d05; }
.faq-list details>p { padding:0 56px 28px 16px; }
.faq-list details[open]>p { animation:answer-arrive .3s var(--ease-out); }
@keyframes answer-arrive { from { opacity:.5; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.faq-list summary.copy-lines>.copy-text { max-inline-size:none; }

/* Reading pages: a narrow rail and a deliberate content column. */
.content-page { max-width:1184px; }
.content-intro { position:relative; max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:0 56px; padding-bottom:40px; margin-bottom:48px; border-bottom:1px solid var(--detail-line); }
.content-intro>.eyebrow,.content-intro>h1,.content-intro>.content-byline,.content-intro>.content-actions,.content-intro>.case-guide-links { grid-column:1/-1; }
.content-intro>.content-answer { grid-column:1; }
.content-intro>.section-lead { grid-column:2; margin-top:0; }
.content-intro>.button { grid-column:1/-1; justify-self:start; }
.content-intro h1 { max-width:100%; }
.content-intro .content-answer { font-size:24px; line-height:1.65; }
.content-intro .section-lead { font-size:18px; line-height:1.8; }
.content-layout { grid-template-columns:220px minmax(0,1fr); gap:64px; }
.content-layout>* { min-width:0; }
.content-case { min-width:0; }
.content-case>img { height:auto; }
.case-name.copy-prose .copy-text>.copy-line,.local-districts .copy-prose .copy-text>.copy-line,.project-meta .copy-prose .copy-text>.copy-line { text-wrap:balance; }
.content-toc { top:128px; border-top:1px solid var(--detail-line); padding-top:16px; }
.content-toc>a { width:100%; padding:10px 14px; border-radius:8px; transition:color .2s,background .2s; }
.content-toc>a:hover,.content-toc>a[aria-current="location"] { background:#eae5f0; color:#493266; }
.content-toc>p { padding-inline:14px; }
.content-body h2 { font-size:32px; }
.content-body p,.content-checklist li { line-height:1.8; }
.content-body>section { margin-bottom:36px; padding-bottom:36px; }
.content-next { border-radius:20px; padding:36px; }
.content-checklist li { padding-block:20px; }
.guide-card { border-top:1px solid var(--detail-line); padding-top:26px; }
.guide-card h3 { font-family:Pretendard,sans-serif; font-weight:700; font-size:26px; }
.guide-card .text-link { margin-top:16px; }
.service-row { grid-template-columns:minmax(200px,.75fr) minmax(0,1.25fr); gap:40px; }
.service-row h3 { font-family:Pretendard,sans-serif; font-size:28px; }
.service-process { gap:28px; }
.industry-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.industry-entry { display:block; padding-block:30px 36px; }
.industry-entry h2 { font-family:Pretendard,sans-serif; font-size:26px; margin-bottom:16px; }
.industry-entry h2 a { display:flex; justify-content:space-between; gap:16px; }
.industry-entry h2 a svg { transition:transform .3s var(--ease-out); }
.industry-entry h2 a:hover svg { transform:translateX(5px); }
.industry-entry p { color:var(--detail-muted); }
.industry-section { padding-top:0; }
.case-link { padding-inline:12px; transition:background .2s; }
.case-link:hover { background:#634f9d07; }
.case-link strong { font-size:19px; }
.content-table { border-radius:0; font-size:17px; }

/* Project detail: image first, then context; every screen can be inspected. */
.project-intro { padding-block:32px 42px; display:grid; grid-template-columns:1.2fr .8fr; gap:0 64px; }
.project-intro>.content-breadcrumb,.project-intro>.project-category { grid-column:1/-1; }
.project-intro>h1,.project-intro>.project-lead,.project-intro>.project-summary { grid-column:1; }
.project-intro .content-breadcrumb { margin-bottom:28px; }
.project-category { margin-top:0; margin-bottom:20px; }
.project-intro h1 { max-width:100%; font-size:clamp(38px,4.6vw,68px); }
.project-lead { font-size:22px; margin-top:16px; }
.project-summary { font-size:17px; line-height:1.8; }
.project-meta { grid-column:2; grid-row:3/7; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border-top:0; border-left:1px solid var(--detail-line); padding:0 0 0 40px; margin:0; gap:24px; }
.project-meta p { line-height:1.65; }
.case-shortcuts { border-top:0; gap:8px 30px; margin-bottom:24px; }
.case-shortcuts a { position:relative; }
.case-shortcuts a[aria-current="location"] { color:var(--detail-accent); }
.project-images { background:#eeeaf2; padding-block:32px 48px; scroll-margin-top:120px; }
.project-images figure { margin-bottom:32px; }
.project-image-zoom { display:block; position:relative; width:fit-content; max-width:100%; margin:auto; cursor:zoom-in; border-radius:12px; overflow:hidden; }
.project-image-zoom img { background:white; }
.image-zoom-label { position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:20px; padding:10px 16px; color:var(--detail-ink); background:rgba(255,255,255,.95); border-radius:30px; font-size:13px; font-weight:600; opacity:0; transform:translateY(8px); transition:opacity .2s,transform .3s var(--ease-out); pointer-events:none; }
.image-zoom-label>span { font-size:20px; font-weight:400; }
.project-image-zoom:hover .image-zoom-label,.project-image-zoom:focus-visible .image-zoom-label { opacity:1; transform:none; }
.case-story { grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); gap:48px; padding-block:64px; }
.case-story h2,.case-questions h2,.case-related h2 { font-family:Pretendard,sans-serif; font-weight:700; font-size:30px; }
.case-story>div:last-child { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; align-content:start; }
.case-story>div:last-child>p:first-child { grid-row:1/4; }
.case-story h3 { margin:0 0 12px; font-family:Pretendard,sans-serif; font-size:19px; }
.case-story .text-link { font-size:14px; }
.case-questions { padding-top:52px; }
.case-faq { max-width:none; }
.case-related { border-top:1px solid var(--detail-line); padding-block:48px 64px; }
.image-viewer { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; color:white; background:#19141f; }
.image-viewer::backdrop { background:#19141feb; }
.image-viewer[open] { display:flex; flex-direction:column; }
.viewer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; border-bottom:1px solid #ffffff30; flex-shrink:0; }
.viewer-caption { font-size:14px; line-height:1.6; margin:0; max-width:60%; }
.viewer-controls { display:flex; align-items:center; gap:8px; }
.viewer-controls button { border:1px solid #ffffff45; background:transparent; color:white; border-radius:50px; min-width:44px; height:44px; padding-inline:14px; font-size:13px; }
.viewer-controls button:hover { background:#ffffff15; }
.viewer-controls button:disabled { opacity:.35; cursor:default; }
.viewer-counter { font-size:12px; font-variant-numeric:tabular-nums; padding-inline:6px; white-space:nowrap; }
.viewer-stage { flex:1; min-height:0; display:grid; place-items:start center; overflow:auto; padding:24px; overscroll-behavior:contain; }
.viewer-stage img { width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 128px); object-fit:contain; margin:auto; cursor:zoom-in; }
.viewer-stage.is-zoomed img { max-height:none; width:auto; max-width:none; cursor:zoom-out; margin:0 auto; }
.viewer-error { color:white; max-width:25em; padding:40px 24px; }
body.viewer-open { overflow:hidden; }
.site-footer { border-top:1px solid var(--detail-line); }
.footer-contact a { transition:color .2s; }
.footer-contact a:hover { color:var(--detail-accent); }
.footer-bottom { flex-wrap:wrap; justify-content:flex-start; gap:8px 24px; }
.contact-layout { gap:72px; }
.contact-form { box-shadow:0 12px 40px #30244005; border-color:var(--detail-line); }
.field input,.field textarea,.field select { transition:border-color .2s,background .2s; }

@media(max-width:1100px) {
  .archive-intro { grid-template-columns:1fr; gap:28px; }
  .archive-intro>.eyebrow { margin-bottom:0; }
  .archive-intro .section-lead { margin:0; }
  .case-story { grid-template-columns:1fr; gap:20px; }
  .case-story h2 { margin-bottom:12px; }
  .case-story>div:last-child { gap:0 48px; }
  .content-layout { gap:40px; grid-template-columns:200px minmax(0,1fr); }
}
@media(max-width:800px) {
  .archive-intro { padding-block:48px 32px; gap:22px; }
  .archive-intro h1 { font-size:44px; }
  .content-layout { grid-template-columns:1fr; gap:36px; }
  .content-intro { display:block; }
  .content-intro>.section-lead { margin-top:22px; }
  .project-intro { display:block; }
  .project-meta { display:grid; grid-template-columns:1fr 1fr 1fr; border-left:0; border-top:1px solid var(--detail-line); padding:24px 0 0; margin-top:28px; }
  .content-toc { position:static; }
  .content-toc>a { padding-inline:0; }
  .content-toc>p { padding-inline:0; }
  .content-toc>a[aria-current="location"] { padding-inline:12px; }
  .service-row { grid-template-columns:1fr; gap:18px; }
  .industry-directory { gap:0 28px; }
  .industry-entry h2 { font-size:23px; }
  .content-body h2 { font-size:29px; }
  .contact-layout { gap:36px; }
  .viewer-toolbar { padding:12px 16px; flex-wrap:wrap; gap:8px; }
  .viewer-caption { max-width:100%; width:100%; font-size:13px; }
  .viewer-controls { width:100%; justify-content:flex-end; }
  .viewer-stage { padding:16px; }
  .viewer-stage img { max-height:calc(100dvh - 162px); }
  .work-open { opacity:1; transform:none; bottom:12px; right:12px; font-size:12px; }
}
@media(max-width:540px) {
  .archive-intro h1 { font-size:36px; }
  .archive-intro .section-lead { font-size:16px; }
  .work-caption h3 { font-size:23px; }
  .work-image { border-radius:12px; }
  .archive-grid { row-gap:36px; }
  .work-filter { padding-block:14px; }
  .filter-tabs { gap:4px; }
  .filter-button { padding-inline:12px; font-size:13px; }
  .faq-list summary { font-size:16px; padding:20px 0; gap:16px; }
  .faq-list details>p { padding:0 0 24px; font-size:16px; }
  .faq-list summary>span:last-child:not(.copy-text) { flex-basis:28px; width:28px; height:28px; font-size:20px; }
  .content-intro { padding-bottom:28px; margin-bottom:36px; }
  .content-intro .content-answer { font-size:21px; }
  .content-intro .section-lead { font-size:17px; }
  .content-body h2 { font-size:27px; }
  .content-next { padding:28px 20px; }
  .content-table { display:block; font-size:16px; }
  .content-table caption { display:block; }
  .content-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .content-table tbody { display:block; }
  .content-table tr { display:grid; grid-template-columns:1fr; border-top:1px solid var(--detail-line); }
  .content-table tbody th,.content-table tbody td { width:auto; border:0; padding:0 0 20px; }
  .content-table tbody th:first-child { width:auto; }
  .content-table tbody th { padding:18px 0 8px; color:var(--detail-accent); }
  .industry-directory { grid-template-columns:1fr; }
  .industry-entry { padding-block:25px; }
  .case-story { padding-block:36px; gap:12px; }
  .case-story>div:last-child { display:block; }
  .case-story h3 { margin-top:24px; }
  .case-story h2,.case-questions h2,.case-related h2 { font-size:26px; }
  .project-intro { padding-block:24px 30px; }
  .project-intro h1 { font-size:38px; }
  .project-lead { font-size:20px; }
  .project-meta { grid-template-columns:1fr 1fr; gap:20px; }
  .project-meta>div:first-child { grid-column:1/-1; }
  .project-meta p { font-size:15px; }
  .case-shortcuts { gap:0 20px; margin-bottom:20px; padding-block:10px; }
  .project-images { padding-block:24px 32px; }
  .image-zoom-label { opacity:1; transform:none; right:10px; bottom:10px; font-size:12px; padding:6px 12px; gap:12px; }
  .project-image-zoom { border-radius:8px; }
  .case-questions { padding-top:32px; }
  .case-links { grid-template-columns:1fr; }
  .footer-bottom { gap:4px 18px; }
  .footer-bottom>span { flex-basis:100%; margin-bottom:8px; }
}
@media(max-width:359px) {
  .archive-intro h1 { font-size:32px; }
  .project-intro h1 { font-size:33px; }
  .project-meta { grid-template-columns:1fr; }
  .viewer-controls { gap:4px; }
  .viewer-controls button { padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button,.text-link,.button svg,.text-link svg,.case-link svg,.work-image>img,.desktop-nav a::after,.image-zoom-label { transition:none; }
  .mobile-menu:not([hidden]),.faq-list details[open]>p { animation:none; }
}