@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --teal:#1B3A4B; --teal-deep:#122834; --amber:#E8A33D; --amber-soft:#F3C578;
  --paper:#F7F4EC; --paper-2:#EFEADC; --ink:#2B2A28; --ink-soft:#5B5852;
  --clay:#C4735A; --line:#E1DACB; --white:#FFFDF8;
  --serif:'Fraunces',Georgia,serif; --sans:'Public Sans',system-ui,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; color:var(--teal-deep);}
h1{font-size:clamp(2.4rem,5vw,3.6rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3vw,2.3rem);}
h3{font-size:1.25rem; font-weight:600;}
p{max-width:38em;}
.container{max-width:1120px; margin:0 auto; padding:0 28px;}
.narrow{max-width:640px;}

/* Nav */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; width:100%;}
.logo{color:var(--teal-deep); text-decoration:none; display:inline-flex; align-items:center; gap:10px;}
.logo-mark{width:32px; height:32px; flex:0 0 auto; display:block;}
.logo-mark img{width:100%; height:100%; object-fit:contain;}
.logo-wordmark{width:auto; height:22px; flex:0 0 auto;}
footer .logo-mark{width:34px; height:34px;}
footer .logo-wordmark{height:24px;}
footer .logo{display:inline-flex !important;}
.navlinks{display:flex; gap:32px; align-items:center; list-style:none;}
.navlinks li > a:not(.btn){text-decoration:none; font-weight:500; font-size:0.98rem; color:var(--ink-soft); transition:color .15s;}
.navlinks li > a:not(.btn):hover, .navlinks li > a.active:not(.btn){color:var(--teal);}
.navlinks a:focus-visible, a:focus-visible, button:focus-visible{outline:3px solid var(--amber); outline-offset:3px;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:8px;
  font-weight:600; font-size:1rem; text-decoration:none; border:none; cursor:pointer;
  font-family:var(--sans); transition:transform .15s, box-shadow .15s;
}
.btn-primary{background:var(--teal); color:var(--white);}
.btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px);}
.btn-amber{background:var(--amber); color:var(--teal-deep);}
.btn-amber:hover{background:#DD9526; transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--teal); border:1.5px solid var(--teal);}
.btn-ghost:hover{background:var(--teal); color:var(--white);}
.menu-toggle{display:none; background:none; border:none; font-size:1.6rem; color:var(--teal-deep); cursor:pointer;}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 55%, #6C8A6E 78%, var(--amber-soft) 100%);
}
.hero-photo{
  min-height:520px; padding:130px 0 150px;
  background-image:url('images/dusk-scene-real.webp');
  background-size:cover; background-position:center 50%;
}
.hero-photo-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,18,26,0.72) 0%, rgba(10,18,26,0.5) 43%, rgba(10,18,26,0.08) 72%);
}
.hero .container{position:relative; z-index:2;}
.hero-photo-content{position:relative; max-width:560px;}
.hero h1{color:var(--white); max-width:11.5ch;}
.hero p.lede{color:#E7EEE7; font-size:1.2rem; max-width:34ch; margin-top:18px;}
.hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-referral{margin-top:22px; font-size:0.92rem; color:#E7EEE7;}
.hero-referral a{color:var(--amber-soft); font-weight:600;}

/* Sections */
section{padding:76px 0;}
.section-tight{padding:56px 0;}
.eyebrow{font-family:var(--sans); font-weight:700; font-size:0.85rem; color:var(--clay); margin-bottom:10px;}
.lead-para{font-size:1.2rem; color:var(--ink-soft); max-width:36em; margin-top:14px;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:44px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:44px; align-items:start;}
.card{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:30px;}
.card h3{margin-bottom:10px;}
.card p{color:var(--ink-soft); font-size:1rem;}
.icon-circle{
  width:52px; height:52px; border-radius:50%; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px;
}

.band{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.band-teal{background:var(--teal-deep); color:var(--white);}
.band-teal h2, .band-teal h3{color:var(--white);}
.band-teal .lead-para{color:#D9E2DC;}

.steps{display:flex; flex-direction:column; gap:0; margin-top:44px;}
.step{display:flex; gap:26px; padding:28px 0; border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step-num{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--teal); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; font-size:1.1rem;
}
.step h3{margin-bottom:6px;}
.step p{color:var(--ink-soft);}

.quote{font-family:var(--serif); font-size:1.4rem; font-weight:500; color:var(--teal-deep); font-style:italic; max-width:30em; line-height:1.4;}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:1.08rem; color:var(--teal-deep);
}
.faq-q .plus{font-size:1.4rem; color:var(--clay); transition:transform .2s; flex:0 0 auto; margin-left:20px;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding-bottom:22px; color:var(--ink-soft); max-width:42em;}

/* Footer */
footer{background:var(--teal-deep); color:#C9D3CC; padding:56px 0 32px;}
footer .logo{color:var(--white);}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);}
.foot-col h4{font-size:0.95rem; font-weight:700; color:var(--white); margin-bottom:14px;}
.foot-col a{display:block; color:#B7C2BA; text-decoration:none; font-size:0.95rem; margin-bottom:10px;}
.foot-col a:hover{color:var(--amber);}
.foot-bottom{padding-top:24px; font-size:0.85rem; color:#8FA098; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.badge-row{display:flex; gap:28px; flex-wrap:wrap; margin-top:36px;}
.badge{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--teal); font-size:0.95rem;}

@media (max-width:860px){
  .hero-photo{min-height:0; padding:64px 0 72px; background-position:75% center;}
  .hero-photo-overlay{background:rgba(10,18,26,0.62);}
  .hero-ctas{gap:10px;}
  .hero-ctas .btn{padding:12px 18px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .navlinks{position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px; background:var(--white);
    flex-direction:column; align-items:flex-start; padding:100px 32px 32px; box-shadow:-8px 0 30px rgba(0,0,0,0.15);
    transform:translateX(100%); transition:transform .25s; z-index:50;}
  .navlinks.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  .foot-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} }