/* ─────────────────────────────────────────────────────────────────────────────
   jakemcanelly.com — styles.css  |  Yacht Club Theme
   Navy #0f2140 · Gold #c9a84c · Off-white #f7f5f0
   To switch themes, change <link href="styles.css"> → styles-inkwash.css
───────────────────────────────────────────────────────────────────────────── */

:root {
  --navy:       #0f2140;
  --navy-mid:   #1a3560;
  --navy-light: #1e4080;
  --gold:       #c9a84c;
  --gold-lt:    #e8c97a;
  --offwhite:   #f7f5f0;
  --white:      #ffffff;
  --gray:       #6b7280;
  --light:      #f1f5f9;
  --border:     #e2e8f0;
  --text:       #1f2937;
  --text-muted: #4b5563;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --speed:      0.22s;
  --radius:     10px;
  --nav-h:      64px;
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', sans-serif; background: var(--offwhite); color: var(--navy); line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── Progress Bar ──────────────────────────────────────────────────────── */
#progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  z-index: 9999; transition: width 0.08s linear; pointer-events: none;
}

/* ─── Nav ───────────────────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(15,33,64,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  transition: box-shadow var(--speed) var(--ease);
}
#nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.28); }
.nav-inner {
  max-width: 1100px; margin: 0 auto; height: 100%; padding: 0 5%;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700; color:var(--gold); text-decoration:none; }
.nav-links { display:flex; gap:2.2rem; }
.nav-links .nav-link {
  color:rgba(255,255,255,0.75); text-decoration:none;
  font-size:0.78rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  transition:color var(--speed) var(--ease); position:relative; padding-bottom:2px;
}
.nav-links .nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1.5px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform var(--speed) var(--ease);
}
.nav-links .nav-link:hover, .nav-links .nav-link.active { color:var(--gold); }
.nav-links .nav-link:hover::after, .nav-links .nav-link.active::after { transform:scaleX(1); }

/* Hamburger */
.menu-btn { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index:210; }
.menu-btn span {
  display:block; width:24px; height:2px; background:rgba(255,255,255,0.85);
  border-radius:2px; transition:transform 0.25s var(--ease),opacity 0.2s; transform-origin:center;
}
.menu-btn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.menu-btn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.mobile-nav {
  position:fixed; inset:0; background:var(--navy); z-index:190;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.3s var(--ease),visibility 0.3s;
}
.mobile-nav.open { opacity:1; visibility:visible; }
.mobile-nav ul { display:flex; flex-direction:column; gap:2rem; text-align:center; }
.mobile-nav .nav-link { color:rgba(255,255,255,0.8); text-decoration:none; font-size:1.4rem; font-weight:500; transition:color var(--speed); }
.mobile-nav .nav-link:hover { color:var(--gold); }

/* ─── Shared ────────────────────────────────────────────────────────────── */
.container { max-width:1100px; margin:0 auto; padding:0 5%; }
section { padding:96px 0; }
.section-label { font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; }
.section-label--light { color:rgba(201,168,76,0.85); }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); color:var(--navy); line-height:1.2; margin-bottom:2.5rem; }
.section-title--light { color:var(--white); }
.section-title span, .section-title em { color:var(--gold); font-style:italic; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:13px 28px; border-radius:6px; font-weight:700; font-size:0.88rem;
  text-decoration:none; white-space:nowrap;
  transition:transform var(--speed) var(--ease),background var(--speed),border-color var(--speed),color var(--speed);
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--gold); color:var(--navy); border:2px solid var(--gold); }
.btn-primary:hover { background:var(--gold-lt); border-color:var(--gold-lt); }
.btn-outline { background:transparent; color:rgba(255,255,255,0.85); border:1.5px solid rgba(255,255,255,0.3); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-ghost { background:transparent; color:var(--navy); border:1.5px solid var(--border); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn-full { width:100%; justify-content:center; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
#hero {
  min-height:100vh; padding:calc(var(--nav-h) + 64px) 5% 100px;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-mid) 55%,var(--navy-light) 100%);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
#hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 68% 38%,rgba(201,168,76,0.1) 0%,transparent 58%);
  pointer-events:none;
}
#hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:120px;
  background:linear-gradient(to bottom,transparent,var(--offwhite)); pointer-events:none;
}
.hero-inner {
  position:relative; max-width:1000px; width:100%;
  display:grid; grid-template-columns:1fr auto; gap:5rem; align-items:center; z-index:1;
}
.hero-tag {
  display:inline-block;
  background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.36);
  color:var(--gold-lt); font-size:0.7rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
  padding:6px 16px; border-radius:30px; margin-bottom:1.3rem;
}
.hero-name { font-family:'Playfair Display',serif; font-size:clamp(3rem,7vw,4.8rem); color:var(--white); line-height:1.05; letter-spacing:-0.01em; margin-bottom:1rem; }
.hero-name span { color:var(--gold); }
.hero-bio { font-size:0.98rem; color:rgba(255,255,255,0.62); line-height:1.78; max-width:500px; margin-bottom:1rem; }
.hero-honor {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.27);
  color:var(--gold-lt); font-size:0.76rem; font-weight:600;
  padding:5px 14px; border-radius:20px; margin-bottom:2rem;
}
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-socials { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; }
.social-link {
  color:rgba(255,255,255,0.45); text-decoration:none;
  font-size:0.75rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  transition:color var(--speed) var(--ease);
}
.social-link:hover { color:var(--gold); }

