/* ============================================================
   Remax Aspire recruitment site — shared brand styles
   Palette + type from the Canva brand kit (navy + creams only)
   ============================================================ */
:root{
  --navy:#000E35;
  --bridge:#0C2749;
  --cream:#F7F5EE;
  --ink:#232323;
  --skyblue:#A3D4F2;
  --line:#e6e2d8;
  --muted:#6b6a64;
  --card:#ffffff;
  --shadow:0 14px 40px rgba(0,14,53,.10);
  --shadow-lg:0 24px 60px rgba(0,14,53,.16);
  --radius:14px;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.container{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin:0 auto;padding:0 22px}

/* ---------- Logo / Wordmark ---------- */
.logo-img{display:block;width:auto}
.nav .logo-img{height:30px}
.footer .logo-img{height:34px}
.wordmark{display:inline-flex;align-items:baseline;gap:8px}
.wordmark .rm{font-weight:800;letter-spacing:.5px;font-size:20px}
.wordmark .asp{font-weight:300;letter-spacing:3px;font-size:20px;text-transform:uppercase;opacity:.92}
.wordmark.light .rm,.wordmark.light .asp{color:#fff}
.wordmark.dark .rm,.wordmark.dark .asp{color:var(--navy)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(247,245,238,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav a.navcta{text-decoration:none}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;text-align:center;font-family:var(--sans);font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;font-size:14px;border-radius:10px;padding:14px 22px;cursor:pointer;border:1.5px solid transparent;transition:transform .05s ease}
.btn:active{transform:scale(.99)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(0,14,53,.18)}
.btn-primary:hover{background:var(--bridge)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-light{background:#fff;color:var(--navy)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:11px 18px;font-size:13px}
.btn-block{display:block;width:100%}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--bridge) 100%);color:#fff;position:relative;overflow:hidden}
.hero-video,.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* Brand video section */
.video-section .video-wrap{max-width:960px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);line-height:0;background:var(--navy)}
.brand-video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(0,14,53,.84) 0%,rgba(12,39,73,.80) 100%)}
.hero::after{content:"";position:absolute;top:-160px;right:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(163,212,242,.16) 0%,transparent 70%);z-index:0}
.hero .container{position:relative;z-index:1;padding-top:70px;padding-bottom:74px;text-align:center}
.hero .herologo{height:40px;width:auto;margin:0 auto 22px;display:block}

/* ---------- Photo gallery / culture ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split img{width:100%;height:380px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-lg)}
.split h2{font-family:var(--serif);font-weight:600;font-size:34px;color:var(--navy);line-height:1.1;margin-bottom:14px}
.split p{font-size:15.5px;color:var(--muted);margin-bottom:14px}
.split .eyebrow{margin-bottom:8px;display:block}
.photo-note{text-align:center;font-size:12px;color:var(--muted);opacity:.8;margin-top:16px}

/* ---------- Team lineup ---------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.person{margin:0}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 12%;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--line)}
.person figcaption{margin-top:10px;text-align:center;font-weight:700;color:var(--navy);font-size:14px}
.kicker{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--skyblue);font-weight:700;margin-bottom:16px}
.hero h1{font-weight:800;font-size:46px;line-height:1.08;letter-spacing:-1px;max-width:18ch;margin:0 auto 18px}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:600}
.hero .sub{font-size:18px;opacity:.9;max-width:54ch;margin:0 auto 30px}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .trust{margin-top:22px;font-size:12.5px;letter-spacing:.5px;opacity:.7}

/* ---------- Section ---------- */
.section{padding:72px 0}
.section.tight{padding:54px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 44px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--navy);font-weight:700;opacity:.6}
.section-head h2{font-family:var(--serif);font-weight:600;font-size:38px;color:var(--navy);line-height:1.08;margin:6px 0 10px}
.section-head p{font-size:16.5px;color:var(--muted)}

/* ---------- Benefit grid ---------- */
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.feature .num{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--skyblue);font-weight:600}
.feature h3{font-size:18px;color:var(--navy);margin:6px 0 8px;font-weight:700}
.feature p{font-size:14.5px;color:var(--muted)}

/* ---------- Calculator cards ---------- */
.calc-card{background:var(--navy);color:#fff;border-radius:18px;padding:30px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;height:100%}
.calc-card .tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--skyblue);font-weight:700;margin-bottom:10px}
.calc-card h3{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.1;margin-bottom:10px}
.calc-card p{font-size:14.5px;opacity:.85;margin-bottom:22px;flex:1}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.step .n{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px}
.step h3{font-size:17px;color:var(--navy);margin-bottom:6px}
.step p{font-size:14px;color:var(--muted)}

/* ---------- Testimonials ---------- */
.section.alt{background:var(--navy);color:#fff}
.section.alt .section-head h2{color:#fff}
.section.alt .section-head .eyebrow{color:var(--skyblue);opacity:1}
.section.alt .section-head p{color:rgba(255,255,255,.8)}
.quote{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:26px}
.quote .mark{font-family:var(--serif);font-size:46px;line-height:.5;color:var(--skyblue);display:block;height:24px}
.quote p{font-size:15.5px;font-style:italic;font-family:var(--serif);margin:10px 0 16px;opacity:.95}
.quote .who{font-size:13px;font-weight:700;letter-spacing:.3px}
.quote .who span{display:block;font-weight:400;opacity:.65;font-size:12px;letter-spacing:.5px}
.placeholder-note{text-align:center;font-size:12px;color:var(--skyblue);opacity:.8;margin-top:18px}

/* ---------- Final CTA ---------- */
.cta-band{background:linear-gradient(160deg,var(--bridge) 0%,var(--navy) 100%);color:#fff;border-radius:22px;padding:50px 30px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-band h2{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.1;margin-bottom:12px}
.cta-band p{font-size:16px;opacity:.9;max-width:48ch;margin:0 auto 26px}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:rgba(255,255,255,.75);padding:42px 0 34px;font-size:13px}
.footer .frow{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.footer .disc{max-width:560px;font-size:11.5px;opacity:.6;line-height:1.7;margin-top:14px}
.footer a{color:var(--skyblue);text-decoration:none}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .hero h1{font-size:36px}
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .section-head h2{font-size:30px}
  .split{grid-template-columns:1fr;gap:24px}
  .split img{height:300px;order:-1}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery img{height:220px}
  .team-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .hero h1{font-size:30px}
  .hero .sub{font-size:16px}
  .grid.cols-2,.grid.cols-4{grid-template-columns:1fr}
  .section{padding:54px 0}
  .cta-band h2{font-size:28px}
  .footer .frow{flex-direction:column}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- All titles bold sans, no italics anywhere ---------- */
.hero h1, .hero h1 em,
.section-head h2,
.split h2,
.cta-band h2,
.ty h1,
.modal-done .big{
  font-family:var(--sans)!important;
  font-weight:800!important;
  font-style:normal!important;
}
.feature .num, .quote p, em, i{ font-style:normal!important; }