/* V3.3: bounded repairs after the preserved V3.2 composition score. */
:root { --chapter-offset: 96px; }
html { scroll-padding-block-start: 0; }
.art-directed .chapter { scroll-margin-block-start: var(--chapter-offset); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; }

/* Hero hierarchy is live HTML. Text-free film supplies a quiet system field. */
#home { padding-top: clamp(24px,2.5vw,40px); }
#home .hero-wordmark { font-size: clamp(3.5rem,7.6vw,8rem); }
#home .hero-stage { margin-block: clamp(28px,4vh,44px); }
#home h1 { font-size: clamp(2.4rem,5.1vw,5.3rem); max-inline-size: 24ch; }
#home .hero-art { inset: -12% 0 -12% 44%; opacity: .42; overflow: clip; }
#home .hero-environment::after { background: linear-gradient(90deg,#070e12f2 0%,#070e12b5 48%,#070e1225 100%),linear-gradient(0deg,#070e12,transparent 55%); }
#home .hero-environment .cinematic-poster { opacity: .55; }
#home[data-film-state="playing"] .hero-environment .cinematic-video { opacity: .55; }
#home .hero-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; padding-block: 16px 0; }
#home .hero-product { display: grid; justify-items: start; gap: 8px; }
#home .hero-product-name { font-size: clamp(1.65rem,2.3vw,2.3rem); font-weight: 400; letter-spacing: -.04em; text-decoration: none; line-height: 1.1; }
#home .hero-product > p { margin: 0; font-size: .9375rem; color: #cbd3d0; line-height: 1.45; }
#home .hero-cta { margin-top: 8px; font-size: .875rem; padding: 10px 16px; min-block-size: 44px; }
#home .cinematic-caption { align-self: end; font-size: .75rem; max-inline-size: 28ch; }
#home .cinematic-caption p { max-inline-size: 28ch; }
#home .film-toggle { font-size: .75rem; }
#home > .seam-signal-travel { height: 60px; }

/* The selected word and its line are driven by the same data-selected state. */
#principle .principle-route > li::after { opacity: .32; }
#principle .principle-route > li[data-selected]::after { opacity: 1; height: 2px; }
#principle .principle-route > li[data-selected] h3 { color: #b7f34a; }

/* CampusFlow shared invariants: intrinsic rows and definite gaps. Never clip content. */
#solutions .system-experience { display: grid; grid-template-columns: minmax(0,1fr); gap: 48px; align-items: start; }
#solutions .system-observatory { position: static; inset: auto; margin: 0; padding: 0; min-inline-size: 0; max-inline-size: none; inline-size: 100%; }
#solutions .system-scenes { display: block; margin: 0; min-inline-size: 0; }
#solutions .system-scene { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; min-block-size: 0; block-size: auto; margin: 0; padding: 48px 0; border-bottom: 1px solid #3b5044; scroll-margin-block-start: var(--chapter-offset); }
#solutions .system-scene .stage-copy > p:not(.micro):not(.scene-status):not(.scene-boundary) { color: #c6d2c9; font-size: 1rem; line-height: 1.65; }
#solutions .system-scene h3 { font-size: clamp(2rem,3.2vw,3.25rem); margin-block: 20px; overflow-wrap: anywhere; }
#solutions .scene-status { display: inline-block; border: 1px solid #708665; padding: 5px 10px; margin-top: 12px; font-size: .75rem; line-height: 1.5; }
#solutions [data-system-scene="foundation"] .scene-status { color: #091419; background: #b7f34a; border-color: #b7f34a; }
#solutions .scene-boundary { margin-top: 20px; font-size: .75rem; line-height: 1.6; }
#solutions :is(.atlas-caption .micro,.atlas-state,.atlas-core span,.atlas-key,.system-scene .micro) { font-size: .75rem; line-height: 1.5; }
#solutions .atlas-caption { padding-block: 12px; gap: 16px; }
#solutions .atlas-role-readout { font-size: .8125rem; line-height: 1.5; min-block-size: 0; margin: 0; padding-top: 10px; }
#solutions .atlas-key { margin-top: 12px; }
#solutions .system-scene-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 20px; margin-top: 12px; }
#solutions .system-scene-index a { display: flex; align-items: center; gap: 8px; font-size: .8125rem; min-block-size: 48px; padding: 9px 0; letter-spacing: .025em; line-height: 1.35; overflow-wrap: anywhere; }
#solutions .system-scene-index a span { flex: none; margin: 0; }
#solutions .system-atlas { margin: 16px 0; max-inline-size: 100%; }
#solutions .atlas-connections { overflow: clip; }
#solutions .orbit-node { font-size: .8125rem; letter-spacing: .02em; }
#solutions .orbit-node button { min-block-size: 44px; }
#solutions .atlas-core { padding: 12px 8px; gap: 5px; }
#solutions .atlas-core strong { font-size: clamp(1.7rem,2.5vw,2.35rem); }
#solutions .stage-visual { align-self: center; min-inline-size: 0; margin: 0; }
#solutions .stage-visual svg { inline-size: 100%; max-block-size: 160px; overflow: clip; fill: none; }
#solutions .stage-route { stroke: #809b84; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#solutions .stage-node { fill: #0a1517; stroke: #b7f34a; stroke-width: 1.5; }
#solutions .stage-node--gate { fill: #b7f34a; }
#solutions .stage-visual figcaption { font-size: .8125rem; color: #b9c9bb; line-height: 1.6; margin-top: 8px; }
#solutions .stage-handoff { font-size: .8125rem; line-height: 1.5; color: #b7f34a; padding-top: 8px; margin: 0; }
#solutions .stage-handoff > span { margin-right: 10px; }
#solutions .cinematic-story-wrap { clear: both; margin-block-start: 64px; }

