:root{
  /* Main Street palette */
  --ink: #1b1a17;
  --ink-soft:#2a2926;
  --paper:#fbf4e6;
  --parchment:#f3e7d0;
  --sand:#e7d7bb;
  --brass:#b08a2e;
  --brick:#8a2d2a;
  --forest:#1f3b2c;
  --shadow: rgba(27, 26, 23, .18);
  --shadow-strong: rgba(27, 26, 23, .28);

  --radius: 18px;
  --radius-sm: 14px;

  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* ===== Header / Nav ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(251,244,230,.92), rgba(251,244,230,.78));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(27,26,23,.10);
}

.top-strip{
  height: 6px;
  background: linear-gradient(90deg, var(--brick), var(--brass), var(--forest));
  opacity: .95;
}

.nav-inner{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  gap:.8rem;
  align-items:center;
  text-decoration:none;
}
.brand-mark{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(135deg, var(--brass), #7c5d18);
  color: #fff;
  box-shadow: 0 10px 20px var(--shadow);
  font-weight: 900;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: 1.05rem;
  color: var(--ink);
  text-transform: uppercase;
}
.brand-sub{
  font-size: .78rem;
  color: rgba(27,26,23,.70);
  font-weight: 600;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 1.1rem;
}
.nav-links a{
  color: rgba(27,26,23,.82);
  text-decoration:none;
  font-weight: 700;
  font-size: .92rem;
  padding: .35rem .4rem;
  border-radius: 10px;
}
.nav-links a:hover{
  background: rgba(176,138,46,.10);
}

.nav-cta{
  background: linear-gradient(135deg, var(--brick), #6d201f);
  color: #fff !important;
  padding: .55rem .9rem !important;
  border-radius: 999px;
  box-shadow: 0 12px 22px rgba(138,45,42,.22);
}

.nav-toggle{
  display:none;
  border:none;
  background:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: rgba(27,26,23,.75);
  border-radius: 999px;
}

/* Mobile menu */
.mobile-menu{
  position:fixed;
  inset:0;
  display:none;
  background: rgba(0,0,0,.35);
  z-index:60;
}
.mobile-menu.open{ display:block; }

.mobile-menu-panel{
  width: min(420px, 92vw);
  height: 100%;
  background: var(--paper);
  border-right: 1px solid rgba(27,26,23,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  padding: 1rem 1.1rem;
}

.mobile-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: .4rem .2rem 1rem .2rem;
  border-bottom: 1px solid rgba(27,26,23,.10);
}
.brand-compact .brand-name{ font-size: 1rem; }
.brand-compact .brand-sub{ font-size: .75rem; }

.mobile-close{
  border:none;
  background:none;
  font-size: 1.2rem;
  cursor:pointer;
  color: rgba(27,26,23,.85);
}

.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap: .5rem;
  padding: 1rem .2rem .75rem .2rem;
}
.mobile-nav-links a{
  text-decoration:none;
  color: var(--ink);
  font-weight: 800;
  padding: .75rem .8rem;
  border-radius: 14px;
  border: 1px solid rgba(27,26,23,.10);
  background: rgba(255,255,255,.55);
}
.mobile-nav-links a:hover{
  background: rgba(176,138,46,.12);
}
.mobile-menu-note{
  margin-top: .75rem;
  color: rgba(27,26,23,.70);
  font-weight: 650;
  font-size: .9rem;
}

/* ===== Sections ===== */
.section{ padding: 4.5rem 0; }
.section-paper{
  background: var(--paper);
}
.section-parchment{
  background: linear-gradient(180deg, var(--parchment), var(--paper));
}
.section-ink{
  background:
    radial-gradient(circle at 20% 10%, rgba(176,138,46,.18), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(138,45,42,.22), transparent 60%),
    linear-gradient(180deg, #171614, #0f0f0e);
  color: #f6f0e4;
}

.section-header{
  text-align:center;
  max-width: 860px;
  margin: 0 auto 2.25rem auto;
}
.section-header h2{
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin:0 0 .5rem 0;
}
.section-header p{
  margin:0;
  color: rgba(27,26,23,.74);
  font-weight: 600;
  line-height:1.6;
}
.section-ink .section-header p{ color: rgba(246,240,228,.75); }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 4.5rem 0 4rem 0;

  /* JUST the image — no gradients */
  background: url("../images/newbern.PNG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #e5e7eb;
  overflow: hidden;
}



.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(29, 78, 216, 0.22), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(185, 28, 28, 0.16), transparent 60%);
  pointer-events: none;
}






.hero-texture{
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(27,26,23,.10), transparent 55%),
    radial-gradient(circle at 90% 60%, rgba(27,26,23,.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(27,26,23,.03) 0px, rgba(27,26,23,.03) 1px, transparent 1px, transparent 6px);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);
  gap: 2.2rem;
  align-items:center;
}

.kicker{
  display:inline-block;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .75rem;
  color: rgba(27,26,23,.80);
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(27,26,23,.12);
  background: rgba(255,255,255,.55);
}
.kicker-light{
  color: rgba(246,240,228,.85);
  border-color: rgba(246,240,228,.18);
  background: rgba(255,255,255,.06);
}

.hero-title{
  margin: 1rem 0 .75rem 0;
  line-height: 1.05;
}
.hero-title-top{
  display:block;
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.2vw, 3.35rem);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.hero-title-bottom{
  display:block;
  margin-top: .35rem;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: rgba(27,26,23,.78);
}

