/* Summit Flow — Prominent branding + gray panels */
:root{
  --ink:#1E2B38;         /* charcoal text */
  --muted:#5f6b78;       /* secondary text */
  --navy:#0F3355;        /* Summit deep navy */
  --blue:#1F6FE5;        /* accent */
  --cyan:#3EB5FF;        /* bright detail */
  --bg:#F1F3F6;          /* app background (subtle gray) */
  --panel:#F7F8FA;       /* panels/boxes (not white) */
  --panel-strong:#EEF1F5;/* darker panel */
  --border:#D6DAE1;      /* muted borders */
  --ring:#B9D7FF;
  --shadow:0 14px 40px rgba(15, 51, 85, .10);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  font-family:'Inter',system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); line-height:1.5;
}

.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
a{text-decoration:none}

.site-header{position:sticky;top:0;background:rgba(247,248,250,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--navy);font-weight:900;font-size:18px}
.brand img{height:42px;width:auto}
.nav a{color:var(--muted);font-weight:800;margin-left:18px}
.nav a:hover{color:var(--blue)}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid transparent;font-weight:900;box-shadow:0 8px 20px rgba(31,111,229,.15)}
.btn.small{padding:8px 12px;border-radius:10px;box-shadow:none}
.btn.xl{padding:14px 22px;font-size:16px}
.btn.primary{background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{border-color:var(--border);color:var(--navy)}
.btn.ghost:hover{background:#fff; border-color:#cfd6df}

.hero{position:relative;padding:84px 0 48px;background:
  radial-gradient(900px 360px at 60% -10%, rgba(31,111,229,.15), transparent 70%),
  linear-gradient(180deg, #FAFBFD, #F1F3F6 65%);
  border-bottom:1px solid var(--border)
}
.hero-centered .brand-stack{display:grid;justify-items:center;gap:10px}
.brand-mark{position:relative;display:grid;place-items:center;width:120px;height:120px;border-radius:26px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}
.brand-mark img{height:70px;width:auto}
.brand-mark .ring{position:absolute;inset:-8px;border-radius:30px;background:conic-gradient(from 140deg, rgba(31,111,229,.18), rgba(62,181,255,.18), rgba(31,111,229,.18));filter:blur(14px);z-index:-1}
.wordmark{font-size:clamp(34px,6vw,70px);line-height:1.02;margin:0;color:var(--navy);letter-spacing:-.02em}
.tagline{text-align:center;color:var(--muted);margin:6px 0 16px;font-size:clamp(16px,2.2vw,20px)}
.cta{display:flex;gap:12px;justify-content:center;margin:10px 0 12px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.badge{padding:8px 12px;border-radius:999px;background:#E8F1FF;border:1px solid #D6E6FF;color:#174a8b;font-weight:900}

.punch{padding:26px 0}
.punch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.punch-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow)}
.punch-card h3{margin:4px 0 2px;color:var(--navy)}
.punch-card p{margin:0;color:var(--muted)}

.panel{padding:48px 0;background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.panel-strong{padding:48px 0;background:var(--panel-strong);border-top:1px solid var(--border)}
.clips .clips-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 12px}
.clips h2{margin:0;font-size:28px;color:var(--navy)}
.sub{color:var(--muted)}

.video-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.vthumb{position:relative;padding:0;border:none;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}
.vthumb img{display:block;width:100%;height:150px;object-fit:cover;filter:saturate(.95)}
.vthumb span{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:#E8F1FF;border:1px solid #D6E6FF;color:#174a8b;font-weight:900}
.vthumb:after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:28px;text-shadow:0 10px 30px rgba(0,0,0,.3)}

.modal{position:fixed;inset:0;display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-dialog{position:absolute;inset:8% 8%;background:#000;border-radius:14px;border:1px solid #1b2d44;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.45)}
.modal-close{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:10px;border:1px solid #2a3947;background:#0e1b24;color:#fff;font-size:20px;cursor:pointer}
#modalVideo{width:100%;height:100%;background:#000}

.pricing .price-cards{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.price-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;text-align:center}
.price-card.highlight{outline:2px solid rgba(31,111,229,.35);box-shadow:0 12px 36px rgba(31,111,229,.15)}
.price-card.subdued{opacity:.9}
.price-card .ribbon{position:absolute;margin-top:-12px;margin-left:-12px;background:linear-gradient(90deg,var(--blue),var(--cyan));padding:6px 10px;border-radius:10px;color:#fff;font-size:12px;font-weight:900}
.price-card h3{margin:0;font-size:44px;color:var(--navy)}
.price-card h3 span{font-size:.45em;color:var(--muted)}
.price-card ul{list-style:none;padding:0;margin:12px 0 16px;color:var(--muted);font-weight:700}
.price-card li{margin:6px 0}

.apply h2{text-align:center;margin:0 0 14px;color:var(--navy)}
.form-embed{border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.micro{color:var(--muted);text-align:center}

.site-footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted);background:var(--panel)}
.site-footer a{color:var(--navy)}

.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;gap:10px;align-items:center;justify-content:center;padding:10px 14px;background:rgba(247,248,250,.96);border-top:1px solid var(--border);backdrop-filter:blur(8px)}
.cta-bar .btn{padding:12px 16px}
@media (max-width: 820px){ .cta-bar{display:flex} }

@media (max-width: 1100px){
  .video-grid{grid-template-columns:repeat(3,1fr)}
  .pricing .price-cards{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .video-grid{grid-template-columns:repeat(2,1fr)}
}

a:focus,button:focus,.btn:focus{outline:3px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 4px rgba(31,111,229,.15)}


/* === Final Blue + Gray Edition === */
:root{
  --ink:#0F3355;          /* navy headings */
  --muted:#53606E;        /* body text */
  --blue:#1F6FE5;         /* CTA accent */
  --cyan:#3EB5FF;         /* gradient end */
  --bg:#F4F6F9;           /* page background (neutral gray) */
  --panel:#E6F0FF;        /* BLUE cards/panels */
  --section:#EDF1F6;      /* gray-blue section bg */
  --panel-strong:#E1E7F2; /* darker frame for form */
  --border:#C2D1E4;       /* steel border */
  --ring:#B9D7FF;
  --shadow:0 14px 40px rgba(15, 51, 85, .12);
  --radius:16px;
}
body{background:var(--bg);color:var(--ink)}
.hero{background:linear-gradient(180deg,#F4F8FF 0%, var(--bg) 80%);}
.punch-card,.vthumb,.price-card{background:var(--panel);border:1px solid var(--border);}
.panel{background:var(--section)}
.panel-strong{background:var(--panel-strong)}
.btn.primary{background:linear-gradient(90deg,var(--blue),var(--cyan));}
.brand-mark{background:var(--panel); border:1px solid var(--border)}
.badge{background:#E8F1FF;border:1px solid #D6E6FF}
.site-footer{background:var(--section)}

/* Force a single, full-mountain background behind hero text */
.hero { position: relative; overflow: hidden; }

.hero::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* draw a sized box and paint the image inside it */
  width: min(95vw, 1400px);
  height: min(70vh, 520px);
  transform: translate(-50%, calc(-110% + 40px)); /* ↓ move down (+); ↑ move up (-) */
  background: url("assets/mountain-bg-navy.png") center / contain no-repeat; /* show the WHOLE mountain */
  opacity: .30;        /* .10–.20 depending on how strong you want it */
  z-index: 0;
  pointer-events: none;
}

/* keep the hero text/CTAs above the image */
.hero * { position: relative; z-index: 1; }

/* =======================
   MOBILE POLISH (<=768px)
   ======================= */
@media (max-width: 768px){

  /* Global rhythm */
  .wrap{padding:0 16px}
  section{padding:32px 0 !important}

  /* Header */
  .site-header .nav{height:64px}
  .nav a{margin-left:12px}

  /* Hero spacing & scale */
  .hero{padding:72px 0 28px}
  h1.wordmark{
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.05;
    margin: 0 0 8px;
    text-align: center;
  }
  .tagline{
    font-size:16px;
    line-height:1.4;
    margin: 0 0 14px !important;
    text-align:center;
  }

  /* Stack CTAs full-width */
  .cta{flex-direction:column; gap:10px; align-items:stretch}
  .cta .btn{width:100%; padding:14px 16px}

  /* Badges: fewer + smaller */
  .badges{gap:8px; justify-content:center}
  .badge{font-size:14px; padding:8px 10px}
  .badges .badge:nth-child(n+3){display:none} /* show only first 2 on mobile */

  /* Feature tiles */
  .punch{padding:24px 0 !important}
  .punch-grid{grid-template-columns:1fr 1fr; gap:10px}
  .punch-card{padding:14px}

  /* Video grid */
  .clips{padding:32px 0 !important}
  .video-grid{grid-template-columns:1fr 1fr; gap:10px}
  .vthumb img{height:120px}

  /* Pricing */
  .pricing{padding:32px 0 !important}
  .price-cards{grid-template-columns:1fr; gap:12px}
  .price-card{padding:16px}
  .price-card h3{font-size:36px}

  /* Sticky CTA bar spacing */
  .cta-bar{gap:8px; padding:10px 12px}
  .cta-bar .btn{padding:12px 14px}
}

/* Improve anchor scrolling (nav links don’t hide headers under sticky bar) */
html{scroll-padding-top:80px}

/* Center mountain behind "Summit Flow" on mobile */
@media (max-width: 768px) {
  .hero::before {
    background: url("assets/mountain-bg-navy.png") no-repeat center center / contain;
    width: 120vw;
    height: 65vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -95%); /* raise or lower mountain */
    opacity: .20;
    z-index: 0;
    pointer-events: none;
  }

  .hero {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .wordmark {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.05;
    text-align: center;
    margin-bottom: 12px;
  }

  .tagline {
    text-align: center;
  }
}

/* --- Journey Section --- */
.journey-section {
  background: linear-gradient(to bottom right, #f0f5fa, #ffffff);
  padding: 100px 0;
  color: #0f3355;
  text-align: center;
}

.journey-header {
  max-width: 800px;
  margin: 0 auto 60px auto;
}

.journey-header h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #0f3355;
}

.journey-header p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.journey-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.journey-step {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 30px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.journey-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.journey-step h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: #0f3355;
}

.journey-step p {
  font-size: 1rem;
  line-height: 1.5;
  color: #334e68;
}

/* Mobile */
@media (max-width: 768px) {
  .journey-section {
    padding: 60px 0;
  }

  .journey-header h2 {
    font-size: 2rem;
  }

  .journey-step {
    padding: 24px 18px;
  }
}

/* Force Summit Logo size under About Us */
.about-logo img {
  max-width: 140px !important;   /* force smaller */
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.1));
}

#about-logo img {
  display: block;
  margin: 0 auto 24px auto; /* 24px space below the logo */
}



@media (max-width: 768px) {
  .about-logo img {
    max-width: 120px;
    margin: 0 auto 20px auto;
    display: block;
  }
}

/* Left-align Summit logo under About Us */
.about-logo {
  text-align: left !important;
  display: flex;
  justify-content: flex-start;
}

.about-logo img {
  max-width: 140px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;     /* remove the auto-center margin */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.1));
}


/* Make Summit Flow logo in navbar larger */
.brand img {
  height: 73px !important;  /* increase from 64px */
  width: auto !important;
  margin-top: 4px;          /* small vertical adjustment */
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .brand img {
    height: 72px !important; /* slightly smaller for mobile */
  }
}

/* ===== NAV: base ===== */
.navbar{
  position: sticky; top: 0; z-index: 999;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px;
  background: rgba(248,250,253,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,51,85,.06);
}

/* logo size */
.brand img{ height: 40px; width:auto; }

/* links row (desktop default) */
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{ text-decoration:none; color:#0f3355; font-weight:600; }
.nav-links .btn.small.ghost{
  border:1px solid rgba(15,51,85,.25); border-radius:10px; padding:6px 14px;
}

/* ===== NAV: mobile behavior ===== */
.nav-toggle{
  display:none; background:none; border:0; padding:8px; margin-left:auto;
}
.nav-toggle span{ display:block; width:22px; height:2px; background:#0f3355; margin:5px 0; transition:.2s; }

/* collapse links on mobile */
@media (max-width: 768px){
  .brand img{ height: 34px; }          /* smaller logo on phones */

  .nav-toggle{ display:block; }        /* show hamburger */
  .nav-links{
    position: absolute;
    left:0; right:0; top:60px;         /* under the bar */
    background:#ffffff;
    border-bottom:1px solid rgba(15,51,85,.08);
    display:none;                       /* hidden by default */
    flex-direction:column;
    padding:10px 16px 14px;
    gap:12px;
  }
  .nav-links a{ padding:10px 6px; }    /* comfy tap targets */
  .nav-links .btn.small.ghost{ width:100%; text-align:center; padding:12px 16px; }

  /* when open */
  .nav-links.open{ display:flex; }

  /* tighten the header height */
  .navbar{ padding: 8px 12px; }
}

/* === NAVBAR CLEANUP === */
header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 10px 6%;
}

/* contain and align */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* smaller, centered logo */
.brand img {
  height: 42px !important;   /* smaller and consistent */
  width: auto;
  display: block;
}

/* right-aligned nav links */
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* nav link style */
.main-nav a {
  color: #0f3355;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-nav a:hover {
  color: #0072ce;
}

/* Apply button look */
.main-nav .btn.small.ghost {
  border: 1px solid rgba(15,51,85,0.3);
  border-radius: 8px;
  padding: 6px 14px;
}

/* === MOBILE ADJUSTMENTS === */
@media (max-width: 768px) {
  header {
    padding: 8px 4%;
  }
  .brand img {
    height: 34px !important;
  }
  .main-nav {
    gap: 18px;
    font-size: 0.95rem;
    overflow-x: auto;
    white-space: nowrap;
  }
  .main-nav a {
    padding: 6px 2px;
  }
  html { scroll-padding-top: 80px; } /* avoid hero being hidden */
}
/* Make Summit Flow logo bigger (top-left corner) */
.brand img {
  height: 72px !important;   /* increase size */
  width: auto !important;
  display: block;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.brand img:hover {
  transform: scale(1.05);
}

/* Adjust navbar alignment to keep it centered with new logo size */
.nav-container {
  align-items: center;
  gap: 40px;
}

/* Prevent sideways scroll everywhere */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }
a, button { min-width: 0; }            /* allows wrapping */
section, .wrap, .container { overflow-x: clip; } /* clip any rogue children */

/* HEADER */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: #fff;
}

.brand img { display:block; height: 32px; }

/* desktop menu */
.menu { display: flex; gap: 24px; align-items: center; }
.apply-btn {
  padding: 10px 16px; border-radius: 12px; font-weight: 700;
  background: linear-gradient(90deg,#1780ff,#28c4ff);
  color: #fff; text-decoration: none;
  white-space: normal;             /* allow wrapping on narrow screens */
  max-width: 100%;
}

/* hamburger hidden on desktop */
.burger { display: none; background: none; border: 0; font-size: 28px; line-height: 1; }

/* MOBILE */
@media (max-width: 768px) {
  .burger { display: block; }
  .menu {
    position: fixed; inset: 60px 0 0 0;       /* below header, full width */
    display: none; flex-direction: column; gap: 16px;
    padding: 20px; background: #fff;
    height: calc(100dvh - 60px); overflow-y: auto;
    border-top: 1px solid #eee;
  }
  .menu.open { display: flex; }
  .brand img { height: 28px; }                 /* keeps header compact */
}

/* Optional: grids/cards below hero – avoid fixed widths */
.grid, .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr));
  gap: 16px;
}