/* ==========================================================================
   The Profitable Host Consulting — shared design system
   ========================================================================== */
:root{
  --navy:#1f3b30;
  --navy-dark:#122019;
  --sand:#f4efe6;
  --sand-deep:#e8dcc8;
  --gold:#b8863b;
  --gold-light:#d9a75c;
  --ink:#22231f;
  --muted:#6f6a60;
  --white:#ffffff;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--sand);
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{
  font-family:"Helvetica Neue",Arial,sans-serif;
  color:var(--navy);
  line-height:1.07;
  letter-spacing:-.02em;
  margin:0 0 .4em;
  font-weight:700;
}
.serif{font-family:Georgia,"Iowan Old Style",serif;}
p{margin:0 0 1em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;
  color:var(--gold);margin-bottom:1em;display:block;
}
.muted{color:var(--muted);}
.center{text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-weight:600;font-size:1rem;
  padding:14px 30px;border-radius:980px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;
  cursor:pointer;border:none;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 8px 20px rgba(184,134,59,.28);}
.btn-gold:hover{background:var(--gold-light);}
.btn-dark{background:var(--navy);color:var(--sand);}
.btn-outline{background:transparent;border:1.5px solid currentColor;}
.btn-text{color:var(--gold);font-weight:600;padding:0;}
.btn-text::after{content:" ›";transition:margin .2s var(--ease);}
.btn-text:hover::after{margin-left:5px;}
.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

/* ---------- Nav ---------- */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(18,32,25,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
nav.bar{display:flex;align-items:center;justify-content:space-between;padding:15px 26px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.06rem;color:#fff;letter-spacing:-.01em;}
.brand b{color:var(--gold-light);font-weight:700;}
.brand-mark{width:32px;height:32px;flex:none;border-radius:8px;}
footer.site .brand{display:flex;align-items:center;gap:11px;}
footer.site .brand-mark{width:30px;height:30px;}
.navlinks{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:.9rem;}
.navlinks a{color:#e7e2d6;opacity:.82;transition:opacity .15s,color .15s;}
.navlinks a:hover,.navlinks a.active{opacity:1;color:var(--gold-light);}
.nav-cta{background:var(--gold);color:#fff!important;opacity:1!important;padding:8px 18px;border-radius:980px;font-weight:600;}
.nav-cta:hover{background:var(--gold-light);}
.burger{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}

/* ---------- Hero (Apple-style) ---------- */
.hero{
  position:relative;color:var(--sand);text-align:center;
  padding:120px 0 130px;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(18,32,25,.62) 0%,rgba(18,32,25,.42) 40%,rgba(18,32,25,.86) 100%),
    linear-gradient(150deg,var(--navy) 0%,var(--navy-dark) 100%);
  background-size:cover;background-position:center;
}
.hero.photo{
  background:
    linear-gradient(180deg,rgba(18,32,25,.55) 0%,rgba(18,32,25,.35) 45%,rgba(18,32,25,.9) 100%),
    var(--photo,linear-gradient(150deg,var(--navy),var(--navy-dark)));
  background-size:cover;background-position:center;
}
.hero h1{color:#fff;font-size:clamp(2.3rem,6vw,4.4rem);max-width:16ch;margin:0 auto .3em;font-weight:800;}
.hero h1 em{color:var(--gold-light);font-style:normal;}
.hero .lead{font-size:clamp(1.05rem,2.4vw,1.4rem);max-width:640px;margin:0 auto 1.6em;color:#e4e6df;font-weight:300;}
.hero .actions{justify-content:center;}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:1.4rem;animation:bob 2s infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- Generic section ---------- */
section{padding:110px 0;}
.section-head{max-width:680px;margin:0 auto 64px;text-align:center;}
.section-head h2{font-size:clamp(1.9rem,4vw,3rem);}
.section-head p{font-size:1.12rem;color:var(--muted);}
.bg-white{background:var(--white);}
.bg-sanddeep{background:var(--sand-deep);}
.bg-navy{background:var(--navy);color:var(--sand);}
.bg-navy h2,.bg-navy h3{color:#fff;}
.bg-navy .muted{color:#c4ccbf;}

/* ---------- Showcase (alternating image + text) ---------- */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.showcase + .showcase{margin-top:120px;}
.showcase.flip .media{order:2;}
.showcase .copy h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
.showcase .copy p{font-size:1.08rem;color:var(--muted);}
.media{
  border-radius:22px;overflow:hidden;aspect-ratio:4/3;
  background-size:cover;background-position:center;
  box-shadow:0 30px 60px rgba(18,32,25,.18);
  position:relative;
}
.media.tall{aspect-ratio:3/4;}

/* photo helper: gradient fallback UNDER the image so it never looks empty */
.ph{background-color:var(--navy);background-blend-mode:normal;}

/* ---------- Big full-bleed statement ---------- */
.statement{
  position:relative;text-align:center;color:#fff;padding:150px 26px;
  background:linear-gradient(180deg,rgba(18,32,25,.72),rgba(18,32,25,.82)),var(--photo,var(--navy));
  background-size:cover;background-position:center;background-attachment:fixed;
}
.statement h2{color:#fff;font-size:clamp(2rem,5vw,3.6rem);max-width:18ch;margin:0 auto .4em;}
.statement p{color:#e4e6df;font-size:1.2rem;max-width:600px;margin:0 auto 1.4em;}

/* ---------- Cards ---------- */
.grid{display:grid;gap:26px;}
.grid.g2{grid-template-columns:repeat(2,1fr);}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g4{grid-template-columns:repeat(4,1fr);}
.card{
  background:var(--white);border:1px solid #e7e0d1;border-radius:18px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(18,32,25,.13);}
.card .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--navy);}
.card .body{padding:26px;}
.card .num{color:var(--gold);font-weight:700;font-size:.82rem;letter-spacing:.06em;}
.card h3{font-size:1.25rem;margin:.3em 0 .5em;}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:.8em;}
.tag{display:inline-block;font-size:.76rem;color:var(--navy);background:var(--sand);padding:5px 12px;border-radius:20px;}

/* ---------- Stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center;}
.stats .n{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;color:var(--gold);line-height:1;}
.stats .l{color:var(--muted);margin-top:.4em;font-size:.98rem;}
.bg-navy .stats .l{color:#c4ccbf;}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:14px;}
.step h4{font-size:1.05rem;}
.step p{color:var(--muted);font-size:.92rem;}
.bg-navy .step p{color:#c4ccbf;}

/* ---------- Quote ---------- */
.quote{max-width:820px;margin:0 auto;text-align:center;}
.quote blockquote{font-family:Georgia,serif;font-style:italic;font-size:clamp(1.4rem,3vw,2rem);color:var(--navy);line-height:1.35;margin:0 0 .6em;}
.bg-navy .quote blockquote{color:#fff;}
.quote cite{color:var(--gold);font-style:normal;font-weight:600;letter-spacing:.04em;font-size:.9rem;text-transform:uppercase;}

/* ---------- Pricing / list feature ---------- */
.checklist{list-style:none;padding:0;margin:0;}
.checklist li{padding-left:32px;position:relative;margin-bottom:.9em;color:var(--muted);}
.checklist li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/></svg>") center/14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/></svg>") center/14px no-repeat;}
.bg-navy .checklist li{color:#d5dccf;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;padding:110px 26px;background:linear-gradient(150deg,var(--navy),var(--navy-dark));color:var(--sand);}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.3em;}
.cta-band p{color:#c4ccbf;font-size:1.1rem;max-width:520px;margin:0 auto 1.6em;}

/* ---------- Forms ---------- */
.form{background:var(--white);border:1px solid #e7e0d1;border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:18px;}
.form label{font-size:.8rem;font-weight:700;color:var(--navy);display:block;margin-bottom:5px;}
.form input,.form textarea,.form select{width:100%;padding:13px 15px;border:1px solid #ddd5c4;border-radius:10px;background:var(--sand);font-family:inherit;font-size:.95rem;}
.form textarea{min-height:120px;resize:vertical;}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--gold-light);border-color:transparent;}
.alert{background:#fbe9e7;border:1px solid #e0a99f;color:#8a2f22;padding:12px 16px;border-radius:10px;font-size:.92rem;}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-dark);color:#9fab9d;padding:56px 0 32px;font-size:.88rem;}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px;}
footer.site h4{color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1em;}
footer.site a{color:#c3cbbd;display:block;margin-bottom:.6em;}
footer.site a:hover{color:var(--gold-light);}
footer.site .brand{color:#fff;font-size:1.1rem;margin-bottom:.6em;}
footer.site .base{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .navlinks{display:none;}
  .navlinks.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--navy-dark);flex-direction:column;padding:20px 26px;gap:18px;}
  .burger{display:block;}
  .showcase,.grid.g2,.grid.g3,.grid.g4,.contact-cols,footer.site .cols{grid-template-columns:1fr;}
  .showcase.flip .media{order:0;}
  .steps,.stats{grid-template-columns:1fr 1fr;}
  section{padding:72px 0;}
  .showcase + .showcase{margin-top:72px;}
  .statement{background-attachment:scroll;padding:100px 26px;}
}
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}

/* ---------- Pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;}
.tier{
  position:relative;
  background:var(--white);border:1px solid #e7e0d1;border-radius:18px;padding:34px 30px;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tier .save{position:absolute;top:18px;right:18px;background:var(--gold);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:980px;white-space:nowrap;}
.tier:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(18,32,25,.13);}
.tier.featured{background:var(--navy);border-color:var(--navy);position:relative;}
.tier.featured h3,.tier.featured .price,.tier.featured .dur{color:#fff;}
.tier.featured p,.tier.featured .checklist li{color:#d5dccf;}
.tier .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:980px;white-space:nowrap;}
.tier .kicker{color:var(--gold);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;}
.tier h3{font-size:1.35rem;margin:.4em 0 .1em;}
.tier .dur{color:var(--muted);font-size:.9rem;margin-bottom:.6em;}
.tier .price{font-size:2.4rem;font-weight:800;color:var(--navy);line-height:1;margin-bottom:.7em;}
.tier .price small{font-size:.95rem;font-weight:500;color:var(--muted);}
.tier .price .was{font-size:1.5rem;font-weight:600;color:var(--muted);text-decoration:line-through;margin-right:.12em;}
.tier.featured .price .was{color:rgba(255,255,255,.6);}
.addon .ap .was{color:var(--muted);font-weight:600;text-decoration:line-through;margin-right:.18em;}
.tier > p{color:var(--muted);font-size:.96rem;}
.tier .checklist{margin:.4em 0 1.6em;}
.tier .checklist li{font-size:.93rem;margin-bottom:.7em;}
.tier .btn{margin-top:auto;text-align:center;}
.tier.featured .checklist li::before{background:var(--gold-light);}
.addons{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;}
.addon{background:var(--sand-deep);border-radius:14px;padding:24px 26px;display:flex;justify-content:space-between;gap:18px;align-items:baseline;}
.addon h4{font-size:1.05rem;margin:0 0 .2em;}
.addon p{color:var(--muted);font-size:.9rem;margin:0;}
.addon .ap{color:var(--navy);font-weight:800;font-size:1.15rem;white-space:nowrap;}
@media(max-width:900px){.pricing,.addons{grid-template-columns:1fr;}}