/* ============================================================================
   marketing.css  -  the Juvo public site layer, on top of tokens.css.
   Evolves the site into a calm institutional company surface: architectural
   hero imagery, section rhythm, product cards, benefit grids, CTA bands, and
   a self-contained scroll-reveal (no external libs, CSP-safe). Pages stay lean
   HTML + these classes; brand text comes from site-config.js.
   No long-dash punctuation in this file (UI-copy rule).
   ========================================================================== */

:root{
  --mkt-max:1120px;
  --mkt-ink:var(--ink,#111418);
  --mkt-green:var(--g,#0B3D2E);
  --mkt-green2:var(--g2,#062F24);
  --mkt-mint:var(--mg,#2F765C);
  --mkt-gold:var(--gold,#C8A15A);
  --mkt-gold-text:var(--gold2,#8A682E);
  --mkt-slate:var(--slate,#5D6661);
  --mkt-hair:var(--hair,#DED8CB);
  --mkt-tint:var(--tint,#DDE3DB);
  --mkt-paper:var(--paper,#FAF8F4);
  --mkt-radius:10px;
  --mkt-radius-lg:var(--r4,14px);
  --mkt-radius-xl:var(--r5,18px);
  --mkt-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- page frame ---------------------------------------------------------- */
.mkt{background:var(--mkt-paper);color:var(--mkt-ink);overflow-x:hidden}
.mkt .wrap{max-width:var(--mkt-max);margin:0 auto;padding:0 24px;box-sizing:border-box}
.mkt section{position:relative}

/* ---- skip link (Phase 10 accessibility) ----------------------------------- */
.skip-link{position:absolute;left:12px;top:-48px;z-index:100;background:var(--mkt-green);color:#fff;
  padding:10px 16px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;
  transition:top .16s var(--mkt-ease)}
.skip-link:focus{top:12px}

/* ---- top nav (sticky, blurs + shadows on scroll) ------------------------- */
.mkt-nav{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.86);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.mkt-nav.scrolled{border-bottom-color:var(--mkt-hair);box-shadow:0 6px 24px rgba(17,20,24,.07)}
.mkt-nav .bar{display:flex;align-items:center;gap:24px;height:64px;max-width:var(--mkt-max);width:100%;box-sizing:border-box;margin:0 auto;padding:0 24px}
.mkt-logo{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:18px;color:var(--mkt-green);text-decoration:none;letter-spacing:.18em;text-transform:uppercase;border-radius:4px}
.mkt-logo .dot,.mkt-logo .logo-v{color:var(--mkt-gold)}
.mkt-nav nav{margin-left:auto;display:flex;align-items:center;gap:26px;min-width:0}
.mkt-nav nav a{position:relative;color:var(--mkt-ink);text-decoration:none;font-size:15px;font-weight:500;opacity:.82;transition:opacity .18s;border-radius:4px}
.mkt-nav nav a:not(.navcta)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--mkt-gold);transition:right .2s var(--mkt-ease)}
.mkt-nav nav a:not(.navcta):hover::after{right:0}
.mkt-nav nav a:hover{opacity:1}
.mkt-nav .navcta{background:var(--mkt-green);color:#fff;padding:9px 16px;border-radius:var(--mkt-radius);opacity:1}
.mkt-nav .navcta:hover{background:var(--mkt-green2)}
.mkt-nav .langsw{border:1px solid var(--mkt-hair);border-radius:999px;padding:5px 12px;font-size:13px;
  font-weight:600;letter-spacing:.02em;opacity:1!important;color:var(--mkt-slate)}
.mkt-nav .langsw:hover{border-color:var(--mkt-gold);color:var(--mkt-ink)}
.mkt-nav .langsw::after{display:none!important}
.mkt-logo:focus-visible,.mkt-nav nav a:focus-visible,.mkt-btn:focus-visible,.card:focus-visible,.fork a:focus-visible,.mkt-foot a:focus-visible,.mkt-burger:focus-visible{
  outline:none;box-shadow:var(--ring,0 0 0 3px rgba(11,61,46,.30));
}
/* Mobile navigation: below 820px the inline nav collapses into a disclosure
   panel opened by .mkt-burger (button injected by site-config.js). Without JS
   the panel stays closed; the footer carries the full link set as fallback. */
.mkt-burger{display:none}
@media(max-width:820px){
  .mkt-nav .bar{gap:14px;position:relative}
  .mkt-burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
    width:42px;height:40px;margin-left:auto;padding:0 11px;box-sizing:border-box;
    background:none;border:1px solid var(--mkt-hair);border-radius:8px;cursor:pointer;
  }
  .mkt-burger span{display:block;height:1.5px;background:var(--mkt-ink);border-radius:1px}
  .mkt-nav nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--mkt-paper);border-bottom:1px solid var(--mkt-hair);
    box-shadow:0 18px 40px rgba(17,20,24,.12);padding:8px 24px 18px;
  }
  .mkt-nav.menu-open nav{display:flex}
  .mkt-nav nav a{display:block;padding:12px 0;font-size:16px}
  .mkt-nav nav a:not(.navcta)::after{display:none}
  .mkt-nav .langsw{align-self:flex-start;margin:6px 0 2px}
  .mkt-nav .navcta{margin-top:10px;text-align:center;padding:12px 14px;font-size:15px;white-space:nowrap}
}

/* ---- buttons ------------------------------------------------------------- */
.mkt-btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;
  padding:14px 24px;border-radius:8px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .16s var(--mkt-ease),box-shadow .2s,background .2s}
.mkt-btn:hover{transform:translateY(-2px)}
.mkt-btn-primary{background:var(--mkt-green);color:#fff;box-shadow:0 10px 26px rgba(17,20,24,.14)}
.mkt-btn-primary:hover{background:var(--mkt-green2);box-shadow:0 14px 32px rgba(17,20,24,.18)}
.mkt-btn-ghost{background:rgba(255,255,255,.72);color:var(--mkt-green);border-color:var(--mkt-hair)}
.mkt-btn-ghost:hover{border-color:var(--mkt-gold);box-shadow:0 10px 26px rgba(17,20,24,.08)}
.mkt-btn .arw{transition:transform .18s var(--mkt-ease)}
.mkt-btn:hover .arw{transform:translateX(3px)}

/* ---- hero ---------------------------------------------------------------- */
.hero{overflow:hidden;padding:74px 0 44px;text-align:left;min-height:min(640px,calc(100svh - 84px));display:flex;align-items:center;box-sizing:border-box}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--hero-img,url('/assets/juvo/hero-city-monolith.png'));background-size:cover;background-position:center;z-index:0;transform:scale(1.01)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,248,244,.97),rgba(250,248,244,.78) 48%,rgba(250,248,244,.22));z-index:0}
.hero .glow{display:none}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mkt-gold-text);margin-bottom:20px}
.hero h1{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;letter-spacing:0;line-height:1.05;
  font-size:clamp(36px,5.2vw,58px);max-width:20ch;margin:0 0 20px;color:var(--mkt-green)}
.hero h1 .grad{color:var(--mkt-ink)}
.hero p.sub{font-size:clamp(17px,2vw,21px);color:var(--mkt-slate);max-width:58ch;margin:0 0 34px;line-height:1.55}
.hero .cta-row{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}
.hero .undernote{margin-top:18px;font-size:14px;color:var(--mkt-slate)}
.hero .undernote a{color:var(--mkt-green);text-decoration:none;font-weight:600}

/* the two product buttons under the hero (the fork) */
.paths{padding:28px 0 42px;background:var(--mkt-paper)}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:0}
.fork a{display:block;text-align:left;text-decoration:none;background:rgba(255,255,255,.82);border:1px solid var(--mkt-hair);
  border-radius:var(--mkt-radius);padding:22px 24px;transition:transform .18s var(--mkt-ease),box-shadow .22s,border-color .22s}
