/* Isolated v3 overrides. Shared v1/v2 assets stay unchanged. */
:root { --orange-deep: #b84213; }
/* Adjacent sections share one compact vertical rhythm instead of two large paddings. */
.section { padding-block: clamp(40px, 4vw, 64px); }
.section + .section { padding-top: clamp(24px, 2vw, 32px); }
.sec-head { margin-bottom: clamp(28px, 3vw, 40px); }
.flow-head { margin-bottom: 0; }
.svc + .svc { margin-top: clamp(44px, 5vw, 72px); }
.why .profile { margin-top: clamp(36px, 4vw, 56px); }
.title-3 .ln > * { white-space: normal; }
.title-3 { font-size: clamp(32px,3.6vw,52px); }
.fl-stages { margin-top: 36px; }
.fl-note { color: #686058; }
.demo-label { margin-bottom: 12px; font-size: 12px; color: #655b53; }
.svc-proof { color: #655b53; }
.contact-compose { display: flex; width: fit-content; margin: 14px 0; }
.contact-title { font-size: clamp(40px,5vw,72px); }
.contact .email { overflow-wrap: anywhere; }
/* Film motion is managed by its clock, including reduced-motion still frames. */
.hero-motion-v3 { height: 100svh; min-height: 560px; background: var(--canvas); }
.hero-motion-v3 .film-note { display: none; }
.hero-bridge { background: #fff; border-bottom: 1px solid var(--line); }
.hero-bridge-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 24px; }
.hero-bridge p { max-width: 760px; font-size: 14px; color: var(--muted); }
.hero-bridge strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 16px; }
.hero-bridge .btn { flex-shrink: 0; }
@media (max-width: 600px) {
 .hero-bridge-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
 .hero-motion-v3 { min-height: 620px; }
}

/* Final brand card stays on screen after a single film playback. */
.film-once .brand-finale { animation: scene-on 1ms step-end var(--s) both; text-align: left; }
.finale-wrap { width: 1520px; }
.finale-eyebrow { font: 500 18px/1.4 var(--text); letter-spacing: .22em; color: var(--muted); }
.finale-title { margin: 44px 0 0; font: 500 122px/1.14 var(--display); letter-spacing: -.05em; }
.finale-title > span { display: block; }
.finale-accent { color: var(--orange); }
.finale-spark { display: inline-block; width: 64px; height: 66px; margin-left: 24px; vertical-align: .06em; }
.finale-spark .spark { width: 100%; height: 100%; }
.finale-description { margin-top: 38px; font-size: 27px; line-height: 1.55; color: var(--muted); }
.finale-actions { display: flex; align-items: center; gap: 38px; margin-top: 40px; font-size: 23px; font-weight: 600; }
.finale-cta { padding: 22px 32px; border-radius: 999px; background: var(--orange); color: white; text-decoration: none; }
.finale-link { text-decoration: none; }
.finale-cta span, .finale-link span { margin-left: 14px; }
.finale-wrap > * { animation: finale-in 850ms var(--ease-out) calc(var(--s) + 200ms) both; }
.finale-wrap .finale-title { animation-delay: calc(var(--s) + 350ms); }
.finale-wrap .finale-description { animation-delay: calc(var(--s) + 600ms); }
.finale-wrap .finale-actions { animation-delay: calc(var(--s) + 850ms); }
@keyframes finale-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.film-once.is-finished .chapters { visibility: hidden; }
.film-once .film-toggle[hidden] { display: none; }
.film-once.is-portrait .finale-wrap { width: 900px; }
.film-once.is-portrait .finale-title { font-size: 87px; }
.film-once.is-portrait .finale-spark { width: 48px; height: 50px; margin-left: 16px; }
.film-once.is-portrait .finale-description { font-size: 35px; }
.film-once.is-portrait .finale-actions { font-size: 30px; flex-direction: column; align-items: flex-start; gap: 32px; }
.film-once.is-portrait .finale-cta { padding: 28px 38px; }

/* Ambient finish: CSS animations begin after clock.collect(), so the stopped
   film timeline does not freeze the shuttle. Replay removes is-finished. */
.film-once .brand-finale {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 88% 34%, #ffd9ad 0%, transparent 48%),
    radial-gradient(ellipse at 64% 100%, #ffe1cc 0%, transparent 53%),
    linear-gradient(125deg, #fffcf7 12%, #fff5e9 62%, #ffeddb);
}
.brand-finale::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #cf804345 1.3px, transparent 1.8px) 0 0 / 26px 26px;
  mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
}
.brand-finale::after {
  content: ""; position: absolute; right: -160px; top: 120px;
  width: 760px; height: 760px; z-index: -1; pointer-events: none;
  border-radius: 40% 60% 64% 36% / 58% 40% 60% 42%;
  background: linear-gradient(145deg, #ffca7840, #f2652214);
  box-shadow: inset 0 0 100px #fff8;
  transform: rotate(-18deg);
}
.finale-spark { perspective: 260px; }
.finale-spark .spark { overflow: visible; }
.finale-spark .spark-top { transform-box: fill-box; transform-origin: center; }
.finale-spark .spark-shadow { transform-box: fill-box; transform-origin: center; }
.motion-ok .film-once.is-finished .finale-spark .spark-top {
  animation: finale-shuttle-float 4.2s ease-in-out infinite;
}
.motion-ok .film-once.is-finished .finale-spark .spark-shadow {
  animation: finale-shuttle-shadow 4.2s ease-in-out infinite;
}
.motion-ok .film-once.is-finished .brand-finale::after {
  animation: finale-glow-drift 16s ease-in-out infinite alternate;
}
.film-once.ambient-held .finale-spark .spark-top,
.film-once.ambient-held .finale-spark .spark-shadow,
.film-once.ambient-held .brand-finale::after { animation-play-state: paused !important; }
@keyframes finale-shuttle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-3px) rotate(-8deg); }
  65% { transform: translateY(-2px) rotate(8deg); }
}
@keyframes finale-shuttle-shadow {
  0%, 100% { transform: scaleX(1); opacity: .8; }
  40%, 65% { transform: scaleX(.65); opacity: .35; }
}
@keyframes finale-glow-drift {
  from { transform: translate(0, 0) rotate(-18deg); }
  to { transform: translate(-70px, 35px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .film-once.is-finished .finale-spark .spark-top,
  .film-once.is-finished .finale-spark .spark-shadow,
  .film-once.is-finished .brand-finale::after { animation: none; }
}

/* Direct hero: static HTML for the message and CTA, ambient motion only. */
.hero-finale { --s: 0ms; overflow: hidden; }
.hero-finale .brand-finale { position: relative; display: grid; align-items: center; min-height: min(900px, 100svh); padding-block: 140px 90px; overflow: hidden; }
.hero-finale .finale-wrap { width: 100%; position: relative; }
.hero-finale .finale-eyebrow { font-size: 12px; }
.hero-finale .finale-title { font-size: clamp(40px, 5.8vw, 86px); margin-top: 32px; }
.hero-finale .finale-spark { width: .55em; height: .57em; margin-left: .2em; }
.hero-finale .finale-description { font-size: clamp(16px, 1.5vw, 21px); margin-top: 28px; }
.hero-finale .finale-actions { font-size: 16px; margin-top: 32px; gap: 28px; flex-wrap: wrap; }
.hero-finale .finale-cta { padding: 18px 26px; }
.hero-finale .brand-finale::after { width: 52vw; height: 52vw; right: -12vw; top: 10%; }
.hero-finale .brand-finale::before { background-size: 20px 20px; }
@media (max-width: 600px) {
 .hero-finale .brand-finale { min-height: 660px; padding-block: 128px 70px; }
 .hero-finale .finale-title { font-size: clamp(28px, 7.6vw, 44px); letter-spacing: -.045em; }
 .hero-finale .finale-actions { flex-direction: column; align-items: flex-start; gap: 22px; }
 .hero-finale .finale-description br { display: none; }
 .hero-finale .brand-finale::after { width: 90vw; height: 90vw; top: 30%; right: -45vw; }
}
@media (prefers-reduced-motion: reduce) {
 .hero-finale .finale-wrap > * { animation: none; }
}

/* Flowing silk stays behind the content, with an opaque reading area on the left. */
.hero-finale .brand-finale { background: radial-gradient(ellipse at 92% 45%, #ffe5c6, transparent 65%), #fffaf3; }
.hero-finale .brand-finale::before, .hero-finale .brand-finale::after { display: none; }
.hero-silk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mask-image: linear-gradient(90deg, transparent 30%, #000 67%); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 67%); }
.hero-finale .finale-wrap { z-index: 1; pointer-events: none; }
.hero-finale .finale-actions { pointer-events: auto; width: fit-content; }
.hero-finale .finale-title, .hero-finale .finale-description { width: fit-content; }
.motion-control { position: absolute; bottom: 26px; right: var(--gutter); z-index: 2; padding: 10px 16px; border: 1px solid #bf8c6655; border-radius: 999px; background: #fff9; color: #70533d; font: 500 12px/1.2 var(--text); cursor: pointer; backdrop-filter: blur(10px); }
.motion-control[hidden] { display: none; }
.hero-finale.motion-paused .finale-spark .spark-top,
.hero-finale.motion-paused .finale-spark .spark-shadow { animation-play-state: paused; }
@media (max-width: 700px) {
 .hero-silk { opacity: .5; mask-image: linear-gradient(90deg, transparent 20%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
 .hero-finale .brand-finale { padding-bottom: 95px; }
}

/* AI motion uses the established white / peach / orange service palette. */
.hero-finale .brand-finale { background: radial-gradient(ellipse at 88% 48%, #fff0df 0%, transparent 58%), #fffdf9; }
.hero-silk { mask-image: linear-gradient(90deg, transparent 42%, #000 71%); -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 71%); }
/* Steps stay legible; movement communicates progress rather than hiding copy. */
[data-flow-readable].is-live .fl-stage:not(.is-on) { opacity: 1; }
[data-flow-readable].is-live .fl-row span { opacity: 1; transform: none; }
[data-flow-readable].is-live .fl-stage:not(.is-on) .fl-ic .ico { opacity: .65; }
[data-flow-readable].is-live .fl-stage:not(.is-on) .fl-ic .ico > * { stroke-dashoffset: 0; }
[data-flow-readable].is-live .fl-stage.is-current { transform: translateY(-5px); background: linear-gradient(160deg, #fff8f1, #fff 55%); }
[data-flow-readable] .fl-stage::before { box-shadow: 0 20px 40px -28px #f2652260; }
[data-flow-readable] .fl-token { transition: transform 1.3s cubic-bezier(.22,1,.36,1); }
[data-flow-readable] .fl-stage { --dur: 4800ms; }
[data-flow-readable] .fl-stage:last-child { --dur: 6400ms; }
.fl-step-button { border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; padding: 4px 0; cursor: pointer; }
[data-flow-readable].is-live .fl-stage.is-current .fl-ic { animation: step-arrive .65s var(--ease-out) both; }
@keyframes step-arrive { from { transform: scale(.9); } 60% { transform: scale(1.06); } to { transform: scale(1); } }
@media (max-width: 700px) {
 .hero-silk { opacity: .45; mask-image: linear-gradient(90deg, transparent 25%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 100%); }
}

/* An interactive service network, brought into the hero's content area. */
.hero-finale .finale-title { margin-top: 0; }
.hero-network { position: absolute; z-index: 2; width: min(44vw, 650px); height: min(68vw, 600px); right: max(2vw, calc((100vw - 1380px) / 2)); top: 50%; transform: translateY(-46%); }
.network-drag { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; border-radius: 50%; }
.network-drag.is-dragging { cursor: grabbing; }
.hero-network .hero-silk { mask-image: none; -webkit-mask-image: none; opacity: 1; }
.network-service { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #f3dfd1; border-radius: 16px; background: #fffffff0; box-shadow: 0 12px 30px -22px #9b4d26; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .35s, border-color .35s, box-shadow .35s; }
.network-service i { color: var(--orange); padding: 8px; background: var(--orange-soft); border-radius: 10px; }
.network-service .ico { width: 19px; height: 19px; }
.network-service small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); font-weight: 400; }
.network-service b { color: var(--orange); font-weight: 400; }
.network-service:hover, .network-service:focus-visible { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 16px 32px -20px #f2652255; }
.network-build { top: 14%; left: 8%; }
.network-ai { top: 34%; right: 0; }
.network-mvp { bottom: 25%; left: 2%; }
.network-ops { bottom: 12%; right: 3%; }
.network-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #8a6c59; font-size: 10px; letter-spacing: .13em; pointer-events: none; }
.network-caption span { display: block; margin-top: 6px; letter-spacing: 0; color: var(--muted); }
@media (min-width: 1101px) { .hero-finale .finale-title { font-size: clamp(42px, 4.65vw, 72px); } }
@media (max-width: 1100px) {
 .hero-finale .brand-finale { padding-block: 125px 45px; }
 .hero-finale .finale-wrap { order: 1; }
 .hero-network { order: 2; position: relative; right: auto; top: auto; transform: none; width: min(580px, 94%); height: 460px; margin: 24px auto 0; }
}
@media (max-width: 480px) {
 .hero-network { height: 370px; }
 .network-service { padding: 9px; gap: 6px; font-size: 11px; border-radius: 13px; }
 .network-service small { font-size: 9px; }
 .network-service i { padding: 6px; }
 .network-build { left: 0; top: 10%; }
 .network-ai { top: 33%; }
 .network-mvp { left: 0; bottom: 27%; }
 .network-ops { right: 0; bottom: 10%; }
}

/* About: subtle scanning and signal flow, preserving the existing content. */
.about-future .photo-frame { position: relative; isolation: isolate; }
.photo-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; overflow: hidden; }
.photo-scan::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#fff0 97%, #fff2 100%), linear-gradient(90deg, #fff0 97%, #fff2 100%); background-size: 52px 52px; opacity: .35; }
.photo-scan::after { content: ""; position: absolute; inset: -35% 0 auto; height: 30%; background: linear-gradient(transparent, #ffbd6740); border-bottom: 1px solid #ffd799aa; opacity: 0; }
.motion-ok .about-future .about-photo.is-in .photo-scan::after { animation: about-scan 7s ease-in-out infinite; }
@keyframes about-scan { 0%, 12% { transform: translateY(0); opacity: 0; } 22% { opacity: .7; } 65% { transform: translateY(450%); opacity: .4; } 75%, 100% { transform: translateY(450%); opacity: 0; } }
.about-future .route-line { stroke-dasharray: .3 1.1; stroke-opacity: .55; }
.motion-ok .about-future .about-photo.is-in .route-line { animation: about-signal 16s linear infinite; }
@keyframes about-signal { to { stroke-dashoffset: -28; } }
.about-future .tag { border: 1px solid #f7e8dd; transition: border-color .3s, box-shadow .3s; }
.about-future .tag:hover { border-color: #f9b58c; box-shadow: 0 15px 30px -15px #f2652240; }
@media (prefers-reduced-motion: reduce) { .photo-scan::after, .about-future .route-line { animation: none !important; } }

/* Keep the city image clear, with a dedicated lane for the HCM → Tokyo signal. */
.about-future .about-photo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 12px; padding: 0 0 0 42px; align-items: center;
}
.about-future .about-photo .photo-tilt { grid-column: 1 / -1; grid-row: 2; transform: perspective(1000px) rotateY(-24deg); }
.about-future .about-photo .tag {
  position: relative; inset: auto; width: fit-content; max-width: 100%;
  white-space: normal; font-size: 13px; padding: 8px 12px 8px 8px;
}
.about-future .about-photo .tag-tokyo { grid-column: 1; grid-row: 1; }
.about-future .about-photo .tag-date { grid-column: 2; grid-row: 1; justify-self: end; }
.about-future .about-photo .tag-place { grid-column: 1; grid-row: 3; }
.about-future .about-photo .tag-ai { grid-column: 2; grid-row: 3; justify-self: end; }
.motion-ok .about-future .about-photo.is-in .tag { animation: none; }
.about-future .about-photo .route { inset: 76px auto 76px 0; width: 38px; height: calc(100% - 152px); }
.about-future .route-line { stroke-width: .35; }
.motion-ok .about-future .about-photo.is-in .tag-tokyo .tag-ic { animation: none; }
@media (max-width: 600px) {
  .about-future .about-photo { padding-left: 28px; gap: 18px 8px; }
  .about-future .about-photo .tag { font-size: 11px; gap: 6px; padding: 7px; border-radius: 12px; }
  .about-future .about-photo .tag small { font-size: 8px; letter-spacing: .08em; }
  .about-future .about-photo .tag-ic { width: 28px; height: 28px; border-radius: 8px; }
  .about-future .about-photo .route { width: 24px; inset: 64px auto 64px 0; height: calc(100% - 128px); }
}

/* Expanded motion canvas: the network itself is the visual, without service cards. */
.hero-network { width: min(48vw, 740px); height: min(78vh, 720px); right: max(0px, calc((100vw - 1480px) / 2)); }
.network-caption { bottom: -12px; }
@media (max-width: 1100px) {
  .hero-network { width: min(660px, 100%); height: min(90vw, 600px); right: auto; margin-top: 28px; }
}
@media (max-width: 480px) {
  .hero-network { width: 100%; height: 360px; }
}

/* Editorial About: one city connection, an unobstructed perspective photo, quiet facts. */
.about-future .about-photo.about-editorial { display: flex; flex-direction: column; gap: 38px; padding: 0 20px; min-width: 0; }
.about-editorial .city-connection { display: flex; align-items: center; gap: 20px; width: 100%; padding: 0 12px; }
.city-connection span { flex-shrink: 0; }
.city-connection small { display: block; font-size: 9px; color: var(--muted); letter-spacing: .15em; margin-bottom: 7px; }
.city-connection strong { font-size: clamp(13px, 1.3vw, 19px); font-weight: 600; }
.city-connection svg { flex: 1; min-width: 30px; height: 24px; overflow: visible; }
.city-connection path { fill: none; stroke: #f2652240; stroke-width: 1; stroke-dasharray: 3 4; }
.city-connection circle { fill: var(--orange); }
.about-editorial .photo-tilt { width: 100%; }
.about-editorial .about-image-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: 100%; padding: 18px 0 0; border-top: 1px solid #f0e4d9; font-size: 12px; color: var(--muted); }
.about-image-caption span:first-child { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.about-image-caption i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
[data-flow-readable] .fl-stage { padding: 22px 18px; }
[data-flow-readable] .fl-row { font-size: 14px; line-height: 1.4; }
[data-flow-readable] .fl-row span { min-height: 0; }
[data-flow-readable] .fl-ai { padding-bottom: 16px; }
[data-flow-readable] .fl-stage h3 { margin-bottom: 4px; }
@media (max-width: 600px) {
  .about-future .about-photo.about-editorial { padding: 0 8px; gap: 26px; }
  .about-editorial .city-connection { gap: 10px; padding: 0; }
  .city-connection small { font-size: 8px; }
  .about-editorial .about-image-caption { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .city-connection circle { display: none; } }

/* Service icons: short gestures with a quiet interval between each cycle. */
.services .svc-feats li { --icon-delay: 0s; }
.services .svc-feats li:nth-child(2) { --icon-delay: -.9s; }
.services .svc-feats li:nth-child(3) { --icon-delay: -1.8s; }
.services .svc-feats li:nth-child(4) { --icon-delay: -2.7s; }
.services .ic-tile { transition: background .3s, box-shadow .3s; }
.motion-ok .services .svc-feats .ic-tile .ico {
  transform-origin: center; animation: service-lift 6s ease-in-out var(--icon-delay) infinite;
  animation-play-state: paused;
}
.motion-ok .services .svc-feats [data-icon="pencil"] .ico,
.motion-ok .services .svc-feats [data-icon="gauge"] .ico,
.motion-ok .services .svc-feats [data-icon="flag"] .ico { animation-name: service-tilt; }
.motion-ok .services .svc-feats [data-icon="target"] .ico,
.motion-ok .services .svc-feats [data-icon="bulb"] .ico,
.motion-ok .services .svc-feats [data-icon="shield"] .ico { animation-name: service-focus; }
.motion-ok .services .svc-feats [data-icon="rocket"] .ico { animation-name: service-launch; }
.motion-ok .services .svc-feats [data-icon="activity"] .ico > path {
  animation: service-trace 6s ease-in-out infinite; animation-play-state: paused;
}
.motion-ok .services .svc.icons-in-view .svc-feats .ico,
.motion-ok .services .svc.icons-in-view .svc-feats [data-icon="activity"] .ico > path { animation-play-state: running; }
.services .svc-feats li:hover .ic-tile { background: #ffe3ce; box-shadow: 0 0 0 5px #fff2e8; }
@keyframes service-lift { 0%, 35%, 100% { transform: translateY(0); } 15% { transform: translateY(-3px); } }
@keyframes service-tilt { 0%, 35%, 100% { transform: rotate(0); } 12% { transform: rotate(-9deg); } 24% { transform: rotate(5deg); } }
@keyframes service-focus { 0%, 35%, 100% { transform: scale(1); } 16% { transform: scale(1.12); } }
@keyframes service-launch { 0%, 38%, 100% { transform: translate(0,0); } 18% { transform: translate(3px,-4px); } }
@keyframes service-trace { 0%, 40%, 100% { stroke-dasharray: 1; stroke-dashoffset: 0; } 10% { stroke-dasharray: 1; stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: reduce) {
  .services .svc-feats .ico, .services .svc-feats .ico > path { animation: none !important; }
}

/* Contact: stable columns, shared top alignment and deliberate title wrapping. */
.contact-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 3vw, 44px); }
.contact-intro { padding-right: 0; }
.contact-title { font-size: clamp(36px, 3.6vw, 54px); }
.contact-title .ln { white-space: nowrap; }
.contact-block, .contact-block:not(:last-child) { align-self: stretch; padding: 0 0 0 24px; gap: 14px; }
.contact-block > div { min-width: 0; }
.contact-block .c-ic { width: 40px; height: 40px; border-radius: 12px; }
.contact-block .c-ic .ico { width: 21px; height: 21px; }
.contact-block .mini { min-height: 32px; margin-bottom: 12px; }
.contact-block .btn { max-width: 100%; width: fit-content; white-space: normal; height: auto; min-height: 42px; padding: 12px 18px; font-size: 14px; }
.contact-block .contact-compose { margin-top: 0; margin-bottom: 22px; }
.contact .email { font-size: clamp(19px, 1.55vw, 24px); white-space: normal; overflow-wrap: anywhere; }
.contact .map-link { font-size: 16px; }
.contact-sub { font-size: 16px; line-height: 1.6; }
@media (max-width: 1400px) {
  .contact-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; justify-content: stretch; }
  .contact-intro { grid-column: 1 / -1; }
  .contact-title { font-size: clamp(36px, 4.5vw, 54px); }
  .contact-block:nth-child(2) { padding: 0; }
}
@media (max-width: 650px) {
  .contact-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contact-block, .contact-block:nth-child(2), .contact-block:not(:last-child) { padding: 24px 0 0; border-left: 0; border-top: 1px solid #ffffff4d; }
  .contact-title { font-size: clamp(30px, 8.5vw, 48px); }
  .contact-block .mini { min-height: 0; }
}

/* Full-hero gradient driven by the globe angle in hero-motion.js. */
.hero-finale .brand-finale { background: #fffaf4; }
.hero-ambient {
  position: absolute; inset: -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 26%, #ffd4ad66, transparent 44%),
    radial-gradient(ellipse at 76% 34%, #ffd69a66, transparent 46%),
    radial-gradient(ellipse at 46% 85%, #ffcfbb44, transparent 46%),
    linear-gradient(125deg, #ffffff, #fffaf4 55%, #fffdf8);
  opacity: .74; transform-origin: center; transform: scale(1.14);
}

/* Peripheral circuit traces keep the reading area clear. */
.hero-circuits { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; color: #b5947d; }
.hero-circuits .circuit-track { fill: none; stroke: currentColor; stroke-width: 1; opacity: .20; }
.hero-circuits .circuit-ticks { fill: none; stroke: currentColor; stroke-width: 4; opacity: .12; }
.hero-circuits .circuit-node { fill: #dca77c; opacity: .30; }
.hero-circuits .circuit-data { fill: none; stroke: #f26522; stroke-width: 1.5; stroke-dasharray: 10 590; opacity: .38; }
.motion-ok .hero-circuits .circuit-data { animation: circuit-transmit 12s linear infinite; }
.hero-finale.motion-paused .circuit-data { animation-play-state: paused; }
@keyframes circuit-transmit { to { stroke-dashoffset: -600; } }
@media (max-width: 650px) { .hero-circuits { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .motion-ok .hero-circuits .circuit-data { animation: none; } }

/* Neutral depth beneath the About photo, including its revealed state. */
.about-future .about-photo .photo-tilt,
.motion-ok .about-future .about-photo.is-in .photo-tilt {
  box-shadow: 0 2px 6px rgba(30, 30, 30, .06), 0 44px 80px -40px rgba(40, 40, 40, .40);
}

/* Shared CTA feedback, with equivalent keyboard focus. */
.btn, .finale-cta {
  transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.finale-cta { display: inline-flex; align-items: center; }
.finale-cta span, .finale-link span { display: inline-block; transition: transform .3s ease; }
.finale-link, .text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: left bottom; background-size: 0 1px;
  transition: background-size .3s ease, color .25s ease;
  padding-bottom: 5px;
}
:is(.btn, .finale-cta, .finale-link, .text-link):focus-visible {
  outline: 2px solid currentColor; outline-offset: 5px;
}
:is(.btn, .finale-cta):focus-visible { transform: translateY(-3px); box-shadow: 0 10px 20px -12px #25252566; }
:is(.finale-link, .text-link):focus-visible { background-size: 100% 1px; }
@media (hover: hover) and (pointer: fine) {
  :is(.btn, .finale-cta):hover { transform: translateY(-3px); box-shadow: 0 10px 20px -12px #25252566; }
  .finale-cta:hover { background: var(--orange-deep); }
  .finale-cta:hover span { transform: translate(3px, -3px); }
  :is(.finale-link, .text-link):hover { background-size: 100% 1px; }
  .finale-link:hover span { transform: translateY(4px); }
  .contact-block .btn:hover i { transform: translateX(3px); }
}
:is(.btn, .finale-cta):active { transform: translateY(0) scale(.98); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .finale-cta, .finale-link, .text-link, .finale-cta span, .finale-link span { transition: none; }
  :is(.btn, .finale-cta, .finale-link, .text-link):is(:hover, :focus-visible, :active),
  .finale-cta:hover span, .finale-link:hover span, .btn:hover i, .text-link:hover span { transform: none; }
}

/* Keep the slogan spark as a small, keyboard-accessible play target. */
button.finale-spark { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; pointer-events: auto; touch-action: manipulation; position: relative; z-index: 3; }
button.finale-spark::before { content: ''; position: absolute; inset: -8px; min-width: 44px; min-height: 44px; }
button.finale-spark:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 8px; }
.hero-finale .finale-spark.is-flying .spark-top,
.hero-finale .finale-spark.is-flying .spark-shadow { animation: none; }
.hero-finale .finale-spark.is-flying .spark-shadow { opacity: 0; }

/* Extra clearance below the perspective photo before its caption divider. */
.about-editorial .about-image-caption { margin-top: clamp(20px, 2.5vw, 36px); }

/* Stationary CTA feedback: preserve the bright palette, no lift or heavy shadow. */
:is(.btn, .finale-cta):is(:hover, :focus-visible, :active) {
  transform: none; box-shadow: none;
}
:is(.btn-orange, .finale-cta):is(:hover, :focus-visible) {
  background: var(--orange);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 0 0 4px rgba(242,101,34,.09);
}
.btn-light:is(:hover, :focus-visible) {
  background: #fff6ee; color: var(--orange-deep);
  box-shadow: inset 0 0 0 1px rgba(242,101,34,.18);
}
:is(.btn, .finale-cta):active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }