/* ============================================================
   ENIOLA / PAE DIGITAL AGENCY — SHARED SITE STYLESHEET
   Bold purple dominant direction. One display face (Fraunces,
   heavy weight, title case), one quiet sans (Inter) for body/UI.
   No hyphens or em dashes are used anywhere in copy that pulls
   from this system's components.
   ============================================================ */

:root{
  --purple: #160958;
  --purple-deep: #0F0640;
  --purple-soft: #2A1B78;
  --yellow: #FBCC12;
  --white: #FFFFFF;
  --muted: rgba(255,255,255,0.68);
  --hair: rgba(255,255,255,0.16);
  --ink: #160958;
  --ink-muted: #4A4560;
  --cream: #FBF8F1;

  --display: "Fraunces", serif;
  --sans: "Inter", -apple-system, sans-serif;

  --size-hero: clamp(3rem, 2rem + 5.5vw, 7.5rem);
  --size-h1:   clamp(2.5rem, 1.8rem + 3.4vw, 5rem);
  --size-h2:   clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --size-h3:   clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --size-body-lg: 1.2rem;
  --size-body: 1.05rem;
  --size-label: 0.85rem;

  --gutter: clamp(1.5rem, 1rem + 2vw, 3rem);
  --section-pad: clamp(4.5rem, 3.5rem + 4vw, 9rem);

  --radius: 4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--white);
  background:var(--purple);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--yellow); color:var(--purple);}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
  border-radius:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  .marquee-track{animation:none !important;}
}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; margin:0;}
.center{text-align:center;}
.on-white{background:var(--white); color:var(--ink);}
.on-white h1, .on-white h2, .on-white h3, .on-white h4{color:var(--purple);}
.on-white p, .on-white li{color:var(--ink-muted);}

/* ============ HEADER ============ */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem var(--gutter);
  position:sticky; top:0; z-index:60;
  background:rgba(22,9,88,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.site-header .logo{
  font-family:var(--display); font-weight:800; font-size:1.4rem;
  text-decoration:none; color:var(--white); letter-spacing:0.01em;
}
.site-header nav{display:flex; gap:2.2rem; align-items:center;}
.site-header nav a.nav-link{
  font-size:0.95rem; font-weight:600; text-decoration:none; color:rgba(255,255,255,0.85);
  position:relative; padding-bottom:4px;
}
.site-header nav a.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--yellow); transform:scaleX(0); transform-origin:left;
  transition:transform 0.2s ease;
}
.site-header nav a.nav-link:hover::after, .site-header nav a.nav-link[aria-current="page"]::after{transform:scaleX(1);}
.header-actions{display:flex; align-items:center; gap:1rem;}
.mobile-nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:38px; height:38px; padding:0; align-items:center; justify-content:center;
}
.mobile-nav-toggle span, .mobile-nav-toggle span::before, .mobile-nav-toggle span::after{
  content:""; display:block; width:20px; height:1.5px; background:var(--white); position:relative;
}
.mobile-nav-toggle span::before{position:absolute; top:-6px;}
.mobile-nav-toggle span::after{position:absolute; top:6px;}
.mobile-nav-panel{
  display:none; position:fixed; inset:0; z-index:70;
  background:var(--purple-deep); padding:2rem var(--gutter);
  flex-direction:column; gap:1.5rem;
}
.mobile-nav-panel.open{display:flex;}
.mobile-nav-panel a{color:var(--white); text-decoration:none; font-family:var(--display); font-size:1.6rem; font-weight:700;}
.mobile-nav-panel .close-btn{align-self:flex-end; background:none; border:none; color:var(--white); font-size:1.8rem; cursor:pointer;}
@media (max-width: 860px){
  .site-header nav{display:none;}
  .mobile-nav-toggle{display:flex;}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--sans); font-weight:700; font-size:0.98rem;
  padding:0.95rem 1.8rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  line-height:1;
}
.btn-primary{background:var(--yellow); color:var(--purple); border-color:var(--yellow);}
.btn-primary:hover{background:var(--white); color:var(--purple); transform:translateY(-2px);}
.btn-secondary{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4);}
.btn-secondary:hover{border-color:var(--white); background:rgba(255,255,255,0.08);}
.btn-on-white{background:var(--purple); color:var(--white); border-color:var(--purple);}
.btn-on-white:hover{background:var(--yellow); color:var(--purple); border-color:var(--yellow);}