.fork a:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(17,20,24,.11);border-color:var(--mkt-gold)}
.fork .k{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mkt-gold-text)}
.fork h3{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;font-size:24px;color:var(--mkt-green);margin:8px 0 8px}
.fork p{font-size:15px;color:var(--mkt-slate);line-height:1.5;margin:0}
.fork .go{margin-top:14px;color:var(--mkt-green);font-weight:600;font-size:15px;display:inline-flex;gap:7px;align-items:center}
@media(max-width:680px){
  .hero{min-height:auto;padding:52px 0 28px}
  .hero h1{font-size:34px;line-height:1.14;max-width:15ch}
  .hero p.sub{font-size:16px;line-height:1.48;max-width:40ch;margin-bottom:24px}
  .hero .cta-row{flex-direction:column;align-items:flex-start;gap:8px}
  .hero .mkt-btn{padding:13px 22px;font-size:15px}
  .hero .mkt-btn-ghost{padding:6px 0;border:0;background:transparent;box-shadow:none}
  .fork{grid-template-columns:1fr}
  .paths{padding:18px 0 34px}
}

/* ---- generic section ----------------------------------------------------- */
.sec{padding:84px 0}
.sec.tint{background:var(--mkt-tint);border-top:1px solid var(--mkt-hair);border-bottom:1px solid var(--mkt-hair)}
.sec .lead{max-width:720px;margin:0 auto 50px;text-align:center}
.sec .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mkt-gold-text);display:block;margin-bottom:14px}
.sec h2{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;letter-spacing:0;font-size:clamp(30px,4vw,44px);line-height:1.08;color:var(--mkt-ink);margin:0 0 16px}
.sec .lead p{font-size:18px;color:var(--mkt-slate);line-height:1.6;margin:0}
@media(max-width:680px){.sec{padding:56px 0}.sec .lead{margin-bottom:34px}}

