/* ============================================================
   Floory, Sections: Hero · Trust · Plank · Estimate
   ============================================================ */

/* ====================== SECTION 1, HERO ====================== */
/* THE FINISHED FLOORY HOME, full-bleed cinematic room hero */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); min-height: 100svh; }

/* MOBILE-FIRST: full-bleed cinematic room image; copy sits OVER it, bottom-anchored (no white card). */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  height: 100%;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 56%;
  transform: scale(1.06); filter: saturate(0.97) brightness(0.99);
  animation: heroSettle 6.5s var(--ease-out) forwards;
}
@keyframes heroSettle {
  0%   { transform: scale(1.08); filter: saturate(0.94) brightness(0.98); }
  100% { transform: scale(1.0);  filter: saturate(1.05) brightness(1.03); }
}

/* Soft warm light sweep across the floor on load (one pass) */
.hero__sweep {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,236,214,0.0) 42%, rgba(255,228,200,0.55) 50%, rgba(255,236,214,0.0) 58%, transparent 70%);
  mix-blend-mode: screen;
  transform: translateX(-60%);
}
.hero.is-swept .hero__sweep { animation: heroSweep 1.7s var(--ease-out) 0.35s 1; }
@keyframes heroSweep {
  0%   { opacity: 0; transform: translateX(-60%); }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

/* Subtle orange glow accent hugging the floor edge */
.hero__floor-glow {
  position: absolute; left: 0; right: 0; bottom: -8%; height: 42%; z-index: 2; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, rgba(241,93,35,0.30), rgba(241,93,35,0) 68%);
  filter: blur(22px); mix-blend-mode: screen; opacity: 0.7;
}

/* Cinematic legibility wash: warm-dark from the bottom for the copy, a faint top tint for the header.
   The centre/floor stays bright. Desktop (>=768px) overrides with its own left+top scrim. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 1;
  background:
    linear-gradient(180deg, rgba(15,10,7,0.26) 0%, rgba(15,10,7,0) 22%),
    linear-gradient(0deg, rgba(10,7,4,0.82) 0%, rgba(15,10,7,0.5) 20%, rgba(15,10,7,0.16) 42%, rgba(15,10,7,0) 60%);
}

/* ---- Content: bottom-anchored, OVER the image, light-on-dark (no card) ---- */
.hero__content {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  background: none;
}
@media (max-width: 767px) { .hero__content { max-width: 31rem; } }
.hero__eyebrow { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #ffd9c6; margin-bottom: 0.6rem; text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.hero__headline { font-size: clamp(1.78rem, 6.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: #fff; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,0.4); }
.hero__sub { font-size: 0.96rem; line-height: 1.5; color: rgba(255,255,255,0.88); margin-top: 0.6rem; max-width: 33ch; text-shadow: 0 1px 14px rgba(0,0,0,0.4); }

/* Refined proof (mobile): ONE subtle status line (rating already lives in the top trust bar, not duplicated
   here). Hidden on desktop, which has its own floating chips + trust line. */
.hero__proof { margin-top: 0.85rem; font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.82); letter-spacing: 0.01em; text-shadow: 0 1px 10px rgba(0,0,0,0.45); }

.hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem; margin-top: var(--sp-4); }
.hero__cta .btn--primary { width: 100%; }
/* Secondary: quiet, compact, centred glass pill — clearly subordinate to the orange primary (not a 2nd block) */
.hero__cta .btn--ghost { width: auto; align-self: center; padding: 0.5rem 1.15rem; font-size: 0.92rem; border-radius: var(--radius-pill); color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.42); backdrop-filter: blur(6px); }
.hero__cta .btn--ghost:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.hero__trust { margin-top: var(--sp-4); font-size: 0.8rem; color: var(--ink-500); font-weight: 500; line-height: 1.5; }
@media (max-width: 767px) { .hero__trust { display: none; } }   /* mobile uses .hero__proof instead */
@media (min-width: 768px) { .hero__proof { display: none; } }   /* desktop keeps its floating chips */

/* Gentle text entrance (immediate, not gated on the sweep) */
.hero__content > * { opacity: 0; transform: translateY(14px); animation: heroIn 0.7s var(--ease-out) forwards; }
.hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero__content > *:nth-child(2) { animation-delay: 0.12s; }
.hero__content > *:nth-child(3) { animation-delay: 0.19s; }
.hero__content > *:nth-child(4) { animation-delay: 0.26s; }
.hero__content > *:nth-child(5) { animation-delay: 0.33s; }
.hero__content > *:nth-child(6) { animation-delay: 0.40s; }

/* Floating proof chips, desktop only, appear after load */
.hero__chips { display: none; }
.hero__scroll-hint { display: none; }

@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes floatHint { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ---------- DESKTOP: full-screen, full-bleed room, text over left scrim ---------- */
@media (min-width: 768px) {
  .hero { height: 100svh; min-height: 640px; }
  .hero__media { position: absolute; inset: 0; height: 100%; max-height: none; }
  .hero__bg img { object-position: center 58%; }

  /* Left + top scrim for legibility; floor (centre/right/bottom) stays bright */
  .hero__scrim {
    opacity: 1;
    background:
      linear-gradient(96deg, rgba(8,6,5,0.7) 0%, rgba(8,6,5,0.44) 26%, rgba(8,6,5,0.1) 46%, rgba(8,6,5,0) 60%),
      linear-gradient(180deg, rgba(8,6,5,0.42) 0%, rgba(8,6,5,0) 22%);
  }

  .hero__content {
    position: absolute; z-index: 4; left: 0; right: 0; top: 47%; transform: translateY(-50%);
    width: 100%; max-width: var(--maxw); margin-inline: auto;
    padding-inline: var(--gutter); background: none;
  }
  .hero__headline { font-size: var(--fs-h1); max-width: 15ch; color: var(--white); text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
  .hero__eyebrow { color: #ffd9c6; }
  .hero__sub { font-size: var(--fs-lead); max-width: 44ch; color: rgba(255,255,255,0.94); text-shadow: 0 1px 18px rgba(0,0,0,0.45); }
  .hero__cta { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
  .hero__cta .btn { width: auto; }
  /* Light-on-dark ghost over the imagery */
  .hero__cta .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); }
  .hero__cta .btn--ghost:hover { background: rgba(255,255,255,0.22); border-color: #fff; }
  .hero__trust { margin-top: var(--sp-4); font-size: 0.92rem; color: rgba(255,255,255,0.85); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }

  /* Floating proof chips bottom-right over the floor */
  .hero__chips {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
    position: absolute; z-index: 4; right: clamp(1.5rem, 4vw, 3rem); bottom: clamp(2.5rem, 8vh, 5rem);
  }
  .hero__chips li {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.84rem; font-weight: 600; color: var(--black);
    background: rgba(255,255,255,0.86); backdrop-filter: blur(8px);
    padding: 0.6rem 0.95rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(10px) scale(0.96);
  }
  .hero__chips li::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
  .hero.is-chips-in .hero__chips li { animation: chipIn 0.5s var(--ease-out) forwards; }
  .hero.is-chips-in .hero__chips li:nth-child(1) { animation-delay: 0.0s; }
  .hero.is-chips-in .hero__chips li:nth-child(2) { animation-delay: 0.1s; }
  .hero.is-chips-in .hero__chips li:nth-child(3) { animation-delay: 0.2s; }

  .hero__scroll-hint {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: absolute; z-index: 4; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.85); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5); animation: floatHint 2.4s var(--ease-in-out) infinite;
  }
}
@keyframes chipIn { to { opacity: 1; transform: none; } }

@media (min-width: 768px) and (max-width: 1100px) {
  .hero__headline { font-size: clamp(2.5rem, 4.6vw, 3.4rem); }
}

/* Reduced motion: static room, no sweep/scale, content + chips visible */
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; transform: none; filter: saturate(1.03) brightness(1.02); }
  .hero__sweep, .hero__scroll-hint { animation: none; opacity: 0; }
  .hero__content > * { opacity: 1; transform: none; animation: none; }
  .hero__chips li { opacity: 1; transform: none; animation: none; }
}

