:root{
  --red:#D8122A;
  --blue:#16386D;
  --ink:#0E1A36;
  --white:#fff;
  --max:1160px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth;background:#F7F9FC;color:#132038}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* NAV + MOBILE */
.nav{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid #e9edf4}
.nav-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font:900 1rem/1 Montserrat,Arial,sans-serif;color:var(--blue)}
.brand img{width:40px;height:40px;border-radius:50%}
.menu{display:flex;gap:16px;justify-content:center}
.menu a{font:800 .85rem/1 Montserrat,Arial,sans-serif;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:8px}
.menu a.active{color:var(--red)}
.cta-nav{display:flex;gap:10px}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;font:800 .85rem/1 Montserrat,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.btn--red{background:var(--red);color:#fff;box-shadow:0 8px 18px rgba(216,18,42,.35)}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(22,56,109,.35)}
.burger{display:none;gap:6px;flex-direction:column}
.burger span{width:24px;height:3px;background:var(--ink);border-radius:2px}
@media (max-width:1060px){
  .menu,.cta-nav{display:none}
  .burger{display:flex}
}
.mobile{position:fixed;inset:0;background:rgba(22,56,109,.98);color:#fff;display:none;flex-direction:column;padding:22px 18px;z-index:1200}
.mobile.open{display:flex}
.mobile a{color:#fff;font:800 1.05rem/1.1 Montserrat,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}

/* TICKER */
.ticker{background:var(--red);color:#fff;overflow:hidden}
.track{display:flex;gap:28px;white-space:nowrap;padding:10px 12px;font:800 .9rem/1 Montserrat,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;animation:slide 28s linear infinite}
.track .dot{width:8px;height:8px;background:#fff;border-radius:50%;display:inline-block}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HERO */
/* HERO */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 68vh;
  color: #fff;
  text-align: center;
  isolation: isolate;

  /* Bel Air photo with blue overlay */
  background:
    linear-gradient(180deg, rgba(8,25,60,0.65), rgba(8,25,60,0.85)), 
    url('/assets/belair-hero.png') center center / cover no-repeat;
}

.hero-inner {
  max-width: var(--max);
  padding: clamp(18px, 6vw, 44px) 16px;
  position: relative;
  z-index: 1;
  text-shadow: 0 4px 25px rgba(0,0,0,0.55);
}

.kicker {
  display: inline-block;
  background: var(--red);
  padding: 6px 10px;
  border-radius: 8px;
  font: 900 .8rem/1 Montserrat, Arial, sans-serif;
  letter-spacing: .05em;
}

.hero h1 {
  font-family: "Libre Baskerville", Georgia, serif;
  margin: 1.5rem 0 .5rem;
  font-size: clamp(28px, 6vw, 58px);
  line-height: 1.15;
}

.hero p {
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(15px, 3.6vw, 19px);
  margin: 0 0 12px;
}

.hero-inner{max-width:var(--max);padding:clamp(18px,6vw,44px) 16px;position:relative;z-index:1;text-shadow:0 4px 20px rgba(0,0,0,.5)}
.kicker{display:inline-block;background:var(--red);padding:6px 10px;border-radius:8px;font:900 .8rem/1 Montserrat,Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.hero h1{font-family:"Libre Baskerville",Georgia,serif;margin:.6rem 0 .4rem;font-size:clamp(28px,6.2vw,58px);line-height:1.1}
.hero p{font-family:Montserrat,Arial,sans-serif;font-size:clamp(15px,3.6vw,19px);margin:0 0 12px}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.btn-xl{padding:14px 22px;border-radius:999px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.btn-xl.btn--red{background:linear-gradient(180deg,#ff3b3b,#c1121f)}
.btn-xl.btn--blue{background:linear-gradient(180deg,#2b4e97,#16386d)}

/* CONTENT */
.section,.page{max-width:var(--max);margin:24px auto;padding:0 16px}
.section h2,.page h1{font:800 clamp(22px,3.8vw,34px)/1.15 Montserrat,Arial,sans-serif;color:var(--blue);margin:0 0 12px}
.page p{font-size:clamp(.98rem,3.2vw,1.06rem);opacity:.95}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:#fff;border:1px solid #e9edf4;border-radius:14px;padding:16px 16px 18px;box-shadow:0 10px 26px rgba(22,56,109,.08)}
.badge{display:inline-block;background:var(--blue);color:#fff;padding:7px 11px;border-radius:999px;font-size:.75rem;letter-spacing:.08em}
/* CTA BAND */
.cta-band{background:var(--blue);color:#fff}
.cta-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:18px 16px}
.cta-inner h3{margin:0;font-size:clamp(18px,3.5vw,24px)}
.cta-btn{display:inline-block;background:var(--red);color:#fff;padding:14px 20px;border-radius:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 24px rgba(216,18,42,.35)}
@media(max-width:640px){.cta-inner{grid-template-columns:1fr;text-align:center}}
/* FOOTER */
.foot{max-width:var(--max);margin:28px auto 38px;padding:0 16px;text-align:center;font-family:Montserrat,Arial,sans-serif}
.foot h3{margin:0 0 10px;color:#0c214a;font-size:clamp(20px,4vw,28px)}
.foot p{margin:0 0 16px;color:#263143;opacity:.92;font-size:clamp(.95rem,3.2vw,1.05rem)}
.foot a{display:inline-block;padding:14px 20px;border-radius:999px;background:#16386d;color:#fff;font-weight:800;letter-spacing:.08em}
/* REVEAL */
.reveal{opacity:0;transform:translateY(16px);animation:fadeUp .9s ease-out both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()) {.reveal{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 20% cover 30%}}

/* Nav anti-overlap enhancements */
.nav-inner{grid-template-columns:auto 1fr auto}
.menu{min-width:0}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;display:inline-block}
@media (max-width:1280px){
  .brand span{max-width:180px}
}
@media (max-width:1060px){
  .brand span{max-width:unset} /* when menu hidden we can show full brand */
}
/* === Centered navigation links (no CTA buttons) === */
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* brand left, menu centered, burger right */
  position: relative;
}

.menu {
  flex: 1;
  display: flex;
  justify-content: center; /* keep links centered */
  gap: 24px;               /* spacing between links */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 900 1rem/1 Montserrat, Arial, sans-serif;
  color: var(--blue);
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Burger hidden by default on desktop */
.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.burger span {
  width: 24px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
}

/* Mobile styles */
@media (max-width: 1060px) {
  .menu { display: none; }
  .burger { display: flex; }
}
.brand img {
  width: auto;       /* let image keep its natural aspect ratio */
  height: 44px;      /* control height so nav stays neat */
  border-radius: 0;  /* no circle */
  object-fit: contain; 
}
/* =========================
   PLAN — match screenshot #2
   ========================= */

/* Content wrapper (same idea as hero-inner) */
.plan-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* Section with faded full-bleed photo */
#plan{
  /* easy tuning knob for vertical framing */
  --plan-y: 25%;                  /* 45–65% usually perfect for faces */

  position: relative;
  overflow: hidden;
  min-height: 1100px;              /* give the photo room */
  padding: 200px 0 96px;

  background:
    linear-gradient(to bottom, rgba(255,255,255,.62), rgba(255,255,255,.82)),
    url('/assets/plan-belair.png') center var(--plan-y) / cover no-repeat;
}

/* Heading: back to the bold sans look from your 2nd shot */
#plan h2{
  margin: 85px 0 24px;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(17px, 5.4vw, 33px);
  line-height: 1.1;
  color: #1e3558;  /* your navy */
  text-shadow: none;
}

/* Cards readable on the faded background */
#plan .card{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(9,30,66,.10);
}

/* Optional: subtle band shadow under the section (like your #2 look) */
#plan::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:20px;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0));
  filter: blur(6px);
  opacity:.22;
  pointer-events:none;
}

/* Responsive nudges */
@media (max-width: 1100px){
  #plan{ --plan-y: 58%; min-height: 760px; padding: 96px 0 80px; }
}
@media (max-width: 768px){
  #plan{ --plan-y: 62%; min-height: 700px; padding: 84px 0 64px; }
}
/* ===== Responsive additions (do NOT edit your original rules) ===== */

/* Large tablets / small laptops */
@media (max-width: 1024px){
  #plan{
    --plan-y: 40%;
    min-height: 760px;
    padding: 96px 0 72px;
  }
  #plan h2{
    margin: 380px 0 20px;
    font-size: clamp(20px, 6vw, 34px);
  }
}

/* Tight tablets (overrides your 768 rule, comes AFTER it) */
@media (max-width: 768px){
  #plan{
    --plan-y: 55%;
    min-height: 680px;
    padding: 84px 0 60px;
  }
  #plan h2{
    margin: 260px 0 18px;
    font-size: clamp(20px, 7.2vw, 32px);
  }
}

/* Large iPhones (428px = 14/15 Pro Max & Plus) */
@media (max-width: 428px){
  #plan{
    --plan-y: 48%;
    min-height: 600px;
    padding: 72px 0 52px;
  }
  #plan h2{
    margin: 180px 0 16px;
    font-size: clamp(19px, 8.6vw, 30px);
  }
}

/* Most iPhones (390px = 13/14/15, 12) */
@media (max-width: 390px){
  #plan{
    --plan-y: 45%;
    min-height: 560px;
    padding: 64px 0 48px;
  }
  #plan h2{
    margin: 150px 0 14px;
    font-size: clamp(18px, 9.2vw, 28px);
  }
}

/* Small iPhones / SE (375px and below) */
@media (max-width: 375px){
  #plan{
    --plan-y: 42%;
    min-height: 540px;
    padding: 56px 0 44px;
  }
  #plan h2{
    margin: 130px 0 12px;
    font-size: clamp(17px, 9.8vw, 26px);
  }
}

/* Very small / legacy (just in case) */
@media (max-width: 340px){
  #plan{
    --plan-y: 40%;
    min-height: 520px;
    padding: 52px 0 40px;
  }
  #plan h2{
    margin: 110px 0 10px;
    font-size: clamp(16px, 10.5vw, 24px);
  }
}
/* Election note strip under the buttons */
.election-note{
  display:flex; gap:14px; align-items:center; justify-content:center;
  margin:18px auto 8px;
  padding:12px 16px;
  max-width: var(--max, 1200px);
  background: #f3f6ff;
  border: 1px solid #dfe6fb;
  border-radius: 12px;
  font: 700 1rem/1.25 Montserrat, Arial, sans-serif;
  color:#1e3558;
}
.election-note strong{font-weight:900}
.election-note span{opacity:.9}
/* Plan cards: keep your current card styles; these add hover-expand */
.plan-card{
  background:#fff;
  border:1px solid #e7ecf7;
  border-radius:16px;
  padding:18px 18px;
  box-shadow:0 8px 24px rgba(9,30,66,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  outline:none;
}
.plan-card:hover,
.plan-card:focus-within{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(9,30,66,.10);
  border-color:#d9e3fb;
}

/* Titles + lede copy */
.plan-card h3{
  margin:0 0 8px;
  font:900 clamp(18px, 2.6vw, 24px)/1.2 Montserrat, Arial, sans-serif;
  color:#1e3558;
}
.plan-card .lede{
  margin:0 0 10px;
  font:600 0.98rem/1.4 Montserrat, Arial, sans-serif;
  color:#253b66;
}

/* Hidden bullets that expand on hover/focus */
.plan-card .details{
  margin:0;
  padding:0 0 0 18px; /* normal bullets */
  list-style:disc;
  color:#2b3f6f;
  font:600 0.95rem/1.45 Montserrat, Arial, sans-serif;

  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}
.plan-card:hover .details,
.plan-card:focus-within .details{
  max-height:520px;   /* enough room for all bullets */
  opacity:1;
  margin-top:8px;
}

/* Make cards keyboard/touch friendly without JS */
.plan-card { cursor: default; }
.plan-card:focus-visible{
  outline:3px solid #2b4e97;
  outline-offset:2px;
}

/* Grid spacing protection if needed */
@media (max-width: 680px){
  .plan-card{ padding:16px 16px; }
}
/* --- Plan cards: polish + expand only the active card --- */
#plan .plan-card{
  background:#fff;
  border:1px solid #e7ecf7;
  border-radius:16px;
  padding:20px 20px;
  box-shadow:0 8px 24px rgba(9,30,66,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align:left;
}

#plan .plan-card:hover,
#plan .plan-card:focus-within{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(9,30,66,.10);
  border-color:#d9e3fb;
}

/* Title */
#plan .plan-card h3{
  margin:0 0 8px;
  font:800 clamp(18px, 2.2vw, 24px)/1.25 Montserrat, Arial, sans-serif;
  letter-spacing:.01em;
  color:#1e3558;
}

/* Lede line */
#plan .plan-card .lede{
  margin:0 0 10px;
  font:600 clamp(14.5px, 1.6vw, 16.5px)/1.5 Montserrat, Arial, sans-serif;
  color:#2b3f6f;
  text-wrap:balance; /* nicer line breaks on modern browsers */
}

/* Bullets (collapsed by default) */
#plan .plan-card .details{
  margin:0;
  padding:0 0 0 18px; /* normal disc bullets */
  list-style:disc;
  color:#2c3e70;
  font:600 clamp(14px, 1.5vw, 15.5px)/1.5 Montserrat, Arial, sans-serif;

  max-height:0;
  overflow:hidden;
  opacity:0;
  will-change:max-height, opacity;
  transition:max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}

/* Expand ONLY this card when it's hovered or keyboard-focused */
#plan .plan-card:hover .details,
#plan .plan-card:focus-within .details,
#plan .plan-card.is-open .details{ /* JS optional class */
  max-height:520px;
  opacity:1;
  margin-top:8px;
}

/* Tighter bullet spacing */
#plan .plan-card .details li + li{ margin-top:6px; }

/* Small screens: a touch more breathing room */
@media (max-width: 680px){
  #plan .plan-card{ padding:18px; }
  #plan .plan-card .lede{ margin-bottom:8px; }
}
/* Widen the plan section so each title fits on one line */
#plan .plan-inner{
  /* expand only this section’s container */
  max-width: min(96vw, 1500px);
}

/* a little tighter gap so the wider cards still breathe */
#plan .grid{
  gap: 18px;
}

/* titles: one line, no wrap */
#plan .plan-card h3{
  white-space: nowrap;                 /* keep on one line */
  font-size: clamp(20px, 1.7vw, 28px); /* slightly tuned so long titles fit */
  line-height: 1.2;
}

/* pill badge styling (theme-matched) */
#plan .plan-badge{
  display:inline-block;
  margin: 2px 0 10px;
  padding: 7px 12px;
  background:#1e3558;                  /* your navy */
  color:#fff;
  border-radius:999px;
  font: 800 0.85rem/1 Montserrat, Arial, sans-serif;
  letter-spacing:.02em;
  box-shadow: 0 4px 12px rgba(9,30,66,.10);
}

/* small screens still look clean */
@media (max-width: 980px){
  #plan .plan-inner{ max-width: min(96vw, 1300px); }
  #plan .plan-card h3{ font-size: clamp(19px, 2.2vw, 26px); }
}
@media (max-width: 680px){
  #plan .plan-card h3{ white-space: normal; } /* allow wrap on phones */
}
/* --- PLAN fixes: keep cards inside viewport and clean titles --- */

