/* MujinDG — mujindg.com
   Brand: the MDG logo's ink black and brushed gold, on graphite. Caribbean accents (sea turquoise, palm green,
   sunset coral) are used sparingly, like light on water. Everything is served from our own server. */

@font-face { font-family: "Sora"; src: url("/fonts/Sora-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --bg: #0a0a0b;
  --bg-2: #111113;
  --graphite: #1b1b1e;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #f4f2ed;
  --muted: #a7a39b;
  --dim: #6f6c66;
  --gold: #d4af37;
  --gold-hi: #f3d77f;
  --gold-deep: #9c7420;
  --sea: #22c7bf;
  --palm: #1f9d55;
  --coral: #ff7a59;
  --sand: #f5f1e8;
  --ink: #141416;
  --gold-grad: linear-gradient(115deg, #9c7420 0%, #d4af37 28%, #f6de8e 48%, #dcb750 64%, #a67d22 84%, #e9c96c 100%);
  --horizon: linear-gradient(90deg, var(--sea), var(--gold) 55%, var(--coral));
  --ease: cubic-bezier(.2, .7, .1, 1);
  --radius: 28px;
  --gutter: clamp(16px, 4vw, 40px);
  --display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--body); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
p { margin: 0 0 1em; }
::selection { background: rgba(212, 175, 55, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--gold); color: #111; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.br-lg { display: none; }
@media (min-width: 900px) { .br-lg { display: inline; } }
@media (max-width: 599px) { .br-sm { display: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 600 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 12px var(--sea); }
.gold-text {
  background: var(--gold-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldshift 9s ease-in-out infinite alternate;
}
@keyframes goldshift { to { background-position: 100% 0; } }

/* ---------- buttons ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--display); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s, color .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { --h: 38px; padding: 0 18px; font-size: 14px; }
.btn-lg { --h: 60px; padding: 0 32px; font-size: 18px; }
.btn-gold {
  color: #1a1407; background: var(--gold-grad); background-size: 160% 100%;
  box-shadow: 0 10px 30px -10px rgba(212, 175, 55, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-gold:hover { background-position: 60% 0; box-shadow: 0 16px 40px -12px rgba(212, 175, 55, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-glass {
  color: var(--text); background: rgba(255, 255, 255, .09); border: 1px solid var(--line-2);
}
.btn-glass:hover { background: rgba(255, 255, 255, .1); }
.btn-accent {
  color: #0b0b0c; background: var(--accent);
  box-shadow: 0 10px 30px -12px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.arr, .mail { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mail { width: 22px; height: 22px; stroke-width: 1.9; }

/* ---------- glass ---------- */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)), rgba(18, 18, 20, .72);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -40px rgba(0, 0, 0, .8);
}
/* light that follows the pointer (set by main.js) */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(243, 215, 127, .10), transparent 60%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.glass:hover::before { opacity: 1; }

.icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 20px;
  background: linear-gradient(145deg, rgba(243, 215, 127, .16), rgba(212, 175, 55, .04));
  border: 1px solid rgba(243, 215, 127, .22); color: var(--gold-hi);
}
.icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 12px 0 auto; z-index: 50; padding-inline: var(--gutter); pointer-events: none; }
.nav-bar {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 12px; height: 60px; width: min(1180px, 100%); margin-inline: auto;
  padding: 0 10px 0 20px; border-radius: 999px;
  background: rgba(16, 16, 18, .88); border: 1px solid rgba(255, 255, 255, .07);
  transition: background-color .5s var(--ease), border-color .5s, box-shadow .5s;
}
.nav.scrolled .nav-bar { background: rgba(16, 16, 18, .94); border-color: var(--line); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font: 600 18px/1 var(--display); letter-spacing: -.02em; }  /* 44px: a comfortable tap target */
.brand img { width: 58px; height: auto; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 9px 14px; border-radius: 999px; font-size: 14.5px; color: var(--muted); text-decoration: none;
  transition: color .3s, background-color .3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav-cta { margin-left: 6px; --h: 44px; }   /* comfortable to tap */
.nav-toggle { display: none; }

@media (max-width: 899px) {
  .nav-bar { padding-right: 8px; }
  .nav-cta { margin-left: auto; }
  .nav-toggle {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .06); cursor: pointer;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .4s var(--ease); }
  .nav.open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 2px; padding: 10px; border-radius: 24px;
    background: rgba(14, 14, 16, .97); border: 1px solid var(--line);
    opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
    transition: opacity .35s var(--ease), transform .45s var(--ease);
  }
  .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: 14px 16px; font-size: 17px; color: var(--text); }
}
@media (max-width: 380px) { .brand span { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden;
  padding: 104px 0 90px;
  background:
    radial-gradient(1200px 700px at 50% -10%, #2c2c30 0%, rgba(20, 20, 22, .6) 45%, transparent 75%),
    linear-gradient(180deg, #151517 0%, var(--bg) 100%);
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 320px at 58% 30%, rgba(212, 175, 55, .16), transparent 70%),
    radial-gradient(700px 420px at 10% 95%, rgba(34, 199, 191, .10), transparent 70%),
    radial-gradient(600px 360px at 92% 90%, rgba(255, 122, 89, .07), transparent 70%);
}
.sea {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 52%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  opacity: .9;
}
.hero-inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-logo {
  width: min(560px, 84vw, 60vh); margin-bottom: clamp(24px, 4.5vh, 48px);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1.2s var(--ease);
}
.hero-logo svg { width: 100%; height: auto; overflow: visible; }
.hero-logo .lg-m { animation: logo-in-m 1.6s var(--ease) both; }
.hero-logo .lg-g { animation: logo-in-g 1.6s .12s var(--ease) both; }
.hero-logo .lg-shine { display: none; transform-box: view-box; }
@keyframes logo-in-m { from { opacity: 0; transform: translateX(-60px); } }
@keyframes logo-in-g { from { opacity: 0; transform: translateX(60px); } }
@keyframes shine { 0% { transform: translateX(-35%); } 38%, 100% { transform: translateX(135%); } }

.hero-eyebrow { color: var(--muted); letter-spacing: .14em; }
@media (max-width: 599px) { .hero-eyebrow { letter-spacing: .1em; font-size: 11.5px; line-height: 1.5; } .hero-eyebrow .dot { display: none; } }
.hero-title { font-size: clamp(42px, min(6.6vw, 9.5vh), 88px); font-weight: 600; line-height: 1; }
.hero-title span { display: block; }
.hero-title .gold-text { padding-bottom: .08em; }
.hero-lead { max-width: 640px; margin: 22px auto 30px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: clamp(20px, 5vw, 64px); margin: clamp(32px, 5vh, 52px) 0 0; padding: 16px 34px;
  border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.stats div { text-align: center; }
.stats dt {
  font: 600 clamp(26px, 3vw, 34px)/1 var(--display); letter-spacing: -.03em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats dd { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 520px) { .stats { padding: 16px 18px; gap: 16px; } .stats dd { font-size: 12px; } }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px;
  border: 1.5px solid var(--line-2); border-radius: 20px;
}
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--gold-hi); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(88px, 11vw, 140px) 0; }
.section-head { max-width: 820px; margin-bottom: clamp(44px, 6vw, 72px); }
.section-head h2 { font-size: clamp(34px, 5.4vw, 64px); }
.section-lead { margin-top: 20px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 620px; }
.section-head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: none; }
/* a thin sea-to-sunset horizon on top of each section */
.section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(1180px, 100% - 2 * var(--gutter)); height: 1px;
  transform: translateX(-50%); background: var(--horizon); opacity: .28;
}

