/*
Theme Name: Monrovia Management
Theme URI: https://monroviamgmt.com
Author: Monrovia Management LLC
Description: Single-page brochure theme for Monrovia Management — U.S. to West Africa ocean freight. League Spartan + Montserrat, video hero, Nike-inspired open layout.
Version: 1.0.0
Requires PHP: 7.4
License: Proprietary
Text Domain: monrovia-management
*/

  :root{
    --ink:#0A0A0A;
    --teal:#63C4B9;
    --white:#FFFFFF;
    --dim:rgba(255,255,255,.7);
    --scrim:rgba(10,10,10,.84);
    --max:1080px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    font-family:'Montserrat',system-ui,sans-serif;
    background:var(--ink);color:var(--white);
    font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:2px}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(22px,5vw,48px)}
  h1,h2,h3{font-family:'League Spartan',sans-serif;text-transform:uppercase;letter-spacing:-.01em}

  /* the video is the site's floor — fixed, always there */
  .bgvideo{position:fixed;inset:0;width:100%;height:100vh;object-fit:cover;z-index:-1}

  .reveal{opacity:0;transform:translateX(64px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* ---------- header ---------- */
  header{
    position:fixed;inset:0 0 auto 0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px clamp(22px,5vw,48px);
    background:linear-gradient(rgba(10,10,10,.6),rgba(10,10,10,0));
  }
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
  .brand img{height:36px;width:auto;display:block}
  .brand span{font-family:'League Spartan',sans-serif;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;line-height:1.15}
  nav{display:flex;align-items:center;gap:clamp(16px,3vw,34px)}
  nav a{text-decoration:none;font-size:13px;font-weight:600;transition:opacity .2s}
  nav a:hover{opacity:.6}
  .pill{background:var(--teal);color:var(--ink) !important;padding:11px 22px;border-radius:999px;font-weight:700}
  @media(max-width:680px){nav a:not(.pill){display:none}.pill{display:none}}
  .burger{display:none;background:none;border:0;cursor:pointer;padding:12px}
  .burger span,.burger span::before,.burger span::after{
    display:block;width:24px;height:2.5px;background:var(--white);border-radius:2px;position:relative;content:"";
  }
  .burger span::before{position:absolute;top:-8px}
  .burger span::after{position:absolute;top:8px}
  @media(max-width:680px){.burger{display:block}}

  .mmenu{
    position:fixed;inset:0;z-index:90;background:var(--ink);
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    padding:0 34px;transform:translateX(100%);
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .mmenu.open{transform:none}
  @media (prefers-reduced-motion:reduce){.mmenu{transition:none}}
  .mmenu img{height:38px;width:auto;align-self:flex-start;margin-bottom:26px}
  .mmenu a{
    font-family:'League Spartan',sans-serif;font-weight:900;text-transform:uppercase;
    text-decoration:none;font-size:34px;line-height:1.3;padding:8px 0;
  }
  .mmenu a:hover{color:var(--teal)}
  .mmenu .close{position:absolute;top:14px;right:20px;background:none;border:0;cursor:pointer;color:var(--white);font-size:36px;line-height:1;padding:12px;font-family:'Montserrat',sans-serif}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.05) 0%,rgba(10,10,10,0) 55%,rgba(10,10,10,.6) 94%)}
  .hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(38px,7vh,72px)}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--teal)}
  h1{font-weight:900;font-size:clamp(38px,6vw,78px);line-height:.94;margin-top:12px;text-shadow:0 2px 22px rgba(10,10,10,.4)}
  h1 em{font-style:normal;color:var(--teal)}
  .hero p{max-width:38ch;margin-top:14px;font-size:clamp(14px,1.2vw,16px);font-weight:500;color:rgba(255,255,255,.95);text-shadow:0 1px 12px rgba(10,10,10,.45)}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .btn{display:inline-block;text-decoration:none;font-weight:700;font-size:14px;padding:14px 28px;border-radius:999px;transition:transform .2s,opacity .2s}
  .btn:hover{transform:translateY(-2px);opacity:.9}
  .btn-teal{background:var(--teal);color:var(--ink)}
  .btn-white{background:var(--white);color:var(--ink)}

  /* routes strip */
  .routes{background:var(--scrim);padding:18px 0;overflow:hidden;backdrop-filter:blur(2px)}
  .routes-track{display:flex;white-space:nowrap;width:max-content;animation:slide 40s linear infinite}
  @media (prefers-reduced-motion:reduce){.routes-track{animation:none}}
  .routes span{font-family:'League Spartan',sans-serif;font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.06em;padding:0 26px}
  .routes span b{color:var(--teal)}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- content sections float over the video ---------- */
  section{background:var(--scrim);padding:clamp(56px,7vw,88px) 0}
  .gap{height:34vh} /* the video breathes here between sections */
  @media(max-width:768px){.gap{height:22vh}}
  h2{font-weight:900;font-size:clamp(28px,4vw,48px);line-height:.98;margin-top:10px}
  h2 em{font-style:normal;color:var(--teal)}

  /* services: four one-liners */
  .svc{margin-top:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:clamp(22px,3vw,32px)}
  .svc-item h3{font-weight:800;font-size:clamp(20px,2.4vw,28px)}
  .svc-item h3 b{color:var(--teal);font-weight:800;margin-right:10px}
  .svc-item p{color:var(--dim);font-size:15px;max-width:56ch;margin-top:4px}

  /* process: four compact steps */
  .steps{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,32px)}
  @media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
  .step .num{font-family:'League Spartan',sans-serif;font-weight:900;font-size:clamp(34px,4vw,52px);line-height:.85;color:var(--teal)}
  .step h3{font-size:clamp(16px,1.6vw,19px);font-weight:800;margin-top:10px}
  .step p{color:var(--dim);font-size:13.5px;margin-top:4px}

  /* contact */
  .contact h2{max-width:14ch}
  .contact .sub{color:var(--dim);margin-top:14px;max-width:44ch;font-size:15px}
  .contact .btn{margin-top:24px}
  .contact .email{display:block;margin-top:14px;font-size:14px;font-weight:600;color:var(--teal);text-decoration:none}
  .contact .email:hover{text-decoration:underline}

  /* straight answers */
  .faq{margin-top:clamp(24px,3vw,36px)}
  .faq details{padding:16px 0}
  .faq details + details{border-top:1px solid rgba(255,255,255,.12)}
  .faq summary{
    cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    font-family:'League Spartan',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.8vw,20px);
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--teal);font-weight:800;font-size:22px;line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq details p{color:var(--dim);font-size:14.5px;margin-top:10px;max-width:62ch}

  .chips{margin-top:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
  .chip{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
  .chip b{color:var(--teal);font-family:'League Spartan',sans-serif;font-weight:900;font-size:20px;line-height:1}
  .chip p{font-size:15px;color:rgba(255,255,255,.88)}

  .contact-ways{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
  .contact .meta{margin-top:18px;font-size:13.5px;color:var(--dim)}
  .contact .meta a{color:var(--teal);text-decoration:none}
  .contact .meta a:hover{text-decoration:underline}

  .wa-float{
    position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;
    width:58px;height:58px;border-radius:50%;background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 22px rgba(0,0,0,.35);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wa-float:hover{transform:scale(1.08);box-shadow:0 8px 26px rgba(0,0,0,.45)}
  .wa-float svg{width:30px;height:30px;fill:#fff;display:block}
  @media (prefers-reduced-motion:reduce){.wa-float{transition:none}}
  @media (max-width:768px){
    .wa-float{right:auto;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:54px;height:54px}
    .wa-float svg{width:28px;height:28px}
  }

  footer{background:var(--ink);padding:26px 0}
  footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  footer p{font-size:12.5px;color:rgba(255,255,255,.45);font-weight:500}
  footer img{height:26px;width:auto}

  /* mobile: solid sections + video only up top (fixed video janks on phones) */
  @media(max-width:768px){
    .bgvideo{position:absolute;height:100svh}
    section{background:rgba(10,10,10,.97)}
    .routes{background:rgba(10,10,10,.97)}
    .gap{background:transparent}
    body{background:var(--ink)}
  }