/* ============================================================
   Robyn Coaching — Design System + Nav  (Redesign 1/5)
   Montserrat · greyscale + white + whisper of beige
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --surface:#F7F7F6;
  --beige:#EDE8E1;      /* accent only — use sparingly */
  --grey-100:#E5E5E3;
  --grey-400:#9B9B97;
  --grey-700:#4A4A48;
  --text:#2B2B2A;

  --maxw:1080px;
  --pad-section:96px;
  --pad-section-mob:56px;
  --header-h:76px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:300;
  letter-spacing:.06em;
  line-height:1.15;
  color:var(--text);
}
h1{font-size:clamp(42px,7vw,84px);letter-spacing:.02em}
h2{font-size:clamp(30px,4.5vw,48px)}
h3{font-size:clamp(20px,2.6vw,26px);letter-spacing:.05em}
h4{font-size:18px;letter-spacing:.05em}

p{font-weight:300;color:var(--text)}

a{color:inherit;text-decoration:none}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

section{padding:var(--pad-section) 0}
.surface{background:var(--surface)}
.beige{background:var(--beige)}   /* accent — sparing */

/* ---------- Buttons ---------- */
.btn,
button.btn,
a.btn{
  display:inline-block;
  background:var(--grey-700);
  color:#fff;
  border:none;
  border-radius:2px;
  padding:16px 34px;
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
  transition:background .25s var(--ease);
  line-height:1;
}
.btn:hover,button.btn:hover,a.btn:hover{background:var(--text)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* text / ghost link CTA */
.btn-text{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--grey-700);
  border-bottom:1px solid var(--grey-400);
  padding-bottom:6px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.btn-text:hover{color:var(--text);border-color:var(--text)}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header .wrap{
  width:100%;display:flex;align-items:center;justify-content:space-between;
}
.site-header.scrolled{
  background:var(--bg);
  border-bottom:1px solid var(--grey-100);
  box-shadow:0 1px 20px rgba(43,43,42,.05);
}

.wordmark{
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  font-size:24px;
  letter-spacing:.14em;
  color:var(--text);
}

.nav-tabs{display:flex;gap:38px;align-items:center}
.nav-tabs a{
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--grey-700);
  transition:color .2s var(--ease);
}
.nav-tabs a:hover{color:var(--text)}

/* hamburger */
.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:6px;
  width:34px;height:34px;background:none;border:none;cursor:pointer;padding:6px;
}
.nav-toggle span{
  display:block;height:1.5px;width:100%;background:var(--text);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}

/* full-screen overlay menu */
.nav-overlay{
  position:fixed;inset:0;z-index:490;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:34px;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s var(--ease);
}
.nav-overlay.open{opacity:1;visibility:visible}
.nav-overlay a{
  font-size:16px;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--text);
}
.nav-overlay a:hover{color:var(--grey-400)}

body.menu-open{overflow:hidden}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--grey-100);
  padding:72px 0;
  text-align:center;
}
.site-footer .fname{
  font-family:'Montserrat',sans-serif;font-weight:300;font-size:22px;
  letter-spacing:.14em;color:var(--text);margin-bottom:22px;
}
.site-footer .frow{
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;
  margin-bottom:26px;
}
.site-footer .frow a{
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  color:var(--grey-700);transition:color .2s var(--ease);
}
.site-footer .frow a:hover{color:var(--text)}
.site-footer .copyright{
  font-size:11px;letter-spacing:.1em;color:var(--grey-400);font-weight:400;
}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  section{padding:var(--pad-section-mob) 0}
  .wrap{padding:0 22px}
  .nav-tabs{display:none}
  .nav-toggle{display:flex}
}

/* ============ NEWSLETTER SIGNUP STRIP (site-wide, above footer) ============ */
.nl-strip{background:var(--surface);border-top:1px solid var(--grey-100);border-bottom:1px solid var(--grey-100)}
.nl-strip-inner{max-width:var(--maxw,1120px);margin:0 auto;padding:40px 32px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.nl-strip-copy h3{font-family:'Montserrat',sans-serif;font-weight:300;font-size:22px;letter-spacing:.02em;color:var(--text);margin:0 0 6px}
.nl-strip-copy p{font-weight:300;font-size:14px;color:var(--grey-700);margin:0;line-height:1.6;max-width:42ch}
.nl-strip-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative}
.nl-strip-form input[type=text],.nl-strip-form input[type=email]{padding:13px 15px;border:1px solid var(--grey-100);border-radius:2px;background:#fff;font:14px 'Montserrat',sans-serif;font-weight:300;color:var(--text);min-width:170px}
.nl-strip-form input:focus{outline:none;border-color:var(--grey-400)}
.nl-strip-form button{background:var(--grey-700);color:#fff;border:none;padding:14px 26px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:background .25s}
.nl-strip-form button:hover{background:var(--text)}
.nl-strip-form button:disabled{opacity:.55;cursor:not-allowed}
.nl-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden}
.nl-strip-msg{flex-basis:100%;font-size:12px;letter-spacing:.04em;font-weight:400;min-height:1em;margin-top:2px}
.nl-strip-msg.ok{color:var(--grey-700)}
.nl-strip-msg.err{color:#8a4b4b}
@media(max-width:768px){
  .nl-strip-inner{flex-direction:column;align-items:stretch;text-align:center;gap:22px;padding:34px 24px}
  .nl-strip-copy p{max-width:none}
  .nl-strip-form{justify-content:center}
  .nl-strip-form input[type=text],.nl-strip-form input[type=email]{flex:1 1 100%;min-width:0}
  .nl-strip-form button{flex:1 1 100%}
}