/* Global Design System */
:root{
  --bg:#ffffff;
  --bg-muted:#f7fafc;
  --bg-dark:#0B1220;
  --text:#1F2937;
  --text-on-dark:#F5F7FA;
  --muted:#94A3B8;
  --teal:#3DDC97;
  --teal-hover:#47e0a0;
  --gradient: linear-gradient(to right, #0F3443, #34E89E);
  --radius:16px;
  --shadow-sm:0 8px 24px rgba(15,52,67,.08);
  --shadow-md:0 12px 28px rgba(15,52,67,.12);
}
*,:before,:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:#0F3443}
a.link-ext{display:inline-flex;gap:.5rem;align-items:center}
.container{max-width:1120px;margin-inline:auto;padding-inline:1.25rem}
.section{padding:3rem 0}
.bg-muted{background:var(--bg-muted)}
.section-title{font-family:Montserrat,Inter,sans-serif;font-size:1.5rem;margin:0 0 1rem}
.page-title{font-family:Montserrat,Inter,sans-serif;font-size:2rem;margin:.5rem 0 1rem}

/* Header & Nav */
.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.site-brand{font-family:Montserrat,Inter,sans-serif;font-weight:800;letter-spacing:.5px;color:#0F3443;text-decoration:none}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-long{display:none;font-family:Montserrat,Inter,sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
@media (min-width:900px){
  .brand-long{display:inline-block;
    background:linear-gradient(90deg,#0F3443 0%,#34E89E 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 2px 14px rgba(52,232,158,.25);
    font-size:.95rem
  }
}
.nav-toggle,.nav-close{background:none;border:0;padding:.25rem;border-radius:.5rem}
.site-nav{position:fixed;inset:0 0 auto 0;top:0;background:#ffffff;transform:translateY(-100%);transition:transform .25s ease-out;box-shadow:var(--shadow-sm)}
.site-nav.open{transform:translateY(0)}
.site-nav ul{list-style:none;margin:0;padding:4.5rem 1.25rem 1rem;display:grid;gap:.5rem}
.site-nav a{display:block;padding:.75rem 1rem;border-radius:.75rem;color:var(--text);text-decoration:none;font-weight:600}
.site-nav a:focus,.site-nav a:hover{background:var(--bg-muted)}
.nav-close{position:absolute;top:.75rem;right:.75rem}
@media (min-width:900px){
  .nav-toggle,.nav-close{display:none}
  .site-nav{position:static;transform:none;box-shadow:none}
  .site-nav ul{display:flex;gap:1rem;padding:0}
  .site-nav a{padding:.5rem .75rem}
}

/* Home header contact (top-right, text only) */
/* Hero inline contact (home) */
.hero-top-contact{position:absolute;top:12px;right:16px;display:flex;gap:12px;font-weight:600;font-size:.95rem;color:var(--text-on-dark);z-index:3}
.hero-top-contact a{color:var(--text-on-dark);text-decoration:none}
.hero-top-contact a:hover{text-decoration:underline}
.hero-top-contact .sep{opacity:.7}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:999px;border:2px solid transparent;font-weight:700;text-decoration:none;cursor:pointer}
.btn .icon{width:1rem;height:1rem}
.btn-primary{background:var(--gradient);color:var(--text-on-dark);box-shadow:0 6px 18px rgba(52,232,158,.25)}
.btn-primary:hover{filter:brightness(1.04)}
.btn-secondary{border-color:#0F3443;color:#0F3443;background:transparent}
.btn-secondary:hover{background:#0F34430f}

/* Pills */
.pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:.5rem .75rem;background:#ffffff;border:1px solid #e5e7eb;border-radius:999px;box-shadow:var(--shadow-sm);white-space:nowrap}
.filter-btn[aria-pressed="true"]{background:#0F3443;color:#fff;border-color:#0F3443}
.filter-reset{background:#fff;border:1px dashed #94A3B8}

/* Marquee */
.marquee-wrap{overflow:auto; -webkit-overflow-scrolling:touch}
.marquee{gap:.75rem}
.marquee:focus{outline:2px solid #0F3443;outline-offset:2px}

/* Cards & Project Grid */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.card-body{padding:1rem}
.project-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.project-feature{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1rem}
.project-media{border-radius:var(--radius);overflow:hidden}
.tags{margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap}
.bullets{padding-left:1.25rem;margin:.25rem 0 .5rem}
@media (min-width:768px){
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .project-feature{grid-template-columns:1.2fr .8fr;align-items:center}
}

/* Layout helpers */
.grid-2{display:grid;grid-template-columns:1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){
  .grid-2{grid-template-columns:1.05fr .95fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* Quote */
.quote{font-family:"Merriweather",serif;color:#e7ecf4;background:#0B1220;border-radius:var(--radius);padding:1.25rem}
.quote footer{color:#cbd5e1}

/* Footer */
.site-footer{border-top:1px solid #e5e7eb;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1rem;padding:1.5rem 0}
.footer-links{list-style:none;display:grid;gap:.25rem;padding:0;margin:0}
.footer-social{display:flex;gap:.5rem;flex-wrap:wrap}
.icon-link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;border:1px solid #e5e7eb;border-radius:999px;padding:.5rem .75rem;background:#fff}
.icon-link img{width:18px;height:18px}
.muted{color:var(--muted)}
.copyright{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-top:1px solid #e5e7eb}
@media (min-width:900px){
  .footer-grid{grid-template-columns:1.2fr .8fr 1fr;align-items:start}
}

/* Sticky Contact Bar */
.contact-bar{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:40;transition:transform .25s ease}
.contact-bar.hidden{transform:translateY(120%)}
.contact-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#0F3443;box-shadow:var(--shadow-md)}
.contact-btn img{width:22px;height:22px}
.contact-btn:focus{outline:2px solid #34E89E;outline-offset:2px}

/* Accordion */
.accordion-item{border:1px solid #e5e7eb;border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden;background:#fff}
.accordion-trigger{all:unset;display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem;cursor:pointer}
.accordion-trigger:focus{outline:2px solid #0F3443;outline-offset:-2px}
.accordion-panel{padding:0 1rem 1rem}

/* Forms */
.contact-form{display:grid;gap:1rem;max-width:720px}
.form-field{display:grid;gap:.25rem}
input,textarea{width:100%;padding:.75rem;border:1px solid #d1d5db;border-radius:.75rem;font:inherit}
input:focus,textarea:focus{outline:2px solid #0F3443;outline-offset:2px}
.error{color:#b91c1c;min-height:1.25rem}
.form-actions{display:flex;align-items:center;gap:1rem}

/* Utilities */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#0F3443;color:#fff;padding:.5rem;border-radius:.5rem;z-index:100}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.coaching-link[aria-disabled="true"]{pointer-events:none;opacity:.65;cursor:not-allowed}
.about-media img{border-radius:var(--radius)}
.timeline{position:relative;margin-left:1rem}
.timeline:before{content:"";position:absolute;left:.3rem;top:0;bottom:0;width:2px;background:#e5e7eb}
.timeline-item{position:relative;padding-left:1.25rem;margin-bottom:1rem}
.timeline-dot{position:absolute;left:-.1rem;top:.4rem;width:.6rem;height:.6rem;border-radius:50%;background:#34E89E}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Images reserved sizes to prevent CLS */
img[width][height]{height:auto}

/* Devotional font note: defined in index critical CSS for glow; retain sizes via base rules */

/* End */

.contact-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 12px; max-width: 640px; }
.contact-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px; text-decoration: none; color: var(--fg, #0f172a);
  box-shadow: 0 8px 20px rgba(2,6,23,0.04); transition: transform .12s ease, box-shadow .12s ease;
}
.contact-link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,6,23,0.07); }
.contact-link svg { width: 20px; height: 20px; fill: currentColor; opacity: .8; }
.contact-note { margin-top: 10px; color: #6b7280; }

/* Floating contact bar (right side) */
.contact-bar{
  position:fixed; right:24px; bottom:24px;
  display:flex; flex-direction:column; gap:16px;
  z-index:9999; /* ensure above content */
}
.contact-btn{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:#0f2a33; box-shadow:0 18px 40px rgba(0,0,0,.18);
  border:2px solid rgba(255,255,255,.08);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  color:#ffffff; /* makes inline SVG strokes/fills white via currentColor */
}
.contact-btn:hover{ transform:translateY(-2px); box-shadow:0 26px 60px rgba(0,0,0,.25); background:#123745; }
.contact-btn svg{ width:24px; height:24px; display:block; }

/* Site-wide background */
/* Teal → green aurora gradient with a soft vignette */
/* assets/css/styles.css */
/* assets/css/styles.css */
/* assets/css/styles.css */
/* Home page background image */
body.home{
  /* keep base color from variables as fallback */
  background-color: var(--bg);
  /* update the path if you switch to bg.jpg */
  background-image: url("../img/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* About page background */
body.about{
  background-color: var(--bg);
  background-image: url("../img/aboutbg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Coaching page background */
body.coaching{
  background-color: var(--bg);
  background-image: url("../img/coachingbg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Projects page background */
body.projects{
  background-color: var(--bg);
  background-image: url("../img/projectbg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Position the hero as a stacking context */
.hero{ position: relative; overflow: hidden; }

/* Giant watermark in the top-left */
.sskg-badge{
  position: absolute;
  top: clamp(8px, 3.5vw, 40px); /* slightly higher */
  left: clamp(10px, 3.5vw, 32px); /* slightly more left */
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(36px, 9vw, 120px); /* smaller watermark */
  line-height: 1;
  color: rgba(255,255,255,.045); /* lighter */
  -webkit-text-stroke: 1.5px rgba(255,255,255,.14);
  text-shadow: 0 4px 28px rgba(0,0,0,.28);
  transform: none;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}


/* Ensure your real hero content sits above the badge */
.hero-inner{ position: relative; z-index: 2; }

/* Tweak on small screens so it doesn't overpower */
@media (max-width: 640px){
  .sskg-badge{
    font-size: clamp(28px, 16vw, 80px);
    -webkit-text-stroke: 1px rgba(255,255,255,.12);
    color: rgba(255,255,255,.04);
  }
}