/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.2.1746718217
Updated: 2025-05-08 15:30:17

*/



/* =========================================
   Franchise Opportunities Home (Polished)
   Scope: .fo-home only
   Goal: wider, clearer section banding, better hierarchy,
         bigger “door” cards, structured steps, stronger CTA,
         more whitespace + softer borders + modern shadows
   ========================================= */

.fo-home{
  /* Layout */
  --fo-max: 1320px; /* ~1280–1360 target */
  --fo-gutter: clamp(18px, 3vw, 30px);

  /* Brand tokens */
  --fo-text: #0f172a;
  --fo-muted: rgba(15, 23, 42, .72);
  --fo-muted-2: rgba(15, 23, 42, .58);

  /* Surfaces */
  --fo-page: #F9FAFB;      /* subtle page background */
  --fo-surface: #ffffff;   /* cards/hero */
  --fo-band: #F6F7FB;      /* section band */

  /* Borders + radius */
  --fo-border: rgba(0,0,0,0.06); /* softer than default */
  --fo-border-strong: rgba(0,0,0,0.10);
  --fo-radius-lg: 22px;
  --fo-radius-md: 18px;
  --fo-radius-sm: 14px;

  /* Accent */
  --fo-accent: #2563eb;

  /* Shadows (subtle by default, stronger on hover) */
  --fo-shadow-sm: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.08);
  --fo-shadow-md: 0 12px 28px rgba(15,23,42,.12);
  --fo-shadow-lg: 0 18px 44px rgba(15,23,42,.18);

  color: var(--fo-text);
}

/* Page background + slight glow behind hero */
body.home{
  background:
    radial-gradient(900px 420px at 50% -140px, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(var(--fo-page), var(--fo-page));
}

/* Width + outer breathing room */
.fo-home.wp-block-group{
  max-width: 1280px !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fo-gutter) !important;
  padding-right: var(--fo-gutter) !important;
}

/* ---------------------------------
   Typography hierarchy
   --------------------------------- */

.fo-home h1{
  font-size: clamp(38px, 3.7vw, 58px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em;
  margin: 0 0 14px !important;
}

.fo-home h2{
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 12px !important;
}

.fo-home h3{
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px;
}

.fo-home p{
  color: var(--fo-muted);
  line-height: 1.65; /* more “pro” readability */
}

/* Small “kicker” */
.fo-home p[style*="text-transform:uppercase"]{
  color: rgba(15,23,42,.62) !important;
}

/* Disclaimer legibility */
.fo-home .fo-hero p[style*="opacity:.75"],
.fo-home .fo-hero p[style*="opacity: .75"]{
  opacity: 1 !important;
  color: rgba(15,23,42,.62) !important;
}

/* ---------------------------------
   Section spacing + banding
   Requires: fo-section fo-cats / fo-steps / fo-cta classes
   --------------------------------- */

.fo-home .fo-section{
  position: relative;
  padding: 34px 0; /* intentional whitespace */
  margin-top: 48px;
}

/* Soft stripe behind sections */
.fo-home .fo-section::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--fo-gutter));
  right: calc(-1 * var(--fo-gutter));
  top: 0;
  bottom: 0;
  border-radius: 26px;
  background: transparent;
  z-index: 0;
}

/* Banding pattern */
.fo-home .fo-cats::before{ background: var(--fo-band); }
.fo-home .fo-steps::before{ background: transparent; }

/* Keep section content above background stripe */
.fo-home .fo-section > *{
  position: relative;
  z-index: 1;
}

/* Create clearer separation between Categories and Steps */
.fo-home .fo-cats{ padding-bottom: 46px; }
.fo-home .fo-steps{ margin-top: 56px; }

/* ---------------------------------
   HERO polish (plus optional “anchor” slot)
   Requires: fo-hero class on hero group
   --------------------------------- */

.fo-home .fo-hero{
  background: linear-gradient(180deg, #f7f8fc, var(--fo-surface)) !important;
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius-lg) !important;
  box-shadow: var(--fo-shadow-md);
  padding: clamp(34px, 4.2vw, 56px) !important; /* more whitespace */
}

