/* /assets/css/marketing.css
   Public marketing site styling
   Applies to pages using _layouts/marketing.html
   -------------------------------------------------- */

/* ---------------------------
   Design tokens
--------------------------- */
:root{
  --bg-page:#f5f5f5;      /* light gray base */
  --bg-card:#fff;         /* card background */

  --fg:#000;              /* main text */
  --muted:#666;           /* secondary text */
  --muted-2:#444;         /* body text on white */

  --accent:#7A3A3A;       /* deep red text accent */
  --accent-bg:#d6a51d;    /* golden pill / badge bg */

  --radius-lg:16px;
  --radius-md:10px;
  --radius-sm:6px;

  --shadow-card:0 30px 60px rgba(0,0,0,.08);
  --shadow-btn:0 20px 40px rgba(0,0,0,.15);

  --font-stack:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  --wrap-max:1100px;
}

/* A11y utility */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* ---------------------------
   Page shell / background
--------------------------- */
body.marketing-shell{
  font-family:var(--font-stack);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  margin:0;
  line-height:1.45;
  color:var(--fg);

  /* subtle radial + vertical fade behind cards */
  background:
    radial-gradient(circle at 50% 20%,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) 60%),
    linear-gradient(to bottom,var(--bg-page) 0%,#ffffff 80%);

  /* breathing room above rounded footer card */
  padding:0 1rem 4rem;
}

/* shared wrap for header/footer inner content */
.wrap{
  max-width:var(--wrap-max);
  margin:0 auto;
}

/* ---------------------------
   HEADER / NAV
--------------------------- */
.site-header{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  box-shadow:0 20px 40px rgba(0,0,0,.05);
  max-width:var(--wrap-max);
  margin:0 auto 2rem;
}

.header-flex{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:.5rem;
  column-gap:1rem;
  padding:1rem 1.25rem;
  font-size:1rem;
  line-height:1.3;
}

/* brand block (logo link) */
.brand-block{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:#000;
  font-weight:600;
  line-height:1.2;
  font-size:1rem;
}

.brand-icon{
  display:block;
  height:32px;  /* default mobile size (HTML sets width/height for CLS) */
  width:auto;
}

/* nav links */
.main-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.75rem 1rem;
  width:100%;
  font-size:1rem;
  line-height:1.3;
  font-weight:500;
  text-align:center;
}
.main-nav a{
  color:#000;
  text-decoration:none;
  font-weight:500;
  line-height:1.3;
  /* better tap targets on mobile */
  padding:.5rem .25rem;
  display:inline-block;
}
.main-nav a[aria-current="page"]{ text-decoration:underline; }
.main-nav a:hover{ text-decoration:underline; }

/* wider screens: logo left, nav right */
@media (min-width:480px){
  .header-flex{ flex-wrap:nowrap; column-gap:2rem; }
  .brand-icon{ height:28px; }
  .main-nav{
    width:auto;
    margin-left:auto;
    justify-content:flex-end;
    gap:1rem 1.5rem;
    font-size:.95rem;
    text-align:left;
  }
  .main-nav a{ padding:.5rem .25rem; }
}

/* super-small screens: stack + center */
@media (max-width:480px){
  .header-flex{ flex-direction:column; align-items:center; text-align:center; }
  .brand-block{ justify-content:center; width:100%; }
  .brand-icon{ height:40px; margin-bottom:.5rem; }
  .main-nav{ width:100%; justify-content:center; gap:.75rem; }
}

/* ---------------------------
   MAIN CONTENT WRAPPER
--------------------------- */
.page-main{
  max-width:var(--wrap-max);
  margin:0 auto;
  display:grid;
  gap:2rem;
  padding:0 0 4rem;
  color:#000;
}