/* Let the grid wrap elegantly if space gets tight */
#plan .grid{
  /* if you already set display:grid; and gap elsewhere, this just improves wrapping */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* On wide screens we tried to force titles on one line. Allow wrap a bit sooner
   so "A Senior-Honoring Bel Air" doesn't push the card off-screen. */
@media (max-width: 1500px){
  #plan .plan-card h3{ white-space: normal; }
}

/* Make the JS fully control what opens: collapsed by default */
#plan .plan-card .details{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}

/* Open when the card has .is-open (set by JS below) */
#plan .plan-card.is-open .details{
  max-height: 520px;
  opacity: 1;
  margin-top: 8px;
}

/* If you still have a CSS rule that expands on :hover or :focus-within,
   cancel it so ONLY .is-open controls expansion. */
#plan .plan-card:hover .details,
#plan .plan-card:focus-within .details{
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
}
/* ===== PLAN – fix width + wrapping + hover expand ===== */

/* Give the plan container more room */
#plan .plan-inner,
#plan .inner,
#plan .container{
  max-width: min(98vw, 1500px);   /* wider */
  margin: 0 auto;
  padding-left: clamp(16px, 2vw, 28px);
  padding-right: clamp(16px, 2vw, 28px);
}

/* Make the card grid responsive (never run off the right edge) */
#plan .grid,
#plan .cards,
#plan .card-grid{
  display: grid;                                /* in case it wasn't explicitly set */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