.text-link{
  font-weight:700; text-decoration:none; color:var(--yellow);
  border-bottom:1.5px solid rgba(251,204,18,0.5);
  padding-bottom:2px;
  transition:opacity 0.15s ease;
}
.text-link:hover{opacity:0.75;}
.text-link.on-white{color:var(--purple); border-bottom-color:rgba(22,9,88,0.4);}

/* ============ PAGE HERO (non homepage pages use a shorter version) ============ */
.page-hero{
  padding:clamp(3.5rem,5vw,6rem) var(--gutter) clamp(2.5rem,4vw,4rem);
  text-align:center; max-width:900px; margin:0 auto;
}
.page-hero .eyebrow{font-size:var(--size-label); font-weight:700; color:var(--yellow); margin-bottom:1.2rem; letter-spacing:0.02em;}
.page-hero h1{font-size:var(--size-h1); line-height:1.06; margin:0 auto 1.4rem; max-width:20ch;}
.page-hero h1 em{font-style:italic; color:var(--yellow); font-weight:800;}
.page-hero .sub{font-size:var(--size-body-lg); color:var(--muted); max-width:44ch; line-height:1.6; margin:0 auto 1.8rem;}
.page-hero .cta-row{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--yellow); color:var(--purple);
  overflow:hidden; white-space:nowrap;
  padding:1.1rem 0;
  border-top:2px solid var(--purple);
  border-bottom:2px solid var(--purple);
}
.marquee-track{display:inline-flex; animation:scroll-left 26s linear infinite;}
.marquee-track span{
  font-family:var(--display); font-weight:800; font-size:1.3rem;
  padding:0 1.6rem; display:inline-flex; align-items:center; gap:1.6rem;
  letter-spacing:0.01em;
}
.marquee-track span::after{content:"\25C6"; font-size:0.7rem; opacity:0.6;}
@keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============ GENERIC CENTERED SECTION ============ */
.section-centered{padding:var(--section-pad) var(--gutter); text-align:center; max-width:760px; margin:0 auto;}
.section-centered.wide{max-width:1000px;}
.section-centered h2{font-size:var(--size-h1); line-height:1.1; margin:0 auto 1.6rem; max-width:22ch;}
.section-centered p{font-size:var(--size-body-lg); line-height:1.7; color:var(--muted); margin:0 auto 1.2rem; max-width:58ch;}
.section-deep{background:var(--purple-deep);}
.section-soft{background:var(--purple-soft);}

/* ============ THREE / FOUR UP GRID (area blocks, ways to work) ============ */
.block-grid{display:grid; gap:1.5rem; max-width:1200px; margin:0 auto;}
.block-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.block-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.block-item{
  background:var(--purple-soft); border:1px solid var(--hair); border-radius:var(--radius);
  padding:2.2rem 1.8rem; text-align:left;
}
.block-item .index{
  font-family:var(--display); font-weight:800; font-size:1.1rem;
  color:var(--purple); background:var(--yellow); display:inline-block;
  width:2.2rem; height:2.2rem; line-height:2.2rem; text-align:center;
  border-radius:50%; margin-bottom:1.3rem;
}
.block-item h3{font-size:1.35rem; margin:0 0 0.7rem;}
.block-item p{font-size:0.98rem; line-height:1.6; color:var(--muted); margin:0 0 1.1rem;}
@media (max-width: 980px){ .block-grid.cols-4{grid-template-columns:1fr 1fr;} }
@media (max-width: 860px){ .block-grid.cols-3{grid-template-columns:1fr;} }
@media (max-width: 560px){ .block-grid.cols-4{grid-template-columns:1fr;} }