.hero-subtitle{
  margin: 0;
  max-width: 42rem;
  line-height: 1.7;
  color: rgba(27,26,23,.78);
  font-weight: 600;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.badge{
  font-weight: 800;
  font-size: .82rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(27,26,23,.12);
  background: rgba(255,255,255,.60);
  color: rgba(27,26,23,.82);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: .75rem;
  margin-top: 1.4rem;
}

.hero-note{
  margin-top: 1.1rem;
  font-weight: 700;
  color: rgba(27,26,23,.80);
  background: rgba(176,138,46,.10);
  border: 1px solid rgba(176,138,46,.18);
  padding: .7rem .9rem;
  border-radius: 14px;
  max-width: 40rem;
}

.hero-contact{
  display:flex;
  flex-wrap:wrap;
  gap: .6rem;
  margin-top: 1rem;
}
.contact-chip{
  font-weight: 700;
  font-size: .85rem;
  color: rgba(27,26,23,.78);
  border: 1px solid rgba(27,26,23,.12);
  background: rgba(255,255,255,.55);
  padding: .45rem .65rem;
  border-radius: 999px;
}

/* Poster */
.poster{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(27,26,23,.14);
  border-radius: var(--radius);
  box-shadow: 0 20px 45px rgba(27,26,23,.18);
  overflow:hidden;
}
.poster-header{
  display:flex;
  gap: .9rem;
  align-items:center;
  padding: 1.1rem 1.1rem 1rem 1.1rem;
  border-bottom: 1px dashed rgba(27,26,23,.18);
  background:
    radial-gradient(circle at 15% 0%, rgba(176,138,46,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
}
.seal{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .08em;
  font-family: var(--serif);
  color: #fff;
  background: linear-gradient(135deg, var(--brick), #5e1b1a);
  box-shadow: 0 14px 26px rgba(138,45,42,.28);
}
.poster-title{
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
}
.poster-sub{
  font-family: var(--sans);
  font-weight: 700;
  font-size: .85rem;
  color: rgba(27,26,23,.70);
  margin-top: .15rem;
}

.poster-list{
  padding: 1.05rem 1.1rem 1.1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap: .9rem;
}
.poster-item{
  display:flex;
  gap: .75rem;
  align-items:flex-start;
}
.poster-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(176,138,46,.12);
  border: 1px solid rgba(176,138,46,.18);
  font-size: 1.1rem;
}
.poster-item strong{
  display:block;
  color: var(--ink);
}
.poster-desc{
  color: rgba(27,26,23,.70);
  font-weight: 600;
  font-size: .9rem;
  margin-top: .15rem;
}

.poster-footer{
  padding: .85rem 1.1rem 1rem 1.1rem;
  border-top: 1px dashed rgba(27,26,23,.18);
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
  justify-content:flex-start;
  background: rgba(255,255,255,.55);
}
.stamp{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .75rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(27,26,23,.14);
  background: rgba(251,244,230,.75);
}

/* ===== Grid helpers ===== */
.grid{ display:grid; gap: 1.25rem; }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ===== Cards ===== */
.card{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(27,26,23,.14);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(27,26,23,.12);
  padding: 1.3rem 1.3rem 1.2rem 1.3rem;
}
.card-top{
  display:flex;
  gap:.75rem;
  align-items:center;
}
.card-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(176,138,46,.20), rgba(138,45,42,.18));
  border: 1px solid rgba(27,26,23,.12);
  font-size: 1.2rem;
}
.card h3{
  margin:0;
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: .01em;
}

.list{
  margin: .95rem 0 0 0;
  padding-left: 1.1rem;
  color: rgba(27,26,23,.74);
  font-weight: 650;
  line-height: 1.55;
  font-size: .95rem;
}
.list li{ margin-bottom: .35rem; }

/* Callout */
.callout{
  margin-top: 1.8rem;
  border-radius: var(--radius);
  border: 1px solid rgba(176,138,46,.22);
  background: rgba(176,138,46,.10);
  padding: 1.1rem 1.25rem;
  box-shadow: 0 14px 30px rgba(27,26,23,.10);
}
.callout-title{
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: .35rem;
}
.callout-body{
  color: rgba(27,26,23,.78);
  font-weight: 650;
  line-height: 1.6;
}

/* ===== Pricing ===== */
.pricing-grid{ align-items: stretch; }
.price-card{
  position:relative;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(27,26,23,.16);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(27,26,23,.14);
  padding: 1.35rem;
  display:flex;
  flex-direction:column;
}
.price-head{ margin-bottom: .65rem; }
.price-card h3{
  margin:0 0 .35rem 0;
  font-family: var(--serif);
  font-weight: 900;
}
.price{
  font-family: var(--serif);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--ink);
}
.price span{
  font-family: var(--sans);
  font-size: .95rem;
  color: rgba(27,26,23,.70);
  margin-left: .25rem;
  font-weight: 800;
}
.price-sub{
  color: rgba(27,26,23,.72);
  font-weight: 650;
  margin-top: .25rem;
  line-height: 1.5;
}
.price-card .list{ margin-top: .8rem; }
.featured{
  border-color: rgba(138,45,42,.35);
  box-shadow: 0 26px 55px rgba(27,26,23,.18);
  transform: translateY(-4px);
}
.ribbon{
  position:absolute;
  top: -12px;
  left: 18px;
  background: linear-gradient(135deg, var(--brick), #5e1b1a);
  color:#fff;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  box-shadow: 0 14px 26px rgba(138,45,42,.28);
}

.pricing-note{
  margin-top: 1.3rem;
  text-align:center;
  color: rgba(27,26,23,.72);
  font-weight: 700;
}

/* ===== Steps ===== */
.step{
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(27,26,23,.14);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(27,26,23,.12);
  padding: 1.2rem;
}
.step-num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(138,45,42,.12);
  border: 1px solid rgba(138,45,42,.20);
  color: var(--ink);
  font-weight: 900;
  margin-bottom: .7rem;
}
.step h3{
  margin:0 0 .35rem 0;
  font-family: var(--serif);
  font-weight: 900;
}
.step p{
  margin:0;
  color: rgba(27,26,23,.74);
  font-weight: 650;
  line-height: 1.6;
}

