/* =====================================================================
   Portfolio tab — for clients: big type, motion and things to play with.
   Palette: powder pink, ink, cobalt blue and a lime spark. No glow, no gradients.
   Everything that moves is switched off for prefers-reduced-motion.
   ===================================================================== */
:root {
  --paper: #F5E9E5;
  --paper-2: #EBDBD5;
  --rule: rgba(20, 22, 28, .12);
  --cobalt: #2440E8;
  --cobalt-soft: #D9DFFF;
  --lime: #D7F35B;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
html[data-view="portfolio"] body { background: var(--paper); }
html[data-view="portfolio"] .topbar.solid { background: rgba(245, 233, 229, .9); border-color: var(--rule); }
html[data-view="portfolio"] .progress { background: var(--cobalt); }
html[data-view="portfolio"] .menu a:hover, html[data-view="portfolio"] .menu a.on { background: var(--paper-2); }
html[data-view="portfolio"] .foot { background: var(--ink); color: #8A8F99; border-color: rgba(255, 255, 255, .08); }
html[data-view="portfolio"] ::selection { background: var(--lime); color: var(--ink); }
#view-portfolio { overflow-x: clip; }
.work-view .sec-num, .work-view .case-meta { color: var(--cobalt); }
.work-view .ph { background: var(--paper-2); }
.work-view .btn.dark { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.work-view .btn.dark:hover { background: transparent; color: var(--cobalt); }
.work-view .btn:not(.dark):hover { background: var(--ink); color: var(--paper); }

/* ---------- custom cursor (mouse only; portfolio.js turns it on) ---------- */
.cursor { display: none; }
html.cursor-on[data-view="portfolio"] .cursor { display: grid; }
html.cursor-on[data-view="portfolio"]:not(.modal-open) * { cursor: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 70; width: 12px; height: 12px; margin: -6px 0 0 -6px; place-items: center; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, opacity .3s; }
.cursor.link { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor.label { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--lime); mix-blend-mode: normal; }
.cursor-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
.cursor.label .cursor-label { opacity: 1; }
.cursor.hidden, html.modal-open .cursor { opacity: 0; }

.magnetic { transition: transform .45s var(--ease), background .2s, color .2s, border-color .2s; }

/* ---------- hero: letters rise, then lean thin under the mouse ---------- */
.hero { position: relative; display: grid; min-height: 100vh; }
.hero-text { display: flex; flex-direction: column; justify-content: center; padding: 120px 56px 110px; }
.hero-text .eyebrow { color: var(--ink-2); }
.hero-name { font-family: var(--head); font-weight: 700; font-size: clamp(52px, 8vw, 128px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; margin: 22px 0 26px; }
.hero-name .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; white-space: nowrap; }
.hero-name .ch { display: inline-block; transform: translateY(110%); animation: ch-rise 1.1s var(--ease) forwards; animation-delay: calc(260ms + var(--i) * 34ms); }
@keyframes ch-rise { to { transform: none; } }
.roles { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 28px; }
.hero-lead { font-size: 19px; color: var(--ink-2); max-width: 520px; margin: 0 0 36px; }
.hero-text > :not(.hero-name) { animation: fade-up 1s var(--ease) both; }
.hero-text > .eyebrow { animation-delay: .1s; }
.hero-text > .roles { animation-delay: .75s; }
.hero-text > .hero-lead { animation-delay: .85s; }
.hero-text > .btns { animation-delay: .95s; }
.hero-text > .hero-meta { animation-delay: 1.05s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 30px 0 0; font-size: 13px; color: var(--muted); }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; animation: ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, .45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(46, 158, 91, 0); } }
.scroll-cue { position: absolute; left: 56px; bottom: 34px; display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { position: relative; width: 1px; height: 44px; overflow: hidden; background: var(--rule); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--cobalt); animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ---------- hero demo: a store, a bot and an admin assemble themselves in turn ---------- */
.hero { grid-template-columns: 1.1fr .9fr; }
.hero-demo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 110px 40px 90px; background: var(--cobalt); animation: fade-up 1s var(--ease) .4s both; }
.demo-win, .demo-tabs { width: min(540px, 100%); }
.demo-win { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 12px 12px 0 var(--lime); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 2px solid var(--ink); }
.demo-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); }
.demo-url { margin-left: 10px; flex: 1; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); font-size: 11px; color: var(--ink-2); }
.demo-stage { position: relative; height: 370px; }
.scene { position: absolute; inset: 0; padding: 16px; visibility: hidden; }
.scene.on { visibility: visible; }
.scene [style*="--d"], .scene .shop-head { opacity: 0; transform: translateY(10px); }
.scene.on [style*="--d"], .scene.on .shop-head { animation: pop .55s var(--ease) var(--d, 0s) forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }

.shop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.shop-head .logo { width: 22px; height: 22px; border-radius: 6px; background: var(--cobalt); }
.shop-head .nav { width: 34px; height: 6px; border-radius: 3px; background: var(--rule); }
.cart { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 500; }
.cart em { display: inline-flex; flex-direction: column; height: 18px; min-width: 18px; overflow: hidden; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 11px/18px var(--body); text-align: center; }
.cart em b { font-weight: 600; }
.scene.on .cart em { animation: cart-hit .35s var(--ease) 2.15s forwards; }
.scene.on .cart em b { animation: cart-roll .4s var(--ease) 2.15s forwards; }
@keyframes cart-hit { to { background: var(--lime); } }
@keyframes cart-roll { to { transform: translateY(-100%); } }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prod { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 9px; background: var(--white); border: 1px solid var(--rule); }
.pic { height: 84px; border-radius: 6px; }
.p1 { background: var(--cobalt-soft); } .p2 { background: var(--lime); } .p3 { background: var(--paper-2); } .p4 { background: var(--cobalt); }
.prod .t { width: 70%; height: 6px; border-radius: 3px; background: var(--rule); }
.prod .price { font-size: 11px; font-weight: 600; color: var(--ink); }
.tap { position: absolute; left: 88%; top: 96%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(215, 243, 91, .6); opacity: 0; }
.scene.on .tap { animation: tap 1.5s var(--ease) .9s forwards; }
@keyframes tap {
  0% { opacity: 0; }
  15% { opacity: 1; }
  70% { left: 76%; top: 52%; transform: none; }
  80% { left: 76%; top: 52%; transform: scale(.7); }
  90%, 100% { left: 76%; top: 52%; transform: none; opacity: 1; }
}

.scene-bot { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: #E9ECF7; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.msg.me { align-self: flex-end; background: var(--cobalt); color: var(--white); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--white); color: var(--ink); border-bottom-left-radius: 4px; }
.msg.ok { background: var(--lime); font-weight: 600; }
.kbd { display: flex; gap: 6px; }
.kbd > span { flex: 1; padding: 7px 8px; border-radius: 8px; background: var(--white); border: 1.5px solid var(--cobalt); color: var(--cobalt); font-size: 11px; font-weight: 600; text-align: center; }
.scene.on .kbd .hit { animation: key-hit .3s var(--ease) 1.85s forwards; }
@keyframes key-hit { to { background: var(--cobalt); color: var(--white); } }

.scene-admin { display: grid; grid-template-columns: 54px 1fr; padding: 0; }
.adm-side { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; background: var(--ink); }
.adm-side b { width: 22px; height: 22px; border-radius: 6px; background: var(--lime); margin-bottom: 8px; }
.adm-side span { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.adm-main { padding: 16px; }
.adm-chart { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.adm-chart i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--cobalt); transform-origin: bottom; }
.adm-chart i:last-child { background: var(--lime); }
.scene .adm-chart i { opacity: 1; transform: scaleY(0); }
.scene.on .adm-chart i { animation: grow .7s var(--ease) var(--d) forwards; }
@keyframes grow { to { transform: none; } }
.row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.row .t { height: 6px; border-radius: 3px; background: var(--rule); }
.st { font-style: normal; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--ink); }
.st.paid { background: var(--lime); } .st.new { background: var(--cobalt-soft); color: var(--cobalt); } .st.sent { background: var(--paper-2); }

.demo-tabs { display: flex; gap: 8px; margin-top: 34px; }
.demo-tab { position: relative; flex: 1; display: flex; gap: 8px; padding: 12px 0 0; border: 0; border-top: 2px solid rgba(255, 255, 255, .25); background: none; color: rgba(255, 255, 255, .6); font: 500 11px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer; transition: color .2s; }
.demo-tab:hover, .demo-tab.on { color: var(--white); }
.demo-tab .n { color: var(--lime); }
.demo-tab i { position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--lime); }
.demo-tab.on i { animation: tab-run var(--dur, 6s) linear forwards; }
.demo-tab.done i { width: 100%; }
@keyframes tab-run { to { width: 100%; } }

