/* Venturf Digital — site stylesheet
   Translated from Home.dc.html, Portfolio.dc.html and Contact.dc.html
   (Claude Design). Dark glass aesthetic, Archivo display + IBM Plex Mono
   utility, solid #050505 background. */

:root {
  --bg: #050505;
  --ink: #eef1f7;
  --ink-85: rgba(238, 241, 247, .85);
  --ink-75: rgba(238, 241, 247, .75);
  --ink-62: rgba(238, 241, 247, .62);
  --ink-60: rgba(238, 241, 247, .6);
  --ink-55: rgba(238, 241, 247, .55);
  /* Design nominally uses .45/.4 here; raised to .5 so small text clears WCAG AA
     (4.8:1 on #050505 — .45 was 4.06:1, .4 was 3.41:1). */
  --ink-45: rgba(238, 241, 247, .5);
  --ink-40: rgba(238, 241, 247, .5);
  --hairline: rgba(255, 255, 255, .08);
  --accent: hsl(226 95% 72%);
  --ease: cubic-bezier(.2, .65, .2, 1);
  --pad-x: clamp(20px, 6vw, 64px);
  --header-x: clamp(20px, 4vw, 44px);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
  position: fixed; /* iOS: overflow:hidden alone doesn't stop touch scroll; JS sets top */
  left: 0;
  right: 0;
  width: 100%;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: #fff; }

::selection { background: rgba(125, 155, 255, .3); color: #fff; }

:focus-visible {
  outline: 2px solid hsla(226, 100%, 78%, .9);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, p { margin: 0; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: #10131c;
  font-size: 13px;
  transform: translateY(-64px);
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Glass primitives ---------- */

.glass {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .45) 0%,
    rgba(255, 255, 255, .15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, .15) 80%,
    rgba(255, 255, 255, .45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.glass-faint { background: rgba(255, 255, 255, .01); background-blend-mode: luminosity; }
.glass-solid { background: rgba(255, 255, 255, .08); background-blend-mode: luminosity; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--header-x);
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: .24em; }
.brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--ink-55);
}

.pill-nav { display: flex; align-items: center; gap: 4px; padding: 6px; }

.pill-link {
  position: relative;
  z-index: 1;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink-60);
  transition: color .2s ease, background .2s ease;
}
.pill-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.pill-link.is-active { color: #fff; background: rgba(255, 255, 255, .08); }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
}
.burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); }

@media (max-width: 800px) {
  .pill-nav { display: none; }
  .burger { display: flex; }
}

/* ---------- Mobile menu overlay ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: rgba(4, 6, 11, .55);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1);
  animation: vfFade .3s ease both;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-overlay[hidden] { display: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-overlay { background: rgba(4, 6, 11, .96); }
}

.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--header-x);
}

.menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, .03);
}

.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 4vh, 30px);
  text-align: center;
  margin: auto 0; /* centers when there is room, allows overlay scroll when there isn't */
  padding: 20px 0;
}
.menu-links a {
  font-size: clamp(32px, 9vw, 52px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink-60);
}
.menu-links a:hover,
.menu-links a.is-active { color: #fff; }

.menu-foot { padding: 28px; text-align: center; }

.mono-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink-45);
}
.mono-link:hover { color: #fff; }
.menu-foot .mono-link { color: rgba(238, 241, 247, .5); }
.menu-foot .mono-link:hover { color: #fff; }

/* ---------- Shared type ---------- */

main { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--ink-55);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;
  transition: background .25s ease, transform .25s ease;
}
.btn.glass-solid:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
.btn-ghost { color: var(--ink-85); }
.btn-ghost:hover { background: rgba(255, 255, 255, .07); transform: translateY(-1px); color: #fff; }
.btn-lg { padding: 17px 36px; font-size: 15px; }

/* ---------- Hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 130px var(--pad-x) 110px;
  text-align: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
}

.hero-title {
  margin-top: 22px;
  font-size: clamp(46px, 9vw, 120px);
  line-height: .97;
  font-weight: 600;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 28px;
  max-width: 540px;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-62);
  text-wrap: pretty;
}

.hero-ctas {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.anim-up { animation: vfUp .9s var(--ease) both; }
.anim-fade { animation: vfFade 1s ease both; }
.delay-1 { animation-duration: .8s; animation-delay: .05s; }
.delay-2 { animation-delay: .18s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .42s; }
.delay-5 { animation-delay: .7s; }

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: vfFade 1s ease .9s both;
}
.scroll-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--ink-45);
}
.scroll-line {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  animation: vfLine 2.6s ease-in-out infinite;
}

/* ---------- What we do ---------- */

.services {
  max-width: 1100px;
  margin: 0 auto;
  padding: 15vh var(--pad-x) 8vh;
}

.section-eyebrow { margin-bottom: clamp(30px, 5vh, 54px); }

.service-list { border-bottom: 1px solid var(--hairline); }

.service-row {
  display: grid;
  grid-template-columns: clamp(52px, 9vw, 110px) 1fr;
  gap: 6px 24px;
  align-items: baseline;
  padding: clamp(28px, 4.5vw, 44px) 0;
  border-top: 1px solid var(--hairline);
}

.service-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-40);
}

.service-title {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -.02em;
}

