/* =========================================================
   Figma Home Demo — standalone stylesheet
   Static, self-contained page based on the TaskLinko/PandaTasker
   Figma design. Not linked from the live site's CSS.
   ========================================================= */

:root {
  /* Colors (from Figma tokens) */
  --fh-navy: #1a2730;
  --fh-navy-muted: rgba(26, 39, 48, 0.6);
  --fh-navy-border: rgba(26, 39, 48, 0.1);
  --fh-navy-soft-bg: rgba(26, 39, 48, 0.05);
  --fh-gold: #c78f18;
  --fh-yellow: #ffc531;
  --fh-yellow-soft: rgba(255, 197, 49, 0.6);
  --fh-cream: #fff3e1;
  --fh-gray-bg: #f5f5f5;
  --fh-white: #ffffff;

  /* Typography */
  --fh-font: 'Noto Sans SC', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --fh-fs-hero: 46px;
  --fh-fs-h2: 36px;
  --fh-fs-card-title: 24px;
  --fh-fs-nav: 18px;
  --fh-fs-body: 16px;
  --fh-fs-eyebrow: 18px;
  --fh-fs-small: 14px;
  --fh-fs-xs: 12px;

  /* Spacing scale */
  --fh-space-1: 4px;
  --fh-space-2: 8px;
  --fh-space-3: 10px;
  --fh-space-4: 16px;
  --fh-space-5: 20px;
  --fh-space-6: 24px;
  --fh-space-8: 30px;
  --fh-space-10: 40px;
  --fh-space-14: 60px;

  /* Radii */
  --fh-radius-sm: 4px;
  --fh-radius-md: 8px;
  --fh-radius-lg: 24px;
  --fh-radius-xl: 32px;

  /* Shadows */
  --fh-shadow-yellow: 0 10px 10px rgba(255, 197, 49, 0.4);
  --fh-shadow-navy: 0 10px 10px rgba(26, 39, 48, 0.2);
  --fh-shadow-card: 0 4px 20px rgba(26, 39, 48, 0.08);

  --fh-container: 1400px;
}

/* Reset (scoped — this page does not load Bootstrap) */
.fh-page, .fh-page * , .fh-page *::before, .fh-page *::after {
  box-sizing: border-box;
}

.fh-page {
  margin: 0;
  font-family: var(--fh-font);
  color: var(--fh-navy);
  background: var(--fh-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.fh-page img { max-width: 100%; display: block; }
/* :where() zeroes the specificity of .fh-page here, so this reset never
   fights component color rules like .fh-btn-navy again — it was previously
   ".fh-page a" (class+type = higher specificity than a single class like
   .fh-btn-navy), which silently won and forced button text back to the
   inherited navy color regardless of what the button's own class set. */
:where(.fh-page) a { color: inherit; text-decoration: none; }
.fh-page ul { list-style: none; margin: 0; padding: 0; }
.fh-page button { font-family: inherit; cursor: pointer; }

/* Redirect flashes (e.g. logout's "You have been logged out") -- this page
   has no shared includes/scripts.php toast system, so these render as a
   simple dismissible banner stacked above the nav instead. */
.fh-flash-stack { position: relative; z-index: 200; }
.fh-flash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fh-space-4);
  padding: 12px var(--fh-space-5);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.fh-flash-success { background: #e7f6ec; color: #1e7a3c; }
.fh-flash-danger { background: #fdecec; color: #b3261e; }
.fh-flash-warning { background: #fff6e0; color: #8a6100; }
.fh-flash-info { background: #e8f1fd; color: #1a5cb8; }
.fh-flash-close {
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: .6;
  padding: 0;
}
.fh-flash-close:hover { opacity: 1; }

.fh-container {
  max-width: var(--fh-container);
  margin: 0 auto;
  padding: 0 var(--fh-space-5);
}
/* Figma spec: the experts row ("Frame 35") is 1500px wide, not the 1400px
   used everywhere else (hero/services/reviews) — a deliberately wider
   container just for this section, not the same one reused elsewhere. */
.fh-container-wide {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--fh-space-5);
}

/* ---------- Buttons ---------- */
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fh-space-3);
  padding: 10px var(--fh-space-8);
  border-radius: var(--fh-radius-md);
  font-weight: 700;
  font-size: var(--fh-fs-nav);
  border: none;
  white-space: nowrap;
}
.fh-btn-yellow { background: var(--fh-yellow); color: var(--fh-navy); box-shadow: var(--fh-shadow-yellow); }
.fh-btn-navy { background: var(--fh-navy); color: var(--fh-gold); box-shadow: var(--fh-shadow-navy); }
.fh-btn-outline { background: transparent; color: var(--fh-navy); border: 1px solid var(--fh-navy-border); }
.fh-btn img { width: 24px; height: 24px; }
/* The arrow's stroke color is hardcoded inside the SVG file (navy) — an
   <img>-referenced SVG can't be recolored via CSS `color`, so on the navy
   button it was invisible (navy arrow on navy background) for the same
   reason the text was. Using it as a CSS mask instead makes it always take
   on the button's own text color (currentColor) automatically. */
.fh-btn-arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('../images/figma-home/icon-arrow-right.svg');
  mask-image: url('../images/figma-home/icon-arrow-right.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---------- Nav ----------
   Height (76px) and logo height (46px) are taken from the live TaskLinko/
   PandaTasker homepage (includes/navbar.php + .site-main{padding-top:76px}
   and .brand-logo{height:46px} in assets/css/style.css), used here as the
   authoritative real-world sizing reference — the Figma canvas's own 90px
   nav number was a design-file artifact of its 1920px desktop frame, not a
   deployed, tested value. Colors/labels/layout stay true to the Figma design;
   only the vertical rhythm is calibrated against the real header. */
/* Slim country-selection strip, shared across every fh-header.php page so
   the picker is available site-wide, not just on the /au and /usa pages
   themselves. Sits above .fh-nav and scrolls away with the page (only
   .fh-nav itself is sticky). */
.fh-country-bar { background: var(--fh-navy); }
.fh-country-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--fh-space-3);
  min-height: 30px;
  flex-wrap: wrap;
}
.fh-country-bar-label { color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 700; }
.fh-country-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 1px 0;
  border-bottom: 1px solid transparent;
}
.fh-country-link:hover { color: var(--fh-yellow); }
.fh-country-link.is-active { color: var(--fh-yellow); border-bottom-color: var(--fh-yellow); }