/* ===== FAQ ===== */
.faq-list{
  max-width: 860px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(27,26,23,.16);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 40px rgba(27,26,23,.12);
}
.faq-item{
  width:100%;
  border:none;
  background:none;
  padding: 1rem 1.2rem;
  cursor:pointer;
  text-align:left;
  border-top: 1px solid rgba(27,26,23,.12);
}
.faq-item:first-child{ border-top:none; }
.faq-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  font-weight: 900;
  color: rgba(27,26,23,.86);
}
.faq-plus{
  font-weight: 900;
  color: rgba(27,26,23,.55);
  transition: transform .14s ease;
}
.faq-a{
  max-height: 0;
  overflow:hidden;
  transition: max-height .18s ease;
  margin-top: .35rem;
  color: rgba(27,26,23,.74);
  font-weight: 650;
  line-height: 1.6;
}
.faq-item.active .faq-a{ max-height: 240px; }
.faq-item.active .faq-plus{ transform: rotate(45deg); }

/* ===== Contact ===== */
.contact-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 2rem;
  align-items:flex-start;
}
.contact-left h2{
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: .75rem 0 .6rem 0;
}
.contact-left p{
  margin:0;
  color: rgba(246,240,228,.82);
  font-weight: 650;
  line-height: 1.7;
  max-width: 34rem;
}
.contact-bullets{
  margin-top: 1.1rem;
  display:flex;
  flex-direction:column;
  gap: .35rem;
  color: rgba(246,240,228,.80);
  font-weight: 750;
}
.contact-fine{
  margin-top: 1.2rem;
  color: rgba(246,240,228,.72);
  font-weight: 650;
  font-size: .92rem;
  max-width: 34rem;
}

.form{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(246,240,228,.16);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap: .3rem;
}
.field label{
  font-weight: 900;
  letter-spacing: .02em;
  font-size: .82rem;
  color: rgba(246,240,228,.85);
  text-transform: uppercase;
}
.field input, .field textarea{
  font-family: var(--sans);
  font-size: .95rem;
  padding: .65rem .7rem;
  border-radius: 14px;
  border: 1px solid rgba(246,240,228,.18);
  background: rgba(0,0,0,.18);
  color: rgba(246,240,228,.92);
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color: rgba(176,138,46,.55);
  box-shadow: 0 0 0 1px rgba(176,138,46,.40);
}
.form-actions{ margin-top: 1rem; }
.status{ margin-top: .5rem; color: rgba(246,240,228,.75); font-weight: 650; }
.form-note{
  margin-top: .8rem;
  color: rgba(246,240,228,.70);
  font-weight: 650;
  font-size: .9rem;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .45rem;
  text-decoration:none;
  border-radius: 999px;
  padding: .72rem 1.05rem;
  font-weight: 900;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-icon{ font-size: 1.1rem; }

.btn-primary{
  background: linear-gradient(135deg, var(--brick), #5e1b1a);
  color:#fff;
  box-shadow: 0 18px 34px rgba(138,45,42,.28);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 24px 44px rgba(138,45,42,.34); }

.btn-secondary{
  background: rgba(255,255,255,.55);
  border-color: rgba(27,26,23,.16);
  color: rgba(27,26,23,.88);
  box-shadow: 0 14px 30px rgba(27,26,23,.10);
}
.btn-secondary:hover{ transform: translateY(-1px); box-shadow: 0 20px 40px rgba(27,26,23,.14); }

.btn-block{ width: 100%; }

/* ===== Footer ===== */
.footer{
  border-top: 1px solid rgba(27,26,23,.10);
  background: var(--paper);
  padding: 1.8rem 0;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  align-items:center;
  justify-content:space-between;
}
.footer-name{
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.footer-sub{
  color: rgba(27,26,23,.70);
  font-weight: 650;
  font-size: .9rem;
  margin-top: .2rem;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap: .9rem;
}
.footer-links a{
  color: rgba(27,26,23,.78);
  text-decoration:none;
  font-weight: 800;
}
.footer-links a:hover{ text-decoration: underline; }
.footer-meta{
  color: rgba(27,26,23,.62);
  font-weight: 700;
  font-size: .9rem;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 780px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .row{ grid-template-columns: 1fr; }
}



/* =========================================================
   HERO READABILITY OVERRIDES (SAFE BLOCK)
   Paste-at-bottom only. Remove to revert.
   Goal:
   - Light boxes + dark text in boxes
   - Dark headline/subtitle with subtle light outline
   - Do NOT touch the background image
   ========================================================= */

/* 1) Make ALL hero "box" surfaces light + readable */
.hero .hero-badge,
.hero .feature-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22) !important;
}

/* Text inside hero boxes should be dark */
.hero .hero-badge,
.hero .feature-card h3,
.hero .feature-card p {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* If your hero badge uses a pill style, ensure it stays crisp */
.hero .hero-badge {
  backdrop-filter: none !important; /* avoids muddy blur on some browsers */
}

/* 2) Make hero text that sits directly on the image readable:
      Dark text with a soft, light "halo" outline */
.hero h1,
.hero .hero-subtitle,
.hero .hero-ownership-line,
.hero .hero-contact {
  color: #0f172a !important;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.92),
    0 0 8px rgba(255, 255, 255, 0.72),
    0 12px 30px rgba(2, 6, 23, 0.18) !important;
}

/* 3) Make the brand in the headline pop (still dark, outlined) */
.hero .hero-brand {
  color: #0f172a !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.96),
    0 0 10px rgba(255, 255, 255, 0.82),
    0 16px 40px rgba(2, 6, 23, 0.18) !important;
}

/* 4) Keep the primary CTA readable even on bright areas of the photo */
.hero .btn-primary {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.88),
    0 18px 38px rgba(2, 6, 23, 0.28) !important;
}

/* Optional: if your secondary button blends, make it a light pill */
.hero .btn-ghost {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.18) !important;
}

/* 5) If you happen to have a .hero-bg overlay div, make sure it isn't darkening things */
.hero .hero-bg {
  display: none !important;
}


