/* ==========================================================================
   Men's Counseling Online — shared stylesheet
   Single source of truth for palette, typography, and components.
   Used by the homepage and every interior page.
   ========================================================================== */

:root {
  --navy:#07182b;
  --navy2:#102a46;
  --cream:#f4f0e8;
  --gold:#c89b5c;
  --gold2:#e1b974;
  --gold-ink:#95662f;
  --text:#172231;
  --muted:#627080;
  --bg:#f7f7f4;
  --panel:#f6f6f2;
  --line:#e7e7e1;
  --white:#fff;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);line-height:1.65}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.container{width:min(90%,var(--max));margin:auto}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}

/* ---------- Navigation ---------- */
nav{position:absolute;top:0;width:100%;z-index:20;padding:24px 0;color:#fff}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:28px}
.brand{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.92rem;white-space:nowrap}
.brand span{color:var(--gold2)}
.nav-links{display:flex;gap:26px;align-items:center;font-size:.9rem}
.nav-links>a{transition:color .2s ease}
.nav-links>a:hover,.nav-links>a:focus-visible{color:var(--gold2)}
.nav-button{border:1px solid rgba(255,255,255,.55);padding:10px 18px;border-radius:999px;transition:background .2s ease,color .2s ease}
.nav-button:hover,.nav-button:focus-visible{background:#fff;color:var(--navy)!important}
.inner-nav{position:absolute}

/* ---------- Shared type accents ---------- */
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.77rem;font-weight:800;color:var(--gold2);margin-bottom:16px}
.breadcrumb{font-size:.82rem;color:rgba(255,255,255,.65);margin-bottom:20px}
.breadcrumb a:hover,.breadcrumb a:focus-visible{text-decoration:underline}

/* ---------- Buttons and links ---------- */
.button{display:inline-block;padding:15px 25px;border-radius:999px;font-weight:750;line-height:1.25;transition:transform .2s ease,background .2s ease,color .2s ease}
.button:hover,.button:focus-visible{transform:translateY(-1px)}
.button-primary{background:var(--gold);color:var(--navy)}
.button-primary:hover,.button-primary:focus-visible{background:var(--gold2)}
.button-secondary{border:1px solid rgba(255,255,255,.45);color:#fff}
.button-secondary:hover,.button-secondary:focus-visible{background:rgba(255,255,255,.12)}
.text-link{color:var(--gold-ink);font-weight:750}
.text-link:hover,.text-link:focus-visible{text-decoration:underline}

/* ---------- Homepage hero ---------- */
.hero{min-height:760px;color:#fff;display:flex;align-items:center;position:relative;overflow:hidden;background:
  radial-gradient(circle at 50% 78%,rgba(221,160,78,.55),transparent 15%),
  linear-gradient(180deg,#061629 0%,#0b223a 55%,#172d40 100%)}
.hero:before,.hero:after{content:"";position:absolute;left:-8%;right:-8%;bottom:0;height:38%;background:#0c2035;clip-path:polygon(0 58%,12% 20%,24% 56%,38% 10%,50% 55%,66% 18%,80% 60%,100% 15%,100% 100%,0 100%)}
.hero:after{height:28%;background:#061421;clip-path:polygon(0 70%,18% 35%,32% 76%,48% 30%,64% 70%,81% 40%,100% 72%,100% 100%,0 100%)}
.sun{position:absolute;width:120px;height:120px;border-radius:50%;left:50%;bottom:150px;transform:translateX(-50%);background:linear-gradient(#e8be73,#c78339);box-shadow:0 0 80px rgba(216,156,76,.4)}
.hero-content{position:relative;z-index:5;max-width:760px;padding-top:80px}
.hero h1{font-size:clamp(3rem,7vw,5.7rem);line-height:.98;letter-spacing:-.045em;margin-bottom:26px}
.hero p{font-size:1.2rem;color:rgba(255,255,255,.82);max-width:650px;margin-bottom:34px}
.buttons{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Homepage sections ---------- */
section{padding:96px 0}
.heading{max-width:700px;margin-bottom:50px}
.heading h2{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.035em;margin-bottom:16px}
.heading p{color:var(--muted);font-size:1.08rem}
.problems{background:var(--white)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{display:block;padding:30px;border-radius:18px;background:var(--panel);border:1px solid var(--line);transition:border-color .2s ease,transform .2s ease}
a.card:hover,a.card:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.num{font-size:.78rem;color:var(--gold-ink);font-weight:800;letter-spacing:.12em;margin-bottom:12px}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card p{color:var(--muted)}
.dark{background:var(--navy);color:#fff}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.quote{font-size:clamp(2rem,4vw,3.4rem);line-height:1.14;font-weight:650;letter-spacing:-.035em}
.principle{border-bottom:1px solid rgba(255,255,255,.15);padding:0 0 22px;margin-bottom:24px}
.principle h3{color:var(--gold2);margin-bottom:6px}
.principle p{color:rgba(255,255,255,.7)}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center}
.portrait{height:480px;border-radius:24px;overflow:hidden;background:#3a5265}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.about h2{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;letter-spacing:-.035em;margin-bottom:20px}
.about p{color:var(--muted);margin-bottom:16px}

/* ---------- Homepage contact ---------- */
.contact-section{background:var(--cream)}
.contact-options{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.contact-card{background:var(--white);border:1px solid #e2ddd2;border-radius:20px;padding:32px}
.contact-card h3{font-size:1.4rem;margin-bottom:10px}
.contact-card p{color:var(--muted);margin-bottom:22px}
.contact-note{font-size:.9rem;margin-top:14px!important;margin-bottom:0!important}

/* ---------- Interior pages ---------- */
.inner-hero{padding:155px 0 92px;color:#fff;background:
  radial-gradient(circle at 80% 72%,rgba(221,160,78,.28),transparent 16%),
  linear-gradient(180deg,#061629 0%,#0b223a 100%)}
.inner-hero h1{max-width:900px;font-size:clamp(2.75rem,6vw,5rem);line-height:1.02;letter-spacing:-.045em;margin-bottom:22px}
.inner-hero p{max-width:760px;color:rgba(255,255,255,.82);font-size:1.16rem}
.page-section{padding:88px 0}
.page-section.white{background:var(--white)}
.two-col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:60px;align-items:start}
.page-copy{max-width:800px}
.page-copy h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;letter-spacing:-.035em;margin:0 0 18px}
.page-copy h3{margin:32px 0 10px;font-size:1.35rem}
.page-copy p{color:var(--muted);margin-bottom:18px;font-size:1.05rem}
.page-copy ul{margin:18px 0 25px 1.25rem;color:var(--muted)}
.page-copy li{margin:9px 0}
.sidebar-card{position:sticky;top:30px;background:var(--panel);border:1px solid #e8e8e2;border-radius:18px;padding:28px}
.sidebar-card h3{margin-bottom:10px;font-size:1.35rem}
.sidebar-card p{color:var(--muted);margin-bottom:20px}
.resource-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.resource-link{display:block;border:1px solid #e3e3dd;border-radius:14px;padding:17px;background:var(--white);font-weight:750;transition:border-color .2s ease,transform .2s ease}
.resource-link:hover,.resource-link:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.resource-link span{display:block;font-weight:400;color:var(--muted);font-size:.92rem;margin-top:4px}
.profile-card{overflow:hidden;border-radius:20px;background:#eef0ed;margin-bottom:28px}
.profile-card img{width:100%;height:360px;object-fit:cover;object-position:50% 28%;display:block}
.faq-item{padding:24px 0;border-bottom:1px solid #e4e4de}
.faq-item:first-of-type{padding-top:0}
.faq-item h3{margin:0 0 8px}

/* ---------- Closing call to action ---------- */
.cta{background:linear-gradient(130deg,#07182b,#17334c);color:#fff;text-align:center;padding:88px 0}
.cta-content{max-width:740px;margin:auto}
.cta h2{font-size:clamp(2.5rem,5vw,4rem);line-height:1.06;margin-bottom:18px}
.cta p{color:rgba(255,255,255,.74);margin:0 auto 28px;max-width:650px;font-size:1.05rem}

/* ---------- Footer ---------- */
footer{background:#04111e;color:rgba(255,255,255,.72);padding:42px 0;font-size:.88rem}
.footer-inner{display:flex;justify-content:space-between;gap:55px}
.footer-brand{color:#fff;font-weight:800;margin-bottom:6px}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.footer-links a:hover,.footer-links a:focus-visible{text-decoration:underline}
.legal{max-width:560px}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .nav-links a:not(.nav-button){display:none}
  .grid,.principles,.about,.contact-options,.two-col,.resource-links{grid-template-columns:1fr}
  .sidebar-card{position:static}
  .portrait{height:360px}
  .profile-card img{height:320px}
  .inner-hero{padding-top:130px}
  .footer-inner{flex-direction:column;gap:28px}
  .hero{min-height:700px}
}
@media(max-width:520px){
  nav{padding:19px 0}
  .brand{font-size:.76rem;letter-spacing:.08em}
  .nav-button{padding:9px 13px}
  .inner-hero{padding-bottom:72px}
  section,.page-section,.cta{padding:70px 0}
  .buttons .button{width:100%;text-align:center}
}