.fh-nav {
  background: var(--fh-white);
  padding: 0 var(--fh-space-5);
  position: sticky;
  top: 0;
  z-index: 100;
}
.fh-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fh-space-5);
  min-height: 76px;
}
.fh-logo { display: flex; align-items: center; gap: var(--fh-space-2); flex-shrink: 0; }
.fh-logo-text { font-weight: 800; font-size: 20px; letter-spacing: 1px; }

.fh-logo-mark { height: auto; width: auto; max-height: 40px; max-width: 220px; flex-shrink: 0; }

/* Groups nav links + actions into one block (mirrors the Figma "Frame 1"
   layout: logo sits alone on the far left, links+actions stay together
   as one unit on the right, rather than three items evenly spread out).
   Kept to a single row (no wrap) like the real site's nav — the Figma
   canvas's 60px link gap/padding was sized for its 1920px desktop frame
   and doesn't fit a real laptop viewport, which is what caused the wrap. */
.fh-nav-group {
  display: flex;
  align-items: center;
  gap: var(--fh-space-6);
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.fh-nav-links {
  display: flex;
  align-items: center;
  gap: var(--fh-space-6);
  font-size: 16px; /* Bootstrap's navbar-nav .nav-link default (1rem), same as the real header */
  white-space: nowrap;
}
.fh-nav-links a { color: var(--fh-navy); letter-spacing: 0.2px; }
.fh-nav-links a.is-active { color: var(--fh-gold); font-weight: 800; }

.fh-nav-actions { display: flex; align-items: center; gap: var(--fh-space-5); flex-shrink: 0; }
/* Login/register/language buttons match the real navbar's btn-sm size (0.875rem/14px) */
.fh-nav-actions .fh-btn { font-size: 14px; }
.fh-lang-switch {
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
  font-size: 14px;
  background: none;
  border: none;
  color: var(--fh-navy);
}
/* Globe icon is 3 separate vector fragments from Figma, meant to be stacked
   at exact offsets rather than rendered as one flat image. Each fragment is
   a non-replaced <span> so it can size itself from the four insets; the
   <img> inside just fills that span at 100%/100% (browsers don't auto-size
   an absolutely-positioned <img> from opposing insets the way they do a div). */
.fh-globe-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.fh-globe-layer { position: absolute; display: block; }
.fh-globe-layer img { display: block; width: 100%; height: 100%; }
.fh-globe-circle { top: 8.33%; left: 8.33%; right: 8.33%; bottom: 8.33%; }
.fh-globe-arc1 { top: 16.67%; left: 25%; right: 25%; bottom: 45.83%; }
.fh-globe-arc2 { top: 54.17%; right: 8.33%; bottom: 8.33%; left: 54.17%; }
.fh-chevron { width: 14px; height: 14px; flex-shrink: 0; transform: rotate(-90deg); transition: transform .15s ease; }

.fh-lang-menu { position: relative; }
.fh-lang-menu.is-open .fh-chevron { transform: rotate(0deg); }
.fh-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
  padding: 6px;
  list-style: none;
  margin: 0;
  z-index: 40;
}
.fh-lang-menu.is-open .fh-lang-dropdown { display: block; }
.fh-lang-dropdown li a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--fh-navy);
  font-size: 14px;
  font-weight: 600;
}
.fh-lang-dropdown li a:hover { background: rgba(255, 197, 49, .16); }

.fh-inline-icon { width: 24px; height: 24px; flex-shrink: 0; }

.fh-nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.fh-nav-toggle span { display: block; height: 2px; background: var(--fh-navy); border-radius: 2px; }

/* ---------- Hero ---------- */
/* banner1.png is the real, flattened Figma hero banner (family photo +
   cream/blur background blobs already baked in, at the design's native
   1920x770 ratio) — it replaces the earlier CSS-gradient approximation. */
.fh-hero {
  position: relative;
  background: var(--fh-cream);
  overflow: hidden;
  aspect-ratio: 1920 / 770;
  min-height: 420px;
}
.fh-hero-banner-wrap { position: absolute; inset: 0; z-index: 0; }
.fh-hero-banner { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Keeps the text legible once narrower viewports crop the 1920x770 banner
   tighter (object-fit: cover pulls the family/blur content closer to
   center as the container gets taller-than-wide). */
.fh-hero-banner-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fh-cream) 0%, rgba(255, 243, 225, 0.75) 30%, transparent 60%);
}
.fh-hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  max-width: var(--fh-container);
  margin: 0 auto;
  padding: 0 var(--fh-space-5);
}
.fh-hero-copy { max-width: 640px; }
.fh-hero-eyebrow { color: var(--fh-gold); font-size: 22px; font-weight: 600; margin: 0 0 var(--fh-space-5); }
.fh-hero-title { font-size: var(--fh-fs-hero); line-height: 1.1; font-weight: 800; margin: 0 0 var(--fh-space-5); }
/* Chinese hero headline is longer than the English original ("全球华人的服务与
   机会平台") and wraps to 2 lines at the base hero font size -- scale it down
   and keep it on one line instead of letting it wrap. */
html[lang^="zh"] .fh-hero-title { font-size: 40px; white-space: nowrap; }
.fh-hero-desc { color: var(--fh-navy-muted); font-size: var(--fh-fs-body); margin: 0 0 var(--fh-space-6); max-width: 560px; }
.fh-hero-tagline { color: var(--fh-gold); font-size: 20px; font-weight: 700; margin: 0 0 var(--fh-space-4); }

/* Shared "type to search" location dropdown (assets/js/location-suggest.js) --
   replaces the native <input list><datalist> popup with a small styled list
   matching dashboard/provider-setup.php's own service-area suggestions. Used
   both here (wrapped to fill the hero pill) and on find-providers.php/
   find-freelancers.php's plain filter columns, see style.css for that variant. */
.location-suggest-wrap { position: relative; }
.fh-hero-search .location-suggest-wrap { flex: 1; min-width: 0; }
.location-suggest-list {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--fh-white);
  border: 1px solid var(--fh-navy-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(26, 39, 48, 0.16);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  text-align: left;
}
.location-suggest-list.is-open { display: block; }
.location-suggest-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--fh-navy); }
.location-suggest-item i { color: var(--fh-gold); font-size: 12px; }
.location-suggest-item:hover, .location-suggest-item.is-active { background: var(--fh-cream); color: var(--fh-gold); }

