:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --paper: #f4f2f0;
  --ink: #39342d;
  --muted: #847a6e;
  --measure: 640px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
html { overflow-x: auto; overscroll-behavior: none; }
body {
  overflow-x: visible;
  font-family: "acumin-pro", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.brand-lockup {
  position: fixed;
  z-index: 50;
  /* CSS-only default site scale, clamped from 1000/1440 to 1. */
  width: clamp(105.555555556px, 10.555555556vw, 152px);
  top: clamp(20.833333333px, 2.083333333vw, 30px);
  left: clamp(22.222222222px, 2.222222222vw, 32px);
  pointer-events: none;
  user-select: none;
}
.brand-lockup img { display: block; width: 100%; height: auto; }

/* LOCKED: exact v1 line + travelling-dot animation. Only positioning is fixed
   so it stays bottom-centre during the long page. */
.scroll-cue {
  position: fixed;
  left: auto;
  right: 32px;
  bottom: 3vh;
  width: 1px;
  height: 58px;
  z-index: 60;
  background: linear-gradient(to bottom, rgba(30,30,28,0), rgba(30,30,28,.34));
  opacity: .55;
  pointer-events: none;
}
.scroll-cue span {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(30,30,28,.5);
  animation: cue 2.5s ease-in-out infinite;
}
@keyframes cue {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: .8; }
  75% { opacity: .35; }
  100% { transform: translateY(50px); opacity: 0; }
}

.page-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}
.design-canvas {
  position: absolute;
  top: 0;
  width: 1440px;
  height: 9040px;
  overflow: visible;
  pointer-events: none;
}
.design-canvas--left { transform-origin: top left; }
.design-canvas--right { transform-origin: top right; }
.design-canvas--center { transform-origin: top left; }

.design-canvas--left, .design-canvas--right, .design-canvas--center { z-index: 2; }
.design-canvas--bg {
  position: fixed;
  background: var(--paper);
  /* Native fixed right anchor; scale around the same edge. */
  left: auto;
  right: 0;
  transform-origin: top right;
  z-index: 1;
}
.asset--skyline {
  left: 0;
  top: 0;
  width: 1440px;
  height: 9040px;
  background-image: none;
  background-repeat: no-repeat;
  background-position: right top;
  /* JS sizes the original proportionally, starting at half its natural size,
     with static vertical copies and blended joins covering the page. */
  background-size: 525px auto;
  opacity: 0.72;
}

.asset { position: absolute; z-index: 3; pointer-events: none; user-select: none; }
.asset img { display: block; width: 100%; height: auto; }
.asset--a2-early { left: -88.909px; top: 73.802px; width: 681.868px; }
.asset--a1-mid { right: -59.940px; top: 2210.954px; width: 592.915px; }
.asset--a2-late { left: -28.312px; top: 4659.934px; width: 1067.816px; }

.copy { position: absolute; z-index: 12; pointer-events: auto; }

/* S8-B: original SVG viewport/tip registration retained; shortening is tail-only.
   Full-copy document midpoint settles with existing layout/font metrics, never scroll-time Y. */
.authored-arrow {
  position: absolute;
  top: 0;
  width: 78px;
  height: 16px;
  overflow: visible;
  color: #847a6e;
  opacity: 1;
  pointer-events: none;
}
.authored-arrow--right { left: -102px; }
.authored-arrow--left { right: -94px; }
.authored-arrow path { fill: none; stroke: currentColor; stroke-width: 1.2; }
/* Radius compensates existing site scale at layout/font settle only; rendered diameter
   keeps the horizontal dot's fixed 4.5 CSS px diameter without changing animation transforms. */
.authored-arrow .arrow-dot { fill: currentColor; opacity: .20; }

/* Eligibility toggles visibility; no scroll-time opacity or vertical correction. */
.authored-arrow { visibility: hidden; }
.authored-arrow.is-vertically-active { visibility: visible; }

/* 80% of the 77.52-unit shaft = 62.016 units; only dot moves/fades. No hold/reset segment. */
.authored-arrow--right { --dot-end: 62.016px; }
.authored-arrow--left { --dot-end: -62.016px; }
/* S8-D separates opacity from unchanged motion: inverse ease-in-out time offsets
   put peak at 55% physical journey and fade start at 65%, not 55/65% elapsed time. */