/* WIDE DESKTOP MODE: one persistent atlas with a height-aware visual budget. */
@media (min-width:1440px) and (min-height:760px) {
  #solutions .system-experience { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); column-gap: clamp(48px,5vw,80px); row-gap: 48px; }
  #solutions .system-observatory { position: sticky; top: var(--chapter-offset); }
  #solutions .system-scene-index { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 8px; gap: 0 20px; }
  #solutions .system-atlas { block-size: clamp(210px,28svh,290px); aspect-ratio: auto; margin-block: 12px; }
  #solutions .atlas-caption { padding-block: 8px; }
  #solutions .atlas-state { max-inline-size: 28ch; }
  #solutions .atlas-role-readout { min-block-size: 4.5em; }
  #solutions .atlas-key { margin-top: 8px; }
  #solutions .system-scene { min-block-size: 78svh; align-content: center; }
  #solutions .stage-visual svg { max-block-size: 125px; }
  /* Text enlargement wins over persistence if the real panel exceeds its viewport budget. */
  #solutions .system-observatory[data-atlas-overheight] { position: static; }
  #solutions .system-experience:has([data-atlas-overheight]) { grid-template-columns: minmax(0,1fr); }
  #solutions .system-observatory[data-atlas-overheight] { max-inline-size: 840px; margin-inline: auto; }
  #solutions .system-observatory[data-atlas-overheight] .system-scene-index { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #solutions .system-experience:has([data-atlas-overheight]) .system-scene { min-block-size: 0; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 24px 48px; }
  #solutions .system-experience:has([data-atlas-overheight]) .stage-handoff { grid-column: 1 / -1; }
}

/* COMPACT DESKTOP / TABLET MODE: full atlas, then open narrative rows. */
@media (min-width:768px) and (max-width:1439px), (min-width:1440px) and (max-height:759px) {
  #solutions .system-observatory { max-inline-size: 840px; margin-inline: auto; }
  #solutions .system-atlas { aspect-ratio: 10 / 5.5; max-block-size: 400px; }
  #solutions .system-scene { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 24px 48px; padding-block: 56px; }
  #solutions .stage-handoff { grid-column: 1 / -1; }
  #solutions .system-scene:nth-child(even) .stage-copy { grid-column: 2; }
  #solutions .system-scene:nth-child(even) .stage-visual { grid-column: 1; grid-row: 1; }
}

/* MOBILE MODE: six semantic stages, individual visuals, one vertical Flowline. */
@media (max-width:767px) {
  #solutions .system-experience { gap: 28px; }
  #solutions .system-observatory { position: static; }
  #solutions :is(.system-atlas,.atlas-caption,.atlas-role-readout) { display: none; }
  #solutions .system-scene-index { grid-template-columns: minmax(0,1fr); gap: 0; margin: 0; }
  #solutions .system-scene-index a { min-block-size: 48px; font-size: .875rem; }
  #solutions .atlas-key { line-height: 1.7; }
  #solutions .system-scenes { display: block; padding-inline-start: 16px; }
  #solutions .system-scene { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; padding: 38px 0 38px 22px; margin: 0; border: 0; }
  #solutions .system-scene::before { content: ''; position: absolute; inset: 0 auto 0 0; inline-size: 1px; background: #577449; }
  #solutions .system-scene::after { content: ''; position: absolute; inset: 42px auto auto -5px; inline-size: 11px; block-size: 11px; background: #0a1517; border: 1px solid #b7f34a; }
  #solutions [data-system-scene="foundation"]::after { background: #b7f34a; }
  #solutions .system-scene:last-child::before { bottom: 38px; }
  #solutions .system-scene h3 { font-size: clamp(2rem,8vw,2.6rem); margin-block: 18px; }
  #solutions .system-scene .stage-copy > p:not(.micro):not(.scene-status):not(.scene-boundary) { font-size: .9375rem; }
  #solutions .stage-visual svg { max-block-size: 125px; }
  #solutions .stage-handoff { font-size: .8125rem; }
  #solutions .cinematic-story-wrap { margin-block-start: 40px; padding-block: 32px; }
}