/* =========================================================
   HERO TEXT: SOLID OUTLINE READABILITY FIX
   Replaces fuzzy glow with crisp white outline.
   Paste-at-bottom only. Remove to revert.
   ========================================================= */

/* Headline + hero text: dark ink with solid white edge */
.hero h1,
.hero .hero-subtitle,
.hero .hero-ownership-line,
.hero .hero-contact {
  color: #0f172a !important;

  /* Crisp outline using multi-direction shadow */
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.95),
     1px -1px 0 rgba(255, 255, 255, 0.95),
    -1px  1px 0 rgba(255, 255, 255, 0.95),
     1px  1px 0 rgba(255, 255, 255, 0.95),

    /* slight depth so it doesn’t look “stickered on” */
     0   4px 10px rgba(0, 0, 0, 0.25) !important;
}

/* Brand name: slightly stronger edge so it dominates */
.hero .hero-brand {
  color: #0f172a !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

  text-shadow:
    -1.5px -1.5px 0 rgba(255, 255, 255, 0.98),
     1.5px -1.5px 0 rgba(255, 255, 255, 0.98),
    -1.5px  1.5px 0 rgba(255, 255, 255, 0.98),
     1.5px  1.5px 0 rgba(255, 255, 255, 0.98),

     0  6px 14px rgba(0, 0, 0, 0.28) !important;
}


/* =========================================================
   HERO READABILITY: SINGLE PARCHMENT PANEL (SAFE OVERRIDE)
   Works on dark/busy photos. Remove to revert.
   ========================================================= */

/* Put the hero text on a single unified panel */
.hero .hero-content {
  background: rgba(248, 244, 235, 0.92) !important;  /* warm parchment */
  border: 1px solid rgba(176, 141, 87, 0.45) !important; /* brass edge */
  border-radius: 20px !important;
  padding: 1.4rem 1.4rem 1.2rem 1.4rem !important;
  box-shadow: 0 22px 55px rgba(2, 6, 23, 0.38) !important;
}

/* Everything inside the panel becomes dark “ink” */
.hero .hero-content,
.hero .hero-content h1,
.hero .hero-content .hero-subtitle,
.hero .hero-content .hero-contact,
.hero .hero-content .hero-ownership-line {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* Make the brand feel like the draw (brass underline) */
.hero .hero-brand {
  color: #0f172a !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  border-bottom: 3px solid rgba(176, 141, 87, 0.75) !important;
  padding-bottom: 0.15rem !important;
}

/* Make the badge match the panel (not another “different” box style) */
.hero .hero-badge {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(176, 141, 87, 0.35) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

/* Optional: keep the feature cards legible but consistent */
.hero .feature-card {
  background: rgba(248, 244, 235, 0.92) !important;
  border: 1px solid rgba(176, 141, 87, 0.35) !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22) !important;
}

.hero .feature-card h3,
.hero .feature-card p {
  color: #0f172a !important;
}

/* Turn off any hero overlay div if it exists */
.hero .hero-bg { display: none !important; }



/* =========================================================
   FINAL HERO READABILITY FIX (FAILSAFE OVERRIDE)
   Paste at VERY BOTTOM of styles.css
   If this still "does nothing", your hero classes differ.
   ========================================================= */

/* --- A) Choose the container that holds the hero copy --- */
/* 1) If .hero-content exists, use it.
   2) Otherwise, apply to the first child of .hero-inner (left column).
*/
.hero :is(.hero-content, .hero-inner > :first-child) {
  background: rgba(248, 244, 235, 0.94) !important;  /* warm parchment */
  border: 1px solid rgba(176, 141, 87, 0.50) !important; /* brass edge */
  border-radius: 20px !important;
  padding: 1.4rem 1.4rem 1.2rem 1.4rem !important;
  box-shadow: 0 22px 55px rgba(2, 6, 23, 0.38) !important;
}

/* --- B) Make hero copy readable (ink text) INSIDE that container --- */
.hero :is(.hero-content, .hero-inner > :first-child) :is(h1, .hero-subtitle, .hero-ownership-line, .hero-contact, p, a, span) {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* --- C) Make the brand feel like the draw --- */
.hero :is(.hero-content, .hero-inner > :first-child) .hero-brand {
  color: #0f172a !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 3px solid rgba(176, 141, 87, 0.80) !important;
  padding-bottom: 0.12rem !important;
}

/* --- D) Keep the badge consistent (not a totally different box style) --- */
.hero .hero-badge {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(176, 141, 87, 0.35) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

/* --- E) Keep right-side feature cards readable too --- */
.hero .feature-card {
  background: rgba(248, 244, 235, 0.94) !important;
  border: 1px solid rgba(176, 141, 87, 0.35) !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22) !important;
}

.hero .feature-card :is(h3, p) {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* --- F) Disable any accidental hero overlay darkener, if present --- */
.hero :is(.hero-bg, .hero-overlay, .hero-tint) {
  display: none !important;
}


/* =========================================================
   HERO PANEL v2: LEFT-ANCHORED FADE (keeps tower visible)
   Paste at VERY BOTTOM. Overrides prior hero panel.
   ========================================================= */

/* Target hero copy container (works whether you have .hero-content or not) */
.hero :is(.hero-content, .hero-inner > :first-child) {
  /* Keep it from spanning the whole hero */
  max-width: 38rem !important;

  /* This is the key: parchment on the left, fading to transparent on the right */
  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.92) 0%,
    rgba(248, 244, 235, 0.86) 60%,
    rgba(248, 244, 235, 0.00) 100%
  ) !important;

  /* Brass edge only on the left so it feels intentional, not like a big card */
  border: none !important;
  border-left: 3px solid rgba(176, 141, 87, 0.65) !important;

  border-radius: 18px !important;
  padding: 1.2rem 1.2rem 1.1rem 1.25rem !important;

  /* Softer shadow so it doesn’t feel like a giant block */
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.22) !important;
}

