/* ===================================================================
   Stoic Point Capital Management
   Palette and type taken from the firm logo and the quarterly deck.
   =================================================================== */

:root{
  /* Brand — sampled from the logo and the deck's theme palette */
  --navy:        #0B4369;   /* logo mark + deck accent 1 */
  --navy-deep:   #043054;   /* deck cover rule */
  --slate:       #7B8A97;   /* logo "POINT" + deck accent 2 */
  --gold:        #CBA45D;   /* deck accent 3 */
  --steel:       #4E89A4;   /* deck accent 4 */
  --mist:        #AAB3C3;   /* deck accent 5 */

  /* Surfaces and text */
  --paper:       #FFFFFF;
  --tint:        #F4F8FC;
  --line:        #E4E9EE;
  --ink:         #16232E;
  --muted:       #5A6774;

  --display: "Josefin Sans", "Century Gothic", "Futura", sans-serif;
  --body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem; text-decoration:none;
}
.skip:focus{ left:0; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

/* ---------------------------- Nav ---------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav__inner{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

/* flex:0 0 auto stops the anchor being squeezed by the menu beside it, and
   max-width:none stops the global img rule clamping the width while the
   height stays pinned — either one alone still distorts the wordmark. */
.nav__logo{ display:block; flex:0 0 auto; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.nav__logo img{ height:30px; width:auto; max-width:none; }

.nav__menu{ display:flex; align-items:center; gap:2.25rem; margin-left:auto; }
.nav__menu a{
  font-family:var(--display); font-weight:400; font-size:.9375rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  color:#fff; white-space:nowrap; transition:color .2s ease;
}
.nav__menu a:not(.btn){ padding-block:.35rem; border-bottom:1px solid transparent; }
.nav__menu a:not(.btn):hover{ border-bottom-color:currentColor; }

/* Scrolled state — nav turns to paper, logo fades in */
.nav.is-stuck{ background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom-color:var(--line); }
.nav.is-stuck .nav__logo{ opacity:1; pointer-events:auto; }
.nav.is-stuck .nav__menu a{ color:var(--navy); }
.nav.is-stuck .nav__menu .btn--login{ color:#fff; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:.875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.7rem 1.4rem; border-radius:2px; transition:background .2s ease, color .2s ease;
}
.btn--login{ background:var(--navy); color:#fff !important; }
.btn--login:hover{ background:var(--navy-deep); }
.btn--gold{ background:var(--gold); color:var(--navy-deep) !important; }
.btn--gold:hover{ background:#fff; }

/* Mobile toggle */
.nav__toggle{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:0; cursor:pointer; padding:0;
}
.nav__bars, .nav__bars::before, .nav__bars::after{
  display:block; width:24px; height:1.5px; background:#fff;
  transition:transform .25s ease, opacity .2s ease, background .3s ease;
}
.nav__bars{ margin-inline:auto; position:relative; }
.nav__bars::before, .nav__bars::after{ content:""; position:absolute; left:0; }
.nav__bars::before{ top:-7px; } .nav__bars::after{ top:7px; }
.nav.is-stuck .nav__bars, .nav.is-stuck .nav__bars::before, .nav.is-stuck .nav__bars::after{ background:var(--navy); }
.nav.is-open .nav__bars{ background:transparent !important; }
.nav.is-open .nav__bars::before{ transform:translateY(7px) rotate(45deg); background:var(--navy); }
.nav.is-open .nav__bars::after{ transform:translateY(-7px) rotate(-45deg); background:var(--navy); }

/* ---------------------------- Hero ---------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; background:var(--navy-deep);
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
/* Scrim so the white nav links stay legible over a bright photo */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(4,48,84,.62) 0%, rgba(4,48,84,.10) 32%, rgba(4,48,84,0) 55%);
}

/* The white band echoes the deck cover */
.hero__band{
  position:relative; z-index:2; background:var(--paper);
  border-top:3px solid var(--navy); border-bottom:3px solid var(--navy);
  padding:3.25rem 1.5rem 2.75rem; text-align:center;
}
.hero__h1{ margin:0; }
.hero__logo{ width:min(420px, 74vw); height:auto; margin:0 auto; }
.hero__tag{
  margin:1.6rem 0 0; font-family:var(--display); font-weight:300;
  font-size:clamp(.8rem, 1.6vw, .95rem); letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted);
  display:flex; justify-content:center; align-items:center; gap:.9rem; flex-wrap:wrap;
}

.hero__cue{
  position:absolute; left:50%; bottom:2.25rem; z-index:2;
  transform:translateX(-50%); width:38px; height:38px;
  display:grid; place-items:center;
}
.hero__cue span{
  width:11px; height:11px; border-right:1.5px solid #fff; border-bottom:1.5px solid #fff;
  transform:rotate(45deg); animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(4px,4px); } }
