
:root{
  --navy:#0f2b48;
  --navy-2:#17385e;
  --gold:#d6a84b;
  --cream:#f8f6f1;
  --text:#102c49;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

.hero{
  position:relative;
  min-height:100svh;
  background:url("hero.jpg") center 46%/cover no-repeat;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(4,20,35,.50) 0%,rgba(4,20,35,.40) 35%,rgba(4,20,35,.52) 100%),
    linear-gradient(90deg,rgba(8,28,48,.20),rgba(8,28,48,.08));
}
.brandbar{
  position:absolute;
  z-index:2;
  top:34px;
  left:42px;
}
.brand img{
  width:168px;
  filter:brightness(0) invert(1);
}
.hero-content{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - 40px));
  text-align:center;
  color:white;
  padding:105px 0 64px;
}
.eyebrow{
  margin:0;
  color:#f1c96d;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:17px;
  font-weight:700;
}
.gold-line{
  width:54px;
  height:1px;
  background:var(--gold);
  margin:20px auto 26px;
}
h1,h2{
  font-family:Georgia,"Times New Roman",serif;
}
h1{
  margin:0;
  font-size:clamp(58px,6.2vw,98px);
  line-height:.96;
  letter-spacing:-.04em;
  font-weight:700;
}
.lead{
  width:min(680px,100%);
  margin:24px auto 28px;
  font-size:20px;
  line-height:1.5;
}
.facts{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin:0 auto 28px;
}
.fact{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 18px;
  border-right:1px solid rgba(214,168,75,.55);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.fact:last-child{border-right:0}
.fact svg{
  width:24px;height:24px;
  fill:none;
  stroke:#e4b64f;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cta{
  display:inline-block;
  min-width:355px;
  padding:20px 34px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:linear-gradient(180deg,#12365d 0%,#0e2b49 100%);
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:700;
  font-size:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  transition:transform .18s ease,box-shadow .18s ease;
}
.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,.30);
}
.secure{
  margin:18px 0 0;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:rgba(255,255,255,.92);
}
.secure svg{
  width:19px;height:19px;
  fill:none;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.experience{
  background:var(--cream);
  padding:76px 28px 72px;
}
.section-inner{
  width:min(1100px,100%);
  margin:0 auto;
  text-align:center;
}
.section-kicker{
  margin:0;
  color:#c79638;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:13px;
  font-weight:700;
}
h2{
  margin:14px 0 0;
  font-size:clamp(38px,4.2vw,58px);
  line-height:1.05;
  color:var(--navy);
}
.gold-line.small{margin:20px auto 24px;width:45px}
.section-copy{
  width:min(720px,100%);
  margin:0 auto;
  font-size:18px;
  line-height:1.55;
  color:#26394e;
}
.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:54px 0 44px;
}
.feature{
  padding:0 28px;
  border-right:1px solid #dfd6c5;
}
.feature:last-child{border-right:0}
.feature-icon{
  width:48px;
  height:48px;
  margin:0 auto 14px;
}
.feature-icon svg{
  width:100%;height:100%;
  fill:none;
  stroke:var(--navy);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature h3{
  margin:0 0 7px;
  font-size:16px;
  color:var(--navy);
}
.feature p{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:#4d5f70;
}
.cta-secondary{
  min-width:300px;
  font-size:15px;
}

@media (max-width: 800px){
  .hero{
    min-height:100svh;
    background-position:58% center;
  }
  .hero-overlay{
    background:linear-gradient(180deg,rgba(4,20,35,.46) 0%,rgba(4,20,35,.44) 45%,rgba(4,20,35,.62) 100%);
  }
  .brandbar{
    top:24px;
    left:22px;
  }
  .brand img{width:126px}
  .hero-content{
    width:min(94%,620px);
    padding:120px 8px 36px;
  }
  .eyebrow{font-size:12px}
  h1{
    font-size:clamp(48px,13vw,72px);
  }
  .lead{
    font-size:17px;
    line-height:1.45;
    margin-top:20px;
  }
  .facts{
    gap:8px 0;
    margin-bottom:24px;
  }
  .fact{
    font-size:11px;
    padding:5px 11px;
  }
  .fact svg{width:20px;height:20px}
  .cta{
    min-width:0;
    width:min(100%,380px);
    font-size:15px;
    padding:18px 24px;
  }
  .experience{
    padding:58px 22px 60px;
  }
  .section-copy{font-size:16px}
  .features{
    grid-template-columns:1fr 1fr;
    gap:34px 0;
    margin:42px 0 38px;
  }
  .feature:nth-child(2){border-right:0}
  .feature:nth-child(3), .feature:nth-child(4){padding-top:4px}
}

@media (max-width: 480px){
  .hero{
    background-position:61% center;
  }
  .hero-content{
    width:100%;
    padding:115px 20px 28px;
  }
  .eyebrow{letter-spacing:.14em}
  .gold-line{margin:15px auto 20px}
  h1{font-size:48px}
  .lead{font-size:16px}
  .facts{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:min(340px,100%);
    row-gap:8px;
  }
  .fact{
    justify-content:center;
    border-right:0;
    padding:4px 6px;
  }
  .secure{font-size:12px}
  .features{
    grid-template-columns:1fr;
    gap:28px;
  }
  .feature{
    border-right:0;
    padding:0 8px 26px;
    border-bottom:1px solid #dfd6c5;
  }
  .feature:last-child{
    border-bottom:0;
    padding-bottom:0;
  }
}

/* Mobile refinement — 2026-08-12 */
@media (max-width: 800px){
  .brandbar{top:20px;left:20px}
  .brand img{width:98px}
  .hero-content{padding:92px 8px 30px}
  h1{font-size:clamp(44px,11.8vw,64px)}
}
@media (max-width: 480px){
  .brandbar{top:18px;left:18px}
  .brand img{width:94px}
  .hero-content{padding:88px 20px 24px}
  h1{font-size:44px;line-height:.98}
  .lead{margin:17px auto 22px}
  .facts{margin-bottom:20px}
  .secure{margin-top:14px}
}
