/* Refinement of the existing identity; all colors and easing use its tokens. */
body { font-kerning: normal; }
:is(p, li, summary, label, legend) { line-break: strict; }
:is(.concept-body > p, .reason > p, .service-card-content > p, .producer > p, .faq-answer) { text-wrap: pretty; }
:is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
:is(a, button, input, select, summary) { scroll-margin-top: 112px; scroll-margin-bottom: 24px; }
#works :is(a, button):focus-visible { outline-color: var(--paper); }

/* Small type stays secondary through weight and spacing, not illegibility. */
#concept .section-kicker,
#why .section-kicker,
#service .section-kicker,
#works .section-kicker,
#faq .section-kicker,
#contact .section-kicker { font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; }
#why .section-heading h2,
.service-intro h2,
.faq-heading h2 { letter-spacing: -.035em; line-height: 1.65; }
#contact .contact-title { font-size: clamp(28px, 2.5vw, 38px); font-weight: 700; letter-spacing: -.035em; line-height: 1.65; }
#concept .concept-body > p,
#why .reason > p,
#service .service-intro > p,
#service .service-card-content > p,
#works .producer > p,
#contact .contact-copy > p,
.faq-answer { line-height: 2; }
#concept .concept-body > .concept-closing { line-height: 1.85; }
.faq-list summary { line-height: 1.8; }

/* Navigation keeps the floating capsule, with a consistent optical center. */
.desktop-nav { padding: 2px 12px; gap: 14px; border: 1px solid transparent; box-shadow: none; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 7px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .015em; }
.desktop-nav a::after { bottom: 4px; width: 3px; height: 3px; margin-left: -1.5px; }
.header-actions { gap: 16px; }
.header-contact { min-height: 44px; height: 44px; padding: 0 20px; gap: 20px; font-size: 13px; line-height: 1.4; }
.menu-button { display: flex; width: 44px; height: 44px; padding: 10px; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; }
.menu-button span { width: 24px; height: 1px; }
body:has(.hero-video) .header,
body:has(.hero-video) .header:not(.is-scrolled) { width: calc(100% - 240px); max-width: none; }
.header .brand { min-height: 44px; }
.header .brand-logo { width: 72px; opacity: .72; }
.header,
.header.is-scrolled { position: fixed; top: 16px; height: 56px; padding: 6px 12px 6px 20px; }
.header.is-scrolled { box-shadow: 0 8px 32px rgb(25 27 30 / .06); }
body:has(.hero-video) .header:not(.is-scrolled) :is(.brand, .header-contact, .menu-button):focus-visible { outline-color: #fff; }

/* One hand-drawn arrow geometry replaces mixed font glyphs. */
.ui-arrow { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform .3s var(--ease); }
.arrow { display: inline-grid; place-items: center; }
.round-arrow { flex-shrink: 0; }
.text-link:hover .round-arrow,
.submit-button:hover .round-arrow { transform: none; }
#service .service-cta { min-height: 44px; font-weight: 600; }
#service .service-cta > span { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
#service .service-cta:hover > span { transform: none; }
.faq-heading .text-link { min-height: 44px; font-size: 14px; font-weight: 600; }

/* Cards share a quiet edge; non-interactive photographs stay still. */
#why .reason,
#service .service-card { border-radius: 24px; }
#why .reason h3 { letter-spacing: -.025em; }
#why .reason > p { margin-top: 20px; margin-bottom: 36px; }
#why .reason:hover .reason-art img { transform: none; }
#why .reason-art img { transition: none; }
#service .service-english { letter-spacing: -.025em; }
#service .service-card-number { font-size: 12px; font-variant-numeric: tabular-nums; }
#service .tags { gap: 8px; }
#service .tags li { padding: 4px 10px; font-size: 12px; line-height: 1.6; color: var(--muted); border-color: var(--line); }
.service-intro-caption { font-size: 11px; line-height: 1.8; letter-spacing: .06em; }

/* Results stay readable across light frames of the fixed background video. */
#works .hero-shade {
  background: linear-gradient(90deg, rgb(8 14 20 / .8), rgb(8 14 20 / .7) 54%, rgb(8 14 20 / .68)),
    linear-gradient(180deg, rgb(5 10 15 / .3), transparent 35%, rgb(6 13 20 / .44));
}
#works .works-results .metric-label { display: block; min-height: 1.6em; font-size: 11px; line-height: 1.6; letter-spacing: .045em; }
#works .metric strong { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
#works .producer-name > span,
#works .producer-name > small { font-size: 12px; line-height: 1.8; }
#works .producer-name h3 { margin-block: 8px; }