/* Hero location search -- an "inline pill" search bar between the subtitle
   and the CTA buttons, plus quick one-click city links underneath. */
.fh-hero-search {
  display: flex;
  align-items: stretch;
  background: var(--fh-white);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(26, 39, 48, 0.14);
  padding: 6px;
  max-width: 480px;
  margin-bottom: var(--fh-space-4);
}
.fh-hero-search-input {
  border: 0;
  background: transparent;
  padding: 12px var(--fh-space-5);
  font-size: 15px;
  width: 100%;
  color: var(--fh-navy);
  font-family: inherit;
}
.fh-hero-search-input:focus { outline: none; }
.fh-hero-search-btn {
  border: 0;
  background: var(--fh-yellow);
  color: var(--fh-navy);
  border-radius: 999px;
  padding: 0 var(--fh-space-6);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
  font-family: inherit;
}
.fh-hero-search-btn:hover { background: var(--fh-yellow-soft); }
.fh-hero-cities { display: flex; align-items: center; gap: var(--fh-space-3); flex-wrap: wrap; margin-bottom: var(--fh-space-6); }
.fh-hero-cities span { font-size: 13px; color: var(--fh-navy-muted); font-weight: 700; }
.fh-hero-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fh-white);
  border: 1px solid var(--fh-navy-border);
  color: var(--fh-navy);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.fh-hero-city-chip i { font-size: 11px; color: var(--fh-gold); }
.fh-hero-city-chip:hover { background: var(--fh-navy); color: var(--fh-yellow); border-color: var(--fh-navy); }
.fh-hero-city-chip:hover i { color: var(--fh-yellow); }

.fh-hero-actions { display: flex; gap: var(--fh-space-5); flex-wrap: wrap; }
/* Matches the real homepage's hero CTA buttons (.btn-lg, 1.25rem/20px) */
.fh-hero-actions .fh-btn { font-size: 20px; }

/* Sticky support widget -- fixed bottom-right, always visible while
   scrolling, instead of the original absolutely-positioned-inside-one-
   section badge. Same fixed placement/z-index pattern as the real
   .tl-messenger widget (assets/css/style.css) used for logged-in
   client/provider chats elsewhere in the app -- but the toggle itself
   keeps its original stacked bubble+label look exactly, just wrapped in
   a plain <button> instead of two <span>s so it's clickable. */
.fh-support-widget { position: fixed; right: 24px; bottom: 24px; z-index: 2100; font-family: inherit; }
.fh-support-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.fh-support-toggle:hover { transform: translateY(-2px); }
.fh-consult-bubble {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--fh-yellow);
  padding: 7px;
  display: flex;
  box-shadow: var(--fh-shadow-yellow);
}
.fh-consult-bubble img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fh-consult-label {
  background: var(--fh-yellow);
  color: var(--fh-navy);
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: var(--fh-radius-sm);
  white-space: nowrap;
}
.fh-support-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: min(340px, calc(100vw - 48px));
  border-radius: 22px;
  background: var(--fh-white);
  border: 1px solid var(--fh-navy-border);
  box-shadow: 0 24px 60px rgba(28, 22, 10, 0.22);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: 0.18s ease;
}
.fh-support-widget.is-open .fh-support-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.fh-support-panel-header {
  background: var(--fh-navy);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.fh-support-panel-header strong { display: block; font-size: 15px; }
.fh-support-panel-header span { display: block; font-size: 12.5px; opacity: 0.75; margin-top: 2px; }
.fh-support-panel-close { border: 0; background: none; color: #fff; opacity: 0.7; cursor: pointer; padding: 2px; }
.fh-support-panel-close:hover { opacity: 1; }
.fh-support-panel-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.fh-support-panel-body p { font-size: 13.5px; color: var(--fh-navy-muted); margin: 0; }
.fh-support-panel-note { margin-top: 4px !important; }
.fh-support-panel-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--fh-gray-bg);
  color: var(--fh-navy);
  font-weight: 700;
  font-size: 13.5px;
}
.fh-support-panel-link:hover { background: var(--fh-yellow); }

/* ---------- Quick icon strip ---------- */
.fh-strip {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  padding: var(--fh-space-10) 0;
  border-bottom: 1px solid var(--fh-navy-border);
}
.fh-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 112px; /* matches Figma spec: items are 266px with 112px column gaps in the 1400px row */
}
.fh-strip-item { display: flex; align-items: center; gap: var(--fh-space-3); text-decoration: none; color: inherit; transition: transform .15s ease, opacity .15s ease; }
.fh-strip-item:hover, .fh-strip-item:focus-visible { transform: translateY(-2px); opacity: .85; text-decoration: none; color: inherit; }
/* No background/border here on purpose — in the original Figma file this
   icon's backing rectangle is an explicitly hidden layer (a hidden="true"
   node in the design), so the real design shows the plain icon glyph only. */
.fh-strip-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fh-strip-icon img { width: 80px; height: 80px; object-fit: contain; }
.fh-strip-title { font-weight: 700; font-size: var(--fh-fs-card-title); margin: 0 0 var(--fh-space-2); }
.fh-strip-desc { color: var(--fh-navy-muted); font-size: var(--fh-fs-body); margin: 0; }

/* ---------- Category tabs ---------- */
/* Matches Figma: whole bar is 1920x60, the pin icon container is 80x60
   (filling the bar's full height) — same as the dropped location-icon.png. */
.fh-tabs-bar { background: var(--fh-gray-bg); border-bottom: 1px solid var(--fh-navy-border); }
.fh-tabs-inner { display: flex; align-items: center; justify-content: center; gap: var(--fh-space-6); min-height: 60px; flex-wrap: wrap; }
.fh-tabs-label { display: flex; align-items: center; gap: var(--fh-space-3); font-weight: 700; font-size: var(--fh-fs-body); white-space: nowrap; }
.fh-tabs-label .fh-pin { width: 80px; height: 60px; flex-shrink: 0; }
.fh-tabs-label .fh-pin img { width: 100%; height: 100%; object-fit: contain; }
.fh-tab-divider { width: 1px; height: 16px; background: var(--fh-navy-border); flex-shrink: 0; }
.fh-tabs { display: flex; align-items: center; gap: var(--fh-space-6); flex-wrap: wrap; }
.fh-tab {
  background: none;
  border: none;
  font-size: var(--fh-fs-body);
  color: var(--fh-gold);
  font-weight: 700;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}