/* ====================== SECTION 2, TRUST ====================== */
.trust { background: var(--cream); border-top: 1px solid var(--cream-deep); border-bottom: 1px solid var(--cream-deep); }
.trust__list {
  max-width: var(--maxw); margin-inline: auto; padding: var(--sp-4) var(--gutter);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-4);
}
.trust__item { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; font-size: 0.92rem; color: var(--black); line-height: 1.25; }
.trust__icon { width: 26px; height: 26px; flex: none; color: var(--orange); }

@media (min-width: 768px) {
  .trust__list { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: start; padding-block: var(--sp-4); gap: var(--sp-4) var(--sp-3); justify-content: center; }
  .trust__item { flex-direction: column; text-align: center; gap: 0.5rem; font-size: 0.86rem; }
  .trust__icon { width: 30px; height: 30px; }
}

/* ============== SECTION 3, ANNOTATED EXPLODED PRODUCT ============== */
.plank { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); padding: var(--sp-7) 0; }
.plank__head { max-width: 64ch; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.plank__head .section-lead { margin-inline: auto; }
.plank__sublead { margin: var(--sp-2) auto 0; max-width: 52ch; font-size: 0.95rem; color: var(--ink-500); line-height: 1.55; }
.plank__stage { position: relative; max-width: var(--maxw); margin: var(--sp-5) auto 0; padding-inline: var(--gutter); }
.plank__grid { position: relative; display: grid; gap: var(--sp-4); }

/* Product visual */
.plank__viz {
  position: relative; aspect-ratio: 1600 / 893; width: 100%;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 110% at 50% 16%, #ffffff 0%, #f6ede6 76%, #efe2d9 100%);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.plank__img { position: absolute; inset: 0; }
.plank__img img { width: 100%; height: 100%; object-fit: contain; }
.plank__img--exploded { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.plank__img--assembled { transition: opacity 0.9s var(--ease-out); }
.plank--anim .plank__img--assembled { opacity: 1; }
.plank--anim .plank__img--exploded { opacity: 0; transform: scale(1.03); }
.plank--anim.is-exploded .plank__img--assembled { opacity: 0; }
.plank--anim.is-exploded .plank__img--exploded { opacity: 1; transform: none; }

/* Anchor dots over layers (desktop) */
.plank__dot {
  position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%) scale(0.4);
  background: var(--white); border: 1.5px solid var(--ink-500); opacity: 0;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
  display: none;
}
.plank__dot.is-revealed { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
.plank__dot.is-active { opacity: 1; border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 5px var(--orange-soft); }

/* Connector lines, thin, neutral; orange only on the active/final layer */
.plank__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; display: none; }
.plank__lines line { stroke: var(--ink-500); stroke-width: 1; opacity: 0.28; transition: stroke var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), stroke-dashoffset 0.7s var(--ease-out); }
.plank__lines line.is-active { stroke: var(--orange); opacity: 1; stroke-width: 1.5; }

/* Callouts, premium annotations */
.plank__callouts { display: grid; gap: var(--sp-2); }
.callout {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--white);
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.callout__num { font-weight: 700; font-size: 0.82rem; color: var(--ink-500); flex: none; width: 1.6rem; padding-top: 0.2rem; }
.callout__title { font-size: 1.04rem; font-weight: 700; margin-bottom: 0.25rem; letter-spacing: -0.015em; }
.callout__body { min-width: 0; }
.callout__body > p { font-size: 0.92rem; color: var(--ink-700); line-height: 1.45; }
.callout__badge {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-700);
  background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--radius-pill); padding: 0.2rem 0.55rem;
}
.callout__badge::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-500); }
.callout__badge--accent { color: var(--orange); background: var(--orange-soft); border-color: rgba(241,93,35,0.35); }
.callout__badge--accent::before { background: var(--orange); }
.callout.is-active { border-color: var(--orange); box-shadow: 0 10px 28px rgba(241,93,35,0.16); }
.callout.is-active .callout__num { color: var(--orange); }
/* Accent (Hexaflex) card only looks "selected" when it is the active card, so
   hovering another card never leaves Hexaflex visually selected. It is active
   by default (locked last) when nothing is hovered. */
.callout--accent.is-active { background: linear-gradient(180deg, #fff, var(--orange-soft)); border-color: rgba(241,93,35,0.4); }
.callout--accent.is-active .callout__num { color: var(--orange); }

.plank__scale-note { margin-top: var(--sp-3); text-align: center; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-500); opacity: 0.8; }
.plank__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---------- DESKTOP: annotated diagram (larger viz left, callouts right) ---------- */
@media (min-width: 860px) {
  .plank { padding: var(--sp-8) 0; }
  .plank__stage { margin-top: var(--sp-6); }
  .plank__grid { grid-template-columns: 1.35fr 0.85fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
  .plank__viz { box-shadow: var(--shadow-lg); }
  .plank__dot { display: block; }
  .plank__lines { display: block; }

  .plank__callouts { gap: var(--sp-2); }
  .callout { border-color: transparent; background: transparent; box-shadow: none; padding-left: 0.4rem; }
  .callout.is-active { background: var(--white); border-color: var(--orange); padding-left: var(--sp-4); }
  .plank--anim .callout { opacity: 0; transform: translateX(12px); }
  .plank--anim .callout.is-revealed { opacity: 1; transform: none; }

  .plank__cta { flex-direction: row; justify-content: center; }
  .plank--anim .plank__cta { opacity: 0; transform: translateY(10px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
  .plank--anim.is-complete .plank__cta { opacity: 1; transform: none; }
}

/* Reduced motion / no-JS fallback: show exploded + all callouts + CTA */
@media (prefers-reduced-motion: reduce) {
  .plank__img--assembled { opacity: 0; }
  .plank__img--exploded { opacity: 1; transform: none; }
  .callout, .plank__dot, .plank__lines line, .plank__cta { opacity: 1 !important; transform: none !important; }
  .plank__lines line { opacity: 0.28 !important; }
  .plank__lines line.is-active { opacity: 1 !important; }
}

/* ============== SECTION 3.2, THE FLOORY STANDARD ============== */
.standard { background: var(--cream); padding: var(--sp-7) 0; }
.standard__head { max-width: 60ch; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.standard__head .section-lead { margin-inline: auto; }
/* Journey / pathway, a connected system, not a card grid */
.journey {
  position: relative; max-width: var(--maxw); margin: var(--sp-6) auto 0; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
}
/* MOBILE: vertical timeline (orange line down the left) */
.journey::before {
  content: ""; position: absolute; left: calc(var(--gutter) + 19px); top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(180deg, var(--orange), rgba(241,93,35,0.25)); border-radius: 2px;
}
.jstage { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-3); align-items: start; }
.jstage__node {
  width: 40px; height: 40px; border-radius: 50%; flex: none; position: relative; z-index: 1;
  display: grid; place-content: center; font-weight: 700; font-size: 1rem;
  background: var(--white); border: 2px solid var(--orange); color: var(--orange); box-shadow: 0 0 0 5px var(--cream);
}
.jstage--accent .jstage__node { background: var(--orange); color: #fff; }
.jstage__card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); box-shadow: var(--shadow-sm);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.jstage__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.jstage__kicker { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.4rem; }
.jstage__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.jstage__copy { font-size: 0.92rem; color: var(--ink-700); line-height: 1.5; margin-top: 0.4rem; }
.jstage__proof { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-3); }
.jstage__proof li { font-size: 0.78rem; font-weight: 500; color: var(--ink-700); background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--radius-pill); padding: 0.3rem 0.65rem; }
.jstage--accent .jstage__proof li { background: var(--orange-soft); border-color: rgba(241,93,35,0.3); color: var(--orange); }

/* "What this helps avoid", quiet, muted strip */
.standard__avoid {
  max-width: var(--maxw); margin: var(--sp-5) auto 0; padding: var(--sp-3) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.9rem;
  text-align: center;
}
.standard__avoid-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.standard__avoid ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.7rem; }
.standard__avoid li { position: relative; font-size: 0.85rem; color: var(--ink-500); padding-left: 0.95rem; }
.standard__avoid li::before { content: ", "; position: absolute; left: 0; color: var(--ink-500); opacity: 0.7; }

.standard__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding-inline: var(--gutter); }