/* Keep all hero copy readable INSIDE the fade panel */
.hero :is(.hero-content, .hero-inner > :first-child) :is(h1, .hero-subtitle, .hero-ownership-line, .hero-contact, p, a, span) {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* Brand emphasis without adding another “box” */
.hero :is(.hero-content, .hero-inner > :first-child) .hero-brand {
  color: #0f172a !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 3px solid rgba(176, 141, 87, 0.80) !important;
  padding-bottom: 0.12rem !important;
}

/* Make sure we didn't accidentally hide your steeple with a full-height overlay */
.hero :is(.hero-bg, .hero-overlay, .hero-tint) {
  display: none !important;
}

/* Mobile: use a normal (subtle) solid panel because fade-to-transparent looks weird on narrow screens */
@media (max-width: 960px) {
  .hero :is(.hero-content, .hero-inner > :first-child) {
    max-width: 100% !important;
    background: rgba(248, 244, 235, 0.90) !important;
    border-left: 3px solid rgba(176, 141, 87, 0.55) !important;
  }
}


/* =========================================================
   HERO PANEL v3: NO SLIVER + RIGHT-SIDE TEXT HELP (SAFE)
   Paste at VERY BOTTOM. Overrides prior hero panel.
   ========================================================= */

.hero :is(.hero-content, .hero-inner > :first-child) {
  max-width: 38rem !important;

  /* Fade panel: end before the edge and force true transparent at 100% */
  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.92) 0%,
    rgba(248, 244, 235, 0.86) 52%,
    rgba(248, 244, 235, 0.10) 78%,
    rgba(248, 244, 235, 0.00) 96%,
    rgba(248, 244, 235, 0.00) 100%
  ) !important;

  /* Prevent edge artifacts */
  background-clip: padding-box !important;
  border: none !important;
  border-left: 3px solid rgba(176, 141, 87, 0.65) !important;

  border-radius: 18px !important;
  padding: 1.2rem 1.2rem 1.1rem 1.25rem !important;
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.22) !important;
}

.hero :is(.hero-content, .hero-inner > :first-child) :is(h1, .hero-subtitle, .hero-ownership-line, .hero-contact, p, a, span) {
  color: #0f172a !important;
  text-shadow: none !important;
}

.hero :is(.hero-content, .hero-inner > :first-child) .hero-brand {
  color: #0f172a !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 3px solid rgba(176, 141, 87, 0.80) !important;
  padding-bottom: 0.12rem !important;
}

/* ------------------------------
   RIGHT-SIDE “TEXT SAVER” EFFECT
   ------------------------------
   This adds a subtle light halo that fades IN from left->right,
   opposite the panel fade. It is applied to hero headline + subtitle.
*/

/* Ensure the text blocks can host pseudo-elements */
.hero :is(.hero-content, .hero-inner > :first-child) h1,
.hero :is(.hero-content, .hero-inner > :first-child) .hero-subtitle {
  position: relative !important;
  display: inline-block; /* keeps mask effect tight */
}

/* Duplicate text layer with halo, then mask it so it appears more on the right */
.hero :is(.hero-content, .hero-inner > :first-child) h1::after,
.hero :is(.hero-content, .hero-inner > :first-child) .hero-subtitle::after {
  content: attr(data-shadow);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;

  /* crisp-ish halo (smaller than the ugly outline attempt) */
  text-shadow:
    -1px  0   0 rgba(255,255,255,0.95),
     1px  0   0 rgba(255,255,255,0.95),
     0   -1px 0 rgba(255,255,255,0.95),
     0    1px 0 rgba(255,255,255,0.95),
     0    6px 14px rgba(0,0,0,0.18);

  /* fade-in mask from left->right (off on left, on on right) */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,1) 100%);
}

/* Mobile: disable fancy mask (small screens), use solid panel instead */
@media (max-width: 960px) {
  .hero :is(.hero-content, .hero-inner > :first-child) {
    max-width: 100% !important;
    background: rgba(248, 244, 235, 0.90) !important;
    border-left: 3px solid rgba(176, 141, 87, 0.55) !important;
  }

  .hero :is(.hero-content, .hero-inner > :first-child) h1::after,
  .hero :is(.hero-content, .hero-inner > :first-child) .hero-subtitle::after {
    display: none !important;
  }
}





/* =========================================================
   FINAL HERO FIX:
   Text-level gradient backer that strengthens to the RIGHT
   (counteracts fading panel, preserves steeple)
   ========================================================= */

/* TARGET: summary text on the LEFT inside the hero inner container */
.hero-inner > :first-child
:is(h1, p, .hero-subtitle, .hero-ownership-line) {

  /* Keep text looking like text */
  color: #0f172a !important;
  text-shadow: none !important;

  /* This is the key: text-level gradient backer */
  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.00) 0%,
    rgba(248, 244, 235, 0.00) 45%,
    rgba(248, 244, 235, 0.45) 70%,
    rgba(248, 244, 235, 0.75) 100%
  );

  /* Make the background apply per line, not as one big block */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  /* Tiny padding so the backer actually shows */
  padding: 0.08em 0.18em;

  /* Soft corners so it feels natural */
  border-radius: 8px;
}




/* =========================================================
   HERO PRIMARY CTA FIX
   "Get a quick ownership review"
   ========================================================= */

/* Target the hero CTA button specifically */
.hero a[href*="ownership"],
.hero .hero-actions .btn-primary {
  background: linear-gradient(
    135deg,
    rgba(248, 244, 235, 0.98),
    rgba(241, 232, 215, 0.98)
  ) !important;

  color: #0f172a !important; /* dark ink */
  border: 2px solid rgba(176, 141, 87, 0.75) !important; /* brass */
  box-shadow:
    0 18px 38px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;

  font-weight: 800 !important;
}

/* Hover: subtle authority, not flashy */
.hero a[href*="ownership"]:hover,
.hero .hero-actions .btn-primary:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 250, 240, 1),
    rgba(246, 235, 215, 1)
  ) !important;

  box-shadow:
    0 22px 44px rgba(2, 6, 23, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  transform: translateY(-1px);
}