/* FAQ uses the existing native disclosure, with a clear open state. */
.faq-list summary { align-items: center; }
.faq-index { flex: 0 0 20px; padding-top: 0; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.faq-list .plus { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.faq-list .plus::before,
.faq-list .plus::after { left: 9px; top: 15px; width: 12px; height: 1px; }
.faq-list details[open] > summary .plus { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.faq-answer { padding-left: 44px; }
.faq-list details[open] .faq-answer { animation: faq-answer-in .28s var(--ease) both; }
@keyframes faq-answer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Footer and dialogs use the same readable utility scale. */
.back-top { min-height: 44px; gap: 18px; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.footer-bottom { align-items: center; }
.footer-bottom p { color: var(--muted); text-wrap: pretty; }
.privacy-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: var(--ink); }
.privacy-button .ui-arrow { width: 15px; height: 15px; }
.footer-bottom > span { font-size: 11px; line-height: 1.8; letter-spacing: .035em; color: var(--muted); }
.nav-dialog,
.review-dialog { border-color: var(--line); border-radius: 24px; }
.nav-dialog { padding: 32px 38px; }
.dialog-close { width: 44px; height: 44px; flex-shrink: 0; }
.nav-dialog nav > a { min-height: 72px; font-size: 32px; line-height: 1.35; letter-spacing: -.025em; transition: color .25s var(--ease); }
.nav-dialog nav small { min-width: 18px; font-size: 11px; font-variant-numeric: tabular-nums; }
.nav-dialog nav > a > span { display: inline-grid; place-items: center; width: 32px; height: 32px; }
.nav-dialog > p,
.review-dialog > .tiny-label { font-size: 11px; line-height: 1.7; color: var(--muted); }
.review-dialog dt { font-size: 12px; line-height: 1.8; }
.review-dialog .pill { min-height: 44px; font-size: 14px; }
.review-dialog .pill > span { display: inline-flex; }
.submit-button:disabled { opacity: .5; }

/* Retain the established rhythm, with a shorter reveal and restrained feedback. */
.motion-ready .reveal { transition-duration: .65s; }
.motion-ready .reveal:not(.is-visible) { transform: translateY(14px); }
@media (min-width: 961px) {
  #why .reason:nth-child(2) { transition-delay: .05s; }
  #why .reason:nth-child(3) { transition-delay: .1s; }
}
@media (hover: hover) and (pointer: fine) {
  .menu-button:hover span:first-child { transform: translateY(-1px); }
  .menu-button:hover span:last-child { transform: translateY(1px); }
  .menu-button span { transition: transform .25s var(--ease); }
  #service .service-cta:hover > span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
  .privacy-button:hover { text-decoration: underline; text-underline-offset: 5px; }
  .nav-dialog nav > a:hover { color: var(--muted); }
  .faq-list summary:hover .plus { border-color: var(--ink); }
}
@media (max-width: 1100px) {
  body:has(.hero-video) .header,
  body:has(.hero-video) .header:not(.is-scrolled) { width: calc(100% - 96px); }
  .desktop-nav { gap: 6px; padding-inline: 8px; }
  .desktop-nav a { padding-inline: 6px; font-size: 12px; }
  .header-actions { gap: 10px; }
}
@media (max-width: 760px) {
  body:has(.hero-video) .header,
  body:has(.hero-video) .header:not(.is-scrolled) { width: calc(100% - 48px); }
  .header .brand-logo { width: 66px; }
  .header,
  .header.is-scrolled { top: 12px; height: 56px; padding: 6px 12px; }
  #contact .contact-title { font-size: 28px; }
  .header,
  .header.is-scrolled { gap: 12px; }
  .header-actions { gap: 8px; }
  .header-contact { min-height: 44px; height: 44px; padding: 0 12px; gap: 10px; font-size: 12px; }
  .header-contact .ui-arrow { width: 14px; height: 14px; }
  .menu-button { width: 44px; height: 44px; padding: 10px; }
  .menu-button span { width: 22px; }
  #why .reason,
  #service .service-card { border-radius: 20px; }
  #works .works-results .metric-label { min-height: 3.2em; font-size: 11px; letter-spacing: .02em; }
  #works .producer-name > span,
  #works .producer-name > small { font-size: 12px; }
  .faq-index { flex-basis: 18px; font-size: 11px; }
  .faq-list .plus { width: 32px; height: 32px; }
  .faq-answer { padding-left: 33px; padding-right: 0; }
  .footer-bottom { gap: 12px 20px; }
  .footer-bottom > span { font-size: 10px; }
  .privacy-button { font-size: 12px; }
  .back-top { font-size: 10px; gap: 12px; }
  .nav-dialog { padding: 24px; }
  .nav-dialog nav { margin-block: 28px; }
  .nav-dialog nav > a { min-height: 64px; font-size: 28px; }
  .review-dialog { padding: 28px 24px; }
}
@media (max-width: 370px) {
  body:has(.hero-video) .header,
  body:has(.hero-video) .header:not(.is-scrolled) { width: calc(100% - 40px); }
  .header .brand-logo { width: 62px; }
  .header,
  .header.is-scrolled { gap: 10px; }
  .nav-dialog { padding: 22px; }
  .nav-dialog nav > a { font-size: 26px; }
  .footer-bottom { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal,
  .ui-arrow,
  .menu-button span,
  .faq-list .plus { transition: none; }
  .faq-list details[open] .faq-answer { animation: none; }
  #why .reason { transition-delay: 0s; }
}

/* The icon moves through its own viewport; button bounds never move. */
.ui-arrow { overflow: hidden; transition: none; }
.ui-arrow-mark { transform-box: view-box; transform: translate(0, 0); }
.ui-arrow-copy { transform: translate(-100%, 100%); }
.ui-arrow-up .ui-arrow-copy { transform: translateY(100%); }
a:hover .arrow { transform: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(a, button):is(:hover, :focus-visible) .ui-arrow-mark {
    transform: translate(100%, -100%);
    transition: transform .6s var(--ease);
  }
  :is(a, button):is(:hover, :focus-visible) .ui-arrow-copy { transform: translate(0, 0); }
  :is(a, button):is(:hover, :focus-visible) .ui-arrow-up .ui-arrow-mark { transform: translateY(-100%); }
  :is(a, button):is(:hover, :focus-visible) .ui-arrow-up .ui-arrow-copy { transform: translateY(0); }
}

/* One 160px gap between the concept closing and WHY. */
.concept-why .concept-inner { min-height: 0; padding-bottom: 0; }
.concept-why .why { padding-top: 160px; }

.nav-index { font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; }

body:has(.hero-video) .header:not(.is-scrolled) .brand-logo { opacity: .9; }

/* Keep the header CTA within the existing neutral palette. */
.header .header-contact:is(:hover, :focus-visible) { background: var(--muted); color: var(--paper); }
body:has(.hero-video) .header:not(.is-scrolled) .header-contact:is(:hover, :focus-visible) { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--paper); }

/* Navigation is text only; the outer header remains the single surface. */
.desktop-nav { background: transparent; backdrop-filter: none; }
body:has(.hero-video) .header:not(.is-scrolled) .desktop-nav { background: transparent; color: var(--paper); }
body:has(.hero-video) .header:not(.is-scrolled) .desktop-nav a:focus-visible { outline-color: var(--paper); }