.authored-arrow .arrow-dot {
  animation: authored-dot 2.5s ease-in-out infinite,
             authored-dot-opacity 2.5s ease-in-out infinite;
}
@keyframes authored-dot {
  from { transform: translateX(0); }
  to { transform: translateX(var(--dot-end)); }
}
@keyframes authored-dot-opacity {
  0% { opacity: .20; }
  52.906250% { opacity: .75; }
  58.875102% { opacity: .75; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .authored-arrow .arrow-dot { animation: none; opacity: 0; }
}


.copy h1,
.copy h2 {
  margin: 0 0 24px;
  font-family: "arno-pro", serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: .98;
  text-wrap: balance;
  color: var(--ink);
}
.copy h1 { font-size: 86px; }
.copy h2 { font-size: 72px; }

/* LOCKED from v3.2: paragraph typography/spacing. Only the family source changes
   to Adobe's hosted CSS family name. */
.copy p {
  margin: 0 0 18px;
  max-width: 560px;
  font-family: "acumin-pro", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.58;
  letter-spacing: .002em;
  color: #28231e;
}
.copy .eyebrow {
  margin-bottom: 20px;
  font-family: "arboria", sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.017cm;
  font-weight: 400;
  color: var(--muted);
}
.arrival .eyebrow {
  margin-bottom: 25px;
  color: #776d62;
}

/* 1440px reference registration. These are tied to the relevant viewport-edge
   sculpture canvas, not to a centred page wrapper. */
.arrival { left: 308px; top: 336px; width: 800px; }
.arrival h1 { width: 800px; }
/* Opening body now follows the same natural heading-to-body flow as other copy sections. */
.arrival .intro { width: 550px; }
.intro p { width: 550px; }

.advisory { left: 467px; top: 1607px; width: 540px; }
.advisory h2 { width: 540px; }
.advisory p { width: 510px; }

/* right-anchored A1 scenes */
.wider { right: 411px; top: 2942px; width: 570px; }
.wider h2 { width: 570px; }
.wider p { width: 565px; }
.capabilities { right: 321px; top: 3980px; width: 580px; }
.capabilities h2 { width: 577px; }
.capabilities p { width: 568px; }

/* later A2 scenes */
.perspective { left: 399px; top: 5326px; width: 610px; }
.perspective h2 { width: 610px; }
.perspective p { width: 521px; }
.detail { left: 242px; top: 6288px; width: 585px; }
.detail h2 { width: 585px; }
.detail p { width: 554px; }
.release { left: 792px; top: 7152px; width: 550px; }
.release h2 { width: 430px; }
.release p { width: 546px; }

/* Contact: position and dimensions matched to the approved Photoshop page-8 mockup. */
.contact { left: 660px; top: 8485px; width: 330px; }
.contact h2 { width: 310px; margin-bottom: 28px; }
.contact .contact-lines { width: 230px; margin-top: 30px; }


/* StoneD: Contact upper serif, at the approved Photoshop crop geometry.
   The source image is preserved, scaled proportionally, and continues beyond
   the right and bottom viewport edges at the final scroll position. */
.asset--stone-d { right: -95px; top: 8090px; width: 744px; }

.corporate-footer {
  position: fixed;
  z-index: 55;
  left: min(32px, 2.222222vw);
  bottom: 14px;
  transform: none;
  width: max-content;
  max-width: calc(100vw - 64px);
  text-align: left;
  color: rgba(57,52,45,.68);
  font-family: "acumin-pro", sans-serif;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: .008em;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.corporate-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
  .corporate-footer { transition: none; }
}

/* Responsive viewport-as-window experiment; one 1440px composition, no separate
   font/stone layout. The JS adds [data-windowed] only if the virtual canvas
   is wider than the viewport. Horizontal browsing uses native document pan. */
html[data-windowed="true"] .corporate-footer {
  max-width: none !important;
  width: max-content;
  white-space: nowrap;
}

/* v4.06: coordinated P8 signature; shared origin, independent opacity reveals. */
.final-signature {
  position: absolute; z-index: 55; left: 32px; bottom: 14px;
  width: max-content; transform-origin: left bottom; pointer-events: none;
}
.final-identity { position: relative; height: 224.64px; margin-bottom: 10px; opacity: 0; pointer-events: none; }
.final-emblem { display: block; width: 240px; height: auto; }
.final-wordmark { position: absolute; left: 225px; top: 159px; width: 190px; height: auto; }
.final-signature .corporate-footer {
  position: relative; left: auto; bottom: auto; max-width: none;
  width: max-content; white-space: nowrap;
}

/* v4.13: artistic reference size and independent offsets in design pixels. */
:root { --skyline-native-scale: .5; --skyline-x: 0px; --skyline-y: -24px; }
.asset--skyline { background-image: none; overflow: hidden; opacity: 1; }
.asset--skyline .skyline-art {
  position: absolute; max-width: none; transform: none;
  width: 525.0px; height: 1688.0px; right: 0px; top: -24px;
  display: block; opacity: 0; transition: opacity 180ms ease;
}
.asset--skyline .skyline-art.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .asset--skyline .skyline-art { transition: none; } }

/* Identity and footer belong to the authored page end.
   Size and placement settle once; reveal changes opacity only. */
#finalIdentity {
  /* Later DOM order paints above skyline (1), below content (2). */
  z-index: 1;
  position: absolute;
  left: 32px;
  bottom: 61.2px;
  --identity-scale: 1;
  width: calc(415px * var(--identity-scale));
  height: calc(224.64px * var(--identity-scale));
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
}

/* Direct dimensions preserve identity geometry without transform scaling. */
#finalIdentity .final-emblem { width: calc(240px * var(--identity-scale)); }
#finalIdentity .final-wordmark {
  left: calc(225px * var(--identity-scale));
  top: calc(159px * var(--identity-scale));
  width: calc(190px * var(--identity-scale));
}

/* Final signature: keep footer clear of the responsive identity. */
.final-signature .final-identity {
  height: calc(224.64px * var(--identity-scale, 1));
  margin-bottom: calc(10px * var(--identity-scale, 1));
}