/* Tampa Forge — shared stylesheet for landing/funnel pages
   Pulled + extended from the homepage (tampa-forge.html). Skeleton pages
   reference this file directly, no per-page <style> blocks. */

:root{
  --sea:      #101823;
  --sea-deep: #0A1017;
  --parchment:#EAD9AF;
  --ink:      #241C12;
  --gold:     #C28A2C;
  --gold-hi:  #E4B45A;
  --crimson:  #C3331F;
  --rope:     #8A6B3F;
  --foam:     #C9D6DC;
  --max: 1080px;
  --max-narrow: 760px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  font-family:'Alegreya', Georgia, serif;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--parchment);
}

h1,h2{ font-family:'Pirata One', serif; font-weight:400; letter-spacing:.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; }

a{ color:var(--crimson); }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }
.wrap-narrow{ max-width:var(--max-narrow); margin:0 auto; padding:0 1.5rem; }

/* ============ TOPBAR (logo only — landing pages don't hang off main nav) ============ */
.topbar{
  background:var(--sea-deep);
  color:var(--foam);
  border-bottom:1px solid rgba(196,138,44,.35);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.9rem; padding-bottom:.9rem;
}
.wordmark{
  font-family:'Pirata One', serif;
  font-size:1.6rem;
  color:var(--parchment);
  text-decoration:none;
  display:flex; align-items:center; gap:.6rem;
}
.wordmark img{
  flex:none;
  width:2.1rem; height:2.1rem;
  object-fit:contain;
}

/* ============ HERO — single column, for landing/funnel pages ============ */
.hero{
  background:
    radial-gradient(ellipse 90% 60% at 70% 0%, #1B2A3B 0%, transparent 60%),
    var(--sea);
  color:var(--foam);
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  padding-top:4.5rem;
  padding-bottom:5rem;
  max-width:44rem;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-hi);
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:1.2rem;
}
.eyebrow::before{
  content:""; width:2.2rem; height:1px; background:var(--gold); display:inline-block;
}
.hero h1{
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.08;
  color:var(--parchment);
  margin-bottom:1.2rem;
}
.hero h1 em{
  font-style:normal;
  color:var(--crimson);
  text-shadow:0 0 24px rgba(195,51,31,.35);
}
.hero p.lede{
  font-size:1.1rem;
  max-width:34rem;
  color:#AEBDC6;
  margin-bottom:2rem;
}
.hero p.lede strong{ color:var(--foam); }

.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.btn{
  display:inline-block;
  text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 1.5rem;
  border-radius:3px;
  cursor:pointer;
  border:none;
}
.btn-flag{
  background:var(--crimson); color:#FFF4E4;
  border:1px solid #E0553F;
  box-shadow:0 4px 18px rgba(195,51,31,.35);
}
.btn-flag:hover{ background:#D53F29; }
.btn-ghost{
  background:transparent;
  color:var(--gold-hi);
  border:1px solid rgba(196,138,44,.6);
}
.btn-ghost:hover{ border-color:var(--gold-hi); }

.waves{ display:block; width:100%; height:70px; margin-top:-1px; }

/* ============ SECTION SCAFFOLD ============ */
section{ padding:4rem 0; }
.sec-head{ max-width:40rem; margin-bottom:2.4rem; }
.sec-head h2{ font-size:clamp(1.8rem, 4vw, 2.5rem); line-height:1.1; margin:.4rem 0 .8rem; }
.sec-head p{ color:#4E4130; }
.kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--crimson);
}