/* benefit / feature grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--mkt-hair);border-radius:var(--mkt-radius-lg);padding:28px 26px;
  transition:transform .2s var(--mkt-ease),box-shadow .24s,border-color .24s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(17,20,24,.08);border-color:var(--mkt-gold)}
.card .ic{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:var(--mkt-tint);color:var(--mkt-green);margin-bottom:18px;box-shadow:0 1px 3px rgba(17,20,24,.06)}
.card .ic svg{width:23px;height:23px}
.card h3{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;font-size:23px;color:var(--mkt-ink);margin:0 0 8px}
.card p{font-size:15.5px;color:var(--mkt-slate);line-height:1.55;margin:0}

/* big statement row */
.statement{text-align:center;max-width:20ch;margin:0 auto;font-family:'Cormorant Garamond','Fraunces',Georgia,serif;
  font-weight:600;font-size:clamp(28px,3.8vw,44px);line-height:1.12;letter-spacing:0}
.statement .grad{color:var(--mkt-green)}

/* how-it-helps numbered steps (outcomes, not mechanics) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:28px}}
.step{position:relative;padding-top:26px;border-top:1px solid var(--mkt-hair)}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:14px;
  border-radius:50%;border:1px solid var(--mkt-hair);background:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--mkt-gold-text);font-weight:600}
.step h3{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;font-size:22px;margin:0 0 8px;color:var(--mkt-ink)}
.step p{font-size:15px;color:var(--mkt-slate);line-height:1.55;margin:0}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--mkt-green2),var(--mkt-green));color:#fff;border-radius:var(--mkt-radius-xl);
  padding:64px 48px;text-align:center;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(6,38,29,.16)}
.cta-band::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--mkt-gold);pointer-events:none}
.cta-band h2{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;font-size:clamp(28px,3.8vw,42px);margin:0 0 14px;position:relative;color:#fff}
.cta-band p{color:rgba(255,255,255,.9);font-size:18px;max-width:52ch;margin:0 auto 26px;position:relative}
.cta-band .mkt-btn-primary{background:#fff;color:var(--mkt-green);position:relative}
.cta-band .mkt-btn-primary:hover{background:#f2f7f4}

/* ---- footer -------------------------------------------------------------- */
.mkt-foot{border-top:1px solid var(--mkt-hair);padding:52px 0 40px;background:#fff}
.mkt-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.mkt-foot .cols{grid-template-columns:1fr 1fr}}
.mkt-foot h4{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mkt-slate);margin:0 0 14px}
.mkt-foot a{display:block;color:var(--mkt-ink);text-decoration:none;font-size:15px;opacity:.82;margin-bottom:9px;transition:opacity .16s}
.mkt-foot a:hover{opacity:1}
.mkt-foot .brandcol .mkt-logo{font-size:24px}
.mkt-foot .brandcol p{color:var(--mkt-slate);font-size:14px;line-height:1.55;margin:12px 0 0;max-width:34ch}
.mkt-foot .legal{margin-top:36px;border-top:1px solid var(--mkt-hair);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mkt-slate);font-size:13px}

/* ---- scroll reveal ------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--mkt-ease),transform .6s var(--mkt-ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.in{opacity:1;transform:none}

/* --- Legal-page reading aids: table of contents + shared readability --- */
.legal-toc{margin:26px 0 34px;padding:18px 22px;background:var(--mkt-tint,#F2F1EC);border:1px solid var(--mkt-hair);border-radius:10px}
.legal-toc .toc-title{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mkt-slate);margin:0 0 10px;font-weight:500}
.legal-toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.legal-toc li{font-size:14px;line-height:1.9;break-inside:avoid}
.legal-toc a{color:var(--mkt-green);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
@media(max-width:640px){.legal-toc ol{columns:1}}

/* Visible focus for form controls (border-color alone is too subtle) */
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--ring,0 0 0 3px rgba(11,61,46,.30));
}

/* Mid-width header squeeze: keep 5 links + switcher + CTA breathing 820-1080px */
@media(min-width:821px) and (max-width:1080px){
  .mkt-nav nav{gap:16px}
  .mkt-nav nav a{font-size:14px}
  .mkt-nav .navcta{padding:9px 10px}
}

/* Print: legal documents print as clean briefs, chrome stripped */
@media print{
  .mkt-nav,.mkt-foot,.mkt-burger,.skip-link,.cta-band,.navcta,.legal-toc{display:none!important}
  body{background:#fff!important;color:#000!important}
  main{max-width:100%!important}
  a{color:#000!important;text-decoration:none!important}
  .legal-doc a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#444}
}

@media(prefers-reduced-motion:reduce){
  .hero .glow{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .mkt-btn:hover,.card:hover,.fork a:hover{transform:none}
}

/* ---- long-form legal pages ---------------------------------------------- */
.legal-doc{max-width:760px;margin:0 auto;padding:56px 24px 72px}
.legal-doc h1{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;color:var(--mkt-green);font-size:36px;margin:0 0 6px}
.legal-doc .updated{color:var(--mkt-slate);font-size:14px;margin-bottom:32px}
.legal-doc h2{font-family:'Cormorant Garamond','Fraunces',Georgia,serif;font-weight:600;font-size:23px;margin:34px 0 10px;color:var(--mkt-ink)}
.legal-doc p,.legal-doc li{font-size:15.5px;line-height:1.62;color:var(--mkt-ink)}
.legal-doc a{color:var(--mkt-green)}
.legal-doc ul{padding-left:20px}