/* Four complete environments; background, title and character move at different depths. */
/* This stylesheet is home-only; section offsets already account for the header. */
html { scroll-padding-top: 0; }
.home-page { --scene-gutter: clamp(24px, 4.2vw, 80px); --header-offset: 112px; --header-surface-height: 102px; }
.home-page .skip-link { z-index: 100; }
.home-page .site-header { position: fixed; z-index: 30; inset: 0 0 auto; width: 100%; max-width: none; height: 102px; margin: 0; padding-inline: var(--scene-gutter); gap: 28px; border: 0; color: var(--on-dark); background: transparent; }
.home-page .site-header .wordmark { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.home-page .site-header .scene-nav { margin-left: auto; gap: 28px; font-size: 12px; }
.scene-nav a { white-space: nowrap; }
.home-page .scene-nav a.current { text-decoration: none; box-shadow: 0 1px currentColor; }
.home-page .scene-nav a.current, .home-page .scene-nav a:hover { color: var(--header-accent, var(--accent)); }
.home-page .scene-nav a[href="#intro"] { --header-accent: #b9d5ff; }
.home-page .scene-nav a[href="#healthcare"] { --header-accent: #b4dedb; }
.home-page .scene-nav a[href="#movement"] { --header-accent: #d0e6a9; }
.home-page .scene-nav a[href="#life"] { --header-accent: #e4cde6; }
.home-page .scene-nav a[href="#archive"] { --header-accent: var(--accent); }
.header-contact { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 12px; white-space: nowrap; }
.home-page .site-header.is-past-story { background: var(--paper); border-bottom: 1px solid var(--paper); }

.story { --scene-height: 100svh; --scene-hold: 160svh; position: relative; color: var(--on-dark); background: var(--scene-intro); }
.story-stage { position: relative; isolation: isolate; }
.story-anchor { display: block; height: 0; scroll-margin-top: 0; }
.story-panel { --chapter-accent: #b9d5ff; --thumbnail-tone: 16, 28, 50; position: relative; isolation: isolate; min-height: var(--scene-height); height: var(--scene-height); overflow: clip; background: #101c32; }
[data-panel="1"] { --chapter-accent: #b4dedb; --thumbnail-tone: 16, 41, 44; background: #10292c; }
[data-panel="2"] { --chapter-accent: #d0e6a9; --thumbnail-tone: 20, 43, 28; background: #142b1c; }
[data-panel="3"] { --chapter-accent: #e4cde6; --thumbnail-tone: 38, 27, 45; background: #261b2d; }
.story-ready .story-panel { position: sticky; top: 0; }
.story-hold { display: none; }
.story-ready .story-hold { display: block; height: var(--scene-hold); pointer-events: none; }
.scene-world { position: absolute; z-index: -3; width: 100%; height: 118%; inset: -9% 0 auto; object-fit: cover; object-position: 50% 65%; transform: translate3d(0, var(--world-y, 0px), 0); pointer-events: none; }
.story-panel::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, #050b1640, transparent 30%, #050b160a 55%, #050b1699); }
.intro-panel::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 65% 45% at 50% 70%, #071730bb 0%, #06122470 50%, transparent 80%), linear-gradient(180deg, #050b1655 0%, transparent 25%, transparent 65%, #02060ee6 100%); }
.story-panel::before { content: attr(data-word); position: absolute; z-index: -2; top: 24%; left: 4%; width: 92%; text-align: center; font: 800 clamp(100px, 22vw, 360px)/.8 var(--font-display); letter-spacing: -.045em; color: var(--chapter-accent); opacity: calc(.88 * var(--type-opacity, 1)); transform: translate3d(0, var(--type-y, 0px), 0); pointer-events: none; }
[data-panel="0"]::before { display: none; }
[data-panel="2"]::before { font-style: italic; }
[data-panel="3"]::before { font-size: 32vw; }
[data-panel="3"] .scene-world { top: -4%; height: 108%; }
.story-portrait { position: absolute; z-index: 1; left: 73%; bottom: 6%; width: min(54vw, 65svh); height: 84%; translate: -50% 0; transform: translate3d(0, var(--character-y, 0px), 0); opacity: var(--character-opacity, 1); pointer-events: none; }
.story-portrait:not(.sports-portrait)::before { content: ''; position: absolute; left: 28%; bottom: 3%; width: 48%; height: 2.5%; border-radius: 50%; background: #02060a99; filter: blur(7px); }
.story-poster { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 12px #050b1655); }
.systems-robot { position: absolute; z-index: 1; left: 6%; bottom: 12%; height: 77%; width: auto; aspect-ratio: 1024 / 1536; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 18px #02071295); pointer-events: none; transform: translate3d(var(--robot-x, 0px), var(--robot-y, 0px), 0); opacity: var(--robot-opacity, 1); }
.story[data-motion="on"] [data-panel="1"].is-current.robot-arrived .systems-robot { animation: robot-drift 9s ease-in-out infinite; }
@keyframes robot-drift {
  0%, 25%, 100% { translate: 0 0; }
  62% { translate: 14px -12px; }
}
[data-panel="0"] .story-portrait { left: 50%; bottom: 46px; width: min(72vw, 72svh); height: min(72vw, 72svh); }
/* The chair touches the floor around 92% of the square source, not its bottom edge. */
[data-panel="0"] .story-portrait::before { content: ''; position: absolute; left: 7%; bottom: 3.5%; width: 86%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #01040bf5 0%, #020713c0 40%, #02071360 65%, transparent 84%); filter: blur(clamp(6px, 1vw, 10px)); pointer-events: none; z-index: 0; }
[data-panel="0"] .story-portrait::after { content: ''; position: absolute; left: 9%; bottom: 6.5%; width: 82%; height: 3%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #010306f5 0%, #02050fd9 42%, #02050f70 68%, transparent 88%); filter: blur(3px); pointer-events: none; z-index: 3; }
[data-panel="0"] .story-poster { filter: contrast(1.03) brightness(0.95) saturate(1.04); -webkit-box-reflect: none; }
[data-panel="1"] .story-portrait { left: 74%; width: min(65vw, 76svh); height: min(65vw, 76svh); bottom: 4%; scale: .94; transform-origin: center bottom; }
[data-panel="1"] .story-portrait:not(.sports-portrait)::before { left: 2%; bottom: 4%; width: 96%; height: 4%; border-radius: 50%; background: radial-gradient(ellipse at 22% 50%, #020712cc 0%, #02071270 45%, transparent 75%), radial-gradient(ellipse at 74% 50%, #020712e0 0%, #02071285 50%, transparent 80%); filter: blur(10px); }
[data-panel="1"] .story-poster { transform: scaleX(-1); translate: 14% -7%; }
[data-panel="3"] .story-portrait { --life-character-scale: .94; left: 69%; width: min(62vw, 76svh); }
[data-panel="3"] .story-poster { transform: scaleX(-1) scale(var(--life-character-scale)); transform-origin: center bottom; }
/* Character and lamp share one square coordinate system at every viewport size. */
.life-lamp { position: absolute; z-index: 1; left: 78%; bottom: 6%; width: calc(100% * var(--life-character-scale) * .7); height: auto; max-width: none; translate: -50% 0; pointer-events: none; }
.sports-portrait { left: -8%; bottom: 10%; width: 72%; height: 78%; translate: none; }
.sports-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
.sports-rider { filter: brightness(.95) saturate(.96) drop-shadow(0 14px 12px #050b1655); }
.chapter-copy { position: absolute; z-index: 2; left: var(--scene-gutter); bottom: 12%; width: 43%; max-width: 650px; }
.intro-note { position: absolute; z-index: 2; top: clamp(124px, 18vh, 176px); bottom: auto; left: 50%; translate: -50% 0; width: min(92vw, 1000px); max-width: 1000px; text-align: center; text-shadow: 0 2px 18px #071126; }
.intro-note h1 { font: 800 clamp(48px, 6.8vw, 104px)/1 var(--font-display); letter-spacing: -.025em; margin: 0 auto; text-align: center; }
.intro-note p { margin-top: 8px; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.5; color: #e5edfa; text-align: center; }
[data-panel="2"] .chapter-copy { left: auto; right: var(--scene-gutter); }
/* The oversized scene title leads; chapter copy enters as one complete group. */
.intro-note h1 { transform: none; opacity: 1; }
.intro-note p { transform: translate3d(0, var(--type-y, 0px), 0); opacity: var(--type-opacity, 1); }
.chapter-copy { transform: translate3d(0, var(--content-y, 0px), 0); opacity: var(--content-opacity, 1); }
.story .chapter-copy:focus-within {
  transform: none;
  opacity: 1;
}

.story-kicker { display: flex; align-items: center; gap: 14px; color: var(--chapter-accent); font-size: 11px; letter-spacing: .05em; }
.story-kicker > span { font: 12px var(--font-display); }
.scene-statement { font-size: clamp(20px, 2vw, 30px); line-height: 1.4; letter-spacing: -.05em; font-weight: 500; margin: 12px 0 22px; text-shadow: 0 2px 20px #050b16; }
.story-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.chapter-all { position: relative; display: inline-flex; align-items: center; gap: 32px; min-height: 40px; color: var(--chapter-accent); font-size: 11px; }
.chapter-all::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% + .65em + 5px); height: 1px; background: currentColor; opacity: 0; pointer-events: none; }
.chapter-all:hover { text-decoration: none; }
.chapter-all:hover::after, .chapter-all:focus-visible::after { opacity: 1; }
.story-footer { position: fixed; z-index: 20; bottom: 20px; left: var(--scene-gutter); right: var(--scene-gutter); display: flex; align-items: center; gap: 24px; color: var(--on-dark); text-shadow: 0 1px 10px #050b16; }
.story-footer[hidden] { display: none; }
.story-next { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 11px; }
.intro-scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 52px; translate: -50% 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--on-dark); }
.intro-scroll-triangles { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.intro-scroll-triangles i { display: block; width: 6px; height: 4px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: .65; }
.story[data-motion="on"] .intro-panel.is-current .intro-scroll-triangles i { animation: intro-scroll-hint 1.8s ease-in-out infinite; }
.story[data-motion="on"] .intro-panel.is-current .intro-scroll-triangles i:nth-child(2) { animation-delay: .15s; }
.story[data-motion="on"] .intro-panel.is-current .intro-scroll-triangles i:nth-child(3) { animation-delay: .3s; }
@keyframes intro-scroll-hint {
  0%, 100% { transform: translateY(-2px); opacity: .35; }
  55% { transform: translateY(3px); opacity: .9; }
}
.scroll-line { width: 24px; height: 1px; background: currentColor; }
.story-motion { min-height: 44px; border: 0; background: none; font-size: 11px; color: #d5dde8; }
.story-progress { display: flex; align-items: center; margin-left: auto; }
.story-progress a { width: 30px; height: 44px; display: grid; place-items: center; }
.story-progress a span { width: 4px; height: 4px; border-radius: 8px; background: currentColor; opacity: .4; transition: width .2s; }
.story-progress a[aria-current] span { width: 18px; opacity: 1; }
.chapter-count { font-size: 9px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
/* Archive and contact keep the same visual language, without a services section. */
.home-page .section { padding-block: 72px; }
.home-page .work-section { width: 100%; max-width: none; margin-inline: 0; padding-inline: max(var(--gutter), calc((100% - 1400px) / 2)); padding-block: 44px; background: var(--paper); scroll-margin-top: var(--header-surface-height); }
/* Match every archive thumbnail overlay to the section background (#101b2d). */
.home-page .work-section .portfolio-card { --thumbnail-tone: 16, 27, 45; }
.archive-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; list-style: none; cursor: pointer; padding: 16px 0; font-size: 25px; letter-spacing: -.8px; }
.archive-disclosure > summary::-webkit-details-marker { display: none; }
.archive-disclosure > summary small { display: block; font-family: var(--font-display); font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -.025em; color: var(--accent); margin-bottom: 14px; }
.archive-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.archive-plus { font-weight: 300; font-size: 40px; }
.archive-disclosure[open] .archive-plus { transform: rotate(45deg); }
.archive-disclosure .when-open, .archive-disclosure[open] .when-closed { display: none; }
.archive-disclosure[open] .when-open { display: inline; }
.archive-content { padding: 12px 0 24px; }
.home-page .project-card { scroll-margin-top: var(--header-offset); border: 0; }
.contact-section { background: #13233c; scroll-margin-top: var(--header-offset); }
.contact-inner { display: block; }
.contact-copy .eyebrow { font-family: var(--font-display); font-size: clamp(48px, 8vw, 110px); font-weight: 800; line-height: 1; letter-spacing: -.025em; color: var(--accent); }
.contact-copy h2 { font-size: clamp(25px, 3vw, 42px); line-height: 1.4; margin-top: 24px; }
.contact-copy h2 br { display: none; }
.contact-cta { display: inline-flex; align-items: center; gap: 65px; margin-top: 28px; padding: 14px 22px; background: var(--accent); color: var(--paper); font-size: 14px; font-weight: 600; }
.contact-cta > span { font-size: 22px; }
.contact-cta:hover { background: var(--accent-hover); }
.contact-note { display: block; color: var(--on-dark-muted); font-size: 11px; margin-top: 12px; }
.home-page footer { padding-block: 27px; }
.home-page footer .wordmark { font-size: 26px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .home-page .site-header { gap: 18px; }
  .home-page .site-header .scene-nav { gap: 18px; font-size: 11px; }
}
@media (max-width: 599px), (max-width: 1200px) and (orientation: portrait), (max-width: 860px) and (max-height: 499px) {
  .home-page { --header-offset: 134px; --header-surface-height: 128px; }
  .home-page .site-header { height: 72px; padding-inline: 22px; gap: 15px; }
  .home-page .site-header .wordmark { font-size: 27px; gap: 6px; }
  .home-page .site-header::before { content: ''; position: absolute; z-index: -1; inset: 0 0 -56px; background: linear-gradient(#07101be8, #07101b99 75%, transparent); pointer-events: none; }
  .home-page .site-header.is-past-story::before { background: var(--paper); }
  .home-page .site-header .scene-nav { position: absolute; top: 74px; left: 22px; right: 22px; justify-content: space-between; gap: 8px; margin: 0; border-bottom: 1px solid #ffffff30; font-size: 10px; }
  .home-page .scene-nav a { padding: 10px 0; min-height: 44px; }
  .header-contact { margin-left: auto; gap: 10px; font-size: 11px; }
  .story { --scene-hold: 65svh; }
  .story-panel { height: max(var(--scene-height), 660px); min-height: 660px; }
  .scene-world { object-position: 100% 50%; }
  /* Mobile sources include generated foreground beyond the original image. */
  [data-panel="1"] .scene-world,
  [data-panel="3"] .scene-world {
    top: -9%;
    height: 118%;
    object-position: 100% 50%;
    transform: translate3d(0, var(--world-y, 0px), 0);
  }
  [data-panel="2"] .scene-world { object-position: 30% 50%; }
  [data-panel="3"] .scene-world { top: -3%; height: 108%; }
  .story-panel::before { top: 23%; left: 3%; width: 94%; font-size: 26vw; }
  [data-panel="0"]::before { display: none; }
  [data-panel="2"]::before { font-size: 31vw; }
  [data-panel="3"]::before { font-size: 43vw; }
  .story-portrait { left: 63%; top: 142px; bottom: auto; height: var(--portrait-height, calc(100% - 405px)); width: 74%; }
  [data-panel="0"] .story-portrait { left: 50%; top: 265px; width: min(88vw, 420px); height: min(88vw, 420px); }
  [data-panel="1"] .story-portrait { left: 54%; top: 144px; width: min(92vw, 440px); height: min(92vw, 440px, var(--portrait-height, 440px)); scale: .84; transform-origin: center top; }
  [data-panel="1"] .story-portrait:not(.sports-portrait)::before { bottom: 9%; height: 3%; filter: blur(6px); }
  [data-panel="3"] .story-portrait { --life-character-scale: 1.05; left: 54%; top: 162px; width: 88%; }
  .life-lamp { left: 76%; }
  .sports-portrait { left: -22%; top: 164px; width: 120%; height: var(--portrait-height, calc(100% - 414px)); translate: none; }
  .sports-portrait img { object-position: left center; }
  .intro-note { left: 50%; translate: -50% 0; top: 188px; bottom: auto; width: calc(100% - 44px); text-align: center; }
  .intro-note h1 { font-size: clamp(38px, 10.5vw, 60px); }
  .intro-note p { font-size: 17px; margin-top: 8px; }
  .chapter-copy, [data-panel="2"] .chapter-copy { left: 22px; right: auto; width: calc(100% - 44px); bottom: 48px; }
  .scene-statement { font-size: 20px; margin: 8px 0 14px; }
  .story-kicker { font-size: 10px; gap: 10px; }
  .story-projects { gap: 8px; }
  .chapter-all { min-height: 36px; font-size: 10px; }
  .story-footer { bottom: 10px; left: 22px; right: 22px; gap: 14px; }
  .scroll-line, .chapter-count { display: none; }
  .story-next, .story-motion { font-size: 10px; }
  .story-progress a { width: 26px; }
  .home-page .section { padding-block: 52px; }
  .home-page .work-section { padding-block: 28px; }
  .home-page .work-section .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .archive-disclosure > summary { font-size: 20px; }
  .archive-plus { font-size: 31px; }
  .contact-copy h2 { font-size: 25px; }
  .contact-copy h2 br { display: block; }
}
/* Small/short screens use ordinary document flow, with all content available. */
.story:not(.story-ready) .story-panel { position: relative; }
@media (min-width: 861px) and (max-height: 680px) {
  .story-panel { min-height: 650px; height: max(var(--scene-height), 650px); }
  .chapter-copy { bottom: 10%; }
}

/* A square composition keeps characters and props in the same proportions.
   story.js fits it between the header/copy, without changing animation transforms. */
.story-panel:not([data-panel="2"]) .scene-world {
  top: auto;
  bottom: 0;
  height: calc(100% + 48px);
  object-position: 50% 100%;
}
.story-panel:not([data-panel="2"]) .story-portrait {
  width: var(--visual-size, min(60vw, 65svh));
  height: var(--visual-size, min(60vw, 65svh));
  top: var(--visual-top, auto);
  bottom: 6%;
}
[data-panel="0"] .story-portrait { bottom: 76px; }
[data-panel="1"] .story-portrait { scale: .94; transform-origin: center bottom; }
[data-panel="3"] .story-portrait {
  --life-character-scale: .94;
  scale: var(--life-group-scale, 1);
  transform-origin: center bottom;
}
[data-panel="1"]::before {
  top: var(--visual-title-top, 24%);
  font-size: min(22vw, 38svh, 360px);
}
[data-panel="3"]::before {
  top: var(--visual-title-top, 24%);
  font-size: min(32vw, 48svh, 480px);
}
@media (max-width: 599px), (max-width: 1200px) and (orientation: portrait), (max-width: 860px) and (max-height: 499px) {
  .story-panel:not([data-panel="2"]) { min-height: max(660px, var(--scene-min-height, 0px)); }
  .story-panel:not([data-panel="2"]) .chapter-copy { bottom: 48px; }
  .story-panel:not([data-panel="2"]) .story-portrait { left: 50%; bottom: auto; }
  .story-panel:not([data-panel="2"]) .scene-world { object-position: 100% 100%; }
  [data-panel="1"]::before { font-size: min(26vw, 25svh, 280px); }
  [data-panel="3"]::before { font-size: min(43vw, 36svh, 440px); }
  .life-lamp { left: 78%; }
}
/* Archive columns are independent of the three featured cards in each scene. */
@media (min-width: 600px) and (max-width: 1100px),
       (min-width: 540px) and (max-width: 1100px) and (orientation: landscape) and (any-pointer: coarse) {
  .home-page .work-section .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* One tablet layout for unfolded phones and tablets, including iPad mini.
   Select by available space and orientation, independent of device/pointing hardware. */
@media (min-width: 600px) and (max-width: 1200px) and (min-height: 500px) {
  .story .story-panel { height: var(--scene-height); min-height: var(--scene-min-height, 0px); }
  .story .intro-note { top: 144px; }
  .story .intro-note h1 { font-size: clamp(38px, 7vw, 60px); }
  .story-projects { width: min(100%, var(--scene-card-width, 480px)); margin-inline: 0 auto; }
  /* Use the stable small viewport height so collapsing browser bars do not
     change card sizes. Short portrait tablets use 400px; tall ones reach 480px. */
  .story[data-orientation="portrait"] {
    --scene-card-width: clamp(400px, calc(100svh - 500px), 480px);
  }
  .story[data-orientation="portrait"] [data-panel="2"] .chapter-copy {
    left: auto;
    right: 22px;
    width: min(calc(100% - 44px), var(--scene-card-width, 480px));
  }
  /* Keep the left offset small and bounded so the 3:2 composition remains visible. */
  .story[data-orientation="portrait"] .sports-portrait {
    left: clamp(-28px, -3vw, -18px);
    top: var(--visual-top);
    bottom: auto;
    width: calc(var(--visual-size) * 1.5);
    height: var(--visual-size);
    translate: none;
  }
  .story[data-orientation="portrait"] .sports-portrait img { object-position: left bottom; }
}
@media (min-width: 600px) and (max-width: 1200px) and (min-height: 500px) and (orientation: landscape) {
  .home-page .site-header { padding-inline: 22px; gap: 12px; }
  .home-page .site-header .wordmark { font-size: 26px; }
  .home-page .site-header .scene-nav { gap: 12px; font-size: 10px; }
  .home-page .header-contact { gap: 10px; font-size: 11px; }
  .story .chapter-copy { left: 24px; right: auto; bottom: 6%; width: 43%; }
  .story [data-panel="2"] .chapter-copy { left: auto; right: 24px; }
  .story .scene-statement { font-size: clamp(18px, 2.3vw, 24px); }
}

/* Fill the visible browser area when mobile address/tool bars retract.
   Keep scroll-hold distances on svh so their length does not change with the bars. */
@supports (height: 100dvh) {
  .story { --scene-height: 100dvh; }
}