/*
 * Flanagan Mattress and Furniture: promotional storefront styles.
 * The look follows the store's own ads: forest green panels, bright yellow call-outs, red ribbons and price tags,
 * a heavy serif for the name and prices (Playfair Display), condensed capitals for headlines (Oswald) and the
 * owner's handwritten greeting (Caveat). Every component is prefixed "fl-" and used by the home page and content pages.
 */
:root {
  --fl-green: #0e5a33;
  --fl-green-deep: #0a4427;
  --fl-green-dark: #062f1b;
  --fl-green-tint: #e8f2ec;
  --fl-yellow: #ffd200;
  --fl-yellow-deep: #e6bd00;
  --fl-yellow-soft: #fff3b0;
  --fl-cream: #fffbea;
  --fl-red: #d0121b;
  --fl-red-deep: #a50d16;
  --fl-navy: #13284a;
  --fl-ink: #1d1d1b;
  --fl-text: #333;
  --fl-muted: #5f5f5f;
  --fl-line: #e9e1bf;
  --fl-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --fl-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fl-script: 'Caveat', 'Bradley Hand', cursive;
  --fl-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fl-shadow: 0 10px 30px rgba(6, 47, 27, .18);
}

.fl-page { font-family: var(--fl-body); color: var(--fl-text); background: #fff; overflow-x: clip; }
.fl-page img { max-width: 100%; }
.fl-container { width: min(1240px, 100% - 32px); margin-inline: auto; }
.fl-section { padding: clamp(3rem, 6vw, 5rem) 0; position: relative; }
.fl-section--green { background: var(--fl-green); color: #fff; }
.fl-section--deep { background: var(--fl-green-dark); color: #fff; }
.fl-section--cream { background: var(--fl-cream); }
.fl-section--yellow { background: var(--fl-yellow); color: var(--fl-ink); }
.fl-section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }

/* Headings */
.fl-kicker { display: inline-block; font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  font-size: .85rem; color: var(--fl-red); margin-bottom: .6rem; }
.fl-section--green .fl-kicker, .fl-section--deep .fl-kicker { color: var(--fl-yellow); }
.fl-title { font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: .01em;
  font-size: clamp(2rem, 4.4vw, 3.4rem); color: var(--fl-green-deep); margin: 0 0 .9rem; }
.fl-section--green .fl-title, .fl-section--deep .fl-title { color: #fff; }
.fl-title em { font-style: normal; color: var(--fl-red); }
.fl-section--green .fl-title em, .fl-section--deep .fl-title em { color: var(--fl-yellow); }
.fl-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; max-width: 46rem; margin: 0; }
.fl-head { margin-bottom: 2.2rem; }
.fl-head--center { text-align: center; }
.fl-head--center .fl-lead { margin-inline: auto; }
.fl-script { font-family: var(--fl-script); font-weight: 700; line-height: 1; }
/* The theme sets fonts on bare elements (span, p, em...), which beats inheritance: text inside these components
   takes its component's font instead. */
.fl-page :is(h1, h2, h3, h4, .fl-chalk, .fl-price, .fl-btn, .fl-kicker, .fl-burst, .fl-ribbon, .fl-quote cite, .fl-hero__caption,
  .fl-price-tag__what, .fl-mcard__cta, .fl-phone, .fl-toc) :is(span, em, strong, small, sup, p, a, b, div) { font-family: inherit; }

/* Buttons */
.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .8rem 1.6rem;
  font-family: var(--fl-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; border-radius: 6px; cursor: pointer; line-height: 1.1;
  background: var(--fl-red); color: #fff; box-shadow: 0 4px 0 var(--fl-red-deep); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.fl-btn:hover, .fl-btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 0 var(--fl-red-deep); text-decoration: none; }
.fl-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--fl-red-deep); }
.fl-btn--yellow { background: var(--fl-yellow); color: var(--fl-ink); box-shadow: 0 4px 0 var(--fl-yellow-deep); }
.fl-btn--yellow:hover, .fl-btn--yellow:focus-visible { color: var(--fl-ink); box-shadow: 0 6px 0 var(--fl-yellow-deep); }
.fl-btn--green { background: var(--fl-green); box-shadow: 0 4px 0 var(--fl-green-dark); }
.fl-btn--green:hover, .fl-btn--green:focus-visible { box-shadow: 0 6px 0 var(--fl-green-dark); }
.fl-btn--ghost { background: transparent; color: var(--fl-green-deep); border-color: var(--fl-green); box-shadow: none; }
.fl-btn--ghost:hover, .fl-btn--ghost:focus-visible { background: var(--fl-green); color: #fff; box-shadow: none; }
.fl-section--green .fl-btn--ghost, .fl-section--deep .fl-btn--ghost, .fl-hero .fl-btn--ghost, .fl-banner .fl-btn--ghost, .fl-panel--green .fl-btn--ghost, .fl-card-dark .fl-btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.fl-section--green .fl-btn--ghost:hover, .fl-section--deep .fl-btn--ghost:hover, .fl-hero .fl-btn--ghost:hover, .fl-banner .fl-btn--ghost:hover, .fl-panel--green .fl-btn--ghost:hover, .fl-card-dark .fl-btn--ghost:hover { background: #fff; color: var(--fl-green-deep); }
.fl-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.fl-head--center .fl-actions { justify-content: center; }

/* "Since 1996" starburst sticker */
.fl-burst { --size: 132px; position: absolute; width: var(--size); height: var(--size); display: grid; place-items: center; text-align: center;
  background: var(--fl-yellow); color: var(--fl-red); font-family: var(--fl-display); font-weight: 700; text-transform: uppercase;
  line-height: .95; transform: rotate(-12deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.28));
  clip-path: polygon(50% 0%, 61% 11%, 75% 4%, 79% 19%, 95% 21%, 90% 36%, 100% 50%, 90% 64%, 95% 79%, 79% 81%, 75% 96%, 61% 89%, 50% 100%, 39% 89%, 25% 96%, 21% 81%, 5% 79%, 10% 64%, 0% 50%, 10% 36%, 5% 21%, 21% 19%, 25% 4%, 39% 11%); }
.fl-burst span { display: block; font-size: calc(var(--size) * .14); color: var(--fl-ink); letter-spacing: .06em; }
.fl-burst strong { display: block; font-size: calc(var(--size) * .27); }

/* Red ribbon / ticker strip, as at the foot of the store's ads */
.fl-ribbon { background: var(--fl-red); color: #fff; font-family: var(--fl-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: clamp(.9rem, 1.6vw, 1.15rem); padding: .85rem 0; border-top: 4px solid var(--fl-yellow); border-bottom: 4px solid var(--fl-yellow); }
.fl-ribbon ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.6rem; }
.fl-ribbon li { display: inline-flex; align-items: center; }
.fl-ribbon li + li::before { content: "\2605"; color: var(--fl-yellow); font-size: .8em; margin-right: 1.6rem; }

/* Hero: the owner, as in his ads */
.fl-hero { position: relative; background: radial-gradient(120% 140% at 85% 0%, #157041 0%, var(--fl-green) 45%, var(--fl-green-deep) 100%); color: #fff; overflow: hidden; }
.fl-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 10px; background: repeating-linear-gradient(90deg, var(--fl-yellow) 0 40px, var(--fl-red) 40px 80px); }
.fl-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2.2rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.fl-hero__photo { position: relative; justify-self: center; width: min(100%, 420px); }
.fl-hero__frame { background: #fff; padding: 12px 12px 54px; box-shadow: var(--fl-shadow), 0 0 0 1px rgba(0,0,0,.05); transform: rotate(-2.5deg); }
.fl-hero__frame img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }
.fl-hero__caption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: var(--fl-script); font-weight: 700; font-size: 1.9rem; color: var(--fl-green-deep); }
.fl-hero__photo .fl-burst { top: -26px; right: -30px; }
.fl-hero__hi { font-family: var(--fl-script); font-weight: 700; color: var(--fl-yellow); font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; margin: 0 0 .5rem; transform: rotate(-2deg); transform-origin: left; }
.fl-hero__title { font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: .98; margin: 0 0 1rem; color: #fff; letter-spacing: .005em; }
.fl-hero__title span { display: block; }
.fl-hero__title .fl-hero__promise { color: var(--fl-yellow); }
.fl-hero__text { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.7; max-width: 36rem; margin: 0; color: rgba(255,255,255,.92); }
.fl-hero__text strong { color: var(--fl-yellow); font-weight: 700; }
.fl-hero__meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.fl-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); text-decoration: none; }
.fl-chip:hover { color: var(--fl-ink); background: var(--fl-yellow); }
.fl-chip i { color: var(--fl-yellow); }
.fl-chip:hover i { color: var(--fl-red); }

/* Price board: price tags from the store's ads and pages */
.fl-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; }
.fl-price-tag { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.4rem 1.2rem 1.2rem; background: #fff;
  border: 3px solid var(--fl-green); border-radius: 10px; text-decoration: none; color: var(--fl-text); box-shadow: 0 6px 0 var(--fl-green);
  transition: transform .15s ease, box-shadow .15s ease; }