@media (prefers-reduced-motion:reduce){ .hero__cue span{ animation:none; } }

/* --------------------------- Sections --------------------------- */
.sec{ padding:clamp(4rem, 9vw, 7.5rem) 0; }
.sec--tint{ background:var(--tint); border-block:1px solid var(--line); }

.eyebrow{
  margin:0 0 1.5rem; font-family:var(--display); font-weight:600;
  font-size:.75rem; letter-spacing:.28em; text-transform:uppercase; color:var(--slate);
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); }
.eyebrow--light{ color:var(--gold); }
.eyebrow--light::after{ background:rgba(255,255,255,.22); }

.h2--top{
  font-family:var(--display); font-weight:300; color:var(--navy);
  font-size:clamp(1.65rem, 3.6vw, 2.6rem); line-height:1.24;
  letter-spacing:.005em; margin:0 0 2.5rem; max-width:24ch;
}
.h2{
  font-family:var(--display); font-weight:300; color:var(--navy);
  font-size:clamp(1.4rem, 2.6vw, 1.85rem); letter-spacing:.02em;
  margin:0 0 2rem;
}
.h2--top{ max-width:20ch; }

/* ---------------------- Updates & Appearances ---------------------- */
.media{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:3rem 2.5rem;
}
.media__card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
}
a.media__card:focus-visible{ outline-offset:6px; }

.media__thumb{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/9; background:var(--navy-deep);
  border:1px solid var(--line);
}
.media__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s ease;
}
a.media__card:hover .media__thumb img,
a.media__card:focus-visible .media__thumb img{ transform:scale(1.04); }

/* Play badge — drawn in CSS, no icon font or image needed */
.media__play{
  position:absolute; inset:0; margin:auto; width:58px; height:58px;
  border-radius:50%; background:rgba(4,48,84,.72);
  border:1.5px solid rgba(255,255,255,.85);
  display:grid; place-items:center;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.media__play::after{
  content:""; margin-left:4px;
  border-left:15px solid #fff;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  transition:border-left-color .25s ease;
}
a.media__card:hover .media__play{ background:var(--gold); border-color:var(--gold); transform:scale(1.06); }
a.media__card:hover .media__play::after{ border-left-color:var(--navy-deep); }

.media__body{ display:flex; flex-direction:column; flex:1; padding-top:1.35rem; }
.media__meta{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.65rem;
  margin-bottom:.65rem; font-family:var(--display); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate);
}
.media__source{ color:var(--navy); font-weight:600; }
.media__meta time::before{ content:"\00b7"; margin-right:.65rem; color:var(--mist); }

.media__title{
  font-family:var(--display); font-weight:600; font-size:1.1875rem;
  letter-spacing:.02em; line-height:1.32; color:var(--navy); margin-bottom:.6rem;
  transition:color .2s ease;
}
a.media__card:hover .media__title{ color:var(--steel); }
.media__desc{ color:var(--muted); font-size:1rem; margin-bottom:1.15rem; }
.media__desc em{ font-style:italic; }

.media__cta{
  margin-top:auto; align-self:flex-start;
  font-family:var(--display); font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
  border-bottom:1px solid var(--gold); padding-bottom:3px;
}
.media__cta span{ display:inline-block; transition:transform .25s ease; }
a.media__card:hover .media__cta span{ transform:translateX(4px); }

@media (prefers-reduced-motion:reduce){
  .media__thumb img, .media__play, .media__cta span{ transition:none; }
  a.media__card:hover .media__thumb img,
  a.media__card:hover .media__play,
  a.media__card:hover .media__cta span{ transform:none; }
}

/* Sub-headings inside Updates (Upcoming / Previously) */
.subhead{
  display:inline-block; margin:0 0 1.75rem; padding-bottom:.55rem;
  font-family:var(--display); font-weight:600; font-size:.875rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--navy);
  border-bottom:2px solid var(--gold);
}
.media + .subhead{ margin-top:3.75rem; }