/* Local width containment for decorative geometry, without masking the document. */
.architecture-canvas { min-inline-size: 0; }
#problem .fragments button > span { right: 0; }
#problem .fragments li { padding-inline-end: 20px; }
@media (max-width:560px) {
  #problem .fragments li:nth-child(3n + 2) { max-inline-size: 70%; }
}

/* Official marks have no transformed ancestor. Only the paper behind them moves. */
.art-directed #opening .evidence-sheet { isolation: isolate; transform: none !important; animation: none !important; transition: none !important; background: transparent; border: 0; box-shadow: none; }
#opening .evidence-sheet::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #f8f9f2; border: 1px solid #b3c0b2; border-top: 4px solid #364637; box-shadow: 10px 18px 0 #899d8b13,2px 6px 22px #172c1910; pointer-events: none; }
#opening .evidence-sheet--sec::before { transform: rotate(-2deg); }
#opening .evidence-sheet--bir::before { transform: rotate(2deg); }
.motion-full #opening[data-visible] .evidence-sheet--sec::before { animation: paper-settle-left 900ms var(--scene-ease); }
.motion-full #opening[data-visible] .evidence-sheet--bir::before { animation: paper-settle-right 950ms var(--scene-ease); }
#opening .agency-mark,#opening .agency-mark img { transform: none !important; rotate: none !important; translate: none !important; scale: none !important; animation: none !important; transition: none !important; }