.fl-price-tag:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--fl-green); color: var(--fl-text); text-decoration: none; }
.fl-price-tag::before { content: ""; position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--fl-cream); border: 3px solid var(--fl-green); }
.fl-price-tag__what { font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 1.1rem; color: var(--fl-green-deep); padding-right: 1.6rem; }
.fl-price-tag__from { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fl-red); }
.fl-price { font-family: var(--fl-serif); font-weight: 900; font-size: clamp(2.2rem, 3.4vw, 2.9rem); line-height: 1; color: var(--fl-red); }
.fl-price sup { font-size: .5em; top: -.8em; }
.fl-price--yellow { color: var(--fl-yellow); text-shadow: 2px 2px 0 var(--fl-green-dark), -1px -1px 0 var(--fl-green-dark), 1px -1px 0 var(--fl-green-dark), -1px 1px 0 var(--fl-green-dark); }
.fl-price-tag__note { font-size: .88rem; line-height: 1.5; color: var(--fl-muted); margin-top: .2rem; }
.fl-fineprint { margin-top: 1.2rem; font-size: .82rem; color: var(--fl-muted); text-align: center; }
.fl-section--green .fl-fineprint, .fl-section--deep .fl-fineprint { color: rgba(255,255,255,.75); }

/* Mattress lineup cards */
.fl-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.fl-mcard { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--fl-line);
  box-shadow: 0 8px 24px rgba(0,0,0,.06); text-decoration: none; color: var(--fl-text); transition: transform .2s ease, box-shadow .2s ease; }