/* If you later add a right-side trust panel block inside hero,
   you can target it with class “fo-hero-anchor” */
.fo-home .fo-hero .fo-hero-anchor{
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius-md);
  background: rgba(255,255,255,.75);
  box-shadow: var(--fo-shadow-sm);
  padding: 18px;
}

/* ---------------------------------
   Columns + cards
   --------------------------------- */

.fo-home .wp-block-columns{
  gap: 20px !important;
}

/* Base card styling (softer borders, more padding) */
.fo-home .wp-block-columns .wp-block-group{
  background: var(--fo-surface);
  border: 1px solid var(--fo-border) !important;
  border-radius: var(--fo-radius-md) !important;
  padding: 26px !important;
  box-shadow: var(--fo-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover elevation (desktop) */
@media (hover:hover){
  .fo-home .wp-block-columns .wp-block-group:hover{
    transform: translateY(-3px);
    box-shadow: var(--fo-shadow-lg);
    border-color: rgba(37,99,235,.22) !important;
  }
}

/* ---------------------------------
   Category “door” cards
   Requires: fo-cats class on section wrapper
   --------------------------------- */

.fo-home .fo-cats .wp-block-columns .wp-block-group{
  padding: 30px !important;  /* bigger = more confident */
  min-height: 200px;
  justify-content: space-between;
}

/* Make title/desc/link feel more hierarchical */
.fo-home .fo-cats h3{
  font-size: 20px;
  margin-bottom: 12px;
}

.fo-home .fo-cats p{
  color: var(--fo-muted-2);
  font-size: 16px;
}

/* CTA link inside category cards: bold, not default blue */
.fo-home .fo-cats a{
  color: var(--fo-text);
  font-weight: 750;
  text-decoration: none;
}
.fo-home .fo-cats a:hover{
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
}

/* ---------------------------------
   “How it works” steps feel like steps
   Requires: fo-steps class + h3 data-step="1/2/3"
   --------------------------------- */

.fo-home .fo-steps .wp-block-columns .wp-block-group{
  background: linear-gradient(180deg, rgba(37,99,235,.04), var(--fo-surface));
}

.fo-home .fo-steps .wp-block-columns .wp-block-group{
  display: block !important;
}

/* Step heading badge */
.fo-home .fo-steps h3{
  display: flex;
  align-items: center;
  gap: 12px;
}

.fo-home .fo-steps h3::before{
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--fo-text);
  color: #fff;
  font-weight: 800;
  flex: 0 0 auto;
}

/* If no data-step is present, don’t show a broken badge */
.fo-home .fo-steps h3:not([data-step])::before{
  content: "";
  display: none;
}

/* ---------------------------------
   Links (global for homepage, but cleaner than default)
   --------------------------------- */

.fo-home a{
  color: var(--fo-accent);
  text-decoration: none;
}
.fo-home a:hover{
  text-decoration: underline;
  text-decoration-thickness: .10em;
  text-underline-offset: .18em;
}

/* ---------------------------------
   Buttons (stronger hierarchy)
   --------------------------------- */

.fo-home .wp-block-buttons{
  gap: 14px !important;
  margin-top: 16px;
}

.fo-home .wp-block-button__link{
  border-radius: var(--fo-radius-sm) !important;
  padding: 13px 18px !important;
  font-weight: 700;
  line-height: 1.1;
}

/* Primary (first button) */
.fo-home .wp-block-buttons .wp-block-button:first-child .wp-block-button__link{
  background: var(--fo-text) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.18);
}

/* Secondary outline */
.fo-home .wp-block-button.is-style-outline .wp-block-button__link{
  border: 1px solid var(--fo-border-strong) !important;
  color: var(--fo-text) !important;
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(6px);
}

/* ---------------------------------
   Bottom CTA “finish line”
   Requires: fo-cta class on CTA group
   --------------------------------- */