/* =========================================================
   HERO CTA CLEANUP
   Remove redundant "See enticing pricing" button
   ========================================================= */

/* Hide the pricing bubble/button next to the primary hero CTA */
.hero .hero-actions a[href*="pricing"],
.hero .hero-actions .btn-ghost {
  display: none !important;
}


/* =========================================================
   HERO FADE SLIVER KILLER (RIGHT EDGE ARTIFACT FIX)
   Keeps the fade + steeple visibility, removes the right sliver.
   ========================================================= */

/* The left hero text container (the one with the fade) */
.hero-inner > :first-child {
  background: none !important;      /* important: stop painting on the element */
  position: relative !important;
  overflow: hidden !important;      /* clips the pseudo-element cleanly */
}

/* Draw the fade on a pseudo-element instead */
.hero-inner > :first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;

  /* Fade ends BEFORE the edge and stays 0 to 100% */
  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.92) 0%,
    rgba(248, 244, 235, 0.86) 55%,
    rgba(248, 244, 235, 0.25) 78%,
    rgba(248, 244, 235, 0.00) 92%,
    rgba(248, 244, 235, 0.00) 100%
  );
}

/* Make sure your text sits above the fade */
.hero-inner > :first-child > * {
  position: relative;
  z-index: 1;
}

/* Hard stop: force the last 10px to true transparent (sliver killer) */
.hero-inner > :first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -2px;        /* slightly past the edge to catch subpixels */
  width: 14px;
  height: 100%;
  background: transparent;
  pointer-events: none;
}



/* =========================================================
   HERO FADE SLIVER FIX v2 (INSET THE GRADIENT LAYER)
   This prevents the fade layer from ever touching the right edge.
   ========================================================= */

/* The fading panel container (left column) */
.hero-inner > :first-child {
  position: relative !important;
  overflow: hidden !important;
  background: none !important;
}

/* Draw fade on ::before but DO NOT let it reach the right edge */
.hero-inner > :first-child::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;

  /* KEY: inset away from the right edge */
  right: 14px !important;

  pointer-events: none !important;

  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.92) 0%,
    rgba(248, 244, 235, 0.86) 55%,
    rgba(248, 244, 235, 0.25) 78%,
    rgba(248, 244, 235, 0.00) 92%,
    rgba(248, 244, 235, 0.00) 100%
  ) !important;
}

/* Keep content above */
.hero-inner > :first-child > * {
  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================
   HERO PANEL STABILITY + INNER-BOX CLEANUP (FIXES BOTH ISSUES)
   - Stabilizes the left panel width so fade behaves consistently
   - Removes inner box “protrusion” by making them blend into the panel
   ========================================================= */

/* 1) Stabilize the left hero column width so the fade doesn't behave differently per monitor */
.hero-inner > :first-child {
  max-width: clamp(30rem, 42vw, 38rem) !important;
}

/* 2) Make inner “boxes” in the left column stop looking like separate slabs */
.hero-inner > :first-child .hero-badge,
.hero-inner > :first-child .hero-title,
.hero-inner > :first-child .hero-title-box,
.hero-inner > :first-child .hero-summary-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* If your badge needs a little separation without becoming a box */
.hero-inner > :first-child .hero-badge {
  display: inline-flex !important;
  gap: 0.45rem !important;
  padding: 0.2rem 0.0rem !important; /* basically no pill */
  font-weight: 750 !important;
}

/* 3) If the sliver is actually coming from border/shadow on the left panel, neutralize just the right edge */
.hero-inner > :first-child {
  border-right: 0 !important;
}

/* 4) (Optional) Make the panel’s fade end sooner on narrower widths so it never reaches the right edge */
@media (max-width: 1200px) {
  .hero-inner > :first-child::before {
    background: linear-gradient(90deg,
      rgba(248, 244, 235, 0.92) 0%,
      rgba(248, 244, 235, 0.86) 50%,
      rgba(248, 244, 235, 0.20) 70%,
      rgba(248, 244, 235, 0.00) 86%,
      rgba(248, 244, 235, 0.00) 100%
    ) !important;
  }
}


/* =========================================================
   HERO SUMMARY BOX CLEANUP (LEFT COLUMN ONLY)
   Removes the extra inner box behind the summary paragraph.
   ========================================================= */

/* The summary paragraph itself stays readable via the text-backer gradient we already added */
.hero-inner > :first-child p {
  background: none !important;   /* prevent any paragraph-level box */
  border: none !important;
  box-shadow: none !important;
}

/* If the summary is wrapped in a div that is styled like a "card", neutralize it */
.hero-inner > :first-child > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* If the summary is wrapped one level deeper, neutralize that too */
.hero-inner > :first-child > div > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* =========================================================
   HERO LEFT CLUSTER NUDGE v2
   Slightly stronger shift to keep text in the supported zone
   ========================================================= */

.hero-inner > :first-child {
  transform: translateX(-28px) !important;
}

/* Safety: never nudge on small screens */
@media (max-width: 960px) {
  .hero-inner > :first-child {
    transform: none !important;
  }
}


/* =========================================================
   HERO LEFT CLUSTER NUDGE v3 (STRONGER)
   ========================================================= */

.hero-inner > :first-child {
  transform: translateX(-42px) !important;
}

@media (max-width: 960px) {
  .hero-inner > :first-child {
    transform: none !important;
  }
}


/* =========================================================
   HERO DISSOLVE SHIFT v3
   Dissolve happens LATER (preserves steeple + text)
   ========================================================= */

/* Parent fade (the big hero support layer) */
.hero-inner > :first-child::before {
  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.96) 0%,
    rgba(248, 244, 235, 0.96) 68%,   /* hold solid longer */
    rgba(248, 244, 235, 0.80) 78%,
    rgba(248, 244, 235, 0.40) 88%,
    rgba(248, 244, 235, 0.00) 96%    /* dissolve later */
  ) !important;
}

