/* ============================================================
   SERVICE STORIES — one chapter per service (yellow title card +
   phone playing Instagram-style stories). Used by the homepage
   service modal and the /services/ page; everything is scoped
   under .cs so it can sit inside the main site safely.
   ============================================================ */
@font-face { font-family: "Akkordeon"; src: url("/assets/fonts/Akkordeon-Seven (Main Font).ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Graphik"; src: url("/assets/fonts/GraphikLight (Body).otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("/assets/fonts/Graphik-Regular-Trial.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("/assets/fonts/GraphikMedium.otf") format("opentype"); font-weight: 500; font-display: swap; }
.cs {
  --gold: #f1ba50; --gold-d: #d9a03a; --ink: #1d1d1b; --deep: #151514; --card: #262624; --white: #fff;
  --pink: #ff2468; --orange: #ff6004; --yellow: #f2e502; --cyan: #9ed9f1; --blue: #1f23fa; --blue-t: #5b6bff;
  --muted: rgba(255,255,255,.66); --line: rgba(255,255,255,.12);
  --ease: cubic-bezier(.2,.9,.2,1); --ease-io: cubic-bezier(.7,0,.2,1);
  --gut: clamp(20px, 4.5vw, 64px);
  --ring: conic-gradient(from 210deg, var(--gold), var(--orange), var(--pink), var(--gold));
}
.cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
.cs img { display: block; max-width: 100%; }
.cs a { color: inherit; }
.cs button { font: inherit; color: inherit; }
.cs :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.cs .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs .skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.cs .skip:focus { top: 12px; }
.cs .wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }
/* ---------------- top bar: the page itself is a story ---------------- */
.cs .topbar { position: fixed; inset: 0 0 auto; z-index: 50; height: 60px; display: flex; align-items: center; gap: clamp(14px, 2.5vw, 36px); padding: 0 var(--gut); background: rgba(21,21,20,.96); border-bottom: 1px solid rgba(255,255,255,.06); }
.cs .tb-logo img { height: 30px; width: auto; }
.cs .reelbar { flex: 1; display: flex; gap: 6px; min-width: 0; }
.cs .seg { position: relative; flex: 1; display: flex; align-items: center; height: 32px; text-decoration: none; }
.cs .seg > i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.cs .seg > i > b { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.cs .seg-l { position: absolute; left: 0; top: 100%; margin-top: -2px; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s var(--ease); pointer-events: none; }
.cs .seg:hover .seg-l, .cs .seg:focus-visible .seg-l, .cs .seg.on .seg-l { opacity: 1; transform: none; }
.cs .seg.on .seg-l { color: var(--gold); }
.cs .tb-cta { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .3s var(--ease), background-color .3s; }
.cs .tb-cta:hover { background: #fff; transform: translateY(-1px); }
/* ---------------- intro ---------------- */
.cs .intro { padding: clamp(110px, 16vh, 170px) 0 clamp(40px, 8vh, 90px); position: relative; }
.cs .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.cs .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(255,36,104,.18); }
.cs .in-h { margin: 0; font: 400 clamp(96px, 17vw, 260px)/.82 Akkordeon, Impact, sans-serif; text-transform: uppercase; letter-spacing: .005em; display: flex; flex-wrap: wrap; gap: 0 .14em; }
.cs .in-h .w { display: inline-block; overflow: hidden; padding: .06em 0 .08em; margin-bottom: -.08em; } /* bottom room: round letters (D, O) dip below the baseline */
.cs .in-h .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease) calc(var(--i) * .12s); }
.cs .in-h .w:last-child > span { color: var(--gold); }
.cs .intro.in .in-h .w > span { transform: none; }
.cs .in-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(28px, 4vw, 52px); align-items: end; }
.cs .lede { margin: 0 0 28px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; max-width: 30ch; }
.cs .stats { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.cs .stats b { display: block; font: 400 clamp(38px, 3.6vw, 52px)/1 Akkordeon, sans-serif; color: var(--gold); }
.cs .stats span { font-size: 13px; color: var(--muted); }
.cs .ind { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.cs .ind-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cs .chip, .cs .chips li { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.86); }
.cs .in-hl { background: var(--card); border-radius: 28px; padding: clamp(20px, 2.4vw, 32px); }
.cs .hl-k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.cs .hl-k b { font-weight: 500; font-size: 15px; }
.cs .hl-k span { font-size: 12px; color: var(--muted); text-align: right; }
.cs .hl-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; }
.cs .hl { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; border-radius: 14px; }
.cs .hl-ring { position: relative; width: clamp(64px, 6vw, 84px); aspect-ratio: 1; border-radius: 50%; padding: 3px; display: grid; }
.cs .hl-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ring); transition: transform .8s var(--ease); }
.cs .hl-in { position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--ink); border: 3px solid var(--card); color: var(--gold); }
.cs .hl-in svg { width: 42%; height: 42%; transition: transform .4s var(--ease); }
.cs .hl:hover .hl-ring::before, .cs .hl:focus-visible .hl-ring::before { transform: rotate(180deg); }
.cs .hl:hover .hl-in svg { transform: scale(1.12); }
.cs .hl-name { font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.86); }
/* ---------------- chapter ---------------- */
.cs .chapter { padding: clamp(48px, 9vh, 110px) 0; }
.cs .tcard { position: relative; overflow: hidden; border-radius: clamp(20px, 2.4vw, 34px); background: var(--gold); color: var(--ink); min-height: clamp(340px, 58vh, 600px); padding: clamp(22px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.cs .tcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/media/backgrounds/yellow_pattern.webp") center / 640px auto; opacity: .08; mix-blend-mode: multiply; }
.cs .tc-num { position: absolute; left: clamp(22px, 3vw, 44px); top: clamp(18px, 2.4vw, 36px); font: 400 clamp(22px, 2vw, 30px)/1 Akkordeon, sans-serif; letter-spacing: .04em; opacity: .7; }
.cs .tc-num b { font-weight: 400; opacity: 1; }
.cs .tc-mark { position: absolute; right: clamp(22px, 3vw, 44px); top: clamp(18px, 2.4vw, 36px); width: clamp(34px, 3.4vw, 50px); aspect-ratio: 594 / 529; background: var(--ink); -webkit-mask: url("/assets/media/icons/camel.webp") center / contain no-repeat; mask: url("/assets/media/icons/camel.webp") center / contain no-repeat; }
.cs .tc-title { position: relative; margin: clamp(26px, 4vw, 40px) 0 clamp(44px, 5.5vw, 76px); font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; transform: rotate(-4deg); transform-origin: 0 100%; }
.cs .tc-small { display: flex; flex-wrap: wrap; gap: 0 .28em; font: 400 clamp(28px, 4.6vw, 70px)/1 Graphik, sans-serif; text-transform: uppercase; letter-spacing: .02em; padding-left: .08em; }
.cs .tc-small .w { display: inline-block; overflow: hidden; padding: .06em 0; }
.cs .tc-small .w > span { display: inline-block; transform: translateY(110%); transition: transform .8s var(--ease) calc(.15s + var(--i) * .08s); }
.cs .tc-title.bf .tc-small { margin-top: .5em; }
.cs .tc-big { display: block; font: 400 160px/.8 Akkordeon, Impact, sans-serif; text-transform: uppercase; margin: -.02em 0 -.08em; }
.cs .tc-line { display: inline-flex; overflow: hidden; padding: .06em .04em .08em; margin-bottom: -.06em; white-space: nowrap; }
.cs .tc-line .l { display: inline-block; transform: translateY(105%) rotate(8deg); transform-origin: 0 100%; transition: transform .9s var(--ease) calc(.25s + var(--i) * .05s); }
.cs .tcard.in .tc-small .w > span, .cs .tcard.in .tc-line .l { transform: none; }
.cs .tc-hooves i { position: absolute; left: var(--x); top: var(--y); width: clamp(30px, 4.4%, 66px); aspect-ratio: 59 / 79; background: rgba(140, 90, 20, .17); -webkit-mask: url("/assets/media/icons/hoof.svg") center / contain no-repeat; mask: url("/assets/media/icons/hoof.svg") center / contain no-repeat; transform: translate(-50%, -50%) rotate(var(--r)) scale(.4); opacity: 0; transition: opacity .4s ease calc(.9s + var(--i) * .16s), transform .5s var(--ease) calc(.9s + var(--i) * .16s); z-index: -1; }
.cs .tcard.in .tc-hooves i { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); }
.cs .tc-count { position: absolute; left: clamp(22px, 3vw, 44px); bottom: clamp(18px, 2.4vw, 32px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 400; letter-spacing: .04em; }
.cs .tc-count i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
@keyframes cs-rec { 50% { opacity: .25; } }
.cs .stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "copy phone list"; gap: clamp(28px, 4.5vw, 72px); align-items: center; margin-top: clamp(36px, 6vw, 72px); }
.cs .copy { grid-area: copy; }
.cs .tagline { margin: 0 0 18px; font: 400 clamp(34px, 3.4vw, 50px)/.98 Akkordeon, sans-serif; text-transform: uppercase; color: var(--gold); letter-spacing: .01em; }
.cs .desc { margin: 0 0 22px; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 44ch; }
.cs .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* reel list (desktop) / highlights row (phone) */
.cs .rlist { grid-area: list; min-width: 0; }
.cs .rl-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cs .rl-h span { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; letter-spacing: 0; font-size: 11px; }
.cs .rl { position: relative; list-style: none; margin: 0; padding: 4px; max-height: min(560px, 62vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; -webkit-mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 22px), transparent); mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 22px), transparent); }
.cs .ri { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin-bottom: 2px; border: 0; border-radius: 16px; background: transparent; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .3s; }
.cs .ri:hover { background: rgba(255,255,255,.05); }
.cs .ri.on { background: var(--card); }
.cs .ri-av { flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; }
.cs .ri-av::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(255,255,255,.16); z-index: -1; }
.cs .ri { isolation: isolate; }
.cs .ri.on .ri-av::before { background: var(--ring); }
.cs .ri.seen .ri-av { opacity: .7; }
.cs .ri-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cs .ri-t b { font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .ri-t span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .ri.on .ri-t span { color: rgba(255,255,255,.82); }
.cs .ri-fill { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.cs .ri:not(.on) .ri-fill { opacity: 0; }
/* shared avatar */
.cs .av, .cs .ri-av { display: grid; place-items: center; background: var(--deep); border: 2px solid var(--deep); }
.cs .av img, .cs .ri-av img { width: 74%; height: 74%; object-fit: contain; }
.cs .av img.is-tall, .cs .ri-av img.is-tall { height: 56%; }
.cs .av-camel, .cs .ri-av.av-camel { background: var(--gold); }
.cs .av-camel i { width: 64%; aspect-ratio: 594 / 529; background: var(--ink); -webkit-mask: url("/assets/media/icons/camel.webp") center / contain no-repeat; mask: url("/assets/media/icons/camel.webp") center / contain no-repeat; }
.cs .av-num, .cs .av-txt { font: 400 18px/1 Akkordeon, sans-serif; color: var(--gold); letter-spacing: .02em; }
.cs .av-txt { background: var(--gold); color: var(--ink); }
/* ---------------- the phone ---------------- */
.cs .ph-col { grid-area: phone; position: relative; display: flex; flex-direction: column; align-items: center; }
.cs .ph-glow { position: absolute; left: 50%; top: 46%; width: min(150%, 100vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(241,186,80,.2), rgba(255,36,104,.06) 55%, transparent 72%); pointer-events: none; }
.cs .phone { --pw: clamp(280px, 24.5vw, 350px); position: relative; width: var(--pw); padding: 10px; border-radius: 48px; background: linear-gradient(150deg, #3a3a37, #121211 40%, #1f1f1d); box-shadow: 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 1.5px rgba(255,255,255,.06), 0 50px 90px -30px rgba(0,0,0,.85), 0 30px 60px -40px rgba(241,186,80,.35); }
.cs .phone::before { content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 13%; border-radius: 0 3px 3px 0; background: #2c2c2a; }
.cs .screen { position: relative; aspect-ratio: 9 / 16; border-radius: 38px; overflow: hidden; background: #0b0b0a; container-type: inline-size; perspective: 1100px; transform: translateZ(0); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cs .ph-hint { margin: 16px 0 0; font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.cs .status { position: absolute; inset: 0 0 auto; z-index: 6; height: 10cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5cqw 0 9cqw; font-size: 3.6cqw; color: #fff; pointer-events: none; }
.cs .status b { font-weight: 500; }
.cs .island { position: absolute; left: 50%; top: 2.6cqw; width: 26cqw; height: 6.6cqw; margin-left: -13cqw; border-radius: 99px; background: #000; }
.cs .status span { display: flex; gap: .8cqw; align-items: flex-end; }
.cs .status span i { width: 1cqw; background: #fff; border-radius: .3cqw; }
.cs .status span i:nth-child(1) { height: 1.6cqw; }
.cs .status span i:nth-child(2) { height: 2.3cqw; }
.cs .status span i:nth-child(3) { height: 3cqw; }
/* story layer */
.cs .story { position: absolute; inset: 0; background: #111; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cs .story.in-next { transform-origin: 0 50%; animation: cs-cubeIn .68s cubic-bezier(.33,.7,.25,1) both; }
.cs .story.out-next { transform-origin: 100% 50%; animation: cs-cubeOut .68s cubic-bezier(.33,.7,.25,1) both; }
.cs .story.in-prev { transform-origin: 100% 50%; animation: cs-cubeInP .68s cubic-bezier(.33,.7,.25,1) both; }
.cs .story.out-prev { transform-origin: 0 50%; animation: cs-cubeOutP .68s cubic-bezier(.33,.7,.25,1) both; }
@keyframes cs-cubeIn { from { transform: translateX(100%) rotateY(90deg); } to { transform: none; } }
@keyframes cs-cubeOut { to { transform: translateX(-100%) rotateY(-90deg); } }
@keyframes cs-cubeInP { from { transform: translateX(-100%) rotateY(-90deg); } to { transform: none; } }
@keyframes cs-cubeOutP { to { transform: translateX(100%) rotateY(90deg); } }
.cs .story.out-next::after, .cs .story.out-prev::after { content: ""; position: absolute; inset: 0; background: #000; animation: cs-dim .68s both; z-index: 9; }
@keyframes cs-dim { from { opacity: 0; } to { opacity: .6; } }
.cs .frames { position: absolute; inset: 0; overflow: hidden; }
.cs .sf { position: absolute; inset: 0; animation: cs-fIn .32s ease both; }
.cs .sf.leaving { animation: cs-fOut .3s ease both; }
@keyframes cs-fIn { from { opacity: 0; } }
@keyframes cs-fOut { to { opacity: 0; } }
.cs .shade-t, .cs .shade-b { position: absolute; left: 0; right: 0; pointer-events: none; }
.cs .shade-t { top: 0; height: 40cqw; background: linear-gradient(rgba(0,0,0,.6), transparent); }
.cs .shade-b { bottom: 0; height: 52cqw; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.cs .is-mock .shade-b { opacity: .35; }
.cs .bars { position: absolute; top: 11.5cqw; left: 3.5cqw; right: 3.5cqw; display: flex; gap: 1.1cqw; z-index: 3; transition: opacity .25s; }
.cs .bar { flex: 1; height: max(2px, .8cqw); border-radius: 2px; background: rgba(255,255,255,.32); overflow: hidden; }
.cs .bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.cs .head { position: absolute; top: 15cqw; left: 3.5cqw; right: 15cqw; display: flex; align-items: center; gap: 2.6cqw; z-index: 3; transition: opacity .25s; }
.cs .head .av { flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; border-width: .5cqw; box-shadow: 0 0 0 .5cqw rgba(255,255,255,.85); }
.cs .head .av-txt, .cs .head .av-num { font-size: 4.2cqw; }
.cs .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.cs .who b { font-weight: 500; font-size: 3.9cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .who span { font-size: 3.2cqw; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .pz-btn { position: absolute; z-index: 7; top: 15.5cqw; right: 3cqw; width: max(36px, 9cqw); height: max(36px, 9cqw); display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.28); color: #fff; cursor: pointer; transition: background-color .2s, opacity .25s; }
.cs .pz-btn svg { width: 50%; height: 50%; }
.cs .pz-btn:hover { background: rgba(0,0,0,.5); }
.cs .taps { position: absolute; z-index: 5; inset: 28cqw 0 20cqw; display: flex; }
.cs .tap { flex: 1; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; color: #fff; touch-action: pan-y; padding: 0 3cqw; border-radius: 0; }
.cs .tap-prev { flex: 0 0 34%; justify-content: flex-start; }
.cs .tap-next { justify-content: flex-end; }
.cs .tap svg { width: 9cqw; height: 9cqw; padding: 1.8cqw; border-radius: 50%; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
.cs .tap:hover svg, .cs .tap:focus-visible svg { opacity: 1; }
.cs .tap:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: 30px; }
.cs .ig { position: absolute; z-index: 7; left: 50%; bottom: 5cqw; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2cqw; min-height: 40px; padding: 0 4.2cqw 0 3.2cqw; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; font-size: max(12px, 3.7cqw); text-decoration: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: transform .3s var(--ease), background-color .25s, opacity .25s; }
.cs .ig[hidden] { display: none; }
.cs .ig i { display: grid; width: 5.2cqw; height: 5.2cqw; }
.cs .ig i svg { width: 100%; height: 100%; }
.cs .ig .ig-o { width: 4cqw; height: 4cqw; opacity: .6; }
.cs .ig:hover { background: var(--gold); transform: translateX(-50%) translateY(-2px); }
.cs .ig.pop { animation: cs-igPop .5s var(--ease) .35s both; }
@keyframes cs-igPop { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.cs .phone.is-held .bars, .cs .phone.is-held .head, .cs .phone.is-held .caps, .cs .phone.is-held .ig, .cs .phone.is-held .pz-btn, .cs .phone.is-held .stk { opacity: 0; }
.cs .phone.is-paused .pz, .cs .phone.is-paused .pz * { animation-play-state: paused !important; }
/* stickers */
.cs .stk { position: absolute; z-index: 2; display: inline-block; padding: 1.6cqw 3cqw; border-radius: 2cqw; font-weight: 500; font-size: 4.2cqw; line-height: 1.2; box-shadow: 0 1.4cqw 4cqw rgba(0,0,0,.25); transition: opacity .25s; }
.cs .stk small { display: block; font-size: .68em; font-weight: 400; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.cs .stk-w { background: #fff; color: var(--ink); }
.cs .stk-g { background: var(--gold); color: var(--ink); }
.cs .stk-tag { left: 5cqw; top: 29cqw; background: var(--ink); color: var(--gold); font: 400 7.2cqw/1 Akkordeon, sans-serif; letter-spacing: .03em; text-transform: uppercase; padding: 1.8cqw 3.2cqw 1.2cqw; transform: rotate(-4deg); animation: cs-stkIn .6s var(--ease) .3s both; }
.cs .caps { position: absolute; z-index: 3; left: 5cqw; right: 5cqw; bottom: 22cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2cqw; transition: opacity .25s; }
.cs .caps .stk { position: relative; max-width: 100%; }
.cs .caps .stk-w { transform: rotate(-3deg); animation: cs-stkIn .6s var(--ease) .45s both; }
.cs .caps .stk-g { transform: rotate(2deg); margin-left: 6cqw; font-size: 4.6cqw; animation: cs-stkIn2 .6s var(--ease) .65s both; }
@keyframes cs-stkIn { from { opacity: 0; transform: rotate(-12deg) scale(.6); } }
@keyframes cs-stkIn2 { from { opacity: 0; transform: rotate(10deg) scale(.6); } }
.cs .f-img > .stk-w, .cs .f-pal > .stk-w, .cs .f-elem > .stk-w { left: 5cqw; bottom: 22cqw; transform: rotate(-3deg); animation: cs-stkIn .6s var(--ease) .35s both; }
/* image frame */
.cs .f-img { position: absolute; inset: 0; overflow: hidden; background: #111; }
.cs .f-img .bg { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(22px) brightness(.5) saturate(1.2); opacity: 0; transition: opacity .4s; }
.cs .f-img .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s; animation: cs-kb var(--dur, 4s) linear both; }
.cs .f-img.cover .fg { object-fit: cover; }
.cs .f-img.ld .bg, .cs .f-img.ld .fg { opacity: 1; }
.cs .f-vid .fg { object-fit: cover; animation: none; }
@keyframes cs-kb { from { transform: scale(1.07); } to { transform: scale(1); } }
/* management: steps */
.cs .f-step { position: absolute; inset: 0; background: var(--ink); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 7cqw 9cqw; }
.cs .f-step .swirl { position: absolute; right: -38cqw; top: 22cqw; width: 88cqw; aspect-ratio: 69 / 71; background: var(--gold); -webkit-mask: url("/assets/media/icons/swirl.svg") center / contain no-repeat; mask: url("/assets/media/icons/swirl.svg") center / contain no-repeat; opacity: .9; animation: cs-swirl 3s linear both; }
@keyframes cs-swirl { from { transform: rotate(-20deg) scale(.92); } to { transform: rotate(8deg) scale(1); } }
.cs .st-body { position: relative; display: flex; align-items: flex-end; gap: 3cqw; margin-bottom: 9cqw; }
.cs .st-n { font: 400 88cqw/.74 Akkordeon, sans-serif; color: var(--gold); margin-left: -2cqw; animation: cs-numIn .7s var(--ease) both; }
@keyframes cs-numIn { from { transform: translateY(40%); opacity: 0; } }
.cs .st-copy { padding-bottom: 1cqw; animation: cs-copyIn .7s var(--ease) .18s both; min-width: 0; }
@keyframes cs-copyIn { from { transform: translateX(10cqw); opacity: 0; } }
.cs .st-k { display: block; font-size: 3.1cqw; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 1.6cqw; }
.cs .st-t { display: block; font: 400 12.5cqw/.9 Akkordeon, sans-serif; text-transform: uppercase; color: #fff; }
.cs .st-p { margin: 2.6cqw 0 0; font-size: 3.7cqw; line-height: 1.4; color: rgba(255,255,255,.8); }
.cs .st-dots { position: relative; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); padding-top: 3cqw; }
.cs .st-dots span { font: 400 7cqw/1 Akkordeon, sans-serif; color: rgba(255,255,255,.25); }
.cs .st-dots .done { color: rgba(241,186,80,.6); }
.cs .st-dots .now { color: var(--gold); }
/* management: mood / brief / outcome */
.cs .f-mood .stk-grid { right: 5cqw; bottom: 9cqw; left: auto; background: var(--ink); color: #fff; padding: 2.4cqw 3cqw; transform: rotate(3deg); animation: cs-stkIn2 .6s var(--ease) .6s both; }
.cs .stk-grid > span { display: block; font-size: 3cqw; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.6cqw; }
.cs .sw-dots { display: flex; gap: 2cqw; }
.cs .sw-dots span { display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.cs .sw-dots i { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .6cqw #fff; }
.cs .sw-dots b { font-weight: 400; font-size: 2.6cqw; opacity: .7; }
.cs .f-brief { position: absolute; inset: 0; background: #111; overflow: hidden; display: flex; align-items: center; padding: 26cqw 5cqw 8cqw; }
.cs .f-brief .bg { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(24px) brightness(.35); }
.cs .br-card { position: relative; width: 100%; padding: 5cqw; border-radius: 4cqw; background: rgba(21,21,20,.82); border: 1px solid rgba(255,255,255,.1); animation: cs-cardUp .7s var(--ease) both; }
@keyframes cs-cardUp { from { opacity: 0; transform: translateY(8cqw); } }
.cs .br-k { display: block; font-size: 2.9cqw; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.cs .br-goal { display: block; margin: 1cqw 0 4cqw; font: 400 9cqw/.95 Akkordeon, sans-serif; text-transform: uppercase; }
.cs .br-p { margin: 1.4cqw 0 4cqw; font-size: 3.55cqw; line-height: 1.5; color: rgba(255,255,255,.88); }
.cs .br-sw { display: flex; gap: 3cqw; }
.cs .br-sw span { display: flex; align-items: center; gap: 1.6cqw; font-size: 2.8cqw; }
.cs .br-sw i { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .5cqw rgba(255,255,255,.8); }
.cs .br-sw b { font-weight: 400; opacity: .75; }
.cs .f-out { position: absolute; inset: 0; overflow: hidden; }
.cs .f-out .under .bg, .cs .f-out .under .fg { opacity: 1; animation: none; }
.cs .wipe { position: absolute; inset: 0; overflow: hidden; transform: translateX(-100%); animation: cs-wipe 1.15s var(--ease-io) .3s forwards; }
.cs .wipe-in { transform: translateX(100%); animation: cs-wipe 1.15s var(--ease-io) .3s forwards; }
@keyframes cs-wipe { to { transform: none; } }
.cs .wipe-edge { position: absolute; top: 0; bottom: 0; left: -1.4cqw; width: 1.4cqw; background: var(--gold); box-shadow: 0 0 6cqw rgba(241,186,80,.8); animation: cs-edge 1.15s var(--ease-io) .3s forwards; z-index: 1; }
@keyframes cs-edge { 0% { transform: translateX(0); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(101.4cqw); opacity: 0; } }
.cs .f-out .stk-tag { animation-delay: 1.2s; background: var(--gold); color: var(--ink); }
.cs .stk-goal { left: 5cqw; bottom: 22cqw; transform: rotate(-3deg); animation: cs-stkIn .6s var(--ease) 1.4s both; max-width: 80cqw; }
/* branding */
.cs .f-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; background: radial-gradient(70% 50% at 50% 45%, color-mix(in srgb, var(--a) 26%, #1d1d1b), #151514); text-align: center; padding: 0 8cqw; }
.cs .lg-wrap { position: relative; flex: none; width: 66cqw; height: 46cqw; animation: cs-logoIn 1s var(--ease) both; }
.cs .lg-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 3cqw; }
@keyframes cs-logoIn { from { opacity: 0; transform: scale(.7) rotate(-6deg); } }
.cs .f-logo b { font: 400 11cqw/1 Akkordeon, sans-serif; text-transform: uppercase; animation: cs-copyIn2 .7s var(--ease) .3s both; }
.cs .f-logo span { font-size: 3.6cqw; color: rgba(255,255,255,.7); animation: cs-copyIn2 .7s var(--ease) .42s both; }
@keyframes cs-copyIn2 { from { opacity: 0; transform: translateY(5cqw); } }
.cs .f-pal { position: absolute; inset: 0; display: flex; background: #111; }
.cs .f-pal .sw { flex: 1; position: relative; background: var(--c); transform-origin: 50% 100%; animation: cs-swUp .9s var(--ease) calc(var(--i) * .14s) both; }
.cs .f-pal .sw span { position: absolute; left: 50%; bottom: 46cqw; transform: translateX(-50%) rotate(-90deg); transform-origin: 50% 50%; color: var(--fg); font-weight: 500; font-size: 4.4cqw; letter-spacing: .1em; white-space: nowrap; }
@keyframes cs-swUp { from { transform: scaleY(0); } }
.cs .f-about { position: absolute; inset: 0; background: var(--bg); padding: 26cqw 7cqw 12cqw; display: flex; flex-direction: column; justify-content: center; }
.cs .ab-k { font: 400 12cqw/.9 Akkordeon, sans-serif; text-transform: uppercase; color: var(--ac); margin-bottom: 4cqw; animation: cs-copyIn2 .7s var(--ease) both; }
.cs .f-about p { margin: 0; font-size: 4.1cqw; line-height: 1.5; color: #fff; animation: cs-copyIn2 .7s var(--ease) .15s both; }
.cs .ab-sw { display: flex; gap: 2.4cqw; margin-top: 6cqw; }
.cs .ab-sw i { width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .6cqw rgba(255,255,255,.9); animation: cs-logoIn .7s var(--ease) both; }
.cs .ab-sw i:nth-child(2) { animation-delay: .1s; }
.cs .ab-sw i:nth-child(3) { animation-delay: .2s; }
.cs .f-elem { position: absolute; inset: 0; background: #262624; overflow: hidden; }
.cs .el-pan { position: absolute; left: 0; top: 50%; height: 58cqw; margin-top: -29cqw; }
.cs .el-pan img { height: 100%; width: auto; max-width: none; animation: cs-pan var(--dur, 6s) cubic-bezier(.45,0,.55,1) both; }
@keyframes cs-pan { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100cqw)); } }
/* performance */
.cs .f-roas { position: absolute; inset: 0; padding: 26cqw 7cqw 8cqw; justify-content: center; background: radial-gradient(90% 60% at 80% 85%, rgba(241,186,80,.24), transparent 60%), var(--ink); display: flex; flex-direction: column; }
.cs .ro-row .k { display: block; font-size: 3.2cqw; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cs .ro-row .v { display: block; font: 400 13cqw/1 Akkordeon, sans-serif; font-variant-numeric: tabular-nums; }
.cs .ro-row.rev .v { font-size: 15cqw; color: var(--gold); }
.cs .ro-row { opacity: .25; transition: opacity .4s; }
.cs .ro-row:first-child, .cs .f-roas.s1 .ro-row.rev { opacity: 1; }
.cs .ro-arrow { display: block; width: 8cqw; height: 8cqw; margin: 2cqw 0; color: var(--gold); transform: rotate(90deg); }
.cs .ro-arrow svg { width: 100%; height: 100%; }
.cs .ro-big { margin-top: 6cqw; padding-top: 4cqw; border-top: 1px solid rgba(255,255,255,.14); opacity: 0; transform: translateY(6cqw) scale(.94); transform-origin: 0 100%; transition: opacity .5s, transform .7s var(--ease); }
.cs .f-roas.s2 .ro-big { opacity: 1; transform: none; }
.cs .ro-big b { display: block; font: 400 34cqw/.85 Akkordeon, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.cs .ro-big span { font-size: 3.4cqw; color: rgba(255,255,255,.7); letter-spacing: .06em; }
.cs .ro-pur { align-self: flex-start; margin-top: 4cqw; padding: 1.6cqw 3.4cqw; border-radius: 99px; background: var(--pink); font-weight: 500; font-size: 3.6cqw; opacity: 0; transform: translateY(4cqw) rotate(-3deg); transition: opacity .4s, transform .6s var(--ease); }
.cs .f-roas.s3 .ro-pur { opacity: 1; transform: rotate(-3deg); }
.cs .ro-bars { margin-top: 7cqw; display: grid; gap: 2.4cqw; }
.cs .ro-bars span { display: grid; grid-template-columns: 17cqw 1fr; align-items: center; font-size: 2.9cqw; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cs .ro-bars i { display: block; height: 3cqw; border-radius: 2cqw; background: rgba(255,255,255,.75); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); }
.cs .ro-bars i.g { background: var(--gold); }
.cs .f-roas.s1 .ro-bars i { transform: scaleX(var(--w)); }
.cs .f-roas:not(.s1) .ro-bars i.g { transform: scaleX(0); }
.cs .f-reach { position: absolute; inset: 0; padding: 26cqw 6cqw 8cqw; justify-content: center; background: var(--ink); display: flex; flex-direction: column; }
.cs .rc-h { font: 400 11cqw/.9 Akkordeon, sans-serif; text-transform: uppercase; color: var(--gold); margin-bottom: 6cqw; }
.cs .rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.cs .rc-t { padding: 4cqw; border-radius: 3.4cqw; background: var(--card); animation: cs-cardUp .6s var(--ease) calc(var(--i) * .1s) both; }
.cs .rc-t:nth-child(3):last-child { grid-column: span 2; }
.cs .rc-t span { display: block; font-size: 3cqw; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cs .rc-t b { display: block; margin-top: 1.6cqw; font: 400 9.6cqw/1 Akkordeon, sans-serif; font-variant-numeric: tabular-nums; }
.cs .rc-note { margin-top: 6cqw; font-size: 3cqw; color: rgba(255,255,255,.5); }
/* ================= mocks ================= */
.cs .mk { position: absolute; inset: 0; overflow: hidden; }
.cs .mk-cap { position: absolute; z-index: 4; left: 5cqw; bottom: 5cqw; transform: rotate(-2deg); animation: cs-stkIn .5s var(--ease) .1s both; }
/* web */
.cs .mk-web { background: radial-gradient(80% 50% at 50% 40%, #2c2a24, #141413); }
.cs .wb { position: absolute; left: 5cqw; right: 5cqw; top: 28cqw; height: 128cqw; border-radius: 4cqw; background: #f7f2e8; color: var(--ink); overflow: hidden; box-shadow: 0 4cqw 10cqw rgba(0,0,0,.4); }
.cs .wb-url { position: absolute; left: 3cqw; right: 3cqw; top: 2.4cqw; height: 7cqw; border-radius: 99px; background: #ebe4d6; display: flex; align-items: center; gap: 1.6cqw; padding: 0 3cqw; font-size: 3cqw; color: #6c675d; overflow: hidden; }
.cs .wb-lock { width: 2.2cqw; height: 2.6cqw; border-radius: .5cqw; background: #6c675d; }
.cs .wb-load { position: absolute; left: 0; bottom: 0; height: .7cqw; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }
.cs .st-0 .wb-load { animation: cs-load 2.4s ease-out both; }
@keyframes cs-load { 70% { transform: scaleX(.9); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.cs .wb-nav { position: absolute; left: 5cqw; right: 5cqw; top: 12.5cqw; height: 4cqw; display: flex; align-items: center; gap: 3cqw; }
.cs .wb-nav b { font: 400 5cqw/1 Akkordeon, sans-serif; letter-spacing: .1em; margin-right: auto; opacity: 0; transition: opacity .5s; }
.cs .wb-nav i { width: 8cqw; height: 1.2cqw; border-radius: 1cqw; background: #cfc6b4; }
.cs .st-2 .wb-nav b { opacity: 1; }
.cs .wb-nav::before { content: ""; position: absolute; left: 0; top: 0; width: 18cqw; height: 4cqw; border: .4cqw dashed #b6ab95; border-radius: 1cqw; transition: opacity .4s; }
.cs .st-2 .wb-nav::before { opacity: 0; }
.cs .wb-hero, .cs .wb-c { position: absolute; border-radius: 3cqw; overflow: hidden; border: .5cqw dashed #b6ab95; background: #efe8da; }
.cs .wb-hero { left: 5cqw; right: 5cqw; top: 20cqw; height: 44cqw; }
.cs .wb-c { top: 105cqw; width: 37cqw; height: 18cqw; }
.cs .wb-c1 { left: 5cqw; }
.cs .wb-c2 { right: 5cqw; }
.cs .wb-x { position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .25cqw), #c8bea9 calc(50% - .25cqw), #c8bea9 calc(50% + .25cqw), transparent calc(50% + .25cqw)), linear-gradient(to bottom right, transparent calc(50% - .25cqw), #c8bea9 calc(50% - .25cqw), #c8bea9 calc(50% + .25cqw), transparent calc(50% + .25cqw)); }
.cs .wb-hero img, .cs .wb-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-14%) scale(1.08); transition: opacity .5s, transform .9s var(--ease); }
.cs .wb-c2 img { transition-delay: .15s; }
.cs .wb-c1 img { transition-delay: .3s; }
.cs .st-1 .wb-hero img, .cs .st-1 .wb-c img { opacity: 1; transform: none; }
.cs .st-1 .wb-hero, .cs .st-1 .wb-c { border-color: transparent; }
.cs .wb-hero, .cs .wb-c, .cs .wb-btn { transform: scale(.9); opacity: 0; animation: cs-boxIn .6s var(--ease) both; }
.cs .wb-c1 { animation-delay: .5s; }
.cs .wb-c2 { animation-delay: .6s; }
.cs .wb-btn { animation-delay: .4s; }
.cs .wb-hero { animation-delay: .1s; }
@keyframes cs-boxIn { to { transform: none; opacity: 1; } }
.cs .wb-c span { position: absolute; left: 2cqw; bottom: 2cqw; width: 14cqw; height: 1.6cqw; border-radius: 1cqw; background: #fff; opacity: 0; transition: opacity .4s .3s; }
.cs .st-2 .wb-c span { opacity: .9; }
.cs .wb-h { position: absolute; left: 5cqw; right: 5cqw; top: 68cqw; height: 20cqw; }
.cs .wb-h i, .cs .wb-p i { display: block; height: 3.6cqw; border-radius: 1cqw; background: #d8cfbd; margin-bottom: 2.4cqw; transform-origin: 0 50%; transition: opacity .3s; animation: cs-lineIn .6s var(--ease) .3s both; }
.cs .wb-h i:nth-child(1) { width: 86%; }
.cs .wb-h i:nth-child(2) { width: 58%; animation-delay: .4s; }
@keyframes cs-lineIn { from { transform: scaleX(0); } }
.cs .wb-h b { position: absolute; left: 0; top: -.4cqw; right: 0; font: 400 9.4cqw/.92 Akkordeon, sans-serif; text-transform: uppercase; opacity: 0; transform: translateY(4cqw); transition: opacity .5s, transform .7s var(--ease); }
.cs .st-2 .wb-h i { opacity: 0; }
.cs .st-2 .wb-h b { opacity: 1; transform: none; }
.cs .wb-p { position: absolute; left: 5cqw; right: 5cqw; top: 88cqw; }
.cs .wb-p i { height: 1.6cqw; margin-bottom: 1.6cqw; background: #e1d9c9; }
.cs .wb-p i:nth-child(1) { width: 92%; animation-delay: .5s; }
.cs .wb-p i:nth-child(2) { width: 70%; animation-delay: .6s; }
.cs .st-2 .wb-p i { background: #9c9483; }
.cs .wb-btn { position: absolute; left: 5cqw; top: 95cqw; width: 34cqw; height: 0; }
.cs .wb-btn span { position: absolute; left: 0; top: -1cqw; width: 34cqw; height: 9cqw; display: grid; place-items: center; border-radius: 99px; border: .5cqw dashed #b6ab95; font-weight: 500; font-size: 3.6cqw; color: transparent; transition: background-color .4s, color .4s, border-color .4s, transform .15s; }
.cs .st-1 .wb-btn span { background: var(--ink); border-color: var(--ink); }
.cs .st-2 .wb-btn span { color: var(--gold); }
.cs .st-3 .wb-btn span { animation: cs-press 2.6s linear both; }
@keyframes cs-press { 0%, 54% { transform: none; } 58% { transform: scale(.9); } 64%, 100% { transform: none; } }
.cs .st-4 .wb-btn span { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cs .wb-cursor { position: absolute; left: 0; top: 0; width: 7cqw; height: 7cqw; opacity: 0; transform: translate(66cqw, 120cqw); z-index: 3; }
.cs .wb-cursor svg { width: 100%; height: 100%; }
.cs .st-3 .wb-cursor { animation: cs-cur 2.6s var(--ease-io) both; }
.cs .st-4 .wb-cursor { animation: none; opacity: 0; }
@keyframes cs-cur { 0% { opacity: 0; transform: translate(66cqw, 120cqw); } 12% { opacity: 1; } 52% { transform: translate(20cqw, 97cqw); } 58% { transform: translate(20cqw, 97cqw) scale(.85); } 64%, 100% { opacity: 1; transform: translate(20cqw, 97cqw); } }
.cs .wb-ring { position: absolute; left: 20cqw; top: 97cqw; width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw; border-radius: 50%; border: .6cqw solid var(--orange); opacity: 0; }
.cs .st-3 .wb-ring { animation: cs-ring 2.6s ease-out both; }
@keyframes cs-ring { 0%, 56% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
.cs .wb-toast { position: absolute; left: 4cqw; right: 4cqw; top: 3cqw; z-index: 4; display: flex; align-items: center; gap: 3cqw; padding: 3cqw; border-radius: 3.4cqw; background: var(--ink); color: #fff; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.35); transform: translateY(-140%); transition: transform .7s var(--ease); }
.cs .wb-toast i { flex: none; display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: #2f9e63; }
.cs .wb-toast i svg { width: 60%; height: 60%; }
.cs .wb-toast b { display: block; font-weight: 500; font-size: 3.6cqw; }
.cs .wb-toast small { font-size: 3cqw; opacity: .7; }
.cs .st-4 .wb-toast { transform: none; }
.cs .wb-score { position: absolute; right: 5cqw; top: 95cqw; width: 15cqw; height: 15cqw; border-radius: 50%; border: 1cqw solid #2f9e63; display: grid; place-content: center; text-align: center; background: #fff; transform: scale(0); transition: transform .6s var(--ease) .5s; }
.cs .wb-score b { font: 400 5.4cqw/1 Akkordeon, sans-serif; color: #2f9e63; }
.cs .wb-score small { font-size: 2.2cqw; color: #6c675d; }
.cs .st-4 .wb-score { transform: none; }
/* accounting */
.cs .mk-ac { background: radial-gradient(80% 50% at 50% 40%, #23262c, #141413); }
.cs .ac { position: absolute; left: 5cqw; right: 5cqw; top: 28cqw; height: 128cqw; border-radius: 4cqw; background: #faf7f0; color: var(--ink); overflow: hidden; box-shadow: 0 4cqw 10cqw rgba(0,0,0,.4); }
.cs .st-3 .ac { animation: cs-thud .5s ease-out .35s; }
@keyframes cs-thud { 30% { transform: translateY(1.2cqw); } 60% { transform: translateY(-.4cqw); } }
.cs .ac-top { display: flex; justify-content: space-between; align-items: center; padding: 4cqw 5cqw 3cqw; border-bottom: 1px solid #ebe5d8; }
.cs .ac-top small { display: block; font-size: 3cqw; color: #77705f; }
.cs .ac-top b { display: block; font: 400 8cqw/1 Akkordeon, sans-serif; }
.cs .ac-sync { width: 6cqw; height: 6cqw; border-radius: 50%; border: .7cqw solid #e2dac8; border-top-color: var(--orange); animation: cs-spin 1s linear infinite; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs .ac-rows { padding: 1cqw 4cqw; }
.cs .ac-r { display: grid; grid-template-columns: 11cqw 1fr auto; grid-template-areas: "d t a" "d g a"; align-items: center; column-gap: 2cqw; padding: 1.8cqw 1cqw; border-bottom: 1px solid #efe9dd; opacity: 0; transform: translateX(-6cqw); animation: cs-rowIn .5s var(--ease) calc(.2s + var(--i) * .38s) both; }
@keyframes cs-rowIn { to { opacity: 1; transform: none; } }
.cs .ac-r .d { grid-area: d; font-size: 2.7cqw; color: #8b846f; }
.cs .ac-r .t { grid-area: t; font-size: 3.2cqw; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs .ac-r b { grid-area: a; font-weight: 500; font-size: 3.4cqw; font-variant-numeric: tabular-nums; }
.cs .ac-r b.in { color: #2f9e63; }
.cs .ac-r .ac-tag { grid-area: g; justify-self: start; font-style: normal; font-size: 2.5cqw; font-weight: 500; padding: .3cqw 1.8cqw; border-radius: 99px; color: #fff; background: var(--c); transform: scale(0); transform-origin: 0 50%; transition: transform .4s var(--ease) calc(var(--i) * .12s); }
.cs .st-1 .ac-r .ac-tag { transform: none; }
.cs .ac-chart { position: relative; margin: 3cqw 4cqw 0; padding: 3cqw; height: 50cqw; border-radius: 3cqw; background: #fff; border: 1px solid #ebe5d8; opacity: 0; transition: opacity .4s; }
.cs .st-1 .ac-chart { opacity: 1; transition-delay: .6s; }
.cs .ac-ch { font-size: 2.8cqw; color: #77705f; }
.cs .ac-bars { position: absolute; left: 4cqw; right: 4cqw; bottom: 3cqw; height: 34cqw; display: flex; justify-content: space-between; align-items: flex-end; }
.cs .ac-b { display: flex; gap: .8cqw; align-items: flex-end; height: 100%; }
.cs .ac-b i { width: 3.6cqw; height: var(--h); border-radius: .8cqw .8cqw 0 0; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease) calc(var(--i) * .1s); }
.cs .ac-b .r { background: var(--gold); }
.cs .ac-b .e { background: #3a3a37; }
.cs .st-2 .ac-b i { transform: none; }
.cs .ac-fc { position: absolute; left: 4cqw; right: 4cqw; top: 9cqw; height: 26cqw; overflow: hidden; }
.cs .ac-fc svg { width: 100%; height: 100%; }
.cs .ac-fc-cover { position: absolute; inset: 0; background: #fff; transform-origin: 100% 50%; transition: transform 1.2s var(--ease-io) .2s; }
.cs .ac-fc { opacity: 0; transition: opacity .3s; }
.cs .st-4 .ac-fc { opacity: 1; }
.cs .st-4 .ac-fc-cover { transform: scaleX(0); }
.cs .ac-chip { position: absolute; right: 3cqw; top: 2.4cqw; padding: .8cqw 2.4cqw; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 500; font-size: 2.8cqw; transform: scale(0); transition: transform .5s var(--ease) 1.2s; }
.cs .st-4 .ac-chip { transform: none; }
.cs .ac-stamp { position: absolute; right: 7cqw; top: 46cqw; width: 30cqw; height: 30cqw; border-radius: 50%; border: 1.2cqw double var(--pink); color: var(--pink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: rgba(255,255,255,.75); opacity: 0; transform: scale(2.6) rotate(10deg); }
.cs .ac-stamp span { font-weight: 500; font-size: 3.6cqw; letter-spacing: .2em; }
.cs .ac-stamp b { font: 400 9cqw/1 Akkordeon, sans-serif; text-transform: uppercase; }
.cs .ac-stamp i { width: 6cqw; height: 6cqw; }
.cs .ac-stamp i svg { width: 100%; height: 100%; }
.cs .st-3 .ac-stamp { opacity: .92; transform: rotate(-12deg); transition: transform .4s cubic-bezier(.5,0,.7,.4) .1s, opacity .15s .1s; }
/* ---------------- CTA ---------------- */
.cs .cta { padding: clamp(60px, 10vh, 120px) 0 clamp(60px, 10vh, 100px); }
.cs .caught { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: clamp(36px, 6vw, 64px); text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .8s var(--ease); }
.cs .caught.in { opacity: 1; transform: none; }
.cs .caught-ring { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: var(--ring); margin-bottom: 8px; color: var(--gold); position: relative; }
.cs .caught-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.cs .caught-ring svg { position: relative; width: 26px; height: 26px; }
.cs .caught b { font-weight: 500; font-size: 18px; }
.cs .caught span { font-size: 14px; color: var(--muted); }
.cs .cta-card { align-items: flex-start; }
.cs .cta-h { margin: clamp(28px, 4vw, 40px) 0 0; font: 400 120px/.82 Akkordeon, Impact, sans-serif; text-transform: uppercase; display: flex; flex-direction: column; transform: rotate(-4deg); transform-origin: 0 100%; }
.cs .cta-h .w { display: block; overflow: hidden; padding: .05em 0 .08em; margin-bottom: -.08em; }
.cs .cta-h .w > span { display: inline-block; white-space: nowrap; transform: translateY(105%); transition: transform 1s var(--ease) calc(var(--i) * .12s); }
.cs .cta-card.in .cta-h .w > span { transform: none; }
.cs .cta-p { margin: clamp(24px, 3vw, 36px) 0 18px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; max-width: 34ch; }
.cs .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.cs .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; transition: transform .3s var(--ease), background-color .3s; }
.cs .btn i { display: grid; width: 18px; height: 18px; }
.cs .btn svg { width: 100%; height: 100%; }
.cs .btn:hover { background: var(--pink); transform: translateY(-2px); }
.cs .cta-l { font-weight: 500; font-size: 16px; text-decoration: none; border-bottom: 1.5px solid rgba(29,29,27,.35); padding: 4px 0; }
.cs .cta-l:hover { border-color: var(--ink); }
.cs .cta-card :focus-visible { outline-color: var(--ink); }
.cs .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px var(--gut) 34px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: rgba(255,255,255,.5); }
.cs .foot img { height: 28px; width: auto; }
/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .cs .stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy phone" "list phone"; align-items: start; }
  .cs .rl { max-height: 340px; }
  .cs .in-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cs .topbar { height: 54px; }
  .cs .tb-cta { display: none; }
  .cs .tb-logo img { height: 26px; }
  .cs .seg-l { display: none; }
  .cs .reelbar { gap: 4px; }
  .cs .hl-row { grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
  .cs .hl-k span { display: none; }
  .cs .stats { gap: 14px 26px; }
  .cs .tcard { min-height: 0; padding-top: 70px; padding-bottom: 72px; }
  .cs .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "list" "phone"; gap: 22px; margin-top: 32px; }
  .cs .tagline { font-size: 36px; }
  .cs .desc { font-size: 16px; }
  /* list becomes a highlights row */
  .cs .rl-h { margin-bottom: 8px; }
  .cs .rl { display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 4px; margin: 0 calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
  .cs .rl::-webkit-scrollbar { display: none; }
  .cs .rl li { flex: none; }
  .cs .ri { width: 76px; flex-direction: column; gap: 7px; padding: 4px 2px 6px; margin: 0; background: transparent !important; text-align: center; }
  .cs .ri-av { width: 62px; height: 62px; }
  .cs .ri-av::before { inset: -3px; }
  .cs .ri.on .ri-av::before { animation: cs-ringSpin 4s linear infinite; }
  .cs .chapter:has(.phone.is-paused) .ri.on .ri-av::before { animation-play-state: paused; }
  .cs .ri-t span { display: none; }
  .cs .ri-t b { font-size: 11.5px; font-weight: 400; max-width: 72px; }
  .cs .ri.on .ri-t b { font-weight: 500; color: var(--gold); }
  .cs .ri-fill { display: none; }
  .cs .phone { --pw: min(340px, calc(100vw - 2 * var(--gut))); }
}
@keyframes cs-ringSpin { to { transform: rotate(360deg); } }
/* ---------------- reduced motion: calm, static ---------------- */
@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *::before, .cs *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .cs .tc-count i, .cs .ac-sync { animation: none !important; }
  .cs .st-3 .wb-cursor, .cs .st-3 .wb-ring { animation: none !important; }
}

/* ---------------- events: a full day of coverage (photo, video, edit) ---------------- */
.cs .mk-ev { background: radial-gradient(80% 50% at 50% 35%, #26231d, #121211); }
.cs .cv { position: absolute; left: 5cqw; right: 5cqw; top: 27cqw; height: 78cqw; border-radius: 3cqw; overflow: hidden; background: #000; box-shadow: 0 4cqw 10cqw rgba(0,0,0,.45); }
.cs .cv-shot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s, transform 3.4s linear; }
.cs .st-0 .cv-shot.s0, .cs .st-1 .cv-shot.s1, .cs .st-2 .cv-shot.s2, .cs .st-3 .cv-shot.s0, .cs .st-4 .cv-shot.s1 { opacity: 1; transform: scale(1); }
.cs .st-1 .cv-shot.s0, .cs .st-2 .cv-shot.s1, .cs .st-3 .cv-shot.s2, .cs .st-4 .cv-shot.s0 { opacity: 0; }
.cs .st-3 .cv-shot.s0 { transform: scale(1.12); }
.cs .st-4 .cv-shot.s0 { opacity: 0; }
.cs .cv-grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.3% - .5px), rgba(255,255,255,.28) calc(33.3% - .5px), rgba(255,255,255,.28) calc(33.3% + .5px), transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.28) calc(66.6% - .5px), rgba(255,255,255,.28) calc(66.6% + .5px), transparent calc(66.6% + .5px)), linear-gradient(transparent calc(33.3% - .5px), rgba(255,255,255,.28) calc(33.3% - .5px), rgba(255,255,255,.28) calc(33.3% + .5px), transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255,255,255,.28) calc(66.6% - .5px), rgba(255,255,255,.28) calc(66.6% + .5px), transparent calc(66.6% + .5px)); transition: opacity .4s; }
.cs .st-4 .cv-grid { opacity: 0; }
.cs .cv-corners i { position: absolute; width: 6cqw; height: 6cqw; border: 0 solid #fff; }
.cs .cv-corners i:nth-child(1) { left: 3cqw; top: 3cqw; border-width: .6cqw 0 0 .6cqw; }
.cs .cv-corners i:nth-child(2) { right: 3cqw; top: 3cqw; border-width: .6cqw .6cqw 0 0; }
.cs .cv-corners i:nth-child(3) { left: 3cqw; bottom: 3cqw; border-width: 0 0 .6cqw .6cqw; }
.cs .cv-corners i:nth-child(4) { right: 3cqw; bottom: 3cqw; border-width: 0 .6cqw .6cqw 0; }
.cs .cv-focus { position: absolute; left: 50%; top: 50%; width: 16cqw; height: 16cqw; margin: -8cqw 0 0 -8cqw; border: .5cqw solid var(--gold); border-radius: 1cqw; opacity: 0; }
.cs .mk-ev.st-0:not(.st-1) .cv-focus, .cs .mk-ev.st-2:not(.st-3) .cv-focus { animation: cs-focus 1.1s var(--ease) .2s both; }
@keyframes cs-focus { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
.cs .cv-top { position: absolute; left: 4cqw; right: 4cqw; top: 3.4cqw; display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 3.1cqw; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.cs .cv-rec { display: inline-flex; align-items: center; gap: 1.4cqw; padding: .6cqw 2cqw; border-radius: 99px; background: rgba(0,0,0,.4); opacity: .35; transition: opacity .3s; }
.cs .cv-rec i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #fff; transition: background-color .3s; }
.cs .st-1 .cv-rec { opacity: 1; }
.cs .st-1 .cv-rec i { background: var(--pink); animation: cs-rec 1s ease-in-out infinite; }
.cs .st-4 .cv-rec { opacity: 0; }
.cs .cv-tc { position: relative; display: inline-grid; padding: .6cqw 2cqw; border-radius: 99px; background: rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }
.cs .cv-tc span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s; }
.cs .st-0 .cv-tc .t0, .cs .st-1 .cv-tc .t1, .cs .st-2 .cv-tc .t2, .cs .st-3 .cv-tc .t3, .cs .st-4 .cv-tc .t4 { opacity: 1; }
.cs .st-1 .cv-tc .t0, .cs .st-2 .cv-tc .t1, .cs .st-3 .cv-tc .t2, .cs .st-4 .cv-tc .t3 { opacity: 0; }
.cs .cv-meta { position: absolute; left: 4cqw; bottom: 3.4cqw; font-size: 2.7cqw; letter-spacing: .08em; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.6); transition: opacity .3s; }
.cs .st-4 .cv-meta { opacity: 0; }
.cs .cv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cs .mk-ev.st-0:not(.st-1) .cv-flash { animation: cs-flash 3s linear both; }
.cs .mk-ev.st-2:not(.st-3) .cv-flash { animation: cs-flash 3.2s linear both; }
@keyframes cs-flash { 0%, 38% { opacity: 0; } 40% { opacity: .9; } 48%, 70% { opacity: 0; } 72% { opacity: .8; } 80%, 100% { opacity: 0; } }
/* colour grade: flat log footage wipes away to the graded look */
.cs .cv-grade { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cs .cv-grade img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(.65) contrast(.72) brightness(1.18); }
.cs .cv-grade b { position: absolute; top: 3.4cqw; padding: .6cqw 2cqw; border-radius: 99px; background: rgba(0,0,0,.5); font-weight: 500; font-size: 2.8cqw; letter-spacing: .1em; }
.cs .cv-grade .lg { left: 4cqw; }
.cs .cv-grade .gr { right: 4cqw; background: var(--gold); color: var(--ink); }
.cs .cv-grade i { position: absolute; top: 0; bottom: 0; left: 0; width: .8cqw; margin-left: -.4cqw; background: #fff; box-shadow: 0 0 4cqw rgba(255,255,255,.8); }
.cs .st-4 .cv-grade { opacity: 1; }
.cs .st-4 .cv-grade img { animation: cs-grade 2.6s var(--ease-io) .5s both; }
.cs .st-4 .cv-grade i { animation: cs-gradeLine 2.6s var(--ease-io) .5s both; }
@keyframes cs-grade { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 50% 0 0); } }
@keyframes cs-gradeLine { from { transform: translateX(90cqw); } to { transform: translateX(45cqw); } }
/* a vertical reel cut from the day */
.cs .cv-reel { position: absolute; right: 4cqw; top: 10cqw; width: 30cqw; aspect-ratio: 9 / 16; border-radius: 2.4cqw; overflow: hidden; border: .6cqw solid #fff; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.5); opacity: 0; transform: translateY(8cqw) rotate(6deg) scale(.8); transition: opacity .4s, transform .7s var(--ease); }
.cs .cv-reel img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cs .cv-reel span { position: absolute; left: 50%; top: 50%; width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; }
.cs .cv-reel span::before { content: ""; margin-left: 1cqw; border-left: 3.6cqw solid var(--ink); border-top: 2.2cqw solid transparent; border-bottom: 2.2cqw solid transparent; }
.cs .cv-reel em { position: absolute; left: 0; right: 0; bottom: 0; height: .8cqw; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.cs .st-3 .cv-reel { opacity: 1; transform: rotate(4deg); }
.cs .st-3 .cv-reel em { transition: transform 2.8s linear .6s; transform: scaleX(1); }
.cs .st-4 .cv-reel { opacity: 0; transform: translateY(-6cqw) rotate(4deg) scale(.9); }
/* contact strip: each shot drops in as it's taken */
.cs .cv-strip { position: absolute; left: 5cqw; right: 5cqw; top: 108cqw; height: 15cqw; display: flex; gap: 1.6cqw; padding: 1.6cqw; border-radius: 2cqw; background: #1a1a18; border: 1px solid rgba(255,255,255,.08); }
.cs .cv-strip span { flex: 1; position: relative; border-radius: 1cqw; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1cqw, transparent 1cqw 2cqw); }
.cs .cv-strip img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: translateY(-120%) scale(1.3); transition: opacity .3s, transform .6s var(--ease); }
.cs .st-0 .cv-strip span:nth-child(-n+2) img, .cs .st-1 .cv-strip span:nth-child(3) img, .cs .st-2 .cv-strip span:nth-child(n+4) img { opacity: 1; transform: none; }
.cs .st-0 .cv-strip span:nth-child(1) img { transition-delay: 1.3s; }
.cs .st-0 .cv-strip span:nth-child(2) img { transition-delay: 2.2s; }
.cs .st-1 .cv-strip span:nth-child(3) img { transition-delay: 1.4s; }
.cs .st-2 .cv-strip span:nth-child(4) img { transition-delay: 1.3s; }
.cs .st-2 .cv-strip span:nth-child(5) img { transition-delay: 2.3s; }
/* edit timeline */
.cs .cv-tl { position: absolute; left: 5cqw; right: 5cqw; top: 126cqw; height: 25cqw; padding: 2.4cqw 2.4cqw 2.4cqw 11cqw; border-radius: 2cqw; background: #1a1a18; border: 1px solid rgba(255,255,255,.08); display: grid; gap: 1.6cqw; align-content: center; }
.cs .cv-tl > small { position: absolute; left: 2.6cqw; font-size: 2.4cqw; font-weight: 500; letter-spacing: .1em; color: rgba(255,255,255,.5); }
.cs .cv-tl > small.v { top: 6.2cqw; }
.cs .cv-tl > small.a { top: 15.4cqw; }
.cs .cv-v { position: relative; height: 7.4cqw; display: flex; gap: .8cqw; }
.cs .cv-v i { flex: var(--w); border-radius: 1cqw; background: var(--c); opacity: 0; transform: translateX(10cqw); transition: opacity .3s, transform .6s var(--ease); transition-delay: calc(var(--i) * .22s); }
.cs .cv-a { position: relative; height: 5cqw; border-radius: 1cqw; background: repeating-linear-gradient(90deg, rgba(158,217,241,.6) 0 .5cqw, transparent .5cqw 1.1cqw); opacity: 0; transform-origin: 0 50%; transform: scaleX(0); transition: opacity .4s .8s, transform 1s var(--ease) .8s; }
.cs .st-3 .cv-v i { opacity: 1; transform: none; }
.cs .st-3 .cv-a { opacity: 1; transform: none; }
.cs .cv-ph { position: absolute; top: 1.4cqw; bottom: 1.4cqw; left: 11cqw; width: .6cqw; background: var(--gold); border-radius: 1cqw; opacity: 0; }
.cs .cv-ph::before { content: ""; position: absolute; left: 50%; top: -1cqw; width: 2.6cqw; height: 2.6cqw; margin-left: -1.3cqw; border-radius: 50%; background: var(--gold); }
.cs .st-4 .cv-ph { opacity: 1; animation: cs-ph 3.6s linear .2s both; }
@keyframes cs-ph { to { transform: translateX(73cqw); } }
/* toasts */
.cs .cv-toast { position: absolute; left: 7cqw; right: 7cqw; top: 29cqw; z-index: 3; display: flex; align-items: center; gap: 3cqw; padding: 3cqw; border-radius: 3.4cqw; background: rgba(21,21,20,.94); color: #fff; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.4); opacity: 0; transform: translateY(-6cqw); transition: opacity .4s, transform .6s var(--ease); }
.cs .cv-toast > i { flex: none; display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: #2f9e63; }
.cs .cv-toast > i svg { width: 60%; height: 60%; }
.cs .cv-toast b { display: block; font-weight: 500; font-size: 3.6cqw; }
.cs .cv-toast small { font-size: 3cqw; opacity: .7; }
.cs .st-2 .cv-toast.a { opacity: 1; transform: none; transition-delay: 2.1s; }
.cs .st-3 .cv-toast.a { opacity: 0; transform: translateY(-6cqw); transition-delay: 0s; }
.cs .st-4 .cv-toast.b { opacity: 1; transform: none; transition-delay: 3.3s; }
@media (prefers-reduced-motion: reduce) {
  .cs .st-1 .cv-rec i, .cs .cv-flash, .cs .cv-focus { animation: none !important; }
}

/* ============================================================
   HOMEPAGE MODAL: one service at a time
   ============================================================ */
.svc-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(12px, 2.5vw, 36px); }
.svc-modal[hidden] { display: none; }
.svc-modal__backdrop { position: absolute; inset: 0; background: rgba(10,10,9,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.svc-modal.is-open .svc-modal__backdrop { opacity: 1; }
.svc-modal__panel { position: relative; width: min(1320px, 100%); height: min(940px, 100%); display: flex; flex-direction: column; border-radius: clamp(20px, 2.2vw, 32px); background: var(--ink); color: #fff; font: 300 16px/1.6 Graphik, system-ui, sans-serif; -webkit-font-smoothing: antialiased; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .35s, transform .5s var(--ease); }
.svc-modal.is-open .svc-modal__panel { opacity: 1; transform: none; }
.svc-modal__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px clamp(14px, 2vw, 22px); border-bottom: 1px solid rgba(255,255,255,.08); }
.svc-modal__count { margin-right: auto; font: 400 22px/1 Akkordeon, sans-serif; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.svc-modal__count b { font-weight: 400; color: var(--gold); }
.svc-modal__btn { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.svc-modal__btn svg { width: 18px; height: 18px; }
.svc-modal__btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.svc-modal__all { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 500; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .25s, transform .3s var(--ease); }
.svc-modal__all svg { width: 16px; height: 16px; }
.svc-modal__all:hover { background: #fff; transform: translateY(-1px); }
.svc-modal__body { --gut: clamp(16px, 2.6vw, 36px); flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.svc-modal__body .chapter { padding: clamp(16px, 2.4vw, 32px) 0 clamp(28px, 4vw, 48px); }
.svc-modal__body .wrap { padding: 0 var(--gut); }
.svc-modal__body .tcard { min-height: 0; padding-top: clamp(54px, 6vw, 72px); padding-bottom: clamp(56px, 6vw, 70px); }
.svc-modal__body .tc-title { margin: 0; }
/* Modal layout: title card sits above the copy, so card + phone + list fit one screen */
.svc-modal__body .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .85fr); grid-template-areas: "card phone list" "copy phone list"; gap: clamp(20px, 2.4vw, 32px) clamp(24px, 3.4vw, 56px); align-items: start; }
.svc-modal__body .stage { display: contents; }
.svc-modal__body .tcard { grid-area: card; }
.svc-modal__body .ph-col { align-self: center; }
.svc-modal__body .rlist { align-self: center; }
.svc-modal__body .phone { --pw: max(250px, min(350px, 24vw, calc((100dvh - 250px) * .5625))); }
.svc-modal__body .tc-small { font-size: clamp(20px, 2.1vw, 34px); }
.svc-modal__body .tagline { font-size: clamp(28px, 2.6vw, 40px); }
.svc-modal__body .desc { font-size: 15.5px; }
@media (max-width: 1100px) {
  .svc-modal__body .wrap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "card phone" "copy phone" "list phone"; }
  .svc-modal__body .ph-col { align-self: start; }
  .svc-modal__body .phone { --pw: max(240px, min(320px, 34vw, calc((100dvh - 230px) * .5625))); }
}
@media (max-width: 760px) {
  .svc-modal__body .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "copy" "list" "phone"; gap: 22px; }
  .svc-modal__body .phone { --pw: min(340px, calc(100vw - 2 * var(--gut))); }
}
.svc-modal__panel:focus { outline: none; }
.svc-modal__body .stage { margin-top: clamp(24px, 3.5vw, 44px); }
.svc-modal__body .chapter.is-swap { animation: cs-swap .45s var(--ease) both; }
@keyframes cs-swap { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 40px)); } }
.svc-modal__loading { display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.5); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) {
  .svc-modal { padding: 0; }
  .svc-modal__panel { width: 100%; height: 100%; height: 100dvh; border-radius: 0; transform: translateY(40px); }
  .svc-modal__all span { display: none; }
  .svc-modal__all { padding: 0 14px; }
  .svc-modal__btn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-modal__backdrop, .svc-modal__panel { transition: none; }
  .svc-modal__body .chapter.is-swap { animation: none; }
}