/* ---------------------------
   HERO / LEAD PITCH BLOCK
--------------------------- */
.hero-block{
  background:var(--bg-card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:1.5rem 1.25rem 2rem;
  color:#000;
}
.hero-eyebrow{
  background:var(--accent-bg);
  color:#000;
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  line-height:1.2;
  border-radius:999px;
  padding:.4rem .6rem .45rem;
  margin-bottom:1rem;
}
.hero-headline{
  font-size:1.8rem;
  line-height:1.2;
  font-weight:600;
  color:#000;
  margin:0 0 1rem 0;
}
.hero-body{ font-size:1rem; line-height:1.5; color:#222; }
.hero-body p{ margin:0 0 1rem 0; }
.hero-body strong{ font-weight:600; color:#000; }

/* ---------------------------
   VALUE / STEPS CARD
--------------------------- */
.process-card{
  background:var(--bg-card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:1.5rem 1.25rem 2rem;
  color:#000;
}
.process-title{
  font-size:1.25rem;
  line-height:1.3;
  font-weight:600;
  margin:0 0 .5rem;
  color:#000;
}
.process-intro{
  margin:0 0 1.25rem;
  font-size:1rem;
  color:#444;
  line-height:1.4;
}

/* each "step" row */
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.75rem;
  row-gap:.25rem;
  align-items:start;
  margin-bottom:1rem;
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:1rem;
}
.step:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.step-num{ font-size:1.2rem; line-height:1; color:var(--accent); font-weight:600; }
.step-head{ font-weight:600; color:#000; line-height:1.4; font-size:1rem; }
.step-desc{ grid-column:2; color:#444; font-size:.95rem; line-height:1.4; }

/* CTA row at bottom of process card */
.cta-row{
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:1.5rem;
  padding-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
  align-items:flex-start; /* mobile stack default */
  text-align:left;
}
.cta-btn{
  appearance:none;
  background:#000;
  color:#fff;
  border-radius:var(--radius-sm);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  border:0;
  padding:.8rem 1rem;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.cta-btn:hover{ background:#222; }

/* Vertically center the note beside the button on wider screens */
.cta-note{
  font-size:.9rem;
  color:#555;
  line-height:1.4;
  max-width:38ch;
  align-self:center;
  display:flex;
  align-items:center;
}

/* ---------------------------
   CONTACT / REPORT FORM CARD
--------------------------- */
.contact-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  color:#000;
  max-width:700px;
  padding:2rem 1.25rem 2.5rem;
  margin:0 auto 2rem;
}
.contact-card h1{
  margin:0 0 1rem;
  font-size:1.6rem;
  line-height:1.25;
  font-weight:600;
  color:#000;
}
.contact-lead{
  margin:0 0 2rem;
  color:#444;
  font-size:1.05rem;
  line-height:1.45;
}
.form-group{ margin:0 0 1.5rem; }
.form-label{
  display:block;
  font-weight:600;
  color:#000;
  margin:0 0 .5rem;
  font-size:1rem;
  line-height:1.4;
}
.contact-input,
.contact-textarea{
  width:100%;
  font-size:1rem;
  line-height:1.4;
  color:#000;
  background:#fafafa;
  border:1px solid rgba(0,0,0,.2);
  border-radius:8px;
  padding:.9rem .75rem;
  font-family:inherit;
  box-sizing:border-box;
}
.contact-textarea{ min-height:8rem; resize:vertical; }
.form-hint{ font-size:.9rem; line-height:1.4; color:#666; margin:.5rem 0 0; }

/* Submit row + result box */
.contact-submit-row{
  margin-top:2rem;
  display:grid;
  align-items:start;
  gap:12px;
  grid-auto-flow:row;
}
.contact-submit-btn{
  appearance:none;
  border:0;
  border-radius:8px;
  background:#000;
  color:#fff;
  font-weight:600;
  font-size:1.1rem;
  line-height:1.2;
  padding:1rem 1.25rem;
  width:100%;
  max-width:260px;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--shadow-btn);
}
.contact-submit-btn:active{ background:#222; }
.contact-submit-btn:disabled{
  opacity:.6;
  cursor:progress;
}

/* Inline alerts for form feedback */
.alert{
  display:block;
  margin-top:0;           /* grid gap handles spacing */
  padding:.9rem 1rem;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:500;
  line-height:1.4;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  animation:alert-pop .18s ease-out;
}
.alert--success{
  background:#ecfdf5;     /* mint */
  border-color:#10b981;
  color:#065f46;
}
.alert--error{
  background:#fef2f2;     /* soft red */
  border-color:#ef4444;
  color:#7f1d1d;
}
/* CRITICAL: do not show or reserve space until populated */
#contactResult[hidden],
#contactResult:empty{
  display:none !important;
  visibility:hidden !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  border:0 !important;
}

@keyframes alert-pop{
  from{ transform:translateY(4px); opacity:0; }
  to{   transform:translateY(0);   opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .alert{ animation:none; }
}

/* ---------------------------
   FOOTER (rounded white card)
--------------------------- */
.site-footer{
  max-width:var(--wrap-max);
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-md);
  box-shadow:0 30px 60px rgba(0,0,0,.08);
  color:#666;
  font-size:.9rem;
  line-height:1.4;
}
.footer-flex{
  padding:1.5rem 1.25rem 2rem;
  display:flex;
  flex-direction:column;
  gap:1rem 2rem;
}
.footer-left{ color:#666; font-size:.9rem; line-height:1.4; text-align:center; }
.footer-copy{ color:#666; }
.footer-links{
  list-style:none;
  padding:0; margin:0;
  color:#666;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem .75rem;
  font-size:1rem;
  line-height:1.4;
  text-align:center;
}
.footer-links a{
  color:#444; text-decoration:none;
  /* bigger tap target in footer */
  padding:.5rem .5rem; display:inline-block;
}
.footer-links a:hover{ text-decoration:underline; }

/* desktop footer alignment */
@media (min-width:768px){
  .footer-flex{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;  /* vertical alignment fix */
    text-align:left;
  }
  .footer-left{ text-align:left; display:flex; align-items:center; }
  .footer-links{ justify-content:flex-end; font-size:.9rem; text-align:right; }
}

/* ---------------------------
   RESPONSIVE TWEAKS
--------------------------- */
@media (min-width:768px){
  body.marketing-shell{ padding:2rem 1.5rem 4rem; }
  .hero-headline{ font-size:2.25rem; line-height:1.2; }
  .hero-block,.process-card,.contact-card{ padding:2rem 2rem 2.5rem; }
  .process-card{ margin-top:-1rem; } /* subtle lift */
  .contact-card h1{ font-size:1.8rem; }
  .contact-lead{ font-size:1.1rem; }
  .contact-submit-btn{ font-size:1rem; }
}

/* Desktop-only logo bump for clearer brand presence */
@media (min-width:768px){
  .brand-icon{ height:40px; width:auto; }
  .header-flex{ padding:1.1rem 1.5rem; }
}