/* ============ CARDS (services / features) ============ */
.parchment-sec{
  background:
    radial-gradient(circle at 12% 20%, rgba(138,107,63,.10), transparent 40%),
    radial-gradient(circle at 88% 85%, rgba(138,107,63,.12), transparent 45%),
    var(--parchment);
}
.cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.4rem; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:rgba(255,248,228,.55);
  border:1px solid rgba(138,107,63,.45);
  border-radius:6px;
  padding:1.6rem 1.6rem 1.5rem;
  position:relative;
}
.card::before{
  content:"✕";
  position:absolute; top:1.15rem; right:1.3rem;
  color:var(--crimson); font-weight:700; font-size:1.05rem;
  font-family:'IBM Plex Mono', monospace;
  opacity:.85;
}
.card h3{ font-family:'Alegreya', serif; font-weight:700; font-size:1.2rem; margin-bottom:.15rem; }
.card .sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rope);
  display:block; margin-bottom:.75rem;
}
.card p{ color:#4E4130; font-size:1rem; }

/* ============ STEPS / PROCESS (dark) ============ */
.dark-sec{ background:var(--sea); color:var(--foam); }
.dark-sec .sec-head p{ color:#93A5B1; }
.dark-sec .kicker{ color:var(--gold-hi); }
.legs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:900px){ .legs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .legs{ grid-template-columns:1fr; } }
.leg{ border-top:1px solid rgba(196,138,44,.4); padding-top:1.1rem; }
.leg .bearing{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.18em; color:var(--gold-hi);
  display:block; margin-bottom:.55rem;
}
.leg h3{ font-family:'Alegreya', serif; font-weight:700; font-size:1.1rem; color:var(--parchment); margin-bottom:.4rem; }
.leg p{ font-size:.95rem; color:#93A5B1; }

/* ============ LIST (plain checklist / benefits) ============ */
.list-sec{ background:var(--parchment); }
.plain-list{ max-width:44rem; border-left:2px solid var(--gold); padding-left:1.6rem; display:grid; gap:1.1rem; }
.plain-list p strong{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600; font-size:.8rem; letter-spacing:.1em;
  color:var(--crimson); display:block;
}

/* ============ FAQ ============ */
.faq-sec{ background:var(--parchment); }
.faq-item{ max-width:44rem; padding:1.1rem 0; border-bottom:1px solid rgba(138,107,63,.35); }
.faq-item h3{ font-size:1.05rem; margin-bottom:.4rem; }
.faq-item p{ color:#4E4130; }

/* ============ FORM (funnel pages) ============ */
.form-sec{ background:var(--parchment); }
.stub-form{ max-width:32rem; display:grid; gap:1rem; }
.stub-form label{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rope); display:block; margin-bottom:.35rem;
}
.stub-form input, .stub-form textarea{
  width:100%; padding:.7rem .8rem;
  border:1px solid rgba(138,107,63,.5); border-radius:4px;
  background:rgba(255,248,228,.6);
  font-family:'Alegreya', serif; font-size:1rem; color:var(--ink);
}
.stub-form textarea{ min-height:8rem; resize:vertical; }
.stub-form select{
  width:100%; padding:.7rem .8rem;
  border:1px solid rgba(138,107,63,.5); border-radius:4px;
  background:rgba(255,248,228,.6);
  font-family:'Alegreya', serif; font-size:1rem; color:var(--ink);
}

/* honeypot — visually removed, still in the DOM for bots to trip on */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* server-side validation notice (shown via ?err=1) */
.form-error{
  max-width:32rem;
  margin-bottom:1.2rem;
  padding:.85rem 1.1rem;
  border:1px solid var(--crimson);
  border-left:4px solid var(--crimson);
  border-radius:3px;
  background:rgba(195,51,31,.08);
  color:#7A2114;
  font-size:.95rem;
}

/* ============ PARLEY / CTA BAND ============ */
.parley{
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, #1B2A3B 0%, transparent 70%),
    var(--sea-deep);
  color:var(--foam);
  text-align:center;
}
.parley h2{ font-size:clamp(1.9rem, 4.5vw, 2.8rem); color:var(--parchment); margin-bottom:.9rem; }
.parley p{ max-width:32rem; margin:0 auto 2rem; color:#AEBDC6; }
.parley .mono-note{
  margin-top:2.2rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem; letter-spacing:.1em;
  color:#5E7183;
}

/* ============ NOTICE BANNER (dev/skeleton marker — remove on refactor) ============ */
.skeleton-note{
  background:#3E2A1A; color:var(--gold-hi);
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.05em;
  text-align:center; padding:.5rem 1rem;
}

/* ============ FOOTER ============ */
footer{
  background:var(--sea-deep);
  color:#5E7183;
  border-top:1px solid rgba(196,138,44,.25);
  padding:1.6rem 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem; letter-spacing:.06em;
}
footer .wrap{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
footer a{ color:#8FA0AD; text-decoration:none; }
footer a:hover{ color:var(--gold-hi); }