/* ============ POWER UP CHAIN COMPONENT ============ */
.powerup-chain{
  position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:0;
  max-width:1200px; margin:0 auto 3rem;
}
.powerup-chain::before{
  content:""; position:absolute; top:28px; left:2%; right:2%; height:2px;
  background:var(--yellow); opacity:0.6;
}
.powerup-stage{position:relative; padding:0 0.9rem 0 0; text-align:center;}
.powerup-stage .letter{
  width:56px; height:56px; border-radius:50%;
  background:var(--purple-deep); border:2px solid var(--yellow); color:var(--yellow);
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.4rem; position:relative; z-index:2;
}
.powerup-stage h3, .powerup-stage h4{font-size:1rem; font-weight:700; margin:0 0 0.5rem; letter-spacing:0.01em;}
.powerup-stage p{font-size:0.85rem; line-height:1.55; color:var(--muted); margin:0;}
@media (max-width: 980px){ .powerup-chain{grid-template-columns:1fr 1fr; gap:2rem 1.5rem;} .powerup-chain::before{display:none;} }
@media (max-width: 520px){ .powerup-chain{grid-template-columns:1fr;} }

/* ============ CARD ROWS (insight rows, resource blocks) ============ */
.row-list{max-width:900px; margin:0 auto; text-align:left;}
.insight-row{
  display:grid; grid-template-columns: 120px 1fr auto; gap:1.5rem; align-items:center;
  padding:1.5rem 0; border-bottom:1px solid var(--hair);
  text-decoration:none; color:inherit;
}
.insight-row .thumb{width:120px; aspect-ratio:4/3; background:var(--purple-soft); border:1px solid var(--hair); border-radius:var(--radius);}
.insight-row .cat{font-size:0.78rem; font-weight:700; color:var(--yellow); margin-bottom:0.4rem; display:block;}
.insight-row h3{font-size:1.25rem; margin:0 0 0.35rem; line-height:1.25;}
.insight-row p{font-size:0.9rem; color:var(--muted); margin:0; line-height:1.5;}
.insight-row .arrow{font-size:1.3rem; color:var(--yellow);}
@media (max-width: 640px){ .insight-row{grid-template-columns:1fr;} .insight-row .thumb{width:100%;} .insight-row .arrow{display:none;} }

.resource-row{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.75rem 0; border-bottom:1px solid var(--hair); text-align:left;
}
.resource-row .kind{font-size:0.76rem; font-weight:700; color:var(--yellow); margin-bottom:0.35rem; display:block;}
.resource-row h3{font-size:1.2rem; margin:0 0 0.35rem;}
.resource-row p{font-size:0.92rem; color:var(--muted); margin:0; max-width:42ch; line-height:1.5;}
.resource-row .price{font-size:0.9rem; color:var(--muted); white-space:nowrap; margin-bottom:0.6rem; text-align:right;}
@media (max-width: 640px){ .resource-row{flex-direction:column; align-items:flex-start;} }

/* ============ FAQ ============ */
.faq-list{max-width:720px; margin:0 auto; text-align:left;}
.faq-item{border-bottom:1px solid var(--hair);}
.faq-item summary{
  padding:1.4rem 0; cursor:pointer; font-weight:700; font-size:1.02rem; color:var(--white);
  display:flex; justify-content:space-between; align-items:center; list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--yellow); font-weight:400; transition:transform 0.2s ease;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .a{padding:0 0 1.5rem; font-size:0.96rem; line-height:1.65; color:var(--muted); max-width:60ch;}

