/* Biancamano Ventures | inner pages */
@font-face { font-family: "Fjalla One"; src: url("../fonts/fjalla-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --line: #e7e7e7;
  --mute: #6e6e6e;
  --soft: #f4f4f4;
  --rail: 240px;
  --pad: clamp(20px, 4vw, 64px);
  --display: "Fjalla One", Impact, "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

/* faint six column grid, same as the home page */
.grid-lines { position: fixed; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; z-index: 0; }
.grid-lines span { border-right: 1px solid #f1f1f1; }
.grid-lines span:last-child { border-right: 0; }

/* ---------- rail ---------- */
.rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); padding: 28px 0 32px; display: flex; flex-direction: column; justify-content: space-between; z-index: 20; background: var(--paper); border-right: 1px solid var(--line); }
.rail-logo { display: block; width: 168px; margin-left: 32px; }
.rail-nav { display: flex; flex-direction: column; gap: 14px; }
.rail-nav a { display: flex; align-items: center; gap: 18px; text-decoration: none; font-family: var(--display); font-size: 17px; letter-spacing: .22em; text-transform: uppercase; color: #b9b9b9; transition: color .25s; }
.rail-nav a::before { content: ""; width: 60px; height: 1px; background: #d9d9d9; transition: width .35s, background .25s; }
.rail-nav a:hover, .rail-nav a[aria-current="page"] { color: var(--ink); }
.rail-nav a:hover::before, .rail-nav a[aria-current="page"]::before { width: 84px; background: var(--ink); }
.rail-foot { margin-left: 40px; font-size: 13px; color: var(--mute); line-height: 1.6; }
.rail-foot a { text-decoration: none; border-bottom: 1px solid #ccc; }

/* mobile bar */
.topbar { display: none; }
.menu-btn { background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; width: 26px; height: 3px; background: var(--ink); margin: 5px 0; transition: transform .3s, opacity .3s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.sheet { display: none; }

/* ---------- main ---------- */
main { position: relative; z-index: 1; margin-left: var(--rail); }
.wrap { padding: 0 var(--pad); max-width: 1480px; }

.page-head { padding: clamp(80px, 12vh, 150px) 0 clamp(40px, 6vh, 72px); border-bottom: 1px solid var(--line); }
.eyebrow { font-family: var(--display); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); margin: 0 0 18px; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; margin: 0; font-size: clamp(72px, 13vw, 210px); }
.lede { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; font-weight: 500; max-width: 760px; margin: 28px 0 0; }

.section { padding: clamp(56px, 9vh, 110px) 0; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: 0; }
.section-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4vw, 56px); line-height: 1; margin: 0 0 36px; }
.h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; margin: 0; }
p { margin: 0 0 16px; }
.muted { color: var(--mute); }

/* buttons: same black block as the home buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 62px; padding: 0 30px; font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--ink); background: var(--soft); border: 0; cursor: pointer; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .35s cubic-bezier(.7,0,.3,1); z-index: -1; }
.btn:hover { color: var(--paper); }
.btn:hover::after { transform: translateY(0); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.dark::after { background: #333; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* status tag */
.tag { display: inline-block; font-family: var(--display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; line-height: 1; }
.tag.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- products ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ink); color: var(--paper); }
.feature-media { display: flex; align-items: center; justify-content: center; padding: clamp(40px, 6vw, 90px); border-right: 1px solid #222; min-height: 460px; }
.feature-media img { width: min(320px, 70%); border-radius: 22%; box-shadow: 0 30px 80px rgba(255,255,255,.08); }
.feature-copy { padding: clamp(36px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.feature-copy .display { font-size: clamp(64px, 8vw, 128px); }
.feature-copy .tag { align-self: flex-start; margin-bottom: 26px; }
.feature-copy p { color: #cfcfcf; font-size: 20px; max-width: 520px; margin-top: 22px; }
.feature .btn { background: var(--paper); color: var(--ink); }
.feature .btn::after { background: #d9d9d9; }
.feature .btn:hover { color: var(--ink); }
.feature .btn.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px #555; }
.feature .btn.ghost::after { background: var(--paper); }
.feature .btn.ghost:hover { color: var(--ink); }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fact { padding: 36px 32px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact .num { font-family: var(--display); font-size: 64px; line-height: 1; margin-bottom: 12px; }
.fact p { margin: 0; color: var(--mute); }

/* ---------- brands ---------- */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.app { position: relative; display: flex; flex-direction: column; padding: 36px 32px 34px; min-height: 380px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--paper); transition: background .35s, color .35s; }
.app img { width: 104px; height: 104px; border-radius: 23%; margin-bottom: 30px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.app .tag { position: absolute; top: 36px; right: 32px; }
.app p { margin: 12px 0 0; color: var(--mute); transition: color .35s; }
.app .go { margin-top: auto; padding-top: 28px; font-family: var(--display); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.app .go::after { content: ""; width: 34px; height: 1px; background: currentColor; transition: width .35s; }
a.app:hover { background: var(--ink); color: var(--paper); }
a.app:hover p { color: #bdbdbd; }
a.app:hover img { transform: scale(1.06) rotate(-2deg); }
a.app:hover .go::after { width: 70px; }
a.app:hover .tag.solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.app.soon .go { color: #b0b0b0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

/* ---------- work ---------- */
.services { border-top: 1px solid var(--ink); }
.service { display: grid; grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 34px 20px; border-bottom: 1px solid var(--line); transition: background .35s, color .35s; }
.service .n { font-family: var(--display); font-size: 18px; letter-spacing: .15em; color: var(--mute); transition: color .35s; }
.service .h3 { font-size: clamp(34px, 4vw, 62px); }
.service p { margin: 0; color: var(--mute); transition: color .35s; }
.service:hover { background: var(--ink); color: var(--paper); }
.service:hover .n, .service:hover p { color: #bdbdbd; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line); }
.step { padding: 8px 28px 20px; border-right: 1px solid var(--line); }
.step .num { font-family: var(--display); font-size: 80px; line-height: 1; color: #e2e2e2; }
.step .h3 { margin: 10px 0 10px; }
.step p { color: var(--mute); margin: 0; }

/* ---------- about ---------- */
.statement { font-family: var(--display); text-transform: uppercase; font-size: clamp(38px, 5vw, 78px); line-height: 1.02; margin: 0; max-width: 1150px; }
.founder { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.founder img { width: 100%; border: 1px solid var(--line); }
.founder .display { font-size: clamp(56px, 7vw, 110px); }
.list-plain { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.list-plain li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 26px; text-transform: uppercase; }
.list-plain li span:last-child { font-family: var(--body); font-size: 15px; text-transform: none; color: var(--mute); align-self: center; }

/* ---------- contact ---------- */
.contact { background: var(--ink); color: var(--paper); }
.contact .section-title { color: var(--paper); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.contact p { color: #bdbdbd; }
.contact a.mail { font-family: var(--display); font-size: clamp(20px, 1.9vw, 28px); white-space: nowrap; text-decoration: none; color: var(--paper); border-bottom: 2px solid #444; transition: border-color .25s; word-break: break-word; }
.contact a.mail:hover { border-color: var(--paper); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #9a9a9a; }
.form .full { grid-column: 1 / -1; }
.form input, .form textarea, .form select { font: 500 18px var(--body); color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid #444; padding: 10px 0; border-radius: 0; outline: none; transition: border-color .25s; }
.form select option { color: var(--ink); }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--paper); }
.form .btn { background: var(--paper); color: var(--ink); justify-self: start; }
.form .btn::after { background: #d9d9d9; }
.form .btn:hover { color: var(--ink); }
.hp { position: absolute; left: -9999px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #9a9a9a; border-top: 1px solid #222; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 34px; padding-bottom: 34px; }
.foot img { width: 170px; }
.foot nav { display: flex; gap: 26px; flex-wrap: wrap; }
.foot nav a { font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: 14px; color: var(--paper); text-decoration: none; }
.foot nav a:hover { color: #9a9a9a; }
.foot small { font-size: 13px; }

/* ---------- page transition (matches the home page bars) ---------- */
.wipe { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.wipe span { background: var(--ink); transform: translateY(0); transition: transform .55s cubic-bezier(.7,0,.25,1); }
.wipe span:nth-child(2) { transition-delay: .05s; }
.wipe span:nth-child(3) { transition-delay: .1s; }
.wipe span:nth-child(4) { transition-delay: .15s; }
.wipe span:nth-child(5) { transition-delay: .2s; }
.wipe span:nth-child(6) { transition-delay: .25s; }
.wipe .mark { position: absolute; left: 50%; top: 50%; width: min(420px, 60vw); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0; transition: opacity .3s; }
.wipe .mark img { width: 50%; }
.is-in .wipe span:nth-child(odd) { transform: translateY(-101%); }
.is-in .wipe span:nth-child(even) { transform: translateY(101%); }
.is-in .wipe .mark { opacity: 0; }
.is-out .wipe span { transform: translateY(0) !important; }
.is-out .wipe .mark { opacity: 1; transition-delay: .25s; }
.no-js .wipe, .wipe-done .wipe { visibility: hidden; }

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.on { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wipe { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .apps { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps .step { border-bottom: 1px solid var(--line); padding-top: 20px; }
}
@media (max-width: 900px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .topbar img { width: 132px; }
  .sheet { display: flex; position: fixed; inset: 0; z-index: 25; background: var(--paper); flex-direction: column; justify-content: center; padding: 90px 28px 40px; transform: translateY(-100%); transition: transform .5s cubic-bezier(.7,0,.25,1); }
  .menu-open .sheet { transform: none; }
  .sheet a { font-family: var(--display); font-size: 16vw; line-height: .95; text-transform: uppercase; text-decoration: none; color: var(--ink); }
  .sheet a[aria-current="page"] { color: #bdbdbd; }
  .menu-open { overflow: hidden; }
  .grid-lines { grid-template-columns: repeat(3, 1fr); }
  .feature, .split, .contact-grid, .founder { grid-template-columns: 1fr; }
  .feature-media { border-right: 0; border-bottom: 1px solid #222; min-height: 320px; }
  .facts { grid-template-columns: 1fr; }
  .service { grid-template-columns: 50px 1fr; }
  .service p { grid-column: 2; }
  .founder img { max-width: 220px; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .apps, .steps { grid-template-columns: 1fr; }
  .app { min-height: 0; }
  .form { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .service { padding: 26px 4px; }
  .list-plain li { font-size: 22px; }
}

/* ---------- home ---------- */
.home main { margin-left: 0; }
.home .rail { display: none; }
.home .topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 30; align-items: center; justify-content: space-between; padding: 22px var(--pad); background: transparent; border: 0; }
.home .topbar img { width: 150px; }
.home .sheet { display: flex; position: fixed; inset: 0; z-index: 25; background: var(--ink); flex-direction: column; justify-content: center; padding: 100px var(--pad) 40px; transform: translateY(-100%); transition: transform .55s cubic-bezier(.7,0,.25,1); }
.home .sheet a { font-family: var(--display); font-size: clamp(64px, 11vw, 150px); line-height: .92; text-transform: uppercase; text-decoration: none; color: var(--paper); }
.home .sheet a:hover { color: #777; }
.home.menu-open .sheet { transform: none; }
.home.menu-open .topbar img { filter: invert(1); }
.home.menu-open .menu-btn span { background: var(--paper); }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 150px var(--pad) 60px; }
.hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.kicker { font-family: var(--display); text-transform: uppercase; font-size: 15px; letter-spacing: .3em; line-height: 1.5; color: var(--mute); margin: 0 0 26px; }
.stack { display: flex; flex-direction: column; }
.word { display: block; overflow: hidden; padding-top: .1em; margin-top: -.1em; text-decoration: none; color: var(--ink); font-family: var(--display); text-transform: uppercase; font-size: clamp(76px, 12.5vw, 196px); line-height: .96; }
.word span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.8,.2,1), color .3s, letter-spacing .4s; transition-delay: calc(.35s + var(--i) * .09s), 0s, 0s; }
.is-in .word span { transform: none; }
.stack:hover .word span { color: #d4d4d4; }
.stack .word:hover span, .stack .word:focus-visible span { color: var(--ink); letter-spacing: .02em; }
.word:focus-visible { outline: none; }
.hero-right { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding-bottom: 12px; }
.say { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.2; font-weight: 500; max-width: 520px; margin: auto 0 0; transition: opacity .25s; }
.say em { font-style: normal; background: var(--ink); color: var(--paper); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.say.swap { opacity: 0; }
.scroll-cue { margin-top: 40px; align-self: flex-start; font-family: var(--display); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 14px; }
.scroll-cue::after { content: ""; width: 60px; height: 1px; background: var(--ink); animation: cue 2.2s ease-in-out infinite; transform-origin: left; }
@keyframes cue { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }

.strip { background: var(--ink); color: var(--paper); padding: 60px 0 70px; }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
.strip .more { font-family: var(--display); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); text-decoration: none; border-bottom: 1px solid #555; }
.strip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-left: 1px solid #222; }
.strip-app { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 22px 18px; border-right: 1px solid #222; text-decoration: none; color: var(--paper); transition: background .3s; }
.strip-app img { width: 72px; height: 72px; border-radius: 23%; margin-bottom: 14px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.strip-app span { font-family: var(--display); text-transform: uppercase; font-size: 20px; line-height: 1.05; }
.strip-app small { font-size: 13px; color: #8a8a8a; }
a.strip-app:hover { background: #141414; }
a.strip-app:hover img { transform: translateY(-6px); }
.btn.ghost-dark { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px #555; }
.btn.ghost-dark::after { background: var(--paper); }
.btn.ghost-dark:hover { color: var(--ink); }
.contact .display { color: var(--paper); }

@media (max-width: 1100px) { .strip-row { grid-template-columns: repeat(3, 1fr); } .strip-app { border-bottom: 1px solid #222; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-right { padding-bottom: 0; }
  .say { margin-top: 36px; }
  .home .topbar img { width: 118px; }
}
@media (max-width: 620px) { .strip-row { grid-template-columns: repeat(2, 1fr); } .word { font-size: 22vw; } }

/* ---------- app pages ---------- */
.app-hero { padding: clamp(80px, 12vh, 150px) 0 clamp(40px, 6vh, 70px); border-bottom: 1px solid var(--line); }
.app-hero-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.app-hero-icon img { width: 180px; height: 180px; border-radius: 23%; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.app-hero-copy .tag { display: inline-block; margin-bottom: 18px; }
.app-hero-copy .display { font-size: clamp(60px, 9vw, 150px); }
.app-hero-copy .lede { max-width: 700px; }

.shots-band { background: var(--ink); padding: clamp(40px, 6vh, 70px) 0; }
.shots-rail { display: flex; gap: 22px; overflow-x: auto; padding: 0 var(--pad) 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shots-rail::-webkit-scrollbar { height: 6px; }
.shots-rail::-webkit-scrollbar-thumb { background: #333; }
.shot { margin: 0; flex: 0 0 auto; scroll-snap-align: center; }
.shot img { width: 300px; height: auto; border-radius: 34px; border: 1px solid #2a2a2a; background: #111; display: block; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.photo { margin: 0; overflow: hidden; }
.photo img { width: 100%; height: 300px; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.photo:hover img { transform: scale(1.05); }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fbox { padding: 30px 28px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fbox .n { font-family: var(--display); font-size: 14px; letter-spacing: .2em; color: var(--mute); display: block; margin-bottom: 14px; }
.fbox p { margin: 10px 0 0; color: var(--mute); }

.app-nav { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 28px; }
.app-nav-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.app-nav-link.right { text-align: right; }
.app-nav-link .eyebrow { margin: 0; }
.app-nav-link:hover .h3 { color: var(--mute); }

@media (max-width: 900px) {
  .app-hero-grid { grid-template-columns: 1fr; }
  .app-hero-icon img { width: 120px; height: 120px; }
  .fgrid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .shot img { width: 240px; }
}
@media (max-width: 620px) {
  .photo-grid { grid-template-columns: 1fr; }
  .photo img { height: 240px; }
}

/* ================= reversed: white on black ================= */
:root {
  --ink: #FFFFFF;
  --paper: #0B0B0B;
  --line: #242424;
  --mute: #9C9C9C;
  --soft: #191919;
}
.grid-lines span { border-right-color: #161616; }
.rail, .topbar { background: var(--paper); border-color: var(--line); }
.rail-nav a { color: #5f5f5f; }
.rail-nav a::before { background: #3a3a3a; }
.rail-nav a:hover, .rail-nav a[aria-current="page"] { color: var(--ink); }
.rail-nav a:hover::before, .rail-nav a[aria-current="page"]::before { background: var(--ink); }
.rail-foot a { border-bottom-color: #444; }
.menu-btn span { background: var(--ink); }

/* buttons invert: white fill slides in, text goes black */
.btn { background: var(--soft); color: var(--ink); }
.btn::after { background: var(--ink); }
.btn:hover { color: #000; }
.btn.dark { background: var(--ink); color: #000; }
.btn.dark::after { background: #c9c9c9; }
.btn.dark:hover { color: #000; }
.tag.solid { background: var(--ink); color: #000; border-color: var(--ink); }

/* blocks that used to be black are now white */
.feature, .contact, .strip, .shots-band, .foot {
  background: #FFFFFF; color: #000;
}
.feature-media { border-right-color: #e2e2e2; }
.feature-media img { box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.feature-copy p, .contact p, .strip-app small { color: #4e4e4e; }
.feature .btn, .contact .form .btn { background: #000; color: #fff; }
.feature .btn::after, .contact .form .btn::after { background: #333; }
.feature .btn:hover, .contact .form .btn:hover { color: #fff; }
.feature .btn.ghost { color: #000; box-shadow: inset 0 0 0 1px #bbb; }
.feature .btn.ghost::after { background: #000; }
.feature .btn.ghost:hover { color: #fff; }
.contact .section-title, .contact .display { color: #000; }
.contact a.mail { color: #000; border-bottom-color: #bbb; }
.contact a.mail:hover { border-bottom-color: #000; }
.contact .eyebrow { color: #6e6e6e !important; }
.form label { color: #6e6e6e; }
.form input, .form textarea, .form select { color: #000; border-bottom-color: #c9c9c9; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: #000; }
.contact .list-plain, .contact .list-plain li { border-color: #ddd !important; }
.contact .list-plain li span:last-child { color: #6e6e6e !important; }
.btn.ghost-dark { color: #000; box-shadow: inset 0 0 0 1px #bbb; }
.btn.ghost-dark::after { background: #000; }
.btn.ghost-dark:hover { color: #fff; }
.strip .more { color: #000; border-bottom-color: #bbb; }
.strip .eyebrow { color: #6e6e6e !important; }
.strip-row { border-left-color: #e4e4e4; }
.strip-app { color: #000; border-right-color: #e4e4e4; }
a.strip-app:hover { background: #f2f2f2; }
.shots-rail::-webkit-scrollbar-thumb { background: #ccc; }
.shot img { border-color: #e0e0e0; background: #fff; }
.foot { border-top-color: #e4e4e4; color: #6e6e6e; }
.foot nav a { color: #000; }
.foot nav a:hover { color: #6e6e6e; }

/* app cards and service rows invert on hover */
.app { background: var(--paper); color: var(--ink); }
a.app:hover { background: #fff; color: #000; }
a.app:hover p { color: #555; }
a.app:hover .tag.solid { background: #000; color: #fff; border-color: #000; }
.service:hover { background: #fff; color: #000; }
.service:hover .n, .service:hover p { color: #555; }
.step .num { color: #2a2a2a; }
.founder img { border-color: var(--line); }
.home .sheet { background: #fff; }
.home .sheet a { color: #000; }
.home .sheet a:hover { color: #777; }
.home.menu-open .topbar img { filter: none; }
.home.menu-open .menu-btn span { background: #000; }
::selection { background: #fff; color: #000; }

/* wipe bars go white with the black mark */
.wipe span { background: #FFFFFF; }

/* type a little smaller */
.display { font-size: clamp(60px, 10vw, 148px); }
.page-head .display { font-size: clamp(56px, 9vw, 132px); }
.app-hero-copy .display { font-size: clamp(48px, 7vw, 108px); }
.feature-copy .display { font-size: clamp(52px, 6.5vw, 104px); }
.statement { font-size: clamp(30px, 3.6vw, 56px); }
.section-title { font-size: clamp(30px, 3.4vw, 46px); }
.service .h3 { font-size: clamp(28px, 3.2vw, 48px); }
.lede { font-size: clamp(19px, 1.7vw, 24px); }
.list-plain li { font-size: 22px; }

/* hovering the stacked words clears the right hand column */
.say { transition: opacity .3s ease; }
.say.swap { opacity: 0; }
.hero-right:has(.say.swap) .scroll-cue { opacity: 0; transition: opacity .3s ease; }

/* home is a single screen, nothing below it */
.home, .home body { height: 100%; }
.home main { min-height: 100vh; min-height: 100svh; }
.home .hero { min-height: 100vh; min-height: 100svh; }
body.home { overflow: hidden; }
@media (max-width: 900px) { body.home { overflow: auto; } }

/* home: just the words */
.home .hero-grid { grid-template-columns: 1fr; }

/* ================= all black ================= */
.feature, .contact, .strip, .shots-band, .foot {
  background: var(--paper); color: var(--ink);
}
.feature { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-media { border-right-color: var(--line); }
.feature-media img { box-shadow: 0 30px 80px rgba(255,255,255,.06); }
.feature-copy p, .contact p, .strip-app small { color: var(--mute); }
.feature .btn, .contact .form .btn { background: var(--ink); color: #000; }
.feature .btn::after, .contact .form .btn::after { background: #c9c9c9; }
.feature .btn:hover, .contact .form .btn:hover { color: #000; }
.feature .btn.ghost, .btn.ghost-dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #3a3a3a; }
.feature .btn.ghost::after, .btn.ghost-dark::after { background: var(--ink); }
.feature .btn.ghost:hover, .btn.ghost-dark:hover { color: #000; }
.contact { border-top: 1px solid var(--line); }
.contact .section-title, .contact .display { color: var(--ink); }
.contact .eyebrow, .strip .eyebrow, .form label { color: var(--mute) !important; }
.form input, .form textarea, .form select { color: var(--ink); border-bottom-color: #3a3a3a; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--ink); }
.form select option { color: #000; }
.contact .list-plain, .contact .list-plain li { border-color: var(--line) !important; }
.contact .list-plain li span:last-child { color: var(--mute) !important; }
.strip { border-top: 1px solid var(--line); }
.strip .more { color: var(--ink); border-bottom-color: #3a3a3a; }
.strip-row { border-left-color: var(--line); }
.strip-app { color: var(--ink); border-right-color: var(--line); }
a.strip-app:hover { background: #141414; }
.shots-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shots-rail::-webkit-scrollbar-thumb { background: #333; }
.shot img { border-color: #2a2a2a; background: #111; }
.foot { border-top: 1px solid var(--line); color: var(--mute); }
.foot nav a { color: var(--ink); }
.foot nav a:hover { color: var(--mute); }
.foot img { filter: invert(1); }

/* ================= screenshots in an iPhone frame ================= */
.shots-rail { gap: 34px; padding-top: 18px; padding-bottom: 26px; }
.shot {
  position: relative;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(155deg, #3a3a3a 0%, #151515 42%, #2b2b2b 100%);
  box-shadow: 0 28px 60px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08);
}
.shot img { width: 288px; height: auto; border: 0; border-radius: 36px; background: #000; }
/* side buttons */
.shot::before, .shot::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #3b3b3b;
}
.shot::before { left: -3px; top: 120px; height: 54px; box-shadow: 0 78px 0 #3b3b3b, 0 -96px 0 #3b3b3b; }
.shot::after { right: -3px; top: 150px; height: 84px; }
@media (max-width: 900px) { .shot img { width: 240px; } .shot { border-radius: 40px; } }

/* ================= footer legal dropdowns ================= */
.foot .wrap { align-items: center; }
.legal { display: flex; gap: 22px; }
.drop { position: relative; }
.drop summary {
  list-style: none; cursor: pointer; user-select: none;
  font-family: var(--display); font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mute); display: flex; align-items: center; gap: 8px;
}
.drop summary::-webkit-details-marker { display: none; }
.drop summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.drop[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.drop summary:hover { color: var(--ink); }
.drop-menu {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 40;
  min-width: 220px; display: flex; flex-direction: column;
  background: #101010; border: 1px solid var(--line); padding: 6px 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.drop-menu a {
  padding: 9px 16px; text-decoration: none; color: var(--mute);
  font-family: var(--body); font-size: 15px; letter-spacing: 0; text-transform: none;
}
.drop-menu a:hover { background: var(--ink); color: #000; }
@media (max-width: 900px) {
  .legal { width: 100%; }
  .drop-menu { bottom: auto; top: calc(100% + 8px); }
}

/* ---------------------------------------------------------------- app video
   A clip runs inside the same iPhone frame as the screenshots. Muted, looping,
   no chrome. It only plays while it is on screen. */
.shot video {
  width: 288px; display: block; border: 0; border-radius: 36px;
  background: #000; object-fit: cover;
  /* match the screenshot tiles exactly so the rail stays level */
  aspect-ratio: 1320 / 2868; height: auto;
}
.shot.is-video { position: relative; }
.shot.is-video .live-dot {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .4s ease;
}
.shot.is-video.is-playing .live-dot { opacity: 1; animation: live 2.4s ease-in-out infinite; }
@keyframes live { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@media (max-width: 900px) { .shot video { width: 240px; } }
@media (prefers-reduced-motion: reduce) {
  .shot.is-video.is-playing .live-dot { animation: none; }
}

/* the after-hours line sits inside the statement, one shade back */
.statement em { font-style: normal; color: var(--mute); display: block; }

/* ------------------------------------------------- app hero background film
   The loop gets its own lane on the right of the hero, bleeding off the edge.
   It never runs under the headline, so nothing has to be dimmed into mush. */
.app-hero.has-bg { position: relative; overflow: hidden; }
.app-hero.has-bg .app-hero-grid {
  grid-template-columns: 160px minmax(0, 1fr) clamp(250px, 25%, 420px);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.app-hero.has-bg .app-hero-copy .display { font-size: clamp(46px, 6vw, 100px); }
.app-hero.has-bg .app-hero-icon img { width: 160px; height: 160px; }
.app-hero-bg {
  position: relative; align-self: stretch; min-height: 340px;
  margin-right: calc(-1 * var(--pad));
  pointer-events: none;
}
/* The film is masked, not boxed: its own edges dissolve into the page, so
   there is no rectangle anywhere, only motion appearing out of the black. */
.app-hero-bg video {
  position: absolute;
  top: -26%; bottom: -26%; left: -6%; right: -9vw;
  width: auto; height: auto; object-fit: cover; object-position: 55% 50%;
  display: block; filter: saturate(.92) contrast(1.02);
  -webkit-mask-image: radial-gradient(92% 74% at 70% 50%,
      #000 0%, #000 18%, rgba(0,0,0,.82) 40%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.10) 74%, transparent 86%);
          mask-image: radial-gradient(92% 74% at 70% 50%,
      #000 0%, #000 18%, rgba(0,0,0,.82) 40%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.10) 74%, transparent 86%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* a last whisper of shade on the type side, nothing with an edge */
.app-hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(0,0,0,.38) 14%, rgba(0,0,0,0) 40%);
}
@media (max-width: 1100px) {
  .apps { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps .step { border-bottom: 1px solid var(--line); padding-top: 20px; }
}
@media (max-width: 900px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .topbar img { width: 132px; }
  .sheet { display: flex; position: fixed; inset: 0; z-index: 25; background: var(--paper); flex-direction: column; justify-content: center; padding: 90px 28px 40px; transform: translateY(-100%); transition: transform .5s cubic-bezier(.7,0,.25,1); }
  .menu-open .sheet { transform: none; }
  .sheet a { font-family: var(--display); font-size: 16vw; line-height: .95; text-transform: uppercase; text-decoration: none; color: var(--ink); }
  .sheet a[aria-current="page"] { color: #bdbdbd; }
  .menu-open { overflow: hidden; }
  .grid-lines { grid-template-columns: repeat(3, 1fr); }
  .feature, .split, .contact-grid, .founder { grid-template-columns: 1fr; }
  .feature-media { border-right: 0; border-bottom: 1px solid #222; min-height: 320px; }
  .facts { grid-template-columns: 1fr; }
  .service { grid-template-columns: 50px 1fr; }
  .service p { grid-column: 2; }
  .founder img { max-width: 220px; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .apps, .steps { grid-template-columns: 1fr; }
  .app { min-height: 0; }
  .form { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .service { padding: 26px 4px; }
  .list-plain li { font-size: 22px; }
}

/* ---------- home ---------- */
.home main { margin-left: 0; }
.home .rail { display: none; }
.home .topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 30; align-items: center; justify-content: space-between; padding: 22px var(--pad); background: transparent; border: 0; }
.home .topbar img { width: 150px; }
.home .sheet { display: flex; position: fixed; inset: 0; z-index: 25; background: var(--ink); flex-direction: column; justify-content: center; padding: 100px var(--pad) 40px; transform: translateY(-100%); transition: transform .55s cubic-bezier(.7,0,.25,1); }
.home .sheet a { font-family: var(--display); font-size: clamp(64px, 11vw, 150px); line-height: .92; text-transform: uppercase; text-decoration: none; color: var(--paper); }
.home .sheet a:hover { color: #777; }
.home.menu-open .sheet { transform: none; }
.home.menu-open .topbar img { filter: invert(1); }
.home.menu-open .menu-btn span { background: var(--paper); }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 150px var(--pad) 60px; }
.hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.kicker { font-family: var(--display); text-transform: uppercase; font-size: 15px; letter-spacing: .3em; line-height: 1.5; color: var(--mute); margin: 0 0 26px; }
.stack { display: flex; flex-direction: column; }
.word { display: block; overflow: hidden; padding-top: .1em; margin-top: -.1em; text-decoration: none; color: var(--ink); font-family: var(--display); text-transform: uppercase; font-size: clamp(76px, 12.5vw, 196px); line-height: .96; }
.word span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.8,.2,1), color .3s, letter-spacing .4s; transition-delay: calc(.35s + var(--i) * .09s), 0s, 0s; }
.is-in .word span { transform: none; }
.stack:hover .word span { color: #d4d4d4; }
.stack .word:hover span, .stack .word:focus-visible span { color: var(--ink); letter-spacing: .02em; }
.word:focus-visible { outline: none; }
.hero-right { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding-bottom: 12px; }
.say { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.2; font-weight: 500; max-width: 520px; margin: auto 0 0; transition: opacity .25s; }
.say em { font-style: normal; background: var(--ink); color: var(--paper); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.say.swap { opacity: 0; }
.scroll-cue { margin-top: 40px; align-self: flex-start; font-family: var(--display); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 14px; }
.scroll-cue::after { content: ""; width: 60px; height: 1px; background: var(--ink); animation: cue 2.2s ease-in-out infinite; transform-origin: left; }
@keyframes cue { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }

.strip { background: var(--ink); color: var(--paper); padding: 60px 0 70px; }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
.strip .more { font-family: var(--display); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); text-decoration: none; border-bottom: 1px solid #555; }
.strip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-left: 1px solid #222; }
.strip-app { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 22px 18px; border-right: 1px solid #222; text-decoration: none; color: var(--paper); transition: background .3s; }
.strip-app img { width: 72px; height: 72px; border-radius: 23%; margin-bottom: 14px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.strip-app span { font-family: var(--display); text-transform: uppercase; font-size: 20px; line-height: 1.05; }
.strip-app small { font-size: 13px; color: #8a8a8a; }
a.strip-app:hover { background: #141414; }
a.strip-app:hover img { transform: translateY(-6px); }
.btn.ghost-dark { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px #555; }
.btn.ghost-dark::after { background: var(--paper); }
.btn.ghost-dark:hover { color: var(--ink); }
.contact .display { color: var(--paper); }

@media (max-width: 1100px) { .strip-row { grid-template-columns: repeat(3, 1fr); } .strip-app { border-bottom: 1px solid #222; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-right { padding-bottom: 0; }
  .say { margin-top: 36px; }
  .home .topbar img { width: 118px; }
}
@media (max-width: 620px) { .strip-row { grid-template-columns: repeat(2, 1fr); } .word { font-size: 22vw; } }

/* ---------- app pages ---------- */
.app-hero { padding: clamp(80px, 12vh, 150px) 0 clamp(40px, 6vh, 70px); border-bottom: 1px solid var(--line); }
.app-hero-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.app-hero-icon img { width: 180px; height: 180px; border-radius: 23%; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.app-hero-copy .tag { display: inline-block; margin-bottom: 18px; }
.app-hero-copy .display { font-size: clamp(60px, 9vw, 150px); }
.app-hero-copy .lede { max-width: 700px; }

.shots-band { background: var(--ink); padding: clamp(40px, 6vh, 70px) 0; }
.shots-rail { display: flex; gap: 22px; overflow-x: auto; padding: 0 var(--pad) 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shots-rail::-webkit-scrollbar { height: 6px; }
.shots-rail::-webkit-scrollbar-thumb { background: #333; }
.shot { margin: 0; flex: 0 0 auto; scroll-snap-align: center; }
.shot img { width: 300px; height: auto; border-radius: 34px; border: 1px solid #2a2a2a; background: #111; display: block; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.photo { margin: 0; overflow: hidden; }
.photo img { width: 100%; height: 300px; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.photo:hover img { transform: scale(1.05); }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fbox { padding: 30px 28px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fbox .n { font-family: var(--display); font-size: 14px; letter-spacing: .2em; color: var(--mute); display: block; margin-bottom: 14px; }
.fbox p { margin: 10px 0 0; color: var(--mute); }

.app-nav { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 28px; }
.app-nav-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.app-nav-link.right { text-align: right; }
.app-nav-link .eyebrow { margin: 0; }
.app-nav-link:hover .h3 { color: var(--mute); }

@media (max-width: 900px) {
  .app-hero-grid { grid-template-columns: 1fr; }
  .app-hero-icon img { width: 120px; height: 120px; }
  .fgrid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .shot img { width: 240px; }
}
@media (max-width: 620px) {
  .photo-grid { grid-template-columns: 1fr; }
  .photo img { height: 240px; }
}

/* ================= reversed: white on black ================= */
:root {
  --ink: #FFFFFF;
  --paper: #0B0B0B;
  --line: #242424;
  --mute: #9C9C9C;
  --soft: #191919;
}
.grid-lines span { border-right-color: #161616; }
.rail, .topbar { background: var(--paper); border-color: var(--line); }
.rail-nav a { color: #5f5f5f; }
.rail-nav a::before { background: #3a3a3a; }
.rail-nav a:hover, .rail-nav a[aria-current="page"] { color: var(--ink); }
.rail-nav a:hover::before, .rail-nav a[aria-current="page"]::before { background: var(--ink); }
.rail-foot a { border-bottom-color: #444; }
.menu-btn span { background: var(--ink); }

/* buttons invert: white fill slides in, text goes black */
.btn { background: var(--soft); color: var(--ink); }
.btn::after { background: var(--ink); }
.btn:hover { color: #000; }
.btn.dark { background: var(--ink); color: #000; }
.btn.dark::after { background: #c9c9c9; }
.btn.dark:hover { color: #000; }
.tag.solid { background: var(--ink); color: #000; border-color: var(--ink); }

/* blocks that used to be black are now white */
.feature, .contact, .strip, .shots-band, .foot {
  background: #FFFFFF; color: #000;
}
.feature-media { border-right-color: #e2e2e2; }
.feature-media img { box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.feature-copy p, .contact p, .strip-app small { color: #4e4e4e; }
.feature .btn, .contact .form .btn { background: #000; color: #fff; }
.feature .btn::after, .contact .form .btn::after { background: #333; }
.feature .btn:hover, .contact .form .btn:hover { color: #fff; }
.feature .btn.ghost { color: #000; box-shadow: inset 0 0 0 1px #bbb; }
.feature .btn.ghost::after { background: #000; }
.feature .btn.ghost:hover { color: #fff; }
.contact .section-title, .contact .display { color: #000; }
.contact a.mail { color: #000; border-bottom-color: #bbb; }
.contact a.mail:hover { border-bottom-color: #000; }
.contact .eyebrow { color: #6e6e6e !important; }
.form label { color: #6e6e6e; }
.form input, .form textarea, .form select { color: #000; border-bottom-color: #c9c9c9; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: #000; }
.contact .list-plain, .contact .list-plain li { border-color: #ddd !important; }
.contact .list-plain li span:last-child { color: #6e6e6e !important; }
.btn.ghost-dark { color: #000; box-shadow: inset 0 0 0 1px #bbb; }
.btn.ghost-dark::after { background: #000; }
.btn.ghost-dark:hover { color: #fff; }
.strip .more { color: #000; border-bottom-color: #bbb; }
.strip .eyebrow { color: #6e6e6e !important; }
.strip-row { border-left-color: #e4e4e4; }
.strip-app { color: #000; border-right-color: #e4e4e4; }
a.strip-app:hover { background: #f2f2f2; }
.shots-rail::-webkit-scrollbar-thumb { background: #ccc; }
.shot img { border-color: #e0e0e0; background: #fff; }
.foot { border-top-color: #e4e4e4; color: #6e6e6e; }
.foot nav a { color: #000; }
.foot nav a:hover { color: #6e6e6e; }

/* app cards and service rows invert on hover */
.app { background: var(--paper); color: var(--ink); }
a.app:hover { background: #fff; color: #000; }
a.app:hover p { color: #555; }
a.app:hover .tag.solid { background: #000; color: #fff; border-color: #000; }
.service:hover { background: #fff; color: #000; }
.service:hover .n, .service:hover p { color: #555; }
.step .num { color: #2a2a2a; }
.founder img { border-color: var(--line); }
.home .sheet { background: #fff; }
.home .sheet a { color: #000; }
.home .sheet a:hover { color: #777; }
.home.menu-open .topbar img { filter: none; }
.home.menu-open .menu-btn span { background: #000; }
::selection { background: #fff; color: #000; }

/* wipe bars go white with the black mark */
.wipe span { background: #FFFFFF; }

/* type a little smaller */
.display { font-size: clamp(60px, 10vw, 148px); }
.page-head .display { font-size: clamp(56px, 9vw, 132px); }
.app-hero-copy .display { font-size: clamp(48px, 7vw, 108px); }
.feature-copy .display { font-size: clamp(52px, 6.5vw, 104px); }
.statement { font-size: clamp(30px, 3.6vw, 56px); }
.section-title { font-size: clamp(30px, 3.4vw, 46px); }
.service .h3 { font-size: clamp(28px, 3.2vw, 48px); }
.lede { font-size: clamp(19px, 1.7vw, 24px); }
.list-plain li { font-size: 22px; }

/* hovering the stacked words clears the right hand column */
.say { transition: opacity .3s ease; }
.say.swap { opacity: 0; }
.hero-right:has(.say.swap) .scroll-cue { opacity: 0; transition: opacity .3s ease; }

/* home is a single screen, nothing below it */
.home, .home body { height: 100%; }
.home main { min-height: 100vh; min-height: 100svh; }
.home .hero { min-height: 100vh; min-height: 100svh; }
body.home { overflow: hidden; }
@media (max-width: 900px) { body.home { overflow: auto; } }

/* home: just the words */
.home .hero-grid { grid-template-columns: 1fr; }

/* ================= all black ================= */
.feature, .contact, .strip, .shots-band, .foot {
  background: var(--paper); color: var(--ink);
}
.feature { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-media { border-right-color: var(--line); }
.feature-media img { box-shadow: 0 30px 80px rgba(255,255,255,.06); }
.feature-copy p, .contact p, .strip-app small { color: var(--mute); }
.feature .btn, .contact .form .btn { background: var(--ink); color: #000; }
.feature .btn::after, .contact .form .btn::after { background: #c9c9c9; }
.feature .btn:hover, .contact .form .btn:hover { color: #000; }
.feature .btn.ghost, .btn.ghost-dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #3a3a3a; }
.feature .btn.ghost::after, .btn.ghost-dark::after { background: var(--ink); }
.feature .btn.ghost:hover, .btn.ghost-dark:hover { color: #000; }
.contact { border-top: 1px solid var(--line); }
.contact .section-title, .contact .display { color: var(--ink); }
.contact .eyebrow, .strip .eyebrow, .form label { color: var(--mute) !important; }
.form input, .form textarea, .form select { color: var(--ink); border-bottom-color: #3a3a3a; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--ink); }
.form select option { color: #000; }
.contact .list-plain, .contact .list-plain li { border-color: var(--line) !important; }
.contact .list-plain li span:last-child { color: var(--mute) !important; }
.strip { border-top: 1px solid var(--line); }
.strip .more { color: var(--ink); border-bottom-color: #3a3a3a; }
.strip-row { border-left-color: var(--line); }
.strip-app { color: var(--ink); border-right-color: var(--line); }
a.strip-app:hover { background: #141414; }
.shots-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shots-rail::-webkit-scrollbar-thumb { background: #333; }
.shot img { border-color: #2a2a2a; background: #111; }
.foot { border-top: 1px solid var(--line); color: var(--mute); }
.foot nav a { color: var(--ink); }
.foot nav a:hover { color: var(--mute); }
.foot img { filter: invert(1); }

/* ================= screenshots in an iPhone frame ================= */
.shots-rail { gap: 34px; padding-top: 18px; padding-bottom: 26px; }
.shot {
  position: relative;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(155deg, #3a3a3a 0%, #151515 42%, #2b2b2b 100%);
  box-shadow: 0 28px 60px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08);
}
.shot img { width: 288px; height: auto; border: 0; border-radius: 36px; background: #000; }
/* side buttons */
.shot::before, .shot::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #3b3b3b;
}
.shot::before { left: -3px; top: 120px; height: 54px; box-shadow: 0 78px 0 #3b3b3b, 0 -96px 0 #3b3b3b; }
.shot::after { right: -3px; top: 150px; height: 84px; }
@media (max-width: 900px) { .shot img { width: 240px; } .shot { border-radius: 40px; } }

/* ================= footer legal dropdowns ================= */
.foot .wrap { align-items: center; }
.legal { display: flex; gap: 22px; }
.drop { position: relative; }
.drop summary {
  list-style: none; cursor: pointer; user-select: none;
  font-family: var(--display); font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mute); display: flex; align-items: center; gap: 8px;
}
.drop summary::-webkit-details-marker { display: none; }
.drop summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.drop[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.drop summary:hover { color: var(--ink); }
.drop-menu {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 40;
  min-width: 220px; display: flex; flex-direction: column;
  background: #101010; border: 1px solid var(--line); padding: 6px 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.drop-menu a {
  padding: 9px 16px; text-decoration: none; color: var(--mute);
  font-family: var(--body); font-size: 15px; letter-spacing: 0; text-transform: none;
}
.drop-menu a:hover { background: var(--ink); color: #000; }
@media (max-width: 900px) {
  .legal { width: 100%; }
  .drop-menu { bottom: auto; top: calc(100% + 8px); }
}

/* ---------------------------------------------------------------- app video
   A clip runs inside the same iPhone frame as the screenshots. Muted, looping,
   no chrome. It only plays while it is on screen. */
.shot video {
  width: 288px; display: block; border: 0; border-radius: 36px;
  background: #000; object-fit: cover;
  /* match the screenshot tiles exactly so the rail stays level */
  aspect-ratio: 1320 / 2868; height: auto;
}
.shot.is-video { position: relative; }
.shot.is-video .live-dot {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .4s ease;
}
.shot.is-video.is-playing .live-dot { opacity: 1; animation: live 2.4s ease-in-out infinite; }
@keyframes live { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@media (max-width: 900px) { .shot video { width: 240px; } }
@media (prefers-reduced-motion: reduce) {
  .shot.is-video.is-playing .live-dot { animation: none; }
}

/* the after-hours line sits inside the statement, one shade back */
.statement em { font-style: normal; color: var(--mute); display: block; }

/* ------------------------------------------------- app hero background film
   The loop gets its own lane on the right of the hero, bleeding off the edge.
   It never runs under the headline, so nothing has to be dimmed into mush. */
.app-hero.has-bg { position: relative; overflow: hidden; }
.app-hero.has-bg .app-hero-grid {
  grid-template-columns: 160px minmax(0, 1fr) clamp(250px, 25%, 420px);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.app-hero.has-bg .app-hero-copy .display { font-size: clamp(46px, 6vw, 100px); }
.app-hero.has-bg .app-hero-icon img { width: 160px; height: 160px; }
.app-hero-bg {
  position: relative; align-self: stretch; min-height: 320px;
  margin-right: calc(-1 * var(--pad));
  overflow: hidden; pointer-events: none;
}
.app-hero-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%;
  display: block; filter: saturate(.92) contrast(1.04);
}
/* feather every edge so the panel sits in the page instead of on it */
.app-hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(0,0,0,.55) 14%, rgba(0,0,0,0) 42%),
    linear-gradient(180deg, var(--paper) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, var(--paper) 100%);
}
@media (max-width: 1100px) {
  .app-hero.has-bg .app-hero-grid { grid-template-columns: 180px minmax(0, 1fr); }
  .app-hero-bg { display: none; }
}
@media (max-width: 760px) {
  .app-hero.has-bg .app-hero-grid { grid-template-columns: 1fr; }
}

/* ===================== phone shell, black titanium =====================
   Built to read as a real device: a banded titanium rail with a bright
   specular edge, a thin black bezel inside it, the capture full bleed with
   its own iOS status bar, and one soft sheet of glass over the top. */
.shot {
  --sw: 290px;          /* screen width */
  --rail: 10px;         /* titanium rail */
  --bezel: 2px;         /* black ring between rail and glass */
  --r: calc(var(--sw) * .205);
  position: relative;
  border: var(--rail) solid transparent;
  padding: var(--bezel);
  border-radius: var(--r);
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(127deg,
      #9aa0a6 0%, #3a3d42 3%, #121315 9%, #0a0a0b 14%,
      #7c828a 21%, #2a2d31 27%, #101113 35%, #0b0b0c 45%,
      #4a4e55 54%, #16171a 61%, #0a0a0b 69%,
      #8d939b 78%, #2c2f34 84%, #101113 91%, #22252a 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.95),
    0 46px 80px -22px rgba(0,0,0,.88),
    0 16px 34px -12px rgba(0,0,0,.62);
}
.shot img,
.shot video {
  width: var(--sw); height: auto; display: block;
  aspect-ratio: 1320 / 2868; object-fit: cover; object-position: 50% 0;
  border: 0; background: #000;
  border-radius: calc(var(--r) - var(--rail) - var(--bezel));
}
/* one sheet of glass, top left, barely there */
.shot .glare {
  position: absolute; inset: var(--bezel); z-index: 2; pointer-events: none;
  border-radius: calc(var(--r) - var(--rail) - var(--bezel));
  background: linear-gradient(122deg,
    rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 14%,
    rgba(255,255,255,.008) 30%, rgba(255,255,255,0) 46%);
}
/* side buttons, sitting just proud of the rail */
.shot::before, .shot::after {
  content: ""; position: absolute; width: 2px; border-radius: 3px;
  background: linear-gradient(90deg, #0b0b0c, #70757c 60%, #1d1f22);
  box-shadow: 0 0 1px rgba(0,0,0,.8);
}
.shot::before {                       /* action button + volume up + volume down */
  left: calc(-1 * var(--rail) - var(--bezel) - 1px);
  top: calc(var(--sw) * .40); height: calc(var(--sw) * .165);
  box-shadow:
    0 calc(var(--sw) * -.235) 0 0 #4a4e54,
    0 calc(var(--sw) * -.395) 0 0 #4a4e54;
}
.shot::after {                        /* power */
  right: calc(-1 * var(--rail) - var(--bezel) - 1px);
  top: calc(var(--sw) * .455); height: calc(var(--sw) * .255);
}
@media (max-width: 900px) { .shot { --sw: 242px; --rail: 9px; } }

/* the page transition carries the full VGL lockup, centred */
.wipe .mark { justify-content: center; width: min(460px, 64vw); }
.wipe .mark img { width: 100%; height: auto; }