.fo-home .fo-cta{
  margin-top: 58px !important;
  border-radius: 26px !important;
  box-shadow: var(--fo-shadow-lg);
  padding: clamp(30px, 3.8vw, 48px) !important;
}

/* Make CTA text pop */
.fo-home .fo-cta h2{
  font-size: clamp(26px, 2.4vw, 36px) !important;
  margin-bottom: 10px !important;
}
.fo-home .fo-cta p{
  color: rgba(255,255,255,.88) !important;
}

/* CTA button treatment */
.fo-home .fo-cta .wp-block-buttons .wp-block-button:first-child .wp-block-button__link{
  background: #fff !important;
  color: var(--fo-text) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.fo-home .fo-cta .wp-block-button.is-style-outline .wp-block-button__link{
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #fff !important;
  background: transparent !important;
}

/* ---------------------------------
   Responsiveness
   --------------------------------- */

@media (max-width: 980px){
  .fo-home.wp-block-group{
    padding-left: var(--fo-gutter) !important;
    padding-right: var(--fo-gutter) !important;
  }
  .fo-home .fo-section::before{
    left: -12px;
    right: -12px;
  }
}

/* Reduce card padding slightly on small screens */
@media (max-width: 640px){
  .fo-home .wp-block-columns .wp-block-group{
    padding: 22px !important;
  }
  .fo-home .fo-hero{
    padding: 28px !important;
  }
}


/* =========================================
   Center ONLY headings (not body text)
   Scope: .fo-home
   ========================================= */

/* Center all headings */
.fo-home h1,
.fo-home h2,
.fo-home h3{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep paragraphs and other text left-aligned */
.fo-home p,
.fo-home li,
.fo-home a,
.fo-home .wp-block-buttons{
  text-align: left !important;
}

/* IMPORTANT: Card headings should be left-aligned (so cards still read well)
   If you want card headings centered too, delete this block. */
.fo-home .wp-block-columns h3{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Center section headings specifically (Explore/How it works/CTA) even if theme overrides */
.fo-home .fo-section > h2,
.fo-home .fo-hero h1{
  text-align: center !important;
}

/* Optional: make section header blocks sit visually centered above the grids */
.fo-home .fo-section h2{
  max-width: 30ch;
}

/* CTA header centering */
.fo-home .fo-cta h2{
  text-align: center !important;
}




/* ===== HERO ===== */
.fo-hero {
  background: linear-gradient(90deg, #f6f2e8 0%, #f6e6eb 100%);
  border: 1px solid #e7ddd7;
  border-radius: 20px;
  padding: 52px 56px;
  box-shadow: 0 10px 30px rgba(20, 35, 60, 0.06);
  overflow: hidden;
}

.fo-hero__cols {
  gap: 36px;
  align-items: center;
  margin-bottom: 0;
}

.fo-hero__content > *:last-child,
.fo-hero__media > *:last-child {
  margin-bottom: 0;
}

.fo-hero__eyebrow {
  display: inline-block;
  background: #f4cf2f;
  color: #222;
  font-size: 14px;
  line-height: 1;
  padding: 10px 18px;
  border-radius: 0;
  margin: 0 0 26px 0;
  font-weight: 500;
}

.fo-hero__title {
  font-size: 68px;
  line-height: 1.08;
  letter-spacing: -1.4px;
  font-weight: 700;
  color: #153e68;
  margin: 0 0 24px 0;
  max-width: 620px;
}

.fo-hero__text {
  font-size: 21px;
  line-height: 1.5;
  color: #263547;
  margin: 0 0 28px 0;
  max-width: 720px;
}

.fo-hero__buttons {
  gap: 16px;
  margin: 0 0 18px 0;
}

.fo-hero__buttons .wp-block-button {
  margin: 0;
}



/* SECONDARY BUTTON (clean outline) */
.fo-btn-secondary {
  border: 1.5px solid #163a5f;
  color: #163a5f;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  transition: all 0.2s ease;
}

.fo-btn-secondary:hover {
  background: rgba(22, 58, 95, 0.06);
}



.fo-btn-secondary .wp-block-button__link:hover {
  background: rgba(14, 165, 183, 0.06);
}

.fo-hero__trust {
  font-size: 14px;
  line-height: 1.5;
  color: #304255;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.fo-hero__disclaimer {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(38, 53, 71, 0.72);
  margin: 0;
  max-width: 620px;
}

.fo-hero__media {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.fo-hero__image {
  margin: 0;
  width: 100%;
  text-align: right;
}

.fo-hero__image img {
  width: 100%;
  max-width: 430px;
  height: auto;
  display: inline-block;
  object-fit: contain;
  border-radius: 0;
}

.fo-hero__caption {
  margin: 10px 8px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(21, 62, 104, 0.82);
  text-align: right;
  font-weight: 600;
}

/* ===== SECTION SPACING ===== */
.fo-section {
  margin-top: 52px;
}

/* ===== CARDS ===== */
.fo-card {
  border: 1px solid #d8dce2;
  border-radius: 16px;
  padding: 22px;
  background: #fff;
  height: 100%;
  box-shadow: 0 4px 14px rgba(20, 35, 60, 0.03);
}

.fo-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 1.2;
  color: #14243c;
}

.fo-card p {
  color: #415164;
  line-height: 1.55;
}

.fo-card a {
  color: #153e68;
  font-weight: 600;
  text-decoration: none;
}

.fo-card a:hover {
  text-decoration: underline;
}

/* ===== SECTION HEADINGS ===== */
.fo-section h2 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #14243c;
  margin-bottom: 18px;
}

/* ===== BOTTOM CTA ===== */
.fo-cta {
  background: #153e68;
  color: #fff;
  border-radius: 18px;
  padding: 34px 30px;
}

.fo-cta h2,
.fo-cta p {
  color: #fff;
}

.fo-btn-light .wp-block-button__link {
  background: #fff;
  color: #153e68;
  border: 1px solid #fff;
}

.fo-btn-light .wp-block-button__link:hover {
  background: #f5f7fa;
}

.fo-btn-outline-light .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}

.fo-btn-outline-light .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ===== FIX WORDPRESS COLUMNS / GROUPS ===== */
.fo-home .wp-block-columns {
  align-items: stretch;
}

.fo-home .wp-block-column {
  min-width: 0;
}

/* ===== MOBILE ===== */
@media (max-width: 1000px) {
  .fo-hero {
    padding: 40px 34px;
  }

  .fo-hero__title {
    font-size: 54px;
    max-width: none;
  }

  .fo-hero__text {
    font-size: 19px;
  }
}

@media (max-width: 781px) {
  .fo-hero {
    padding: 28px 22px;
    border-radius: 18px;
  }

  .fo-hero__cols {
    gap: 18px;
  }

  .fo-hero__eyebrow {
    margin-bottom: 18px;
    font-size: 13px;
    padding: 9px 14px;
  }

  .fo-hero__title {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
  }

  .fo-hero__text {
    font-size: 17px;
    margin-bottom: 22px;
  }

  .fo-hero__buttons {
    gap: 12px;
  }

  .fo-btn-primary .wp-block-button__link,
  .fo-btn-secondary .wp-block-button__link,
  .fo-btn-light .wp-block-button__link,
  .fo-btn-outline-light .wp-block-button__link {
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    font-size: 16px;
  }

  .fo-hero__media {
    align-items: center;
    text-align: center;
    margin-top: 8px;
  }

  .fo-hero__image {
    text-align: center;
  }

  .fo-hero__image img {
    max-width: 320px;
  }

  .fo-hero__caption {
    text-align: center;
    margin-right: 0;
  }

  .fo-section h2 {
    font-size: 28px;
  }

  .fo-card h3 {
    font-size: 22px;
  }
}

/* ===== FIX HERO WIDTH ===== */
.fo-home {
  max-width: 1280px;
  margin: 0 auto;
}

/* ===== FORCE TRUE 2-COLUMN HERO ===== */
.fo-hero__cols {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* LEFT SIDE */
.fo-hero__content {
  max-width: 600px;
}

/* FIX HEADLINE WRAPPING */
.fo-hero__title {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  max-width: 600px;
}

/* SUBTEXT WIDTH */
.fo-hero__text {
  max-width: 520px;
}

/* BUTTONS INLINE */
.fo-hero__buttons {
  display: flex;
  flex-direction: row;
  gap: 14px;
}

/* ===== IMAGE FIX ===== */
.fo-hero__media {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* BIGGER IMAGE */
.fo-hero__image img {
  max-width: 360px; /* was too small */
  width: 100%;
}

/* ===== CENTER ALIGN HERO BLOCK ===== */
.fo-hero {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== REMOVE WEIRD CENTERING ON TEXT ===== */
.fo-hero__content {
  text-align: left;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 900px) {
  .fo-hero__cols {
    flex-direction: column;
    text-align: center;
  }

  .fo-hero__content {
    max-width: 100%;
    text-align: center;
  }

  .fo-hero__title {
    font-size: 40px;
  }

  .fo-hero__buttons {
    flex-direction: column;
  }

  .fo-hero__media {
    margin-top: 20px;
  }
}

.fo-hero .wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px;
}

.fo-hero .wp-block-column {
  flex: none !important;
}

.fo-hero__title {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  max-width: none !important;
}

.fo-hero__media {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fo-hero__image img {
  max-width: 420px;
  width: 100%;
}

.fo-hero__buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px;
}

.fo-hero__content {
  text-align: left !important;
}

/* HERO */
.fo-hero {
  background: linear-gradient(90deg, #f6f2e8 0%, #f6e6eb 100%);
  border: 1px solid #e7ddd7;
  border-radius: 20px;
  padding: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* INNER FLEX */
.fo-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* LEFT */
.fo-hero__content {
  max-width: 600px;
}

.fo-hero__eyebrow {
  background: #f4cf2f;
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  margin-bottom: 20px;
}

.fo-hero__title {
  font-size: 60px;
  line-height: 1.05;
  color: #163a5f;
  margin-bottom: 20px;
}

.fo-hero__text {
  font-size: 18px;
  color: #374151;
  margin-bottom: 25px;
}

/* BUTTONS */
.fo-hero__buttons {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.fo-btn-primary {
  background: #163a5f;
  color: #ffffff !important;  /* THIS is the fix */
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

.fo-btn-secondary {
  border: 1.5px solid #0ea5b7;
  color: #0ea5b7;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

/* TRUST */
.fo-hero__trust {
  font-size: 14px;
  margin-bottom: 8px;
}

/* DISCLAIMER */
.fo-hero__disclaimer {
  font-size: 12px;
  opacity: 0.7;
}

/* RIGHT */
.fo-hero__media {
  text-align: center;
}

.fo-hero__media img {
  max-width: 360px;
  width: 100%;
}

.fo-hero__caption {
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.7;
}

/* MOBILE */
@media (max-width: 900px) {
  .fo-hero__inner {
    flex-direction: column;
    text-align: center;
  }

  .fo-hero__buttons {
    flex-direction: column;
  }

  .fo-hero__title {
    font-size: 36px;
  }
}

.fo-hero__eyebrow {
  background: #f4cf2f;
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  margin-bottom: 24px;

  /* KEY PART */
  margin-left: -60px;   /* match hero padding */
  padding-left: 60px;   /* keep text aligned */
}

/* ===== FINAL BUTTON FIX ===== */

.fo-btn-primary {
  background: #163a5f;
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(22, 58, 95, 0.25);
  transition: all 0.2s ease;
}

.fo-btn-primary:hover {
  background: #122f4d;
  transform: translateY(-1px);
}

.fo-btn-secondary {
  border: 1.5px solid #163a5f;
  color: #163a5f;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  transition: all 0.2s ease;
}

.fo-btn-secondary:hover {
  background: rgba(22, 58, 95, 0.06);
}

/* Make sure buttons align properly */
.fo-hero__buttons {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Target SECOND button specifically */
.fo-btn-secondary {
  position: relative;
}

/* Arrow */
.fo-btn-secondary::after {
  content: "←";
  position: absolute;
  right: -18px;   /* tighter to button */
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #163a5f;
  opacity: 0.7;

  animation: foArrowNudge 1.6s infinite ease-in-out;
}

/* Subtle nudge animation */
@keyframes foArrowNudge {
  0% { transform: translateY(-50%) translateX(0); opacity: 0.6; }
  50% { transform: translateY(-50%) translateX(4px); opacity: 1; }
  100% { transform: translateY(-50%) translateX(0); opacity: 0.6; }
}

/* ===== HERO FIX (override fo-home bleed) ===== */

.fo-home .city-hero h1,
.fo-home .city-hero p,
.fo-home .city-hero .article-byline {
  text-align: left !important;
}

.fo-home .city-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.fo-home .hero-copy {
  max-width: 600px;
}

/* ===== QUIZ WIDTH + SPACING FIX ===== */

.fo-home .hero-quiz {
  flex: 1;
  max-width: 540px;
  display: flex;
  justify-content: center;
}

#foq-root.foq {
  max-width: 520px !important;
  width: 100%;
  padding: 24px !important;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* ===== QUIZ TYPOGRAPHY + SPACING ===== */

#foq-root.foq h1,
#foq-root.foq h2 {
  font-size: 28px !important;
  line-height: 1.25 !important;
}

#foq-root.foq .foq-option {
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  border-radius: 10px;
}

/* ===== market constraints ===== */


.market-constraints-tool-wrap{
  margin: 28px 0 32px;
}

#market-constraints-tool{
  max-width: 1120px;
}

.market-constraints-panel{
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 22px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;

  /* ADD THESE HERE */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.market-constraints-panel::-webkit-scrollbar{
  width: 10px;
}

.market-constraints-panel::-webkit-scrollbar-track{
  background: transparent;
}

.market-constraints-panel::-webkit-scrollbar-thumb{
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid #ffffff;
}

.market-constraints-panel::-webkit-scrollbar-thumb:hover{
  background: #94a3b8;
}

/* Header */
.market-constraints-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.market-constraints-row-left,
.market-constraints-row-right{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.market-constraints-row-left{
  flex: 1 1 auto;
}

.market-constraints-row-right{
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.market-constraints-title{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.market-constraints-sub{
  font-size: 12px;
  line-height: 1.35;
  color: #607086;
  max-width: 620px;
  margin: 0;
}

.market-constraints-label{
  font-size: 11px;
  line-height: 1.2;
  color: #5e6b7d;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 2px;
}

.market-constraints-select{
  padding: 9px 12px;
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  min-width: 128px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Category pills */
.market-constraints-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.market-constraints-pill{
  appearance: none;
  border: 1px solid #d8e1eb;
  border-radius: 999px;
  padding: 8px 12px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.market-constraints-pill:hover{
  border-color: #c4d0de;
  background: #f1f5f9;
}

.market-constraints-pill.active{
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
}

/* Instruction copy */
.market-constraints-sub[style]{
  margin-top: 12px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #526173 !important;
}

/* Factor chips */
.market-constraints-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 58px;
  align-content: flex-start;
}

.market-constraints-chip{
  appearance: none;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  padding: 7px 10px 6px;
  background: #ffffff;
  color: #132033;
  font-size: 11px;
  line-height: 1.05;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  max-width: 260px;
  text-align: left;
}

.market-constraints-chip:hover{
  transform: translateY(-1px);
  border-color: #cad5e2;
  box-shadow: 0 5px 12px rgba(15,23,42,0.05);
}

.market-constraints-chip.active{
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
}

.market-constraints-chip small{
  display: block;
  font-size: 9px;
  line-height: 1.15;
  font-weight: 700;
  opacity: 0.78;
  margin-top: 3px;
  letter-spacing: 0;
}

/* Main layout */
.market-constraints-body{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}

/* Metric cards */
.market-constraints-metrics{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.market-constraints-metric{
  border: 1px solid #e3e9f1;
  border-radius: 16px;
  padding: 10px 11px;
  background: linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%);
  min-height: 96px;
}

.market-constraints-metric-k{
  font-size: 10px;
  line-height: 1.1;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  margin-bottom: 6px;
}

.market-constraints-metric-v{
  font-size: 18px;
  line-height: 1.08;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
}

.market-constraints-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  margin-top: 7px;
}

.market-constraints-badge.low{
  background: #dcfce7;
  color: #166534;
}

.market-constraints-badge.mid{
  background: #fef3c7;
  color: #92400e;
}

.market-constraints-badge.high{
  background: #fee2e2;
  color: #991b1b;
}

/* Stack */
.market-constraints-stack-wrap{
  border: 1px solid #e4ebf2;
  border-radius: 16px;
  padding: 10px 11px 9px;
  background: #ffffff;
  margin-top: 9px;
}

.market-constraints-stack{
  height: 12px;
  border-radius: 999px;
  background: #edf2f7;
  display: flex;
  overflow: hidden;
}

.market-constraints-seg1{ background: #0f172a; }
.market-constraints-seg2{ background: #475569; }
.market-constraints-seg3{ background: #94a3b8; }
.market-constraints-seg4{ background: #d7dee8; }

.market-constraints-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
  color: #64748b;
}

.market-constraints-legend span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.market-constraints-sw{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

/* Right panel */
.market-constraints-side{
  display: grid;
  gap: 8px;
}

.market-constraints-box{
  border: 1px solid #e4ebf2;
  border-radius: 16px;
  padding: 10px 11px;
  background: #ffffff;
  min-height: 118px;
}

.market-constraints-box h4{
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 800;
}

.market-constraints-risk-list{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.market-constraints-tag{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: #0f172a;
}

/* Footer note */
.market-constraints-foot{
  margin-top: 9px;
  font-size: 10px;
  line-height: 1.35;
  color: #718096;
}

/* Tablet */
@media (max-width: 980px){
  .market-constraints-panel{
    max-height: none;
    overflow: visible;
  }

  .market-constraints-row{
    flex-wrap: wrap;
  }

  .market-constraints-row-right{
    width: 100%;
    justify-content: flex-start;
  }

  .market-constraints-body{
    grid-template-columns: 1fr;
  }

  .market-constraints-box{
    min-height: auto;
  }
}

/* Mobile */
@media (max-width: 640px){
  .market-constraints-panel{
    padding: 12px;
    border-radius: 18px;
  }

  .market-constraints-title{
    font-size: 16px;
  }

  .market-constraints-sub{
    font-size: 11px;
    max-width: none;
  }

  .market-constraints-row-right{
    gap: 6px;
  }

  .market-constraints-label{
    width: 100%;
    padding-top: 0;
  }

  .market-constraints-select{
    width: 100%;
    min-width: 0;
  }

  .market-constraints-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-constraints-metric{
    min-height: 86px;
    padding: 10px;
  }

  .market-constraints-metric-v{
    font-size: 17px;
  }

  .market-constraints-pill{
    padding: 8px 11px;
    font-size: 10px;
  }

  .market-constraints-chip{
    max-width: 100%;
    font-size: 10px;
    padding: 7px 9px 6px;
  }

  .market-constraints-chip small{
    font-size: 9px;
  }

  .market-constraints-legend{
    gap: 8px 10px;
  }

  .market-constraints-tag{
    font-size: 10px;
    padding: 6px 8px;
  }

  .market-constraints-foot{
    white-space: normal;
  }
}


/* Hide mobile CTA everywhere by default */
.mobile-cta {
  display: none;
}

@media (max-width: 768px) {
  .mobile-cta {
    display: block;
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 9999;

    background: linear-gradient(135deg, #153e68, #1f4d7a);
    color: #fff;
    text-align: center;
    padding: 14px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;

    box-shadow: 0 12px 24px rgba(0,0,0,.2);
  }
}

.mobile-cta:hover {
  color: #fff;
  text-decoration: none;
}