.fh-tab:hover, .fh-tab:focus-visible { text-decoration: underline; color: var(--fh-navy); }

/* ---------- Services section ---------- */
.fh-section { padding: 80px var(--fh-space-5); }
.fh-section-head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.fh-eyebrow { color: var(--fh-gold); font-weight: 700; font-size: var(--fh-fs-eyebrow); margin: 0 0 var(--fh-space-2); }
.fh-section-title { font-size: var(--fh-fs-h2); font-weight: 800; margin: 0 0 var(--fh-space-5); }
.fh-section-desc { color: var(--fh-navy-muted); font-size: var(--fh-fs-body); margin: 0; }

.fh-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.fh-service-card {
  position: relative;
  border-radius: var(--fh-radius-lg);
  background-color: var(--fh-gray-bg);
  /* Single centered "PANDA TASKER" watermark behind the tint/photo — drop
     panda-grid-bg.png into assets/images/figma-home/ to activate it;
     a missing file just leaves the plain gray-bg color showing. */
  background-image: url('../images/figma-home/panda-grid-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Fixed (not min-) height -- longer category names/descriptions must
     truncate rather than grow the card, since this is a CSS grid row and a
     taller card would stretch every card in that row along with it. */
  height: 200px;
  padding: var(--fh-space-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.25s ease;
}
/* Hover state: card turns solid yellow and the two pill buttons swap
   colors (outline pill becomes solid navy, solid pill becomes white). */
.fh-service-card:hover { background-color: var(--fh-yellow); }
.fh-service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-tint, radial-gradient(circle at 80% 30%, rgba(255, 197, 49, 0.35), transparent 65%));
}
/* Real photo (if the file exists) sits above the tint, sized down and
   anchored bottom-right like the reference cards, rather than bled full
   width; onerror removes the wrapper so the tint+watermark alone show
   until the real export is dropped in.
   The sizing box is a non-replaced <span> so it reliably computes its size
   from the top/bottom/right insets — an absolutely positioned <img> with
   opposing insets and height:auto does NOT auto-size the same way a
   div/span does, which was the actual cause of the leftover gap (not the
   object-fit mode). The <img> inside just fills that span at 100%/100%. */
.fh-service-photo-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 56%;
  z-index: -1;
  display: block;
  overflow: hidden;
}
/* The photo's own opacity fades out on its left edge via a mask (rather than
   painting a solid-color overlay on top of it) -- a solid-color fade has to
   guess at matching the card's actual background, which is a colored tint
   gradient, not flat gray, and any mismatch shows up as a visible seam right
   at the wrap's clipping edge. Masking the image itself means the real tint
   underneath just shows through directly wherever the photo fades out, so
   there's nothing that can mismatch. */
.fh-service-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 30%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 30%, #000 60%);
}
/* Kept as-is at the client's request for the "屋顶修缮" card specifically —
   the original (pre-wrapper-fix) rule, left untouched. */
.fh-service-photo-legacy {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 10%;
  width: 46%;
  height: auto;
  z-index: -1;
  object-fit: cover;
  object-position: bottom right;
}
/* Stand-in for cards whose category has no Figma photo export yet (the 15
   main categories added alongside the category-hierarchy work) -- sits in
   the exact same image slot as .fh-service-photo-wrap (bottom-right,
   absolute), not stacked inline above the title, so the layout matches the
   photo cards instead of looking like a different card type. */
.fh-service-icon-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 10%;
  width: 46%;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fh-navy);
  font-size: 40px;
  opacity: 0.55;
}
.fh-service-card:hover .fh-service-icon-badge { opacity: 0.75; }
.fh-service-text { position: relative; z-index: 1; }
.fh-service-title {
  font-size: var(--fh-fs-card-title);
  font-weight: 700;
  margin: 0 0 var(--fh-space-2);
  max-width: 230px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fh-service-desc {
  font-size: var(--fh-fs-body);
  color: var(--fh-navy-muted);
  margin: 0;
  max-width: 230px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fh-service-links { display: flex; gap: var(--fh-space-3); position: relative; z-index: 1; }
.fh-service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fh-space-1);
  font-weight: 700;
  font-size: var(--fh-fs-small);
  padding: var(--fh-space-2) var(--fh-space-4);
  border-radius: 8px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.fh-service-link::after { content: '›'; font-size: 16px; }
.fh-service-link-outline { background: var(--fh-white); color: var(--fh-navy); border: 1px solid var(--fh-navy-border); }
.fh-service-link-solid { background: var(--fh-yellow); color: var(--fh-navy); }
.fh-service-card:hover .fh-service-link-outline { background: var(--fh-navy); color: var(--fh-yellow); border-color: var(--fh-navy); }
.fh-service-card:hover .fh-service-link-solid { background: var(--fh-white); color: var(--fh-navy); }

/* ---------- Experts section ---------- */
.fh-experts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fh-space-5);
  margin-bottom: var(--fh-space-10);
}
/* A single featured provider left-aligned in a 4-column grid reads as a
   layout mistake, not a deliberate one-card feature -- center it and cap
   its width to a normal card size instead of stretching it full-width. */
.fh-experts-grid--single {
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
}
.fh-expert-card {
  position: relative;
  border-radius: var(--fh-radius-lg);
  background-color: var(--fh-white);
  border: 1px solid var(--fh-navy-border);
  overflow: hidden;
  isolation: isolate;
}
/* No separate photo strip — a faint watermark sits behind the card body,
   same idea as the services-grid cards. Needs its own pseudo-element (not
   background-image directly on the card) since opacity on the card itself
   would fade the text/buttons too — only the watermark should be faint. */
.fh-expert-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../images/figma-home/pandatasker-provider.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 150px auto;
  opacity: 0.05;
}
.fh-expert-body { padding: var(--fh-space-5); position: relative; z-index: 1; }
.fh-expert-name-row { display: flex; align-items: center; gap: var(--fh-space-3); margin-bottom: var(--fh-space-2); }
.fh-expert-name { font-weight: 700; font-size: var(--fh-fs-body); margin: 0; }
/* Two-tone badge: a gray icon segment beside a dark text segment, both
   inside one rounded pill (overflow:hidden clips the segments' own square
   corners to the pill's rounded shape). */
.fh-role-tag {
  display: inline-flex;
  align-items: stretch;
  font-size: var(--fh-fs-xs);
  border-radius: var(--fh-radius-sm);
  height: 18px;
  overflow: hidden;
  margin-bottom: var(--fh-space-6);
}
.fh-role-tag img { width: 18px; height: 18px; }
.fh-role-icon-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #9a9a9a;
  padding: 0 5px;
}
.fh-role-text-seg {
  display: flex;
  align-items: center;
  background: var(--fh-navy);
  color: var(--fh-yellow);
  font-weight: 700;
  padding: 0 8px;
  white-space: nowrap;
}
/* Inline SVG with fill="currentColor" — guaranteed to render as a solid,
   single-color crown matching its segment's own color, with no dependency
   on an external file's own baked-in colors or mask/alpha support. */
.fh-role-icon { width: 14px; height: 11px; color: var(--fh-yellow); flex-shrink: 0; }
.fh-expert-sub { color: var(--fh-navy-muted); font-size: var(--fh-fs-body); margin: 0 0 var(--fh-space-4); }
.fh-expert-meta { display: flex; align-items: center; justify-content: space-between; }
.fh-expert-rating { display: flex; align-items: center; gap: var(--fh-space-2); font-size: var(--fh-fs-body); }
.fh-expert-rating .fh-star { width: 18px; height: 18px; color: var(--fh-yellow); }
.fh-expert-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fh-space-1);
  font-weight: 700;
  font-size: var(--fh-fs-small);
  padding: var(--fh-space-2) var(--fh-space-4);
  border: 1px solid var(--fh-navy-border);
  border-radius: 8px;
}
.fh-more-wrap { text-align: center; }

/* ---------- 3-step banner ----------
   Yellow/photo banner (bg-img.png) holds only the heading; the numbered
   steps sit below it on a plain white background — two visually distinct
   bands, not one solid navy section like the earlier CSS-only approximation. */
.fh-steps-section { background: var(--fh-white); }
.fh-steps-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--fh-yellow);
  background-image: linear-gradient(180deg, rgba(255, 197, 49, 0.55), rgba(255, 255, 255, 0.75)), url('../images/figma-home/bg-img.png');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply, normal;
  padding: 50px var(--fh-space-5) 60px;
}
/* Large faint "3" watermark on the banner, per the Figma spec (a giant
   low-opacity digit sitting behind the heading text). */
.fh-steps-watermark {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 200px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: rgba(199, 143, 24, 0.6);
  z-index: 0;
  pointer-events: none;
}
.fh-steps-banner .fh-section-head { position: relative; z-index: 1; }
/* The white steps card overlaps up into the banner by ~70px per spec,
   rather than sitting flush below it — a layered look, not two stacked
   bands with a hard seam. */
.fh-steps-card {
  position: relative;
  z-index: 2;
  margin-top: -70px;
  background: var(--fh-white);
  border-radius: var(--fh-radius-lg);
  box-shadow: var(--fh-shadow-card);
}
.fh-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fh-space-10);
  padding: 50px var(--fh-space-5);
}
.fh-step { text-align: center; color: var(--fh-navy); }
.fh-step-circle {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--fh-space-5);
  position: relative;
}
/* Soft radial-fade circle, with the bottom half fading out gradually — a
   mask gradient rather than a hard clip-path line, so there's no visible
   cut edge (icon itself still renders in full, unaffected by the mask). */
.fh-step-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fh-gray-bg) 55%, rgba(245, 245, 245, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 75%);
  mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 75%);
  z-index: -1;
}
.fh-step-circle .fh-step-icon { width: 48px; height: 48px; position: relative; z-index: 1; filter: drop-shadow(0 8px 6px rgba(26, 39, 48, 0.45)); }
/* Large faded numeral behind the icon — same treatment as the banner's "3"
   watermark, not a small solid badge. */
.fh-step-num {
  position: absolute;
  top: -22px;
  right: -36px;
  font-size: 64px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: rgba(255, 197, 49, 0.5);
  z-index: 0;
  pointer-events: none;
}
.fh-step-title { font-size: var(--fh-fs-card-title); font-weight: 700; margin: 0 0 var(--fh-space-2); }
.fh-step-desc { color: var(--fh-navy-muted); font-size: var(--fh-fs-body); margin: 0; }

/* ---------- Reviews ----------
   Auto-scrolling marquee: two rows scroll continuously in opposite
   directions, each row's group of cards duplicated back-to-back so the
   0% -> -50% translateX loop has no visible seam. Edges fade via mask
   rather than a hard clip. Pauses on hover and respects
   prefers-reduced-motion. */
.fh-reviews-section { background: var(--fh-white); padding: 80px 0; overflow: hidden; }
.fh-reviews-section .fh-section-head { padding: 0 var(--fh-space-5); }
.fh-reviews-marquee {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.fh-reviews-marquee + .fh-reviews-marquee { margin-top: var(--fh-space-6); }
.fh-reviews-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Slower than a typical marquee (reference used 40s) — reviews need to
     stay readable, not whip past. */
  animation: fh-reviews-scroll 90s linear infinite;
}
.fh-reviews-marquee.is-reverse .fh-reviews-track { animation-direction: reverse; }
.fh-reviews-marquee:hover .fh-reviews-track { animation-play-state: paused; }
.fh-reviews-group { display: flex; flex-shrink: 0; gap: 25px; padding-right: 25px; }
@keyframes fh-reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fh-reviews-track { animation-play-state: paused; }
}
.fh-review-card {
  flex: 0 0 clamp(340px, 29vw, 470px);
  background: var(--fh-white);
  border-radius: var(--fh-radius-lg);
  padding: var(--fh-space-8) var(--fh-space-6) var(--fh-space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--fh-shadow-card);
}
.fh-review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fh-space-5); }
.fh-review-date { color: var(--fh-navy-muted); font-size: var(--fh-fs-small); }
.fh-review-stars { display: flex; align-items: center; gap: var(--fh-space-2); }
/* Explicit width AND height (not width:auto) — this SVG has width="100%"
   height="100%" baked into its own <svg> tag, which stops browsers from
   reliably computing an "auto" dimension from its real 110:22 viewBox
   ratio, causing a stretched/squashed render (same root cause as the
   earlier globe-icon bug). */