/* ---------- marquee: a cobalt band, faster and reversed with the scroll ---------- */
.marquee { padding: 34px 0; overflow: hidden; background: var(--cobalt); color: var(--paper); }
.mq-row { overflow: hidden; white-space: nowrap; }
.mq-track { display: inline-flex; will-change: transform; }
.mq-chunk { flex: none; font-family: var(--head); font-weight: 700; font-size: clamp(44px, 7vw, 104px); line-height: 1.12; letter-spacing: -.04em; padding-right: .25em; }
.mq-chunk i { display: inline-block; width: .22em; height: .22em; margin: 0 .4em; border-radius: 50%; background: var(--lime); vertical-align: .12em; }
/* a variable font's overlapping contours show through a plain stroke; painting the stroke under a fill of the band colour hides them */
.mq-outline .mq-chunk span span { color: var(--cobalt); -webkit-text-stroke: 3px var(--paper); paint-order: stroke fill; }

/* ---------- sections ---------- */
.sec { padding: 140px 56px; border-top: 1px solid var(--rule); }
.sec.tint { background: var(--paper-2); }
.sec-title { font-family: var(--head); font-weight: 700; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.04em; margin: 0; }
.sec-head { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 56px; margin-bottom: 64px; }
.sec-head .sec-num { padding-top: 14px; }
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-words .wi { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.split-words.in .wi { transform: none; }

/* ---------- services: rows fill with cobalt, a screenshot follows the mouse ---------- */
.marquee + .sec { border-top: 0; }
.svc-list { border-top: 1px solid var(--ink); }
.svc-row { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr) 40px; gap: 32px; align-items: center; padding: 34px 24px; border-bottom: 1px solid var(--rule); }
.svc-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cobalt); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); }
.svc-n { font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--cobalt); transition: color .3s; }
.svc-t { font-family: var(--head); font-weight: 700; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -.035em; transition: color .3s, transform .55s var(--ease); }
.svc-d { font-size: 15px; color: var(--ink-2); transition: color .3s; }
.svc-d em { display: block; margin-top: 8px; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); transition: color .3s; }
.svc-go { justify-self: end; font-size: 26px; transition: transform .55s var(--ease), color .3s; }
.svc-row:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
@media (hover: hover) {
  .svc-row:hover::before { transform: scaleY(1); }
  .svc-row:hover .svc-t { color: var(--white); transform: translateX(14px); }
  .svc-row:hover .svc-d { color: var(--cobalt-soft); }
  .svc-row:hover .svc-n, .svc-row:hover .svc-d em { color: var(--lime); }
  .svc-row:hover .svc-go { color: var(--lime); transform: rotate(45deg); }
}
.svc-preview { position: fixed; left: 0; top: 0; z-index: 55; width: 360px; aspect-ratio: 16/10; overflow: hidden; border-radius: 4px; pointer-events: none; opacity: 0; box-shadow: 0 30px 60px -24px rgba(20, 22, 28, .5); transition: opacity .3s; will-change: transform; }
.svc-preview.on { opacity: 1; }
.svc-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- numbers: digits roll like an odometer ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.num { padding: 64px 36px 64px 56px; border-right: 1px solid var(--rule); }
.num:last-child { border-right: 0; }
.num b { display: block; font-family: var(--head); font-weight: 700; font-size: clamp(48px, 5.4vw, 88px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.num > span { display: block; max-width: 250px; margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.num-figure { display: flex; align-items: baseline; gap: .3em; }
.num-pre { font-family: var(--head); font-weight: 700; font-size: clamp(20px, 2vw, 32px); letter-spacing: -.02em; color: var(--cobalt); }
.odo-col { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.odo-strip { display: flex; flex-direction: column; transition: transform 2.2s cubic-bezier(.16, 1, .3, 1); }
.odo-strip span { height: 1em; line-height: 1; }
.odo-sep { display: inline-block; width: .22em; }
.odo-sym { display: inline-block; }

/* ---------- case studies: a stack of wide cards; each one slides over the last, which steps back ---------- */
.cases-sec { position: relative; border-top: 1px solid var(--rule); }
.pin { padding: 140px 56px; }
.pin-head { margin-bottom: 56px; }
.pin-head .sec-title { margin-top: 14px; }
.cases { display: grid; gap: 32px; counter-reset: case; }
.case { counter-increment: case; }
.case-card { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); min-height: 520px; background: var(--white); border: 1px solid var(--rule); transform-origin: 50% 0; }
.case-cover { position: relative; overflow: hidden; background: var(--paper-2); border-right: 1px solid var(--rule); }
.case-cover > img:not(.stat-logo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; scale: 1; transition: scale 1s var(--ease); }
.case-card:hover .case-cover > img:not(.stat-logo) { scale: 1.04; }
/* a photo cover with the headline number on a cobalt band */
.cover-band { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: 14px; padding: 14px 22px 16px; background: var(--cobalt); color: var(--white); }
.cover-band b { font-family: var(--head); font-weight: 700; font-size: clamp(28px, 2.6vw, 42px); line-height: 1; letter-spacing: -.035em; color: var(--lime); white-space: nowrap; }
.cover-band span { font-size: 14px; }
.case-info { display: flex; flex-direction: column; align-items: flex-start; padding: 40px 44px 40px; }
.case-info::before { content: counter(case, decimal-leading-zero); margin-bottom: auto; padding-bottom: 40px; font-family: var(--head); font-weight: 700; font-size: clamp(64px, 6vw, 96px); line-height: .85; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--cobalt); }
.case-info h3 { font-family: var(--head); font-weight: 700; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -.03em; margin: 12px 0 12px; }
.case-info p { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; max-width: 460px; }
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 28px; padding: 0; }
.case-tags li { padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.case-more { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.case-card:hover .case-more { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.case-end { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 56px 48px; background: var(--cobalt); color: var(--white); transform-origin: 50% 0; }
.case-end-title { font-family: var(--head); font-weight: 700; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.04; letter-spacing: -.035em; margin: 0; }
.work-view .case-end .btn.dark { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.work-view .case-end .btn.dark:hover { background: transparent; border-color: var(--lime); color: var(--lime); }
.cases-note { margin: 0; max-width: 720px; font-size: 13px; color: var(--cobalt-soft); }

/* the stack (portfolio.js turns it on for a large enough screen): cards stick one below the other's edge */
.cases.stack { gap: 14vh; padding-bottom: 6vh; }
.cases.stack > .case, .cases.stack > .case-end { position: sticky; top: calc(96px + var(--k, 0) * 18px); }
.cases.stack .case-card, .cases.stack .case-end { height: min(560px, calc(100vh - 200px)); min-height: 0; box-shadow: 0 -18px 40px -28px rgba(20, 22, 28, .35); will-change: transform; }

/* ---------- process: a cobalt section, a lime line fills as you read ---------- */
.sec.blue { background: var(--cobalt); color: var(--white); border-top: 0; }
.sec.blue .sec-num { color: var(--cobalt-soft); }
.proc { display: grid; grid-template-columns: minmax(280px, 1fr) 1.25fr; gap: 80px; }
.proc-side { position: sticky; top: 120px; align-self: start; }
.proc-side .sec-title { margin-top: 16px; }
.proc-big { margin-top: 40px; font-family: var(--head); font-weight: 700; font-size: clamp(120px, 15vw, 230px); line-height: 1; letter-spacing: -.06em; color: var(--lime); font-variant-numeric: tabular-nums; }
.proc-big b { display: block; font-weight: 700; }
.steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 56px; }
.steps-line { position: absolute; left: 12px; top: 10px; bottom: 10px; width: 2px; background: rgba(255, 255, 255, .22); }
.steps-line i { position: absolute; inset: 0; background: var(--lime); transform: scaleY(0); transform-origin: top; }
.step { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding-bottom: 84px; opacity: .4; transition: opacity .5s; }
.step:nth-last-child(2) { padding-bottom: 8px; }
.step::before { content: ""; position: absolute; left: -50px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--cobalt); border: 2px solid rgba(255, 255, 255, .5); transition: background .4s, border-color .4s; }
.step.on { opacity: 1; }
.step.on::before { background: var(--lime); border-color: var(--lime); }
.step-n { padding-top: 6px; font-family: var(--head); font-weight: 700; font-size: 18px; color: var(--lime); }
.step h3 { font-family: var(--head); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 12px; }
.step p { margin: 0; max-width: 480px; font-size: 16px; color: var(--cobalt-soft); }

/* ---------- about: the statement lights up word by word ---------- */
.sec.blue + .sec { border-top: 0; }
.statement { max-width: 1240px; margin: 32px 0 110px; font-family: var(--head); font-weight: 700; font-size: clamp(34px, 5vw, 76px); line-height: 1.06; letter-spacing: -.04em; }
.statement .sw { color: #DCC5BE; transition: color .35s; }
.statement .sw.lit { color: var(--ink); }
.about-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 56px; align-items: start; }
.card { margin: 0; border: 1px solid var(--rule); background: var(--white); }
.card .ph { aspect-ratio: 4/5; }
.profile-photo > img { display: block; width: 100%; height: auto; }
.card figcaption { padding: 14px 16px; font-size: 13px; color: var(--ink-2); }
.prose { max-width: 700px; font-size: 17px; color: var(--ink-2); }
.prose p { margin: 0 0 18px; }
.work-view .prose strong { background: linear-gradient(transparent 58%, var(--lime) 58%); }
.prose .btns { margin-top: 32px; }

/* ---------- beyond work: a pile of photos you can drag around ---------- */
.pile { position: relative; height: 580px; }
.polaroid { position: absolute; left: var(--x); top: var(--y); width: clamp(190px, 19vw, 280px); margin: 0; padding: 12px 12px 0; background: var(--white); box-shadow: 0 1px 2px rgba(20, 22, 28, .08), 0 18px 40px -18px rgba(20, 22, 28, .35); translate: var(--dx, 0px) var(--dy, 0px); rotate: var(--r); scale: 1; user-select: none; -webkit-user-select: none; touch-action: none; transition: rotate .5s var(--ease), scale .4s var(--ease), box-shadow .3s; }
.polaroid.wide { width: clamp(280px, 31vw, 440px); }
.polaroid img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; pointer-events: none; }
.polaroid.wide img { aspect-ratio: 4/3; }
.polaroid figcaption { padding: 12px 2px 16px; font-size: 13px; color: var(--ink-2); }
.polaroid:hover { rotate: 0deg; scale: 1.03; box-shadow: 0 1px 2px rgba(20, 22, 28, .08), 0 30px 60px -24px rgba(20, 22, 28, .45); }
.polaroid.dragging { rotate: var(--tilt, 0deg); scale: 1.06; transition: rotate .15s, scale .3s var(--ease), box-shadow .3s; box-shadow: 0 1px 2px rgba(20, 22, 28, .08), 0 40px 70px -24px rgba(20, 22, 28, .5); }

/* ---------- contact modal: ink, with a cobalt button that turns lime ---------- */
.contact-dialog { width: min(980px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; background: var(--ink); color: var(--paper); overflow: auto; overscroll-behavior: contain; }
.contact-dialog::backdrop { background: rgba(20, 22, 28, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.contact-dialog[open] { animation: cd-in .3s ease; }
.contact-dialog .cd-close { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .2); }
.contact-dialog .cd-close:hover { border-color: var(--lime); color: var(--lime); }
.contact-body { padding: 56px 56px 64px; }
.contact-dialog .sec-num { color: var(--lime); }
.finale-title { max-width: 760px; margin: 20px 0 48px; font-family: var(--head); font-weight: 700; font-size: clamp(40px, 6vw, 84px); line-height: .95; letter-spacing: -.05em; }
.finale-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 80px; }
.orb { position: relative; isolation: isolate; overflow: hidden; flex: none; display: grid; place-items: center; width: 220px; height: 220px; border-radius: 50%; background: var(--cobalt); color: var(--white); text-align: center; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; transition: color .3s; }
.orb::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--lime); transform: scale(0); transition: transform .55s var(--ease); }
.orb:hover { color: var(--ink); }
.orb:hover::before { transform: scale(1); }
.tg-icon { width: 84px; height: 84px; margin: 0 6px 0 -6px; transition: transform .55s var(--ease); }
.orb:hover .tg-icon { transform: translate(4px, -4px) rotate(-8deg); }
.orb-text { display: none; }
.contact-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 300px; max-width: 560px; }
.contact-list li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 16px; color: #C4C8D0; }
.contact-list li:first-child { border-top: 1px solid rgba(255, 255, 255, .12); }
.contact-list b { flex: none; width: 100px; padding-top: 3px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8A8F99; }
.contact-list a { transition: color .2s; }
.contact-list a:hover { color: var(--lime); }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .numbers { grid-template-columns: 1fr 1fr; }
  .num:nth-child(2) { border-right: 0; }
  .num:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .proc { grid-template-columns: 1fr; gap: 56px; }
  .proc-side { position: static; }
  .proc-big { display: none; }
  .svc-row { grid-template-columns: 48px minmax(0, 1fr) 32px; }
  .svc-d { grid-column: 2; grid-row: 2; }
  .svc-go { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 110px 20px 56px; }
  .hero-demo { padding: 56px 20px 64px; }
  .demo-stage { height: 320px; }
  .pic { height: 56px; }
  .adm-chart { height: 100px; }
  .demo-tab { letter-spacing: .06em; font-size: 10px; }
  .scroll-cue { display: none; }
  .marquee { padding: 22px 0; }
  .sec, .pin { padding: 96px 20px; }
  .sec-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .svc-row { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; padding: 26px 0; }
  .svc-go { display: none; }
  .numbers { grid-template-columns: 1fr; }
  .num { padding: 40px 20px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pin-head { margin-bottom: 40px; }
  .cases { gap: 24px; }
  .case-card { grid-template-columns: 1fr; min-height: 0; }
  .case-cover { aspect-ratio: 16/10; border-right: 0; border-bottom: 1px solid var(--rule); }
  .case-info { padding: 22px 20px 24px; }
  .case-info::before { padding-bottom: 14px; font-size: 40px; }
  .case-info h3 { margin-top: 8px; }
  .case-end { padding: 32px 24px; }
  .about-grid { grid-template-columns: 1fr; }
  .profile-photo { max-width: 320px; }
  .statement { margin-bottom: 64px; }
  /* on a phone the pile becomes a strip of photos to swipe through */
  .pile { height: auto; display: flex; align-items: flex-start; gap: 18px; margin: 0 -20px; padding: 16px 20px 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pile::-webkit-scrollbar { display: none; }
  .polaroid, .polaroid.wide { position: static; flex: none; width: 68vw; padding: 8px 8px 0; scroll-snap-align: center; touch-action: auto; translate: none; }
  .polaroid.wide { width: 84vw; }
  .polaroid figcaption { padding: 8px 2px 10px; font-size: 12px; }
  /* on a phone the contacts slide up as a bottom sheet with one wide Telegram button */
  .contact-dialog { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; }
  .contact-dialog[open] { animation: sheet-in .38s var(--ease); }
  .contact-body { position: relative; padding: 30px 20px calc(22px + env(safe-area-inset-bottom)); }
  .contact-body::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
  .contact-dialog .cd-close { position: absolute; float: none; top: 16px; right: 16px; margin: 0; }
  .finale-title { max-width: 86%; margin: 10px 0 24px; font-size: 34px; line-height: 1; letter-spacing: -.04em; }
  .finale-row { flex-direction: column; align-items: stretch; gap: 20px; }
  .orb { width: 100%; height: 58px; border-radius: 999px; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; }
  .orb::before { border-radius: 999px; }
  .orb:active::before { transform: scale(1); }
  .tg-icon { width: 22px; height: 22px; margin: 0; }
  .orb-text { display: inline; }
  .contact-list { min-width: 0; max-width: none; }
  .contact-list li { justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; font-size: 15px; }
  .contact-list li:first-child { border-top: 0; }
  .contact-list li:last-child { border-bottom: 0; }
  .contact-list b { width: auto; padding-top: 0; font-size: 10px; }
  .contact-list li > a, .contact-list li > span { text-align: right; color: var(--paper); }
}
@keyframes sheet-in { from { transform: translateY(100%); } }

/* ---------- reduced motion: everything is simply there ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-name .ch, .hero-text > *, .hero-demo, .scene *, .demo-tab i { animation: none !important; transform: none !important; clip-path: none !important; opacity: 1 !important; }
  .split-words .wi { transform: none; transition: none; }
  .scroll-cue i::after, .live i { animation: none; }
  .tap { display: none; }
  .odo-strip { transition: none; }
  .statement .sw { color: var(--ink); }
  .step { opacity: 1; }
  .step::before { background: var(--lime); border-color: var(--lime); }
  .steps-line i { transform: none; }
  .svc-row::before, .svc-t, .polaroid { transition: none; }
}