/* Homepage-only opening. Device frames and their static long captures are separate. */
.hero.hero--aperture {
  --opening-travel:260vh; --prepare:0; --converge:0; --compress:0;
  --copy-exit:0; --expand:0; --next-reveal:0; --next-detail:0;
  padding:135px 0 0; overflow:clip;
}
.opening-layout { position:relative; display:grid; grid-template-columns:1fr 1.04fr; gap:35px; align-items:center; }
.opening-copy-area { position:relative; z-index:4; }
.opening-copy { position:relative; }
.opening-eyebrow { color:var(--muted); margin-bottom:30px; }
.hero--aperture h1 { font-size:clamp(62px,6.6vw,114px); font-weight:600; letter-spacing:-.075em; line-height:1.03; }
.opening-line { display:block; overflow:clip; padding:0 .08em .09em 0; margin-bottom:-.09em; }
.opening-line > span { display:block; transform-origin:left bottom; }
.opening-description { max-width:355px; color:var(--muted); font-size:14px; line-height:1.85; margin-top:32px; }
.opening-actions { display:flex; gap:27px; align-items:center; margin-top:30px; }
.opening-actions .button { white-space:nowrap; }
.opening-composition { position:relative; aspect-ratio:1.04; perspective:1100px; isolation:isolate; }
.hero--aperture:not(.is-choreographed) .opening-composition::before { content:''; position:absolute; top:1%; right:1%; width:24px; height:24px; border-top:1px solid var(--blue); border-right:1px solid var(--blue); opacity:.45; }
.hero--aperture:not(.is-choreographed) .opening-composition::after { content:''; position:absolute; bottom:0; left:0; width:18px; height:18px; border-bottom:1px solid var(--blue); border-left:1px solid var(--blue); opacity:.45; }
.composition-layer { position:absolute; transform-style:preserve-3d; }
.fragment-entry { transform-style:preserve-3d; }
.fragment-mask { overflow:clip; }
.layer-back { width:62%; max-width:345px; left:5%; top:75%; z-index:1; transform:translateZ(0); }
.layer-main { width:88%; left:0; top:13%; z-index:2; transform:rotateY(-5deg) rotateZ(-2deg); }
.layer-front { width:26%; left:72%; top:34%; z-index:3; transform:translateZ(30px) rotateY(-7deg) rotateZ(3deg); }
.hero-browser,.hero-phone { background:linear-gradient(145deg,#343d45 0%,#191f26 24%,#10151b 72%,#2b333b); border:1px solid #8c9ca552; box-shadow:0 24px 48px -22px #000a,0 6px 14px -7px #0008,inset 0 1px 0 #e1eef126,inset 0 -1px 0 #0008; }
.hero-browser { padding:0 4px 4px; border-radius:13px; transform:translateZ(0); background:linear-gradient(160deg,#394047,#1c2228 22%,#0e1318 85%,#30383e); box-shadow:inset 0 1px 0 #e1eef138,inset 0 0 0 2px #0b10144d,0 30px 55px -23px #000b,0 5px 12px -4px #0008; }
.hero-browser-bar { height:30px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 9px; color:#b7c1c7; font-size:7px; letter-spacing:.13em; }
.hero-browser-address { display:flex; align-items:center; justify-content:center; gap:6px; width:62%; height:17px; border:1px solid #90a4b018; border-radius:5px; background:#090f1440; box-shadow:inset 0 1px 2px #0003; font-size:7px; letter-spacing:.015em; color:#bcc9ce; white-space:nowrap; overflow:hidden; }
.hero-browser-address svg { width:9px; height:9px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1; opacity:.7; }
.hero-browser-dots { display:flex; gap:3px; }
.hero-browser-dots i { width:4px; height:4px; border-radius:50%; background:#a6b1b8; opacity:.4; box-shadow:inset 0 1px 1px #ffffff30; }
.hero-browser-mark { color:#a0b3bc; font-size:11px; }
.hero-device-screen { position:relative; overflow:hidden; background:#173d36; }
.hero-device-screen img { display:block; width:100%; height:auto; max-width:100%; }
.hero-desktop-screen { aspect-ratio:1425/781; border-radius:3px 3px 7px 7px; }
.hero-phone { position:relative; padding:0 4px 5px; background:linear-gradient(105deg,#51585e 0%,#20272d 3%,#11171c 9%,#1d242a 88%,#414a51 97%,#161c22); box-shadow:inset 0 0 0 1px #d7e8ee18,inset 2px 0 2px #f0faff14,0 25px 35px -17px #000c,0 5px 10px -3px #0008; border-radius:clamp(13px,1.8vw,24px); transform:translateZ(0); }
.hero-phone-cap { height:14px; display:flex; align-items:center; justify-content:center; }
.hero-phone-cap span { position:relative; width:25%; height:5px; border-radius:8px; background:#05080b; box-shadow:0 1px 0 #ffffff12; }
.hero-phone-cap span::after { content:""; position:absolute; right:4px; top:1px; width:3px; height:3px; border-radius:50%; background:#1b2933; box-shadow:inset 0 0 1px #7b9cb0; }
.hero-mobile-screen { aspect-ratio:375/905; border-radius:clamp(9px,1.2vw,15px) clamp(9px,1.2vw,15px) clamp(10px,1.5vw,20px) clamp(10px,1.5vw,20px); }
/* Editorial card: live text and a separate, purely illustrative SVG. */
.hero-growth { position:relative; isolation:isolate; container-type:inline-size; display:flex; align-items:center; width:100%; max-width:300px; min-height:104px; padding:18px 16px; background:radial-gradient(ellipse at 100% 0%,#15252e66,transparent 70%),linear-gradient(125deg,#101417,#080b0d); border:1px solid #84949f55; border-radius:11px; box-shadow:inset 0 1px 0 #e4faff08,0 14px 28px -18px #000a; }
.hero-growth-copy { position:relative; z-index:1; min-width:0; }
.hero-growth-copy p { font-size:clamp(14px,6.7cqi,18px); font-weight:600; line-height:1.3; letter-spacing:-.035em; color:#f6f7f8; white-space:nowrap; }
.hero-growth-copy span { display:block; margin-top:7px; font-size:clamp(11px,4.8cqi,13px); line-height:1.45; color:#c8cdd2; }
.hero-growth svg { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hero-growth .growth-area { fill:url(#hero-growth-wash); }
.hero-growth .growth-curve { fill:none; stroke:url(#hero-growth-line); stroke-width:.85; stroke-linecap:round; }
.hero-growth .growth-halo { fill:url(#hero-growth-glow); }
.hero-growth .growth-marker { fill:#6ddfff; filter:drop-shadow(0 0 3px #44cfff); }
.hero-growth .growth-tip { fill:#ecfcff; filter:drop-shadow(0 0 4px #44d4ff); }
.composition-credit { position:absolute; left:2%; top:calc(100% + 20px); font-size:12px; letter-spacing:.07em; color:var(--white); }
.composition-credit i { color:var(--blue); font-style:normal; margin:0 10px; }
.composition-credit span { display:block; color:var(--dim); font-size:11px; margin-top:6px; }
.opening-structure { display:none; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
/* Keep dashes in the normalized SVG coordinate system. Non-scaling strokes
   mixed with this non-uniform viewBox left partial lines at both endpoints. */
.opening-structure path { fill:none; stroke:var(--blue); stroke-width:1; }
.structure-segment { opacity:.4; }
.opening-structure .structure-anchor { stroke-width:1; opacity:0; }
.opening-structure .structure-signal { stroke:#d9fffa; stroke-width:2; stroke-dasharray:.045 .955; stroke-dashoffset:1; opacity:0; }
.opening-next { grid-column:1 / -1; padding:150px 0 110px; }
.opening-next .eyebrow { color:var(--blue); margin-bottom:35px; }
.opening-next h2 { font-size:clamp(42px,5.7vw,88px); letter-spacing:-.065em; line-height:1.12; }
.next-line { display:block; overflow:clip; padding-bottom:.12em; margin-bottom:-.12em; }
.next-line > span { display:block; }
.opening-next em { color:var(--blue); font-style:normal; }
.opening-next-note { margin-top:32px; color:var(--muted); font-size:13px; }
.opening-cue { display:flex; justify-content:space-between; align-items:center; gap:30px; border-top:1px solid var(--line); padding-block:23px; font-size:11px; letter-spacing:.06em; }
.opening-cue i { color:var(--blue); margin-inline:12px; font-style:normal; }
.opening-cue a { display:flex; align-items:center; gap:22px; min-height:35px; letter-spacing:0; font-size:11px; }
.opening-cue .icon { width:16px; height:16px; }

/* A 260vh journey plus the pinned viewport. All five states share one playhead. */
.hero--aperture.is-choreographed { height:calc(100svh + var(--opening-travel)); padding:0; }
.is-choreographed .opening-pin { position:sticky; top:0; height:100svh; }
.is-choreographed .opening-layout { display:block; height:100svh; }
.is-choreographed .opening-copy-area { position:absolute; inset:100px auto 95px 0; width:47%; display:flex; align-items:center; }
.is-choreographed .opening-copy { clip-path:inset(0 calc(var(--copy-exit) * 101%) 0 0); transform:translateX(calc(var(--copy-exit) * -22px)); }
.is-choreographed .opening-composition { position:absolute; right:0; top:50%; width:49%; max-width:calc((100svh - 300px) * 1.04); transform:translateY(-50%); }
.is-choreographed .layer-back { transform:translate3d(calc(var(--converge) * -14% + var(--compress) * -15%),calc(var(--prepare) * 2% + var(--converge) * 15% + var(--compress) * 35%),calc(var(--converge) * -40px)) rotateY(calc(var(--converge) * 5deg)) rotateZ(calc(var(--compress) * -3deg)) scale(calc(1 + var(--prepare) * .025 - var(--compress) * .62)); }
.is-choreographed .layer-main { transform:translate3d(calc(var(--compress) * 39%),calc(var(--converge) * -3% + var(--compress) * 12%),calc(var(--converge) * 28px - var(--compress) * 100px)) rotateY(calc(-5deg + var(--converge) * 10deg - var(--compress) * 20deg)) rotateZ(calc(-2deg + var(--compress) * 2deg)) scale(calc(1 - var(--compress) * .34)); }
.is-choreographed .layer-front { transform:translate3d(calc(var(--converge) * -22% - var(--compress) * 20%),calc(var(--prepare) * -3% + var(--converge) * -18% - var(--compress) * 65%),calc(30px + var(--converge) * 35px - var(--compress) * 130px)) rotateY(calc(-7deg + var(--converge) * 13deg)) rotateZ(calc(3deg - var(--compress) * 7deg)) scale(calc(1 - var(--compress) * .35)); }
.is-choreographed .layer-back .fragment-mask { clip-path:inset(calc(var(--compress) * 50%) 0 calc(var(--compress) * 50%) calc(var(--converge) * 12%)); }
.is-choreographed .layer-main .fragment-mask { clip-path:inset(calc(var(--compress) * 50%) calc(var(--compress) * 8%) calc(var(--compress) * 50%) calc(var(--compress) * 8%)); }
.is-choreographed .layer-front .fragment-mask { clip-path:inset(0 calc(var(--compress) * 50%) 0 calc(var(--compress) * 50%)); }
.is-choreographed .composition-credit { clip-path:inset(0 calc(var(--converge) * 101%) 0 0); }
.is-choreographed .opening-structure { display:block; }
/* Solid graphite protects both headlines. Images never cross the first text zone;
   the next text cannot enter until every image mask is completely closed. */
.is-choreographed .opening-next { position:absolute; inset:110px 0 100px; padding:0 0 0 35px; display:flex; flex-direction:column; justify-content:center; z-index:6; pointer-events:none; }
.is-choreographed .next-line > span { transform:translateY(calc((1 - var(--next-reveal)) * 100%)); }
.is-choreographed .next-line + .next-line > span { transform:translateY(calc((1 - var(--next-reveal)) * 110%)); }
.is-choreographed .opening-next .eyebrow { clip-path:inset(0 calc((1 - var(--expand)) * 101%) 0 0); }
.is-choreographed .opening-next-note { clip-path:inset(0 calc((1 - var(--next-detail)) * 101%) 0 0); }
.is-choreographed .opening-cue { position:absolute; bottom:0; left:0; right:0; }

/* Entry lives on inner wrappers; scroll owns only their outer layers. */
.opening-intro .opening-line > span { animation:opening-type 1.05s var(--ease) both; animation-delay:.2s; }
.opening-intro .opening-line:nth-child(2) > span { animation-delay:.33s; }
.opening-intro .opening-line:nth-child(3) > span { animation-delay:.46s; }
.opening-intro .opening-eyebrow { animation:opening-label .7s .08s var(--ease) both; }
.opening-intro .opening-description,.opening-intro .opening-actions { animation:opening-label .85s .9s var(--ease) both; }
.opening-intro .fragment-entry { animation:fragment-build 1.3s var(--ease) both; }
.opening-intro .layer-main .fragment-entry { animation-delay:.62s; }
.opening-intro .layer-back .fragment-entry { animation-delay:.85s; }
.opening-intro .layer-front .fragment-entry { animation-delay:1.18s; }
.structure-segment,.structure-anchor { stroke-dasharray:1 1; stroke-dashoffset:0; }
.opening-intro .structure-segment,.opening-intro .structure-anchor { animation:structure-draw 1.35s .45s cubic-bezier(.45,0,.55,1) both; }
.opening-intro .segment-b { animation-delay:.7s; }
.opening-intro .segment-c { animation-delay:1.1s; }
.opening-intro .segment-d { animation-delay:.3s; }
.opening-intro .structure-signal { animation:structure-light 1.15s 1.5s var(--ease) both; }
.opening-intro .composition-credit { animation:opening-credit 1s 1.65s both; }
.opening-intro .opening-cue { animation:opening-label 1s 1.65s var(--ease) both; }
.is-choreographed:not(.opening-intro) .structure-signal { animation:structure-idle 12s linear infinite; }
.hero--aperture.is-transforming .structure-signal { animation:none; opacity:var(--signal-strength); stroke-dashoffset:var(--signal-position); }
body:has(.hero--aperture):not(.intro-complete):not(.motion-reduced) .site-header .brand-wordmark > span:first-child { animation-duration:.5s; animation-delay:.1s; }
@keyframes opening-type { from { transform:translateY(115%) rotate(4deg) skewY(3deg); } to { transform:none; } }
@keyframes opening-label { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@keyframes opening-credit { from { opacity:0; } to { opacity:1; } }
@keyframes fragment-build { from { clip-path:inset(0 100% 0 0); transform:translate3d(25px,35px,-90px) rotateY(12deg) scale(.94); } to { clip-path:inset(0); transform:translate3d(0,0,0); } }
@keyframes structure-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes structure-light { 0% { stroke-dashoffset:1; opacity:0; } 15%,80% { opacity:.9; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes structure-idle { 0%,75% { stroke-dashoffset:1; opacity:0; } 80%,92% { opacity:.45; } 100% { stroke-dashoffset:0; opacity:0; } }
@media (max-width:1199px) {
  .opening-actions { gap:16px; }
  .opening-actions .button { padding-left:14px; gap:12px; font-size:11px; }
  .opening-actions .text-link { font-size:11px; gap:12px; }
  .hero--aperture h1 { font-size:6.5vw; }
  .opening-eyebrow { font-size:11px; }
  .opening-description { font-size:13px; max-width:300px; }
}
@media (min-width:900px) and (max-height:749px) {
  .hero--aperture h1 { font-size:clamp(54px,5.6vw,83px); }
  .opening-eyebrow { margin-bottom:20px; }
  .opening-description { margin-top:22px; }
  .opening-actions { margin-top:22px; }
}
@media (max-width:899px) {
  .hero.hero--aperture { padding-top:120px; }
  .opening-layout { grid-template-columns:1fr; gap:60px; }
  .hero--aperture h1 { font-size:clamp(48px,10.7vw,86px); }
  .opening-copy { max-width:650px; }
  .opening-eyebrow { margin-bottom:25px; font-size:11px; letter-spacing:.07em; }
  .opening-description { margin-top:25px; }
  .opening-composition { width:100%; max-width:590px; margin-inline:auto; }
  .hero-browser-bar { height:23px; gap:6px; padding:0 5px; }
  .hero-browser-address { height:14px; font-size:5px; gap:3px; }
  .hero-phone-cap { height:10px; }
  .layer-back { transform:none; }
  .layer-main { transform:rotateZ(-2deg); }
  .layer-front { transform:rotateZ(2deg); }
  .opening-next { padding:70px 0 65px; border-bottom:1px solid var(--line); }
  .opening-next h2 { font-size:clamp(35px,6.3vw,62px); }
  .opening-next .eyebrow { font-size:11px; margin-bottom:25px; }
  .opening-cue { display:none; }
  .opening-intro .fragment-entry { animation-duration:1s; }
  .opening-intro .opening-composition::before { transform-origin:left; animation:mobile-rule-x .9s .45s var(--ease) both; }
  .opening-intro .opening-composition::after { transform-origin:top; animation:mobile-rule-y 1s .7s var(--ease) both; }
}
@keyframes mobile-rule-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes mobile-rule-y { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@media (max-width:600px) {
  .opening-composition { aspect-ratio:.74; }
  .layer-front { top:22%; }
  .layer-back { width:100%; max-width:345px; top:auto; bottom:0; left:0; }
}
@media (max-width:420px) {
  .hero--aperture h1 { font-size:clamp(44px,12.1vw,51px); }
  .opening-actions { align-items:flex-start; flex-direction:column; gap:10px; margin-top:23px; }
  .opening-actions .button { font-size:12px; padding-left:18px; }
  .opening-description { font-size:13px; max-width:295px; }
  .opening-next h2 { font-size:clamp(28px,8.2vw,35px); }
  .composition-credit { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .hero--aperture *, .hero--aperture *::before { animation:none!important; } }