/* A single featured item runs wide, with the thumbnail beside the text */
.media--feature{ grid-template-columns:1fr; }
.media--feature .media__card{ flex-direction:row; align-items:stretch; gap:2.5rem; }
.media--feature .media__thumb{ flex:0 0 46%; }
.media--feature .media__body{ padding-top:0; justify-content:center; }

/* Not a link: no pointer, no hover response */
.media__card--static{ cursor:default; }

/* -------------------------- Investor Login -------------------------- */
.login{ background:var(--navy-deep); color:#fff; padding:clamp(3.5rem, 7vw, 5.5rem) 0; }
.login__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem 3rem; flex-wrap:wrap;
}
.login__h{
  font-family:var(--display); font-weight:300; font-size:clamp(1.5rem, 3vw, 2.1rem);
  margin:0 0 .85rem; color:#fff; letter-spacing:.01em;
}
.login__p{ margin:0; color:rgba(255,255,255,.78); max-width:52ch; }
.login__inner > div{ flex:1 1 22rem; }
.login .btn--gold{ flex:0 0 auto; padding:.95rem 1.9rem; }

/* ----------------------------- Contact ----------------------------- */
.contact{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem; }
.contact__block{ border-top:1px solid var(--line); padding-top:1.35rem; }
.contact__label{
  margin:0 0 .6rem; font-family:var(--display); font-weight:600; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--slate);
}
.contact address, .contact p{ margin:0; font-style:normal; color:var(--ink); font-size:1.0625rem; }
.contact a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--gold); }
.contact a:hover{ color:var(--navy-deep); }

/* ------------------------------ Footer ------------------------------ */
.foot{ background:var(--navy); color:#fff; padding:clamp(3rem, 6vw, 4.5rem) 0 2.5rem; }
.foot__logo{ width:190px; height:auto; margin-bottom:2.25rem; }
.foot__legal{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem 3.5rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.18);
}
.foot__legal p{ margin:0; font-size:.8125rem; line-height:1.7; color:rgba(255,255,255,.75); }
.foot__legal a{ color:#fff; }
.foot__copy{
  margin:1.75rem 0 0; font-family:var(--display); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6);
}

/* --------------------------- Back to top --------------------------- */
.totop{
  position:fixed; right:1.75rem; bottom:1.75rem; z-index:90;
  width:46px; height:46px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--navy); border:1px solid rgba(255,255,255,.28);
  display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(4,48,84,.3);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--gold); }
.totop span{
  width:10px; height:10px; margin-top:3px;
  border-left:1.5px solid #fff; border-top:1.5px solid #fff;
  transform:rotate(45deg); transition:border-color .2s ease;
}
.totop:hover span{ border-color:var(--navy-deep); }
@media (prefers-reduced-motion:reduce){ .totop{ transition:opacity .01s, visibility .01s; } }

/* ---------------------------- Responsive ---------------------------- */
@media (max-width:900px){
  /* Below this the full menu no longer fits beside the wordmark, so the
     nav collapses to the toggle rather than squeezing the logo. */
  .nav__toggle{ display:block; }
  .nav__logo{ opacity:1; pointer-events:auto; }
  .nav:not(.is-stuck) .nav__logo img{ content:url("../img/logo-white.png"); }

  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.5rem;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    box-shadow:0 18px 40px rgba(4,48,84,.13);
  }
  .nav.is-open .nav__menu{ opacity:1; visibility:visible; transform:none; }
  .nav.is-open{ background:rgba(255,255,255,.98); }
  .nav.is-open .nav__logo img{ content:normal; }
  .nav__menu a{ color:var(--navy) !important; padding:1rem 0; border-bottom:1px solid var(--line) !important; }
  .nav__menu .btn--login{
    color:#fff !important; justify-content:center;
    margin-top:1.1rem; border-bottom:0 !important; padding:.9rem 1.4rem;
  }

  .media{ grid-template-columns:1fr; gap:2.75rem; }
  .media--feature .media__card{ flex-direction:column; gap:0; }
  .media--feature .media__thumb{ flex:none; }
  .media--feature .media__body{ padding-top:1.35rem; }
  .contact{ grid-template-columns:1fr; gap:1.75rem; }
  .foot__legal{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .nav__logo img{ height:26px; }
  .totop{ right:1rem; bottom:1rem; width:42px; height:42px; }
  .hero__band{ padding:2.5rem 1.25rem 2rem; }
  .hero__tag{ letter-spacing:.18em; }
  .login__inner{ flex-direction:column; align-items:flex-start; }
}