@media (min-width: 600px) and (max-width: 979px) {
  .journey { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
  .journey::before { display: none; }
}
/* DESKTOP: horizontal pathway with nodes on a connecting line */
@media (min-width: 980px) {
  .standard { padding: var(--sp-8) 0; }
  .journey { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding-top: 56px; }
  .journey::before {
    left: calc(var(--gutter) + 12.5%); right: calc(var(--gutter) + 12.5%); top: 27px; bottom: auto;
    width: auto; height: 2px; background: linear-gradient(90deg, var(--orange), rgba(241,93,35,0.4));
  }
  .jstage { display: flex; flex-direction: column; align-items: stretch; }
  .jstage__node { margin: 0 auto var(--sp-4); }
  .jstage__card { flex: 1; }
  .standard__avoid { margin-top: var(--sp-6); }
  .standard__cta { flex-direction: row; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
}

/* ============== SECTION 3.3, THE REAL HOME TEST ============== */
.homes { background: var(--cream); padding: var(--sp-7) 0; overflow: hidden; }
.homes__head { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.homes__head .section-lead { margin-inline: auto; }

/* MOBILE-FIRST: swipeable carousel of proof cards */
.homes__cards {
  display: flex; gap: var(--sp-3); margin: var(--sp-5) 0 0;
  padding: 0 var(--gutter) var(--sp-2);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.homes__cards::-webkit-scrollbar { display: none; }

/* Proof card */
.pcard {
  flex: 0 0 84%; scroll-snap-align: center;
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.pcard__visual {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #fff, #f3e8e1);
}
.pcard__visual img { width: 100%; height: 100%; object-fit: cover; }
.pcard__visual--contain { background: radial-gradient(120% 120% at 50% 15%, #fff 0%, #f5ece6 100%); }
.pcard__visual--contain img { object-fit: contain; padding: var(--sp-3); }
.pcard__text { padding: var(--sp-4); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.pcard__title { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; }
.pcard__text p { font-size: 0.95rem; color: var(--ink-700); line-height: 1.45; }
/* Education cards: muted pain line → Floory answer → orange benefit → optional note/proof.
   Strong selectors (.pcard ancestor) so the feature-card overrides don't flatten them. */
.pcard .pcard__text p.pcard__pain { font-size: 0.84rem; color: var(--ink-500); line-height: 1.4; }
.pcard .pcard__text p.pcard__benefit { font-size: 0.9rem; color: var(--black); font-weight: 600; line-height: 1.4; }
.pcard__benefit::before { content: "✓"; color: var(--orange); font-weight: 800; margin-right: 0.4rem; }
.pcard .pcard__text p.pcard__note { font-size: 0.78rem; color: var(--ink-500); line-height: 1.42; background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--radius); padding: 0.55rem 0.7rem; }
.pcard .pcard__text p.pcard__proof { font-size: 0.76rem; color: var(--ink-500); letter-spacing: 0.01em; }
.pcard__tag {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-700);
  background: var(--cream); border: 1px solid var(--cream-deep); padding: 0.32rem 0.7rem; border-radius: var(--radius-pill);
}
.pcard__tag::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-500); }
.pcard__tag--accent { color: var(--orange); border-color: rgba(241,93,35,0.4); background: var(--orange-soft); }
.pcard__tag--accent::before { background: var(--orange); }

/* Motifs (large, soft, never tiny icons) */
.pcard__motif { position: absolute; display: grid; place-content: center; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18)); }
.pcard__motif--drop { right: 8%; top: 50%; transform: translateY(-50%); }
.pcard__motif--sparkle { right: 10%; top: 18%; }
.pcard__motif--beads { right: 8%; bottom: 8%; filter: none; }
.pcard__motif--shield { right: 9%; bottom: 12%; }
.pcard__motif--wave { right: 8%; top: 50%; transform: translateY(-50%); filter: none; }
.pcard__motif--paw { right: 9%; top: 50%; transform: translateY(-50%); }
.pcard__motif--blocks { right: 9%; bottom: 12%; }
.pcard__motif--steps { right: 10%; bottom: 10%; }
.pcard__motif--planks { right: 9%; top: 50%; transform: translateY(-50%); }
.pcard__motif--tiles { right: 9%; top: 50%; transform: translateY(-50%); }
.pcard__motif--click { right: 9%; top: 50%; transform: translateY(-50%); }

/* Slow sheen / wipe across the swatch */
.pcard__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  transform: translateX(-120%); mix-blend-mode: screen;
  animation: sheen 6.5s var(--ease-in-out) 1.2s infinite;
}
.pcard__sheen--fast { animation-duration: 5.5s; animation-delay: 2s; }
@keyframes sheen { 0% { transform: translateX(-120%); } 22%,100% { transform: translateX(120%); } }

.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pcard--accent .pcard__visual--contain { background: radial-gradient(120% 120% at 50% 20%, #fff 0%, #fdeee6 100%); }

/* Mobile dots */
.homes__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--sp-3); padding-inline: var(--gutter); }
.homes__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); border: 0; padding: 0; background: var(--cream-deep); transition: width var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out); }
.homes__dot.is-active { width: 26px; background: var(--orange); }

/* Benefit strip */
.homes__strip {
  max-width: var(--maxw); margin: var(--sp-5) auto 0; padding: var(--sp-3) var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.1rem;
  text-align: center;
}
.homes__strip li { position: relative; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--black); }
.homes__strip li:not(:last-child)::after { content: "·"; position: absolute; right: -0.72rem; color: var(--orange); }

.homes__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); padding-inline: var(--gutter); }

/* ---------- DESKTOP: premium asymmetric grid (feature + 2x2) ---------- */
@media (min-width: 860px) {
  .homes { padding: var(--sp-8) 0; }
  .homes__cards {
    max-width: var(--maxw); margin: var(--sp-6) auto 0; padding: 0 var(--gutter);
    display: grid; gap: var(--sp-4); overflow: visible;
    grid-template-columns: 1.9fr 1fr 1fr;
    grid-template-areas: "feat a b" "feat c d";
  }
  .pcard { flex: none; }
  .pcard--feature { grid-area: feat; }
  .pcard--feature .pcard__visual { aspect-ratio: auto; flex: 1; min-height: 260px; }
  .pcard--feature .pcard__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
  .pcard--feature .pcard__text { padding: var(--sp-5); gap: 0.5rem; }
  .pcard--feature .pcard__text p { font-size: 1.05rem; max-width: 42ch; }
  .pcard__visual { aspect-ratio: 16 / 9; }
  .homes__dots { display: none; }
  .homes__strip { margin-top: var(--sp-6); }
  .homes__cta { flex-direction: row; justify-content: center; margin-top: var(--sp-6); }
}