/* ============ FORMS ============ */
.form-panel{
  background:var(--purple-soft); border:1px solid var(--hair); border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.75rem); max-width:640px; margin:0 auto; text-align:left;
}
.field{display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.3rem;}
.field label{font-size:0.88rem; font-weight:700; color:var(--white);}
.field input, .field textarea, .field select{
  font-family:var(--sans); font-size:0.98rem;
  padding:0.85rem 1rem;
  border:1.5px solid rgba(255,255,255,0.28);
  border-radius:var(--radius);
  background:rgba(255,255,255,0.06);
  color:var(--white);
}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,0.4);}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--yellow); outline:none;}
.field .hint{font-size:0.8rem; color:var(--muted);}
.field select option{color:#000;}

/* ============ NEWSLETTER / LEAD MAGNET MODULE ============ */
.newsletter-wrap{padding:0 var(--gutter) var(--section-pad); max-width:900px; margin:0 auto;}
.newsletter-cta{
  background:var(--purple-soft); border:1px solid var(--hair);
  padding:3rem clamp(1.5rem,3vw,3rem); border-radius:var(--radius);
  text-align:center;
}
.newsletter-cta h3{font-size:1.9rem; margin:0 0 0.8rem;}
.newsletter-cta p{margin:0 auto 1.8rem; color:var(--muted); font-size:0.98rem; max-width:44ch; line-height:1.6;}
.newsletter-cta form{display:flex; gap:0.75rem; flex-wrap:wrap; justify-content:center;}
.newsletter-cta input[type=email]{
  padding:0.9rem 1.2rem; border-radius:var(--radius); border:1.5px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.06); color:var(--white); font-size:0.98rem; min-width:260px;
  font-family:var(--sans);
}
.newsletter-cta input[type=email]::placeholder{color:rgba(255,255,255,0.5);}

/* ============ LEAD MAGNET POPUP ============ */
.leadmagnet-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,6,64,0.75);
  display:none;
  align-items:center; justify-content:center;
  padding:1.5rem;
}
.leadmagnet-overlay.open{display:flex;}
.leadmagnet-modal{
  background:var(--purple-deep); border:1px solid var(--hair); border-radius:8px;
  max-width:480px; width:100%; padding:clamp(1.75rem,4vw,2.5rem);
  position:relative; text-align:center;
  max-height:90vh; overflow-y:auto;
}
.leadmagnet-modal .close-btn{
  position:absolute; top:1rem; right:1rem; background:none; border:none;
  color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1;
}
.leadmagnet-modal .close-btn:hover{color:var(--white);}
.leadmagnet-modal .eyebrow{font-size:0.78rem; font-weight:700; color:var(--yellow); margin-bottom:0.9rem; letter-spacing:0.03em;}
.leadmagnet-modal h3{font-size:1.6rem; line-height:1.2; margin:0 0 0.9rem;}
.leadmagnet-modal p{font-size:0.98rem; color:var(--muted); line-height:1.55; margin:0 0 1.5rem;}
.leadmagnet-modal .fallback-form{display:flex; flex-direction:column; gap:0.8rem; text-align:left;}
.leadmagnet-modal .fallback-form input{
  font-family:var(--sans); font-size:0.98rem; padding:0.85rem 1rem;
  border:1.5px solid rgba(255,255,255,0.3); border-radius:var(--radius);
  background:rgba(255,255,255,0.08); color:var(--white);
}
.leadmagnet-modal .fallback-form input::placeholder{color:rgba(255,255,255,0.45);}
.leadmagnet-modal .fallback-form input:focus{border-color:var(--yellow); outline:none;}
.leadmagnet-modal .fallback-form button{width:100%; justify-content:center;}
/* Sender's real embed takes over visually once it loads; the fallback
   stays underneath so the popup is never empty if the script is slow
   or blocked. Both live in the DOM at once by design. */
.leadmagnet-modal .sender-form-field{text-align:left; margin-top:0.5rem;}

