/* SAME → YOURS. Full final composition is the no-JS / static default. */
.identity { display: block; min-height: 0; padding: 0; isolation: isolate; scroll-margin-top: 24px; }
.identity:focus { outline: none; }
.identity-stage { position: relative; display: flex; align-items: center; width: 100%; margin-inline: auto; container-type: inline-size; }
.identity-scene { position: relative; width: 61.497%; flex: 0 0 61.497%; margin-left: 2.005%; aspect-ratio: 600 / 440; container-type: inline-size; }
.identity-visual { position: absolute; inset: 0; pointer-events: none; }
.identity .identity-copy { flex: 0 0 32%; width: 32%; margin: 0 2.005% 0 2.493%; padding: 1.5cqw 0; }
.identity .section-heading { font-size: 4.58cqw; }
.identity .eyebrow { font-size: 1.04cqw; }
.identity .section-description { font-size: 1.83cqw; }
.identity-same { position: absolute; left: 0; top: 1%; width: 58%; font-size: 14cqw; font-weight: 850; letter-spacing: -.065em; line-height: .85; opacity: 0; }
.identity-same span { display: block; transform: scaleX(1.2); transform-origin: left center; }
.identity-same span:nth-child(1), .identity-same span:nth-child(6) { color: #353533; }
.identity-same span:nth-child(2), .identity-same span:nth-child(5) { color: #aaa9a6; }
.identity-same span:nth-child(3), .identity-same span:nth-child(4) { color: #d4d2ce; }
.identity-yours { position: absolute; z-index: 1; left: 0; top: 1.5%; width: 87%; }
.identity-yours img { display: block; width: 100%; height: auto; }
.identity-yours-fallback { display: none; color: #003dff; font-size: 22cqw; font-weight: 900; font-style: italic; letter-spacing: -.08em; line-height: 1; }
.identity.lettering-unavailable .identity-yours img { display: none; }
.identity.lettering-unavailable .identity-yours-fallback { display: block; }
.identity-window { position: absolute; z-index: 2; left: 15%; top: 34%; width: var(--identity-window-width, 77%); transform: translate(calc(var(--identity-window-dx, 0) * 1cqw), calc(var(--identity-window-dy, 0) * .733333cqw)); aspect-ratio: 1.67; border: 1px solid #9f9f9b; border-radius: 3px; background: linear-gradient(135deg, #c6c6c3, #a4a5a3); box-shadow: 0 1.5cqw 2.5cqw #302a231f; }
.identity-chrome { height: 5.7%; padding: 0 1.5%; display: flex; justify-content: space-between; align-items: center; color: #6f706c; font: 1.35cqw/.8 Arial,sans-serif; letter-spacing: .13em; }
.identity-site { position: absolute; inset: 5.7% 1.35% 2%; background: #faf8f1; padding: 0 3.5%; }
.identity-site-nav { display: flex; height: 17%; align-items: center; justify-content: space-between; gap: 4%; white-space: nowrap; }
.identity-site-nav b { font: 4cqw/.95 "Times New Roman",serif; letter-spacing: -.07em; font-weight: 400; }
.identity-site-nav > span { font: .93cqw/1 Arial,sans-serif; min-width: 0; overflow: hidden; }
.identity-site-content { position: relative; height: 80%; }
.identity-site-photo { height: 56%; overflow: hidden; background: linear-gradient(115deg, #697655, #d9d4c4 65%, #a4aa87); }
.identity-site-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.identity.photo-unavailable .identity-site-photo img { visibility: hidden; }
.identity-site-story { display: flex; height: 44%; align-items: center; gap: 4%; }
.identity-site-story strong { flex: 1 0 49%; font: 4.75cqw/.91 "Times New Roman",serif; letter-spacing: -.05em; }
.identity-site-lines { flex: 1; min-width: 0; }
.identity-site-lines i { display: block; height: .63cqw; margin-bottom: .73cqw; background: #c6c6c1; }
.identity-site-lines i:nth-last-child(2) { width: 82%; }
.identity-site-lines i:last-child { width: 54%; margin-bottom: 0; }
.identity-site-arrow { display: grid; place-items: center; flex: 0 0 10.5%; aspect-ratio: 1; border: 1px solid #515454; border-radius: 50%; font: 3.2cqw/1 Arial,sans-serif; font-style: normal; }
.identity-template { display: none; position: absolute; inset: 0; background: #eeede8; }
.identity-template-hero { height: 59%; display: flex; gap: 2%; }
.identity-template-hero > span { position: relative; flex: 1; background: #bdbdb9; }
.identity-template-hero .identity-site-arrow { position: absolute; right: 9%; bottom: 10%; width: 23%; }
.identity-template-footer { display: flex; gap: 13%; height: 41%; padding: 4% 2% 0; }
.identity-window-stack { position: absolute; inset: 0; opacity: 0; }
.identity-ghost { position: absolute; width: 65%; aspect-ratio: 1.67; border: 1px solid #b8b8b5; border-radius: 3px; background: #ddddd9; box-shadow: 0 .7cqw 1.5cqw #302a231a; }
.identity-ghost-a { left: 35%; top: 19%; opacity: .78; }
.identity-ghost-b { left: 31%; top: 23%; opacity: .9; }
.identity-ghost-c { left: 37%; top: 33%; opacity: .52; }
.identity-ghost i { display: block; height: 6%; background: #aaa; }
.identity-ghost i::before { content: "•••"; display: block; color: #777; font: 1.4cqw/.85 Arial,sans-serif; letter-spacing: .1em; padding-left: 1.5%; }
.identity-ghost b { display: block; font: 3.5cqw/1.4 "Times New Roman",serif; padding-inline: 5%; color: #777; }
.identity-ghost > span { display: block; height: 70%; margin: 0 5%; background: linear-gradient(90deg,#bbb 0 48%,transparent 48% 51%,#c5c5c2 51%); }
.identity-ribbon { display: none; position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Enhancement exists only when both required images and geometry are ready. */
.identity.identity-ready .identity-same { opacity: var(--identity-same-opacity, 1); transform: translateY(var(--identity-same-y, 0%)); }
.identity.identity-ready .identity-window-stack { opacity: var(--identity-stack-opacity, 1); transform: translate(var(--identity-stack-x, 0%), var(--identity-stack-y, 0%)); }
.identity.identity-ready .identity-yours { opacity: var(--identity-yours-opacity, 0); clip-path: inset(0 var(--identity-yours-cover, 100%) 0 0); transform: translateY(var(--identity-yours-y, 4%)); }
.identity.identity-ready .identity-template { display: block; clip-path: inset(0 0 0 var(--identity-reveal, 0%)); }
.identity.identity-ready .identity-ribbon { display: block; opacity: var(--identity-ribbon-opacity, 0); }
@media (min-width: 681px) {
  .identity.identity-ready::after { content: ""; display: block; height: 120.75svh; }
  .identity.identity-ready .identity-stage { position: sticky; top: clamp(16px, 5svh, 64px); min-height: calc(100svh - clamp(16px, 5svh, 64px)); flex-wrap: wrap; align-content: flex-start; }
}
@media (min-width: 681px) and (max-aspect-ratio: 4/3) {
  .identity.identity-ready::after { height: 96.583333svh; }
}
@media (min-width: 681px) and (min-aspect-ratio: 11/5) {
  .identity-stage { width: calc((100svh - 48px) * 2.1); max-width: 100%; }
}
@media (max-width: 680px) {
  .identity { padding: 0 0 34px; scroll-margin-top: 16px; }
  .identity-stage { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .identity-scene { width: 94%; flex: auto; margin: 0 3%; }
  /* Keep the decorative stack inside the viewport through its 3% exit shift. */
  .identity-ghost-c { left: 35%; }
  .identity .identity-copy { flex: auto; width: auto; margin: 22px 6% 0; padding: 0; }
  .identity .section-heading { font-size: clamp(32px, 8.2vw, 46px); margin: 15px 0 18px; line-height: .96; }
  .identity .eyebrow { font-size: 10px; }
  .identity .section-description { font-size: 16px; max-width: 360px; }
  /* Decorative miniature navigation must survive browser minimum-font sizes. */
  .identity-site-nav > span { display: none; }
  .identity-site-nav::after { content: ""; width: 32%; height: 2px; background: repeating-linear-gradient(90deg, #777 0 16%, transparent 16% 28%); }
}
@media (prefers-reduced-motion: reduce) {
  .identity.identity-ready::after { display: none; height: 0; }
  .identity.identity-ready .identity-stage { position: relative; top: auto; min-height: 0; }
  .identity.identity-ready .identity-same, .identity.identity-ready .identity-window-stack, .identity.identity-ready .identity-ribbon, .identity.identity-ready .identity-template { display: none; }
  .identity.identity-ready .identity-yours { opacity: 1; clip-path: none; transform: none; }
  .identity.identity-ready .identity-window { left: 15%; top: 34%; width: 77%; transform: none; }
}