@media (prefers-reduced-motion: reduce) {
  .pcard__sheen { animation: none; opacity: 0; }
}

/* ============== SECTION 3.5, SEE THE DIFFERENCE (before/after) ============== */
.reveal { background: var(--white); padding: var(--sp-7) 0; border-top: 1px solid var(--cream-deep); }
.reveal__head { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.reveal__head .section-lead { margin-inline: auto; }

.reveal__frame {
  --pos: 55;
  position: relative; max-width: 1100px; margin: var(--sp-5) auto 0;
  width: calc(100% - 2 * var(--gutter));
  aspect-ratio: 1920 / 1072; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--cream-deep);
  touch-action: pan-y; user-select: none;
}
.reveal__layer { position: absolute; inset: 0; }
.reveal__layer img { width: 100%; height: 100%; object-fit: cover; }
.reveal__after img { filter: saturate(1.06) brightness(1.03); }
.reveal__before { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); will-change: clip-path; }
.reveal__before img { filter: saturate(0.82) brightness(0.92); }

.reveal__divider {
  position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%);
  width: 0; transform: translateX(-50%); z-index: 4;
}
.reveal__edge {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,236,222,0.6), rgba(255,255,255,0.96), rgba(255,236,222,0.6));
  box-shadow: 0 0 14px rgba(255,180,130,0.6);
}
.reveal__handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.96); color: var(--orange);
  display: grid; place-content: center; cursor: ew-resize; touch-action: none;
  box-shadow: 0 6px 22px rgba(21,17,15,0.3), 0 0 0 6px rgba(255,255,255,0.2);
  transition: transform var(--t-fast) var(--ease-out);
}
.reveal__handle:hover { transform: translate(-50%,-50%) scale(1.07); }

.reveal__tag {
  position: absolute; top: 14px; z-index: 4;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); background: rgba(21,17,15,0.42); backdrop-filter: blur(4px);
  padding: 0.32rem 0.6rem; border-radius: var(--radius-pill);
}
.reveal__tag--after { left: 14px; }
.reveal__tag--before { right: 14px; opacity: 0.7; }

@media (min-width: 768px) { .reveal { padding: var(--sp-8) 0; } }
@media (prefers-reduced-motion: reduce) { .reveal__before { transition: none; } }

/* ====================== SECTION 3.7, REVIEWS CAROUSEL ====================== */
.reviews { background: var(--cream); padding: var(--sp-7) 0; border-bottom: 1px solid var(--cream-deep); overflow: hidden; }
.reviews__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--sp-5); }
.reviews__aside .section-lead { margin-top: var(--sp-3); }
.reviews__aside-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Carousel */
.reviews__carousel { min-width: 0; }   /* prevent the flex track from blowing out the grid column */
.reviews__viewport { width: 100%; overflow: hidden; border-radius: var(--radius-lg); }
.reviews__track { display: flex; will-change: transform; }
.rcard {
  flex: 0 0 100%; width: 100%; position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); min-height: 300px;
}
.rcard__quote { position: absolute; top: 0.1rem; right: 1.2rem; font-size: 5rem; line-height: 1; color: var(--orange); opacity: 0.16; font-weight: 800; }
.rcard__source { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-500); }
.rcard__source svg { display: block; }
.rcard__text { font-size: 1.18rem; line-height: 1.55; color: var(--black); font-weight: 500; flex: 1; }
.rcard__more { display: inline; font-weight: 600; color: var(--orange); text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.rcard__pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.74rem; font-weight: 600; color: var(--ink-700);
  background: var(--cream); border: 1px solid var(--cream-deep); padding: 0.35rem 0.7rem; border-radius: var(--radius-pill);
}
.rcard__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.rcard__person { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; }
.rcard__avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-content: center; font-weight: 700; color: var(--orange); background: var(--orange-soft); }
.rcard__meta { display: flex; flex-direction: column; line-height: 1.25; }
.rcard__name { font-weight: 700; font-size: 0.95rem; color: var(--black); }
.rcard__date { font-size: 0.8rem; color: var(--ink-500); }

/* Controls */
.reviews__controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.reviews__arrow {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line); color: var(--black); background: var(--white);
  display: grid; place-content: center; transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.reviews__arrow:hover { border-color: var(--black); transform: translateY(-2px); }
.reviews__dots { display: flex; align-items: center; gap: 0.5rem; }
.reviews__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--cream-deep); border: 0; padding: 0; transition: width var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out); }
.reviews__dot.is-active { width: 26px; background: var(--orange); }

/* Marquee */
.reviews__marquee { margin-top: var(--sp-6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reviews__marquee-track { display: inline-flex; gap: var(--sp-3); white-space: nowrap; animation: marquee 42s linear infinite; }
.reviews__marquee:hover .reviews__marquee-track { animation-play-state: paused; }
.reviews__chip { display: inline-flex; align-items: center; font-size: 0.86rem; font-weight: 500; color: var(--ink-700); background: var(--white); border: 1px solid var(--line); padding: 0.6rem 1rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Conversion close */
.reviews__convert { max-width: var(--maxw); margin: var(--sp-6) auto 0; padding-inline: var(--gutter); text-align: center; display: grid; justify-items: center; gap: var(--sp-3); }
.reviews__convert-title { font-size: clamp(1.3rem, 1rem + 1.6vw, 1.85rem); font-weight: 700; letter-spacing: -0.01em; color: var(--black); }
.reviews__convert-sub { font-size: 0.92rem; color: var(--ink-500); max-width: 46ch; }

@media (min-width: 900px) {
  .reviews { padding: var(--sp-8) 0; }
  .reviews__inner { grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); align-items: center; }
  .reviews__carousel { order: -1; }            /* featured card on the left */
  .reviews__controls { justify-content: flex-start; }
  .rcard { padding: var(--sp-6); min-height: 340px; }
  .rcard__text { font-size: 1.32rem; }
}

/* Review modal */
.rmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); }
.rmodal[hidden] { display: none; }
.rmodal__backdrop { position: absolute; inset: 0; background: rgba(21,17,15,0.55); backdrop-filter: blur(2px); animation: fadeIn 0.2s var(--ease-out); }
.rmodal__dialog {
  position: relative; z-index: 1; width: min(560px, 100%); background: var(--white);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3); animation: modalIn 0.28s var(--ease-out);
}
.rmodal__close { position: absolute; top: 0.9rem; right: 0.9rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; color: var(--ink-700); background: var(--cream); }
.rmodal__close:hover { background: var(--cream-deep); }
.rmodal__text { font-size: 1.15rem; line-height: 1.6; color: var(--black); font-weight: 500; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reviews__marquee-track { animation: none; } .rmodal__backdrop, .rmodal__dialog { animation: none; } }

