/*
Theme Name: The Connected Competitor
Author: Amanda Sovik-Johnston
Version: 1.0
*/

:root {
  --navy:        #21295B;
  --navy-dark:   #161C40;
  --navy-mid:    #2E3870;
  --navy-light:  #3A4882;
  --teal:        #458A99;
  --teal-light:  #6BAAB7;
  --teal-pale:   #D6EAEE;
  --coral:       #F1626D;
  --coral-light: #F7969E;
  --yellow:      #FEBE14;
  --yellow-light:#FFD55A;
  --white:       #FFFFFF;
  --off-white:   #F8F9FC;
  --light-bg:    #EFF2F8;
  --border:      rgba(33,41,91,0.12);
  --text-dark:   #1A1F3A;
  --text-mid:    #4A5175;
  --text-light:  #8A90AA;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--text-dark); font-family:'Nunito Sans',sans-serif; font-weight:300; line-height:1.7; overflow-x:hidden; }

/* NAV */
nav { position:fixed; top:0; width:100%; padding:0 5rem; height:72px; display:flex; justify-content:space-between; align-items:center; z-index:100; background:rgba(33,41,91,0.97); backdrop-filter:blur(12px); }
.nav-logo { font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:1rem; letter-spacing:0.06em; color:var(--white); text-decoration:none; text-transform:uppercase; display:flex; align-items:center; gap:0.2rem; }
.nav-logo .script { font-family:'Nunito Sans',sans-serif; font-size:1rem; font-weight:700; color:var(--teal-light); letter-spacing:0.06em; text-transform:uppercase; }
nav ul { list-style:none; display:flex; gap:2.5rem; align-items:center; }
nav ul a { font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.65); text-decoration:none; transition:color 0.2s; }
nav ul a:hover { color:var(--teal-light); }
.nav-cta { background:var(--teal) !important; color:white !important; padding:0.5rem 1.2rem !important; border-radius:3px; }
.nav-cta:hover { background:var(--teal-light) !important; }

/* HERO */
.hero { min-height:100vh; background:var(--navy); display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; padding-top:72px; }
.hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(69,138,153,0.13) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; }
.hero::after { content:''; position:absolute; top:-10%; right:-5%; width:55%; height:130%; background:var(--navy-mid); transform:skewX(-8deg); pointer-events:none; }
.hero-left { display:flex; flex-direction:column; justify-content:center; padding:6rem 4rem 6rem 5rem; position:relative; z-index:2; animation:fadeUp 0.9s ease 0.2s both; }
.hero-eyebrow { display:flex; align-items:center; gap:0.75rem; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--teal-light); margin-bottom:1.8rem; }
.hero-eyebrow::before { content:''; width:32px; height:2px; background:var(--teal); }
h1 { font-family:'Nunito Sans',sans-serif; font-size:clamp(2.6rem,4.5vw,4.2rem); font-weight:700; line-height:1.1; color:var(--white); margin-bottom:1.8rem; letter-spacing:-0.01em; }
h1 .script-accent { font-family:'Playfair Display',Georgia,serif; font-weight:400; font-style:italic; color:var(--teal-light); font-size:1.05em; display:block; line-height:1.2; }
.hero-subhead { font-size:1rem; color:rgba(255,255,255,0.62); max-width:420px; margin-bottom:3rem; line-height:1.85; }
.cta-row { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary { display:inline-block; padding:0.9rem 2.2rem; background:var(--teal); color:white; text-decoration:none; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; border-radius:3px; transition:background 0.2s,transform 0.2s; }
.btn-primary:hover { background:var(--teal-light); transform:translateY(-2px); }
.btn-outline { display:inline-block; padding:0.9rem 2.2rem; border:1.5px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.8); text-decoration:none; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; border-radius:3px; transition:all 0.2s; }
.btn-outline:hover { border-color:var(--teal-light); color:var(--teal-light); }
.hero-right { display:flex; align-items:flex-end; justify-content:center; padding:0 3rem 0 2rem; position:relative; z-index:2; animation:fadeIn 1.1s ease 0.5s both; }
.hero-photo-wrap { width:75%; max-width:340px; height:auto; max-height:480px; overflow:hidden; position:relative; border-radius:4px; margin-bottom:3rem; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.hero-photo-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--teal),var(--coral)); z-index:1; }
.hero-photo-wrap img { width:100%; display:block; object-fit:cover; object-position:center top; }