.fh-review-stars img { width: 110px; height: 22px; }
.fh-review-score { color: var(--fh-yellow); font-weight: 700; font-size: var(--fh-fs-nav); }
.fh-review-text { font-size: var(--fh-fs-body); margin: 0 0 var(--fh-space-6); position: relative; z-index: 1; }
/* Plain text quotation mark instead of the decorative background image. */
.fh-review-card::after {
  content: '\201D';
  position: absolute;
  right: 12px;
  bottom: -33px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 160px;
  font-weight: 700;
  line-height: 1;
  color: var(--fh-gray-bg);
  pointer-events: none;
}
.fh-review-person { display: flex; align-items: center; gap: var(--fh-space-3); position: relative; z-index: 1; }
.fh-review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--fh-gray-bg);
}
.fh-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fh-review-name { font-weight: 700; font-size: var(--fh-fs-nav); margin: 0 0 var(--fh-space-2); }

/* ---------- CTA banner ----------
   Ported from a pixel-tuned reference for this exact section: total height
   440px, the yellow/photo background starts 60px from the section's own
   top (not full height), and the people photo is a plain absolutely
   positioned <img> spanning the section's full 440px height — so it
   naturally bleeds 60px above the background layer's top edge without
   any negative-margin trick. */
.fh-cta {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
  background: transparent;
}
.fh-cta-bg {
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f5c63e;
  background-image:
    linear-gradient(90deg,
      rgba(246, 185, 21, 0.9) 0%,
      rgba(249, 203, 63, 0.78) 27%,
      rgba(252, 223, 132, 0.59) 50%,
      rgba(255, 246, 216, 0.24) 75%,
      rgba(255, 255, 255, 0.1) 100%),
    url('../images/figma-home/swimming-pool-w-house.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.fh-cta-media {
  position: absolute;
  left: calc(50% - 600px);
  bottom: 0;
  z-index: 2;
  display: block;
  width: 745px;
  height: 440px;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  user-select: none;
}
.fh-cta-content {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 50%;
  z-index: 3;
  display: flex;
  width: 650px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.fh-cta-content-inner { width: 100%; }
.fh-cta-title {
  margin: 0 0 17px;
  color: #172630;
  font-size: 49px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1px;
  white-space: nowrap;
}
.fh-cta-desc {
  margin: 0 0 32px;
  color: #62676a;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.55;
  white-space: nowrap;
}
.fh-cta-btn {
  display: inline-flex;
  min-width: 167px;
  min-height: 51px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 26px;
  border: 0;
  border-radius: 8px;
  color: #172630;
  background: #ffbd22;
  box-shadow: 0 9px 22px rgba(183, 126, 0, 0.2);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.fh-cta-btn:hover, .fh-cta-btn:focus {
  color: #172630;
  background: #ffc83d;
  transform: translateY(-2px);
  box-shadow: 0 12px 27px rgba(183, 126, 0, 0.27);
}
.fh-cta-btn-arrow { font-size: 26px; font-weight: 400; line-height: 1; }

@media (max-width: 1399.98px) {
  .fh-cta-media { left: calc(50% - 575px); width: 680px; }
  .fh-cta-content { left: 48%; width: 610px; }
  .fh-cta-title { font-size: 43px; }
  .fh-cta-desc { font-size: 19px; }
}
@media (max-width: 1199.98px) {
  .fh-cta-media { left: -30px; width: 630px; }
  .fh-cta-content { right: 15px; left: auto; width: 56%; }
  .fh-cta-title { font-size: 37px; white-space: normal; }
  .fh-cta-desc { font-size: 17px; white-space: normal; }
}
@media (max-width: 767.98px) {
  .fh-cta { height: 650px; }
  /* background-size:100% 100% (desktop) stretches the background photo to
     exactly fit the box, ignoring its aspect ratio -- fine on desktop's
     wide/short box, but the mobile box is much taller/narrower so the same
     stretch badly warps the image. `cover` crops instead of distorting. */
  .fh-cta-bg { top: 0; background-size: cover; }
  .fh-cta-content { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: auto; padding: 44px 18px 0; }
  .fh-cta-title { margin-bottom: 12px; font-size: 31px; white-space: normal; }
  .fh-cta-desc { max-width: 390px; margin: 0 auto 23px; font-size: 15px; }
  .fh-cta-media { right: auto; bottom: 0; left: 50%; width: 650px; max-width: none; height: auto; transform: translateX(-50%); }
  /* Desktop keeps the Figma-spec yellow button; on mobile it sits on the
     same yellow gradient background with no contrast, so it's given a
     solid navy fill here only, matching the brand navy used elsewhere. */
  .fh-cta-btn {
    color: var(--fh-white);
    background: var(--fh-navy);
    box-shadow: 0 9px 22px rgba(23, 38, 48, 0.35);
  }
  .fh-cta-btn:hover, .fh-cta-btn:focus {
    color: var(--fh-white);
    background: #263845;
    box-shadow: 0 12px 27px rgba(23, 38, 48, 0.42);
  }
}
@media (max-width: 420px) {
  .fh-cta { height: 600px; }
  .fh-cta-title { font-size: 27px; }
  .fh-cta-media { width: 570px; }
}

/* ---------- Footer ---------- */
.fh-footer { background: var(--fh-navy); color: var(--fh-white); padding: 80px var(--fh-space-5) var(--fh-space-6); }
.fh-footer-top { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; margin-bottom: var(--fh-space-10); }
.fh-footer-brand { flex: 1 1 480px; max-width: 680px; }
.fh-footer-logo { display: flex; align-items: center; gap: var(--fh-space-2); margin-bottom: var(--fh-space-5); }
/* pandatasker-footer.png is a 1674x940 canvas with the visible wordmark
   (1427x713) inset at x=102, y=108 -- crop that transparent padding away so
   the mark itself fills a 60px-tall box, at 60/713 px per source pixel. */
.fh-footer-logo-mark { position: relative; overflow: hidden; flex-shrink: 0; width: 120px; height: 60px; }
.fh-footer-logo-mark img {
  position: absolute;
  max-width: none;
  width: 140.86px;
  height: 79.1px;
  left: -8.58px;
  top: -9.09px;
}
.fh-footer-desc { color: rgba(255, 255, 255, 0.6); font-size: var(--fh-fs-body); margin: 0 0 var(--fh-space-10); }
.fh-newsletter-label { color: var(--fh-yellow); font-weight: 700; font-size: var(--fh-fs-nav); margin: 0 0 var(--fh-space-3); }
.fh-newsletter-form { display: flex; gap: var(--fh-space-3); flex-wrap: wrap; }
.fh-newsletter-form input {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--fh-radius-md);
  padding: 15px;
  color: var(--fh-white);
  font-size: var(--fh-fs-body);
  width: 100%;
  max-width: 326px;
}
.fh-newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.6); }
.fh-newsletter-form button { flex-shrink: 0; }
.fh-newsletter-form button img { width: 24px; height: 24px; }

