@charset "UTF-8";
/* Kunnworks · Clarity foundation.
   The owner-published site language: Pretendard, white ground, navy action, quiet blue accent, product-still imagery.
   Brand module: the symbol's modules are rectangles with a cut corner. The cut is an accent, not a container style:
   the header's project inquiry, the panel that ends each page, and the brand's own drawings (portrait ground, module strips,
   the Grounded Technology sequence). Everything else is rounded.
   Labels are type, not chips: status, attribution and honesty notes are set as small text, never as pills.
   Cards are defined by a hairline and a soft shadow; interactive outlines keep 3:1 contrast; data rows keep their rules.
   Page compositions live in pages.css. */
@font-face{font-family:"Pretendard";src:url('/assets/fonts/pretendard.woff2') format('woff2');font-style:normal;font-weight:45 920;font-display:swap}
:root{
  --white:#fff;--surface:#f6f8fc;--surface-blue:#edf3fa;--surface-blue-2:#e1eaf5;
  --ink:#1b222c;--ink-2:#262a30;--body:#3d4652;--muted:#5f6b7a;
  --line:#dce1e8;--line-strong:#c8d0db;--control:#8793a3;
  --navy:#112c49;--navy-2:#183a5f;--navy-3:#214872;--navy-line:#35557a;--on-navy:#f4f7fb;--on-navy-muted:#bac7d7;
  --blue:#1265ff;--blue-ink:#0f5ae6;--blue-soft:#e8f0ff;--blue-on-navy:#9cc0ff;--blue-mid:#5b8def;
  --amber:#8f5400;--amber-soft:#fff3df;--danger:#b42318;--danger-soft:#fdf0ef;
  --footer:#1d232b;
  --font:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-xl:24px;
  --cut-s:9px;--cut-l:40px;
  --hairline:rgba(17,44,73,.09);--line-ui:#7d8a9b;
  --shadow-card:0 1px 2px rgba(17,44,73,.05),0 10px 28px -14px rgba(17,44,73,.22);
  --shadow-hover:0 2px 4px rgba(17,44,73,.06),0 20px 40px -16px rgba(17,44,73,.3);
  --shadow-sm:0 1px 2px rgba(17,44,73,.05),0 6px 16px -6px rgba(17,44,73,.08);
  --shadow:0 2px 6px rgba(17,44,73,.05),0 20px 44px -16px rgba(17,44,73,.18);
  --shadow-lg:0 36px 80px -28px rgba(17,44,73,.32),0 6px 16px rgba(17,44,73,.06);
  --gutter:clamp(20px,4vw,64px);--section:clamp(80px,8.5vw,148px);--max:1320px;--header:76px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--white);font:400 1rem/1.7 var(--font);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{display:block;overflow-x:clip}main:focus{outline:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4{color:inherit;text-wrap:balance}
h1{font-size:clamp(2.5rem,4.4vw,4.25rem);line-height:1.2;font-weight:700;letter-spacing:-.045em}
h2{font-size:clamp(1.875rem,3vw,2.875rem);line-height:1.3;font-weight:700;letter-spacing:-.04em}
h3{font-size:1.25rem;line-height:1.45;font-weight:650;letter-spacing:-.025em}
h4{font-size:1rem;font-weight:650}
p+p{margin-top:1em}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}button:disabled{cursor:not-allowed}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}svg{max-width:100%}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
[hidden]{display:none!important}
::selection{background:var(--blue-soft);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;top:8px;left:16px;transform:translateY(-160%);background:var(--navy);color:#fff;padding:12px 20px}.skip-link:focus-visible{transform:none}

/* Type roles: display, body, and one small label role. */
.eyebrow{margin-bottom:18px;color:var(--muted);font-size:.75rem;font-weight:600;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;word-break:normal}
.mono{font-size:.75rem;font-weight:600;line-height:1.5;letter-spacing:.02em;color:var(--muted)}
.lead{color:var(--body);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.75;letter-spacing:-.02em}
.section{position:relative;padding-block:var(--section);padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2))}
.section>*{min-width:0}
/* Section heads: label, title and one line under it, as on Home. */
.section-heading{margin-bottom:clamp(40px,4.4vw,64px)}
.section-heading>p:not(.eyebrow){max-width:680px;margin-top:14px;color:var(--body);font-size:1.0625rem;line-height:1.75;text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
/* Numbered step: a typographic numeral. Order is read from the number, not from a coloured block. */
.step-number{display:inline-block;flex:0 0 auto;min-width:1.75em;color:var(--blue-ink);font-size:.8125rem;font-weight:700;letter-spacing:.04em;line-height:1.5;font-variant-numeric:tabular-nums}

/* Controls */
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:52px;padding:13px 26px;border:0;border-radius:var(--radius);font-size:1rem;font-weight:600;letter-spacing:-.02em;line-height:1.4;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease),color .2s}
.header-inquiry:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
.button>span,.text-link>span,.header-inquiry>span{display:inline-block;transition:transform .2s var(--ease)}
.button:hover>span,.text-link:hover>span,.header-inquiry:hover>span{transform:translate(2px,-2px)}
.button-dark,.button-signal{background:var(--navy);color:#fff}
.button-dark:hover,.button-signal:hover{background:var(--navy-3);box-shadow:0 10px 24px -12px rgba(17,44,73,.6)}
.button-soft,.button-line{background:var(--surface-blue);color:#17314e}
.button-soft:hover,.button-line:hover{background:var(--surface-blue-2)}
.button-light{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(17,44,73,.12)}
.button-light:hover{background:var(--surface-blue)}
.button-outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.button-outline-light:hover{background:rgba(255,255,255,.1)}
.button-large{min-height:60px;padding-inline:34px;font-size:1.0625rem}
.button:disabled{background:#e9edf2;color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 0;color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.5;text-decoration:none;transition:color .2s}
.text-link>span{color:var(--blue-ink)}
.text-link:hover{color:var(--blue-ink)}

/* Shell */
.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;min-height:var(--header);padding:12px max(var(--gutter),calc((100% - var(--max)) / 2));background:rgba(255,255,255,.9);border-bottom:1px solid rgba(220,225,232,.7);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.brand img{width:182px;height:auto}
.site-header nav{display:flex;gap:36px;margin-left:auto}
.site-header nav>a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font-size:.9375rem;font-weight:500;text-decoration:none;transition:color .2s}
.site-header nav>a:hover,.site-header nav>a[aria-current]{color:var(--blue-ink)}
.site-header nav>a[aria-current]{font-weight:650}
.header-inquiry{--c:var(--cut-s);display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 18px;background:var(--navy);color:#fff;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.header-inquiry:hover{background:var(--navy-3)}
.menu-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 12px;background:#fff;border:1px solid var(--line-ui);border-radius:var(--radius-sm);font-size:.8125rem;font-weight:600}
.menu-toggle::before{content:"";width:14px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:height .18s}
.menu-toggle[aria-expanded="true"]::before{height:0;border-bottom:0}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:24px max(var(--gutter),calc((100% - var(--max)) / 2)) 0;font-size:.8125rem;line-height:1.8;color:var(--muted)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px;text-decoration:none}
.breadcrumb a:hover{color:var(--blue-ink)}

/* Inner-page opening: statement and one quiet description. */
.page-intro{padding-top:clamp(64px,7vw,128px);padding-bottom:clamp(56px,6vw,104px)}
/* Page intros take the hero's ground: a dot grid fading in from the right, a soft blue glow, and the label as a pill. */
.page-intro,.case-intro,.project-intro{position:relative;isolation:isolate;overflow:hidden}
.page-intro::before,.case-intro::before,.project-intro::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 70% at 88% 36%,rgba(18,101,255,.1),transparent 70%),radial-gradient(rgba(17,44,73,.085) 1px,transparent 1.4px) 0 0/24px 24px;-webkit-mask-image:radial-gradient(60% 85% at 86% 40%,#000,transparent 74%);mask-image:radial-gradient(60% 85% at 86% 40%,#000,transparent 74%);pointer-events:none}
.page-intro .eyebrow,.case-intro .eyebrow,.project-intro .eyebrow,.wizard-intro .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(17,44,73,.1),0 8px 20px -14px rgba(17,44,73,.4);color:var(--navy)}
.page-intro .eyebrow::before,.case-intro .eyebrow::before,.project-intro .eyebrow::before,.wizard-intro .eyebrow::before{content:"";flex:0 0 8px;height:8px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 4px rgba(18,101,255,.15)}
.page-intro h1{max-width:18ch;text-wrap:balance}
.intro-lead{max-width:640px;margin-top:24px;color:var(--muted);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.75}
.intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.page-intro.has-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,6vw,96px)}
.page-intro.has-media h1{font-size:clamp(2.375rem,3.8vw,3.75rem)}