/* Six approved semantic refinements. No replacement of the other exit seams. */
.semantic-frame .seam-product-frame { position: absolute; inset: 0; transform-origin: center bottom; transform: scaleX(calc(.66 + var(--seam,1)*.34)); }
.semantic-frame .seam-product-frame > span { position: absolute; top: 0; left: 8%; font-size: .75rem; color: #c3d2c7; }
.semantic-frame .frame-edges { stroke: #819b8b; stroke-dasharray: none; stroke-dashoffset: 0; }
.semantic-frame .topology-edges { opacity: var(--seam,1); }
.semantic-frame .topology-nodes { opacity: var(--seam,1); fill: #b7f34a; stroke: none; }
.semantic-frame svg { transform: none; }
.semantic-workflow { background: linear-gradient(#0a1517,#101a21); }
.semantic-workflow svg { transform: none; }
.semantic-workflow :is(.seam-specific,.seam-general) { position: absolute; inset-inline: 10%; display: flex; justify-content: space-between; gap: 16px; font-size: .75rem; line-height: 1.4; }
.semantic-workflow .seam-specific { top: 12%; opacity: calc(1 - var(--seam,1)*.85); }
.semantic-workflow .seam-general { bottom: 10%; color: #c6d2c9; opacity: calc(.35 + var(--seam,1)*.65); }
.semantic-workflow rect { fill: #101a21; stroke: #b7f34a; }
.semantic-authority { background: linear-gradient(#eef2ef 0%,#cbd3d0 36%,#3a4a49 66%,#0b141b 100%); }
.semantic-authority svg { stroke: #668a45; }
.semantic-authority rect { fill: #b7f34a; stroke: #365028; }
.seam-ledger-label { position: absolute; top: 0; left: 8%; color: #2c4629; font-size: .75rem; }
.seam-spine-label { position: absolute; left: 53%; bottom: 15%; font-size: .75rem; color: #d7e4cf; }
.semantic-chronology { background: linear-gradient(#1b1d1b,#0b131b); height: 190px; }
.semantic-chronology svg { transform: none; }
.seam-company-record { position: absolute; left: 10%; top: 0; display: flex; gap: 30px; font-size: .75rem; color: #dddcd0; }
.seam-chronology-label { position: absolute; right: 10%; bottom: 28%; color: #b9ccc3; font-size: .75rem; }
.semantic-update { height: 230px; color: #e4ebe8; background: linear-gradient(#0b131b,#16222b); }
.seam-update-record { position: relative; margin-inline: auto; inline-size: calc(70% + var(--seam,1)*14%); max-inline-size: 1320px; border-block: 1px solid #596d73; padding: 18px 0; display: grid; gap: 10px; }
.seam-record-kind,.seam-record-subject { font-size: .75rem; color: #bdd0c8; }
.seam-record-date { font-size: clamp(2.2rem,5vw,5rem); letter-spacing: -.05em; line-height: 1.1; }
.seam-update-record i { position: absolute; left: 0; bottom: -1px; inline-size: 100%; block-size: 2px; background: #b7f34a; transform: scaleX(var(--seam,1)); transform-origin: left; }
.semantic-command { height: 190px; background: linear-gradient(#e2e5dc,#b5c3b6 28%,#0b1418 85%); }
.seam-index-field { position: relative; margin: 15px auto 0; inline-size: calc(88% - var(--seam,1)*16%); max-inline-size: 1040px; min-inline-size: 0; padding: 18px 22px; border: 1px solid #809781; background: #0e1c19; color: #eef2ef; }
.seam-document-index,.seam-search-label { display: block; font-size: .75rem; line-height: 1.5; }
.seam-document-index { color: #bbd0ba; opacity: calc(1 - var(--seam,1)*.8); }
.seam-search-label { color: #b7f34a; margin-top: 8px; opacity: calc(.2 + var(--seam,1)*.8); }
.seam-search-prompt { display: flex; justify-content: space-between; gap: 14px; margin-top: 6px; font-size: clamp(.875rem,1.6vw,1.4rem); }
.seam-search-prompt b { font-weight: 400; color: #b7f34a; }

/* Deep ink retains structure; contact retains silence. */
#principle { background: radial-gradient(ellipse at 80% 28%,#182b3b65,transparent 62%),linear-gradient(110deg,transparent 72%,#7d9cac08 72% 72.1%,transparent 72.1%),#080f17; }
#ask { background: radial-gradient(ellipse at 50% 65%,#253b5155,transparent 60%),#0b1418; }
#contact,.art-directed .site-footer { background: #020304; }
#contact .final-signal i { box-shadow: 0 0 12px #b7f34a25; }

@media (max-width:800px) {
  :root { --chapter-offset: 24px; }
  #home .hero-footer { grid-template-columns: minmax(0,1fr); }
  #home .cinematic-caption { grid-column: 1; justify-content: start; max-inline-size: none; }
  #home .cinematic-caption p { text-align: left; }
  #home .hero-art { inset: 0 0 0 34%; opacity: .25; }
  #home h1 { font-size: clamp(2rem,7.8vw,3.9rem); }
  #home .hero-stage { margin-block: 38px; }
  .seam-company-record { display: grid; gap: 4px; left: 8%; }
  .seam-chronology-label { right: 8%; bottom: 12%; }
  .seam-spine-label { left: 54%; right: 4%; font-size: .75rem; }
  .seam-ledger-label { right: 8%; }
}
@media (max-width:560px) {
  #home .hero-wordmark { font-size: clamp(3.5rem,16vw,5.5rem); }
  #home .hero-signature { font-size: .75rem; }
  .art-directed :is(.semantic-frame,.semantic-workflow,.semantic-authority,.semantic-chronology,.semantic-update,.semantic-command) { height: 180px; }
  .semantic-workflow :is(.seam-specific,.seam-general) { inset-inline: 6%; gap: 10px; font-size: .75rem; }
  .seam-index-field { padding: 14px 16px; }
  .seam-document-index { font-size: .75rem; }
  #opening .evidence-sheet--sec::before { transform: rotate(-1deg); }
  #opening .evidence-sheet--bir::before { transform: rotate(1deg); }
}
.motion-static #opening .evidence-sheet::before { animation: none !important; transform: none !important; }
.motion-static .seam-product-frame { transform: none; }
@media (prefers-reduced-motion:reduce) {
  #opening .evidence-sheet::before { animation: none !important; transform: none !important; }
  .seam-product-frame { transform: none !important; }
}
@media (forced-colors:active) {
  #opening .evidence-sheet::before { background: Canvas; border-color: CanvasText; box-shadow: none; animation: none !important; transform: none !important; }
  #solutions .scene-status,#solutions .stage-node { background: Canvas; fill: Canvas; color: CanvasText; border-color: CanvasText; stroke: CanvasText; }
  #solutions .stage-route { stroke: CanvasText; }
  #solutions .stage-node--gate { fill: Highlight; }
  #solutions .system-scene::before,#solutions .system-scene::after { background: CanvasText; border-color: CanvasText; }
}
@media print {
  #solutions .system-experience,#solutions .system-scene { display: block; }
  #solutions .system-observatory { position: static; }
  #opening .evidence-sheet::before { animation: none !important; transform: none !important; }
}