/* ForeFront homepage hero (V6): centred copy over a real landscape, with a product showcase that loops through five states.
   Tablet (left), desktop (centre) and phone (right) stay on screen; their content changes per state.
   0 Get found (the client's website) -> 1 Leads -> 2 Sales -> 3 Operations -> 4 Results.
   Depth is CSS 3D only; motion lives in /assets/js/ff-hero.js. Every state element carries
   data-ffh-s="<state index>"; without JS (and for reduced motion) the Sales state (2) shows.
   Product sizes use --u (1% of the stage width) so each surface can scale on its own.

   Higgsfield slots (optional, drop-in):
   - landscape: --ffh-land-img poster on .ffh-hero (ff-hero-poster.webp, phones ff-hero-poster-1200.webp);
     desktop plays ff-hero-landscape-900.mp4 over it (ff-hero.js sets the src, so phones never download it);
     swap the file to change the environment (keep a calm upper centre and hills in the lower half)
   - website hero visual: replace /assets/hero/site-cleaning.jpg (portrait, ~4:5) */

:root {
  --ff-navy-950: #030A11;
  --ff-navy-925: #040C15;
  --ff-navy-900: #061322;
  --ff-navy-800: #0B1F33;
  --ff-side: #0F2236;
  --ff-ink: #0B1F33;
  --ff-ink-2: #3F4C5A;
  --ff-ink-3: #66737F;
  --ff-line: #E4EAEF;
  --ff-surface: #FFFFFF;
  --ff-surface-2: #F5F7FA;
  --ff-teal: #0299AE;
  --ff-teal-ink: #067486;
  --ff-teal-soft: #E3F4F6;
  --ff-cyan: #4FBDCB;
  --ff-cobalt: #3B6BE4;
  --ff-cobalt-ink: #2A55C4;
  --ff-cobalt-soft: #E8EEFC;
  --ff-green: #1E8A55;
  --ff-green-soft: #E3F4EA;
  --ff-mint: #D9F6E5;
  --ff-amber: #E8A33D;
  --ff-shadow: 3, 10, 17;
  --ff-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-site-green: #1F7A55;
  --ff-site-ink: #14332A;
}

/* Before the entrance runs, hide only what it reveals. ff-hero.js removes the class
   (and a timeout in the page head removes it anyway), so content is never stuck hidden. */
.ffh-pre [data-ffh-in] { opacity: 0; }

/* Before the script runs, the page already shows the state the loop starts on (Get found),
   so nothing switches when motion begins. Reduced motion holds on Sales, like ff-hero.js. */
.ffh-hero [data-ffh-s]:not([data-ffh-s~="0"]) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ffh-hero [data-ffh-s~="0"]:not([data-ffh-s~="2"]) { opacity: 0; visibility: hidden; }
  .ffh-hero [data-ffh-s~="2"] { opacity: 1; visibility: inherit; }
}
.ffh-hero [data-ffh-after], .ffh-hero [data-ffh-cursor], .ffh-hero [data-ffh-pop] { opacity: 0; visibility: hidden; }

/* ---------- section + landscape environment (centred composition) ---------- */
.ffh-hero {
  --ffh-pad: clamp(16px, 3vw, 56px);
  --ffh-land-img: url(/_v/08dy81ne69/assets/hero/ff-hero-poster.webp);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: min(100svh, 980px);
  padding: calc(70px + clamp(6px, 1.4vh, 20px)) var(--ffh-pad) clamp(10px, 1.4vh, 20px);
  background: #8CCBEA;
  color: var(--ff-ink);
}
.ffh-land { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ffh-land__img { position: absolute; inset: 0; background: var(--ffh-land-img) center bottom / cover no-repeat; }
/* deeper sky at the very top keeps the white navigation readable */
.ffh-land__top { position: absolute; left: 0; right: 0; top: 0; height: 24%; background: linear-gradient(180deg, rgba(14,74,146,0.64) 0%, rgba(16,80,152,0.26) 46%, rgba(18,86,160,0) 100%); }
/* a faint lift behind the headline, no visible shape */
.ffh-land__wash { position: absolute; left: 50%; top: 9%; width: 70%; height: 34%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,255,255,0.32), rgba(255,255,255,0) 100%); }
.ffh-land__haze { position: absolute; left: -10%; right: -10%; top: 50%; height: 16%; background: linear-gradient(180deg, rgba(246,251,253,0) 0%, rgba(246,251,253,0.32) 50%, rgba(246,251,253,0) 100%); }
/* the moving landscape: same framing as the poster, fades in once it is actually playing */
.ffh-land__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transition: opacity 900ms ease; }
/* soft shade along the very bottom so white logo wordmarks stay readable on the grass */
.ffh-land__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, rgba(20,60,24,0) 0%, rgba(20,60,24,0.32) 70%, rgba(16,48,20,0.45) 100%); }

.ffh-grid { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 28px); flex: 1; }