/* promise */
.believe { background: radial-gradient(900px 500px at 85% 20%, rgba(34, 199, 191, .06), transparent 70%); }
.manifesto {
  font: 600 clamp(30px, 4.8vw, 60px)/1.14 var(--display); letter-spacing: -.035em; max-width: 1040px;
  margin: 0 0 clamp(56px, 8vw, 96px);
}
.manifesto .w { color: rgba(244, 242, 237, .16); transition: color .6s var(--ease); }
.manifesto .w.lit { color: var(--text); }
.manifesto em { font-style: normal; }
.manifesto em .w.lit { color: var(--gold-hi); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 899px) { .grid-3 { grid-template-columns: 1fr; } }
.card { padding: 32px; }
.card h3, .tile h3 { font-size: 22px; letter-spacing: -.025em; margin-bottom: 10px; }
.card p, .tile p { color: var(--muted); margin: 0; font-size: 16px; }

/* capabilities */
.build { background: radial-gradient(900px 600px at 10% 30%, rgba(212, 175, 55, .06), transparent 70%); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile { padding: 32px; min-height: 250px; display: flex; flex-direction: column; overflow: hidden; }
.tile-wide { grid-column: span 2; flex-direction: row; gap: 28px; align-items: stretch; }
.tile-wide .tile-copy { flex: 1 1 55%; display: flex; flex-direction: column; }
.tile-full { grid-column: 1 / -1; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto !important; padding-top: 22px; }
.tags span { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
@media (max-width: 899px) {
  .bento { grid-template-columns: 1fr; }
  .tile-wide { grid-column: auto; flex-direction: column; }
}

/* device drawing in the "apps" tile */
.devices { position: relative; flex: 1 1 45%; min-height: 190px; }
.devices b { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); margin: 0 0 8px; }
.devices b.short { width: 60%; }
.dev-browser {
  position: absolute; left: 0; right: 18%; top: 6%; bottom: 14%; padding: 30px 18px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2);
}
.dev-browser i { position: absolute; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.dev-browser i:nth-child(1) { left: 14px; } .dev-browser i:nth-child(2) { left: 26px; } .dev-browser i:nth-child(3) { left: 38px; }
.dev-phone {
  position: absolute; right: 4%; bottom: 0; width: 30%; max-width: 110px; aspect-ratio: 9 / 18; padding: 22px 10px; border-radius: 18px;
  background: linear-gradient(160deg, #26262a, #121214); border: 1px solid rgba(243, 215, 127, .35);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(212, 175, 55, .35);
}
.dev-watch {
  position: absolute; right: 38%; bottom: 4%; width: 17%; max-width: 64px; aspect-ratio: 1; padding: 12px 9px; border-radius: 30%;
  background: linear-gradient(160deg, #26262a, #121214); border: 1px solid rgba(34, 199, 191, .45);
  box-shadow: 0 0 24px -8px rgba(34, 199, 191, .5);
}
.dev-phone b:first-child, .dev-watch b { background: var(--gold-grad); opacity: .8; }

/* waveform in the "voice" tile */
.wave { display: flex; align-items: center; gap: 4px; height: 44px; margin-top: auto; padding-top: 22px; }
.wave i { flex: 1; height: 20%; border-radius: 3px; background: linear-gradient(180deg, var(--sea), var(--gold)); opacity: .85; animation: bar 1.6s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -.4s; } .wave i:nth-child(3n+1) { animation-delay: -.9s; } .wave i:nth-child(4n) { animation-delay: -1.2s; }
.wave i:nth-child(5n) { animation-duration: 1.2s; } .wave i:nth-child(7n) { animation-duration: 2s; }
@keyframes bar { 50% { height: 100%; } }

.tile-design {
  flex-direction: row; align-items: center; gap: 24px; min-height: 0; border-radius: var(--radius); padding: 34px;
  background:
    linear-gradient(115deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .03) 45%, rgba(34, 199, 191, .08)),
    rgba(255, 255, 255, .03);
  border: 1px solid rgba(243, 215, 127, .22);
}
.tile-design .icon { margin: 0; flex: 0 0 auto; width: 56px; height: 56px; }
.tile-design h3 { font-size: 26px; }
.tile-design p { color: #cfcac0; max-width: 760px; }
@media (max-width: 599px) { .tile-design { flex-direction: column; align-items: flex-start; } }

/* services */
.services { background: radial-gradient(900px 600px at 90% 30%, rgba(34, 199, 191, .07), transparent 70%); }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service { padding: 30px; }
.service h3 { font-size: 21px; letter-spacing: -.025em; margin-bottom: 10px; }
.service p { color: var(--muted); margin: 0; font-size: 15.5px; }
.service:nth-child(2) .icon { color: var(--sea); border-color: rgba(34, 199, 191, .3); background: linear-gradient(145deg, rgba(34, 199, 191, .16), rgba(34, 199, 191, .03)); }
.service:nth-child(3) .icon { color: var(--coral); border-color: rgba(255, 122, 89, .3); background: linear-gradient(145deg, rgba(255, 122, 89, .16), rgba(255, 122, 89, .03)); }
.service:nth-child(4) .icon { color: #5fd08f; border-color: rgba(31, 157, 85, .35); background: linear-gradient(145deg, rgba(31, 157, 85, .18), rgba(31, 157, 85, .03)); }
.services-cta { margin: 34px 0 0; }
.work-head { margin: clamp(56px, 8vw, 96px) 0 clamp(28px, 4vw, 44px); }
.work-head h2 { font-size: clamp(30px, 4.4vw, 50px); }
.services .product-name { font-size: clamp(32px, 4vw, 48px); }
@media (max-width: 1099px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .services-grid { grid-template-columns: 1fr; } }

/* live products */
.live { background: radial-gradient(1000px 700px at 50% 0%, rgba(255, 255, 255, .03), transparent 70%); }
.product {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 56px); margin-bottom: 26px; overflow: hidden;
}
.product::after {
  content: ""; position: absolute; z-index: -2; inset: auto -10% -40% 30%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .10), transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  opacity: .7;
}
.product-flip .product-copy { order: 2; }
.product-flip::after { inset: auto 30% -40% -10%; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 13px 7px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent-2); opacity: 0; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.product-name {
  display: block; width: fit-content; padding-right: .06em;
  font-size: clamp(48px, 6vw, 76px); letter-spacing: -.045em; line-height: .95;
  background: linear-gradient(120deg, #fff 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.product-copy > .byline {
  margin: 10px 0 0; font: 600 12.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi);
}
.product-tag { margin: 12px 0 18px; font: 600 clamp(19px, 2vw, 23px)/1.25 var(--display); letter-spacing: -.02em; color: var(--text); }
.product-lead { font-size: 18px; color: var(--text); }
.product-copy > p { color: var(--muted); }
.product-copy > .product-lead { color: #e9e5dc; }
.product-copy > .product-tag { color: var(--text); }
.product-copy > .badge { color: var(--text); }
.checks { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 11px; }
.checks li { position: relative; padding-left: 32px; color: #d7d3ca; font-size: 16px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
  background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.checks li::after {
  content: ""; position: absolute; left: 7px; top: 8px; width: 6px; height: 9px;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.product-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.window {
  margin: 0; border-radius: 18px; overflow: hidden; background: #0e0e10;
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4), 0 30px 80px -50px var(--accent);
  transform: perspective(1600px) rotateY(-9deg) rotateX(4deg) scale(.96);
  transition: transform 1.6s var(--ease);
}
.product-flip .window { transform: perspective(1600px) rotateY(9deg) rotateX(4deg) scale(.96); }
.product.in .window { transform: none; }
.window-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #19191c; border-bottom: 1px solid var(--line); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3e; }
.window-bar span {
  margin: 0 auto; transform: translateX(-20px); padding: 4px 16px; border-radius: 8px; font-size: 12px; color: var(--muted);
  background: rgba(255, 255, 255, .05);
}
@media (max-width: 899px) {
  .product { grid-template-columns: 1fr; }
  .product-flip .product-copy { order: 0; }
  .window, .product-flip .window { transform: none; }
}

/* in the works: a rail that scrolls sideways */
.next { background: radial-gradient(900px 600px at 90% 60%, rgba(255, 122, 89, .05), transparent 70%); }
.rail-btns { display: flex; gap: 10px; }
.rail-btn {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text); transition: background-color .3s, opacity .3s;
}
.rail-btn:hover { background: rgba(255, 255, 255, .12); }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw); gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px max(var(--gutter), (100% - 1180px) / 2) 30px;
  scroll-padding-inline: max(var(--gutter), (100% - 1180px) / 2);
}
.rail::-webkit-scrollbar { display: none; }
.work { scroll-snap-align: start; padding: 30px; min-height: 330px; display: flex; flex-direction: column; }
.work::after {
  content: ""; position: absolute; z-index: -1; top: 0; left: 30px; right: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.status {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 28px; padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.work h3 { font-size: 30px; letter-spacing: -.035em; }
.work-kind { margin: 8px 0 16px; color: var(--text); font-weight: 500; }
.work p:last-child { color: var(--muted); font-size: 15.5px; margin: 0; }
.work-more {
  border-radius: var(--radius); border: 1px dashed rgba(243, 215, 127, .35);
  background: radial-gradient(400px circle at 20% 0%, rgba(212, 175, 55, .12), transparent 70%);
  --accent: var(--gold-hi);
}
.work-more h3 { font-size: 40px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.work-more p:last-child { margin-top: 12px; font-size: 17px; }

/* story: daylight after the dark, like morning on the water */
.story {
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(34, 199, 191, .10), transparent 70%),
    radial-gradient(800px 500px at 100% 40%, rgba(212, 175, 55, .14), transparent 70%),
    linear-gradient(180deg, #efe9dc 0%, var(--sand) 18%, #f8f5ee 100%);
}
.story::before { display: none; }
.story .eyebrow { color: #8a6a18; }
.story h2, .story h3 { color: #101012; }
.story-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(56px, 8vw, 110px); }
.story-photo { margin: 0; border-radius: 32px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(60, 40, 0, .45), 0 0 0 1px rgba(0, 0, 0, .05); }
.story-copy p { font-size: 18px; color: #3d3a34; }
.story-lead { font: 600 clamp(24px, 2.6vw, 32px)/1.2 var(--display) !important; letter-spacing: -.03em; color: #111 !important; }
.roots { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; padding: 0; }
.roots li {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px 9px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(0, 0, 0, .07); font-size: 14.5px; font-weight: 500; color: #222;
  box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .25);
}
.pips { display: inline-flex; }
.pips i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(0, 0, 0, .2); }
.pips i + i { margin-left: -4px; }
.together {
  margin-top: 28px !important; padding-left: 20px; border-left: 3px solid var(--gold);
  font: 500 20px/1.45 var(--display) !important; letter-spacing: -.02em; color: #1d1b17 !important;
}
.founder {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start;
  padding: clamp(24px, 4vw, 48px); margin-bottom: 26px; border-radius: 36px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 30px 70px -45px rgba(60, 40, 0, .35);
}
.founder-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.founder-flip .founder-photo { order: 2; }
.founder-photo { margin: 0; position: sticky; top: 100px; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; background: #e8e1d2; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-role { margin: 6px 0 10px; font: 600 13px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #8a6a18; }
.founder h3 { font-size: clamp(34px, 4vw, 48px); margin-bottom: 22px; }
.founder-copy p { font-size: 17.5px; color: #3d3a34; }
.founder blockquote, .founder-note { margin: 30px 0 0; padding: 26px 28px; border-radius: 22px; background: #111; color: #f4f2ed; }
.founder blockquote p, .founder-note p { margin: 0 0 12px; font: 500 clamp(19px, 2vw, 23px)/1.4 var(--display); letter-spacing: -.02em; color: var(--gold-hi); }
.founder-note {
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(34, 199, 191, .18), transparent 70%),
    radial-gradient(360px 200px at 0% 100%, rgba(212, 175, 55, .16), transparent 70%),
    #111;
}
.founder-note p:last-child { margin: 0; }
.founder-copy .founder-note-label {
  margin: 0 0 10px; font: 600 12.5px/1.3 var(--display) !important; letter-spacing: .14em !important; text-transform: uppercase; color: #a7a39b !important;
}
.founder blockquote footer { font-size: 14px; color: #a7a39b; }
.founder h3 .post-nominal {
  display: inline-block; margin-left: 14px; vertical-align: .35em; padding: 5px 11px; border-radius: 999px;
  font: 600 14px/1 var(--display); letter-spacing: .06em; color: #7a5c12; background: rgba(212, 175, 55, .16);
  border: 1px solid rgba(154, 116, 32, .25);
}
.founder-copy .founder-creds { margin: -8px 0 22px; font-size: 14.5px; color: #6e685d; }
.founder-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 26px;
}
.founder-stats div { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 10px 24px -18px rgba(60, 40, 0, .4); }
.founder-stats dt {
  font: 600 24px/1.1 var(--display); letter-spacing: -.03em;
  background: linear-gradient(115deg, #7b5a16, #b8892a 45%, #8a6a18); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.founder-stats dd { margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: #6e685d; }
.career { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.career li {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 96px; gap: 4px 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: 15px;
}
.career b { font-weight: 600; color: #1a1814; }
.career span { color: #5b564c; }
.career time { color: #8a6a18; font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 599px) {
  .career li { grid-template-columns: 1fr 96px; }
  .career span { grid-column: 1 / -1; grid-row: 2; }
}
.founder-links { margin: 28px 0 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.founder-links .nee { font-size: 14px; color: #6e685d; }
.btn-dark { color: #f4f2ed; background: #141416; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .6); }
.btn-dark:hover { background: #0a66c2; }
.li { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 899px) {
  .story-intro, .founder, .founder-flip { grid-template-columns: 1fr; }
  .founder-flip .founder-photo { order: 0; }
  .founder-photo { position: static; max-width: 420px; }
}

/* contact */
.contact { text-align: center; overflow: hidden;
  background:
    radial-gradient(700px 400px at 50% 110%, rgba(212, 175, 55, .18), transparent 70%),
    radial-gradient(600px 300px at 15% 100%, rgba(34, 199, 191, .10), transparent 70%),
    var(--bg);
}
.contact::before { display: none; }
.contact-inner { display: flex; flex-direction: column; align-items: center; }
.contact h2 { font-size: clamp(38px, 6vw, 76px); }
.contact .section-lead { margin: 22px auto 36px; }
.try { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 34px 0 0; padding: 0; }
.try a { display: inline-block; padding: 12px 0; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.try a:hover { color: var(--gold-hi); border-color: currentColor; }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 34px 0 calc(34px + env(safe-area-inset-bottom)); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.footer-line { margin: 0; color: var(--muted); font-size: 14px; }
.footer-inner .brand { min-height: 44px; }
.footer-copy { margin: 0 0 0 auto; color: var(--dim); font-size: 14px; }
@media (max-width: 699px) { .footer-copy { margin-left: 0; } }

/* ---------- scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
.js .hero .reveal { transition-duration: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .window, .product-flip .window { transform: none; }
  .hero-logo .lg-shine { display: none; }
}


/* ---------- rich effects: only where a device can afford them ----------
   Frosted glass, glows and blur-in are lovely and expensive: Safari keeps a separate blurred copy of the page behind
   every frosted element, which is what makes phones run out of memory and reload the page. Phones and tablets get the
   same design in solid colours; a desktop with a mouse gets the full treatment. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  }
  .nav-bar { background: rgba(16, 16, 18, .42); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
  .nav.scrolled .nav-bar { background: rgba(16, 16, 18, .72); }
  .btn-glass { background: rgba(255, 255, 255, .06); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
  .founder { background: rgba(255, 255, 255, .62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .hero-logo { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(212, 175, 55, .12)); }
  .hero-logo .lg-shine { display: block; animation: shine 7s 1.4s ease-in-out infinite; }
  .js .reveal { filter: blur(8px); }
  .js .reveal.in { filter: none; }
}
/* A browser without frosted glass (Firefox with it switched off, older Safari) still needs a readable panel. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass, .nav-bar { background: rgba(18, 18, 20, .92); }
  .founder { background: rgba(255, 255, 255, .86); }
}