/* ====================== SECTION 3.8, FAQ ====================== */
.faq { background: var(--white); padding: var(--sp-7) 0; }
.faq__inner { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
.faq__head { text-align: center; margin-bottom: var(--sp-5); }
.faq__head .section-lead { margin-inline: auto; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) 0; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--black); min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--orange); border-radius: 2px; transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out); }
.faq__icon::before { top: 9px; left: 2px; right: 2px; height: 2px; }
.faq__icon::after { left: 9px; top: 2px; bottom: 2px; width: 2px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__body { padding: 0 0 var(--sp-4); }
.faq__body p { font-size: 0.98rem; color: var(--ink-700); line-height: 1.6; max-width: 64ch; }
.faq__item summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.faq__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.faq__cta span { width: 100%; text-align: center; font-weight: 600; color: var(--ink-700); margin-bottom: 0.2rem; }
@media (min-width: 560px) { .faq__cta span { width: auto; margin-bottom: 0; margin-right: 0.4rem; } }
@media (min-width: 768px) { .faq { padding: var(--sp-8) 0; } }

@media (prefers-reduced-motion: reduce) { .faq__icon::before, .faq__icon::after { transition: none; } }

/* ====================== SECTION 4, ESTIMATE ====================== */
.estimate { background: var(--cream); padding: var(--sp-7) 0; }
.estimate__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: var(--sp-5);
}
/* Let grid tracks shrink to the viewport instead of being forced wide by content min-width */
.estimate__inner > * { min-width: 0; }
.estimate__steps { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.estimate__steps li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; color: var(--black); }
.estimate__steps span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: var(--white); display: grid; place-content: center; font-weight: 700; font-size: 0.9rem; }
.estimate__reassure { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: var(--sp-4); font-size: 0.9rem; color: var(--ink-500); max-width: 46ch; }
.estimate__reassure svg { flex: none; color: var(--orange); margin-top: 2px; }

.estimate__panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-md);
  display: grid; gap: var(--sp-3); align-content: start;
}
.estimate__panel-label { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.estimate__panel-sub { font-size: 0.92rem; color: var(--ink-500); margin-top: -0.4rem; margin-bottom: 0.3rem; }
.estimate__fast { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: var(--sp-2); font-size: 0.92rem; color: var(--ink-500); }
.estimate__fast a { font-weight: 600; color: var(--orange); }
.estimate__fast a:hover { text-decoration: underline; }
.estimate__dot { color: var(--line); }

@media (min-width: 768px) {
  .estimate { padding: var(--sp-8) 0; }
  .estimate__panel { padding: var(--sp-6); }
}
/* Two-column estimate only once there is genuine room (avoids the panel column
   being squeezed narrower than its content on tablet-portrait widths). */
@media (min-width: 900px) {
  .estimate__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); align-items: center; }
}

/* Leave room for sticky mobile CTA so it never covers the footer/last CTA */
@media (max-width: 979px) {
  body.has-sticky-cta { padding-bottom: var(--sticky-cta-h); }
}

