/* ──────────────────────────────────────────────────────────────────────────
   vocaro.com — one stylesheet for the whole site.

   Values are lifted verbatim from the original single-page build, so the
   rendering is unchanged; what moved is where they live. Repeated blocks —
   the banner, the work cards, the labelled rows, the placeholders — became
   classes, because they appear on every page and were previously duplicated
   as inline styles on each one.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --green:  #1c4a3f;
  --green-hover: #2f6f5e;
  --ink:    #101413;
  --ink-2:  #222725;
  --ink-3:  #5f6664;
  --ink-4:  #4b5250;
  --bg:     #f7f8f7;
  --rule:   #e2e5e2;
  --sans:   "Space Grotesk", Helvetica, Arial, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad:    48px;         /* the page's side gutter */
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--green-hover); }
main { flex: 1; }

/* ── Diagonal hatching, the motif that runs through every surface ────────── */
.hatch-light { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 10px, rgba(255,255,255,0) 10px 20px); }
.hatch-dark  { background: repeating-linear-gradient(135deg, #3c4644 0 10px, #333c3a 10px 20px); }
.hatch-pale  { background: repeating-linear-gradient(135deg, #edefec 0 8px, #e4e7e3 8px 16px); }

/* ── Top banner. On the home page it is the masthead; on a product page it
      is also the way back, so the whole panel is the link. ──────────────── */
.banner { display: block; padding: 24px var(--pad) 0; }
.banner-inner {
  position: relative; overflow: hidden;
  border-radius: 12px; background: var(--green);
  padding: 22px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.banner-hatch { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; }
.banner-brand { position: relative; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.banner-back  { position: relative; font-family: var(--mono); font-size: 16px; color: rgba(255,255,255,0.65); white-space: nowrap; }
.banner:hover .banner-back { color: #fff; }

/* ── Home hero: the same panel, taller, with the wordmark set large ─────── */
.hero { padding: 24px var(--pad) 40px; }
.hero-inner {
  position: relative; overflow: hidden;
  border-radius: 12px; background: var(--green);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 38px var(--pad); box-sizing: border-box;
}
.hero-hatch { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; }
.hero-fade  { position: absolute; inset: 0; background: linear-gradient(90deg, var(--green) 0%, rgba(28,74,63,0.55) 62%, rgba(28,74,63,0.25) 100%); }
.hero h1 {
  position: relative; margin: 0;
  font-size: 58px; line-height: 1.0; font-weight: 600; letter-spacing: -0.045em;
  color: #fff; text-wrap: balance;
}

/* ── Work cards on the home page ────────────────────────────────────────── */
.work { padding: 0 var(--pad) 40px; display: flex; flex-direction: column; gap: 16px; }
.card { position: relative; display: block; height: 380px; border-radius: 12px; overflow: hidden; }
.card-fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,15,14,0.88) 0%, rgba(12,15,14,0.62) 34%, rgba(12,15,14,0.18) 62%, rgba(12,15,14,0) 100%); }
.card-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; box-sizing: border-box; }
.card h2 {
  margin: 14px 0 12px; font-size: 44px; font-weight: 500; letter-spacing: -0.03em; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.45);
}
.card p {
  margin: 0; font-size: 23px; line-height: 1.5; color: rgba(255,255,255,0.9); max-width: 70ch;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.45);
}

/* ── Product page masthead ──────────────────────────────────────────────── */
.masthead { padding: 36px var(--pad) 40px; max-width: 1240px; }
.masthead h1 { margin: 16px 0 18px; font-size: 56px; line-height: 1.06; font-weight: 500; letter-spacing: -0.038em; }
.masthead p  { margin: 0; font-size: 21px; line-height: 1.5; color: var(--ink-4); max-width: 72ch; letter-spacing: -0.015em; }

/* ── The wide hero shot under the masthead ──────────────────────────────── */
.shot { padding: 0 var(--pad) 56px; }
.shot-inner { position: relative; height: 480px; border-radius: 12px; overflow: hidden; }
.shot-label,
.media-label { position: absolute; bottom: 22px; left: 26px; font-family: var(--mono); font-size: 16px; color: rgba(255,255,255,0.5); }

/* ── A labelled row: mono label in a fixed column, content beside it ─────── */
.row { padding: 0 var(--pad) 88px; }
.row-inner { display: grid; grid-template-columns: 140px 1fr; gap: 40px; padding-top: 34px; border-top: 1px solid var(--rule); }
.row h2 { margin: 0; font-family: var(--mono); font-size: 16px; font-weight: 400; letter-spacing: 0.08em; color: var(--ink-3); }

.features { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 44px 56px; max-width: 1000px; }
.features h3 { margin: 0 0 10px; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.features p  { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-3); }

/* ── Media placeholder with a play affordance ───────────────────────────── */
.media { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.play { width: 74px; height: 74px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; }
.play::after { content: ""; width: 0; height: 0; border-left: 18px solid rgba(255,255,255,0.85); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }

/* ── Screenshot grids. Column count and frame shape vary per product. ───── */
.shots { display: grid; gap: 16px; }
.shots-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.shots-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.shots-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.thumb { position: relative; border-radius: 10px; }
.thumb-wide  { aspect-ratio: 16/9; }
.thumb-photo { aspect-ratio: 4/3; }
.thumb-phone { aspect-ratio: 9/19.5; border-radius: 16px; }

/* ── The guide call-to-action (Vocaro MPM only) ─────────────────────────── */
.cta { display: block; border-radius: 12px; background: var(--green); padding: 40px 44px; box-sizing: border-box; }
.cta h3 { margin: 0 0 14px; font-size: 34px; font-weight: 500; letter-spacing: -0.028em; color: #fff; }
.cta p  { margin: 0; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 66ch; }
.cta span { display: inline-block; margin-top: 26px; font-family: var(--mono); font-size: 16px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 3px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px var(--pad); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 16px; color: var(--ink-2); flex-wrap: wrap;
}
.site-footer a { color: var(--ink-2); }
.site-footer .sep { color: #8b918e; }
.site-footer nav { display: flex; gap: 10px; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  :root { --pad: 24px; }
  .hero h1 { font-size: 40px; }
  .masthead h1 { font-size: 38px; }
  .card { height: 300px; }
  .card h2 { font-size: 32px; }
  .card p  { font-size: 18px; }
  .row-inner { grid-template-columns: 1fr; gap: 20px; }
  .features { grid-template-columns: 1fr; gap: 30px; }
  .shots-3, .shots-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shot-inner { height: 300px; }
  .banner-brand { font-size: 19px; }
  .banner-back  { font-size: 13px; }
}