/* 2026-10-04 review: open typography, two case columns, readable native motion. */
:root {
  --heading-tracking: .01em;
  --hero-tracking: -.015em;
  --hero-emphasis-weight: 500;
  --logo-cell: 220px;
  --logo-gap: 56px;
  --logo-cycle: 96s;
  --marquee-cycle: 42s;
}
.section-kicker, .about__kicker, .news__kicker, .contact__kicker, .journal__english { letter-spacing: var(--heading-tracking); }
.journal__english { font-size: clamp(36px, 4.9vw, 72px); }
.hero__title { font-size: clamp(60px, 8.15vw, 132px); font-weight: var(--hero-emphasis-weight); letter-spacing: var(--hero-tracking); }
.hero__line { overflow: visible; perspective: 900px; }
.hero__line > span { width: max-content; max-width: 100%; animation: none; transform: translateX(var(--hero-shift, 0px)); }
.hero__line:nth-child(2) > span { transform: translateX(calc(var(--hero-shift, 0px) * -1)); }
.hero__word { display: inline-block; white-space: nowrap; }
.hero__lead > .hero__lead-opening { display: block; position: relative; padding-left: 34px; margin-bottom: 16px; color: var(--color-ink); font-size: 19px; font-weight: 700; line-height: 1.8; letter-spacing: .02em; }
.hero__lead-opening > span { display: inline-block; }
.hero__lead-opening::before { content: ""; position: absolute; left: 0; top: .87em; width: 22px; height: 2px; background: var(--color-accent); }
.hero__glyph, .hero__glyph > span { display: inline-block; transform-origin: 50% 65%; }
.hero__tools { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 50px; }
.hero__tools .hero__scroll { margin-top: 0; }
.motion-toggle { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px; border: 1px solid #BAC2C6; border-radius: 999px; background: transparent; font: 400 11px / 1.5 var(--font-jp); cursor: pointer; white-space: nowrap; }
.motion-toggle[hidden] { display: none; }
.motion-toggle__icon { font: 500 12px / 1 var(--font-en); }
.motion-toggle:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.motion-toggle:hover { background: rgba(255,255,255,.6); }

/* Each case has an image above its copy; both cases remain side by side on PC. */
.work-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 0; background: transparent; border-radius: 0; }
.work-card, .work-card + .work-card { min-width: 0; padding: 18px; margin: 0; border: 0; background: white; border-radius: 28px; }
.work-card__link { display: flex; flex-direction: column; gap: 0; height: 100%; }
.work-card__visual { flex-shrink: 0; width: 100%; aspect-ratio: 16 / 10; }
.work-card__body { flex: 1; padding: 26px 18px 12px; }
.work-card h3 { font-size: clamp(21px, 1.85vw, 27px); margin-top: 24px; }
.work-card:nth-child(2) { transition-delay: 100ms; }