.service-copy {
  margin-top: 12px;
  max-width: 560px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-55);
  text-wrap: pretty;
}

/* ---------- Selected work ---------- */

.work {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8vh var(--pad-x) 6vh;
}

.work-eyebrow { margin-bottom: 28px; }

.glass-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, .01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1);
}
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .45) 0%,
    rgba(255, 255, 255, .15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, .15) 80%,
    rgba(255, 255, 255, .45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.work-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.work-media {
  position: relative;
  min-height: clamp(360px, 48vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.work-media::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side, hsla(226, 90%, 62%, .16), transparent 70%);
  pointer-events: none;
}

.work-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 60px);
}

.work-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--ink-55);
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
}

.work-title {
  margin-top: 24px;
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 600;
  letter-spacing: -.02em;
}

.work-tagline {
  margin-top: 10px;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--ink-75);
}

.work-copy {
  margin-top: 18px;
  max-width: 420px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-55);
  text-wrap: pretty;
}

.work-link {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(238, 241, 247, .7);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 6px;
  transition: color .2s ease, border-color .2s ease;
}
.work-link:hover { color: #fff; border-color: rgba(255, 255, 255, .7); }

/* ---------- Phone mock (IRL Leveling preview) ---------- */

.phone {
  position: relative;
  width: clamp(210px, 62%, 240px);
  border-radius: 36px;
  background: rgba(9, 11, 17, .88);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .12),
    0 30px 70px rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 10px;
}

.phone-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 27px;
  border: 1px solid rgba(255, 255, 255, .05);
}

/* ---------- Call to action ---------- */

.cta {
  text-align: center;
  padding: 20vh var(--pad-x) 22vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-title {
  font-size: clamp(38px, 7.5vw, 92px);
  font-weight: 600;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.cta-action { margin-top: 40px; }

.cta-mail { margin-top: 26px; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 32px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-45);
  position: relative;
  z-index: 1;
}
.site-footer a { color: var(--ink-45); }
.site-footer a:hover { color: #fff; }
.footer-nav { display: flex; align-items: center; gap: 24px; }

/* ---------- Page intro (Work) ---------- */

.page-intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(14vh + 90px) var(--pad-x) 4vh;
}

.page-title {
  margin-top: 20px;
  font-size: clamp(46px, 8vw, 104px);
  line-height: .97;
  font-weight: 600;
  letter-spacing: -.03em;
}

.page-sub {
  margin-top: 24px;
  max-width: 480px;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-62);
}

/* ---------- Case study (Work) ---------- */

.case {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6vh var(--pad-x) 8vh;
}

.case-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 60px);
}

.case-info { position: relative; z-index: 1; }

.case-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.case-title {
  margin-top: 26px;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -.02em;
}

.case-tagline {
  margin-top: 10px;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-75);
}

.case-copy {
  margin-top: 20px;
  max-width: 460px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-55);
  text-wrap: pretty;
}

.case-specs {
  margin: 36px 0 0;
  max-width: 460px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
}
.spec-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.spec-row dt,
.spec-row dd { margin: 0; }
.spec-row dt { color: var(--ink-40); }
.spec-row dd { color: rgba(238, 241, 247, .8); text-align: right; }

/* ---------- App shots (Work) ----------
   Real screenshots (assets/irl-*.png) filling the design's two 9/17
   image slots; captured from the app's web build at a phone viewport. */

.case-shots {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
}

.shot {
  position: relative;
  aspect-ratio: 9 / 17;
}
.shot-offset { margin-top: 38px; }

.shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* ---------- In the lab (Work) ---------- */

.lab {
  text-align: center;
  padding: 14vh var(--pad-x) 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lab-title {
  margin-top: 26px;
  max-width: 720px;
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 600;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.lab-action { margin-top: 38px; }

.btn-md { padding: 16px 34px; font-size: 15px; }

/* ---------- Contact ---------- */

.contact-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px var(--pad-x) 120px;
}

.contact-title {
  margin-top: 22px;
  font-size: clamp(52px, 11vw, 132px);
  line-height: .97;
  font-weight: 600;
  letter-spacing: -.03em;
}

.contact-sub {
  margin-top: 28px;
  max-width: 460px;
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-62);
  text-wrap: pretty;
}

/* The entrance animation lives on the wrapper: fill-mode "both" would pin
   transform on the button itself and kill its hover lift. */
.contact-mail-wrap { margin-top: 44px; }

.contact-mail {
  padding: 18px clamp(24px, 4vw, 40px);
  font-family: var(--mono);
  font-size: clamp(12px, 2.4vw, 18px);
  letter-spacing: .14em;
  color: #fff;
}

.contact-domain {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink-40);
}
.contact-domain:hover { color: #fff; }

/* ---------- Keyframes ---------- */

@keyframes vfUp {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}

@keyframes vfFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vfLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-up,
  .anim-fade,
  .scroll-cue,
  .menu-overlay { animation: none; }
  .scroll-line { animation: none; transform: none; }
  .btn,
  .skip-link { transition: none; }
}

/* ---------- Print ---------- */

@media print {
  .scroll-cue,
  .burger,
  .menu-overlay,
  .skip-link { display: none !important; }
  body { background: #fff; }
  body * { color: #111 !important; }
  .site-header { position: static; }
  .glass::before,
  .glass-panel::before { display: none; }
}