.fh-footer-cols { display: flex; gap: 100px; flex: 0 1 500px; justify-content: flex-end; flex-wrap: wrap; }
.fh-footer-col h4 { font-size: var(--fh-fs-body); font-weight: 700; letter-spacing: 0.2px; margin: 0 0 var(--fh-space-5); }
.fh-footer-col ul li { margin-bottom: var(--fh-space-3); }
.fh-footer-col ul a { color: rgba(255, 255, 255, 0.6); font-size: var(--fh-fs-body); }
.fh-footer-social { display: flex; gap: var(--fh-space-5); align-items: center; margin-top: var(--fh-space-5); }
.fh-footer-social a { width: 44px; height: 44px; border-radius: var(--fh-radius-md); background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; }
.fh-footer-social a img { width: 24px; height: 24px; }

.fh-footer-rule { border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 0 0 var(--fh-space-6); }
.fh-footer-bottom { display: flex; justify-content: space-between; gap: var(--fh-space-5); flex-wrap: wrap; color: rgba(255, 255, 255, 0.6); font-size: var(--fh-fs-body); }
.fh-footer-legal { display: flex; gap: var(--fh-space-2); }

/* ---------- Country ad placements ---------- */
/* Reserved advertisement spot, one per country/slot (render_country_ad_slot()
   in helpers.php) -- styled like a genuine sponsored banner (solid card,
   shadow, gold accent rail, CTA button) rather than an obvious placeholder
   box, even though the company behind it is a dummy until a real ad network
   or sponsor is wired into that function. The small "Advertisement" tag is
   what keeps it honest, same as a real ad would carry. */
.country-ad-slot {
  max-width: var(--fh-container);
  margin: 0 auto var(--fh-space-10);
  padding: var(--fh-space-5) var(--fh-space-6);
  border: 1px solid var(--fh-navy-border);
  border-left: 4px solid var(--fh-gold);
  border-radius: var(--fh-radius-md, 12px);
  background: var(--fh-white);
  box-shadow: 0 10px 26px rgba(26, 39, 48, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fh-space-5);
  min-height: 90px;
  text-align: left;
  position: relative;
  flex-wrap: wrap;
}
.country-ad-slot-tag {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fh-navy-muted);
  background: var(--fh-navy-soft-bg);
  border-radius: 999px;
  padding: 3px 10px;
}
.country-ad-slot-main { display: flex; align-items: center; gap: var(--fh-space-4); }
.country-ad-slot-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--fh-navy);
  color: var(--fh-yellow);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(26, 39, 48, 0.25);
}
.country-ad-slot-text { display: flex; flex-direction: column; gap: 3px; }
.country-ad-slot-company { color: var(--fh-navy); font-size: 16px; font-weight: 800; }
.country-ad-slot-label { color: var(--fh-navy-muted); font-size: 13px; font-weight: 600; }
.country-ad-slot-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fh-navy);
  color: var(--fh-gold);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.country-ad-slot-cta:hover { background: var(--fh-gold); color: var(--fh-navy); }
.country-ad-slot-cta .fh-btn-arrow { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .country-ad-slot { justify-content: flex-start; }
  .country-ad-slot-cta { width: 100%; justify-content: center; }
}

/* An ad with an uploaded image renders as a plain clickable banner instead
   of the logo+text card -- image supplies its own creative/branding. */
.country-ad-banner { max-width: var(--fh-container); margin: 0 auto var(--fh-space-10); position: relative; }
.country-ad-banner a { display: block; border-radius: var(--fh-radius-md, 12px); overflow: hidden; line-height: 0; }
.country-ad-banner img { width: 100%; height: auto; display: block; }
.country-ad-banner .country-ad-slot-tag { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* ---------- Ad popup (admin/advertisements.php, Type = Popup) ---------- */
.ad-popup-modal { position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: var(--fh-space-5); }
.ad-popup-modal:not([hidden]) { display: flex; }
.ad-popup-modal-backdrop { position: absolute; inset: 0; background: rgba(26, 39, 48, 0.55); }
.ad-popup-modal-dialog { position: relative; background: var(--fh-white); border-radius: 20px; max-width: 420px; width: 100%; overflow: hidden; box-shadow: 0 30px 70px rgba(26, 39, 48, 0.35); }
.ad-popup-modal-close { position: absolute; top: var(--fh-space-4); right: var(--fh-space-4); width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.85); color: var(--fh-navy); font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; }
.ad-popup-modal-media img { width: 100%; height: auto; display: block; }
.ad-popup-modal-icon { width: 64px; height: 64px; margin: var(--fh-space-6) auto 0; border-radius: 50%; background: var(--fh-cream); color: var(--fh-gold); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.ad-popup-modal-body { padding: var(--fh-space-6); text-align: center; }
.ad-popup-modal-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fh-navy-muted); background: var(--fh-navy-soft-bg); border-radius: 999px; padding: 3px 10px; margin-bottom: var(--fh-space-3); }
.ad-popup-modal-body h3 { font-size: 20px; font-weight: 800; margin: 0 0 var(--fh-space-2); color: var(--fh-navy); }
.ad-popup-modal-body p { color: var(--fh-navy-muted); font-size: 14px; margin: 0 0 var(--fh-space-5); }
.ad-popup-modal-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--fh-yellow); color: var(--fh-navy); font-weight: 700; font-size: 15px; padding: 12px; border-radius: var(--fh-radius-md, 8px); text-decoration: none; }
.ad-popup-modal-cta:hover { background: var(--fh-yellow-soft); }

/* ---------- Country notice banner (e.g. USA "coming soon") ---------- */
.fh-country-notice { background: var(--fh-cream); border-top: 1px solid var(--fh-navy-border); border-bottom: 1px solid var(--fh-navy-border); }
.fh-country-notice-inner {
  max-width: var(--fh-container);
  margin: 0 auto;
  padding: var(--fh-space-6) var(--fh-space-5);
  display: flex;
  align-items: center;
  gap: var(--fh-space-5);
  flex-wrap: wrap;
}
.fh-country-notice-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fh-white);
  color: var(--fh-gold);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fh-country-notice-title { font-weight: 800; font-size: 17px; color: var(--fh-navy); margin: 0 0 4px; }