/* Two full-width logo strips. Each group is duplicated once for an exact seam. */
.clients { display: block; width: calc(100% + 2 * var(--page-gutter)); margin: 84px calc(-1 * var(--page-gutter)) 0; padding: 38px 0 52px; background: white; overflow: hidden; }
.clients__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: calc(100% - 2 * var(--page-gutter)); margin-bottom: 30px; }
.clients__label { display: flex; align-items: center; gap: 16px; }
.clients__label > span { font-size: 16px; letter-spacing: .12em; }
.clients__label small { margin-top: 0; }
.clients__reels { display: grid; gap: 10px; }
.logo-reel { width: 100%; overflow: hidden; }
.logo-reel__track { width: max-content; display: flex; }
.logo-reel__group { display: flex; gap: var(--logo-gap); padding-right: var(--logo-gap); flex-shrink: 0; }
.client-logo { width: var(--logo-cell); height: 116px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.client-logo__frame { display: block; width: min(184px, calc(100px * var(--logo-ratio))); aspect-ratio: var(--logo-ratio); position: relative; overflow: hidden; }
.client-logo__frame img { position: absolute; display: block; width: var(--image-width); max-width: none; height: auto; left: var(--image-left); top: var(--image-top); }

/* Canary-inspired oversized type; only PRETAKE's existing copy is used. */
.journal-marquee { width: 100%; margin: 0; padding-bottom: 28px; }
.word-marquee { overflow: hidden; padding-block: 16px; }
.word-marquee__track { display: flex; width: max-content; }
.word-marquee__group { flex-shrink: 0; padding-right: .55em; color: white; font: 300 clamp(72px, 11.2vw, 176px) / 1.14 var(--font-en); letter-spacing: .015em; white-space: nowrap; }
.journal-marquee__tools { display: flex; justify-content: flex-end; width: calc(100% - 2 * var(--page-gutter)); margin-top: 12px; }

@keyframes glyph-arrive {
  from { opacity: 0; transform: translateY(.65em) rotateX(-78deg) scaleX(.62); }
  to { opacity: 1; transform: none; }
}
@keyframes glyph-turn {
  0%, 55%, 83%, 100% { transform: none; }
  65% { transform: translateY(-.055em) rotateY(66deg) scaleX(.72); }
  73% { transform: translateY(.015em) rotateY(-10deg); }
}
@keyframes seamless-left { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero__glyph { animation: glyph-arrive 1050ms var(--ease-out) calc(120ms + var(--char-index) * 30ms) both; }
  .motion-ready .hero__glyph > span { animation: glyph-turn 10s cubic-bezier(.4,0,.2,1) calc(1300ms + var(--char-index) * 75ms) infinite; }
  .motion-ready .logo-reel__track { animation: seamless-left var(--logo-cycle) linear infinite; }
  .motion-ready .word-marquee__track { animation: seamless-left var(--marquee-cycle) linear infinite; }
  .motion-ready [data-motion-region] .hero__glyph,
  .motion-ready [data-motion-region] .hero__glyph > span,
  .motion-ready [data-motion-region] .logo-reel__track,
  .motion-ready [data-motion-region] .word-marquee__track { animation-play-state: paused; }
  .motion-ready [data-motion-region].is-motion-visible .hero__glyph,
  .motion-ready [data-motion-region].is-motion-visible .hero__glyph > span,
  .motion-ready [data-motion-region].is-motion-visible .logo-reel__track,
  .motion-ready [data-motion-region].is-motion-visible .word-marquee__track { animation-play-state: running; }
  html[data-motion-paused] .hero__glyph,
  html[data-motion-paused] .hero__glyph > span,
  html[data-motion-paused] .logo-reel__track,
  html[data-motion-paused] .word-marquee__track { animation-play-state: paused !important; }
  html[data-motion-paused] .hero__glyph { animation: none !important; opacity: 1; transform: none; }
  html.hero-arrived .hero__glyph { animation: none !important; opacity: 1; transform: none; }
}
/* Static fallback exposes every logo, not merely the first visible portion. */
html:not(.motion-ready) .logo-reel__track { width: 100%; }
html:not(.motion-ready) .logo-reel__group { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 0 var(--page-gutter); }
html:not(.motion-ready) .client-logo { width: 100%; }
html:not(.motion-ready) .logo-reel__group[aria-hidden] { display: none; }

@media (max-width: 1100px) {
  .work-panel { gap: 20px; }
  .work-card, .work-card + .work-card { padding: 14px; }
  .work-card__body { padding: 24px 10px 10px; }
  .work-card h3 { font-size: 22px; }
}
@media (max-width: 800px) {
  .hero__lead > .hero__lead-opening { font-size: 18px; }
  .hero__title { font-size: 8.15vw; }
  .hero__tools { margin-top: 34px; }
  .work-panel { grid-template-columns: 1fr; gap: 24px; }
  .work-card h3 { font-size: 25px; }
  .clients { margin-top: 64px; }
}
@media (max-width: 600px) {
  .hero__lead > .hero__lead-opening { font-size: 17px; padding-left: 30px; margin-bottom: 14px; }
  .hero__lead-opening::before { width: 18px; }
  :root { --logo-cell: 176px; --logo-gap: 32px; --logo-cycle: 104s; }
  .hero__title { font-size: clamp(29px, 9.65vw, 58px); line-height: 1.14; }
  .hero__line:nth-child(2) > span { align-items: flex-start; }
  .hero__tools { gap: 8px; }
  .hero__tools .hero__scroll { width: 156px; font-size: 8px; }
  .motion-toggle { font-size: 10px; padding: 8px 10px; gap: 7px; }
  .section-kicker { font-size: clamp(31px, 9.6vw, 42px); }
  .partner .section-kicker { font-size: clamp(25px, 6.5vw, 39px); }
  .journal__english { font-size: clamp(23px, 6.65vw, 38px); }
  .about__kicker { font-size: clamp(27px, 7.5vw, 39px); }
  .contact__kicker { font-size: clamp(36px, 10vw, 56px); }
  .experience__kicker { font-size: clamp(29px, 8.9vw, 48px); }
  .work-card, .work-card + .work-card { padding: 12px; border-radius: 22px; }
  .work-card h3 { font-size: 21px; }
  .clients { padding: 28px 0 32px; }
  .clients__top { margin-bottom: 20px; }
  .clients__label { gap: 10px; }
  .clients__label > span { font-size: 13px; }
  .clients__label small { font-size: 9px; }
  .clients__reels { gap: 6px; }
  .client-logo { height: 100px; }
  .client-logo__frame { width: min(152px, calc(86px * var(--logo-ratio))); }
  .word-marquee__group { font-size: 72px; }
  .journal-marquee { padding-bottom: 20px; }
  html:not(.motion-ready) .logo-reel__group { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 359px) {
  .work-card h3 { font-size: 19px; }
  .hero__tools .hero__scroll { width: 140px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__line > span, .hero__line:nth-child(2) > span { transform: none; }
  .hero__glyph, .hero__glyph > span, .logo-reel__track, .word-marquee__track { animation: none !important; transform: none !important; }
  .motion-toggle { display: none; }
  .logo-reel__track { width: 100%; }
  .logo-reel__group { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 0 var(--page-gutter); }
  .logo-reel__group[aria-hidden] { display: none; }
  .client-logo { width: 100%; }
  .word-marquee__track { display: block; width: auto; }
  .word-marquee__group { display: block; padding: 0 var(--page-gutter); white-space: normal; font-size: clamp(32px,7vw,100px); }
  .word-marquee__group + .word-marquee__group { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .logo-reel__group { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-logo__frame { width: min(100%, 128px, calc(78px * var(--logo-ratio))); }
}