/* QUOTE BAND */
.quote-band { background:var(--off-white); padding:3rem 5rem; display:flex; justify-content:center; }
.quote-band-inner { max-width:760px; text-align:center; }
.dot-row { display:flex; gap:6px; justify-content:center; margin-bottom:1.5rem; align-items:center; }
.hero-quote { font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400; font-size:1.5rem; color:var(--navy); line-height:1.65; margin-bottom:1rem; }
.hero-quote-attr { font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--teal); }

/* STATS */
.stats-bar { background:var(--navy-dark); display:flex; justify-content:center; }
.stat { flex:1; max-width:260px; padding:2rem 2.5rem; border-right:1px solid rgba(255,255,255,0.07); text-align:center; }
.stat:last-child { border-right:none; }
.stat-number { font-size:2.2rem; font-weight:700; color:var(--teal-light); line-height:1; margin-bottom:0.4rem; }
.stat-label { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.4); font-weight:600; }

/* ABOUT */
.about { padding:7rem 5rem; display:grid; grid-template-columns:180px 1fr; gap:3.5rem; align-items:start; background:var(--off-white); }
.about-sticky { position:sticky; top:100px; }
.section-eyebrow { font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--teal); margin-bottom:1rem; display:flex; align-items:center; gap:0.6rem; }
.section-eyebrow::before { content:''; width:24px; height:2px; background:var(--teal); }
h2 { font-family:'Nunito Sans',sans-serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; line-height:1.15; color:var(--navy); letter-spacing:-0.01em; }
h2 .script-accent { font-family:'Playfair Display',Georgia,serif; font-weight:400; font-style:italic; color:var(--teal); font-size:1.05em; display:block; line-height:1.3; }
.about-body p { color:var(--text-mid); margin-bottom:1.2rem; font-size:0.97rem; line-height:1.9; }
.credentials-row { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2rem; }
.credential-tag { padding:0.35rem 0.9rem; background:var(--light-bg); border:1px solid var(--border); border-radius:20px; font-size:0.75rem; color:var(--navy); font-weight:600; letter-spacing:0.04em; }
.about-inline-photos { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.about-inline-photos img { width:100%; border-radius:4px; object-fit:cover; height:200px; display:block; box-shadow:0 4px 16px rgba(33,41,91,0.12); transition:transform 0.25s; }
.about-inline-photos img:hover { transform:translateY(-3px); }
.coaching-disclaimer { margin-top:2rem; padding:1rem 1.5rem; background:var(--teal-pale); border-left:3px solid var(--teal); border-radius:0 4px 4px 0; }
.coaching-disclaimer p { font-size:0.82rem; color:var(--text-mid); line-height:1.7; margin:0; }
.coaching-disclaimer a { color:var(--teal); font-weight:600; }

/* OFFERINGS */
.offerings { padding:7rem 5rem; background:var(--navy); position:relative; overflow:hidden; }
.offerings::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(69,138,153,0.1) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.offerings-header { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:4rem; position:relative; z-index:1; }
.offerings-eyebrow { color:var(--teal-light) !important; }
.offerings-eyebrow::before { background:var(--teal-light) !important; }
.offerings-h2 { color:var(--white) !important; }
.offerings-h2 .script-accent { color:var(--teal-light) !important; }
.offerings-intro { color:rgba(255,255,255,0.55); font-size:0.95rem; line-height:1.85; align-self:end; }
.offerings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; z-index:1; }
.offering-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:6px; padding:2.5rem 2rem; transition:background 0.3s,transform 0.25s; position:relative; overflow:hidden; }
.offering-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; transform:scaleX(0); transition:transform 0.3s; transform-origin:left; }
.offering-card:nth-child(1)::after { background:var(--teal); }
.offering-card:nth-child(2)::after { background:var(--coral); }
.offering-card:nth-child(3)::after { background:var(--yellow); }
.offering-card:hover { background:rgba(255,255,255,0.08); transform:translateY(-4px); }
.offering-card:hover::after { transform:scaleX(1); }
.offering-icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1.4rem; background:rgba(69,138,153,0.2); }
.offering-card:nth-child(2) .offering-icon { background:rgba(241,98,109,0.2); }
.offering-card:nth-child(3) .offering-icon { background:rgba(254,190,20,0.15); }
.offering-card h3 { font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:0.8rem; }
.offering-card p { font-size:0.87rem; color:rgba(255,255,255,0.55); line-height:1.75; }
.offering-link { display:inline-flex; align-items:center; gap:0.4rem; margin-top:1.5rem; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; text-decoration:none; color:var(--teal-light); transition:gap 0.2s; }
.offering-card:nth-child(2) .offering-link { color:var(--coral-light); }
.offering-card:nth-child(3) .offering-link { color:var(--yellow-light); }
.offering-link:hover { gap:0.7rem; }

