/**
 * Quick Fix Force — Home page sections
 * Source: src/pages/Home.jsx + src/components/home/*.jsx
 * Loaded only on the front page template.
 */

/* ===== Hero ===== */
.qff-hero { padding-top: var(--qff-header-height); background: #fff; }
.qff-hero__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 640px) { .qff-hero__inner { padding-top: 5rem; padding-bottom: 5rem; } }
@media (min-width: 1024px) { .qff-hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; padding-top: 7rem; padding-bottom: 7rem; } }

.qff-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--qff-action-hover); margin-bottom: 1.25rem; }
.qff-hero__title {
  font-family: var(--qff-font-display);
  font-weight: 600;
  color: var(--qff-charcoal);
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
@media (min-width: 640px) { .qff-hero__title { font-size: 48px; } }
@media (min-width: 1024px) { .qff-hero__title { font-size: 64px; } }

.qff-hero__list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.qff-hero__list li { display: flex; align-items: center; gap: 1rem; }
.qff-hero__list .qff-icon-circle { height: 2rem; width: 2rem; background: var(--qff-action); }
.qff-hero__list .qff-icon-circle svg { width: 1rem; height: 1rem; color: #fff; }
.qff-hero__list span.qff-hero__list-text { font-size: 17px; color: var(--qff-charcoal-75); font-weight: 500; }

.qff-hero__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .qff-hero__actions { flex-direction: row; } }

.qff-hero__whatsapp { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 500; color: var(--qff-charcoal-70); transition: color 0.2s ease; }
.qff-hero__whatsapp:hover { color: var(--qff-navy); }
.qff-hero__whatsapp svg { width: 1rem; height: 1rem; }

.qff-hero__media { position: relative; }
.qff-hero__media .qff-corner-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) { .qff-hero__media .qff-corner-frame img { aspect-ratio: 4 / 4.4; } }

.qff-hero__badge {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  background: var(--qff-white-95);
  backdrop-filter: blur(6px);
  border-radius: var(--qff-radius-sm);
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 30px -10px rgba(11,63,120,0.25);
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) { .qff-hero__badge { right: auto; width: max-content; max-width: calc(100% - 2rem); } }
.qff-hero__badge-title { font-size: 13px; font-weight: 600; color: var(--qff-charcoal); }
.qff-hero__badge-sub { font-size: 12px; color: var(--qff-charcoal-50); margin-top: 1px; }

/* ===== Trust bar ===== */
.qff-trustbar { background: var(--qff-offwhite); border-top: 1px solid var(--qff-navy-05); border-bottom: 1px solid var(--qff-navy-05); }
.qff-trustbar__inner { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 640px) { .qff-trustbar__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; } }
.qff-trustbar__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 1.5rem; }
@media (min-width: 1024px) { .qff-trustbar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qff-trustbar__list li { display: flex; align-items: center; gap: 0.75rem; justify-content: center; }
@media (min-width: 1024px) { .qff-trustbar__list li { justify-content: flex-start; } }
.qff-trustbar__list svg { width: 1.25rem; height: 1.25rem; color: var(--qff-navy); }
.qff-trustbar__list span { font-size: 14px; font-weight: 600; color: var(--qff-charcoal-80); }

/* ===== Generic section rhythm (home page only — bigger sections; see
   qff-base.css for .qff-section--* tone classes and .qff-section-compact
   used sitewide) ===== */
.qff-section { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 640px) { .qff-section { padding-top: 7rem; padding-bottom: 7rem; } }
@media (min-width: 1024px) { .qff-section { padding-top: 9rem; padding-bottom: 9rem; } }

/* ===== Services grid (home) ===== */
.qff-services-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .qff-services-grid { gap: 1.5rem; } }
@media (min-width: 1024px) { .qff-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4rem; } }
.qff-service-card { display: block; }
.qff-service-card .qff-corner-frame { position: relative; }
.qff-service-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.5s ease; }
.qff-service-card:hover img { transform: scale(1.05); }
.qff-service-card .qff-corner { opacity: 0; transition: opacity 0.3s ease; width: 1.25rem; height: 1.25rem; }
.qff-service-card:hover .qff-corner { opacity: 1; }
.qff-service-card__meta { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; }
.qff-service-card__meta h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 14px; letter-spacing: -0.01em; }
@media (min-width: 640px) { .qff-service-card__meta h3 { font-size: 16px; } }
.qff-service-card__meta svg { width: 1rem; height: 1rem; color: var(--qff-navy); transition: transform 0.3s ease; }
.qff-service-card:hover .qff-service-card__meta svg { transform: translate(2px, -2px); }

