@charset "UTF-8";

/* Match the original site's logo widths, including its responsive breakpoints. */
.site-header { --logo-width: 256px; }
.site-header .site-logo { width: var(--logo-width); flex: 0 0 var(--logo-width); }
.site-header .header-inner { min-height: 244px; padding-block: 24px; }
.site-header .global-nav a > span { color: #c0966d; font-weight: 700; }
.hero-lead { max-width: 38em; }
.study-back, .motion-toggle { flex-shrink: 0; }
.study-concepts { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.study-concepts a { flex-shrink: 0; }
.precision-study .motion-panel { padding: 0; }
.comparison-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 12px 16px; color: var(--hero-fg); font-size: 14px; cursor: pointer; list-style: none; }
.comparison-toggle::-webkit-details-marker { display: none; }
.comparison-toggle::marker { content: ""; }
.comparison-toggle:focus-visible { outline: 2px solid #c0966d; outline-offset: 3px; }
.comparison-toggle .controls-open, .comparison-toggle .controls-close { flex-shrink: 0; color: var(--hero-dim); font-size: 12px; }
.comparison-toggle .controls-close { display: none; }
.motion-panel[open] > .comparison-toggle .controls-close { display: inline; }
.motion-panel[open] > .comparison-toggle .controls-open { display: none; }
.comparison-controls { padding: 8px 18px 18px; }
.comparison-controls > p { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--hero-dim); }
.model-size-panel { margin-top: 20px; padding-top: 16px; border-top: 1px solid #aaaaaa55; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.model-size-panel > span { font-size: 13px; color: var(--hero-dim); }
.model-sizes { display: flex; gap: 8px; }
.model-sizes button { min-width: 48px; min-height: 44px; border: 1px solid #aaaaaa80; color: var(--hero-fg); background: transparent; font-size: 13px; padding: 7px 12px; }
.model-sizes button[aria-pressed="true"] { color: #172b27; background: #dfc3a0; border-color: #dfc3a0; }
.study-unified .model-size-panel { border-color: var(--unified-line); }
.study-unified .model-size-panel > span,
.study-unified .model-sizes button { color: var(--unified-text); border-color: var(--unified-line); }
.study-unified .model-sizes button[aria-pressed="true"] { background: var(--unified-accent); color: var(--unified-bg); border-color: var(--unified-accent); }
.model-sizes button:disabled { opacity: .4; cursor: not-allowed; }
.model-comparison { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #aaaaaa55; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.model-comparison label { display: grid; gap: 8px; font-size: 14px; color: var(--hero-fg); }
.model-comparison select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 30px 10px 12px; border: 1px solid #aaaaaa80; border-radius: 6px; background: var(--hero-bg); color: var(--hero-fg); font: inherit; font-size: 14px; text-overflow: ellipsis; }
.model-comparison select:focus-visible { outline: 2px solid #c0966d; outline-offset: 3px; }
.model-comparison .model-description { margin: 0; color: var(--hero-dim); font-size: 14px; line-height: 1.8; }
.study-unified .model-comparison { border-color: var(--unified-line); }
.study-unified .model-comparison select { border-color: var(--unified-line); }

/* A separate composition keeps the sculpture on the horizontal center line. */
.centered-hero .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); gap: 0 32px; padding-top: 40px; min-height: 0; align-items: center; }
.centered-hero .hero-copy { display: contents; }
.centered-hero .hero-eyebrow { grid-column: 1/-1; grid-row: 1; text-align: center; margin-bottom: 20px; }
.centered-hero .hero h1 { grid-column: 1/-1; grid-row: 2; text-align: center; font-size: clamp(64px,7vw,100px); padding-bottom: 25px; }
.centered-hero .hero h1 br { display: none; }
.centered-hero .hero h1 span { margin-left: .18em; }
.centered-hero .hero-art-column { grid-column: 2; grid-row: 3/5; width: 100%; }
.centered-hero .hero-art { margin-inline: -40px; }
.centered-hero .hero-jp { grid-column: 1; grid-row: 3; font-size: 26px; margin: 0; }
.centered-hero .hero-lead { grid-column: 3; grid-row: 3; margin-top: 0; font-size: 16px; line-height: 2.2; }
.centered-hero .hero-cta { grid-column: 1; grid-row: 4; justify-self: start; align-self: start; margin-top: 25px; }
.centered-hero .motion-panel { margin: 16px 0 40px; }

/* PAGE 27: the model is the stage. A slate studio backdrop, a volumetric glow, and a prism accent line. */
.precision-study.stage-hero main > section.hero { --unified-bg: #11151c; --unified-text: #f2f4f7; --unified-dim: #aeb8c6; --unified-line: #3a4452; --unified-accent: #77d8c7; --unified-brass: #e5bd8d; }
.stage-hero .hero-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 0 24px; min-height: min(100svh - 150px, 860px); }
.stage-hero .hero-copy { padding-block: 40px 60px; }
.stage-hero .hero-eyebrow::after { content: ""; display: block; width: 88px; height: 2px; margin-top: 14px; background: linear-gradient(90deg,#43c9e8,#a878ef,#ee7eac,#f4ba62); }
.stage-hero .hero h1 { font-size: clamp(72px,8.8vw,140px); }
.stage-hero .hero-art-column { position: relative; }
.stage-hero .hero-art-column::before { content: ""; position: absolute; z-index: -1; inset: -6% -16% 16% -10%; background: radial-gradient(ellipse at 52% 44%, rgba(74,222,242,.17), rgba(82,139,255,.09) 38%, transparent 68%); pointer-events: none; }
.stage-hero .hero-art { margin-left: -20px; margin-right: -120px; }
.stage-hero .hero-art figcaption { border-color: #3a4452; margin-right: 125px; }
.stage-hero .hero-bottom { border-image: linear-gradient(90deg,#43c9e8,#a878ef,#ee7eac,#f4ba62,transparent 85%) 1; }
/* PAGE 29/30: keep the stage layout but let the White / Black surface start from white. */
.precision-study.stage-hero.stage-surface-hero main > section.hero { --unified-bg: #ffffff; --unified-text: #182321; --unified-dim: #50605a; --unified-line: #c4ceca; --unified-accent: #286563; --unified-brass: #80582e; }
/* On the white stage the studio glow would tint the page, so the model sits on plain white with only its floor shadow. */
.stage-surface-hero .hero-art-column::before { content: none; }
.stage-surface-hero .hero-art figcaption { border-color: var(--unified-line); }

/* PAGE 30 is the selected final design: presentation controls give way to the public content. */
/* A smaller emblem keeps the first view on the headline and the model. */
.official-final .site-header { --logo-width: 150px; }
.official-final .site-header .header-inner { min-height: 150px; }
.official-final.stage-hero .hero-grid { min-height: min(100svh - 210px,760px); }
.production-site.official-final.stage-hero .hero-grid { min-height: min(100svh - 162px,760px); }
.official-final .hero-art { margin-bottom: 18px; }
.official-final .service-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 54px; margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--unified-line); }
.official-final .service-links .text-link { min-width: 220px; justify-content: space-between; color: var(--unified-accent); }
.official-final .illustration-note { margin: -18px 0 34px auto; width: fit-content; max-width: 100%; color: var(--unified-dim); font-size: 12px; letter-spacing: .03em; }
.official-final .ai-steps-visual { gap: 24px; border-top: 0; }
.official-final .ai-steps-visual li { display: block; padding-top: 0; }
.official-final .ai-steps-visual li + li::before { content: none; }
.official-final .ai-steps-visual figure { overflow: hidden; margin-bottom: 16px; border: 1px solid var(--unified-line); border-radius: 12px; background: #10151c; }
.official-final .ai-steps-visual img { display: block; width: 100%; height: auto; aspect-ratio: 8/5; object-fit: cover; }
.official-final .ai-steps-visual li > div { display: flex; align-items: baseline; gap: 13px; }
.official-final .ai-steps-visual li > div > span { color: var(--unified-brass); font: 13px var(--display); }
.official-final .ai-steps-visual li > div > strong { color: var(--unified-text); font-size: 16px; font-weight: 500; }
.official-final .portrait { width: min(100%,220px); filter: none; border-color: var(--unified-line); box-shadow: 0 18px 46px #0000002b; }
.official-final .member-portrait { filter: none; object-position: center; }
.official-final.library-page .library-illustration-note { margin-top: -42px; margin-bottom: 42px; }
.official-final.library-projects .library-item .work-image { width: min(88%,520px); margin-inline: auto; }

@media(max-width:1600px) { .site-header { --logo-width: clamp(212px,16.17vw,256px); } }
@media(max-width:1160px) {
  .site-header { --logo-width: 196px; }
  .site-header .header-inner { min-height: 205px; }
}
@media(max-width:1100px) {
  .stage-hero .hero-art { margin-right: -70px; }
  .stage-hero .hero-art figcaption { margin-right: 75px; }
  .centered-hero .hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .centered-hero .hero-art-column { grid-column: 1/-1; grid-row: 3; width: min(100%,600px); justify-self: center; }
  .centered-hero .hero-art { margin-inline: 0; }
  .centered-hero .hero-jp { grid-column: 1; grid-row: 4; }
  .centered-hero .hero-lead { grid-column: 2; grid-row: 4; }
  .centered-hero .hero-cta { grid-column: 1/-1; grid-row: 5; justify-self: center; margin: 10px 0 40px; }
}
@media(max-width:760px) {
  .site-header .header-inner { min-height: 155px; padding-block: 18px; }
  .precision-study .motion-panel { order: 0; }
  .model-size-panel { gap: 12px; }
  .model-sizes button { min-width: 44px; padding-inline: 9px; }
  .stage-hero .hero-grid { display: flex; flex-direction: column; gap: 0; min-height: 0; }
  .stage-hero .hero-art-column { order: -1; width: 100%; }
  .stage-hero .hero-art { margin: -10px -24px 0; }
  .stage-hero .hero-art figcaption { margin-right: 24px; }
  .stage-hero .hero-art-column::before { inset: 0 -24px 22%; }
  .stage-hero .hero-copy { padding-top: 10px; }
  .official-final .site-header { --logo-width: 112px; }
  .official-final .site-header .header-inner { min-height: 118px; }
  .official-final.stage-hero .hero-grid { min-height: 0; }
  .official-final .service-links { display: block; margin-top: 38px; padding-top: 20px; }
  .official-final .service-links .text-link { display: flex; min-width: 0; margin-top: 10px; }
  .official-final .illustration-note { margin: -10px 0 28px; width: auto; }
  .official-final .ai-steps-visual { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .official-final .ai-steps-visual li:nth-child(n+3) { border-top: 0; }
  .official-final .ai-steps-visual figure { margin-bottom: 12px; border-radius: 9px; }
  .official-final .ai-steps-visual li > div { display: block; }
  .official-final .ai-steps-visual li > div > span { display: block; margin-bottom: 3px; }
  .official-final .ai-steps-visual li > div > strong { font-size: 14px; }
  .official-final .portrait { width: 190px; }
  .official-final.library-page .library-illustration-note { margin-top: -24px; margin-bottom: 32px; }
  .official-final.library-projects .library-item .work-image { width: 100%; }
  .centered-hero .hero-grid { display: flex; flex-direction: column; gap: 0; padding-top: 30px; }
  .centered-hero .hero-copy { display: contents; }
  .centered-hero .hero-eyebrow { order: 0; }
  .centered-hero .hero h1 { order: 1; font-size: clamp(46px,11vw,72px); padding-bottom: 0; }
  .centered-hero .hero h1 br { display: block; }
  .centered-hero .hero h1 span { margin-left: 0; }
  .centered-hero .hero-art-column { order: 2; margin-top: 20px; display: block; width: 100%; }
  .centered-hero .hero-art { margin: 0 -24px; }
  .centered-hero .motion-panel { margin-top: 16px; }
  .centered-hero .hero-jp { order: 3; font-size: 24px; align-self: flex-start; }
  .centered-hero .hero-lead { order: 4; margin-top: 22px; align-self: flex-start; }
  .centered-hero .hero-cta { order: 5; align-self: flex-start; margin-top: 20px; }
}
@media(max-width:430px) {
  .official-final .ai-steps-visual { grid-template-columns: 1fr; }
}
@media(max-width:500px) {
  .official-final .site-header { --logo-width: 96px; }
  .official-final .site-header .header-inner { min-height: 105px; }
}
@media(max-width:640px) { .site-header { --logo-width: 150px; } }
@media(max-width:500px) {
  .site-header { --logo-width: 120px; }
  .site-header .header-inner { min-height: 120px; padding-block: 12px; }
}
@media(max-width:360px) { .site-header { --logo-width: 105px; } }
@media(max-width:320px) { .site-header { --logo-width: 95px; } }

/* Carried over from the previous site: brass item names in the company profile (the darker brass on
   white keeps them readable) and the footer (copyright and chevron page-top link) in the logo colour. */
.official-final .company-info dt { color: var(--unified-brass); }
/* Needs the weight of the unified surface rule that sets the footer text colour. */
.precision-study.official-final .site-footer { color: #c0966d; }
.official-final .page-top { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #c0966d; letter-spacing: .14em; }
.official-final .page-top svg { width: 36px; height: auto; transition: transform .25s; }
.official-final .page-top:hover svg { transform: translateY(-3px); }
/* When the footer wraps on narrow screens the link stays at the right edge. */
.official-final .page-top { margin-left: auto; }
/* Section labels use the previous site's heading typeface; the numbers stay in the display face. */
.official-final .section-label { font-family: 'Bank Gothic', var(--display); font-size: 24px; letter-spacing: .12em; }
.official-final .section-label > span { font-family: var(--display); letter-spacing: .15em; }
.official-final .sub-label { font-size: 18px; }
/* The small line above the hero heading takes the same typeface; the heading itself stays in the display face. */
.precision-study.official-final .hero-eyebrow { font-family: 'Bank Gothic', var(--display); font-size: 16px; letter-spacing: .16em; }
/* The typeface is wide, so the service names are set smaller than before to keep their two lines. */
.precision-study.official-final .service-item h3 { font-family: 'Bank Gothic', var(--display); font-size: 21px; letter-spacing: .04em; line-height: 1.35; }
@media (max-width: 760px) {
  .official-final .section-label { font-size: 20px; }
  .official-final .sub-label { font-size: 16px; }
  .precision-study.official-final .hero-eyebrow { font-size: 14px; }
}
/* Integrated structure (PAGE 30): news under the hero, AI inside SERVICE, members inside ABOUT. */
.integrated-sections .top-news { padding-block: 64px; border-top: 1px solid var(--unified-line); }
.integrated-sections .sub-label { color: var(--unified-accent); }
.integrated-sections .service-ai,
.integrated-sections .about-members { margin-top: var(--section-space); padding-top: var(--section-space); border-top: 1px solid var(--unified-line); }
.integrated-sections .about-members { margin-bottom: var(--section-space); }
/* The SERVICE heading starts at the left edge under its label, like WORKS; the lead sits at the right. */
.integrated-sections .service-intro { grid-template-columns: 1fr auto; align-items: end; }
.integrated-sections .service-intro > .section-label { grid-column: 1/-1; }
.integrated-sections .service-intro > h2 { grid-column: 1; }
.integrated-sections .service-intro > p:not(.section-label) { grid-column: 2; }
/* In its own band the list entrances need no rule or gap above them. */
.integrated-sections .works-collections .collection-links { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 760px) {
  .integrated-sections .top-news { padding-block: 44px; }
}