/* Sabahebat: Sustainability ("the record"). Loads after site.css and reuses its paper,
   type, pen, highlighter, header, menu and footer. This page adds a second ink,
   register green (the logo's green), for ruled records and the land drawing.
   Stages are 1440x900 (desktop) and 390x720 (phones), scaled by --fit, as on the homepage.
   Without .motion (reduced motion, ?static, no JS) every phase lies flat at its final frame. */

.sus { --green: #143D2D; --green-2: #2F6B4F; --rule: rgba(20, 61, 45, .2); --rule-2: rgba(20, 61, 45, .34); }

/* ------------------------------------------------------------ header and menu: site.css (the same on every page); this page adds its documents to the panel */
.mp-docs { border-top: 2px solid var(--ink); display: flex; flex-direction: column; }
.mp-h { display: block; padding: 12px 20px 2px; font-size: 12px; color: var(--red); }

/* ------------------------------------------------------------ scenes */
.motion .s1 { --len: 333.33; z-index: 1; }
.motion .s2 { --len: 442.67; z-index: 2; }   /* no overlap: the commitments block (below) slides over scene 1 instead */
.motion.snap-native .s2 { --len: 506.31; }          /* iPhone/iPad: the lift runs at 0.44x so its two moments sit 128vh apart (SNAP_S2) */
.motion .s3 { --len: 554.67; margin-top: calc(var(--vh, 1vh) * -100); z-index: 3; }
.motion.snap-native .s3 { --len: 674.06; }          /* iPhone/iPad: 1:1 or slower after the first people moment (sustainability.js SNAP_S3) */
.motion .s1 .phase, .motion .s3 .phase { background: transparent; }
.s1 .pin, .s3 .pin { background-color: var(--paper); background-image: radial-gradient(rgba(60, 40, 10, .07) 1px, transparent 1.2px), radial-gradient(rgba(60, 40, 10, .05) 1px, transparent 1.2px); background-size: 5px 5px, 7px 7px; background-position: 0 0, 2px 3px; }
.motion .s1 .pin { background: transparent; }
.motion .ph-hook { z-index: 2; }
.motion .ph-cert { z-index: 1; }
.motion .ph-pa { z-index: 1; } .motion .ph-pb { z-index: 2; } .motion .ph-ca { z-index: 3; } .motion .ph-cb { z-index: 4; }
.motion .s3 .phase:not(.vis) { visibility: hidden; }
.motion .s3 .pin { clip-path: polygon(0 14px, 5% 4px, 11% 13px, 17% 3px, 24% 12px, 30% 5px, 37% 15px, 44% 4px, 51% 12px, 58% 2px, 65% 13px, 72% 5px, 79% 14px, 86% 4px, 92% 12px, 97% 3px, 100% 10px, 100% 100%, 0 100%); }

/* photo slots: the real photo, or a dashed "Photo needed" placeholder */
.nosel { -webkit-user-select: none; user-select: none; }
.ph-slot { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #CFC2A2; }
.ph-slot .ph-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(26, 24, 20, .8) 1.05px, transparent 1.35px), radial-gradient(rgba(26, 24, 20, .35) 1.05px, transparent 1.35px); background-size: 6px 6px, 6px 6px; background-position: 0 0, 3px 3px; -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,.25), rgba(0,0,0,.9) 55%, rgba(0,0,0,.45)); mask-image: linear-gradient(160deg, rgba(0,0,0,.25), rgba(0,0,0,.9) 55%, rgba(0,0,0,.45)); }
.ph-slot .tag { left: 10px; bottom: 10px; top: auto; width: auto; max-width: calc(100% - 20px); font-size: 11px; padding: 4px 7px; }
.ph-slot.is-real { background: #1A1814; }
.ph-slot.is-real img { width: 100%; height: 100%; object-fit: cover; }
.todo { display: inline-block; font: 600 11px/1.4 var(--mono); border: 1.5px dashed currentColor; padding: 1px 6px; margin: 6px 8px 0 0; letter-spacing: 0; text-transform: none; vertical-align: middle; }

/* ------------------------------------------------------------ SCENE 1a: the record (hook) */
.hk-sheet { position: absolute; left: 72px; top: 150px; width: 1296px; height: 690px; perspective: 2600px; perspective-origin: 50% 50%; }
.hk-shadow, .hk-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: var(--st, 0px); height: var(--sh, 690px); box-shadow: 0 30px 44px -18px rgba(40, 25, 5, .5), 0 3px 6px rgba(40, 25, 5, .2); pointer-events: none; }
.fold { position: absolute; left: 0; width: 100%; height: 230px; transform-style: preserve-3d; }
.fold.f1 { top: 0; transform-origin: 50% 100%; z-index: 3; }
.fold.f2 { top: 230px; z-index: 1; }
.fold.f3 { top: 460px; transform-origin: 50% 0; z-index: 2; }
.face { position: absolute; inset: 0; background: var(--card); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
/* which face shows is switched in JS at the 90° mark (WebKit doesn't always honour backface-visibility) */
.fold .face.back { visibility: hidden; }
.fold.flip .face.back { visibility: visible; }
.fold.flip .face.front { visibility: hidden; }
.face.back { transform: rotateX(180deg); background-color: #EFE6D0; background-image: radial-gradient(rgba(60, 40, 10, .08) 1px, transparent 1.2px); background-size: 5px 5px; display: flex; align-items: center; justify-content: center; }
.fold .shade { position: absolute; inset: 0; background: #1A1814; opacity: 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hk-emblem { width: 150px; height: auto; opacity: .9; }
.crease { position: absolute; left: 0; right: 0; height: 2px; pointer-events: none; z-index: 4; background: linear-gradient(rgba(255, 255, 255, .7), rgba(120, 95, 50, .2)); opacity: .55; }
.crease.c1 { top: 229px; } .crease.c2 { top: 459px; }

.hk-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font: 400 190px/1 var(--display); text-transform: uppercase; }
.st-word { display: block; white-space: nowrap; text-align: center; line-height: .9; }
.st-word i { font-style: normal; display: inline-block; margin: 0 4px; color: var(--ink); transform: translateY(var(--y)) rotate(var(--r)); -webkit-mask-image: url(../sustainability/art/ink.webp); mask-image: url(../sustainability/art/ink.webp); -webkit-mask-size: 360px 360px; mask-size: 360px 360px; -webkit-mask-position: var(--mx) var(--my); mask-position: var(--mx) var(--my); }
.st-word .hy, .st-word .brk { display: none; }

.hk-intro { position: absolute; left: 88px; right: 88px; top: 50%; transform: translateY(-50%); font-size: 36px; line-height: 1.36; letter-spacing: -.005em; }
.k3 { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; margin: 0 -.06em; }
.hk-last { display: block; margin-top: .18em; }
.hk-last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 20 3, 40 8, 60 5 S 100 4, 119 6' fill='none' stroke='%23B3261E' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .28em; padding-bottom: .12em; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hk-last::before { content: ''; display: block; height: .18em; }

.hk-photos { position: absolute; inset: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 10px; }
.hk-ph { position: relative; display: block; min-height: 0; overflow: hidden; }
.hk-ph .ph-slot { height: 100%; }
.hk-ph .tag { font-size: 11px; }

.hk-tabs { position: absolute; left: 150px; top: 838px; display: flex; gap: 12px; z-index: 3; }
.hk-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px 8px; background: var(--card); border: 2px solid var(--ink); border-top: 0; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 12px 16px -10px rgba(40, 25, 5, .45); transition: transform .12s steps(2, end), background-color .12s steps(2, end); transform-origin: 50% 0; }
.hk-tabs a:hover, .hk-tabs a:focus-visible { background: var(--hl); color: var(--ink); transform: translateY(4px); }

/* ------------------------------------------------------------ SCENE 1b: the certificate */
.ce-h2 { position: absolute; left: 72px; top: 80px; font-size: 104px; line-height: .95; margin: 0; white-space: nowrap; }
.ce-h2 .ln { display: inline; }
.ce-card { position: absolute; left: 64px; top: 232px; width: 800px; padding: 34px 44px 36px 92px; rotate: -.6deg; background-color: #FAF6EA; background-image: linear-gradient(90deg, transparent 63px, rgba(179, 38, 30, .55) 63px, rgba(179, 38, 30, .55) 65px, transparent 65px), linear-gradient(#FAF6EA, #FAF6EA), repeating-linear-gradient(transparent 0 29px, var(--rule-2) 29px 30px, transparent 30px 32px); background-size: 100% 100%, 100% 118px, 100% 100%; background-repeat: no-repeat, no-repeat, repeat; background-position: 0 0, 0 0, 0 0; box-shadow: 0 24px 34px -14px rgba(40, 25, 5, .5), 0 2px 4px rgba(40, 25, 5, .2); }
.ce-card::before { content: ''; position: absolute; left: 22px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--paper); box-shadow: inset 2px 2px 3px rgba(40, 25, 5, .35); }
.ce-h3 { font-size: 40px; line-height: 40px; max-width: 640px; }
.ce-body { font-size: 20px; line-height: 32px; margin-top: 14px; max-width: 560px; }
.ce-btns { position: absolute; left: 72px; top: 700px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; width: 760px; }
.ce-card .ce-btns { position: static; width: auto; margin-top: 30px; max-width: 420px; }
.ce-stamp { position: absolute; right: 40px; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px 6px; border: 4px solid var(--red); color: var(--red); rotate: -8deg; -webkit-mask-image: url(../sustainability/art/ink.webp); mask-image: url(../sustainability/art/ink.webp); -webkit-mask-size: 300px; mask-size: 300px; }
.ce-stamp .mono { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ce-stamp .display { font-size: 42px; line-height: 1; }
.ce-photo { left: 884px; top: 150px; width: 484px; height: 258px; margin: 0; rotate: 2deg; filter: drop-shadow(0 18px 16px rgba(40, 25, 5, .34)) drop-shadow(0 2px 2px rgba(40, 25, 5, .22)); }
.ce-photo .ph-slot { clip-path: polygon(0 0, 100% 0, 100% 92%, 97% 96%, 92% 93%, 87% 97.5%, 81% 94%, 75% 97%, 69% 93.5%, 63% 98%, 57% 94%, 51% 97%, 45% 93%, 39% 97.5%, 33% 94%, 27% 98%, 21% 93.5%, 15% 97%, 9% 94%, 4% 97.5%, 0 94%); }
.ce-photo .ph-slot { background: #E3D9C0; }
.ce-photo .ph-slot.is-real { background: #fff; }
.ce-photo .ph-slot.is-real img { object-fit: cover; object-position: 50% 0; }
.ce-photo .tag { width: 220px; }
.t-ce1 { left: 36%; top: -14px; width: 120px; rotate: -4deg; }
.t-ce2 { right: -30px; top: 30%; width: 90px; height: 28px; rotate: 72deg; }
.stamper { position: absolute; left: 600px; top: 520px; width: 200px; height: 275px; z-index: 8; pointer-events: none; will-change: transform; }
.stp-body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.stp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 16px rgba(40, 25, 5, .35)); }
.stp-win { position: absolute; left: 16.667%; top: 59.394%; width: 66.667%; height: 20%; display: grid; grid-template-columns: 32.5% 35% 32.5%; overflow: hidden; }
.band { position: relative; overflow: hidden; height: 100%; }
.band .roll { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; }
.band b { display: flex; align-items: center; justify-content: center; height: var(--bh, 55px); font: 400 22px/1 var(--display); color: var(--ink); }
.b-y b { font-size: 17.5px; }

/* ------------------------------------------------------------ SCENE 2: our land */
.tracing { background-color: rgba(250, 246, 234, var(--ta, .97)); background-image: radial-gradient(ellipse 60% 3px at 30% 40%, rgba(255, 255, 255, .5), transparent), radial-gradient(rgba(60, 40, 10, .045) 1px, transparent 1.2px); background-size: 420px 160px, 6px 6px; }
.motion .s2 .pin { box-shadow: 0 -18px 30px -12px rgba(40, 25, 5, .35); }
.la-hl { position: absolute; left: 72px; top: 70px; width: 600px; }
.la-hl .h2 { font-size: 124px; line-height: .92; margin: 0; }
.la-lead { font-size: 27px; line-height: 1.4; font-style: italic; margin-top: 16px; max-width: 540px; }
.la-body { position: absolute; left: 724px; top: 86px; width: 644px; font-size: 19.5px; line-height: 1.62; }
.la-body .k, .pa-body .k, .pb-lead .k, .ca-body .k, .cb-body .k { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .3s cubic-bezier(.6, 0, .2, 1); }
.la-body .k.on, .pa-body .k.on, .pb-lead .k.on, .ca-body .k.on, .cb-body .k.on { background-size: 100% 100%; }
.la-view { position: absolute; left: 0; top: 330px; width: 1440px; height: 570px; overflow: hidden; }
.la-sheet { position: absolute; inset: 0; background-color: rgb(250, 246, 234); background-image: radial-gradient(ellipse 60% 3px at 30% 40%, rgba(255, 255, 255, .5), transparent), radial-gradient(rgba(60, 40, 10, .045) 1px, transparent 1.2px); background-size: 420px 160px, 6px 6px; will-change: transform; }
.la-sheet::before { content: ''; position: absolute; left: 72px; right: 72px; top: 0; height: 2px; background: var(--ink); opacity: .9; z-index: 1; }
.la-sheet.lifting { box-shadow: 18px 0 30px -12px rgba(40, 25, 5, .55); }
.la-aerial { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.la-aerial .ph-slot { height: 100%; }
.la-aerial img { object-position: 50% 58%; transform-origin: 50% 60%; will-change: transform; }
.la-cap { position: absolute; right: 72px; bottom: 26px; background: var(--card); color: var(--ink); padding: 7px 12px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 16px -8px rgba(40, 25, 5, .5); rotate: -1.5deg; }
.motion .la-cap:not(.on) { visibility: hidden; }
.motion .la-cap.on { animation: sPop 333ms steps(1, end) both; }
.la-pan { position: absolute; left: 0; top: 50px; width: 3600px; height: 520px; transform-origin: 0 0; will-change: transform; }
.la-svg, .la-pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.la-svg .lv-ground { fill: none; stroke: var(--green); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.la-svg .lv-waves { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
.la-svg .lv-ink { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.la-svg .lv-ink.thin { stroke-width: 1.7; }
.la-pen .pen { stroke-width: 3.6; }
.la-lab { position: absolute; translate: -50% -50%; scale: var(--lz, 1); font-size: 17px; font-weight: 600; color: var(--red); background: rgba(250, 246, 234, .92); padding: 2px 8px; white-space: nowrap; }
.lab-buffer { font-size: 18px; }

/* ------------------------------------------------------------ SCENE 3a: our people, signed in */
.pa-hl { position: absolute; left: 72px; top: 76px; width: 640px; }
.pa-hl .h2 { font-size: 124px; line-height: .92; margin: 0; }
.pa-lead { font-size: 24px; line-height: 1.42; margin-top: 18px; max-width: 600px; }
.pa-body { position: absolute; left: 72px; top: 362px; width: 620px; font-size: 19.5px; line-height: 1.62; }
.clipboard { position: absolute; left: 788px; top: 64px; width: 560px; height: 790px; will-change: transform; }
.cb-board { position: absolute; inset: 0; border-radius: 22px; background-color: #9C7448; background-image: radial-gradient(rgba(40, 20, 5, .55) 1.1px, transparent 1.4px), linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .12)); background-size: 5px 5px, 100% 100%; border: 3px solid var(--ink); box-shadow: 0 30px 44px -18px rgba(40, 25, 5, .6), 0 3px 5px rgba(40, 25, 5, .3); }
.cb-clip { position: absolute; left: 50%; top: -22px; width: 230px; margin-left: -115px; z-index: 40; }
.clip-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); }
.cb-stack { position: absolute; left: 36px; top: 64px; width: 488px; height: 690px; }
.att { position: absolute; left: 0; right: 0; top: calc(var(--i) * 38px); height: 386px; overflow: hidden; background: #FBF8EF; transform: translateX(var(--dx)) rotate(var(--r)); box-shadow: 0 -5px 9px -7px rgba(40, 25, 5, .5), 0 6px 10px -6px rgba(40, 25, 5, .4); padding: 6px 26px 12px; display: flex; flex-direction: column; background-image: linear-gradient(90deg, transparent 58px, rgba(179, 38, 30, .5) 58px, rgba(179, 38, 30, .5) 60px, transparent 60px); }
.att-h { display: flex; align-items: center; flex: none; height: 28px; border-bottom: 3px double var(--ink); margin-bottom: 6px; padding-left: 44px; }
.att-h .display { font-size: 25px; line-height: 1; }
.att-ph { position: relative; display: block; flex: 1 1 auto; min-height: 0; margin-top: 8px; background: #1A1814; box-shadow: 0 1px 0 rgba(40, 25, 5, .15); }
.att-ph .ph-slot { height: 100%; }

/* ------------------------------------------------------------ SCENE 3b: together, and the recognition */
.pb-kick { position: absolute; left: 72px; top: 92px; font-size: 14px; color: var(--red); }
.pb-lead { position: absolute; left: 72px; top: 128px; width: 620px; font-size: 21px; line-height: 1.55; }
.pb-first { display: block; margin-bottom: 14px; font-size: 27px; line-height: 1.38; }
.pb-body { position: absolute; left: 72px; top: 342px; width: 600px; font-size: 19.5px; line-height: 1.62; }
.pb-body .yr { position: relative; display: inline-block; }
.pb-pic { position: absolute; width: 300px; height: 226px; margin: 0; padding: 10px 10px 34px; background: #fff; rotate: var(--r); box-shadow: 0 22px 30px -14px rgba(40, 25, 5, .55), 0 2px 3px rgba(40, 25, 5, .25); z-index: 50; }
.pb-pic .tape { left: 34%; top: -13px; width: 96px; height: 26px; rotate: -5deg; }
.pic1 { left: 724px; top: 72px; } .pic2 { left: 1082px; top: 118px; } .pic3 { left: 752px; top: 372px; } .pic4 { left: 1104px; top: 420px; } .pic5 { left: 930px; top: 640px; }
.pb-pic .ph-slot { height: 100%; }
.pb-award { position: absolute; left: 150px; top: 474px; width: 330px; height: 370px; margin: 0; padding: 14px; background: #3B2A1A; box-shadow: 0 26px 38px -16px rgba(40, 25, 5, .65), inset 0 0 0 3px #1A1814; rotate: -1.5deg; z-index: 60; }
.pb-award .ph-slot { background: #E8DEC5; }
.pb-award .ph-slot.is-real { background: #fff; }
.pb-award .ph-slot.is-real img { object-fit: contain; }
.pb-award .tag { width: 190px; }
/* the year tag and its red ring sit beside the frame, never on the photo */
.pb-year { position: absolute; left: calc(100% + 44px); top: 40px; font-size: 44px; line-height: 1; color: var(--ink); background: var(--hl); padding: 4px 10px 2px; rotate: 4deg; }
.pb-ring { position: absolute; left: calc(100% + 8px); top: 22px; width: 172px; height: 86px; overflow: visible; }
.pb-ring .pen { stroke-width: 4.5; }

/* ------------------------------------------------------------ SCENE 3c: our community, the map */
.ca-hl { position: absolute; left: 72px; top: 76px; width: 700px; }
.ca-hl .h2 { font-size: 112px; line-height: .92; margin: 0; white-space: nowrap; }
.ca-body { position: absolute; left: 72px; top: 222px; width: 620px; font-size: 19px; line-height: 1.58; }
.ca-first { display: block; margin-bottom: 12px; font-size: 21px; line-height: 1.5; }
.ca-map { left: 790px; top: 60px; width: 590px; height: 716px; rotate: 1.2deg; }
.cm-sheet { position: absolute; inset: 0; }
.cm-paper { position: absolute; inset: 0; background: #F5EEDD; clip-path: polygon(0 1%, 9% 0, 18% 1.4%, 29% .2%, 41% 1.2%, 52% 0, 63% 1.3%, 74% .3%, 86% 1.5%, 100% .4%, 99.2% 12%, 100% 26%, 99.4% 41%, 100% 57%, 99.3% 72%, 100% 86%, 99.5% 100%, 88% 99%, 76% 100%, 64% 98.8%, 51% 99.8%, 39% 98.9%, 27% 100%, 14% 99%, 2% 99.8%, .6% 86%, 0 71%, .7% 55%, 0 40%, .8% 24%, 0 11%); }
/* the torn paper's shadow is its own layer, so the pen drawing on top never makes it redraw */
.cm-shade { position: absolute; inset: 0; }
.cm-shade::before { content: ''; position: absolute; left: 1.2%; right: 1.2%; top: 1.5%; bottom: 1.2%; box-shadow: 0 22px 26px -10px rgba(40, 25, 5, .42), 0 2px 3px rgba(40, 25, 5, .22); }
.ca-map, .ca-tags { will-change: transform; }
.wc { will-change: transform; }
.cm-svg, .cm-pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cm-pen { z-index: 3; pointer-events: none; }
.cm-pen .pen { stroke-width: 2.2; }
.cm-lab { position: absolute; white-space: nowrap; line-height: 1; pointer-events: none; }
.cm-kk { translate: 12px -6px; font-size: 13px; opacity: .6; }
.cm-town { display: flex; flex-direction: column; gap: 3px; translate: 24px -16px; }
.cm-town b { font-size: 30px; font-weight: 400; }
.cm-town i { font-style: normal; font-size: 13px; }
.cm-mb { font-size: 38px; translate: 40px -21px; }
.cm-km { font-size: 17px; font-weight: 600; color: var(--red); translate: calc(-100% - 44px) 24px; }   /* below left of the ring, clear of "Membakut" */
.cm-tag { position: absolute; z-index: 4; display: block; max-width: 260px; padding: 18px 16px 12px; background: var(--card); font: 600 16px/1.35 var(--mono); rotate: var(--r); box-shadow: 0 12px 16px -8px rgba(40, 25, 5, .5); }
.cm-tag .pinhead { top: -7px; }
.ca-tags { position: absolute; inset: 0; pointer-events: none; }
.cm-tag.t1 { left: 96px; top: 546px; } .cm-tag.t2 { left: 360px; top: 520px; max-width: 250px; }
.cm-tag.t3 { left: 128px; top: 668px; } .cm-tag.t4 { left: 420px; top: 658px; }
.t-cm { left: 38%; top: -14px; rotate: -4deg; }

/* ------------------------------------------------------------ SCENE 3d: contributions, the festive wheel */
.cb-kick { position: absolute; left: 72px; top: 92px; font-size: 14px; color: var(--red); }
.cb-body { position: absolute; left: 72px; top: 128px; width: 640px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; font-size: 19px; line-height: 1.5; }
.cb-gh { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.cb-g dd { margin: 0; }
.wheel { position: absolute; left: 790px; top: 150px; width: 580px; height: 580px; --wr: 580px; }
.wh-roll { position: absolute; inset: 0; will-change: transform; }
.wh-disc, .wh-cover { position: absolute; inset: 0; }
.wh-disc { will-change: transform; }
.wh-roll::before { content: ''; position: absolute; inset: 1.5%; border-radius: 50%; box-shadow: 0 22px 30px -8px rgba(40, 25, 5, .45); }
.wh-disc-svg, .wh-cover-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wh-cover { filter: drop-shadow(0 6px 6px rgba(40, 25, 5, .35)); }
.wh-lab { position: absolute; left: 50%; top: 50%; width: 230px; height: 0; margin-left: -115px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; line-height: .95; color: var(--card); transform: rotate(var(--a)) translateY(calc(var(--wr) * -.382)); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.wh-mark { position: absolute; left: 50%; top: 66%; width: 96px; margin-left: -48px; opacity: .85; }
.wh-emblem { display: block; width: 100%; height: auto; }
.cb-pic { position: absolute; width: 270px; height: 204px; margin: 0; padding: 9px 9px 30px; background: #fff; rotate: var(--r); box-shadow: 0 22px 30px -14px rgba(40, 25, 5, .55), 0 2px 3px rgba(40, 25, 5, .25); z-index: 5; }
.cb-pic .tape { left: 32%; top: -12px; width: 90px; height: 24px; rotate: -4deg; }
.cp-school { left: 76px; top: 404px; } .cp-flood { left: 380px; top: 440px; } .cp-cleanup { left: 206px; top: 640px; }

/* ------------------------------------------------------------ WHAT WE COMMIT TO: slides up over the stamped certificate */
.commit { position: relative; padding: 130px 0 140px; background-color: var(--paper); }
.motion .commit { margin-top: calc(var(--vh, 1vh) * -100); z-index: 2; box-shadow: 0 -18px 30px -12px rgba(40, 25, 5, .35); clip-path: polygon(0 14px, 6% 4px, 12% 13px, 19% 3px, 26% 12px, 33% 5px, 40% 14px, 47% 3px, 54% 12px, 61% 4px, 68% 13px, 75% 4px, 82% 14px, 89% 3px, 95% 12px, 100% 5px, 100% 100%, 0 100%); }
.cmt-head { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.cmt-head .h2 { font-size: 104px; }
.cmt-head p { font-size: 21px; line-height: 1.55; max-width: 460px; }
.cmt-groups { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 2px solid var(--ink); }
.cmt-group { padding-top: 22px; }
.cmt-h { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.cmt-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cmt-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 21px; line-height: 1.35; }
.cm-tick { width: 26px; height: 24px; overflow: visible; }
.cm-tick .pen { stroke-width: 3.2; }
.motion .cmt-groups:not(.in) .cm-tick { visibility: hidden; }
.motion .cmt-groups.in .cm-tick { animation: tickOn 250ms steps(1, end) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes tickOn { 0% { transform: scale(1.6) rotate(-10deg); opacity: .4; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } }

/* ------------------------------------------------------------ NEWS: the contact sheet */
.news { padding: 130px 0 140px; }
.motion .news { margin-top: calc(var(--vh, 1vh) * -100); z-index: 6; clip-path: polygon(0 16px, 4% 6px, 9% 14px, 15% 3px, 22% 12px, 28% 5px, 35% 15px, 42% 4px, 49% 13px, 56% 2px, 63% 12px, 70% 5px, 77% 15px, 84% 4px, 91% 12px, 96% 3px, 100% 11px, 100% 100%, 0 100%); }
.nw-head { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.nw-head .h2 { font-size: 104px; }
.nw-head p { font-size: 21px; line-height: 1.55; max-width: 460px; }
.nw-sheet { position: relative; margin-top: 56px; padding: 44px 30px 40px; background-color: #0C0B09; rotate: -.5deg; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); }
.nw-sheet::before, .nw-sheet::after { content: ''; position: absolute; left: 14px; right: 14px; height: 14px; background-image: repeating-linear-gradient(90deg, transparent 0 14px, #3A352C 14px 26px, transparent 26px 40px); border-radius: 2px; }
.nw-sheet::before { top: 12px; } .nw-sheet::after { bottom: 12px; }
.nw-edge { position: absolute; left: 40px; top: 28px; font-size: 10px; letter-spacing: .3em; color: #D99A2B; opacity: .8; white-space: nowrap; overflow: hidden; right: 40px; }
.nw-frames { list-style: none; margin: 0; padding: 18px 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 16px; }
.fr { position: relative; }
.fr-a { display: block; text-decoration: none; color: var(--paper); }
.fr-img { position: relative; display: block; aspect-ratio: 3 / 2; border: 3px solid #2C2822; transition: transform .15s steps(3, end); }
.fr-a:hover .fr-img, .fr-a:focus-visible .fr-img { transform: translateY(-5px) rotate(-.8deg); }
.fr-a:hover, .fr-a:focus-visible { color: var(--paper); }
.fr-img .ph-slot { background: #3C372E; }
.fr-img .ph-slot .ph-dots { opacity: .55; background-image: radial-gradient(rgba(238, 228, 207, .55) 1.05px, transparent 1.35px); background-size: 6px 6px; }
.fr-cap { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 6px; min-height: 22px; color: rgba(238, 228, 207, .8); }
.fr-cap .todo { margin-top: 0; font-size: 10px; }
.fr-cap { flex-direction: column; gap: 3px; }
.fr-t { font: 600 15px/1.35 var(--serif); color: var(--paper); text-wrap: pretty; }
.fr-y { font-size: 12px; color: #D99A2B; letter-spacing: .04em; }
.fr-no { position: absolute; right: 2px; top: -21px; font-size: 10px; color: #D99A2B; letter-spacing: .08em; }
.fr-no b { font-weight: 400; margin: 0 4px; }
.nw-more { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.news .btn { background: var(--paper); color: var(--ink); }
.news .btn:hover { color: var(--ink); box-shadow: 4px 4px 0 var(--hl); }
.motion .nw-sheet:not(.in) .fr-img { visibility: hidden; }
.motion .nw-sheet.in .fr-img { animation: expose 333ms steps(1, end) backwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes expose { 0% { filter: brightness(3.2); transform: scale(.96); } 25% { filter: brightness(1.8); transform: scale(1.02); } 50% { filter: brightness(1.15); transform: none; } 75%, 100% { filter: none; transform: none; } }

/* ------------------------------------------------------------ POLICIES: signed and displayed */
.policies { padding: 150px 0 130px; background-color: var(--paper); }
.po-head { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
.po-head .h2 { font-size: 104px; }
.po-head p { font-size: 20px; line-height: 1.6; max-width: 480px; }
.po-mail { font-weight: 600; text-underline-offset: 4px; }
.po-list { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; align-items: stretch; }
.po-doc { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.po-doc > .po-btn, .po-doc > .todo { flex: none; }
.po-sheet { position: relative; width: 100%; flex: 1 1 auto; padding: 38px 28px 24px; background: #FBF8EF; rotate: var(--r); box-shadow: 0 20px 30px -14px rgba(40, 25, 5, .5), 0 2px 3px rgba(40, 25, 5, .2); background-image: linear-gradient(transparent 0 30px, rgba(20, 61, 45, .9) 30px 33px, transparent 33px); display: flex; flex-direction: column; transition: transform .15s steps(3, end); }
.po-doc:hover .po-sheet, .po-doc:focus-within .po-sheet { transform: translateY(-6px) rotate(calc(var(--r) * -1)); }
.po-title { font: 400 29px/1.02 var(--display); text-transform: uppercase; margin-top: 12px; }
.po-lines { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 8px; }
.po-lines i { display: block; height: 5px; background: rgba(26, 24, 20, .14); }
.po-lines i:nth-child(2) { width: 88%; } .po-lines i:nth-child(3) { width: 94%; } .po-lines i:nth-child(4) { width: 60%; }
.po-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; background: var(--ink); color: var(--paper); text-decoration: none; transition: transform .12s steps(2, end), box-shadow .12s steps(2, end); }
.po-btn:hover { color: var(--paper); transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--red); }
.po-doc .todo { margin: 0; }
.motion .po-doc:not(.in) .po-sheet { visibility: hidden; }
.motion .po-doc.in .po-sheet { animation: pinUp 417ms steps(1, end) backwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes pinUp { 0% { transform: translateY(-70px) rotate(8deg); } 20% { transform: translateY(-20px) rotate(-4deg); } 40% { transform: translateY(4px) rotate(1.5deg); } 60% { transform: translateY(-1px); } 80%, 100% { transform: none; } }

/* ------------------------------------------------------------ FEEDBACK: the complaint box (final frame) */
.feedback { padding: 140px 0 160px; background-color: var(--paper); border-top: 2px solid var(--ink); }
.fb-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fb-art { position: relative; width: 250px; height: 300px; }
.fb-box { position: absolute; left: 0; right: 0; bottom: 0; height: 284px; }
.box-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 20px rgba(40, 25, 5, .38)); }
.fb-plate { position: absolute; left: 22%; right: 22%; top: 43%; height: 20%; display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1; color: var(--green); letter-spacing: .04em; }
.fb-slip { position: absolute; left: 50%; top: 22px; width: 100px; margin-left: -50px; z-index: 0; }
.slip-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fb-copy { max-width: 820px; margin-top: 44px; }
.fb-copy .h2 { font-size: 96px; line-height: .95; }
.fb-h span { display: block; }   /* the question, then the answer */
.fb-copy p:not(.fb-cta):not(.fb-todo) { font-size: 22px; line-height: 1.55; margin: 22px auto 0; max-width: 640px; }
.fb-cta { margin-top: 36px; }
.fb-btn { flex-direction: column; min-height: 76px; padding: 12px 34px; gap: 4px; font-size: 17px; }
.fb-btn .fb-ms { font-size: 14px; font-weight: 400; color: var(--hl); }
.fb-todo { margin-top: 14px; }
.fb-copy .fb-alt { margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; font-size: 15px; line-height: 1.5; }
.fb-alt-h { flex-basis: 100%; font-size: 13px; color: var(--red); }
.fb-alt a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; text-underline-offset: 4px; white-space: nowrap; }   /* thumb-sized on phones */
.motion .feedback:not(.in) .fb-slip { opacity: 0; }
.motion .feedback.in .fb-slip { animation: slipIn 750ms steps(1, end) 200ms both; }
@keyframes slipIn { 0% { transform: translateY(-160px) rotate(-14deg); opacity: 1; } 11% { transform: translateY(-110px) rotate(-8deg); } 22% { transform: translateY(-60px) rotate(-3deg); } 33% { transform: translateY(-10px) rotate(0); } 44% { transform: translateY(18px); } 56% { transform: translateY(40px) scaleY(.7); } 67% { transform: translateY(58px) scaleY(.4); } 78% { transform: translateY(70px) scaleY(.12); opacity: 1; } 89%, 100% { transform: translateY(74px) scaleY(0); opacity: 0; } }
.motion .feedback.in .fb-box { animation: boxJolt 417ms steps(1, end) 800ms both; }
@keyframes boxJolt { 0% { transform: none; } 20% { transform: translateY(3px) scale(1.01, .985); } 40% { transform: translateY(-2px) rotate(-.6deg); } 60% { transform: rotate(.3deg); } 80%, 100% { transform: none; } }


/* page copies of the homepage's hits, each ending on a held final frame */
@keyframes sSlam { 0% { opacity: 0; transform: scale(1.26) rotate(-2.5deg) translateY(-14px); } 20% { opacity: 1; transform: scale(1.26) rotate(-2.5deg) translateY(-14px); } 40% { opacity: 1; transform: scale(.95) rotate(1deg) translateY(3px); } 60% { opacity: 1; transform: scale(1.02) rotate(-.4deg); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes sRise { 0% { opacity: 0; transform: translateY(26px); } 25% { opacity: 1; transform: translateY(12px); } 50% { opacity: 1; transform: translateY(3px); } 75%, 100% { opacity: 1; transform: none; } }
@keyframes sPop { 0% { transform: scale(.3) rotate(-8deg); } 25% { transform: scale(1.12) rotate(3deg); } 50% { transform: scale(.97) rotate(-1deg); } 75%, 100% { transform: none; } }
@keyframes sDrop { 0% { transform: translateY(-160px) rotate(-10deg); } 17% { transform: translateY(-60px) rotate(-5deg); } 33% { transform: translateY(8px) rotate(2deg); } 50% { transform: translateY(-4px) rotate(-1deg); } 67% { transform: translateY(1px); } 83%, 100% { transform: none; } }
@keyframes sSlide { 0% { transform: translate(260px, 40px) rotate(8deg); } 20% { transform: translate(120px, 16px) rotate(4deg); } 40% { transform: translate(-8px, -2px) rotate(-1deg); } 60% { transform: translate(2px, 0) rotate(.3deg); } 80%, 100% { transform: none; } }
@keyframes sStamp { 0% { transform: scale(1.5) rotate(-6deg); opacity: 0; } 20% { transform: scale(1.35) rotate(-4deg); opacity: 1; } 40% { transform: scale(.94) rotate(-.5deg); opacity: 1; } 60% { transform: scale(1.02); opacity: 1; } 80%, 100% { transform: none; opacity: 1; } }
@keyframes sJolt { 0% { translate: 0 4px; } 25% { translate: 0 -2px; } 50% { translate: 0 1px; } 75%, 100% { translate: 0 0; } }
@keyframes sSwing { 0% { transform: translateY(-60px) rotate(12deg); } 11% { transform: rotate(-7deg); } 22% { transform: rotate(4.5deg); } 33% { transform: rotate(-3deg); } 44% { transform: rotate(1.6deg); } 56% { transform: rotate(-.8deg); } 67% { transform: rotate(.3deg); } 78%, 100% { transform: none; } }

/* ------------------------------------------------------------ hits (12fps, as on the homepage) */
.motion .intro .st-word i { animation: stampL 333ms steps(1, end) both; animation-delay: var(--d); }
@keyframes stampL { 0% { opacity: 0; transform: translateY(calc(var(--y) - 26px)) scale(1.34) rotate(calc(var(--r) * -1.6)); } 25% { opacity: 1; transform: translateY(calc(var(--y) + 3px)) scale(.93, .97) rotate(var(--r)); } 50% { opacity: 1; transform: translateY(var(--y)) scale(1.03) rotate(var(--r)); } 75%, 100% { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); } }
.motion .intro .hk-cam { animation: thud 333ms steps(1, end) 1180ms both; }
@keyframes thud { 0% { transform: none; } 25% { transform: translateY(5px) scale(1.004); } 50% { transform: translateY(-2px); } 75%, 100% { transform: none; } }
.motion .intro .hk-intro { animation: riseC 333ms steps(1, end) 1380ms both; }
@keyframes riseC { 0% { opacity: 0; transform: translateY(calc(-50% + 30px)); } 25% { opacity: 1; transform: translateY(calc(-50% + 12px)); } 50% { opacity: 1; transform: translateY(calc(-50% + 3px)); } 75%, 100% { opacity: 1; transform: translateY(-50%); } }
.motion .intro .k3 { animation: sweep 360ms cubic-bezier(.6, 0, .2, 1) both; }
.motion .intro .k3-1 { animation-delay: 1760ms; } .motion .intro .k3-2 { animation-delay: 2080ms; } .motion .intro .k3-3 { animation-delay: 2400ms; }
.motion .intro .hk-ph { animation: cutIn 250ms steps(1, end) both; }
.motion .intro .hk-ph1 { animation-delay: 1760ms; } .motion .intro .hk-ph2 { animation-delay: 2080ms; } .motion .intro .hk-ph3 { animation-delay: 2400ms; }
@keyframes cutIn { 0% { opacity: 0; } 34% { opacity: 1; filter: brightness(1.6) contrast(1.2); } 67%, 100% { opacity: 1; filter: none; } }
.motion .intro .hk-last { animation: underline 420ms cubic-bezier(.45, .05, .25, 1) 2800ms both; }
@keyframes underline { from { background-size: 0% .28em; } to { background-size: 100% .28em; } }
.motion .intro .hk-tabs a { animation: tabDrop 333ms steps(1, end) both; }
.motion .intro .hk-tabs a:nth-child(1) { animation-delay: 3100ms; } .motion .intro .hk-tabs a:nth-child(2) { animation-delay: 3180ms; } .motion .intro .hk-tabs a:nth-child(3) { animation-delay: 3260ms; }
@keyframes tabDrop { 0% { transform: translateY(-40px) scaleY(.2); opacity: 0; } 25% { transform: translateY(6px) scaleY(1.1); opacity: 1; } 50% { transform: translateY(-2px); opacity: 1; } 75%, 100% { transform: none; opacity: 1; } }
.motion .hk-tabs.gone a { visibility: hidden; }

.motion .ce-h2:not(.on) .ln, .motion .ce-photo:not(.on) { visibility: hidden; }
.motion .ce-card:not(.on) { opacity: 0; }   /* opacity, not visibility: its links stay reachable by keyboard */
.ce-card:focus { outline: none; }
.ce-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.motion .ce-h2.on .ln { display: inline-block; animation: sSlam 417ms steps(1, end) both; transform-origin: 0 100%; }
.motion .ce-h2.on .ln:nth-child(2) { animation-delay: 110ms; }
.motion .ce-card.on { animation: sDrop 500ms steps(1, end) both; }
.motion .ce-photo.on { animation: sSlide 417ms steps(1, end) both; }
.motion .ce-stamp:not(.on) { visibility: hidden; }
.motion .ce-stamp.on { animation: sStamp 417ms steps(1, end) both; }
.motion .ce-card.jolt { animation: sJolt 333ms steps(1, end) both; }

.motion .la-hl .ln, .motion .la-lead, .motion .la-body, .motion .pa-hl .ln, .motion .pa-lead, .motion .pa-body,
.motion .ca-hl .ln, .motion .ca-body { opacity: 0; }
.motion .la-hl.on .ln, .motion .pa-hl.on .ln, .motion .ca-hl.on .ln { display: inline-block; animation: sSlam 417ms steps(1, end) both; transform-origin: 0 100%; }
.motion .la-hl.on .la-lead, .motion .pa-hl.on .pa-lead { animation: sRise 333ms steps(1, end) 300ms both; }
.motion .la-body.on, .motion .pa-body.on, .motion .ca-body.on { animation: sRise 333ms steps(1, end) both; }

.motion .pop:not(.on) { visibility: hidden; }
.motion .pop.on { animation: popUp 417ms steps(1, end) both; }
@keyframes popUp { 0% { transform: scale(.2, 0); } 20% { transform: scale(1.1, 1.12); } 40% { transform: scale(.96, .97); } 60% { transform: scale(1.01); } 80%, 100% { transform: none; } }
.motion .pop.bird.on { animation: flyIn 583ms steps(1, end) both; }
@keyframes flyIn { 0% { transform: translate(-220px, 60px) scale(.8); } 14% { transform: translate(-150px, 30px); } 28% { transform: translate(-90px, 10px); } 43% { transform: translate(-40px, -4px); } 57% { transform: translate(-12px, -8px); } 71% { transform: translate(-2px, -2px); } 86%, 100% { transform: none; } }
.motion .la-lab:not(.on) { visibility: hidden; }
.motion .la-lab.on { animation: sPop 333ms steps(1, end) both; }

.motion .att:not(.on) { visibility: hidden; }
.motion .att.on { animation: attDrop 417ms steps(1, end) both; }
@keyframes attDrop { 0% { transform: translate(calc(var(--dx) + 60px), -140px) rotate(calc(var(--r) + 9deg)); } 20% { transform: translate(calc(var(--dx) + 14px), -30px) rotate(calc(var(--r) + 3deg)); } 40% { transform: translate(var(--dx), 4px) rotate(var(--r)) scale(1.01, .99); } 60% { transform: translate(var(--dx), -1px) rotate(var(--r)); } 80%, 100% { transform: translateX(var(--dx)) rotate(var(--r)); } }

.motion .pb-kick, .motion .pb-lead, .motion .pb-body { opacity: 0; }
.motion .pb-kick.on, .motion .pb-lead.on, .motion .pb-body.on { animation: sRise 333ms steps(1, end) both; }
.motion .pb-lead.on { animation-delay: 80ms; } .motion .pb-body.on { animation-delay: 160ms; }
.motion .pb-pic:not(.on) { visibility: hidden; }
.motion .pb-pic.on { animation: tossPic 500ms steps(1, end) both; }
@keyframes tossPic { 0% { transform: translate(260px, -320px) rotate(22deg); } 17% { transform: translate(120px, -140px) rotate(12deg); } 33% { transform: translate(10px, -10px) rotate(2deg); } 50% { transform: translate(-4px, 4px) rotate(-1.5deg); } 67% { transform: translate(1px, -1px); } 83%, 100% { transform: none; } }
.motion .pb-award:not(.on) { visibility: hidden; }
.motion .pb-award.on { animation: sDrop 500ms steps(1, end) both; }
.motion .pb-year:not(.on) { visibility: hidden; }
.motion .pb-year.on { animation: sStamp 417ms steps(1, end) both; }

.motion .cm-tag:not(.on), .motion .cm-town:not(.on) { visibility: hidden; }
.motion .cm-tag.on { animation: sSwing 750ms steps(1, end) both; transform-origin: 50% 0; }
.motion .cm-town.on { animation: sPop 333ms steps(1, end) both; }
.motion .cb-kick, .motion .cb-body { opacity: 0; }
.motion .cb-kick.on, .motion .cb-body.on { animation: sRise 333ms steps(1, end) both; }
.motion .cb-pic:not(.on) { visibility: hidden; }
.motion .cb-pic.on { animation: tossPic 500ms steps(1, end) both; }

/* ------------------------------------------------------------ phone stages (390x720) */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .hk-sheet { left: 12px; top: 92px; width: 366px; height: 558px; perspective: 1400px; }
  .fold { height: 186px; }
  .fold.f2 { top: 186px; } .fold.f3 { top: 372px; }
  .crease.c1 { top: 185px; } .crease.c2 { top: 371px; }
  .hk-title { font-size: 90px; }
  .st-word { white-space: normal; line-height: .86; }
  .st-word i { margin: 0 2px; -webkit-mask-size: 200px 200px; mask-size: 200px 200px; }
  .st-word .hy { display: inline-block; }
  .st-word .brk { display: block; }
  .hk-intro { left: 20px; right: 18px; font-size: 17px; line-height: 1.42; }
  .hk-photos { inset: 6px; gap: 5px; }
  .hk-ph .tag { font-size: 9.5px; padding: 3px 5px; left: 5px; right: 5px; bottom: 5px; max-width: none; }
  .hk-tabs { left: 12px; right: 12px; top: 650px; gap: 6px; justify-content: center; }
  .hk-tabs a { font-size: 11px; padding: 8px 9px 7px; min-height: 40px; text-align: center; line-height: 1.2; }
  .hk-emblem { width: 90px; }

  .ce-h2 { left: 18px; top: 60px; font-size: 56px; white-space: normal; }
  .ce-h2 .ln { display: block; }
  .ce-card { left: 12px; top: 180px; width: 366px; padding: 18px 16px 70px 42px; background-image: linear-gradient(90deg, transparent 29px, rgba(179, 38, 30, .55) 29px, rgba(179, 38, 30, .55) 31px, transparent 31px), linear-gradient(#FAF6EA, #FAF6EA), repeating-linear-gradient(transparent 0 21px, var(--rule-2) 21px 22px, transparent 22px 24px); background-size: 100% 100%, 100% 70px, 100% 100%; background-position: 0 0, 0 0, 0 2px; }
  .ce-card::before { left: 9px; width: 12px; height: 12px; margin-top: -6px; }
  .ce-h3 { font-size: 23px; line-height: 24px; }
  .ce-body { font-size: 14.5px; line-height: 24px; margin-top: 8px; max-width: none; }
  .ce-card .ce-btns { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
  .ce-btns .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .ce-btns .link { font-size: 13px; }
  .ce-stamp { right: 16px; bottom: 16px; padding: 5px 9px 4px; border-width: 3px; }
  .ce-stamp .mono { font-size: 9px; }
  .ce-stamp .display { font-size: 24px; }
  .ce-photo { left: 16px; top: 610px; width: 188px; height: 100px; rotate: -3deg; }
  .ce-photo .tag { display: none; }
  .t-ce1 { width: 60px; height: 20px; top: -9px; } .t-ce2 { display: none; }
  .stamper { left: 230px; top: 530px; width: 120px; height: 165px; }
  .band b { font-size: 13.5px; height: var(--bh, 33px); }
  .b-y b { font-size: 10.5px; }

  .la-hl { left: 18px; top: 62px; width: 354px; }
  .la-hl .h2 { font-size: 62px; }
  .la-lead { font-size: 16px; margin-top: 8px; }
  .la-view { top: 204px; width: 390px; height: 240px; }
  .la-sheet::before { left: 18px; right: 18px; }
  .la-cap { right: 16px; bottom: 12px; font-size: 11px; padding: 5px 8px; }
  .la-body { left: 18px; top: 456px; width: 354px; font-size: 14px; line-height: 1.5; }
  .la-lab { font-size: 26px; }

  .pa-hl { left: 18px; top: 62px; width: 354px; }
  .pa-hl .h2 { font-size: 62px; }
  .pa-lead { font-size: 16.5px; margin-top: 10px; }
  .pa-body { left: 18px; top: 236px; width: 354px; font-size: 14.2px; line-height: 1.5; }
  .clipboard { left: 70px; top: 404px; width: 250px; height: 306px; }
  .cb-board { border-radius: 12px; border-width: 2px; }
  .cb-clip { width: 104px; margin-left: -52px; top: -10px; }
  .cb-stack { left: 15px; top: 28px; width: 220px; height: 264px; }
  .att { top: calc(var(--i) * 17px); height: 128px; padding: 2px 10px 4px; box-shadow: 0 -3px 5px -4px rgba(40, 25, 5, .5), 0 4px 6px -4px rgba(40, 25, 5, .4); background-image: linear-gradient(90deg, transparent 24px, rgba(179, 38, 30, .5) 24px, rgba(179, 38, 30, .5) 25px, transparent 25px); }
  .att-h { height: 14px; padding-left: 18px; margin-bottom: 2px; border-bottom: 1.5px solid var(--ink); }
  .att-h .display { font-size: 13px; }
  .att-ph { margin-top: 4px; }

  .pb-kick { left: 18px; top: 62px; font-size: 12px; }
  .pb-lead { left: 18px; top: 86px; width: 354px; font-size: 14.2px; line-height: 1.5; }
  .pb-first { font-size: 16px; line-height: 1.38; margin-bottom: 8px; }
  .pb-body { left: 18px; top: 232px; width: 354px; font-size: 14.2px; line-height: 1.5; }
  .pb-pic { width: 140px; height: 106px; padding: 5px 5px 15px; }
  .pb-pic .tape { width: 50px; height: 16px; top: -8px; }
  .pb-pic .tag { display: none; }
  .pic1 { left: 214px; top: 310px; } .pic2 { left: 226px; top: 414px; } .pic3 { left: 26px; top: 530px; } .pic4 { left: 222px; top: 528px; } .pic5 { left: 122px; top: 610px; }
  .pb-award { left: 22px; top: 356px; width: 142px; height: 168px; padding: 7px; }
  .pb-award .tag { display: none; }
  .pb-year { font-size: 26px; left: 6px; top: -44px; }
  .pb-ring { width: 104px; height: 52px; left: -12px; top: -54px; }

  .ca-hl { left: 18px; top: 62px; width: 354px; }
  .ca-hl .h2 { font-size: 58px; white-space: normal; }
  .ca-body { left: 18px; top: 190px; width: 354px; font-size: 13.6px; line-height: 1.48; }
  .ca-first { font-size: 14.2px; line-height: 1.48; margin-bottom: 6px; }
  .ca-map { left: 168px; top: 420px; width: 212px; height: 258px; }
  .cm-town b { font-size: 16px; }
  .cm-town i { font-size: 9px; }
  .cm-town { translate: 10px -9px; }
  .cm-mb { font-size: 19px; translate: 18px -11px; }
  .cm-km { font-size: 11px; translate: calc(-100% - 15px) 11px; }
  .cm-kk { font-size: 9px; translate: calc(-100% - 7px) -5px; }
  .cm-tag { font-size: 11px; padding: 11px 9px 7px; max-width: 150px; }
  .cm-tag .pinhead { width: 12px; height: 12px; margin-left: -6px; top: -5px; }
  .cm-tag.t1 { left: 10px; top: 432px; } .cm-tag.t2 { left: 14px; top: 486px; max-width: 146px; }
  .cm-tag.t3 { left: 8px; top: 576px; } .cm-tag.t4 { left: 16px; top: 630px; }
  .t-cm { width: 70px; height: 20px; top: -9px; }

  .cb-kick { left: 18px; top: 62px; font-size: 12px; }
  .cb-body { left: 18px; top: 86px; width: 354px; grid-template-columns: 1fr; gap: 10px; font-size: 13.6px; line-height: 1.45; }
  .cb-gh { font-size: 11px; margin-bottom: 2px; }
  .wheel { left: 90px; top: 336px; width: 210px; height: 210px; --wr: 210px; }
  .wh-lab { font-size: 11px; width: 110px; margin-left: -55px; }
  .wh-mark { width: 40px; margin-left: -20px; }
  .cb-pic { width: 116px; height: 90px; padding: 4px 4px 14px; }
  .cb-pic .tape { width: 44px; height: 14px; top: -7px; }
  .cb-pic .tag { display: none; }
  .cp-school { left: 12px; top: 578px; } .cp-flood { left: 137px; top: 592px; } .cp-cleanup { left: 262px; top: 576px; }

  .commit { padding: 80px 0 90px; }
  .cmt-head { grid-template-columns: 1fr; gap: 14px; }
  .cmt-head .h2 { font-size: 56px; }
  .cmt-head p { font-size: 17px; }
  .cmt-groups { grid-template-columns: 1fr; gap: 6px; margin-top: 36px; }
  .cmt-group { padding-top: 18px; }
  .cmt-list { margin-top: 12px; gap: 10px; }
  .cmt-list li { font-size: 18px; grid-template-columns: 26px 1fr; }
  .cm-tick { width: 22px; height: 20px; }
  .news { padding: 80px 0 90px; }
  .nw-head { grid-template-columns: 1fr; gap: 14px; }
  .nw-head .h2 { font-size: 56px; }
  .nw-head p { font-size: 17px; }
  .nw-sheet { margin-top: 32px; padding: 48px 14px 34px; }   /* frame numbers sit clear of the SABAHEBAT SDN BHD edge line */
  .nw-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; }
  .fr-img .tag { display: none; }
  .fr-t { font-size: 13.5px; }
  .policies { padding: 90px 0 80px; }
  .po-head { grid-template-columns: 1fr; gap: 14px; }
  .po-head .h2 { font-size: 56px; }
  .po-head p { font-size: 17px; }
  .po-list { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
  .po-list { gap: 26px; }
  .po-doc { gap: 10px; }
  .po-sheet { min-height: 0; padding: 30px 18px 8px; }
  .po-title { font-size: 23px; margin-top: 8px; }
  .po-lines { display: none; }
    .feedback { padding: 90px 0 100px; }
  .fb-art { width: 190px; height: 228px; }
  .fb-box { height: 216px; }
  .fb-plate { font-size: 30px; }
  .fb-slip { width: 76px; margin-left: -38px; top: 14px; }
  .fb-copy { margin-top: 30px; }
  .fb-copy .h2 { font-size: 48px; }
  .fb-copy p:not(.fb-cta):not(.fb-todo) { font-size: 17px; }
  .fb-btn { min-height: 68px; padding: 10px 20px; font-size: 15px; }
}

/* mid widths in landscape: stack the flows */
@media (max-width: 1300px) and (min-width: 761px) and (min-aspect-ratio: 1001/1000) {
  .nw-head, .po-head, .cmt-head { grid-template-columns: 1fr; gap: 20px; }
  .po-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ static layout (reduced motion, ?static, no JS) */
html:not(.motion) .s3 .phase, html:not(.motion) .s1 .phase { border-bottom: 2px dashed rgba(26, 24, 20, .12); }
html:not(.motion) .hk-last { background-size: 100% .28em; }
html:not(.motion) .stamper { display: none; }
/* no motion: the whole drawing on top, the real hills under it */
html:not(.motion) .la-sheet { bottom: auto; height: 290px; }
html:not(.motion) .la-aerial { top: 290px; }
html:not(.motion) .la-pan { transform: translate(0, 30px) scale(.4); --lz: 1.9; }
html:not(.motion) .tracing { --ta: 1; }
html:not(.motion) .wheel .wh-disc { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .hk-tabs a, .po-sheet, .fr-img, .po-btn { transition: none !important; }
}

/* no motion on phones (after the rules above, which it narrows) */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  html:not(.motion) .la-sheet { height: 128px; }
  html:not(.motion) .la-aerial { top: 128px; }
  html:not(.motion) .la-pan { transform: translate(-175.5px, -22px) scale(.2058); --lz: 2.02; }
}