/* ===== Differentiator (4-step grid) ===== */
.qff-steps-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1px;
  background: var(--qff-navy-10);
  border-radius: var(--qff-radius-sm);
  overflow: hidden;
}
@media (min-width: 640px) { .qff-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 5rem; } }
.qff-step { background: #fff; padding: 2rem; height: 100%; }
@media (min-width: 1024px) { .qff-step { padding: 2.5rem; } }
.qff-step__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.qff-step__head svg { width: 1.25rem; height: 1.25rem; color: var(--qff-action); }
.qff-step__head span { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--qff-charcoal-40); }
.qff-step h3 { font-family: var(--qff-font-display); font-weight: 600; font-size: 18px; color: var(--qff-charcoal); letter-spacing: -0.01em; }
.qff-step p { margin-top: 0.5rem; font-size: 14px; color: var(--qff-charcoal-55); line-height: 1.7; }

/* ===== Why QFF (2-col value list) ===== */
.qff-values-grid { margin-top: 3rem; display: grid; gap: 2.5rem; max-width: 56rem; }
@media (min-width: 640px) { .qff-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-values-grid { column-gap: 4rem; row-gap: 3.5rem; margin-top: 4rem; } }
.qff-value { display: flex; gap: 1.25rem; }
.qff-value__icon { flex-shrink: 0; display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: var(--qff-radius-sm); background: var(--qff-navy-06); }
.qff-value__icon svg { width: 1.25rem; height: 1.25rem; color: var(--qff-navy); }
.qff-value h3 { font-family: var(--qff-font-display); font-weight: 600; font-size: 18px; color: var(--qff-charcoal); letter-spacing: -0.01em; }
.qff-value p { margin-top: 0.5rem; font-size: 15px; color: var(--qff-charcoal-55); line-height: 1.7; }

/* ===== Before / after slider ===== */
.qff-ba { margin-top: 3rem; max-width: 56rem; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .qff-ba { margin-top: 4rem; } }
.qff-ba__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--qff-radius-sm);
  user-select: none;
  cursor: ew-resize;
  touch-action: none;
}
.qff-ba__frame img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.qff-ba__before-wrap { position: absolute; inset: 0; overflow: hidden; }
.qff-ba__handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--qff-action); left: 50%; }
.qff-ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 2.75rem; width: 2.75rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--qff-navy); font-weight: 700; font-size: 12px;
}
.qff-ba__tag { position: absolute; top: 1rem; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: var(--qff-radius-sm); color: #fff; }
.qff-ba__tag--before { left: 1rem; background: rgba(23,26,31,0.7); }
.qff-ba__tag--after { right: 1rem; background: var(--qff-navy); }
.qff-ba__caption { margin-top: 1rem; text-align: center; font-size: 12px; color: var(--qff-charcoal-40); }

/* ===== Projects grid ===== */
.qff-projects-grid { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .qff-projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qff-projects-grid { margin-top: 4rem; gap: 2rem; } }
.qff-project-card { display: flex; flex-direction: column; }
.qff-project-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.75rem; transition: transform 0.5s ease; }
.qff-project-card:hover img { transform: scale(1.04); }
.qff-project-card__img { overflow: hidden; border-radius: 0.75rem; }
/* line-height + min-height reserve space for up to 2 lines, so the caption
   below lines up across a row even when titles wrap to different lengths
   (some project titles are much longer than others). */
.qff-project-card h3 { margin-top: 1.25rem; font-family: var(--qff-font-display); font-weight: 600; font-size: 18px; line-height: 1.3; min-height: 2.6em; color: var(--qff-charcoal); letter-spacing: -0.01em; }
.qff-project-card p { margin-top: 0.25rem; font-size: 14px; color: var(--qff-charcoal-45); }

