/* SEEN cut-paper city hero. Designed in Figma, built for the web, 2026-10-05. */

.cp-hero{--ink:#171716;--cream:#fff3dc;--pink:#ff4f89;--yellow:#ffdf35;--teal:#3fb8af;--paper:#f4ecda}
.cp-hero{--accent:#ff654b;box-sizing:border-box;font:400 18px/1.45 "Archivo Narrow",Arial,sans-serif;color:var(--ink);position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:center;gap:0 24px;min-height:min(900px,100svh);padding:48px clamp(16px,5vw,78px);background:var(--paper) url(cutpaper/paper.webp) center/cover;border-bottom:4px solid var(--ink);scroll-margin-top:60px}
.cp-copy{position:relative;z-index:5;max-width:470px}
.cp-logo{position:relative;font:400 clamp(120px,16vw,240px)/1 Anton,Impact,sans-serif;letter-spacing:-.01em;height:1.02em;width:max-content;margin:0 0 28px}
.cp-logo span{position:absolute;left:0;top:0;white-space:nowrap}
.cp-logo .l4{color:var(--c4)}.cp-logo .l3{color:var(--c3)}.cp-logo .l2{color:var(--c2)}.cp-logo .l1{color:var(--c1)}
.cp-logo .l0{position:relative;color:var(--face);-webkit-text-stroke:3px var(--c4);paint-order:stroke fill}
.cp-logo .l4{transform:translate(.076em,.076em)}.cp-logo .l3{transform:translate(.057em,.057em)}.cp-logo .l2{transform:translate(.038em,.038em)}.cp-logo .l1{transform:translate(.019em,.019em)}
.cp-kicker{margin:0 0 14px;font:700 14px/1.3 "Archivo Narrow",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c2361d}
.cp-hero h2{margin:0 0 16px;font:400 clamp(40px,4.6vw,66px)/.98 Anton,Impact,sans-serif;text-wrap:balance}
.cp-deck{margin:0 0 26px;font-size:20px;line-height:1.4;text-wrap:pretty}
.cp-cta{display:inline-block;padding:14px 22px;border:3px solid var(--ink);border-radius:14px;background:var(--yellow);color:var(--ink);font:700 18px/1 "Archivo Narrow",sans-serif;text-decoration:none;box-shadow:5px 5px 0 var(--accent)}
.cp-cta:hover,.cp-cta:focus-visible{background:var(--accent);outline:none}
.cp-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:820px;justify-self:end}
.cp-layer{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--r)) scale(var(--s,1));filter:drop-shadow(6px 10px 12px rgba(23,18,13,.35));will-change:transform;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cp-film{aspect-ratio:16/9}
.cp-film-paper{position:absolute;inset:0;width:100%;height:100%}
.cp-film-poster,.cp-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cpolygon fill='black' points='40,36 54,32 68,44 82,30 96,41 110,37 124,29 139,40 153,29 167,38 181,30 195,30 209,38 223,48 237,31 251,33 265,43 279,51 293,42 307,38 321,51 336,29 350,49 364,35 378,31 392,31 406,35 420,48 434,32 448,42 462,43 476,37 490,41 504,30 519,29 533,33 547,44 561,38 575,36 589,42 603,39 617,35 631,47 645,45 659,34 673,42 687,41 701,49 716,46 730,35 744,52 758,31 772,38 786,46 800,32 814,40 828,29 842,44 856,46 870,42 884,49 899,36 913,45 927,42 941,42 955,39 969,48 983,51 997,39 1011,44 1025,29 1039,45 1053,44 1067,52 1081,48 1096,35 1110,37 1124,44 1138,29 1152,39 1166,32 1180,31 1194,29 1208,46 1222,31 1236,34 1250,37 1264,49 1279,30 1293,39 1307,41 1321,49 1335,48 1349,49 1363,35 1377,38 1391,37 1405,49 1419,51 1433,32 1447,32 1461,34 1476,34 1490,40 1504,42 1518,34 1532,28 1546,38 1563,40 1558,54 1549,68 1555,82 1560,97 1557,111 1556,125 1571,139 1550,153 1553,167 1551,181 1553,196 1563,210 1562,224 1570,238 1557,252 1571,266 1570,280 1567,294 1568,309 1564,323 1571,337 1572,351 1568,365 1570,379 1563,393 1571,408 1551,422 1557,436 1568,450 1566,464 1564,478 1563,492 1569,507 1552,521 1548,535 1561,549 1560,563 1570,577 1570,591 1564,606 1566,620 1552,634 1568,648 1571,662 1549,676 1559,690 1568,704 1559,719 1571,733 1559,747 1549,761 1551,775 1555,789 1566,803 1563,818 1568,832 1553,846 1560,859 1546,853 1532,864 1518,867 1504,853 1490,848 1476,852 1461,853 1447,852 1433,854 1419,867 1405,860 1391,863 1377,871 1363,871 1349,865 1335,866 1321,855 1307,849 1293,861 1279,850 1264,848 1250,849 1236,863 1222,867 1208,867 1194,867 1180,867 1166,857 1152,850 1138,852 1124,860 1110,856 1096,853 1081,870 1067,856 1053,850 1039,853 1025,854 1011,861 997,868 983,853 969,864 955,853 941,849 927,862 913,862 899,849 884,855 870,868 856,869 842,868 828,850 814,853 800,868 786,852 772,848 758,856 744,864 730,859 716,869 701,872 687,849 673,856 659,859 645,850 631,862 617,851 603,852 589,867 575,866 561,865 547,866 533,858 519,866 504,862 490,869 476,850 462,864 448,861 434,858 420,850 406,862 392,850 378,860 364,859 350,859 336,872 321,861 307,868 293,872 279,853 265,868 251,861 237,855 223,859 209,864 195,860 181,859 167,853 153,869 139,859 124,866 110,865 96,853 82,860 68,859 54,854 50,860 39,846 43,832 40,818 40,803 45,789 39,775 41,761 39,747 51,733 45,719 49,704 51,690 34,676 41,662 51,648 48,634 31,620 31,606 39,591 30,577 34,563 30,549 44,535 47,521 50,507 32,492 45,478 44,464 31,450 49,436 51,422 33,408 51,393 38,379 40,365 52,351 48,337 32,323 38,309 40,294 36,280 33,266 36,252 45,238 28,224 41,210 39,196 28,181 36,167 43,153 40,139 30,125 52,111 47,97 51,82 31,68 34,54'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cpolygon fill='black' points='40,36 54,32 68,44 82,30 96,41 110,37 124,29 139,40 153,29 167,38 181,30 195,30 209,38 223,48 237,31 251,33 265,43 279,51 293,42 307,38 321,51 336,29 350,49 364,35 378,31 392,31 406,35 420,48 434,32 448,42 462,43 476,37 490,41 504,30 519,29 533,33 547,44 561,38 575,36 589,42 603,39 617,35 631,47 645,45 659,34 673,42 687,41 701,49 716,46 730,35 744,52 758,31 772,38 786,46 800,32 814,40 828,29 842,44 856,46 870,42 884,49 899,36 913,45 927,42 941,42 955,39 969,48 983,51 997,39 1011,44 1025,29 1039,45 1053,44 1067,52 1081,48 1096,35 1110,37 1124,44 1138,29 1152,39 1166,32 1180,31 1194,29 1208,46 1222,31 1236,34 1250,37 1264,49 1279,30 1293,39 1307,41 1321,49 1335,48 1349,49 1363,35 1377,38 1391,37 1405,49 1419,51 1433,32 1447,32 1461,34 1476,34 1490,40 1504,42 1518,34 1532,28 1546,38 1563,40 1558,54 1549,68 1555,82 1560,97 1557,111 1556,125 1571,139 1550,153 1553,167 1551,181 1553,196 1563,210 1562,224 1570,238 1557,252 1571,266 1570,280 1567,294 1568,309 1564,323 1571,337 1572,351 1568,365 1570,379 1563,393 1571,408 1551,422 1557,436 1568,450 1566,464 1564,478 1563,492 1569,507 1552,521 1548,535 1561,549 1560,563 1570,577 1570,591 1564,606 1566,620 1552,634 1568,648 1571,662 1549,676 1559,690 1568,704 1559,719 1571,733 1559,747 1549,761 1551,775 1555,789 1566,803 1563,818 1568,832 1553,846 1560,859 1546,853 1532,864 1518,867 1504,853 1490,848 1476,852 1461,853 1447,852 1433,854 1419,867 1405,860 1391,863 1377,871 1363,871 1349,865 1335,866 1321,855 1307,849 1293,861 1279,850 1264,848 1250,849 1236,863 1222,867 1208,867 1194,867 1180,867 1166,857 1152,850 1138,852 1124,860 1110,856 1096,853 1081,870 1067,856 1053,850 1039,853 1025,854 1011,861 997,868 983,853 969,864 955,853 941,849 927,862 913,862 899,849 884,855 870,868 856,869 842,868 828,850 814,853 800,868 786,852 772,848 758,856 744,864 730,859 716,869 701,872 687,849 673,856 659,859 645,850 631,862 617,851 603,852 589,867 575,866 561,865 547,866 533,858 519,866 504,862 490,869 476,850 462,864 448,861 434,858 420,850 406,862 392,850 378,860 364,859 350,859 336,872 321,861 307,868 293,872 279,853 265,868 251,861 237,855 223,859 209,864 195,860 181,859 167,853 153,869 139,859 124,866 110,865 96,853 82,860 68,859 54,854 50,860 39,846 43,832 40,818 40,803 45,789 39,775 41,761 39,747 51,733 45,719 49,704 51,690 34,676 41,662 51,648 48,634 31,620 31,606 39,591 30,577 34,563 30,549 44,535 47,521 50,507 32,492 45,478 44,464 31,450 49,436 51,422 33,408 51,393 38,379 40,365 52,351 48,337 32,323 38,309 40,294 36,280 33,266 36,252 45,238 28,224 41,210 39,196 28,181 36,167 43,153 40,139 30,125 52,111 47,97 51,82 31,68 34,54'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.cp-film-video{opacity:0;transition:opacity .6s}.cp-film-video.on{opacity:1}
.cp-piece{position:absolute}
.cp-paper{position:absolute;inset:0;background:center/100% 100% no-repeat}
.cp-clip{position:absolute;inset:0;overflow:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.cp-kb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--o,50% 50%);animation:cp-kb var(--d,20s) ease-in-out infinite alternate;animation-delay:var(--kd,0s)}
.kb-L .cp-kb{--o:30% 20%;--d:11s;--kd:-2s}.kb-C .cp-kb{--o:65% 30%;--d:14s;--kd:-8s}.kb-R .cp-kb{--o:35% 75%;--d:12s;--kd:-5s}.kb-B .cp-kb{--o:75% 45%;--d:10s;--kd:-6s}
@keyframes cp-kb{from{transform:scale(1.04) translate(2%,1.5%)}to{transform:scale(1.34) translate(-5%,-4%)}}
.cp-hero.no-motion .cp-kb{animation:none!important}
.cp-layer.halftone{filter:none;opacity:.95}
.cp-caption{position:absolute;left:clamp(16px,5vw,78px);bottom:14px;z-index:6;margin:0;font:700 11px/1.3 "Archivo Narrow",sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
/* Intro: paper is placed, logo layers fan out, copy rises. */
.cp-hero.is-in .cp-layer{animation:cp-place .8s cubic-bezier(.2,1.25,.3,1) backwards;animation-delay:calc(var(--i)*120ms + 150ms)}
.cp-hero.is-in .cp-logo .l0{animation:cp-drop .5s cubic-bezier(.2,1.3,.3,1) both}
.cp-hero.is-in .cp-logo .l1{animation:cp-fan1 .45s cubic-bezier(.2,1.4,.3,1) .5s both}
.cp-hero.is-in .cp-logo .l2{animation:cp-fan2 .45s cubic-bezier(.2,1.4,.3,1) .62s both}
.cp-hero.is-in .cp-logo .l3{animation:cp-fan3 .45s cubic-bezier(.2,1.4,.3,1) .74s both}
.cp-hero.is-in .cp-logo .l4{animation:cp-fan4 .45s cubic-bezier(.2,1.4,.3,1) .86s both}
.cp-hero.is-in .cp-text{animation:cp-rise .5s ease-out 1.1s both}
@keyframes cp-place{from{opacity:0;transform:translate3d(0,var(--dy,-90px),0) rotate(calc(var(--r) + var(--dr,4deg))) scale(1.06)}}
@keyframes cp-drop{from{opacity:0;transform:translateY(-.3em) rotate(6deg)}}
@keyframes cp-fan1{from{opacity:0;transform:none}}
@keyframes cp-fan2{from{opacity:0;transform:none}}
@keyframes cp-fan3{from{opacity:0;transform:none}}
@keyframes cp-fan4{from{opacity:0;transform:none}}
@keyframes cp-rise{from{opacity:0;transform:translateY(24px)}}
.cp-hero.no-motion *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.cp-hero *{animation:none!important;transition:none!important}}
@media (max-width:860px){
  .cp-hero{grid-template-columns:1fr;padding:32px 16px 48px;min-height:0}
 .cp-copy{max-width:none}
 .cp-logo{font-size:clamp(96px,30vw,150px);margin-bottom:20px}
 .cp-stage{margin-top:28px;justify-self:stretch}
 .cp-caption{position:static;margin-top:12px}
}
@media (hover:none){.cp-hint{display:none}}