.fl-mcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12); color: var(--fl-text); text-decoration: none; }
.fl-mcard__media { position: relative; background: #fff; aspect-ratio: 4 / 3; display: grid; place-items: center; border-bottom: 4px solid var(--fl-yellow); }
.fl-mcard__media img { width: 100%; height: 100%; object-fit: contain; padding: .4rem; }
.fl-mcard__flag { position: absolute; top: 12px; left: -6px; background: var(--fl-red); color: #fff; font-family: var(--fl-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: .82rem; padding: .3rem .8rem .3rem 1rem; box-shadow: 0 3px 0 var(--fl-red-deep); }
.fl-mcard__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.fl-mcard__name { font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1.1; color: var(--fl-green-deep); margin: 0; }
.fl-mcard__models { font-size: .9rem; font-weight: 600; color: var(--fl-red); margin: 0; }
.fl-mcard__text { font-size: .95rem; line-height: 1.65; margin: 0; flex: 1; }
.fl-mcard__cta { font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fl-green); font-size: .95rem; }
.fl-mcard__cta::after { content: " \2192"; }

/* Joe's quote / speech bubble */
.fl-quote { position: relative; background: #fff; color: var(--fl-ink); border-radius: 14px; padding: 1.4rem 1.6rem; box-shadow: var(--fl-shadow);
  font-size: 1.08rem; line-height: 1.65; border-left: 8px solid var(--fl-yellow); }
.fl-quote p { margin: 0 0 .6rem; }
.fl-quote cite { display: block; font-family: var(--fl-script); font-style: normal; font-weight: 700; font-size: 1.6rem; color: var(--fl-green); }

/* "Don't get gimmicked": the 70% off math */
.fl-math { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.fl-chalk { background: #173b2a; color: #f4f1e6; border: 12px solid #8a5a2b; border-radius: 8px; padding: 1.6rem 1.8rem; box-shadow: inset 0 0 40px rgba(0,0,0,.45), var(--fl-shadow);
  font-family: var(--fl-script); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.45; }
.fl-chalk p { margin: 0 0 .35rem; }
.fl-chalk .fl-chalk__big { color: var(--fl-yellow); font-size: 1.25em; }
.fl-chalk .fl-chalk__strike { text-decoration: line-through; text-decoration-color: var(--fl-red); text-decoration-thickness: 3px; }
.fl-nos { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; }
.fl-nos li { display: flex; align-items: center; gap: .55rem; font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; color: var(--fl-ink); }
.fl-nos li::before { content: "\2716"; display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--fl-red); color: #fff; font-size: .8rem; }
.fl-checks { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.fl-checks li { position: relative; padding-left: 2rem; line-height: 1.6; }
.fl-checks li::before { content: "\2714"; position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--fl-green); color: var(--fl-yellow); font-size: .75rem; }
.fl-section--green .fl-checks li::before, .fl-section--deep .fl-checks li::before { background: var(--fl-yellow); color: var(--fl-green-deep); }

/* Ads wall: the store's current ads, as posted */
.fl-ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.fl-ad { display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--fl-shadow); transition: transform .2s ease; }
.fl-ad:hover { transform: translateY(-4px) rotate(-.4deg); }
.fl-ad img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* Furniture / shop tiles */
.fl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.fl-tile { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--fl-green-dark); color: #fff; text-decoration: none; }
.fl-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fl-tile:hover img { transform: scale(1.05); }
.fl-tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem 1rem; background: linear-gradient(transparent, rgba(6,47,27,.92)); }
.fl-tile__name { display: block; font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; color: #fff; }
.fl-tile__price { display: inline-block; margin-top: .4rem; background: var(--fl-yellow); color: var(--fl-ink); font-family: var(--fl-display); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 4px; }
.fl-tile:hover .fl-tile__name { color: var(--fl-yellow); }

/* Brand strip */
.fl-brands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.fl-brand { display: grid; place-items: center; min-height: 104px; padding: 1rem; background: #fff; border: 2px solid var(--fl-line); border-radius: 10px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.fl-brand:hover { border-color: var(--fl-green); transform: translateY(-2px); }
.fl-brand img { max-height: 64px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.fl-brand span { font-family: var(--fl-serif); font-weight: 800; font-size: 1.35rem; color: var(--fl-green-deep); text-align: center; }
.fl-also { margin: 1.4rem 0 0; text-align: center; font-size: 1rem; line-height: 1.7; }
.fl-also strong { font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--fl-green-deep); }

/* Split feature: delivery, financing */
.fl-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.fl-panel { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; color: var(--fl-text); box-shadow: var(--fl-shadow); }
.fl-panel__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fl-cream); }
.fl-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.fl-panel__media--contain img { object-fit: contain; }
.fl-panel__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.fl-panel__title { font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; color: var(--fl-green-deep); margin: 0 0 .6rem; }
.fl-panel__body p { line-height: 1.7; margin: 0 0 .6rem; }
.fl-panel__body .fl-actions { margin-top: auto; padding-top: 1rem; }
.fl-panel--yellow { background: var(--fl-yellow); }
.fl-panel--green { background: var(--fl-green); color: #fff; }
.fl-panel--green .fl-panel__title { color: var(--fl-yellow); }

/* Reviews */
.fl-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.fl-review { background: #fff; border-radius: 12px; padding: 1.4rem 1.5rem; border-top: 6px solid var(--fl-yellow); box-shadow: 0 8px 24px rgba(0,0,0,.07); display: flex; flex-direction: column; gap: .6rem; }
.fl-review__stars { color: #f4b400; letter-spacing: .12em; font-size: 1.1rem; }
.fl-review__rec { font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; color: var(--fl-green); }
.fl-review__text { margin: 0; line-height: 1.7; font-size: .97rem; flex: 1; }
.fl-review__who { font-weight: 700; color: var(--fl-ink); margin: 0; }
.fl-review__meta { font-size: .8rem; color: var(--fl-muted); margin: 0; }

/* Visit */
.fl-visit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.4rem; }
.fl-map { border-radius: 14px; overflow: hidden; min-height: 380px; box-shadow: var(--fl-shadow); background: var(--fl-green-dark); }
.fl-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.fl-card-dark { background: var(--fl-green-dark); color: #fff; border-radius: 14px; padding: 1.8rem; box-shadow: var(--fl-shadow); }
.fl-card-dark h3 { font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; color: var(--fl-yellow); margin: 0 0 .4rem; }
.fl-card-dark a { color: #fff; }
.fl-card-dark a:hover { color: var(--fl-yellow); }
.fl-phone { display: inline-block; font-family: var(--fl-serif); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--fl-yellow) !important; text-decoration: none; margin: .4rem 0 .6rem; }
.fl-hours { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .97rem; }
.fl-hours th, .fl-hours td { padding: .38rem 0; border-bottom: 1px dashed rgba(255,255,255,.2); text-align: left; font-weight: 400; }
.fl-hours td { text-align: right; font-weight: 600; }
.fl-hours tr.is-today th, .fl-hours tr.is-today td { color: var(--fl-yellow); }
.fl-note { font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.85); margin: .6rem 0 0; }

/* Content pages: simple banner and prose */
.fl-banner { position: relative; background: var(--fl-green); color: #fff; padding: clamp(2.4rem, 5vw, 4rem) 0; overflow: hidden; }
.fl-banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: 8px; background: repeating-linear-gradient(90deg, var(--fl-yellow) 0 40px, var(--fl-red) 40px 80px); }
.fl-banner__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 2rem; align-items: center; }
.fl-banner__title { font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; margin: 0 0 .8rem; color: #fff; }
.fl-banner__title em { font-style: normal; color: var(--fl-yellow); }
.fl-banner__text { font-size: 1.1rem; line-height: 1.7; margin: 0; max-width: 40rem; color: rgba(255,255,255,.92); }
.fl-banner__joe { justify-self: end; position: relative; width: 200px; }
.fl-banner__joe img { width: 200px; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: 50%; border: 6px solid #fff; box-shadow: var(--fl-shadow); }
.fl-banner__joe .fl-burst { --size: 96px; top: -18px; left: -34px; }
.fl-prose { font-size: 1.05rem; line-height: 1.8; }
.fl-prose h2 { font-family: var(--fl-display); font-weight: 700; text-transform: uppercase; color: var(--fl-green-deep); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2rem 0 .7rem; }
.fl-prose h3 { font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; color: var(--fl-red); font-size: 1.3rem; margin: 1.5rem 0 .5rem; }
.fl-prose a { color: var(--fl-green); font-weight: 600; }
.fl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.fl-figure { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--fl-shadow); background: #fff; }
.fl-figure img { display: block; width: 100%; height: auto; }
.fl-figure figcaption { padding: .7rem 1rem; font-size: .88rem; color: var(--fl-muted); }
.fl-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.fl-toc a { display: inline-block; padding: .45rem .9rem; border-radius: 999px; background: var(--fl-yellow); color: var(--fl-ink); font-family: var(--fl-display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; text-decoration: none; }
.fl-toc a:hover { background: #fff; color: var(--fl-red); }
.fl-anchor { scroll-margin-top: 140px; }

@media (max-width: 1100px) {
  .fl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .fl-hero__grid, .fl-math, .fl-visit, .fl-two, .fl-banner__grid { grid-template-columns: 1fr; }
  .fl-hero__photo { width: min(78%, 360px); margin-top: 1.4rem; }
  .fl-lineup, .fl-reviews, .fl-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-banner__joe { justify-self: start; }
}
@media (max-width: 640px) {
  .fl-lineup, .fl-reviews, .fl-ads, .fl-split, .fl-nos { grid-template-columns: 1fr; }
  .fl-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-burst { --size: 104px; }
  .fl-hero__photo .fl-burst { right: -14px; top: -20px; }
  .fl-ribbon li + li::before { display: none; }
  .fl-btn { width: 100%; }
  .fl-banner__joe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-btn, .fl-price-tag, .fl-mcard, .fl-ad, .fl-tile img, .fl-brand { transition: none; }
}

/* Admin > Sliders banner text (home.css lays out the slider): the store's headline style, sized so a full sale
   headline fits over the photo instead of the earlier one-word display size. */
.fl-page .banner-section .slider-item__title { font-family: var(--fl-display) !important; font-size: clamp(2.2rem, 5.4vw, 5.2rem) !important;
  text-transform: uppercase; line-height: 1 !important; max-width: 1000px; text-shadow: 0 3px 18px rgba(0,0,0,.55); }
.fl-page .banner-section .slider-item__desc { display: inline-block; font-family: var(--fl-display) !important; font-size: clamp(.95rem, 1.6vw, 1.3rem) !important;
  font-weight: 600; letter-spacing: .08em; color: var(--fl-ink); background: var(--fl-yellow); padding: .35rem .9rem; border-radius: 4px; max-width: none !important; }
.fl-page .banner-section .slick-arrow { z-index: 4; }
/* A soft shade under the banner text so white headlines read on bright room photos. */
.fl-page .banner-section .slider-item::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(6, 47, 27, .5) 0%, rgba(6, 47, 27, .25) 55%, rgba(0, 0, 0, 0) 100%); }