/* ============================================================
   Momentum design system.

   Copied verbatim from the style block in landing.html so the newer
   marketing pages inherit the exact same fonts, palette, spacing,
   buttons and hero treatment. landing.html and apply.html still carry
   their own inline copies on purpose. Folding those two into this file
   is a separate change, made only after the new pages are reviewed.

   Used by: trades.html, experts.html
   ============================================================ */

  :root{
    --navy:#16233f;
    --navy-deep:#0f1a30;
    --navy-black:#0a1222;
    --gold:#b98a34;
    --gold-soft:#c99b45;
    --gold-bright:#d9ab52;
    --cream:#f6f1e7;
    --cream-warm:#efe7d6;
    --ink:#25324d;
    --muted:#5b6479;
    --line:rgba(22,35,63,0.12);
    --line-light:rgba(246,241,231,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .serif{font-family:'Fraunces',Georgia,serif;}
  .wrap{max-width:1100px;margin:0 auto;padding:0 28px;}

  /* ---------- NAV (dark glass over video) ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:60;
    background:linear-gradient(180deg, rgba(10,18,34,.72), rgba(10,18,34,0));
    transition:background .3s ease, backdrop-filter .3s ease;
    padding:6px 0;
  }
  nav.scrolled{
    background:rgba(10,18,34,.88);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line-light);
  }
  .nav-inner{
    max-width:1100px;margin:0 auto;padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{font-family:'Fraunces',serif;font-weight:600;font-size:23px;color:var(--cream);letter-spacing:-.01em;}
  .logo span{color:var(--gold-bright);}
  .nav-actions{display:flex;align-items:center;gap:22px;}
  .nav-login{font-size:14.5px;font-weight:500;color:rgba(246,241,231,.8);text-decoration:none;transition:color .2s;}
  .nav-login:hover{color:var(--cream);}
  .btn{
    display:inline-block;font-weight:600;font-size:15.5px;text-align:center;
    text-decoration:none;cursor:pointer;border:none;border-radius:100px;
    transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
  }
  .btn-gold{background:var(--gold);color:var(--navy-black);padding:15px 32px;font-size:16px;box-shadow:0 3px 0 rgba(0,0,0,.25);}
  .btn-gold:hover{transform:translateY(-2px);background:var(--gold-bright);box-shadow:0 12px 30px rgba(185,138,52,.45);}
  .btn-outline{
    color:var(--cream);padding:14px 30px;border:1.5px solid rgba(246,241,231,.4);
    background:rgba(246,241,231,.06);backdrop-filter:blur(4px);
  }
  .btn-outline:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
  .nav-actions .btn-gold{padding:11px 24px;font-size:14.5px;}
  .micro{font-size:13.5px;color:var(--muted);margin-top:12px;}

  /* ---------- CINEMATIC HERO WITH VIDEO ---------- */
  header.hero{
    position:relative;min-height:100svh;
    display:flex;align-items:center;
    background:var(--navy-black);color:var(--cream);
    overflow:hidden;
  }
  .hero-media{position:absolute;inset:0;z-index:0;}
  /* HERO VIDEO SLOT: Claude Code drops the real file at /assets/momentum-hero.mp4 and a poster at /assets/momentum-hero-poster.jpg */
  .hero-media video, .hero-media img.fallback{
    width:100%;height:100%;object-fit:cover;object-position:center;
    filter:saturate(.92) contrast(1.02);
  }
  .hero-media .placeholder{
    width:100%;height:100%;
    background:
      radial-gradient(90% 70% at 70% 30%, rgba(185,138,52,.28), transparent 60%),
      radial-gradient(70% 60% at 20% 80%, rgba(185,138,52,.12), transparent 55%),
      linear-gradient(160deg, #101a2e 0%, #0a1222 55%, #131f38 100%);
  }
  .hero-scrim{
    position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(90deg, rgba(10,18,34,.92) 0%, rgba(10,18,34,.70) 42%, rgba(10,18,34,.28) 100%),
      linear-gradient(0deg, rgba(10,18,34,.92) 0%, rgba(10,18,34,0) 34%);
  }
  .hero-content{position:relative;z-index:2;width:100%;padding:140px 0 110px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold-bright);margin-bottom:26px;
  }
  .eyebrow::before{content:"";width:34px;height:1.5px;background:var(--gold-bright);}
  .hero h1{
    font-family:'Fraunces',serif;font-weight:600;
    font-size:clamp(40px,6.4vw,74px);line-height:1.02;letter-spacing:-.022em;
    color:var(--cream);max-width:15ch;margin-bottom:26px;
    text-shadow:0 2px 24px rgba(0,0,0,.35);
  }
  .hero h1 em{font-style:italic;color:var(--gold-bright);}
  .hero-sub{
    font-size:clamp(17px,2.2vw,20.5px);color:rgba(246,241,231,.82);
    max-width:50ch;margin-bottom:38px;line-height:1.55;
  }
  .hero-sub strong{color:var(--cream);font-weight:600;}
  .hero-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
  .hero .micro{color:rgba(246,241,231,.6);}
  .proof-inline{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:34px;
    font-size:14px;color:rgba(246,241,231,.72);
  }
  .proof-inline .tick{color:var(--gold-bright);font-weight:700;margin-right:5px;}
  .scroll-hint{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
    width:22px;height:36px;border:1.5px solid rgba(246,241,231,.4);border-radius:12px;
  }
  .scroll-hint::after{
    content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);
    width:3px;height:8px;border-radius:2px;background:var(--gold-bright);
    animation:drop 1.8s infinite ease;
  }
  @keyframes drop{0%{opacity:0;top:7px}30%{opacity:1}100%{opacity:0;top:20px}}

  /* ---------- STRIP ---------- */
  .strip{background:var(--cream-warm);border-bottom:1px solid var(--line);padding:22px 0;}
  .strip-inner{
    max-width:1100px;margin:0 auto;padding:0 28px;
    display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;
    font-size:14.5px;color:var(--muted);
  }
  .strip-inner b{color:var(--navy);font-weight:600;}
  .strip .sep{color:var(--gold);}

  /* ---------- SECTION SHELL ---------- */
  section{padding:100px 0;}
  .sec-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
  .sec-title{
    font-family:'Fraunces',serif;font-weight:600;
    font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.018em;
    color:var(--navy);max-width:22ch;margin-bottom:20px;
  }
  .sec-lead{font-size:17.5px;color:var(--muted);max-width:56ch;line-height:1.6;}
  .sec-cta{margin-top:40px;}
  .btn-navy{background:var(--navy);color:var(--cream);padding:15px 32px;font-size:16px;box-shadow:0 2px 0 rgba(15,26,48,.25);}
  .btn-navy:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,26,48,.3);}

  /* ---------- IMAGE SLOTS (Higgsfield fills these) ---------- */
  .img-slot{
    position:relative;border-radius:20px;overflow:hidden;
    box-shadow:0 24px 60px rgba(10,18,34,.28);
  }
  .img-slot img{width:100%;height:100%;object-fit:cover;display:block;}
  .img-slot .ph{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(80% 70% at 65% 30%, rgba(185,138,52,.3), transparent 60%),
      linear-gradient(150deg,#182742 0%,#0f1a30 60%,#1b2946 100%);
    color:rgba(246,241,231,.4);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:20px;
  }
  .img-frame{position:relative;}
  .img-frame::after{
    content:"";position:absolute;inset:14px;border:1px solid rgba(217,171,82,.35);
    border-radius:12px;pointer-events:none;
  }

  /* ---------- WHO (split with image) ---------- */
  .who{background:var(--navy-deep);color:var(--cream);}
  .who .sec-title{color:var(--cream);}
  .who .sec-lead{color:rgba(246,241,231,.72);}
  .who .sec-eyebrow{color:var(--gold-soft);}
  .who-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
  .who-cards{display:grid;gap:20px;margin-top:40px;}
  .who-card{background:rgba(246,241,231,.05);border:1px solid var(--line-light);border-radius:18px;padding:26px 28px;}
  .who-card .n{font-family:'Fraunces',serif;color:var(--gold-soft);font-size:14.5px;font-weight:600;letter-spacing:.08em;margin-bottom:10px;display:block;}
  .who-card p{color:rgba(246,241,231,.86);font-size:16px;line-height:1.55;}
  .who-card p strong{color:var(--cream);font-weight:600;}
  .who .img-slot{aspect-ratio:4/5;}
  .who .micro{color:rgba(246,241,231,.55);}

  /* ---------- OPPORTUNITIES ---------- */
  .opps{background:var(--cream);}
  .opp-list{display:flex;flex-wrap:wrap;gap:13px;margin-top:40px;}
  .opp{
    display:inline-flex;align-items:center;gap:11px;
    background:#fff;border:1px solid var(--line);
    padding:15px 22px;border-radius:14px;
    font-family:'Fraunces',serif;font-size:18.5px;font-weight:500;color:var(--navy);
    transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .opp:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 26px rgba(22,35,63,.1);}
  .opp .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;}
  .opp-note{margin-top:30px;font-size:16px;color:var(--muted);max-width:54ch;}
  .opp-note strong{color:var(--navy);font-weight:600;}

  /* ---------- THREE WAYS ---------- */
  .how{background:var(--cream-warm);}
  .way{display:grid;grid-template-columns:auto 1fr;gap:34px;padding:42px 0;border-top:1px solid var(--line);align-items:start;}
  .way:last-of-type{border-bottom:1px solid var(--line);}
  .way-num{font-family:'Fraunces',serif;font-size:clamp(42px,6vw,70px);font-weight:600;line-height:.9;color:var(--gold);opacity:.9;}
  .way-body h3{font-family:'Fraunces',serif;font-size:clamp(22px,3vw,29px);font-weight:600;color:var(--navy);margin-bottom:12px;line-height:1.12;}
  .way-body p{font-size:16.5px;color:var(--muted);max-width:56ch;line-height:1.6;}
  .way-body p + p{margin-top:10px;}
  .way-body .feel{color:var(--navy);font-family:'Fraunces',serif;font-style:italic;font-size:18px;}

  /* ---------- STORY (dark cinematic split) ---------- */
  .story{background:var(--navy-black);color:var(--cream);position:relative;overflow:hidden;}
  .story::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(70% 90% at 85% 10%, rgba(185,138,52,.14), transparent 55%);
    pointer-events:none;
  }
  .story .wrap{position:relative;}
  .story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
  .story .img-slot{aspect-ratio:4/5;}
  .story .sec-eyebrow{color:var(--gold-soft);}
  .story .sec-title{color:var(--cream);}
  .story-copy p{font-family:'Fraunces',serif;font-size:clamp(18px,2.3vw,21.5px);line-height:1.5;color:rgba(246,241,231,.92);}
  .story-copy p + p{margin-top:16px;}
  .story-copy .who-said{margin-top:24px;font-family:'Inter',sans-serif;font-size:14.5px;color:rgba(246,241,231,.6);border-left:2px solid var(--gold);padding-left:14px;}
  .story-copy .who-said b{color:var(--cream);}

  /* ---------- FAQ ---------- */
  .faq-item{border-top:1px solid var(--line);}
  .faq-item:last-of-type{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;background:none;border:none;text-align:left;cursor:pointer;
    padding:22px 40px 22px 0;position:relative;
    font-family:'Fraunces',serif;font-size:19px;font-weight:600;color:var(--navy);
  }
  .faq-q::after{
    content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
    font-size:24px;color:var(--gold);font-weight:400;transition:transform .2s;
  }
  .faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .faq-a p{padding:0 0 22px;font-size:16px;color:var(--muted);max-width:60ch;line-height:1.6;}

  /* ---------- APPLY ---------- */
  .apply{
    background:
      radial-gradient(100% 120% at 12% 0%, rgba(185,138,52,.22), transparent 50%),
      var(--navy-deep);
    color:var(--cream);
  }
  .apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  .apply h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,4.5vw,46px);line-height:1.06;color:var(--cream);margin-bottom:20px;}
  .apply h2 em{font-style:italic;color:var(--gold-bright);}
  .apply .lead{font-size:17.5px;color:rgba(246,241,231,.75);max-width:44ch;line-height:1.6;margin-bottom:26px;}
  .apply ul{list-style:none;margin-top:6px;}
  .apply li{padding:10px 0 10px 30px;position:relative;font-size:15.5px;color:rgba(246,241,231,.82);}
  .apply li::before{content:"\2713";position:absolute;left:0;color:var(--gold-bright);font-weight:700;}
  .form-card{
    background:var(--cream);border-radius:20px;padding:36px 34px;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
  }
  .form-card h3{font-family:'Fraunces',serif;font-size:23px;font-weight:600;color:var(--navy);margin-bottom:6px;}
  .form-card .sub{font-size:14.5px;color:var(--muted);margin-bottom:24px;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:7px;}
  .field input,.field select{
    width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;
    font-family:'Inter',sans-serif;font-size:15.5px;color:var(--ink);background:#fff;
    transition:border-color .2s, box-shadow .2s;
  }
  .field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,138,52,.15);}
  .form-card .btn-gold{width:100%;margin-top:6px;}
  .form-card .btn-gold[disabled]{opacity:.7;cursor:progress;transform:none;}
  .form-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px;}
  .form-error{color:#b4462f;}
  .form-success{display:none;text-align:center;padding:28px 8px;}
  .form-success .big{font-family:'Fraunces',serif;font-size:24px;color:var(--navy);font-weight:600;margin-bottom:10px;}
  .form-success p{font-size:15.5px;color:var(--muted);line-height:1.6;}
  .form-card.done form{display:none;}
  .form-card.done .form-success{display:block;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-black);color:rgba(246,241,231,.55);padding:36px 0;border-top:1px solid var(--line-light);}
  .foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;}
  .foot-logo{font-family:'Fraunces',serif;font-size:19px;color:var(--cream);font-weight:600;}
  .foot-logo span{color:var(--gold-soft);}
  .foot-inner a{color:rgba(246,241,231,.6);text-decoration:none;font-size:14px;margin-left:20px;transition:color .2s;}
  .foot-inner a:hover{color:var(--cream);}

  /* ---------- STICKY MOBILE CTA ---------- */
  .sticky-cta{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(10,18,34,.92);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-light);
  }
  .sticky-cta .btn-gold{display:block;width:100%;padding:15px;}

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1;transform:none;}

  @media (max-width:900px){
    .who-grid,.story-grid,.apply-grid{grid-template-columns:1fr;gap:44px;}
    .who .img-slot,.story .img-slot{aspect-ratio:16/10;}
    .story-grid .img-frame{order:2;}
  }
  @media (max-width:760px){
    section{padding:68px 0;}
    .hero-content{padding:120px 0 90px;}
    .way{grid-template-columns:1fr;gap:10px;padding:32px 0;}
    .way-num{font-size:44px;}
    .nav-login{display:none;}
    .sticky-cta{display:block;}
    body{padding-bottom:74px;}
    .scroll-hint{display:none;}
    .field input,.field select{font-size:16px;}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
    .scroll-hint::after{animation:none;}
    .hero-media video{display:none;}
    .hero-media .placeholder{display:block;}
  }

  /* ============================================================
     SHARED MARKETING COMPONENTS

     Everything above is the landing page system, copied verbatim.
     Everything below is new, and lives here because more than one page
     uses it. The proof strip in particular must stay identical on
     /trades and /experts, so it has exactly one definition.
     ============================================================ */

  /* ---------- PROOF STRIP (evidence, not a viewing experience) ---------- */
  .proof{background:var(--cream-warm);}
  .proof .sec-title{max-width:26ch;}
  .proof-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
  .vid{min-width:0;}
  .vid-frame{
    position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
    background:var(--navy-black);border:1px solid var(--line);
    box-shadow:0 10px 26px rgba(22,35,63,.12);
  }
  .vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
  .vid-cap{margin-top:11px;font-size:13.5px;line-height:1.42;color:var(--navy);font-weight:500;}
  .vid-chan{margin-top:3px;font-size:12px;color:var(--muted);}
  .proof .sec-lead + .sec-lead{margin-top:14px;}
  .proof-link{margin-top:32px;font-size:15.5px;color:var(--muted);}
  .proof-link a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:1px;}
  .proof-link a:hover{color:var(--gold);}

  /* ---------- TEAM BIOS ---------- */
  .team{background:var(--cream);}
  .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;}
  .bio{
    background:#fff;border:1px solid var(--line);border-radius:20px;
    padding:28px;box-shadow:0 12px 30px rgba(22,35,63,.06);
  }
  .bio-photo{
    aspect-ratio:4/5;border-radius:14px;overflow:hidden;margin-bottom:22px;
    background:
      radial-gradient(80% 70% at 65% 30%, rgba(185,138,52,.3), transparent 60%),
      linear-gradient(150deg,#182742 0%,#0f1a30 60%,#1b2946 100%);
    display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
    color:rgba(246,241,231,.45);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;
  }
  .bio-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .bio h3{font-family:'Fraunces',serif;font-size:25px;font-weight:600;color:var(--navy);margin-bottom:4px;}
  .bio .role{font-size:14px;color:var(--gold);font-weight:600;letter-spacing:.04em;margin-bottom:14px;}
  .bio p{font-size:15.5px;color:var(--muted);line-height:1.6;}
  .bio p + p{margin-top:8px;}
  .bio .todo{
    margin-top:16px;font-size:12.5px;color:var(--muted);
    border-left:2px solid var(--gold);padding-left:12px;font-style:italic;
  }

  /* ---------- SINGLE COLUMN DARK SECTIONS ---------- */
  .single{max-width:none;}
  .single .sec-title{max-width:24ch;}
  /* Centered variant: the copy sits in a narrow measure down the middle rather
     than ranged left. The measure caps stay so lines never run too wide. */
  .centered{text-align:center;}
  .centered .sec-title,.centered .sec-lead,.centered .story-copy p{
    margin-left:auto;margin-right:auto;
  }
  .centered .sec-title{max-width:20ch;}
  .centered .story-copy p{max-width:60ch;}
  .centered .who-said{
    border-left:none;padding-left:0;border-top:1px solid var(--gold);
    padding-top:14px;display:inline-block;margin-top:24px;
  }
  /* Two cards that sit side by side, then stack on a phone so neither one
     squeezes into a narrow column of broken lines. */
  .cards-2{grid-template-columns:1fr 1fr;}

  @media (max-width:900px){
    .team-grid{grid-template-columns:1fr;gap:28px;}
  }
  @media (max-width:760px){
    .cards-2{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    /* At phone width the strip becomes a horizontal scroll row so the videos
       stay evidence sized instead of stacking into three large players. */
    .proof-videos{
      display:flex;gap:14px;overflow-x:auto;margin-top:32px;
      padding-bottom:12px;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
    }
    .vid{flex:0 0 72%;scroll-snap-align:start;}
  }