.cp-hero *{box-sizing:border-box}
.cp-hero h1,.cp-hero h2{margin:0 0 16px;font:400 clamp(40px,4.6vw,66px)/.98 Anton,Impact,sans-serif;text-wrap:balance;color:var(--ink);letter-spacing:0;text-shadow:none;text-transform:none}
.cp-hero .cp-deck{color:var(--ink)}
/* Guard against city-page heading and paragraph styles. */
.cp-hero .cp-text h1,.cp-hero .cp-text h2{font:400 clamp(40px,4.6vw,66px)/.98 Anton,Impact,sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-shadow:none!important;color:var(--ink)!important;margin:0 0 16px!important;-webkit-text-stroke:0!important}
.cp-hero .cp-deck{font:400 20px/1.4 "Archivo Narrow",Arial,sans-serif!important;color:var(--ink)!important;margin:0 0 26px!important;max-width:none!important}
.cp-hero .cp-kicker{font:700 14px/1.3 "Archivo Narrow",sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#c2361d!important;margin:0 0 14px!important}
.cp-hero .cp-cta{font:700 18px/1 "Archivo Narrow",sans-serif!important;color:var(--ink)!important;text-decoration:none!important}
.cp-hero .cp-logo span{text-shadow:none!important}
.cp-hero .cp-caption{color:var(--ink)}
.cp-hero img{max-width:none;border:0;box-shadow:none}