/* Page ending: the one container per page that carries the brand cut. */
.closing{padding-top:0}
/* After a white section its bottom padding is the gap; after a section that paints its own band, the banner keeps white
   space from the band's edge instead of touching it. */
:is(.service-map,.service-situations,.shift-section,.case-mandate,.project-next,.diagnosis-section,.brand-story)+.closing{padding-top:clamp(40px,5.5vw,80px)}
.closing-panel{--c:var(--cut-l);position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;padding:clamp(40px,5vw,72px);background:radial-gradient(60% 90% at 100% 0%,rgba(91,141,239,.34),transparent 65%),radial-gradient(40% 60% at 0% 100%,rgba(91,141,239,.16),transparent 70%),var(--navy);color:var(--on-navy)}
.closing-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(70% 90% at 82% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 82% 30%,#000,transparent 75%);pointer-events:none}
.closing-copy{flex:1 1 420px}
.closing h2{font-size:clamp(1.75rem,2.8vw,2.625rem)}
.closing-copy p{margin-top:12px;color:var(--on-navy-muted);font-size:1.0625rem}
.closing-panel :focus-visible{outline-color:var(--blue-on-navy)}

/* Footer: one line only, above the legal row. */
.site-footer{padding:clamp(56px,6vw,88px) max(var(--gutter),calc((100% - var(--max)) / 2)) 28px;background:var(--footer);color:var(--on-navy)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer :focus-visible{outline-color:var(--blue-on-navy)}
.footer-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:12px}
.footer-brand{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.footer-brand a{display:inline-flex;min-height:44px;align-items:center}
.footer-brand img{width:200px}
.footer-brand p{color:#b3bdc9;font-size:.9375rem}
/* The footer ends on one short line that opens the inquiry. The address stays in the 프로젝트 문의 column. */
.footer-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:600;letter-spacing:-.03em}
.footer-columns{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.6fr));gap:32px;padding:36px 0 40px}
.footer-company{display:flex;flex-direction:column;gap:4px;color:#b3bdc9;font-size:.8125rem;line-height:1.8}
.footer-company strong{margin-bottom:4px;color:var(--on-navy);font-size:.9375rem;font-weight:650}
.footer-heading{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:4px;color:#fff;font-size:1rem;font-weight:700}
.footer-heading>span{color:var(--blue-on-navy);font-size:.875rem}
.footer-columns ul a{color:#d5dce5}
.footer-columns ul{list-style:none;margin:0;padding:0}
.footer-columns li a{display:inline-flex;align-items:center;min-height:40px;font-size:.9375rem}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding-top:20px;border-top:1px solid #3a434e;color:#b3bdc9;font-size:.8125rem}
.footer-bottom>div{display:flex;flex-wrap:wrap;gap:4px 24px}
.footer-bottom a{display:inline-flex;align-items:center;min-height:32px}

/* Attribution and case type: small text, never a badge. Kunnworks-performed work carries the accent colour. */
.attribution{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--muted)}
.attribution-company{color:var(--blue-ink)}
.work-badge{display:inline-flex;align-items:center;padding:1px 9px;background:var(--surface);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(17,44,73,.08);font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;color:var(--muted)}
.work-badge.badge-company{background:var(--blue-soft);box-shadow:none;color:var(--blue-ink);font-weight:700}
.work-badge.badge-built{background:#e7edf5;box-shadow:none;color:var(--navy);font-weight:700}
/* Honesty note on illustrative or supplied screens: a caption, not a badge. */
.frame-note{display:inline-block;color:var(--muted);font-size:.75rem;font-weight:500;line-height:1.5;letter-spacing:.01em}
.fine-print{margin-top:20px;color:var(--muted);font-size:.8125rem}
.fine-print summary{display:inline-flex;align-items:center;min-height:32px;font-weight:600;cursor:pointer}
.fine-print p{max-width:720px;margin-top:6px;line-height:1.75}
.note{color:var(--muted);font-size:.8125rem}
.field-help{margin-top:8px;color:var(--muted);font-size:.8125rem}

/* Evidence: supplied screens as product stills, always captioned as excerpts. */
.evidence-plate{min-width:0}
.plate-stage{position:relative;min-height:360px;padding:0 0 clamp(64px,7vw,112px)}
.evidence-plate>figcaption{margin-top:10px}
.artifact{position:relative;min-width:0;overflow:hidden;background:#fff;border:1px solid rgba(200,208,219,.8);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.artifact-label{padding:8px 14px;background:var(--surface);color:var(--muted);font-size:.75rem;font-weight:600}
.artifact img{width:100%}
.artifact-0{width:84%}
.artifact-1{position:absolute;right:clamp(16px,2.5vw,40px);bottom:clamp(20px,2.5vw,40px);width:46%}
.evidence-note{color:var(--muted);font-size:.8125rem}
.specimen{min-width:0}
.specimen-frame{padding:clamp(14px,2vw,24px);background:var(--surface-blue);border-radius:var(--radius-lg)}
.specimen-frame img{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.specimen figcaption{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-size:.8125rem;line-height:1.7;color:var(--muted)}
.specimen figcaption strong{color:var(--ink);font-size:.9375rem;font-weight:650}

/* Coverage line: every stage on one track; one bar spans what the work covered. The bar is the only thing that draws. */
.scope-line{min-width:0;margin:0}
.scope-line figcaption{margin-bottom:22px;color:var(--muted);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.scope-line ol{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);list-style:none;margin:0;padding:20px 0 0}
.scope-line ol::before,.scope-line ol::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px}
.scope-line ol::before{background:var(--line)}
.scope-line ol::after{background:var(--navy);transform-origin:left}
.scope-line li{position:relative;padding-right:12px;font-size:.9375rem;font-weight:600;line-height:1.45}
.scope-line li::before{content:"";position:absolute;left:0;top:-24px;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.scope-line.is-dark figcaption{color:var(--on-navy-muted)}
.scope-line.is-dark ol::before{background:var(--navy-line)}
.scope-line.is-dark ol::after{background:var(--blue-on-navy)}
.scope-line.is-dark li{color:#fff}
.scope-line.is-dark li::before{background:var(--navy);border-color:var(--blue-on-navy)}

/* Proof records: compact and attributable. */
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.proof-record{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(24px,2.6vw,36px);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.proof-record h3{margin:14px 0 6px;font-size:1.375rem;font-weight:700}
.proof-role{color:var(--blue-ink);font-size:.9375rem;font-weight:600}
.proof-record .text-link{align-self:flex-start;margin-top:10px}
.illustrative-label{display:block;margin-bottom:28px;color:var(--muted);font-size:.8125rem;font-weight:500}

/* Leader portrait: the owner's line illustration on white (the paper tint was balanced out of the files), framed by a hairline. */
.portrait{margin:0;overflow:hidden;aspect-ratio:1/1;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}

/* The brand cut on containers: two accents, one geometry. */
.header-inquiry,.closing-panel{clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}

/* Motion grammar. Settled state is the default; entering view replays a small rise once.
   Text-bearing layers never animate opacity: legibility and contrast hold at every frame. */
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
@keyframes draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes record-register{from{box-shadow:0 0 0 3px var(--blue)}to{box-shadow:0 0 0 0 transparent}}
[data-reveal].is-in{animation:rise .8s var(--ease) both}
.scope-line.is-in ol::after{animation:draw-x 1.2s .15s var(--ease) both}
.is-registered{animation:record-register .7s var(--ease)}

/* Shared responsive behaviour */
@media(max-width:1100px){
  .site-header nav{gap:24px}
  .page-intro.has-media{grid-template-columns:minmax(0,1fr)}
  .footer-columns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-company{grid-column:1/-1}
}
@media(max-width:800px){
  :root{--header:64px;--section:72px;--cut-l:24px}
  .site-header{flex-wrap:wrap;gap:8px 12px;padding-top:10px;padding-bottom:10px}
  .brand img{width:148px}
  .header-inquiry{margin-left:auto;padding:8px 12px;font-size:.8125rem;gap:8px}
  .menu-toggle{order:3}
  .site-header nav{order:4;flex-basis:100%;flex-wrap:wrap;gap:0 18px;margin:0}
  .site-header.enhanced nav{display:none}
  .site-header.enhanced.menu-open nav{display:grid;grid-template-columns:1fr;margin-top:4px;padding:4px 0 10px}
  .site-header.menu-open nav>a{padding:12px 0;font-size:1.25rem;font-weight:600}
  .site-header.menu-open nav>a+a{border-top:1px solid var(--line)}
  h1{font-size:clamp(2.125rem,8.4vw,3rem)}
  .page-intro h1,.page-intro.has-media h1{font-size:clamp(2.125rem,8.4vw,3rem)}
  .intro-lead{font-size:1.0625rem}
  .closing-panel{padding:36px 24px}
  .closing-panel .button{width:100%}
  .artifact-0{width:92%}
  .artifact-1{width:54%;right:12px;bottom:18px}
  .plate-stage{min-height:0;padding:0 0 72px}
  .proof-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .footer-top{flex-direction:column;align-items:flex-start}
  .footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-columns li a,.footer-bottom a{min-height:44px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:700px){
  .scope-line ol{grid-auto-flow:row;gap:14px;padding:0 0 0 28px}
  .scope-line ol::before,.scope-line ol::after{left:4px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .scope-line ol::after{transform-origin:top}
  .scope-line li::before{left:-28px;top:.3em}
  .scope-line.is-in ol::after{animation-name:draw-y}
}
@media(max-width:480px){
  :root{--section:60px}
  .header-inquiry>span{display:none}
  .brand img{width:132px}
  .menu-toggle{padding:8px 10px}
  .button{gap:14px;padding:12px 20px;font-size:.9375rem}
  .eyebrow{letter-spacing:.12em}
  .footer-columns{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:360px){.brand img{width:116px}.header-inquiry{padding:8px 9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.button:hover>span,.text-link:hover>span,.header-inquiry:hover>span{transform:none}}
@media(forced-colors:active){select{appearance:auto!important;background-image:none!important}.symbol path{fill:CanvasText}.artifact,.ui-card,.case-card-media,.button,.option-body,.lane-track li{border:1px solid CanvasText}.header-inquiry,.closing-panel,.portrait::before{clip-path:none}}
@media print{body{background:#fff}.site-header{position:static}.menu-toggle,.header-inquiry,.site-footer,.closing,.catalogue-toolbar{display:none}.section{padding:30px 0}.evidence-plate,.specimen{break-inside:avoid}a{color:inherit}}