/* ---------- copy (centred, navy on the light sky) ---------- */
.ffh-copy { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ffh-h1 { font-size: clamp(36px, min(4vw, 6.2vh), 66px); line-height: 1; letter-spacing: -0.042em; font-weight: 500; color: #0B1F33; text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 0 36px rgba(255,255,255,0.45); }
.ffh-h1__row { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.14em; }
.ffh-h1__line { display: block; white-space: nowrap; }
.ffh-h1__line--accent { color: #0B6C86; }
.ffh-sub { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; font-weight: 500; color: #15304A; text-shadow: 0 0 18px rgba(255,255,255,0.6); margin-top: clamp(10px, 1.5vh, 18px); max-width: 60ch; text-wrap: balance; }
@media (min-width: 1024px) { .ffh-sub { max-width: none; white-space: nowrap; } }
.ffh-ctas { position: relative; display: flex; justify-content: center; gap: 12px; margin-top: clamp(12px, 2vh, 24px); flex-wrap: wrap; }
.ffh-cta { display: inline-flex !important; align-items: center; gap: 10px; transition: transform 200ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 200ms ease, background 200ms ease; }
.ffh-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.ffh-cta--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(6,30,70,0.55) !important; }
.ffh-cta:active { transform: translateY(1px) scale(0.99); }

/* ---------- stage: tablet left, desktop centre, phone right ---------- */
/* sized from the screen height too, so copy + devices + logos fit the first screen */
.ffh-stagewrap { position: relative; width: min(1180px, 100%, calc((100svh - 372px - min(128px, 12svh)) * 2.3)); min-width: min(640px, 100%); margin: 0 auto; container-type: inline-size; }
.ffh-stage { --u: 1cqw; --rim: 0.28cqw; position: relative; width: 100%; aspect-ratio: 2.3; perspective: 2200px; perspective-origin: 50% 20%; }
.ffh-3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.ffh-rig { transform: rotateX(3deg); }
.ffh-layer { position: absolute; --zk: 1; transform: translate3d(0, 0, calc(var(--z, 0) * var(--zk) * 1px)); }
.ffh-shadow { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(22,58,22,0.45), rgba(22,58,22,0.16) 55%, rgba(22,58,22,0) 100%); }

.ffh-ui { font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif; color: var(--ff-ink); font-size: calc(1.3 * var(--u)); line-height: 1.35; }
.ffh-ui b, .ffh-num { font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif; font-weight: 500; letter-spacing: -0.02em; }
.ffh-num { font-variant-numeric: tabular-nums; }
.ffh-muted { color: var(--ff-ink-3); }
.ffh-up { color: var(--ff-green); font-weight: 600; }
.ffh-ico { display: inline-block; width: calc(1.35 * var(--u)); height: calc(1.35 * var(--u)); vertical-align: -0.18em; flex-shrink: 0; }

/* ---------- desktop display (centre, main focus) ---------- */
/* inner screens were designed for a screen ~84% of the stage wide; --u keeps them in proportion */
.ffh-monitor { --u: 0.6cqw; left: 24.5%; top: 0%; width: 51%; }
.ffh-monitor__body {
  position: relative; padding: calc(1.05 * var(--u)); border-radius: calc(1.3 * var(--u));
  background: #07090C; /* black glass bezel inside a thin aluminium edge */
  box-shadow: 0 0 0 var(--rim) #C8CDD2, 0 0 0 calc(var(--rim) + 1px) rgba(110,118,126,0.55), inset 0 0 0 1px rgba(255,255,255,0.08), 0 0.4cqw 0.5cqw rgba(24,48,34,0.16), 0 2.4cqw 4cqw -1.6cqw rgba(24,56,40,0.48);
}
.ffh-monitor__screen { position: relative; aspect-ratio: 16 / 10; border-radius: calc(0.32 * var(--u)); overflow: hidden; background: var(--ff-surface-2); }
.ffh-monitor__screen::after { /* faint glass reflection */
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 22%, rgba(255,255,255,0) 38%);
}
/* a slim flat neck and a thin plate foot, like a modern studio display */
.ffh-monitor__neck {
  position: absolute; left: 42.5%; width: 15%; top: calc(100% + var(--rim)); height: calc(10 * var(--u));
  background:
    linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 12%, rgba(255,255,255,0.22) 50%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.16) 100%),
    linear-gradient(180deg, #9AA1A8 0%, #CBD0D5 14%, #E3E6E9 55%, #D2D6DA 100%);
  box-shadow: inset 0 calc(1.6 * var(--u)) calc(1.4 * var(--u)) calc(-1.1 * var(--u)) rgba(10,20,30,0.5);
}
.ffh-monitor__foot {
  position: absolute; left: 32%; width: 36%; top: calc(100% + var(--rim) + 9.7 * var(--u)); height: calc(1.7 * var(--u));
  clip-path: polygon(6% 0, 94% 0, 100% 62%, 99.4% 100%, 0.6% 100%, 0 62%);
  background: linear-gradient(180deg, #EEF0F2 0%, #DADEE1 58%, #AEB5BC 64%, #8D959D 100%);
}
.ffh-face { position: absolute; inset: 0; display: flex; flex-direction: column; background: #FFFFFF; }

/* ---------- tablet (left, supporting) ---------- */
.ffh-tablet { --u: 0.84cqw; left: 6%; top: 47%; width: 26%; aspect-ratio: 1.42; }
.ffh-tablet__frame {
  position: absolute; inset: 0; padding: calc(0.85 * var(--u)); border-radius: calc(1.6 * var(--u));
  background: #07090C;
  box-shadow: 0 0 0 var(--rim) #C8CDD2, 0 0 0 calc(var(--rim) + 1px) rgba(110,118,126,0.55), inset 0 0 0 1px rgba(255,255,255,0.08), 0 0.4cqw 0.5cqw rgba(24,48,34,0.18), 0 1.9cqw 3cqw -1.2cqw rgba(24,56,40,0.5);
}
.ffh-tablet__frame::after { /* front camera on the long edge */
  content: ""; position: absolute; left: 50%; top: calc(0.18 * var(--u)); width: calc(0.26 * var(--u)); height: calc(0.26 * var(--u)); margin-left: calc(-0.13 * var(--u)); border-radius: 50%; background: #1A2430; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.ffh-tablet__screen { position: relative; width: 100%; height: 100%; border-radius: calc(1 * var(--u)); overflow: hidden; background: #FFFFFF; font-family: var(--ff-sys); }
.ffh-tablet__screen::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 24%, rgba(255,255,255,0) 40%); }
.ffh-tablet__status { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; padding: calc(0.45 * var(--u)) calc(1.1 * var(--u)) 0; font-size: calc(0.75 * var(--u)); font-weight: 600; color: #1D2939; }
.ffh-tablet__status svg { height: calc(0.7 * var(--u)); width: auto; display: block; }
.ffh-tscreen { position: absolute; inset: 0; padding-top: calc(1.6 * var(--u)); display: flex; flex-direction: column; font-size: calc(0.95 * var(--u)); background: #FFFFFF; }
.ffh-tscreen b { font-family: var(--ff-sys); font-weight: 600; letter-spacing: -0.01em; }
.ffh-tbar { display: flex; align-items: center; justify-content: space-between; padding: calc(0.5 * var(--u)) calc(1.1 * var(--u)); border-bottom: 1px solid var(--ff-line); font-size: calc(1.05 * var(--u)); }
.ffh-tpad { flex: 1; min-height: 0; padding: calc(0.8 * var(--u)) calc(1.1 * var(--u)); display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); background: var(--ff-surface-2); }
.ffh-tpad .ffh-tile { padding: calc(0.6 * var(--u)) calc(0.8 * var(--u)); border-radius: calc(0.6 * var(--u)); }
.ffh-tpad .ffh-label { font-size: calc(0.8 * var(--u)); }
.ffh-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(0.6 * var(--u)); }
.ffh-tlines { display: flex; flex-direction: column; gap: calc(0.35 * var(--u)); font-size: calc(0.88 * var(--u)); }
.ffh-tlines .ffh-row { padding: calc(0.2 * var(--u)) calc(0.3 * var(--u)); margin: 0 calc(-0.3 * var(--u)); border-radius: calc(0.3 * var(--u)); }
.ffh-tlines__total { border-top: 1px solid var(--ff-line); padding-top: calc(0.45 * var(--u)) !important; margin-top: calc(0.2 * var(--u)) !important; }
.ffh-tscreen .ffh-row { display: flex; align-items: center; justify-content: space-between; gap: calc(0.5 * var(--u)); }
.ffh-tscreen .ffh-pill { font-size: calc(0.78 * var(--u)); }
.ffh-tscreen .ffh-avatar { width: calc(2 * var(--u)); height: calc(2 * var(--u)); font-size: calc(0.75 * var(--u)); }
/* tablet 0: Google results */
.ffh-gsearch__top { display: flex; align-items: center; gap: calc(0.8 * var(--u)); padding: calc(0.6 * var(--u)) calc(1.1 * var(--u)) calc(0.4 * var(--u)); }
.ffh-glogo { font-family: 'Product Sans', var(--ff-sys); font-size: calc(1.5 * var(--u)); letter-spacing: -0.02em !important; font-weight: 600; }
.ffh-gsearch__box { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: calc(0.35 * var(--u)) calc(0.8 * var(--u)); border-radius: 99px; box-shadow: 0 1px 4px rgba(32,33,36,0.2); font-size: calc(0.9 * var(--u)); color: #202124; }
.ffh-gsearch__box svg { color: #4285F4; }
.ffh-gsearch__tabs { display: flex; gap: calc(1.1 * var(--u)); padding: 0 calc(1.1 * var(--u)); font-size: calc(0.8 * var(--u)); color: #5F6368; border-bottom: 1px solid #ECEDEF; }
.ffh-gsearch__tabs span { padding-bottom: calc(0.35 * var(--u)); }
.ffh-gsearch__tabs .is-on { color: #1A73E8; box-shadow: inset 0 -2px 0 #1A73E8; }
.ffh-gsearch__map { position: relative; height: calc(5.6 * var(--u)); margin: calc(0.6 * var(--u)) calc(1.1 * var(--u)) 0; border-radius: calc(0.6 * var(--u)); overflow: hidden; }
.ffh-gsearch__map img { position: absolute; left: -20%; top: -60%; width: 140%; height: auto; max-width: none; filter: contrast(1.1) saturate(1.15); }
.ffh-gsearch__map i { position: absolute; width: calc(0.9 * var(--u)); height: calc(0.9 * var(--u)); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #EA4335; box-shadow: 0 0 0 1.5px #FFFFFF; }
/* tablet 3: week schedule */

/* ---------- the client's website (state 0) ---------- */
.ffh-browser { position: relative; z-index: 3; display: flex; align-items: center; gap: calc(1 * var(--u)); padding: calc(0.75 * var(--u)) calc(1.3 * var(--u)); background: #EDF0F3; border-bottom: 1px solid #DCE2E7; flex-shrink: 0; }
.ffh-browser__dots { display: flex; gap: calc(0.45 * var(--u)); }
.ffh-browser__dots i { width: calc(0.8 * var(--u)); height: calc(0.8 * var(--u)); border-radius: 50%; background: #C8D0D7; }
.ffh-browser__url { flex: 1; max-width: 44%; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: calc(0.45 * var(--u)); padding: calc(0.35 * var(--u)) calc(1 * var(--u)); border-radius: 99px; background: #FFFFFF; font-family: var(--ff-sys); font-size: calc(1 * var(--u)); color: #3F4C5A; }
.ffh-site { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #FFFFFF; font-family: var(--ff-sys); color: #23332D; }
.ffh-site b { font-family: var(--ff-sys); font-weight: 700; letter-spacing: -0.01em; }
.ffh-site__nav { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: calc(1.5 * var(--u)); padding: calc(1 * var(--u)) calc(2.2 * var(--u)); font-size: calc(1.05 * var(--u)); color: #4B5C55; background: rgba(255,255,255,0.94); box-shadow: 0 1px 0 #EEF1EF; }
.ffh-site__logo { display: flex; align-items: center; gap: calc(0.55 * var(--u)); margin-right: auto; color: var(--ff-site-ink); font-size: calc(1.3 * var(--u)); white-space: nowrap; }
.ffh-site__logo > span { width: calc(2.1 * var(--u)); height: calc(2.1 * var(--u)); border-radius: calc(0.65 * var(--u)); background: var(--ff-site-green); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.ffh-site__logo svg { width: 62%; height: 62%; }
.ffh-site__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(0.45 * var(--u)); padding: calc(0.65 * var(--u)) calc(1.25 * var(--u)); border-radius: 99px; background: var(--ff-site-green); color: #FFFFFF; font-weight: 600; white-space: nowrap; }
.ffh-site__btn--ghost { background: #FFFFFF; color: var(--ff-site-ink); box-shadow: inset 0 0 0 1px #D3DDD7; }
.ffh-site__page { position: absolute; left: 0; right: 0; top: 0; padding-top: calc(4.2 * var(--u)); will-change: transform; }
.ffh-site__hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: calc(2 * var(--u)); align-items: center; padding: calc(2.6 * var(--u)) calc(2.2 * var(--u)) calc(2.4 * var(--u)); background: linear-gradient(180deg, #F3F8F4 0%, #FFFFFF 100%); }
.ffh-site__copy { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ffh-site__rating { display: inline-flex; align-items: center; gap: calc(0.45 * var(--u)); align-self: flex-start; padding: calc(0.35 * var(--u)) calc(0.85 * var(--u)) calc(0.35 * var(--u)) calc(0.45 * var(--u)); border-radius: 99px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E9E5, 0 calc(0.4 * var(--u)) calc(1 * var(--u)) rgba(16,40,30,0.06); font-size: calc(1 * var(--u)); color: #4B5C55; }
.ffh-stars { color: #F5A623; letter-spacing: 0.04em; }
.ffh-site__h { font-size: calc(3.1 * var(--u)); line-height: 1.06; letter-spacing: -0.03em !important; color: var(--ff-site-ink); }
.ffh-site__h em { font-style: normal; color: var(--ff-site-green); }
.ffh-site__p { font-size: calc(1.15 * var(--u)); line-height: 1.45; color: #4B5C55; max-width: 34ch; }
.ffh-site__ctas { display: flex; gap: calc(0.6 * var(--u)); font-size: calc(1.1 * var(--u)); }
.ffh-site__photo { position: relative; aspect-ratio: 4 / 4.4; border-radius: calc(1.6 * var(--u)); overflow: hidden; box-shadow: 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(20,51,42,0.18); }
.ffh-site__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.ffh-site__review { position: absolute; left: -12%; bottom: 8%; width: 70%; padding: calc(0.8 * var(--u)) calc(1 * var(--u)); border-radius: calc(1 * var(--u)); background: #FFFFFF; box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) rgba(20,51,42,0.2); font-size: calc(0.95 * var(--u)); line-height: 1.35; }
.ffh-site__trustbar { display: flex; justify-content: space-between; gap: calc(1 * var(--u)); padding: calc(1.2 * var(--u)) calc(2.2 * var(--u)); border-top: 1px solid #EDF1EE; border-bottom: 1px solid #EDF1EE; font-size: calc(0.98 * var(--u)); color: #4B5C55; }
.ffh-site__trustbar span { display: inline-flex; align-items: center; gap: calc(0.4 * var(--u)); white-space: nowrap; }
.ffh-site__trustbar svg { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); color: var(--ff-site-green); }
.ffh-site__section { padding: calc(2.2 * var(--u)) calc(2.2 * var(--u)) 0; }
.ffh-site__eyebrow { font-size: calc(0.95 * var(--u)); color: var(--ff-site-green); font-weight: 600; }
.ffh-site__h2 { display: block; font-size: calc(2 * var(--u)); color: var(--ff-site-ink); margin: calc(0.3 * var(--u)) 0 calc(1.2 * var(--u)); }
.ffh-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1 * var(--u)); }
.ffh-site__card { padding: calc(1.2 * var(--u)); border-radius: calc(1.2 * var(--u)); background: #F6FAF7; font-size: calc(0.98 * var(--u)); color: #4B5C55; line-height: 1.4; }
.ffh-site__card b { display: block; font-size: calc(1.2 * var(--u)); color: var(--ff-site-ink); margin: calc(0.6 * var(--u)) 0 calc(0.2 * var(--u)); }
.ffh-site__card i { display: flex; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: calc(0.7 * var(--u)); background: #FFFFFF; color: var(--ff-site-green); align-items: center; justify-content: center; box-shadow: 0 0 0 1px #E3EBE5; }
.ffh-site__card i svg { width: 55%; height: 55%; }
.ffh-site__price { display: block; margin-top: calc(0.6 * var(--u)); color: var(--ff-site-ink); font-weight: 600; }
.ffh-site__reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1 * var(--u)); }
.ffh-site__rev { padding: calc(1.1 * var(--u)); border-radius: calc(1.1 * var(--u)); border: 1px solid #E6ECE8; font-size: calc(0.98 * var(--u)); line-height: 1.4; color: #4B5C55; }
.ffh-site__rev b { color: var(--ff-site-ink); font-size: calc(1 * var(--u)); }
.ffh-site__band { margin: calc(2.2 * var(--u)) calc(2.2 * var(--u)) calc(2.2 * var(--u)); padding: calc(1.8 * var(--u)); border-radius: calc(1.4 * var(--u)); background: linear-gradient(120deg, #1F7A55, #2B9468); color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--u)); }
.ffh-site__band b { font-size: calc(1.6 * var(--u)); color: #FFFFFF; }
.ffh-site__band .ffh-site__btn { background: #FFFFFF; color: var(--ff-site-green); }
.ffh-cursor { position: absolute; z-index: 5; width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); pointer-events: none; filter: drop-shadow(0 calc(0.3 * var(--u)) calc(0.5 * var(--u)) rgba(0,0,0,0.35)); }

/* ---------- the ForeFront app shell (states 1-4) ---------- */
.ffh-shell { display: flex; height: 100%; }
.ffh-side { width: 17%; flex-shrink: 0; background: var(--ff-side); color: #C7D3DE; display: flex; flex-direction: column; gap: calc(0.55 * var(--u)); padding: calc(1.2 * var(--u)) calc(0.9 * var(--u)); font-size: calc(1.05 * var(--u)); }
.ffh-side__logo { width: 82%; display: block; margin: 0 0 calc(0.7 * var(--u)) calc(0.2 * var(--u)); }
.ffh-side__new { display: flex; align-items: center; justify-content: center; gap: calc(0.4 * var(--u)); padding: calc(0.55 * var(--u)); border-radius: calc(0.55 * var(--u)); background: var(--ff-teal); color: #FFFFFF; font-weight: 600; }
.ffh-side__search { display: flex; align-items: center; gap: calc(0.5 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.6 * var(--u)); border-radius: calc(0.5 * var(--u)); background: rgba(255,255,255,0.07); color: #93A6B8; }
.ffh-side__group { margin-top: calc(0.5 * var(--u)); font-size: calc(0.78 * var(--u)); letter-spacing: 0.1em; color: #6F8597; }
.ffh-nav { position: relative; display: flex; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.6 * var(--u)); border-radius: calc(0.5 * var(--u)); white-space: nowrap; }
.ffh-nav svg { position: relative; z-index: 1; width: calc(1.25 * var(--u)); height: calc(1.25 * var(--u)); flex-shrink: 0; }
.ffh-nav span:not(.ffh-nav__on) { position: relative; z-index: 1; }
.ffh-nav__on { position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,0.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.ffh-badge { margin-left: auto; position: relative; z-index: 1; min-width: calc(1.4 * var(--u)); padding: 0 calc(0.35 * var(--u)); border-radius: 99px; background: var(--ff-teal); color: #FFFFFF; font-size: calc(0.78 * var(--u)); text-align: center; }
.ffh-main { position: relative; flex: 1; min-width: 0; background: var(--ff-surface-2); }
.ffh-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ff-surface-2); }
.ffh-page__head { display: flex; align-items: center; gap: calc(0.8 * var(--u)); padding: calc(1 * var(--u)) calc(1.6 * var(--u)); background: var(--ff-surface); border-bottom: 1px solid var(--ff-line); flex-shrink: 0; }
.ffh-page__title { font-size: calc(1.9 * var(--u)); margin-right: auto; }
.ffh-btn-sm { display: inline-flex; align-items: center; gap: calc(0.4 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.85 * var(--u)); border-radius: calc(0.5 * var(--u)); border: 1px solid var(--ff-line); background: #FFFFFF; font-size: calc(1 * var(--u)); white-space: nowrap; color: var(--ff-ink); }
.ffh-btn-sm--teal { background: var(--ff-teal); border-color: var(--ff-teal); color: #FFFFFF; font-weight: 600; }
.ffh-page__body { flex: 1; min-height: 0; padding: calc(1.3 * var(--u)) calc(1.6 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ffh-tile { background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: calc(0.85 * var(--u)); padding: calc(1 * var(--u)) calc(1.15 * var(--u)); min-width: 0; }
.ffh-label { font-size: calc(1 * var(--u)); color: var(--ff-ink-3); white-space: nowrap; }
.ffh-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(0.9 * var(--u)); }
.ffh-kpi .ffh-num { display: block; font-size: calc(2.3 * var(--u)); line-height: 1.05; margin-top: calc(0.25 * var(--u)); }
.ffh-kpi small { display: block; font-size: calc(0.95 * var(--u)); margin-top: calc(0.2 * var(--u)); }
.ffh-cols { flex: 1; min-height: 0; display: grid; gap: calc(1 * var(--u)); }
.ffh-pill { font-size: calc(0.92 * var(--u)); padding: calc(0.15 * var(--u)) calc(0.6 * var(--u)); border-radius: 99px; white-space: nowrap; }
.ffh-pill--new { background: var(--ff-cobalt-soft); color: var(--ff-cobalt-ink); }
.ffh-pill--done { background: var(--ff-green-soft); color: var(--ff-green); }
.ffh-pill--teal { background: var(--ff-teal-soft); color: var(--ff-teal-ink); }
.ffh-avatar { width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(0.9 * var(--u)); font-family: 'Switzer', sans-serif; font-weight: 500; flex-shrink: 0; background: #FFFFFF; }
.ffh-avatar--ring { box-shadow: inset 0 0 0 2px currentColor; }

/* leads */
.ffh-src { display: grid; grid-template-columns: calc(10 * var(--u)) 1fr calc(1.8 * var(--u)); align-items: center; gap: calc(0.7 * var(--u)); white-space: nowrap; font-size: calc(1.1 * var(--u)); }
.ffh-src > span:first-child { display: flex; align-items: center; gap: calc(0.55 * var(--u)); }
.ffh-src__bar { height: calc(0.8 * var(--u)); border-radius: 99px; background: var(--ff-cobalt); transform-origin: left center; }
.ffh-src__val { text-align: right; }
.ffh-leadrow { display: grid; grid-template-columns: calc(2.3 * var(--u)) 1fr auto; align-items: center; gap: calc(0.7 * var(--u)); padding: calc(0.55 * var(--u)) calc(0.6 * var(--u)); margin: 0 calc(-0.6 * var(--u)); border-radius: calc(0.6 * var(--u)); font-size: calc(1.08 * var(--u)); }
.ffh-leadrow + .ffh-leadrow { border-top: 1px solid #EEF2F5; }
.ffh-leadrow small { display: block; color: var(--ff-ink-3); font-size: calc(0.95 * var(--u)); }

/* messages */
.ffh-inbox { width: 27%; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid var(--ff-line); display: flex; flex-direction: column; }
.ffh-inbox__search { margin: calc(0.8 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.7 * var(--u)); border: 1px solid var(--ff-line); border-radius: calc(0.55 * var(--u)); color: var(--ff-ink-3); font-size: calc(1 * var(--u)); display: flex; align-items: center; gap: calc(0.45 * var(--u)); }
.ffh-convo { position: relative; padding: calc(0.75 * var(--u)) calc(1 * var(--u)); border-top: 1px solid #EEF2F5; font-size: calc(1.02 * var(--u)); }
.ffh-convo__top { display: flex; justify-content: space-between; gap: calc(0.5 * var(--u)); }
.ffh-convo__top span { color: var(--ff-ink-3); font-size: calc(0.92 * var(--u)); }
.ffh-convo p { margin: calc(0.15 * var(--u)) 0 0; color: var(--ff-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffh-convo.is-active { background: #F2FAFB; box-shadow: inset 0 0 0 1.5px var(--ff-teal); border-radius: calc(0.3 * var(--u)); }
.ffh-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #FFFFFF; }
.ffh-thread__head { display: flex; align-items: center; gap: calc(0.7 * var(--u)); padding: calc(0.75 * var(--u)) calc(1.2 * var(--u)); border-bottom: 1px solid var(--ff-line); font-size: calc(1.05 * var(--u)); }
.ffh-thread__head a { margin-left: auto; color: var(--ff-teal-ink); font-size: calc(0.95 * var(--u)); }
.ffh-thread__ctx { display: flex; gap: calc(0.5 * var(--u)); padding: calc(0.6 * var(--u)) calc(1.2 * var(--u)); background: #FAFCFD; border-bottom: 1px solid #EEF2F5; flex-wrap: wrap; }
.ffh-thread__msgs { flex: 1; min-height: 0; padding: calc(1 * var(--u)) calc(1.2 * var(--u)); display: flex; flex-direction: column; gap: calc(0.65 * var(--u)); font-size: calc(1.05 * var(--u)); justify-content: flex-end; }
.ffh-msg { max-width: 76%; padding: calc(0.6 * var(--u)) calc(0.85 * var(--u)) calc(0.45 * var(--u)); border-radius: calc(0.8 * var(--u)); line-height: 1.35; }
.ffh-msg small { display: block; text-align: right; font-size: calc(0.78 * var(--u)); color: #7A8894; margin-top: calc(0.2 * var(--u)); }
.ffh-msg--in { align-self: flex-start; background: #F1F3F6; border: 1px solid #E6EAEE; }
.ffh-msg--out { align-self: flex-end; background: var(--ff-mint); }
.ffh-msg--sys { align-self: center; max-width: none; background: none; padding: 0; font-size: calc(0.88 * var(--u)); color: var(--ff-ink-3); letter-spacing: 0.04em; }
.ffh-compose { margin: 0 calc(1.2 * var(--u)) calc(1 * var(--u)); display: flex; align-items: center; gap: calc(0.6 * var(--u)); }
.ffh-compose span:first-child { flex: 1; padding: calc(0.6 * var(--u)) calc(0.9 * var(--u)); border: 1px solid var(--ff-line); border-radius: calc(0.6 * var(--u)); color: var(--ff-ink-3); font-size: calc(1 * var(--u)); }
.ffh-compose i { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: 50%; background: #8FD0DA; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.ffh-compose i svg { width: 50%; height: 50%; }

/* routes */
.ffh-routes { flex: 1; min-height: 0; display: flex; }
.ffh-routes__list { width: 30%; flex-shrink: 0; padding: calc(1.1 * var(--u)) calc(1.1 * var(--u)); display: flex; flex-direction: column; gap: calc(0.5 * var(--u)); background: #FFFFFF; border-right: 1px solid var(--ff-line); font-size: calc(1.02 * var(--u)); }
.ffh-routes__big { font-size: calc(2.2 * var(--u)); line-height: 1; }
.ffh-progress { height: calc(0.5 * var(--u)); border-radius: 99px; background: #EDF1F4; overflow: hidden; margin: calc(0.3 * var(--u)) 0 calc(0.5 * var(--u)); }
.ffh-progress i { display: block; height: 100%; width: 38%; border-radius: inherit; background: var(--ff-teal); }
.ffh-crew { display: flex; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(0.25 * var(--u)) 0; white-space: nowrap; }
.ffh-crew .ffh-avatar { width: calc(2 * var(--u)); height: calc(2 * var(--u)); font-size: calc(0.78 * var(--u)); }
.ffh-crew span:last-child { margin-left: auto; color: var(--ff-ink-3); font-size: calc(0.92 * var(--u)); }
.ffh-routes__map { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #E4E2DE; }
.ffh-routes__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ffh-routes__chip { position: absolute; z-index: 2; right: calc(1 * var(--u)); top: calc(1 * var(--u)); display: flex; align-items: center; gap: calc(0.4 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.8 * var(--u)); border-radius: calc(0.5 * var(--u)); background: #FFFFFF; box-shadow: 0 calc(0.3 * var(--u)) calc(1 * var(--u)) rgba(3,10,17,0.15); font-size: calc(0.95 * var(--u)); }
.ffh-route { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ffh-map-credit { position: absolute; right: calc(0.6 * var(--u)); bottom: calc(0.4 * var(--u)); font-size: calc(0.7 * var(--u)); color: #6B7A86; background: rgba(255,255,255,0.75); padding: 0 calc(0.3 * var(--u)); border-radius: calc(0.2 * var(--u)); }

/* reports */
.ffh-rev svg { display: block; width: 100%; height: calc(9.5 * var(--u)); overflow: visible; margin-top: calc(0.6 * var(--u)); }
.ffh-rev__months { display: flex; justify-content: space-between; font-size: calc(0.88 * var(--u)); color: var(--ff-ink-3); margin-top: calc(0.4 * var(--u)); }
.ffh-srcrev { display: grid; grid-template-columns: calc(9.5 * var(--u)) 1fr auto; align-items: center; gap: calc(0.7 * var(--u)); font-size: calc(1.05 * var(--u)); white-space: nowrap; }
.ffh-srcrev > span:first-child { display: flex; align-items: center; gap: calc(0.5 * var(--u)); }
.ffh-srcrev i { display: block; height: calc(0.8 * var(--u)); border-radius: 99px; background: var(--ff-green); transform-origin: left center; }

/* ---------- phone (foreground), iPhone styling ---------- */
/* phone screens were designed ~24% of the stage wide; --u keeps them in proportion */
.ffh-phone { --u: 0.52cqw; left: 75%; top: 36%; width: 12.4%; aspect-ratio: 9 / 19; }
.ffh-phone__frame {
  position: absolute; inset: 0; border-radius: calc(4 * var(--u)); padding: calc(0.75 * var(--u));
  background: #07090C;
  box-shadow: 0 0 0 var(--rim) #C8CDD2, 0 0 0 calc(var(--rim) + 1px) rgba(110,118,126,0.55), inset 0 0 0 1px rgba(255,255,255,0.08), 0 0.4cqw 0.5cqw rgba(24,48,34,0.2), 0 1.9cqw 2.8cqw -1cqw rgba(24,56,40,0.55);
}
.ffh-phone__frame::after { /* volume buttons */
  content: ""; position: absolute; left: calc(-1 * var(--rim) - 0.16cqw); top: 21%; width: 0.2cqw; height: 6.5%; border-radius: 0.1cqw; background: #A9B0B6; box-shadow: 0 calc(9.5 * var(--u)) 0 #A9B0B6;
}
.ffh-phone::after { /* side button */
  content: ""; position: absolute; right: calc(-1 * var(--rim) - 0.12cqw); top: 27%; width: 0.2cqw; height: 10%; border-radius: 0.1cqw; background: #A9B0B6;
}
.ffh-phone__screen { position: relative; width: 100%; height: 100%; border-radius: calc(3.45 * var(--u)); overflow: hidden; background: var(--ff-surface); font-family: var(--ff-sys); }
.ffh-phone__screen::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 26%, rgba(255,255,255,0) 42%); }
.ffh-phone__status { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: calc(1.1 * var(--u)) calc(2.1 * var(--u)) 0; font-family: var(--ff-sys); font-size: calc(1.1 * var(--u)); font-weight: 600; color: #0B1F33; }
.ffh-phone__status.is-light { color: #FFFFFF; }
.ffh-phone__status svg { height: calc(1 * var(--u)); width: auto; display: block; }
.ffh-phone__island { position: absolute; left: 50%; top: calc(0.75 * var(--u)); z-index: 4; width: calc(6.8 * var(--u)); height: calc(1.95 * var(--u)); margin-left: calc(-3.4 * var(--u)); border-radius: 99px; background: #05090E; }
.ffh-phone__home { position: absolute; left: 50%; bottom: calc(0.55 * var(--u)); z-index: 4; width: calc(7.6 * var(--u)); height: calc(0.4 * var(--u)); margin-left: calc(-3.8 * var(--u)); border-radius: 99px; background: rgba(11,31,51,0.82); }
.ffh-phone__home.is-light { background: rgba(255,255,255,0.85); }
.ffh-screen { position: absolute; inset: 0; padding-top: calc(3.8 * var(--u)); display: flex; flex-direction: column; background: #FFFFFF; font-size: calc(1.12 * var(--u)); }
.ffh-screen b { font-family: var(--ff-sys); font-weight: 600; letter-spacing: -0.01em; }

/* phone 0: the client's site on mobile */
.ffh-msite { position: relative; flex: 1; min-height: 0; overflow: hidden; color: #23332D; }
.ffh-msite__nav { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(0.6 * var(--u)) calc(1.3 * var(--u)); background: rgba(255,255,255,0.95); }
.ffh-msite__nav .ffh-site__logo { font-size: calc(1.1 * var(--u)); }
.ffh-msite__page { position: absolute; left: 0; right: 0; top: 0; padding-top: calc(3.6 * var(--u)); will-change: transform; }
.ffh-msite__photo { margin: 0 calc(1.1 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(1.2 * var(--u)); overflow: hidden; }
.ffh-msite__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.ffh-msite__body { padding: calc(1.1 * var(--u)) calc(1.3 * var(--u)); display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); }
.ffh-msite__body .ffh-site__h { font-size: calc(1.95 * var(--u)); }
.ffh-msite__body .ffh-site__btn { padding: calc(0.85 * var(--u)); font-size: calc(1.1 * var(--u)); }
.ffh-msite__body .ffh-site__card { padding: calc(1 * var(--u)); }

/* phone 1: lock screen */
.ffh-lock { background: radial-gradient(120% 70% at 18% 8%, #2D7C93 0%, rgba(45,124,147,0) 60%), radial-gradient(90% 60% at 90% 90%, #3B5BC4 0%, rgba(59,91,196,0) 60%), linear-gradient(170deg, #17344E, #0B1C2E 70%); color: #FFFFFF; text-align: center; }
.ffh-lock__date { margin-top: calc(1.3 * var(--u)); font-size: calc(1.2 * var(--u)); font-weight: 600; opacity: 0.92; }
.ffh-lock__time { font-size: calc(6.4 * var(--u)); line-height: 1; font-weight: 600; letter-spacing: -0.02em; margin-bottom: calc(1.7 * var(--u)); }
.ffh-note { margin: 0 calc(0.85 * var(--u)) calc(0.55 * var(--u)); padding: calc(0.9 * var(--u)) calc(0.95 * var(--u)); border-radius: calc(1.6 * var(--u)); background: rgba(246,247,249,0.86); color: #111418; display: flex; gap: calc(0.75 * var(--u)); text-align: left; box-shadow: 0 calc(0.4 * var(--u)) calc(1.4 * var(--u)) rgba(0,0,0,0.18); }
.ffh-note__icon { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); border-radius: calc(0.68 * var(--u)); flex-shrink: 0; display: block; }
.ffh-note__body { flex: 1; min-width: 0; font-size: calc(1 * var(--u)); line-height: 1.3; }
.ffh-note__top { display: flex; justify-content: space-between; color: #6B7280; font-size: calc(0.9 * var(--u)); }
.ffh-note__body b { display: block; }
.ffh-note--stack { margin: calc(-0.85 * var(--u)) calc(1.7 * var(--u)) 0; height: calc(1.3 * var(--u)); padding: 0; background: rgba(246,247,249,0.5); border-radius: 0 0 calc(1.3 * var(--u)) calc(1.3 * var(--u)); box-shadow: none; }
.ffh-lock__btns { position: absolute; left: calc(2.3 * var(--u)); right: calc(2.3 * var(--u)); bottom: calc(2.3 * var(--u)); display: flex; justify-content: space-between; }
.ffh-lock__btns span { width: calc(3.3 * var(--u)); height: calc(3.3 * var(--u)); border-radius: 50%; background: rgba(0,0,0,0.32); display: flex; align-items: center; justify-content: center; }
.ffh-lock__btns svg { width: 45%; height: 45%; }

/* phone 2: the customer's quote */
.ffh-quote { padding: calc(0.6 * var(--u)) calc(1.3 * var(--u)) calc(1.2 * var(--u)); display: flex; flex-direction: column; gap: calc(0.75 * var(--u)); flex: 1; }
.ffh-quote__brand { display: flex; align-items: center; gap: calc(0.5 * var(--u)); color: var(--ff-site-ink); font-size: calc(1.05 * var(--u)); padding-bottom: calc(0.6 * var(--u)); border-bottom: 1px solid #EEF1EF; }
.ffh-quote__amt { font-size: calc(3.2 * var(--u)); line-height: 1; letter-spacing: -0.02em; }
.ffh-quote__line { display: flex; justify-content: space-between; gap: calc(0.6 * var(--u)); font-size: calc(1 * var(--u)); padding: calc(0.45 * var(--u)) 0; border-bottom: 1px solid #EEF1EF; }
.ffh-quote__actions { position: relative; margin-top: auto; height: calc(3 * var(--u)); }
.ffh-quote__actions > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(0.4 * var(--u)); border-radius: 99px; font-weight: 600; font-size: calc(1.1 * var(--u)); }
.ffh-quote__accept { background: var(--ff-site-green); color: #FFFFFF; }
.ffh-quote__accepted { background: var(--ff-green-soft); color: var(--ff-green); }

/* phone 3: My Day */
.ffh-myday { padding: calc(0.5 * var(--u)) calc(1.2 * var(--u)); display: flex; flex-direction: column; gap: calc(0.75 * var(--u)); }
.ffh-myday__map { position: relative; height: calc(14 * var(--u)); border-radius: calc(1.2 * var(--u)); overflow: hidden; background: #E4E2DE; }
.ffh-myday__map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ffh-stop { padding: calc(0.8 * var(--u)) calc(1 * var(--u)); border-radius: calc(1.1 * var(--u)); border: 1px solid var(--ff-line); background: #FFFFFF; font-size: calc(1 * var(--u)); }
.ffh-stop.is-next { border-color: var(--ff-teal); box-shadow: 0 0 0 2px var(--ff-teal-soft); }
.ffh-btn { display: block; text-align: center; padding: calc(0.8 * var(--u)); border-radius: 99px; background: var(--ff-teal); color: #FFFFFF; font-weight: 600; font-size: calc(1.1 * var(--u)); }

/* phone 4: paid */
.ffh-paid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(0.75 * var(--u)); padding: 0 calc(1.5 * var(--u)) calc(3 * var(--u)); }
.ffh-paid__check { width: calc(5.8 * var(--u)); height: calc(5.8 * var(--u)); border-radius: 50%; background: var(--ff-green-soft); color: var(--ff-green); display: flex; align-items: center; justify-content: center; }
.ffh-paid__check svg { width: 50%; height: 50%; }
.ffh-paid__amt { font-size: calc(4.4 * var(--u)); line-height: 1; }
.ffh-paid__line { width: 100%; display: flex; justify-content: space-between; padding: calc(0.65 * var(--u)) 0; border-top: 1px solid var(--ff-line); font-size: calc(1.05 * var(--u)); }

/* ---------- floating cards (foreground planes) ---------- */
.ffh-card__in {
  display: flex; align-items: center; gap: calc(1 * var(--u));
  padding: calc(1.1 * var(--u)) calc(1.3 * var(--u)); border-radius: calc(1.2 * var(--u));
  background: rgba(255,255,255,0.98);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 0 0 1px rgba(255,255,255,0.45),
    0 calc(3.4 * var(--u)) calc(5.4 * var(--u)) calc(-2 * var(--u)) rgba(var(--ff-shadow), 0.66),
    0 calc(0.8 * var(--u)) calc(1.6 * var(--u)) calc(-0.8 * var(--u)) rgba(var(--ff-shadow), 0.42);
}
.ffh-card__icon { width: calc(3.1 * var(--u)); height: calc(3.1 * var(--u)); border-radius: calc(0.8 * var(--u)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ffh-card__icon svg { width: 52%; height: 52%; }
.ffh-card__icon img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.ffh-card__icon--plain { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ff-line); }
.ffh-card__icon--ops { background: var(--ff-teal-soft); color: var(--ff-teal); }
.ffh-card__icon--money { background: var(--ff-green-soft); color: var(--ff-green); }
.ffh-card__t { display: block; font-size: calc(1.4 * var(--u)); line-height: 1.2; white-space: nowrap; }
.ffh-card__s { display: block; font-size: calc(1.08 * var(--u)); color: var(--ff-ink-3); margin-top: calc(0.2 * var(--u)); white-space: nowrap; }
.ffh-card { --u: 0.6cqw; }
.ffh-slot-tr { left: 68%; top: 8%; width: 21%; }
.ffh-slot-tl { left: 9%; top: 12%; width: 21%; }
.ffh-gcard { display: block; padding: calc(1.05 * var(--u)) calc(1.15 * var(--u)); font-family: var(--ff-sys); }
.ffh-gcard__search { display: flex; align-items: center; gap: calc(0.55 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.85 * var(--u)); border-radius: 99px; box-shadow: inset 0 0 0 1px #DADCE0; font-size: calc(1.05 * var(--u)); color: #202124; }
.ffh-gcard__res { display: flex; gap: calc(0.75 * var(--u)); margin-top: calc(0.85 * var(--u)); align-items: flex-start; }
.ffh-gcard__res b { font-family: var(--ff-sys); font-weight: 600; color: #1A0DAB; letter-spacing: 0; font-size: calc(1.25 * var(--u)); }
.ffh-gcard__meta { font-size: calc(0.98 * var(--u)); color: #4D5156; margin-top: calc(0.15 * var(--u)); }

/* ---------- logo strip (part of the hero, the landscape continues behind it) ---------- */
.ffh-tools { position: relative; width: 100%; max-width: none; margin: clamp(6px, 1.2vh, 16px) auto 0; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 0.8vh, 10px); }
.ffh-tools__label { font-family: 'Switzer', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; line-height: 1.5; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 10px rgba(16,48,20,0.55); text-align: center; }
.ffh-tools__row { width: calc(100% + 2 * var(--ffh-pad)); margin: 0 calc(-1 * var(--ffh-pad)); filter: drop-shadow(0 2px 10px rgba(16,48,20,0.4)); }
.ffh-tools__row > div { zoom: 0.98; animation-duration: 70s !important; }
.ffh-tools__row > div > div { gap: clamp(52px, 5.4vw, 96px) !important; padding-right: clamp(52px, 5.4vw, 96px) !important; }

/* ---------- tablet-size screens ---------- */
@media (max-width: 1023px) {
  .ffh-hero { min-height: 0; padding-top: calc(70px + clamp(22px, 5vw, 40px)); }
  .ffh-h1 { font-size: clamp(38px, 7vw, 60px); }
  .ffh-stagewrap { width: 100%; min-width: 0; }
  .ffh-layer { --zk: 0.55; }
}

/* ---------- phones: centred text, phone first, desktop as context, no tablet ---------- */
@media (max-width: 767px) {
  .ffh-hero { --ffh-land-img: url(/_v/08dy81ne69/assets/hero/ff-hero-poster-1200.webp); }
  .ffh-land__video { display: none; }
  .ffh-h1 { font-size: clamp(34px, 9.6vw, 46px); }
  .ffh-h1__line { white-space: normal; }
  .ffh-sub { font-size: 16px; max-width: 34ch; }
  .ffh-ctas { gap: 8px; flex-wrap: nowrap; }
  .ffh-cta { padding: 13px 17px !important; font-size: 15px !important; gap: 8px; }
  .ffh-cta svg { width: 14px; height: 14px; }
  .ffh-stage { aspect-ratio: 0.96; perspective: 1600px; }
  .ffh-rig { transform: rotateX(2deg); }
  .ffh-layer { --zk: 0.3; }
  .ffh-tablet, .ffh-shadow--tablet { display: none; }
  .ffh-monitor { --u: 1.5cqw; left: 2%; top: 6%; width: 72%; }
  .ffh-monitor__neck, .ffh-monitor__foot { display: none; }
  .ffh-phone { --u: 1.9cqw; left: 52%; top: 2%; width: 46%; }
  .ffh-shadow--monitor { left: 6% !important; width: 62% !important; top: 50% !important; height: 7% !important; }
  .ffh-shadow--phone { left: 54% !important; width: 42% !important; top: 94% !important; height: 6% !important; }
  .ffh-card[data-ffh-mob] { --u: 1.9cqw; left: 0 !important; top: 72% !important; width: 60% !important; }
  .ffh-card[data-ffh-card]:not([data-ffh-mob]) { display: none; }
  .ffh-side, .ffh-dk { display: none !important; }
  .ffh-inbox { display: none; }
  .ffh-routes__list { display: none; }
  .ffh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ffh-site__hero { grid-template-columns: 1fr; }
  .ffh-site__nav > :not(.ffh-site__logo) { display: none; }
  .ffh-tools { margin-top: 16px; }
  .ffh-tools__row > div { zoom: 0.72; animation-duration: 56s !important; }
  .ffh-tools__row > div > div { gap: 44px !important; padding-right: 44px !important; }
  .ffh-glance { display: none !important; }
  .ffh-site__why { grid-template-columns: 1fr; }
  .ffh-stage { --rim: 0.6cqw; }
}

/* ---------- V8 state content ---------- */
.ffh-pill--grey { background: #EEF2F5; color: var(--ff-ink-3); }

/* tablet, getting found: Google Business Profile */
.ffh-gbp { display: grid; grid-template-columns: 1fr 1.25fr; gap: calc(0.7 * var(--u)); padding: calc(0.5 * var(--u)) calc(1.1 * var(--u)) 0; }
.ffh-gbp .ffh-gsearch__map { height: auto; margin: 0; min-height: calc(9 * var(--u)); }
.ffh-gsearch__map i.is-top { width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); background: #1A73E8; z-index: 1; display: flex; align-items: center; justify-content: center; }
.ffh-gsearch__map i.is-top span { transform: rotate(45deg); color: #FFFFFF; font-style: normal; font-weight: 700; font-size: calc(0.8 * var(--u)); }
.ffh-gbp__card { display: flex; flex-direction: column; gap: calc(0.15 * var(--u)); min-width: 0; }
.ffh-gbp__card b { font-family: var(--ff-sys); font-weight: 500; color: #202124; font-size: calc(1.15 * var(--u)); letter-spacing: 0; }
.ffh-gbp__card small { display: block; color: #4D5156; font-size: calc(0.76 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffh-gbp__actions { display: flex; gap: calc(0.35 * var(--u)); margin-top: calc(0.35 * var(--u)); }
.ffh-gbp__actions span { padding: calc(0.18 * var(--u)) calc(0.55 * var(--u)); border-radius: 99px; box-shadow: inset 0 0 0 1px #DADCE0; color: #1A73E8; font-size: calc(0.74 * var(--u)); white-space: nowrap; }
.ffh-gbp__stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(0.5 * var(--u)); margin: calc(0.7 * var(--u)) calc(1.1 * var(--u)) calc(0.9 * var(--u)); align-content: start; }
.ffh-gbp__stats div { background: var(--ff-surface-2); border-radius: calc(0.5 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.6 * var(--u)); }
.ffh-gbp__stats b { display: block; font-family: 'Switzer', sans-serif; font-weight: 500; font-size: calc(1.5 * var(--u)); line-height: 1.1; color: var(--ff-ink); }
.ffh-gbp__stats b.ffh-up { color: var(--ff-green); }
.ffh-gbp__stats span { font-size: calc(0.72 * var(--u)); color: var(--ff-ink-3); white-space: nowrap; }

/* tablet, leads: visits to booked */
.ffh-funnelv { display: flex; flex-direction: column; gap: calc(0.45 * var(--u)); }
.ffh-funnelv > div { display: grid; grid-template-columns: calc(8.2 * var(--u)) 1fr calc(3.2 * var(--u)); align-items: center; gap: calc(0.5 * var(--u)); font-size: calc(0.85 * var(--u)); white-space: nowrap; }
.ffh-funnelv i { height: calc(0.75 * var(--u)); border-radius: 99px; background: var(--ff-cobalt); transform-origin: left center; }
.ffh-funnelv b { text-align: right; }

/* tablet, operations: today's jobs */
.ffh-agenda { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(0.35 * var(--u)); padding: calc(0.6 * var(--u)) calc(0.9 * var(--u)) calc(0.8 * var(--u)); background: var(--ff-surface-2); }
.ffh-agenda > div { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(4.6 * var(--u)) 1fr auto auto; align-items: center; gap: calc(0.6 * var(--u)); padding: 0 calc(0.6 * var(--u)) 0 calc(0.75 * var(--u)); background: #FFFFFF; border: 1px solid var(--ff-line); border-radius: calc(0.45 * var(--u)); box-shadow: inset calc(0.3 * var(--u)) 0 0 var(--c); font-size: calc(0.82 * var(--u)); white-space: nowrap; }
.ffh-agenda > div.is-new { border-color: rgba(2,153,174,0.5); background: #F2FAFB; }
.ffh-agenda time { color: var(--ff-ink-3); font-variant-numeric: tabular-nums; }
.ffh-agenda span { min-width: 0; overflow: hidden; }
.ffh-agenda b { display: block; font-size: calc(0.9 * var(--u)); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.ffh-agenda small { display: block; color: var(--ff-ink-3); font-size: calc(0.74 * var(--u)); line-height: 1.15; }
.ffh-agenda em { font-style: normal; color: var(--ff-ink-2, #3D4A55); font-size: calc(0.76 * var(--u)); }
.ffh-agenda .ffh-pill { font-style: normal; font-size: calc(0.7 * var(--u)); }

/* website: why choose us */
.ffh-site__why { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.2 * var(--u)); margin: calc(2.2 * var(--u)) calc(2.2 * var(--u)) 0; padding: calc(1.4 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(0.9 * var(--u)); background: #F1F6F2; }
.ffh-site__why b { display: block; font-size: calc(1.05 * var(--u)); color: #1D2B24; }
.ffh-site__why span { display: block; margin-top: calc(0.3 * var(--u)); font-size: calc(0.85 * var(--u)); line-height: 1.4; color: #5B6A62; }

/* desktop, leads: service + source on each row */
.ffh-leadrow small .ffh-ico { width: calc(0.95 * var(--u)); height: calc(0.95 * var(--u)); vertical-align: -0.15em; margin-right: calc(0.15 * var(--u)); }
.ffh-leadrow__end { display: flex; flex-direction: column; align-items: flex-end; gap: calc(0.15 * var(--u)); }
.ffh-leadrow__end small { font-size: calc(0.85 * var(--u)); white-space: nowrap; }

/* desktop, sales: contact context beside the thread */
.ffh-glance { width: 25%; flex-shrink: 0; display: flex; flex-direction: column; gap: calc(0.55 * var(--u)); padding: calc(1.1 * var(--u)); background: var(--ff-surface-2); border-left: 1px solid var(--ff-line); font-size: calc(0.98 * var(--u)); }
.ffh-glance__who { display: flex; align-items: center; gap: calc(0.6 * var(--u)); padding-bottom: calc(0.6 * var(--u)); border-bottom: 1px solid var(--ff-line); }
.ffh-glance__who small { display: block; color: var(--ff-ink-3); font-size: calc(0.88 * var(--u)); }
.ffh-glance__h { font-size: calc(0.8 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ff-ink-3); }
.ffh-glance__row { display: flex; justify-content: space-between; align-items: center; gap: calc(0.4 * var(--u)); white-space: nowrap; }
.ffh-glance__row > span:first-child { color: var(--ff-ink-3); }
.ffh-glance__status { position: relative; display: inline-grid; justify-items: end; }
.ffh-glance__status > * { grid-area: 1 / 1; }

/* desktop, results */
.ffh-kpis--res { grid-template-columns: 1.15fr 1.15fr 0.8fr; }
.ffh-kpi--big .ffh-num { font-size: calc(3.1 * var(--u)); letter-spacing: -0.02em; }
.ffh-roasbox { background: #F0F8F3; border-color: #CFE8D8; }
.ffh-roasbox .ffh-num { color: var(--ff-green); }
.ffh-attr { display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); }
.ffh-attr__flow { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: calc(0.9 * var(--u)); }
.ffh-attr__flow > div { position: relative; padding: calc(0.5 * var(--u)) calc(0.6 * var(--u)); border-radius: calc(0.55 * var(--u)); background: var(--ff-surface-2); white-space: nowrap; }
.ffh-attr__flow > div + div::before { content: ""; position: absolute; left: calc(-0.75 * var(--u)); top: 50%; width: calc(0.55 * var(--u)); height: calc(0.55 * var(--u)); border-top: 1.5px solid var(--ff-ink-3); border-right: 1.5px solid var(--ff-ink-3); transform: translateY(-50%) rotate(45deg); }
.ffh-attr__flow > div > span { display: flex; align-items: center; gap: calc(0.35 * var(--u)); font-weight: 600; font-size: calc(0.98 * var(--u)); }
.ffh-attr__flow b { display: block; font-size: calc(1.45 * var(--u)); line-height: 1.1; }
.ffh-attr__flow small { display: block; color: var(--ff-ink-3); font-size: calc(0.85 * var(--u)); }
.ffh-attr__flow .is-money { background: #F0F8F3; }
.ffh-attr__flow .is-money b { color: var(--ff-green); }
.ffh-attr__rows { display: flex; flex-direction: column; gap: calc(0.35 * var(--u)); margin-top: auto; }
.ffh-attr__rows > div { display: flex; justify-content: space-between; align-items: center; font-size: calc(1 * var(--u)); padding-top: calc(0.35 * var(--u)); border-top: 1px solid #EEF2F5; }
.ffh-attr__rows span { display: flex; align-items: center; gap: calc(0.45 * var(--u)); }