/* =========================================
   The Pennyworth Group — styles.css (refactor)
   - Lean, deduped, responsive
   - Header contrast + Graduate nav
   - Mobile artwork centering & spacing
   - Unified panel radius/spacing
   - F.I.X.E.R. (no icon column)
========================================= */

/* ---------- Design Tokens ---------- */
:root{
  --purple-900:#2d145a;
  --purple-700:#4a148c;
  --purple-600:#5a148c;
  --purple-500:#6a1b9a;
  --purple-200:#d1bdf0; /* section-medium */
  --purple-150:#e6dbf7; /* section-light */
  --purple-100:#f2f0fb; /* lightest */
  --accent:#ffcc00;
  --danger:#b71c1c;
  --text:#222;
  --muted:#666;
  --border:#eee;
}

/* ---------- Resets ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:500 18px/1.6 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  color:var(--text);
  background:#fff;
}
h1,h2{color:var(--purple-900)}
a{color:var(--purple-500);text-decoration:none}
a:hover{text-decoration:underline}
ul{list-style:none;padding:0;margin:0}

/* ---------- Layout helpers ---------- */
.container{width:90%;max-width:1200px;margin:0 auto;padding:20px 0}
.section{padding:40px 20px;text-align:center;border-bottom:1px solid var(--border)}
.section-lightest{background:var(--purple-100)}
.section-light{background:var(--purple-150)}
.section-medium{background:var(--purple-200)}
.section-strong{background:#b38ce0;color:#fff}
.section-deep{background:#8e44ad;color:#fff}

/* Unified purple “panel” look for section-medium areas */
.homepage .section.section-medium,
.homepage .section.with-art{
  border-radius:12px;
  margin:48px auto;
  background-clip:padding-box;
  border-bottom:none;
  overflow:visible;
  max-width:1100px;
  padding:clamp(20px,4vw,48px) 16px;
}

/* ---------- Header + Nav ---------- */
.site-header{
  position:static!important;
  background:#e9e9e9;          /* stronger gray */
  border-bottom:1px solid #cfcfcf;
}
.branding{display:flex;align-items:center;gap:15px}
.logo{display:block;height:120px;width:auto;max-width:100%}
.site-title{font-size:1.8em;font-weight:700;color:var(--purple-900)}

.main-nav ul{display:flex;gap:25px}
.main-nav a{
  font-family:'Graduate',cursive;
  font-weight:600;
  font-size:1rem;
  color:var(--purple-500);
  padding:8px 12px;
  border-radius:5px;
  transition:.2s ease;
}
.main-nav a:hover,.main-nav a:focus{
  background:#e1e1e1;
  text-decoration:none;
  color:var(--purple-700);
}

/* Optional gothic demo (kept) */
.gothic-nav ul{display:flex;justify-content:center;gap:2rem;margin:20px 0}
.gothic-nav a{font-size:1.4rem;text-transform:uppercase;letter-spacing:1px;color:#3c0066;transition:color .2s}
.gothic-nav a:hover{color:#000}
.cinzel a{font-family:'Cinzel Decorative',serif}
.unifraktur a{font-family:'UnifrakturCook',cursive}
.cormorant a{font-family:'Cormorant Garamond',serif}
.graduate a{font-family:'Graduate',cursive}
.pirata a{font-family:'Pirata One',cursive}

/* ---------- Hero & Buttons ---------- */
.hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--purple-100);padding:60px 20px;
}
.hero .hero-text{max-width:900px;margin:0 auto}
.hero .hero-text ul{max-width:700px;margin:20px auto;text-align:left;padding-left:20px}
.reality{font-weight:700;color:var(--danger)}

.button{
  display:inline-block;background:var(--accent);color:#000;
  padding:12px 24px;font-weight:700;border-radius:5px;
  margin-top:20px;margin-bottom:30px; /* extra breathing room */
  text-align:center;
}

/* ---------- With-Art (image + text) ---------- */
.section.with-art{
  display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;
}
.section.with-art.right{grid-template-columns:1fr 260px}
.section.with-art.right .section-art{order:2}
.section.with-art.right .section-body{order:1}

figure.section-art{margin:0}
.section.with-art .section-art{
  display:flex;justify-content:center;align-items:flex-start;justify-self:center;
}
.section.with-art .section-art img,
.section-art img{
  display:block;margin:0;width:100%;max-width:260px;height:auto;
  border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.section.with-art .section-body>:first-child{margin-top:0}

/* ---------- Quiz (purple outside, white card inside) ---------- */
.section.with-art.enhanced-quiz{background:var(--purple-200)!important;box-shadow:none!important;text-align:left}
.section.with-art.enhanced-quiz .section-body{
  background:#fafafa;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.06);
  padding:28px 24px;max-width:820px;margin:0 auto;background-clip:padding-box;
}
.section.with-art.enhanced-quiz .section-body h2{margin:0 0 18px;text-align:center}

/* ---------- Forms ---------- */
.contact-form form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:15px}
.contact-form input,.contact-form textarea{
  padding:10px;font-size:16px;font-weight:400;border:1px solid #ccc;border-radius:4px;width:100%;resize:vertical;
}
.contact-form button{
  background:var(--purple-700);color:#fff;padding:12px;border:0;border-radius:4px;font-size:1em;cursor:pointer;margin-bottom:30px;
}

/* Contact page polish */
.contact-hero .container{text-align:center;max-width:900px}
.contact-hero h1{margin:0 0 8px}
.contact-hero .hero-sub{color:var(--muted);margin:0 0 12px}
.pg-contact-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin:12px 0 6px}
.pg-contact-form .field{display:flex;flex-direction:column;gap:6px}
.pg-contact-form label{font-weight:600;color:var(--purple-900)}
.pg-contact-form input[type="text"],
.pg-contact-form input[type="email"],
.pg-contact-form input[type="tel"],
.pg-contact-form select,
.pg-contact-form textarea{
  padding:12px;font-size:16px;border:1px solid #ccc;border-radius:8px;background:#fff;outline:none
}
.pg-contact-form textarea{resize:vertical}
.pg-contact-form .hint{color:var(--muted);font-size:.9em}
.pg-contact-form .submit-btn{margin-top:8px;margin-bottom:30px}
.hp-wrap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.flash{margin:0 0 16px;padding:12px 14px;border-radius:8px;font-weight:600}
.flash.success{background:#e8f7ef;color:#0f6b3e;border:1px solid #c7ebd7}
.flash.error{background:#fdeaea;color:#8a1010;border:1px solid #f3c2c2}

/* ---------- Gallery ---------- */
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:30px}
.gallery img{max-width:250px;height:auto;border:2px solid #ccc;border-radius:8px}

/* ---------- Industries grid ---------- */
.section.industries{max-width:1100px;margin:48px auto;text-align:center}
.industries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:12px auto 10px;align-items:stretch}
.industry-card{
  background:#fff;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.06);
  padding:22px 18px;display:flex;flex-direction:column;align-items:center
}
.industry-card .icon{font-size:36px;line-height:1;margin-bottom:8px}
.industry-card h3{margin:6px 0 8px;color:var(--purple-900);font-size:1.05rem}
.industry-card p{margin:0;color:var(--muted);font-size:.95rem}
.industries-cta{margin-top:26px}
.industries-cta p{color:var(--purple-900);margin:0 0 10px;font-weight:600}

/* ---------- F.I.X.E.R. (no icons) ---------- */
.fixer-steps{max-width:1100px;margin:48px auto}
.fixer-list{display:grid;gap:16px}
.step-card{
  display:grid;grid-template-columns:1fr;gap:12px;align-items:start;
  background:#fff;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,.06);padding:18px 16px;
  min-height:unset;
}
.step-icon{display:none!important}          /* defensive: hide if present */
.step-body{margin:0!important;padding:0!important;max-width:60ch}
.step-title{display:flex;align-items:center;gap:8px;margin:0 0 6px;line-height:1.15;color:var(--purple-900);font-size:1.1rem}
.step-desc{margin:0;color:var(--muted);font-size:.98rem}
.step-badge{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;
  background:var(--purple-700);color:#fff;font-weight:700;font-size:14px;
}
.pill{display:inline-block;font-size:.8rem;padding:2px 8px;border-radius:999px;background:var(--purple-150);color:var(--purple-900);margin:6px 6px 0 0}
.fixer-cta{text-align:center;margin-top:26px}
.fixer-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* ---------- Staggered art (optional) ---------- */
.staggered-art{display:flex;justify-content:flex-start;margin:48px auto;max-width:1100px;padding:0 16px}
.staggered-art.right{justify-content:flex-end}
.staggered-art img{
  width:220px;max-width:40vw;height:auto;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.25);image-rendering:auto
}

/* ---------- Utilities ---------- */
.section-pad-lg{padding-block:clamp(32px,7vw,72px)!important}
.calendly-mock{
  background:#eee;padding:60px 20px;text-align:center;border:2px dashed #bbb;
  margin:20px auto;max-width:700px;border-radius:8px
}
.mock-desc{color:var(--muted);font-size:.95em}

/* ---------- Responsive ---------- */
@media (min-width:1280px){
  .staggered-art img{width:260px}
}
@media (max-width:1024px){
  .logo{height:100px}
  .industries-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  /* Header & nav */
  .branding{flex-direction:column;text-align:center}
  .main-nav{display:flex;justify-content:center;width:100%}
  .main-nav ul{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px;margin:12px auto 0}
  .main-nav li{width:100%}
  .main-nav a{display:block;width:100%;text-align:center;padding:14px 8px;letter-spacing:.06em;border-radius:6px}
  .logo{height:72px}

  /* With-art stacks */
  .section.with-art,
  .section.with-art.right{
    grid-template-columns:1fr;justify-items:center;align-items:start;gap:20px;
    text-align:left;
  }
  .section.with-art .section-art{order:1!important;margin-bottom:12px}
  .section.with-art .section-body{order:2!important}
  .section.with-art .section-art img,.section-art img{max-width:min(90vw,360px)}

  /* Forms grid */
  .pg-contact-form .grid{grid-template-columns:1fr}

  /* Quiz padding tighten */
  .section.with-art.enhanced-quiz .section-body{padding:20px 16px}

  /* Industries grid */
  .industries-grid{grid-template-columns:1fr}

  /* Panel spacing tighten */
  .homepage .section.section-medium{margin:36px auto}
}
@media (max-width:640px){
  .step-badge{width:24px;height:24px;font-size:12px}
  .step-card{padding:16px 14px}
  .staggered-art{justify-content:center;margin:32px auto}
  .staggered-art img{width:180px}
}
/* Optional: ensure no residual gap if .icon existed */
.industry-card .icon { display: none !important; }
/* KEEP NAV ON ONE LINE (desktop) */
.main-nav ul {
  display: flex;
  gap: 20px;          /* tighter than 25px */
  flex-wrap: nowrap;  /* don't let items wrap to a new line */
}

.main-nav a {
  white-space: nowrap; /* keep each link on a single line */
  font-size: 0.95rem;  /* modest shrink */
  padding: 6px 10px;   /* slightly slimmer hit area */
  letter-spacing: 0.02em; /* tighter tracking than default */
}