/* ============== PRICING ANCHOR ============== */
.priceanchor { background: var(--white); border-bottom: 1px solid var(--cream-deep); padding: var(--sp-4) 0; }
.priceanchor__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.priceanchor__lead { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.priceanchor__from { color: var(--ink-500); font-weight: 500; font-size: 0.98rem; }
.priceanchor__lead strong { font-size: 1.7rem; font-weight: 800; color: var(--black); letter-spacing: -0.02em; }
.priceanchor__lead strong span { font-size: 1rem; font-weight: 600; color: var(--ink-500); }
.priceanchor__note { font-size: 0.9rem; color: var(--ink-500); max-width: 62ch; line-height: 1.5; }
@media (min-width: 820px) {
  .priceanchor__inner { flex-direction: row; align-items: center; gap: var(--sp-5); }
  .priceanchor__lead { flex: none; }
  .priceanchor__note { flex: 1; }
}

/* ============== SECTION 3.6, HOW IT WORKS ============== */
.how { background: var(--white); padding: var(--sp-7) 0; }
.how__head { max-width: 60ch; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.how__head .section-lead { margin-inline: auto; }
.how__grid { max-width: var(--maxw); margin: var(--sp-6) auto 0; padding-inline: var(--gutter); display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.howstep { background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--radius); padding: var(--sp-5); }
.howstep__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; font-weight: 700; background: var(--white); border: 2px solid var(--orange); color: var(--orange); margin-bottom: var(--sp-3); }
.howstep--accent .howstep__num { background: var(--orange); color: #fff; }
.howstep__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.howstep p { font-size: 0.95rem; color: var(--ink-700); line-height: 1.5; }
.how__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding-inline: var(--gutter); }
@media (min-width: 768px) { .how { padding: var(--sp-8) 0; } .how__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .how__cta { flex-direction: row; justify-content: center; } }

/* ============== SECTION 3.4, REAL PROJECTS (styled for when real photos exist) ============== */
.projects { background: var(--cream); padding: var(--sp-8) 0; }
.projects__head { max-width: 60ch; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.projects__head .section-lead { margin-inline: auto; }
.projects__grid { max-width: var(--maxw); margin: var(--sp-6) auto 0; padding-inline: var(--gutter); display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.projects__grid li { border-radius: var(--radius-lg); overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.projects__grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.projects__cta { display: flex; justify-content: center; margin-top: var(--sp-5); padding-inline: var(--gutter); }
@media (min-width: 768px) { .projects__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

/* ============== Reviews, Google rating slot ============== */
.reviews__rating { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; font-weight: 700; color: var(--black); }
.reviews__stars { color: var(--orange); letter-spacing: 1px; font-size: 1.05rem; }
.reviews__rating-text { font-size: 0.95rem; color: var(--ink-700); font-weight: 600; }

/* ============== MALAGA SHOWROOM (compact) ============== */
.showroom { background: var(--white); padding: var(--sp-7) 0; border-top: 1px solid var(--cream-deep); }
.showroom__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--sp-4); align-items: center; }
.showroom__copy .section-lead { margin-top: var(--sp-3); }
.showroom__addr { margin-top: var(--sp-3); font-weight: 600; color: var(--black); font-size: 0.95rem; }
.showroom__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
@media (min-width: 860px) {
  .showroom { padding: var(--sp-8) 0; }
  .showroom__inner { grid-template-columns: 1.4fr 0.9fr; gap: var(--sp-6); }
  .showroom__actions { justify-content: flex-end; }
}

/* ====== SECTION 3.2, FLOORY HYBRID VS THE USUAL (interactive editorial) ====== */
.vs { background: linear-gradient(180deg, var(--cream) 0%, #f7ece5 100%); padding: var(--sp-7) 0; overflow: hidden; }
.vs__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--sp-5); }
.vs__rail, .vs__stage { min-width: 0; }   /* let the pill row scroll instead of widening the grid */

/* ---- Rail (story + tabs + chips + CTA) ---- */
.vs__hook { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 800; letter-spacing: -0.025em; color: var(--orange); margin-top: var(--sp-2); line-height: 1.15; }
.vs__lead { font-size: var(--fs-lead); color: var(--ink-700); line-height: 1.6; margin-top: var(--sp-3); max-width: 52ch; }

/* Tab selector, mobile: horizontal scroll pills */
.vstabs { display: flex; gap: 0.5rem; margin-top: var(--sp-4); overflow-x: auto; scrollbar-width: none; padding-bottom: 0.3rem; }
.vstabs::-webkit-scrollbar { display: none; }
.vstab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.95rem; min-height: 44px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink-700);
  font-weight: 600; font-size: 0.9rem; white-space: nowrap; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.vstab:hover { border-color: var(--ink-500); }
.vstab.is-active { border-color: var(--orange); color: var(--black); box-shadow: 0 0 0 3px var(--orange-soft); }
.vstab__sw { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid rgba(0,0,0,0.08); }
.vstab__chev { display: none; }
.vstab__sw--carpet { background: repeating-linear-gradient(45deg, #e3d8c8 0 2px, #d6c8b2 2px 4px); }
.vstab__sw--laminate { background: linear-gradient(90deg, #ecdcc1, #ddc8a4); }
.vstab__sw--vinyl { background: linear-gradient(120deg, #d8d2c6, #c7bfb0); }
.vstab__sw--hybrid { background: linear-gradient(100deg, #d3bd97, #c2ab84); }

/* Proof chips */
.vs__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--sp-4); }
.vs__chips li { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-700); background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius-pill); padding: 0.32rem 0.7rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.vs__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

.vs__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.vs__aside { min-width: 0; }

/* ---- Stage (active comparison panel) ---- */
.vs__stage { position: relative; min-width: 0; }
.vspanel { display: block; }
.vspanel[hidden] { display: none; }
.vspanel.is-active { animation: vsFade 0.4s var(--ease-out); }
@keyframes vsFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Paired before -> Floory visual */
.vspanel__visual {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 7;
}
.vstile { position: relative; margin: 0; overflow: hidden; }
.vstile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vstile__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: rgba(21,17,15,0.5); backdrop-filter: blur(4px);
  padding: 0.28rem 0.6rem; border-radius: var(--radius-pill);
}
.vstile__tag--won { background: var(--orange); }
.vstile__name {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  font-size: 0.9rem; font-weight: 700; color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
/* The "usual" material placeholders, tasteful textures, swap via data-img */
.vstile--carpet { background: repeating-linear-gradient(45deg, #e3d8c8 0 4px, #d8cbb6 4px 8px); filter: saturate(0.92); }
.vstile--carpet::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 30% 20%, rgba(255,250,242,0.5), transparent 70%); }
.vstile--laminate { background: linear-gradient(180deg, #ecdcc1, #ddc8a4); }
.vstile--laminate::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(91deg, rgba(120,90,50,0.06) 0 1px, transparent 1px 46px); }
.vstile--vinyl { background: linear-gradient(120deg, #dad4c8 0%, #c9c1b3 60%, #d3ccbf 100%); }
.vstile--vinyl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%); }
.vstile--hybrid { background: linear-gradient(100deg, #d3bd97, #c2ab84); }
.vstile--hybrid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(90,80,60,0.12), transparent 40%); }
.vstile--won img { filter: saturate(1.05) brightness(1.03); }
/* central swap badge sits over the seam */
.vspanel__swap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center;
  background: var(--white); color: var(--orange); box-shadow: 0 6px 18px rgba(21,17,15,0.25);
}

.vspanel__headline { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--sp-4); }
.vspanel__cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-3); }
.vspanel__label { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; }
.vspanel__col--usual .vspanel__label { color: var(--ink-500); }
.vspanel__col--won .vspanel__label { color: var(--orange); }
.vspanel__col ul { display: grid; gap: 0.5rem; }
.vspanel__col li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.4; }
.vspanel__col--usual li { color: var(--ink-500); }
.vspanel__col--usual li::before { content: "–"; position: absolute; left: 0.3rem; color: var(--ink-500); }
.vspanel__col--won li { color: var(--black); }
.vspanel__col--won li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }

/* ---- Desktop: editorial split (rail + aside left, stage right) ---- */
@media (min-width: 900px) {
  .vs { padding: var(--sp-8) 0; }
  .vs__inner {
    grid-template-columns: 0.82fr 1.18fr; grid-template-rows: auto 1fr;
    grid-template-areas: "rail stage" "aside stage";
    column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: var(--sp-4); align-items: start;
  }
  .vs__rail { grid-area: rail; }
  .vs__stage { grid-area: stage; }
  .vs__aside { grid-area: aside; align-self: start; }
  /* Tabs become a vertical premium list on desktop */
  .vstabs { flex-direction: column; gap: 0.5rem; overflow: visible; }
  .vstab { width: 100%; justify-content: flex-start; padding: 0.85rem 1.1rem; min-height: 52px; font-size: 0.98rem; position: relative; }
  .vstab__chev { display: block; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0; transition: opacity var(--t-fast); color: var(--orange); }
  .vstab.is-active .vstab__chev { opacity: 1; }
  .vspanel__visual { aspect-ratio: 16 / 8; }
  .vspanel__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .vspanel__col--won { position: relative; }
}
@media (prefers-reduced-motion: reduce) { .vspanel.is-active { animation: none; } }

/* ============================================================
   COMPARISON · "Not all hybrid flooring is built the same."
   Premium split: Floory panel constant + dominant; the challenger
   panel swaps with the tab. Independent of .vs* (Option A) styles.
   ============================================================ */
.vsb { background: linear-gradient(180deg, var(--cream) 0%, #f7ece5 100%); padding: var(--sp-7) 0; overflow: hidden; }
.vsb__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Header, centered editorial */
.vsb__head { max-width: 60ch; margin: 0 auto; text-align: center; }
.vsb__head .section-eyebrow { display: inline-block; }
.vsb__lead { color: var(--ink-700); margin-top: var(--sp-3); line-height: 1.6; }

/* Compare-with selector */
.vsb__select { margin: var(--sp-5) auto 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.vsb__select-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.vsbtabs { display: flex; gap: 0.5rem; max-width: 100%; overflow-x: auto; padding: 0.25rem 0.25rem 0.6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.vsbtabs::-webkit-scrollbar { display: none; }
.vsbtab {
  flex: 0 0 auto; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.05rem; min-height: 46px; border-radius: var(--radius-pill);
  background: var(--white); border: 1.5px solid #ece0d6; color: var(--black);
  font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.vsbtab:hover { border-color: #e0b9a4; }
.vsbtab.is-active { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: var(--shadow-cta); }
.vsbtab__sw { width: 15px; height: 15px; border-radius: 5px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(21,17,15,0.12); }
.vsbtab.is-active .vsbtab__sw { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
.vsbtab__sw--hybrid { background: linear-gradient(100deg, #c9b58f, #b39a72); }
.vsbtab__sw--carpet { background: repeating-linear-gradient(45deg, #e3d8c8 0 2px, #d6c8b2 2px 4px); }
.vsbtab__sw--laminate { background: linear-gradient(90deg, #ecdcc1, #ddc8a4); }
.vsbtab__sw--timber { background: linear-gradient(120deg, #b5793f, #8a5526); }

/* Split stage */
.vsb__stage { margin: var(--sp-5) auto 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: stretch; min-width: 0; }
.vsb__alt { position: relative; min-width: 0; touch-action: pan-y; }
.vsbfloory, .vsbpanel { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-width: 0; display: flex; flex-direction: column; height: 100%; }

/* "vs" badge on the seam */
.vsb__vs {
  justify-self: center; align-self: center; z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center;
  background: var(--white); border: 1px solid var(--cream-deep); box-shadow: var(--shadow-md);
  font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange);
}

/* Floory panel, elevated, dominant */
.vsbfloory { background: var(--white); border: 1px solid rgba(241,93,35,0.28); box-shadow: var(--shadow-lg); }
.vsbfloory::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--orange); z-index: 2; }
.vsbfloory__tag { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--orange); padding: 0.34rem 0.7rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-cta); }
.vsbfloory__visual { margin: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vsbfloory__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vsbfloory__body { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.vsbfloory__title { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; }
.vsbfloory__sub { color: var(--orange); font-weight: 600; font-size: 0.98rem; }
.vsbfloory__list { display: grid; gap: 0.6rem; margin-top: var(--sp-3); }
.vsbfloory__list li { position: relative; padding-left: 1.9rem; font-size: 0.92rem; line-height: 1.4; color: var(--black); }
.vsbfloory__list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); }
.vsbfloory__list li::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Challenger panel, recessed, muted */
.vsbpanel { background: #f3ebe4; border: 1px solid var(--cream-deep); }
.vsbpanel[hidden] { display: none; }
.vsbpanel.is-active { animation: vsbFade 0.4s ease both; }
@keyframes vsbFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vsbpanel__visual { margin: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; filter: saturate(0.7) brightness(0.98); }
.vsbpanel__visual::after { content: ""; position: absolute; inset: 0; background: rgba(110,100,90,0.14); }
.vsbpanel__tag { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); background: rgba(255,255,255,0.85); padding: 0.3rem 0.6rem; border-radius: var(--radius-pill); }
.vsbpanel__matname { position: absolute; left: 0.9rem; bottom: 0.7rem; z-index: 2; font-size: 0.82rem; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.vsbpanel__body { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.vsbpanel__title { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-700); }
.vsbpanel__list { display: grid; gap: 0.55rem; margin-top: var(--sp-3); }
.vsbpanel__list li { position: relative; padding-left: 1.7rem; font-size: 0.9rem; line-height: 1.4; color: var(--ink-700); }
.vsbpanel__list li::before { content: "\2715"; position: absolute; left: 0; top: 0; color: #b06a5f; font-weight: 700; font-size: 0.85rem; }
.vsbpanel__answer { margin-top: auto; background: var(--orange-soft); border: 1px solid rgba(241,93,35,0.28); border-radius: var(--radius); padding: 0.75rem 0.9rem; font-size: 0.88rem; line-height: 1.45; color: var(--black); }
.vsbpanel__answer b { color: var(--orange); }

/* Proof chips + next step */
.vsb__foot { margin: var(--sp-5) auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.vsb__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.vsb__chips li { font-size: 0.8rem; font-weight: 600; color: var(--ink-700); background: var(--white); border: 1px solid #ece0d6; padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); }
.vsb__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.vsb__support { font-size: 0.9rem; color: var(--ink-500); max-width: 54ch; line-height: 1.5; }
.vsb__fineprint { font-size: 0.76rem; color: var(--ink-500); max-width: 60ch; line-height: 1.5; }

/* Challenger material textures (muted) */
.vsbmat--hybrid { background: linear-gradient(100deg, #c9b58f, #b39a72); }
.vsbmat--carpet { background: repeating-linear-gradient(45deg, #ddd0bd 0 5px, #cabfa8 5px 10px); }
.vsbmat--laminate { background: linear-gradient(180deg, #e7d6ba, #d4bd97); }
.vsbmat--timber { background: linear-gradient(115deg, #b5793f 0%, #9a6330 55%, #7f4f24 100%); }

/* Desktop: side-by-side split with the vs badge on the seam */
@media (min-width: 880px) {
  .vsb { padding: var(--sp-8) 0; }
  .vsb__stage { grid-template-columns: 1.08fr auto 0.92fr; gap: var(--sp-4); max-width: 1060px; }
  .vsb__vs { width: 54px; height: 54px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { .vsbpanel.is-active { animation: none; } }

/* Compact How It Works strip */
.how--strip { background: var(--white); padding: var(--sp-6) 0; }
.how--strip .how__head { margin-bottom: 0; }
.how--strip .how__grid { margin-top: var(--sp-4); }
.how--strip .howstep { padding: var(--sp-4); }
@media (min-width: 768px) { .how--strip { padding: var(--sp-7) 0; } }

/* ============================================================
   Why Floory hybrid (premium product-marketing section)
   ============================================================ */
.why { background: var(--cream); padding: var(--sp-7) 0; }
@media (min-width: 768px) { .why { padding: var(--sp-8) 0; } }
.why__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.why__head { max-width: 64ch; }
.why__head .section-lead { margin-top: var(--sp-3); }

/* Compact spec / stat cards */
.why__specs { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 760px) { .why__specs { grid-template-columns: repeat(4, 1fr); } }
.why__specs li { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.why__specs b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--orange); }
.why__specs span { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--ink-700); }

/* "What Floory solves" cards */
.why__solve { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 760px) { .why__solve { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
.solve { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.solve__icon { display: inline-grid; place-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--orange-soft); color: var(--orange); margin-bottom: var(--sp-3); }
.solve__icon svg { width: 24px; height: 24px; }
.solve h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; }
.solve p { margin-top: 0.5rem; font-size: 0.94rem; line-height: 1.55; color: var(--ink-700); }

/* Compact comparison */
.why__compare { margin-top: var(--sp-6); }
.why__compare-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.015em; text-align: center; }
.why__compare-sub { display: none; }   /* mobile-only framing line, shown in the mobile media query */
.cmp { margin: var(--sp-4) auto 0; max-width: 760px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--cream-deep); box-shadow: var(--shadow-md); overflow: hidden; }
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp__table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
.cmp__table th, .cmp__table td { padding: 0.85rem 0.8rem; text-align: center; border-bottom: 1px solid var(--cream-deep); vertical-align: middle; }
.cmp__table tbody tr:last-child th, .cmp__table tbody tr:last-child td { border-bottom: 0; }
.cmp__table tbody tr:hover td { background: var(--cream); }
.cmp__feat { text-align: left; font-weight: 600; font-size: 0.9rem; color: var(--black); position: sticky; left: 0; background: var(--white); min-width: 200px; border-right: 1px solid var(--cream-deep); }
.cmp__table tbody tr:hover .cmp__feat { background: var(--cream); }
.cmp__col { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); padding-top: 1.1rem; padding-bottom: 0.9rem; }
.cmp__col--floory { position: relative; color: #fff; background: var(--orange); font-size: 0.82rem; }
.cmp__best { display: block; width: max-content; margin: 0 auto 0.35rem; padding: 0.12rem 0.45rem; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); background: #fff; border-radius: var(--radius-pill); }
.cmp__col--floory, .cmp__cell--floory { box-shadow: inset 1px 0 0 var(--orange), inset -1px 0 0 var(--orange); }
.cmp__cell--floory { background: var(--orange-soft); }
.cmp__table tbody tr:hover .cmp__cell--floory { background: #fde3d6; }
.cmp__table tbody tr:last-child .cmp__cell--floory { box-shadow: inset 1px 0 0 var(--orange), inset -1px 0 0 var(--orange), inset 0 -2px 0 var(--orange); }
.cmp__cell--floory .mk-txt { color: var(--orange); }
.cmp__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.6rem; margin-top: var(--sp-3); font-size: 0.78rem; color: var(--ink-500); }
.cmp__legend .mk { width: 16px; height: 16px; }
.cmp__legend .mk--yes::after { left: 5px; top: 3px; width: 4px; height: 7px; }

/* Marks: tick / cross / varies (shared) */
.mk { display: inline-block; width: 24px; height: 24px; border-radius: 50%; position: relative; vertical-align: middle; }
.mk--yes { background: var(--orange); box-shadow: 0 2px 8px rgba(241,93,35,0.35); }
.mk--yes::after { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mk--no { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cream-deep); }
.mk--no::before, .mk--no::after { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 1.5px; border-radius: 2px; background: var(--ink-500); }
.mk--no::before { transform: rotate(45deg); }
.mk--no::after { transform: rotate(-45deg); }
.mk-varies { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--radius-pill); padding: 0.2rem 0.5rem; }
.mk-txt { font-weight: 800; font-size: 0.8rem; color: var(--black); }

/* Hidden on desktop; the mobile guided-comparison component replaces the table below 760px. */
.cmpm { display: none; }

/* ---- Mobile (<=759px): hide the desktop table; show the premium guided comparison ---- */
@media (max-width: 759px) {
  .why__compare-title { font-size: 1.22rem; letter-spacing: -0.02em; }
  .why__compare-sub { display: block; max-width: 32ch; margin: 0.5rem auto 0; text-align: center; font-size: 0.92rem; line-height: 1.5; color: var(--ink-500); }

  .cmp, .cmp__legend { display: none; }                 /* desktop table + its legend are replaced on mobile */
  .cmpm { display: block; max-width: 480px; margin: var(--sp-5) auto 0; }

  /* Segmented tab control */
  .cmpm__tabs { display: flex; gap: 4px; padding: 4px; background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--radius-pill); }
  .cmpm__tab { flex: 1; min-height: 40px; padding: 0.5rem 0.35rem; border: 0; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700; color: var(--ink-700); background: transparent; cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
  .cmpm__tab.is-active { background: #fff; color: var(--black); box-shadow: var(--shadow-sm); }
  .cmpm__tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

  /* Panel = one clean white card */
  .cmpm__panel { margin-top: var(--sp-4); background: var(--white); border: 1px solid var(--cream-deep); border-radius: 18px; box-shadow: 0 6px 22px rgba(21,17,15,0.06); overflow: hidden; }
  .cmpm__panel[hidden] { display: none; }
  .cmpm.is-enhanced .cmpm__panel.is-active { animation: cmpmFade 0.28s var(--ease-out); }

  /* Header: two sides, Floory dominant */
  .cmpm__head { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cream-deep); }
  .cmpm__side { padding: 0.85rem 1rem; background: var(--white); }
  .cmpm__side b { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; color: var(--black); }
  .cmpm__side--floory { background: var(--orange-soft); }
  .cmpm__side--floory b { color: var(--orange); }
  .cmpm__best { display: block; width: max-content; margin-bottom: 0.3rem; padding: 0.13rem 0.45rem; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--orange); border-radius: var(--radius-pill); }

  .cmpm__summary { padding: 0.7rem 1rem 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-700); }

  .cmpm__rows { margin: 0.55rem 0 0; }
  .cmpm__row { padding: 0.65rem 1rem; border-top: 1px solid #f4ece7; }
  .cmpm__rows .cmpm__row:first-child { border-top: 0; }
  .cmpm__feat { font-size: 0.92rem; font-weight: 600; color: var(--black); margin-bottom: 0.5rem; line-height: 1.3; }
  .cmpm__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

  /* Status chips: alternatives stay calm/neutral; Floory side gets the orange accent */
  .cmpm__chip { display: inline-flex; align-items: center; gap: 0.3rem; width: max-content; max-width: 100%; padding: 0.3rem 0.62rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600; line-height: 1.1; color: var(--ink-500); background: var(--cream); border: 1px solid var(--cream-deep); }
  .cmpm__chip--val { color: var(--ink-700); font-weight: 700; }
  .cmpm__chip--yes svg { color: var(--ink-500); }
  .cmpm__chip--floory { color: #fff; background: var(--orange); border-color: var(--orange); box-shadow: 0 2px 8px rgba(241,93,35,0.28); }
  .cmpm__chip--floory svg { color: #fff; }
  .cmpm__chip--floory.cmpm__chip--val { color: var(--orange); background: var(--orange-soft); border-color: var(--orange-soft); box-shadow: none; }

  /* Show full comparison (rows 7-8 collapsed by default) */
  .cmpm__row--extra { display: none; }
  .cmpm__panel.is-expanded .cmpm__row--extra { display: block; }
  .cmpm__more { width: 100%; min-height: 44px; padding: 0.7rem; border: 0; border-top: 1px solid var(--cream-deep); background: var(--white); color: var(--orange); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
  .cmpm__more:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

  /* No-JS fallback: if JS hasn't enhanced, reveal every panel + every row so nothing is hidden */
  .cmpm:not(.is-enhanced) .cmpm__panel[hidden] { display: block; }
  .cmpm:not(.is-enhanced) .cmpm__row--extra { display: block; }
  .cmpm:not(.is-enhanced) .cmpm__more { display: none; }
  .cmpm:not(.is-enhanced) .cmpm__panel { margin-top: var(--sp-3); }
}
@keyframes cmpmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Premium conversion CTA strip */
.why__cta { margin-top: var(--sp-6); background: var(--black); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-5); display: grid; gap: var(--sp-4); box-shadow: var(--shadow-md); }
@media (min-width: 760px) { .why__cta { grid-template-columns: 1fr auto; align-items: center; padding: var(--sp-5) var(--sp-6); } }
.why__cta-copy b { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.why__cta-copy span { display: block; margin-top: 0.3rem; font-size: 0.92rem; color: rgba(255,255,255,0.72); }
.why__cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Estimate panel: $100 priority-measure deposit note */
.estimate__deposit { margin-top: var(--sp-3); font-size: 0.84rem; line-height: 1.45; color: var(--ink-500); text-align: center; }

/* Showroom: address + opening-hours card */
.showroom__cta { margin-top: var(--sp-4); }
.showroom__hours { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm); }
.showroom__hours-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.showroom__hours-addr { margin-top: var(--sp-2); font-size: 0.92rem; color: var(--ink-700); line-height: 1.5; }
.hours { margin-top: var(--sp-3); display: grid; gap: 0; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--cream-deep); font-size: 0.9rem; }
.hours__row:last-child { border-bottom: 0; }
.hours__row dt { color: var(--ink-700); font-weight: 600; }
.hours__row dd { color: var(--black); font-weight: 700; }
.hours__row--closed dd { color: var(--ink-500); font-weight: 600; }

/* ---- Floory Inspection Package (onsite support, sits below the showroom) ---- */
.inspect { background: var(--cream); padding: var(--sp-7) 0; border-top: 1px solid var(--cream-deep); }
.inspect__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--sp-5); align-items: center; }
.inspect__copy .section-lead { margin-top: var(--sp-3); max-width: 46ch; }
.inspect__deposit { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: var(--sp-4); font-size: 0.92rem; font-weight: 600; color: var(--ink-700); }
.inspect__deposit svg { flex: none; color: var(--orange); margin-top: 1px; }
.inspect__cta { margin-top: var(--sp-4); }
.inspect__list { display: grid; gap: 0.7rem; background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); margin: 0; }
.inspect__list li { position: relative; padding-left: 1.9rem; font-size: 0.96rem; color: var(--ink-700); line-height: 1.45; }
.inspect__list li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-soft); }
.inspect__list li::after { content: ""; position: absolute; left: 6.5px; top: 4px; width: 5px; height: 9px; border: solid var(--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 860px) {
  .inspect { padding: var(--sp-8) 0; }
  .inspect__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-6); }
}

/* ============================================================
   Mobile rhythm: tighter, consistent vertical spacing so sections
   read as a continuous premium flow (no large blank gaps).
   Desktop padding (min-width breakpoints above) is untouched.
   ============================================================ */
@media (max-width: 767px) {
  .plank, .reviews, .why, .showroom, .inspect, .estimate, .faq, .how {
    padding-top: var(--sp-6); padding-bottom: var(--sp-6);
  }
  .plank__stage { margin-top: var(--sp-4); }
  .plank__cta { margin-top: var(--sp-5); }
}