/* RESOURCES */
.resources { padding:7rem 5rem; background:var(--off-white); }
.resources-header { margin-bottom:4rem; }
.resources-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.resource-card { background:var(--white); border:1px solid var(--border); border-radius:6px; padding:2rem 2.5rem; text-decoration:none; color:inherit; display:flex; align-items:flex-start; gap:1.5rem; transition:box-shadow 0.25s,transform 0.2s,border-color 0.2s; }
.resource-card-static { cursor:default; flex-direction:column; gap:1.25rem; }
.resource-card-static > div:first-child { display:flex; align-items:flex-start; gap:1.5rem; width:100%; }
.resource-card:not(.resource-card-static):hover { box-shadow:0 8px 32px rgba(33,41,91,0.1); transform:translateY(-3px); border-color:var(--teal); }
.resource-icon-wrap { width:46px; height:46px; background:var(--light-bg); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.resource-content h4 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:0.35rem; }
.resource-content p { font-size:0.85rem; color:var(--text-light); line-height:1.65; }
.resource-arrow { margin-left:auto; color:var(--teal); font-size:1.1rem; align-self:center; flex-shrink:0; font-weight:700; transition:transform 0.2s; }
.resource-card:hover .resource-arrow { transform:translateX(5px); }
.coming-soon-badge { display:inline-block; margin-left:0.5rem; padding:0.2rem 0.6rem; background:var(--yellow); color:var(--navy); font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border-radius:20px; vertical-align:middle; }
.app-signup-wrap { display:flex; gap:0.5rem; margin-top:1rem; width:100%; }
.app-signup-wrap input { flex:1; padding:0.65rem 1rem; border:1px solid var(--border); border-radius:3px; font-family:inherit; font-size:0.85rem; color:var(--text-dark); background:var(--off-white); outline:none; }
.app-signup-wrap button { padding:0.65rem 1.25rem; background:var(--teal); color:white; border:none; border-radius:3px; font-family:inherit; font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:background 0.2s; white-space:nowrap; }
.app-signup-wrap button:hover { background:var(--teal-light); }
#app-signup-thanks { font-size:0.82rem; color:var(--teal); font-weight:600; padding:0.25rem 0; }

/* FOOTER */
footer { background:var(--navy-dark); padding:3rem 5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; border-top:3px solid var(--teal); }
.footer-brand { display:flex; flex-direction:column; gap:0.3rem; }
.footer-dots { display:flex; gap:5px; align-items:center; margin-bottom:0.3rem; }
.footer-logo { font-size:0.95rem; font-weight:700; color:var(--white); letter-spacing:0.06em; text-transform:uppercase; }
.footer-tagline { font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:1rem; color:var(--teal-light); font-weight:400; }
footer p { font-size:0.75rem; letter-spacing:0.04em; color:rgba(255,255,255,0.35); }
footer a { color:var(--teal-light); text-decoration:none; font-weight:600; transition:color 0.2s; }
footer a:hover { color:var(--white); }

