/*
Theme Name: ErickF
Author: Erick Fernandez
Version: 1.0
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
:root {
  --bg: #F0F0ED; --bg2: #E6E6E2; --dark: #111111; --dark2: #161616;
  --border: #D2D2CC; --text: #555; --muted: #999; --faint: #BBB;
}
body { background: var(--bg); color: var(--dark); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 6%;
  background: rgba(240,240,237,0.94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: padding 0.4s ease;
}
nav.scrolled { padding: 0.85rem 6%; }
.nav-logo { display: flex; align-items: center; text-decoration: none; transition: opacity 0.25s; }
.nav-logo:hover { opacity: 0.45; }
.nav-logo img { height: 34px; width: auto; display: block; }
.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.25s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--dark); transform: scaleX(0);
  transition: transform 0.3s ease; transform-origin: left;
}
.nav-links a:hover { color: var(--dark); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { color: var(--dark) !important; }
.nav-cta::after { transform: scaleX(1) !important; }
.nav-mobile-cta {
  display: none; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dark); text-decoration: none; border-bottom: 1.5px solid var(--dark); padding-bottom: 2px;
}

/* HERO */
.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 72px; }
.hero-left {
  padding: 7% 5% 7% 6%; display: flex; flex-direction: column;
  justify-content: center; border-right: 1px solid var(--border);
}
.hero-right { position: relative; overflow: hidden; min-height: 600px; }
.hero-right img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; filter: grayscale(100%) contrast(1.04);
  transform: scale(1.06);
  animation: heroZoom 1.6s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero-label {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2.5rem;
  opacity: 0; animation: fadeUp 0.7s ease 0.15s forwards;
}
.hero h1 {
  font-family: 'EB Garamond', serif;
  font-size: clamp(2.8rem, 4.5vw, 5.2rem); font-weight: 400;
  line-height: 1.04; letter-spacing: -0.025em; color: var(--dark); margin-bottom: 2rem;
  opacity: 0; animation: fadeUp 0.8s ease 0.3s forwards;
}
.hero h1 em { font-style: italic; color: #777; }
.hero-sub {
  font-size: 0.92rem; color: var(--text); line-height: 1.85;
  max-width: 400px; margin-bottom: 3rem; font-weight: 300;
  opacity: 0; animation: fadeUp 0.8s ease 0.45s forwards;
}
.hero-form-wrap { opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards; }
.hero-form {
  display: flex; flex-direction: column;
  width: 100%; margin-bottom: 0.7rem;
  border: 1px solid var(--border);
  background: #FAFAF8;
}
.hero-form .form-row {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 1.2rem;
}
.hero-form .form-row:last-of-type { border-bottom: none; }
.hero-form .form-row input {
  flex: 1; background: transparent; border: none;
  padding: 1rem 0;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
  color: var(--dark); outline: none; width: 100%; min-width: 0;
}
.hero-form .form-row input::placeholder { color: #AAAAAA; }
.hero-form .form-submit {
  padding: 1rem 1.2rem;
  background: var(--dark); border: none; color: #F0F0ED;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  white-space: nowrap; width: 100%; text-align: center;
  transition: opacity 0.2s;
}
.hero-form .form-submit:hover { opacity: 0.75; }
.hero-note { font-size: 0.68rem; color: var(--faint); letter-spacing: 0.04em; margin-top: 0.7rem; }
.hero-stats {
  display: flex; gap: 2.5rem; margin-top: 3.5rem;
  padding-top: 2rem; border-top: 1px solid var(--border);
  opacity: 0; animation: fadeUp 0.8s ease 0.75s forwards;
}
.stat-num { font-family: 'EB Garamond', serif; font-size: 2rem; font-weight: 400; color: var(--dark); line-height: 1; }
.stat-label { font-size: 0.65rem; color: var(--muted); margin-top: 0.25rem; letter-spacing: 0.06em; text-transform: uppercase; }

@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

/* LOGOS */
.logos { background: var(--dark2); padding: 3.5rem 6%; }
.logos-inner { display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; }
.logos-label {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #3A3A3A; white-space: nowrap; flex-shrink: 0;
}
.logos-divider { width: 1px; height: 32px; background: #252525; flex-shrink: 0; }
.logos-imgs { display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; flex: 1; }
.logo-item { display: flex; align-items: center; opacity: 0.5; transition: opacity 0.3s ease; }
.logo-item:hover { opacity: 0.9; }
.logo-item img { height: 34px; width: auto; max-width: 220px; object-fit: contain; display: block; }
/* FEN logo is wider/shorter — give it more height so it reads well */
.logo-item.logo-fen img { height: 52px; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(22px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-22px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(22px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* PROBLEM */
.problem { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--border); }
.problem-left { padding:7% 5% 7% 6%; border-right:1px solid var(--border); }
.problem-right { padding:7% 6% 7% 5%; background:var(--bg2); }
.eyebrow { font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:1.5rem; }
.section-h2 { font-family:'EB Garamond',serif; font-size:clamp(1.9rem,3vw,3rem); font-weight:400; line-height:1.1; letter-spacing:-.02em; margin-bottom:1.5rem; color:var(--dark); }
.section-h2 em { font-style:italic; color:#888; }
.body-text { font-size:.9rem; color:var(--text); line-height:1.85; font-weight:300; }
.pain-list { list-style:none; margin-top:1.5rem; }
.pain-list li {
  padding:1.1rem 0; border-bottom:1px solid var(--border);
  font-size:.88rem; color:var(--text); display:flex; align-items:flex-start;
  gap:1rem; line-height:1.65; transition:color .25s, padding-left .25s;
}
.pain-list li:first-child { border-top:1px solid var(--border); }
.pain-list li:hover { color:var(--dark); padding-left:4px; }
.pain-num { font-family:'EB Garamond',serif; font-size:.8rem; color:#CCC; flex-shrink:0; min-width:1.4rem; margin-top:.1rem; }

/* SERVICES */
.services { padding:7% 6%; border-top:1px solid var(--border); }
.services-top { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; gap:2rem; }
.services-intro { max-width:360px; font-size:.88rem; color:#777; line-height:1.8; font-weight:300; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--border); border-top:1px solid var(--border); }
.service-card {
  padding:2.2rem 2rem 2.8rem;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transition:background .35s ease; position:relative; overflow:hidden;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--dark); transform:scaleX(0);
  transition:transform .4s cubic-bezier(.16,1,.3,1); transform-origin:left;
}
.service-card:hover { background:var(--bg2); }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover .service-title { transform:translateX(4px); }
.service-card:hover .service-outcome { color:#888; }
.service-num { font-size:.6rem; letter-spacing:.15em; color:#CCC; margin-bottom:1.5rem; text-transform:uppercase; }
.service-title { font-family:'EB Garamond',serif; font-size:1.3rem; font-weight:400; margin-bottom:.9rem; line-height:1.2; color:var(--dark); transition:transform .3s ease; }
.service-desc { font-size:.84rem; color:#777; line-height:1.78; font-weight:300; }
.service-outcome { margin-top:1.4rem; font-size:.78rem; color:#AAA; border-top:1px solid var(--border); padding-top:1rem; font-style:italic; font-family:'EB Garamond',serif; transition:color .3s; }

/* ABOUT */
.about { display:grid; grid-template-columns:1fr 1.1fr; border-top:1px solid var(--border); }
.about-img { overflow:hidden; border-right:1px solid var(--border); }
.about-img img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block; filter:grayscale(100%);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.about:hover .about-img img { transform:scale(1.03); }
.about-content { padding:7% 6% 7% 5%; display:flex; flex-direction:column; justify-content:center; }
.about-body { font-size:.9rem; color:var(--text); line-height:1.85; font-weight:300; margin-bottom:.9rem; }
.credentials-list { margin:1.8rem 0; list-style:none; }
.credentials-list li {
  padding:.9rem 0; border-bottom:1px solid var(--border);
  font-size:.84rem; display:flex; flex-direction:column; gap:.15rem; transition:padding-left .25s;
}
.credentials-list li:first-child { border-top:1px solid var(--border); }
.credentials-list li:hover { padding-left:4px; }
.cred-institution { font-weight:500; color:#222; font-size:.88rem; }
.cred-degree { color:#999; font-size:.78rem; }
.about-stat-row { display:flex; gap:2rem; margin:1.5rem 0; flex-wrap:wrap; }
.about-stat { border-left:1px solid var(--border); padding-left:1rem; transition:border-color .3s; }
.about-stat:hover { border-color:var(--dark); }
.about-stat-num { font-family:'EB Garamond',serif; font-size:1.8rem; line-height:1; color:var(--dark); }
.about-stat-label { font-size:.65rem; color:var(--muted); margin-top:.2rem; letter-spacing:.06em; text-transform:uppercase; }
.about-link {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.8rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dark); text-decoration:none; position:relative; padding-bottom:3px; width:fit-content;
}
.about-link::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--dark); transform:scaleX(1);
  transition:transform .35s ease; transform-origin:right;
}
.about-link:hover::after { transform:scaleX(0); transform-origin:left; }

/* OPTIN STRIP */
.optin-strip {
  background:var(--dark); padding:5.5rem 6%;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
  position:relative; overflow:hidden;
}
.optin-strip::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:420px; height:420px; border:1px solid #1D1D1D; border-radius:50%; pointer-events:none;
}
.optin-strip::after {
  content:''; position:absolute; top:-70px; right:-70px;
  width:290px; height:290px; border:1px solid #1A1A1A; border-radius:50%; pointer-events:none;
}
.optin-strip h2 { font-family:'EB Garamond',serif; font-size:clamp(1.7rem,2.8vw,2.8rem); font-weight:400; color:#F0F0ED; line-height:1.15; letter-spacing:-.02em; }
.optin-strip h2 em { font-style:italic; color:#555; }
.optin-sub { font-size:.85rem; color:#555; line-height:1.78; margin-bottom:2rem; font-weight:300; }
.strip-form {
  display:flex; flex-direction:column;
  width:100%; margin-bottom:.8rem;
  border:1px solid #333; background:#1C1C1C;
}
.strip-form .form-row {
  display:flex; align-items:center;
  border-bottom:1px solid #333;
  padding:0 1.2rem;
}
.strip-form .form-row:last-of-type { border-bottom:none; }
.strip-form .form-row input {
  flex:1; background:transparent; border:none;
  padding:1rem 0; color:#E8E8E5;
  font-family:'DM Sans',sans-serif; font-size:.88rem;
  outline:none; width:100%; min-width:0;
}
.strip-form .form-row input::placeholder { color:#777; }
.strip-form .form-submit {
  padding:1rem 1.2rem;
  background:#F0F0ED; border:none; color:#111;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  white-space:nowrap; width:100%; text-align:center;
  transition:opacity .2s;
}
.strip-form .form-submit:hover { opacity:.75; }
.strip-note { font-size:.65rem; color:#666; letter-spacing:.05em; margin-top:.7rem; }

/* TESTIMONIALS */
.testimonials { padding:7% 6%; background:var(--bg2); border-top:1px solid var(--border); }
.testimonials-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; gap:3rem; }
.testi-intro { max-width:300px; font-size:.84rem; color:#888; line-height:1.75; font-weight:300; }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; }
.testi-card {
  background:var(--bg); padding:2.5rem 2rem;
  transition:background .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
  position:relative; overflow:hidden;
}
.testi-card::before { content:'"'; position:absolute; top:1rem; right:1.5rem; font-family:'EB Garamond',serif; font-size:5rem; color:#E6E6E2; line-height:1; pointer-events:none; transition:color .3s; }
.testi-card:hover { background:#fff; transform:translateY(-4px); }
.testi-card:hover::before { color:#DDD; }
.testi-card:hover .testi-img { filter:grayscale(0%); }
.testi-quote { font-family:'EB Garamond',serif; font-size:1rem; font-style:italic; color:#555; line-height:1.8; margin-bottom:2rem; position:relative; z-index:1; }
.testi-author { display:flex; align-items:center; gap:.8rem; }
.testi-img { width:40px; height:40px; border-radius:50%; object-fit:cover; filter:grayscale(100%); transition:filter .4s ease; }
.testi-name { font-size:.85rem; font-weight:500; color:var(--dark); }
.testi-role { font-size:.7rem; color:var(--muted); margin-top:.12rem; }

/* FINAL CTA */
.final-cta { padding:9rem 6%; text-align:center; background:var(--bg); border-top:1px solid var(--border); position:relative; overflow:hidden; }
.final-cta h2 { font-family:'EB Garamond',serif; font-size:clamp(2.2rem,4.5vw,4.8rem); font-weight:400; letter-spacing:-.03em; line-height:1.06; max-width:700px; margin:0 auto 1.5rem; color:var(--dark); }
.final-cta h2 em { font-style:italic; color:#999; }
.final-cta > p { font-size:.9rem; color:#888; max-width:380px; margin:0 auto 3rem; line-height:1.8; }
.final-form {
  display:flex; flex-direction:column;
  width:100%; max-width:480px; margin:0 auto .8rem;
  border:1px solid var(--border); background:#FAFAF8;
}
.final-form .form-row {
  display:flex; align-items:center;
  border-bottom:1px solid var(--border);
  padding:0 1.2rem;
}
.final-form .form-row:last-of-type { border-bottom:none; }
.final-form .form-row input {
  flex:1; background:transparent; border:none;
  padding:1rem 0; font-family:'DM Sans',sans-serif;
  font-size:.88rem; color:var(--dark); outline:none;
  width:100%; min-width:0;
}
.final-form .form-row input::placeholder { color:#AAAAAA; }
.final-form .form-submit {
  padding:1rem 1.2rem;
  background:var(--dark); border:none; color:#F0F0ED;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  white-space:nowrap; width:100%; text-align:center;
  transition:opacity .2s;
}
.final-form .form-submit:hover { opacity:.75; }
.final-note { font-size:.68rem; color:#CCC; letter-spacing:.04em; margin-top:.7rem; }

/* FOOTER */
footer { padding:2rem 6%; border-top:1px solid #222; background:var(--dark2); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.footer-logo { text-decoration:none; display:flex; opacity:.3; transition:opacity .3s; }
.footer-logo:hover { opacity:.8; }
.footer-logo img { height:28px; width:auto; display:block; }
.footer-copy { font-size:.65rem; color:#444; letter-spacing:.04em; }
.footer-linkedin a { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#444; text-decoration:none; transition:color .25s; border-bottom:1px solid #2A2A2A; padding-bottom:2px; }
.footer-linkedin a:hover { color:#F0F0ED; border-color:#555; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  nav { padding:1rem 5%; }
  .nav-links { display:none; }
  .nav-mobile-cta { display:block; }
  .nav-cta { display:none; }
  .hero { grid-template-columns:1fr; padding-top:68px; min-height:auto; }
  .hero-right { height:75vw; min-height:260px; order:-1; }
  .hero-left { padding:8% 5% 10%; border-right:none; border-bottom:1px solid var(--border); }
  .hero-stats { gap:1.5rem; flex-wrap:wrap; }
  .stat-num { font-size:1.6rem; }
  .problem { grid-template-columns:1fr; }
  .problem-left { border-right:none; border-bottom:1px solid var(--border); padding:10% 5%; }
  .problem-right { padding:10% 5%; }
  .services { padding:10% 5%; }
  .services-top { flex-direction:column; align-items:flex-start; gap:1rem; }
  .services-grid { grid-template-columns:1fr; }
  .about { grid-template-columns:1fr; }
  .about-img { border-right:none; border-bottom:1px solid var(--border); height:80vw; max-height:420px; overflow:hidden; }
  .about-content { padding:10% 5%; }
  .about-stat-row { gap:1.5rem; }
  .optin-strip { grid-template-columns:1fr; gap:2.5rem; padding:10% 5%; }
  .testimonials { padding:10% 5%; }
  .testimonials-header { flex-direction:column; align-items:flex-start; gap:1rem; }
  .testimonials-grid { grid-template-columns:1fr; gap:2px; }
  .logos { padding:3rem 5%; }
  .logos-inner { gap:2rem; flex-wrap:wrap; }
  .logos-divider { display:none; }
  .logos-imgs { gap:2.5rem; }
  .logo-item img { height:28px; }
  .logo-item.logo-fen img { height:42px; }
  .final-cta { padding:14vw 5%; }
  .hero-form, .strip-form, .final-form { max-width:100%; }
}
@media (max-width:480px) {
  .hero-right { height:85vw; }
  .logos-imgs { gap:2rem; }
  .logo-item img { height:22px; }
  .logo-item.logo-fen img { height:34px; }
  .testimonials-grid { gap:1px; }
  .footer-copy { display:none; }
  nav { padding:.9rem 4%; }
  .nav-logo img { height:28px; }
}