.fh-country-notice-text { color: var(--fh-navy-muted); font-size: 14px; margin: 0; max-width: 520px; }
.fh-country-notice-cta { margin-left: auto; white-space: nowrap; }

/* ---------- Business partner promo modal ---------- */
.fh-promo-modal { position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: var(--fh-space-5); }
.fh-promo-modal:not([hidden]) { display: flex; }
.fh-promo-modal-backdrop { position: absolute; inset: 0; background: rgba(26, 39, 48, 0.55); }
.fh-promo-modal-dialog {
  position: relative;
  background: var(--fh-white);
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  padding: var(--fh-space-8) var(--fh-space-6) var(--fh-space-6);
  text-align: center;
  box-shadow: 0 30px 70px rgba(26, 39, 48, 0.35);
}
.fh-promo-modal-close {
  position: absolute;
  top: var(--fh-space-4);
  right: var(--fh-space-4);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--fh-navy-soft-bg);
  color: var(--fh-navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.fh-promo-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--fh-space-5);
  border-radius: 50%;
  background: var(--fh-cream);
  color: var(--fh-gold);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fh-promo-modal-eyebrow { color: var(--fh-gold); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--fh-space-2); }
.fh-promo-modal-dialog h3 { font-size: 22px; font-weight: 800; margin: 0 0 var(--fh-space-3); color: var(--fh-navy); }
.fh-promo-modal-body-text { color: var(--fh-navy-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 var(--fh-space-6); }
.fh-promo-modal-cta { width: 100%; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .fh-hero { aspect-ratio: 3 / 2; }
  .fh-hero-title { font-size: 36px; }
  html[lang^="zh"] .fh-hero-title { font-size: 30px; }
  .fh-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .fh-services-grid { grid-template-columns: repeat(2, 1fr); }
  .fh-experts-grid { grid-template-columns: repeat(2, 1fr); }
  .fh-steps-grid { grid-template-columns: 1fr; gap: var(--fh-space-10); }
  /* .fh-footer-brand/.fh-footer-cols carry flex-basis values (480px/500px)
     meant as WIDTH constraints for the desktop row layout. Once the axis
     flips to column here, those same basis values apply to HEIGHT instead,
     forcing oversized boxes and a big empty gap -- reset to auto/100% so
     each column just sizes to its own content. */
  .fh-footer-top { flex-direction: column; }
  .fh-footer-brand, .fh-footer-cols { flex: 1 1 auto; width: 100%; max-width: none; }
  .fh-footer-cols { justify-content: flex-start; }
}

@media (max-width: 992px) {
  /* 992px matches the real site's own navbar-expand-lg collapse point
     (Bootstrap "lg" breakpoint), so the mobile menu kicks in at the same
     viewport width as the live header instead of an arbitrary number. */
  /* The old rule only hid .fh-nav-links and left .fh-nav-actions (the
     always-shown Sign Up/Dashboard button) in the top bar -- at real phone
     widths that button doesn't shrink or wrap, so it visually overlapped
     and sat on top of the hamburger toggle and silently ate its clicks
     (confirmed with Playwright: the toggle was unclickable, "Sign Up
     intercepts pointer events"). Hiding the whole .fh-nav-group instead
     -- and folding nav-actions into the same dropdown as the links when
     open -- leaves only the logo + toggle in the collapsed bar, so
     nothing can ever overlap it. */
  .fh-nav-group { display: none; }
  .fh-nav-toggle { display: flex; }
  .fh-page.fh-nav-open .fh-nav-group {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--fh-white);
    flex-direction: column;
    align-items: stretch;
    gap: var(--fh-space-5);
    padding: var(--fh-space-5);
    box-shadow: 0 10px 20px rgba(26, 39, 48, 0.08);
  }
  .fh-page.fh-nav-open .fh-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fh-space-5);
    white-space: normal;
  }
  .fh-page.fh-nav-open .fh-nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--fh-space-5);
  }
  .fh-page.fh-nav-open .fh-lang-menu { align-self: flex-start; }
  .fh-page.fh-nav-open .fh-nav-actions .fh-btn { width: 100%; text-align: center; }
  .fh-hero-title { font-size: 28px; }
  html[lang^="zh"] .fh-hero-title { font-size: 24px; }
  .fh-hero-search { max-width: 100%; flex-direction: column; border-radius: 20px; }
  .fh-hero-search-btn { justify-content: center; padding: 12px; margin-top: 4px; }
  .fh-hero-actions { flex-direction: column; align-items: stretch; }
  .fh-hero-actions .fh-btn { width: 100%; }
}

@media (max-width: 640px) {
  .fh-hero { aspect-ratio: auto; height: 560px; min-height: 0; }
  .fh-hero-inner { align-items: flex-start; padding-top: var(--fh-space-10); }
  .fh-hero-banner-wrap::after { background: linear-gradient(180deg, var(--fh-cream) 40%, rgba(255, 243, 225, 0.6) 65%, transparent 100%); }
  .fh-support-widget { right: var(--fh-space-5); bottom: var(--fh-space-5); }
  .fh-section { padding: 50px var(--fh-space-5); }
  .fh-strip-inner { grid-template-columns: 1fr; }
  .fh-services-grid { grid-template-columns: 1fr; }
  .fh-experts-grid { grid-template-columns: 1fr; }
  .fh-cta-media { display: none; }
  .fh-review-card { flex-basis: 84vw; }
  .fh-reviews-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  .fh-reviews-track { animation-duration: 55s; }
  .fh-footer-cols { gap: var(--fh-space-10); }
  /* Desktop lays the pin/label, a divider, then the tab row out in one
     line. On mobile that line wraps, which strands the label/tabs divider
     alone at the end of the first row and leaves the tab pipes breaking
     mid-row wherever a tab wraps -- both read as stray floating lines.
     Stack label above tabs instead, drop every divider (gap alone
     separates things once centered/wrapped), and shrink the oversized
     pin icon to match the smaller stacked layout. */
  .fh-tabs-inner { flex-direction: column; gap: var(--fh-space-3); padding: var(--fh-space-3) 0; }
  .fh-tabs-inner > .fh-tab-divider { display: none; }
  .fh-tabs-label .fh-pin { width: 32px; height: 26px; }
  .fh-tabs { gap: var(--fh-space-4) var(--fh-space-5); justify-content: center; }
  .fh-tabs .fh-tab-divider { display: none; }
}