/* Summary text backer: mirror the SAME timing so they stay in sync */
.hero-inner > :first-child
:is(h1, p, .hero-subtitle, .hero-ownership-line) {
  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.00) 0%,
    rgba(248, 244, 235, 0.00) 60%,
    rgba(248, 244, 235, 0.35) 75%,
    rgba(248, 244, 235, 0.70) 96%
  );

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}



/* =========================================================
   HERO BADGES — CIVIC RED (MAIN STREET FRIENDLY)
   ========================================================= */

.hero .badge {
  background-color: #6d201f !important;   /* civic brick red */
  color: #f8f4eb !important;              /* same cream as hero panel */
  border: none !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

/* Ensure ALL text inside the badge is cream */
.hero .badge *,
.hero .badge h3,
.hero .badge p,
.hero .badge span {
  color: #f8f4eb !important;
  text-shadow: none !important;
}


/* =========================================================
   HERO BADGES — FORCE CREAM TEXT (FINAL)
   ========================================================= */

.hero .badge,
.hero .badge * {
  background-color: #6d201f !important;   /* civic red */
  color: #f8f4eb !important;              /* hero cream */
}

/* Kill any inherited text styling that might override color */
.hero .badge span,
.hero .badge strong,
.hero .badge em,
.hero .badge p,
.hero .badge h3,
.hero .badge h4 {
  color: #f8f4eb !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #f8f4eb !important;
}


/* =========================================================
   BADGE NUCLEAR OVERRIDE (DIAGNOSTIC + FIX)
   If this doesn't change badge text, it's inline !important or not text.
   ========================================================= */

.badge {
  background-color: #6d201f !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

/* Force cream text on literally everything inside badges */
.badge, .badge * {
  color: #f8f4eb !important;
  -webkit-text-fill-color: #f8f4eb !important;
  text-shadow: none !important;
}

/* If there are icons/SVGs inside badges */
.badge svg, .badge svg * {
  fill: #f8f4eb !important;
  stroke: #f8f4eb !important;
}


/* =========================================================
   HERO SUBTITLE: RIGHT-WEIGHTED TEXT BACKER (NO BIG BOX)
   Keeps steeple visible, restores readability.
   ========================================================= */

.hero-subtitle {
  color: #0f172a !important;
  text-shadow: none !important;

  /* Opposes the panel fade: stronger support on the RIGHT */
  background: linear-gradient(
    90deg,
    rgba(248, 244, 235, 0.00) 0%,
    rgba(248, 244, 235, 0.00) 52%,
    rgba(248, 244, 235, 0.35) 72%,
    rgba(248, 244, 235, 0.72) 100%
  ) !important;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  padding: 0.10em 0.18em !important;
  border-radius: 10px !important;
}



/* =========================================================
   HERO SUBTITLE: black text with cream outline (no boxes)
   ========================================================= */

p.hero-subtitle,
.hero-subtitle {
  color: #0f172a !important;                 /* ink text */

  /* Chrome/Safari/Edge: true outline */
  -webkit-text-stroke: 1.2px #f8f4eb;        /* cream outline */
  paint-order: stroke fill;                  /* stroke behind fill where supported */

  /* Remove any prior background tricks */
  background: none !important;

  /* Firefox fallback: crisp "outline" via tight shadows */
  text-shadow:
    -1px  0   0 #f8f4eb,
     1px  0   0 #f8f4eb,
     0   -1px 0 #f8f4eb,
     0    1px 0 #f8f4eb !important;
}

/* Optional: if the outline feels too thick, drop to 0.6px */


/* =========================================================
   RIGHT HERO "HAMBURGER" BADGES (BOTTOM BUN) — READABLE
   Targets badges inside the RIGHT column of the hero only.
   ========================================================= */

/* Right column of hero */
.hero-inner > :nth-child(2) .badge {
  background-color: #6d201f !important;   /* civic red */
  color: #f8f4eb !important;              /* cream */
  border: none !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;

  padding: 0.45rem 0.75rem !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
  font-size: 0.9rem !important;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

/* Force all text inside those badges to cream */
.hero-inner > :nth-child(2) .badge * {
  color: #f8f4eb !important;
  -webkit-text-fill-color: #f8f4eb !important;
  text-shadow: none !important;
}

/* If the badges are spaced weirdly, give them breathing room */
.hero-inner > :nth-child(2) .badge {
  margin-right: 0.5rem !important;
  margin-top: 0.5rem !important;
}


/* =========================================================
   HERO "STAMP" CHIPS (bottom bun on right hamburger)
   ========================================================= */

.hero-inner > :last-child .stamp{
  background-color: #6d201f !important;  /* civic red */
  color: #f8f4eb !important;             /* cream */
  border: none !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;

  padding: 0.45rem 0.8rem !important;
  border-radius: 999px !important;

  font-weight: 750 !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

/* Force nested text/icons to cream too */
.hero .stamp,
.hero .stamp * {
  color: #f8f4eb !important;
  -webkit-text-fill-color: #f8f4eb !important;
  text-shadow: none !important;
}

.hero .stamp svg,
.hero .stamp svg * {
  fill: #f8f4eb !important;
  stroke: #f8f4eb !important;
}


/* =========================================================
   HERO STAMPS — TYPOGRAPHY MATCH (SMALLER + QUIETER)
   ========================================================= */

.hero .stamp {
  font-size: 0.78rem !important;   /* down from ~0.9rem */
  font-weight: 650 !important;     /* slightly lighter */
  letter-spacing: 0.02em !important;
  padding: 0.38rem 0.65rem !important;
}




/* =========================================================
   HERO TITLE BOTTOM: add spacing after <br>
   ========================================================= */

.hero-title-bottom {
  line-height: 1.15; /* base line height */
}

.hero-title-bottom br {
  display: block;
  content: "";
  margin-top: 0.35em;
}




/* ================= Founder modal ================= */

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 9999;
}
.modal-backdrop.is-open{ display: flex; }

.modal{
  width: min(860px, 100%);
  background: rgba(248, 244, 235, 0.98);
  border: 1px solid rgba(176, 141, 87, 0.55);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(176,141,87,0.45);
  background: rgba(255,255,255,0.7);
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover{ background: rgba(255,255,255,0.9); }

.founder-card{
  display: grid;
  grid-template-columns: 240px 1fr;
}

.founder-photo{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-right: 1px solid rgba(176,141,87,0.35);
  background: #e9e2d6;
}

.founder-content{ padding: 1.4rem 1.4rem 1.2rem 1.4rem; }

.founder-kicker{
  display: inline-block;
  background: #6d201f;
  color: #f8f4eb;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-weight: 750;
  font-size: 0.78rem;
  margin-bottom: 0.75rem;
}

.founder-title{ margin: 0; color: #0f172a; letter-spacing: 0.02em; }

.founder-subtitle{
  margin: 0.35rem 0 0.9rem 0;
  color: rgba(15,23,42,0.8);
  font-weight: 650;
}

.founder-bio{ margin: 0 0 0.9rem 0; color: rgba(15,23,42,0.92); line-height: 1.6; }

.founder-bullets{
  margin: 0 0 1.1rem 1.1rem;
  padding: 0;
  color: rgba(15,23,42,0.92);
}

.founder-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

@media (max-width: 760px){
  .founder-card{ grid-template-columns: 1fr; }
  .founder-photo{
    min-height: 240px;
    border-right: none;
    border-bottom: 1px solid rgba(176,141,87,0.35);
  }
}



/* =========================================================
   HEADER NAV SPACING FIX
   - consistent spacing
   - prevent multi-word links from breaking
   ========================================================= */

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.05rem;              /* adjust if you want tighter/looser */
  flex-wrap: nowrap;         /* keep one row on desktop */
}

.nav-links a {
  white-space: nowrap;       /* prevents "Meet our Founder" from breaking */
}

/* If your header container is squeezing the nav, let it shrink properly */
.nav-links {
  min-width: 0;
}

/* Responsive: allow wrap only on smaller screens */
@media (max-width: 980px) {
  .nav-links {
    flex-wrap: wrap;
    row-gap: 0.55rem;
    column-gap: 0.85rem;
  }
}



/* =========================================================
   FOUNDER CARD — LANDSCAPE IMAGE (16:9 FEEL)
   ========================================================= */

/* Give the image more horizontal real estate */
.founder-card {
  grid-template-columns: 380px 1fr !important; /* was ~240px */
}

/* Force a landscape feel */
.founder-photo {
  aspect-ratio: 16 / 9;
  min-height: unset !important;
  height: auto !important;

  object-fit: cover;
  object-position: center;

  border-right: 1px solid rgba(176, 141, 87, 0.35);
}

/* Optional: slightly soften the image edge */
.founder-photo {
  background: #e9e2d6;
}

/* Mobile: stack as before */
@media (max-width: 760px) {
  .founder-card {
    grid-template-columns: 1fr !important;
  }

  .founder-photo {
    aspect-ratio: 16 / 9;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(176, 141, 87, 0.35);
  }
}


/* =========================================================
   FOUNDER CARD — FIX CROPPING + REMOVE EMPTY SPACE
   ========================================================= */

/* Keep the wider image column */
.founder-card {
  grid-template-columns: 380px 1fr !important;
  align-items: stretch !important; /* make both columns equal height */
}

/* Let the image fill the full height of the card */
.founder-photo {
  width: 100% !important;
  height: 100% !important;          /* key: fills the card height */
  aspect-ratio: auto !important;    /* remove forced 16:9 */
  min-height: 320px !important;

  object-fit: cover !important;
  object-position: center top !important; /* preserve top of head/face */
  display: block !important;

  border-right: 1px solid rgba(176, 141, 87, 0.35) !important;
}

/* Mobile stays stacked */
@media (max-width: 760px) {
  .founder-card {
    grid-template-columns: 1fr !important;
  }

  .founder-photo {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important; /* here 16:9 works nicely */
    border-right: none !important;
    border-bottom: 1px solid rgba(176, 141, 87, 0.35) !important;
    object-position: center top !important;
  }
}


/* =========================================================
   FOUNDER CARD — MORE HORIZONTAL IMAGE REAL ESTATE
   ========================================================= */

.founder-card {
  grid-template-columns: 460px 1fr !important;
  align-items: stretch !important;
}


/* =========================================================
   FOUNDER CARD — MORE HORIZONTAL IMAGE REAL ESTATE
   ========================================================= */

.founder-card {
  grid-template-columns: 460px 1fr !important;
  align-items: stretch !important;
}


/* =========================================================
   FOUNDER CARD — FEATURED HORIZONTAL IMAGE (FULL WIDTH)
   ========================================================= */

.founder-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

/* Image becomes a wide banner */
.founder-photo {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;

  object-fit: cover !important;
  object-position: center top !important;

  border-right: none !important;
  border-bottom: 1px solid rgba(176, 141, 87, 0.35) !important;
}


/* =========================================================
   FOUNDER MODAL — prevent top from being cut off on smaller screens
   ========================================================= */

/* Allow the overlay to scroll if the modal is taller than the viewport */
.modal-backdrop.is-open {
  overflow: auto;             /* key */
  align-items: flex-start;    /* key: stop vertical centering */
}

/* Keep modal within viewport height and allow internal scroll if needed */
.modal {
  max-height: calc(100vh - 2.4rem);
  overflow: auto;
  margin-top: 1.2rem;
}

/* On smaller laptop widths, tighten padding a bit */
@media (max-width: 900px) {
  .modal-backdrop.is-open {
    padding: 0.9rem;
  }
  .modal {
    max-height: calc(100vh - 1.8rem);
    margin-top: 0.9rem;
  }
}