/* ===== Experience timeline ===== */
.qff-timeline { margin-top: 3.5rem; display: grid; gap: 2.5rem; position: relative; }
@media (min-width: 1024px) { .qff-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 5rem; } }
.qff-timeline__rule { display: none; }
@media (min-width: 1024px) { .qff-timeline__rule { display: block; position: absolute; top: 1.5rem; left: 12%; right: 12%; height: 1px; background: var(--qff-navy-15); } }
.qff-timeline__step { position: relative; display: flex; gap: 1.25rem; }
@media (min-width: 1024px) { .qff-timeline__step { flex-direction: column; gap: 0; text-align: center; } }
.qff-timeline__num {
  flex-shrink: 0; position: relative; z-index: 1;
  display: flex; height: 3rem; width: 3rem;
  align-items: center; justify-content: center;
  border-radius: 9999px; background: var(--qff-navy); color: #fff;
  font-family: var(--qff-font-display); font-weight: 600; font-size: 14px;
}
@media (min-width: 1024px) { .qff-timeline__num { margin-left: auto; margin-right: auto; } }
.qff-timeline__rule-mobile { display: block; position: absolute; left: 1.5rem; top: 3rem; bottom: -2.5rem; width: 1px; background: var(--qff-navy-15); }
@media (min-width: 1024px) { .qff-timeline__rule-mobile { display: none; } }
.qff-timeline__step:last-child .qff-timeline__rule-mobile { display: none; }
.qff-timeline__body { margin-top: 0; }
@media (min-width: 1024px) { .qff-timeline__body { margin-top: 1.5rem; } }
.qff-timeline__body h3 { font-family: var(--qff-font-display); font-weight: 600; font-size: 18px; color: var(--qff-charcoal); letter-spacing: -0.01em; }
.qff-timeline__body p { margin-top: 0.5rem; font-size: 14px; color: var(--qff-charcoal-55); line-height: 1.7; }
@media (min-width: 1024px) { .qff-timeline__body p { max-width: 15rem; margin-left: auto; margin-right: auto; } }

/* ===== Luxury property band ===== */
.qff-luxury { position: relative; background: var(--qff-navy-deep); }
.qff-luxury__media { position: absolute; inset: 0; }
.qff-luxury__media img { height: 100%; width: 100%; object-fit: cover; opacity: 0.45; }
.qff-luxury__gradient { position: absolute; inset: 0; background: linear-gradient(to top, var(--qff-navy-deep), rgba(6,33,66,0.4), rgba(6,33,66,0.2)); }
.qff-luxury__inner { position: relative; padding-top: 7rem; padding-bottom: 7rem; }
@media (min-width: 640px) { .qff-luxury__inner { padding-top: 9rem; padding-bottom: 9rem; } }
@media (min-width: 1024px) { .qff-luxury__inner { padding-top: 12rem; padding-bottom: 12rem; } }
.qff-luxury__content { max-width: 42rem; }
.qff-luxury__content h2 { font-family: var(--qff-font-display); font-weight: 600; color: #fff; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
@media (min-width: 640px) { .qff-luxury__content h2 { font-size: 36px; } }
@media (min-width: 1024px) { .qff-luxury__content h2 { font-size: 52px; } }
.qff-luxury__content p { margin-top: 1.5rem; color: var(--qff-white-70); font-size: 18px; line-height: 1.7; max-width: 32rem; }
.qff-luxury__rule { margin-top: 2rem; height: 2px; width: 4rem; background: var(--qff-action); }

/* ===== Testimonials ===== */
.qff-testimonials-grid { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .qff-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qff-testimonial { height: 100%; border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 1.75rem; display: flex; flex-direction: column; }
.qff-testimonial p.qff-testimonial__quote { font-size: 15px; color: var(--qff-charcoal-70); font-style: italic; line-height: 1.7; flex: 1; }
.qff-testimonial__meta { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--qff-navy-05); }
.qff-testimonial__meta .qff-testimonial__name { font-weight: 600; font-size: 14px; color: var(--qff-charcoal-50); }
.qff-testimonial__meta .qff-testimonial__sub { font-size: 12px; color: var(--qff-charcoal-35); margin-top: 2px; }
/* Transparent labelling for unverified sample content (2026-08-19) — never
   let a placeholder/illustrative review read as a genuine one. Normal flow,
   not absolutely positioned, so it can never overlap the quote text below
   it regardless of card width or how long the quote runs. */
.qff-testimonial__badge {
  align-self: flex-start;
  margin-bottom: 1rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qff-navy);
  background: var(--qff-navy-06);
  border: 1px solid var(--qff-navy-10);
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
}

/* ===== Service areas (chip cloud) ===== */
/* .qff-area-chips / .qff-area-chip base rules moved to qff-shared-blocks.css
   (used sitewide, not just home) — see that file. */

/* ===== Contact section (two big tap targets) ===== */
.qff-contact-grid { margin-top: 3rem; display: grid; gap: 1rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .qff-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qff-contact-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm);
  padding: 2.5rem 1.5rem;
  transition: border-color 0.2s ease;
}
.qff-contact-card:hover { border-color: var(--qff-navy-25); }
.qff-contact-card__icon { display: flex; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center; border-radius: 9999px; }
.qff-contact-card__icon svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.qff-contact-card__icon--navy { background: var(--qff-navy); }
.qff-contact-card__icon--action { background: var(--qff-action); }
.qff-contact-card__title { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; letter-spacing: -0.01em; }
.qff-contact-card__sub { margin-top: 0.25rem; font-size: 14px; color: var(--qff-charcoal-50); }