/* PLAYBOOK PAGE */
.playbook-header { background:var(--navy); padding:9rem 5rem 5rem; position:relative; overflow:hidden; }
.playbook-header::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(69,138,153,0.13) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; }
.header-eyebrow { font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; color:var(--teal-light); margin-bottom:1rem; display:flex; align-items:center; gap:0.6rem; }
.header-eyebrow::before { content:''; width:24px; height:2px; background:var(--teal-light); }
.playbook-header h1 { font-family:'Nunito Sans',sans-serif; font-size:clamp(2.5rem,5vw,4rem); font-weight:700; color:var(--white); margin-bottom:1rem; }
.playbook-header h1 .script-accent { font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400; color:var(--teal-light); display:inline; }
.playbook-subtitle { font-size:1rem; color:rgba(255,255,255,0.55); max-width:500px; }
.coming-soon-section { padding:7rem 5rem; background:var(--off-white); display:flex; flex-direction:column; align-items:center; text-align:center; }
.coming-soon-icon { font-size:3rem; margin-bottom:2rem; }
.coming-soon-section h2 { font-size:1.8rem; font-weight:700; color:var(--navy); margin-bottom:1rem; }
.coming-soon-section > p { font-size:1rem; color:var(--text-mid); max-width:520px; line-height:1.85; margin-bottom:2rem; }
.notify-wrap { display:flex; gap:0.5rem; margin-top:0.5rem; }
.notify-wrap input { flex:1; max-width:300px; padding:0.75rem 1rem; border:1px solid var(--border); border-radius:3px; font-family:inherit; font-size:0.85rem; color:var(--text-dark); background:var(--white); outline:none; }
.notify-wrap button { padding:0.75rem 1.5rem; background:var(--teal); color:white; border:none; border-radius:3px; font-family:inherit; font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:background 0.2s; }
.notify-wrap button:hover { background:var(--teal-light); }
#playbook-thanks { font-size:0.85rem; color:var(--teal); font-weight:600; margin-top:0.75rem; }
.placeholder-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; width:100%; max-width:1100px; margin-top:4rem; }
.placeholder-card { background:var(--white); border:1px solid var(--border); border-radius:6px; overflow:hidden; opacity:0.6; }
.placeholder-card-top { height:140px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.placeholder-card-body { padding:1.5rem; }
.placeholder-tag { font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:var(--teal); margin-bottom:0.6rem; }
.placeholder-card-body h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:0.5rem; line-height:1.4; }
.placeholder-card-body p { font-size:0.82rem; color:var(--text-light); line-height:1.65; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding:4rem 5rem; }
.blog-card { background:var(--white); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:box-shadow 0.25s,transform 0.2s; }
.blog-card:hover { box-shadow:0 8px 32px rgba(33,41,91,0.1); transform:translateY(-3px); }
.blog-card-image img { width:100%; height:200px; object-fit:cover; }
.blog-card-body { padding:1.5rem; }
.blog-card-body h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:0.5rem; }
.blog-card-body h3 a { text-decoration:none; color:inherit; }
.blog-card-body p { font-size:0.85rem; color:var(--text-light); line-height:1.65; }

/* SINGLE POST */
.single-post-wrap { max-width:760px; margin:0 auto; padding:8rem 2rem 5rem; }
.single-post-header { margin-bottom:3rem; }
.back-link { font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--teal); text-decoration:none; display:inline-block; margin-bottom:1.5rem; }
.single-post-header h1 { font-size:clamp(2rem,4vw,3rem); color:var(--navy); margin-top:0.5rem; }
.post-meta { font-size:0.8rem; color:var(--text-light); margin-top:0.75rem; }
.single-post-content { font-size:1.05rem; line-height:1.9; color:var(--text-mid); }
.single-post-content h2,.single-post-content h3 { color:var(--navy); margin:2rem 0 1rem; }
.single-post-content p { margin-bottom:1.5rem; }
.single-post-content a { color:var(--teal); }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width:960px) {
  nav { padding:0 1.5rem; }
  nav ul { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero::after { display:none; }
  .hero-left { padding:5rem 2rem 3rem; }
  .hero-right { padding:2rem; }
  .quote-band { padding:3rem 2rem; }
  .stats-bar { flex-wrap:wrap; }
  .about { grid-template-columns:1fr; padding:5rem 2rem; gap:2.5rem; }
  .offerings { padding:5rem 2rem; }
  .offerings-header { grid-template-columns:1fr; }
  .offerings-grid { grid-template-columns:1fr; }
  .resources { padding:5rem 2rem; }
  .resources-grid { grid-template-columns:1fr; }
  footer { padding:2.5rem 2rem; flex-direction:column; text-align:center; }
  .playbook-header { padding:8rem 2rem 4rem; }
  .coming-soon-section { padding:5rem 2rem; }
  .placeholder-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; padding:3rem 2rem; }
}