/* Headshot */
.headshot-wrap {
  width:240px; height:240px; border-radius:50%;
  border:3px solid var(--gold);
  box-shadow:0 0 0 10px rgba(201,168,76,0.1),0 24px 60px rgba(0,0,0,0.45);
  overflow:hidden; background:var(--navy-mid);
  display:flex; align-items:center; justify-content:center;
}
.headshot-wrap img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.headshot-placeholder { text-align:center; color:rgba(255,255,255,0.3); font-size:0.7rem; line-height:1.6; padding:1rem; }

/* ─── About ─────────────────────────────────────────────────────────────── */
#about { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.about-text p { color:var(--text-muted); font-size:1.02rem; line-height:1.8; margin-bottom:1.2rem; }
.about-text p:last-child { margin-bottom:0; }
.about-text strong { color:var(--navy); font-weight:600; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stat-card {
  background:var(--offwhite); border:1px solid var(--border); border-radius:var(--radius);
  border-left:3px solid var(--gold); padding:1.3rem 1.2rem;
  transition:transform var(--speed) var(--ease),box-shadow var(--speed);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(15,33,64,0.08); }
.stat-num { font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:700; color:var(--navy); line-height:1; margin-bottom:4px; }
.stat-label { font-size:0.77rem; color:var(--gray); font-weight:500; line-height:1.4; }

/* ─── Experience ────────────────────────────────────────────────────────── */
#experience { background:var(--offwhite); }
.exp-list { display:flex; flex-direction:column; gap:1.2rem; }
.exp-card {
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  padding:1.6rem 2rem; display:grid; grid-template-columns:44px 1fr; gap:1.4rem; align-items:start;
  transition:box-shadow var(--speed) var(--ease),transform var(--speed) var(--ease);
}
.exp-card:hover { box-shadow:0 8px 28px rgba(15,33,64,0.09); transform:translateY(-2px); }
.exp-icon {
  width:44px; height:44px; background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.exp-company { font-size:0.72rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:2px; }
.exp-role { font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:2px; }
.exp-date { font-size:0.75rem; color:var(--gray); margin-bottom:0.75rem; }
.exp-bullets li { font-size:0.9rem; color:var(--text-muted); padding:3px 0 3px 1.3rem; position:relative; line-height:1.6; }
.exp-bullets li::before { content:'▸'; position:absolute; left:0; color:var(--gold); font-size:0.7rem; top:6px; }

/* ─── Credentials ───────────────────────────────────────────────────────── */
#credentials { background:var(--white); }
.cred-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin-bottom:2rem; }
.cred-card {
  background:var(--offwhite); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem; display:flex; align-items:flex-start; gap:1rem;
  transition:box-shadow var(--speed) var(--ease),transform var(--speed) var(--ease);
}
.cred-card:hover { box-shadow:0 6px 20px rgba(15,33,64,0.08); transform:translateY(-2px); }
.cred-icon-wrap {
  width:38px; height:38px; background:linear-gradient(135deg,var(--gold),#b8913e);
  border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.cred-badge-img { width:38px; height:38px; border-radius:8px; object-fit:contain; flex-shrink:0; }
.cred-name { font-size:0.88rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:3px; }
.cred-issuer { font-size:0.72rem; color:var(--gray); line-height:1.4; }
.cred-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ─── Leadership ────────────────────────────────────────────────────────── */
#leadership { background:var(--offwhite); }
.lead-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.lead-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  border-top:3px solid var(--gold); padding:1.4rem 1.5rem;
  transition:box-shadow var(--speed) var(--ease),transform var(--speed) var(--ease);
}
.lead-card:hover { box-shadow:0 6px 20px rgba(15,33,64,0.08); transform:translateY(-2px); }
.lead-title { font-weight:700; color:var(--navy); font-size:0.93rem; margin-bottom:2px; }
.lead-period { font-size:0.73rem; color:var(--gold); font-weight:600; margin-bottom:6px; }
.lead-detail { font-size:0.82rem; color:var(--gray); line-height:1.55; }

/* ─── Interests ─────────────────────────────────────────────────────────── */
#interests { background:var(--white); }
.interests-wrap { display:flex; flex-wrap:wrap; gap:0.7rem; }
.interest-tag {
  background:var(--offwhite); border:1px solid var(--border); border-radius:30px;
  padding:8px 18px; font-size:0.87rem; font-weight:500; color:var(--navy);
  transition:border-color var(--speed),color var(--speed);
}
.interest-tag:hover { border-color:var(--gold); color:var(--gold); }

/* ─── Contact ───────────────────────────────────────────────────────────── */
#contact { background:linear-gradient(140deg,var(--navy) 0%,var(--navy-mid) 100%); color:var(--white); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-intro { font-size:0.95rem; color:rgba(255,255,255,0.58); line-height:1.75; margin-bottom:2rem; max-width:360px; }
.contact-items { display:flex; flex-direction:column; gap:0.75rem; }
.contact-item {
  display:flex; align-items:center; gap:0.9rem;
  color:rgba(255,255,255,0.72); text-decoration:none; font-size:0.88rem;
  transition:color var(--speed) var(--ease); padding:0.15rem 0;
}
.contact-item:hover { color:var(--gold); }
.ci-icon {
  width:36px; height:36px; background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.22);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; flex-shrink:0; font-style:normal;
  transition:background var(--speed),border-color var(--speed);
}
.contact-item:hover .ci-icon { background:rgba(201,168,76,0.18); border-color:rgba(201,168,76,0.45); }

/* Form */
.contact-form { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:2rem; }
.form-row { margin-bottom:1.1rem; }
.form-label { display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:6px; }
.form-input, .form-textarea {
  width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.13);
  border-radius:6px; padding:11px 14px; color:var(--white);
  font-family:'Inter',sans-serif; font-size:0.9rem; outline:none;
  transition:border-color var(--speed) var(--ease);
}
.form-input::placeholder, .form-textarea::placeholder { color:rgba(255,255,255,0.22); }
.form-input:focus, .form-textarea:focus { border-color:var(--gold); }
.form-input.error, .form-textarea.error { border-color:#f87171; }
.form-textarea { resize:vertical; min-height:100px; }
.field-hint { display:none; font-size:0.72rem; color:#f87171; margin-top:4px; }
.form-success { text-align:center; padding:3rem 1rem; }
.form-success-icon { font-size:2.5rem; color:var(--gold); margin-bottom:1rem; }
.form-success h3 { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--white); margin-bottom:0.5rem; }
.form-success p { color:rgba(255,255,255,0.5); font-size:0.9rem; }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background:#080f1f; padding:1.8rem 5%; text-align:center; }
.site-footer p { color:rgba(255,255,255,0.32); font-size:0.8rem; }
.site-footer a { color:var(--gold); text-decoration:none; }
.site-footer a:hover { color:var(--gold-lt); }

/* ─── Scroll Reveal ─────────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.55s var(--ease),transform 0.55s var(--ease); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-group > * { opacity:0; transform:translateY(18px); transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
.reveal-group > *.in { opacity:1; transform:translateY(0); }
.reveal-group > *:nth-child(1) { transition-delay:0s; }
.reveal-group > *:nth-child(2) { transition-delay:0.07s; }
.reveal-group > *:nth-child(3) { transition-delay:0.14s; }
.reveal-group > *:nth-child(4) { transition-delay:0.21s; }
.reveal-group > *:nth-child(5) { transition-delay:0.28s; }
.reveal-group > *:nth-child(6) { transition-delay:0.35s; }
.reveal-group > *:nth-child(7) { transition-delay:0.42s; }
.reveal-group > *:nth-child(8) { transition-delay:0.49s; }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:960px) {
  .nav-links { display:none; }
  .menu-btn  { display:flex; }
  .hero-inner { grid-template-columns:1fr; text-align:center; gap:3rem; }
  .hero-photo { order:-1; display:flex; justify-content:center; }
  .hero-bio   { margin-left:auto; margin-right:auto; }
  .hero-ctas, .hero-socials, .hero-honor { justify-content:center; }
  .about-grid { grid-template-columns:1fr; gap:3rem; }
  .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .contact-intro { max-width:100%; }
  .exp-card { grid-template-columns:1fr; }
  .exp-icon { display:none; }
}
@media (max-width:600px) {
  section { padding:72px 0; }
  .hero-name { font-size:clamp(2.4rem,10vw,3.2rem); }
  .headshot-wrap { width:180px; height:180px; }
  .hero-ctas { flex-direction:column; align-items:center; }
  .hero-ctas .btn { width:100%; max-width:280px; justify-content:center; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .cred-grid { grid-template-columns:1fr; }
  .lead-grid { grid-template-columns:1fr; }
  .cred-actions { flex-direction:column; }
  .cred-actions .btn { width:100%; justify-content:center; }
}