/* Prevent overflow inside grid columns */
#plan .plan-card{ min-width: 0; }

/* Long titles may wrap instead of forcing overflow */
#plan .plan-card h3{
  white-space: normal;
  font-size: clamp(22px, 1.9vw, 32px);          /* keep the look but allow fit */
  line-height: 1.2;
}

/* Collapse bullets by default */
#plan .plan-card .details{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}

/* EXPAND on hover / keyboard focus (CSS-only, no JS needed) */
#plan .plan-card:hover .details,
#plan .plan-card:focus-within .details{
  max-height: 520px;
  opacity: 1;
  margin-top: 8px;
}

/* Make sure NOTHING else is cancelling the hover expansion.
   If you have this earlier in your CSS, DELETE it:
   #plan .plan-card:hover .details { max-height:0 !important; ... }
*/
#plan .plan-card.is-open .details{ max-height:520px; opacity:1; margin-top:8px; }
/* ==== PLAN SECTION – width, titles, and expand working again ==== */

/* Make the container wider so 4 cards fit cleanly */
#plan .plan-inner{
  max-width: min(98vw, 1600px);
  margin: 0 auto;
  padding: 0 clamp(16px, 2vw, 28px);
}

/* Grid never overflows; cards can wrap if needed */
#plan .grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}
#plan .plan-card{ min-width: 0; }  /* prevent overflow inside a grid column */

/* Headings: thinner + forced to one line */
#plan .plan-card h3{
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 700;                       /* thinner than before */
  font-size: clamp(20px, 1.5vw, 26px);    /* scales down so it fits on one line */
  line-height: 1.15;
  white-space: nowrap;                    /* keep on one line */
  overflow: hidden;                       /* no spillover */
}

/* Lede/body text size tuned to match theme */
#plan .plan-card .lede{
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
}

/* Collapse bullets by default */
#plan .plan-card .details{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}

/* OPEN on hover, keyboard focus, or when JS adds .is-open */
#plan .plan-card:hover .details,
#plan .plan-card:focus-within .details,
#plan .plan-card.is-open .details{
  max-height: 700px !important;
  opacity: 1 !important;
  margin-top: 8px !important;
}
/* Slightly widen each plan card on desktop so long titles don't clip */
@media (min-width: 1200px){
  #plan .grid{
    /* was minmax(360px, 1fr); bump a little */
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
}

/* On smaller screens, let titles wrap instead of clipping */
@media (max-width: 900px){
  #plan .plan-card h3{
    white-space: normal;  /* allow 2 lines if needed */
  }
}
/* ===== Force 4-across on large screens ===== */
@media (min-width: 1300px){
  /* give the section a wider container so 4 cards fit */
  #plan .plan-inner{
    max-width: min(96vw, 1680px);
    margin: 0 auto;
    padding-left: clamp(16px, 2vw, 28px);
    padding-right: clamp(16px, 2vw, 28px);
  }

  /* exactly four equal columns; no min width fighting us */
  #plan .grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  /* small tightening so long titles fit on one line */
  #plan .plan-card{ padding: 18px; min-width: 0; }
  #plan .plan-card h3{
    white-space: nowrap;                 /* keep one line on desktop */
    font-weight: 700;
    font-size: clamp(20px, 1.35vw, 24px);/* a touch smaller on wide screens */
    line-height: 1.15;
    overflow: hidden;                    /* prevent clipping ellipses */
  }
}

/* Below 1300px we let the grid wrap naturally so it doesn't cram */