/* ============ CTA SECTION ============ */
.cta-section{padding:var(--section-pad) var(--gutter); text-align:center;}
.cta-section h2{font-size:var(--size-hero); max-width:22ch; margin:0 auto 1.6rem; line-height:1.08;}
.cta-section h2 em{font-style:italic; color:var(--yellow); font-weight:800;}
.cta-section p{max-width:48ch; color:var(--muted); font-size:1.15rem; line-height:1.6; margin:0 auto 2.2rem;}
.cta-section .cta-row{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}

/* ============ BREADCRUMB / TAG ============ */
.breadcrumb{font-size:0.85rem; color:var(--muted); display:flex; gap:0.5rem; align-items:center; justify-content:center; margin-bottom:1.5rem;}
.breadcrumb a{color:var(--muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--yellow);}
.cat-tag{
  display:inline-block; font-size:0.85rem; font-weight:700;
  color:var(--white); border:1px solid rgba(255,255,255,0.35);
  border-radius:20px; padding:0.5rem 1.1rem; text-decoration:none;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cat-tag:hover{background:var(--yellow); color:var(--purple); border-color:var(--yellow);}
.cat-row{display:flex; flex-wrap:wrap; gap:0.7rem; justify-content:center; margin-bottom:2rem;}

/* ============ FOOTER ============ */
.site-footer{background:var(--purple-deep); padding:var(--section-pad) var(--gutter) 2.5rem; border-top:1px solid var(--hair);}
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid var(--hair);
  max-width:1200px; margin:0 auto;
}
.footer-top .brand{font-family:var(--display); font-weight:800; font-size:1.5rem; margin:0 0 1rem;}
.footer-top .tagline{color:var(--muted); font-size:0.92rem; line-height:1.6; max-width:30ch;}
.footer-top h6{font-size:0.78rem; color:rgba(255,255,255,0.45); margin:0 0 1rem; font-weight:700;}
.footer-top ul{list-style:none; padding:0; margin:0; display:grid; gap:0.7rem;}
.footer-top a{color:rgba(255,255,255,0.82); text-decoration:none; font-size:0.94rem;}
.footer-top a:hover{color:var(--yellow);}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:1.5rem; font-size:0.82rem;
  color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:1rem;
  max-width:1200px; margin:0 auto;
}
.social-link{color:rgba(255,255,255,0.68); text-decoration:none; margin-right:1.2rem; font-size:0.85rem;}
.social-link:hover{color:var(--yellow);}
@media (max-width:780px){ .footer-top{grid-template-columns:1fr 1fr; gap:2rem;} }

/* ============ LEGAL PAGE TEXT ============ */
.legal-body{max-width:720px; margin:0 auto; padding:0 var(--gutter) var(--section-pad); text-align:left;}
.legal-body h2{font-size:1.6rem; margin:2.2rem 0 0.9rem;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p, .legal-body li{font-size:0.98rem; line-height:1.7; color:var(--muted); margin:0 0 1rem;}
.legal-body ul{padding-left:1.4rem;}
.legal-body .updated{font-size:0.85rem; color:var(--muted); margin-bottom:2.5rem;}

/* ============ SEARCH / 404 ============ */
.utility-page{padding:clamp(4rem,6vw,7rem) var(--gutter); text-align:center; max-width:640px; margin:0 auto;}
.utility-page h1{font-size:var(--size-h1); margin:0 0 1.3rem;}
.utility-page p{font-size:var(--size-body-lg); color:var(--muted); line-height:1.6; margin:0 0 2.2rem;}
.search-field{
  display:flex; gap:0.75rem; margin-bottom:2.5rem; flex-wrap:wrap; justify-content:center;
}
.search-field input{
  padding:0.9rem 1.2rem; border-radius:var(--radius); border:1.5px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.06); color:var(--white); font-size:0.98rem; min-width:260px;
  font-family:var(--sans);
}
.search-field input::placeholder{color:rgba(255,255,255,0.5);}