/* A real 800 master, self-hosted. System Arial Black cannot interpolate 700–900. */
@font-face {
  font-family: "Haruniko Display";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* One shared content measure; full-bleed colour and stage backgrounds remain. */
:root {
  --content-max: 1200px;
  --hero-board-max: 1328px;
  --page-gutter: clamp(20px, 4vw, 64px);
  --content-inset: max(var(--page-gutter), calc((100% - var(--content-max)) / 2));
  --content-gap: clamp(24px, 4vw, 56px);
}
.theme-a .masthead,
.theme-a .site-footer,
.theme-a .studio-statement,
.theme-a .work-section,
.theme-a .expertise,
.theme-a .contact-section,
.theme-a .page-hero,
.theme-a .page-section:not(.prose-section),
.theme-a .case-navigation,
.theme-a .ai-more,
.theme-a .ai-reel:not(.has-spiral) .ai-stage { padding-inline: var(--content-inset); }
.theme-a .case-cover { margin-inline: var(--content-inset); }
.theme-a .prose-section { padding-inline: var(--page-gutter); }
.theme-a .studio-statement > div,
.theme-a .editorial-projects,
.theme-a .page-hero.with-visual,
.theme-a .split-section,
.theme-a .work-grid,
.theme-a .case-overview,
.theme-a .value-grid,
.theme-a .company-section,
.theme-a .leadership-grid,
.theme-a .contact-layout,
.theme-a .film-callout { column-gap: var(--content-gap); }
/* One compact introduction: signature in the rule, CTA beside the copy.
   Do not give the CTA its own full-width row below the two text columns. */
.theme-a .studio-statement { padding-block: clamp(40px, 4.5vw, 64px); }
.theme-a .statement-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.theme-a .statement-header > .micro {
  display: flex; align-items: center; gap: 12px; font-size: 9px; color: var(--ink);
}
.theme-a .statement-header > .micro::before { flex: 0 0 24px; margin: 0; }
.theme-a .statement-header .statement-sign { font: 500 13px/1.6 Arial, sans-serif; letter-spacing: .01em; color: var(--ink); }
.theme-a .studio-statement > .statement-layout {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 3vw, 40px); margin: 28px 0 0; align-items: start;
}
.theme-a .statement-layout h2 { font-size: calc(clamp(30px, 3.1vw, 42px) * var(--heading-scale, 1)); line-height: 1.35; }
.theme-a .statement-copy { position: relative; padding-left: 32px; border-left: 1px solid var(--line); }
.theme-a .statement-copy::before { content: ""; position: absolute; top: 0; left: -2px; width: 3px; height: 28px; background: var(--brand-lime); }
.theme-a .statement-copy > p { font-size: 14px; line-height: 1.95; }
.theme-a .studio-statement .statement-more { margin: 18px 0 0; }
.theme-a .statement-more .text-link { min-height: 44px; width: min(220px, 100%); padding: 6px 0; }
@media (max-width: 760px) {
  .theme-a .statement-header { align-items: flex-start; flex-direction: column; gap: 10px; padding-bottom: 16px; }
  .theme-a .statement-header > .micro { font-size: 8px; max-width: 42ch; }
  .theme-a .statement-header .statement-sign { margin-left: 36px; }
  .theme-a .studio-statement > .statement-layout { grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
  .theme-a .statement-layout h2 { font-size: calc(clamp(28px, 7.5vw, 34px) * var(--heading-scale, 1)); }
  .theme-a .statement-copy { padding-left: 18px; }
  .theme-a .statement-copy > p { font-size: 13px; line-height: 1.9; }
  .theme-a .studio-statement .statement-more { margin-top: 14px; }
}
/* Cap the gallery artboard, not the backdrop. Keep the lime disc full bleed so
   it is not cut by a vertical edge in the middle of an ultrawide screen. */
.theme-a .kinetic-gallery { max-width: var(--hero-board-max); margin-inline: auto; }
.theme-a .hero-lime-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
@media (min-width: 1328px) {
  .theme-a .intro-copy { left: var(--content-inset); width: calc(var(--hero-board-max) * .43); }
  .theme-a .hero-meta, .theme-a .hero-bottom, .theme-a .gallery-caption { inset-inline: var(--content-inset); }
  .theme-a .hero-lime-art { --circle-x: calc(50% - var(--hero-board-max) * .05 + var(--disc-size) / 2); }
}
/* Fit gallery HEIGHT independently. Never shrink its width to fit a short
   viewport. ai-film.js measures the actual contained frames for the handoff. */
.theme-a .has-spiral .ai-section-bar,
.theme-a .has-spiral .ai-controls { left: var(--content-inset); right: var(--content-inset); }
.theme-a .has-spiral .ai-intro { left: var(--content-inset); }
.theme-a .has-spiral .ai-thumbnails {
  --ai-cols: 3;
  --ai-rows: 2;
  --ai-top: calc(var(--header-height) + 170px);
  --ai-bottom: 82px;
  --ai-gap: 22px;
  --ai-caption: 44px;
  --ai-width: min(calc(100vw - var(--page-gutter) * 2), var(--content-max));
  --ai-natural-height: calc((var(--ai-width) - (var(--ai-cols) - 1) * var(--ai-gap)) / var(--ai-cols) * .75);
  --ai-available-height: calc((100svh - var(--ai-top) - var(--ai-bottom) - (var(--ai-rows) - 1) * var(--ai-gap)) / var(--ai-rows) - var(--ai-caption));
  grid-template-columns: repeat(var(--ai-cols), minmax(0, 1fr));
  width: var(--ai-width);
  top: var(--ai-top);
  bottom: var(--ai-bottom);
  gap: var(--ai-gap);
  align-content: center;
}
.theme-a .has-spiral .ai-thumb-frame { aspect-ratio: auto; height: min(var(--ai-natural-height), var(--ai-available-height)); }
.theme-a .has-spiral .ai-caption { height: var(--ai-caption); min-height: 0; }
.theme-a .has-spiral .ai-gallery-heading { padding-inline: var(--content-inset); }
@media (max-width: 1050px) and (min-width: 761px) {
  .theme-a .has-spiral .ai-thumbnails { --ai-caption: 52px; }
  .theme-a .has-spiral .ai-caption { flex-direction: column; gap: 2px; }
}
@media (max-width: 760px) {
  .theme-a .has-spiral .ai-thumbnails {
    --ai-cols: 2; --ai-rows: 3; --ai-gap: 12px;
    --ai-top: calc(var(--header-height) + 176px); --ai-bottom: 76px;
  }
}
@media (max-width: 760px) and (max-height: 700px) {
  .theme-a .has-spiral .ai-thumbnails { --ai-top: calc(var(--header-height) + 64px); }
}

/* Editorial hierarchy: useful headings, not a second layer of English labels.
   The build removes decorative markup; these rules close its former spacing. */
.editorial-clean .hero-bottom { justify-content: flex-end; }
.editorial-clean .hero-bottom > span { max-width: none; }
.theme-a.editorial-clean .footer-brand .footer-email { display: block; width: fit-content; }
.theme-a.editorial-clean .statement-header .statement-sign { margin-left: 0; }
.editorial-clean .section-heading { grid-template-columns: minmax(0, 1fr); margin-bottom: 42px; }
.editorial-clean .project-info h3 { margin-top: 0; }
.editorial-clean .project-foot { justify-content: flex-end; }
.editorial-clean .ai-section-bar { justify-content: flex-end; }
.editorial-clean .ai-caption { justify-content: flex-start; }
.editorial-clean .page-topic { font-size: 13px; line-height: 1.6; margin: 0 0 22px; color: var(--muted, #62625d); }
.editorial-clean .work-card h2 { margin-top: 20px; }
.editorial-clean .service-directory-row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 40px; }

/* Section names live in the upper background, not in tiny numbered eyebrows.
   The isolated negative layer stays above the section fill and behind content;
   it cannot capture clicks, change grid tracks or alter the spiral geometry. */
.editorial-clean .has-section-backdrop {
  position: relative; isolation: isolate;
  /* Fixed display type: do not stretch each title to fill the viewport. */
  --section-title-size: 128px;
  --section-title-top: clamp(32px, 4vw, 56px);
  --section-heading-size: calc(clamp(24px, 2.65vw, 36px) * var(--heading-scale, 1));
  /* The English baseline crosses approximately halfway down the first
     Japanese line's glyphs, rather than hiding a whole foreground line. */
  --section-heading-top: calc(var(--section-title-top) + var(--section-title-size) * .87 - var(--section-heading-size) * .65);
}
.theme-a.editorial-clean { --section-display-font: "Haruniko Display", Arial, sans-serif; }
.theme-a.editorial-clean section.has-section-backdrop { padding-top: var(--section-heading-top); }
.editorial-clean .work-section,
.editorial-clean .leadership-section { --section-heading-size: calc(clamp(28px, 3.1vw, 44px) * var(--heading-scale, 1)); }
.editorial-clean .expertise { --section-heading-size: calc(clamp(25px, 2.3vw, 33px) * var(--heading-scale, 1)); }
.editorial-clean .split-section.has-section-backdrop,
.editorial-clean .company-section.has-section-backdrop { align-items: start; }
.editorial-clean .section-backdrop {
  position: absolute; z-index: -1; inset-inline: var(--content-inset) 0; top: var(--section-title-top);
  /* Oversized decorative English may bleed to the viewport edge, not create
     horizontal scrolling. Bottom padding preserves the font's descenders. */
  margin: 0; padding: 0 0 .22em; width: auto; max-width: none; overflow: clip;
  font: 800 var(--section-title-size)/1 var(--section-display-font);
  letter-spacing: -.055em; word-spacing: .04em;
  color: rgb(17 17 17 / .075); pointer-events: none; user-select: none;
}
.editorial-clean .section-backdrop-line { display: block; white-space: nowrap; }
.theme-a.editorial-clean .section-backdrop,
.theme-a.editorial-clean .ai-ghost {
  font-family: var(--section-display-font); font-weight: 800;
  font-optical-sizing: none; font-synthesis: none;
}
.editorial-clean .ai-ghost { white-space: nowrap; user-select: none; pointer-events: none; }
/* Keep the original two-line signature behind the helix. In the non-animated
   version it stays behind the intro instead of disappearing altogether. */
.editorial-clean .ai-reel:not(.has-spiral) .ai-ghost {
  display: block; position: absolute; z-index: -1;
  inset-inline: var(--content-inset); top: 110px; transform: none;
  font-size: clamp(48px, 8vw, 112px); line-height: .94; letter-spacing: -.055em;
  text-align: right; color: rgb(245 243 239 / .07);
}
.editorial-clean .backdrop-on-dark > .section-backdrop { color: rgb(245 243 239 / .12); }
.theme-a.editorial-clean .has-spiral .ai-stage.has-section-backdrop { position: sticky; }
.editorial-clean .ai-stage.has-section-backdrop {
  --section-title-size: 96px;
  --section-heading-size: calc(clamp(26px, 3.1vw, 44px) * var(--heading-scale, 1));
  --section-title-top: 64px;
}
.editorial-clean .has-spiral .ai-stage.has-section-backdrop { --section-title-top: calc(var(--header-height) + 42px); }
.editorial-clean .ai-reel:not(.has-spiral) .ai-stage { --section-heading-size: calc(clamp(28px, 3.05vw, 44px) * var(--heading-scale, 1)); }
.theme-a.editorial-clean .has-spiral .ai-gallery-heading { top: var(--section-heading-top); text-align: left; }
.theme-a.editorial-clean .has-spiral .ai-thumbnails {
  --ai-top: max(calc(var(--header-height) + 170px), calc(var(--section-heading-top) + var(--section-heading-size) * 1.3 + 24px));
}
.theme-a.editorial-clean .ai-gallery-heading h3 { margin-top: 0; }
.theme-a.editorial-clean .ai-reel:not(.has-spiral) .ai-stage { padding-top: var(--section-heading-top); }
.editorial-clean .ai-reel:not(.has-spiral) .ai-section-bar { position: absolute; top: 22px; right: var(--content-inset); }
.editorial-clean .ai-reel:not(.has-spiral) .ai-intro { margin-top: 0; }
@media (max-width: 1023px) {
  .editorial-clean .has-section-backdrop { --section-title-size: 96px; }
}
@media (max-width: 760px) {
  .editorial-clean .has-section-backdrop,
  .editorial-clean .ai-stage.has-section-backdrop { --section-title-size: 48px; }
  .editorial-clean .ai-stage.has-section-backdrop { --section-heading-size: calc(26px * var(--heading-scale, 1)); --section-title-top: 52px; }
  .editorial-clean .has-spiral .ai-stage.has-section-backdrop { --section-title-top: calc(var(--header-height) + 58px); }
  .theme-a.editorial-clean .has-spiral .ai-thumbnails {
    --ai-top: max(calc(var(--header-height) + 176px), calc(var(--section-heading-top) + var(--section-heading-size) * 2.6 + 24px));
  }
}
@media (max-width: 389px) {
  .editorial-clean .has-section-backdrop,
  .editorial-clean .ai-stage.has-section-backdrop { --section-title-size: 40px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .editorial-clean .has-spiral .ai-stage.has-section-backdrop { --section-title-top: calc(var(--header-height) + 8px); }
  .theme-a.editorial-clean .has-spiral .ai-thumbnails {
    --ai-top: max(calc(var(--header-height) + 64px), calc(var(--section-title-top) + var(--section-title-size) * 1.22 + 16px));
  }
}
@media (max-width: 900px) {
  .editorial-clean .service-directory-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .editorial-clean .service-directory-row .directory-arrow { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  .editorial-clean .section-heading { margin-bottom: 30px; }
  .editorial-clean .service-directory-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .editorial-clean .service-directory-row .directory-short { grid-column: 1; grid-row: 2; }
}
/* Experience-led hero: preserve heading sizes and make room for the longer copy. */
.theme-a .experience-hero .intro-copy { top: max(110px, 17%); }
@media (max-width: 600px) {
  .theme-a .experience-hero .intro-copy { top: 104px; }
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(1) { top: 68%; }
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(2) { top: 60%; }
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(3) { top: 78%; }
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(4) { top: 76%; }
  .experience-hero .hero-bottom { bottom: 12px; }
}
@media (max-width: 360px) {
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(1) { top: 77%; }
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(2) { top: 67%; }
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(3) { top: 84%; }
  .experience-hero .kinetic-gallery:not(.gallery--switch) .gallery__item:nth-child(4) { top: 82%; }
}