/* Homepage v2 (index_v2.php) — sections below the hero. Loaded only on that page; uses the silver
   tokens from theme.css (--silver #c5c5c5, --silver-deep, --silver-light). */

.v2-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.v2-kicker::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--silver-deep)); }

/* ── Promise strip (USP) ── */
.v2-promise { position: relative; padding-block: clamp(36px, 5vw, 64px); background: linear-gradient(180deg, #fafafa, #ffffff); }
.v2-promise::before, .v2-promise::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--silver) 20%, var(--silver) 80%, transparent); }
.v2-promise::before { top: 0; } .v2-promise::after { bottom: 0; }
.v2-promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.v2-promise-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px clamp(12px, 2vw, 28px); }
.v2-promise-item + .v2-promise-item::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2.5px; background: linear-gradient(180deg, transparent, var(--silver), transparent); }
.v2-promise-ico { width: 58px; height: 58px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffff, var(--silver-light) 70%); box-shadow: inset 0 0 0 1px var(--silver), 0 10px 24px -14px rgba(0,0,0,.35); transition: transform .5s var(--ease-out); }
.v2-promise-ico .ico { width: 24px; height: 24px; stroke-width: 1.2; color: #2b2b2b; }
.v2-promise-item:hover .v2-promise-ico { transform: translateY(-3px) rotate(-6deg); }
.v2-promise-item b { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; }
.v2-promise-item > span:last-child { font-size: 13px; color: var(--dim); }

/* ── Editorial: photo + overlapping copy card ── */
.v2-edit { overflow-x: clip; padding-bottom: clamp(40px, 5vw, 72px); }
.v2-edit-grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.v2-edit-media { grid-column: 1 / span 7; grid-row: 1; position: relative; aspect-ratio: 4 / 5; max-height: 720px; width: 100%; border-radius: var(--radius-lg); overflow: hidden; }
.v2-edit-media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.v2-edit-media::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.45); border-radius: calc(var(--radius-lg) - 8px); pointer-events: none; }
.v2-edit-card { grid-column: 6 / span 7; grid-row: 1; position: relative; z-index: 12; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--silver-light); border-radius: var(--radius-lg); padding: clamp(32px, 4.5vw, 64px); box-shadow: 0 40px 80px -48px rgba(0,0,0,.45); }
.v2-edit-card::before { content: ""; position: absolute; left: clamp(32px, 4.5vw, 64px); right: clamp(32px, 4.5vw, 64px); top: 0; height: 2px; background: linear-gradient(90deg, var(--silver-deep), var(--silver-light)); border-radius: 0 0 2px 2px; }
.v2-edit-card h2 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.02; margin: 18px 0 18px; }
.v2-edit-card p { color: var(--dim); margin: 0 0 30px; max-width: 460px; font-size: 16px; line-height: 1.7; }
.v2-edit-card .btn { gap: 10px; }
.v2-edit-card .btn .ico { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.v2-edit-card .btn:hover .ico { transform: translateX(4px); }

/* ── Reviews rail ── */
.v2-reviews { background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%); overflow: hidden; }
.v2-reviews-head { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 24px; text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.v2-reviews-head .v2-kicker::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--silver-deep), transparent); }   /* centred title: rule on both sides */
.v2-reviews-head .sec-title { margin-top: 14px; }
.v2-reviews-rating { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; font-size: 14px; color: var(--dim); }
.v2-reviews .stars { display: inline-flex; gap: 2px; }
.v2-reviews .stars .ico { width: 14px; height: 14px; fill: var(--silver-deep); stroke: none; }
.v2-rail-nav { position: absolute; right: 0; bottom: 0; display: flex; gap: 10px; }   /* arrows stay at the right; the heading is centred */
.v2-rail-btn { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--silver); background: #fff; color: var(--ink); transition: background var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur); }
.v2-rail-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.v2-rail-btn:disabled { opacity: .35; cursor: default; }
.v2-rail-btn .ico { width: 18px; height: 18px; }

/* the rail stays inside the content width: 3 whole cards on desktop, 2 on tablet, peek on mobile */
.v2-rail { --rail-gap: clamp(16px, 2vw, 24px); --rail-cols: 3;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols)); gap: var(--rail-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 28px; scrollbar-width: none; }
.v2-rail::-webkit-scrollbar { display: none; }
.v2-rail:focus-visible { outline: 2px solid var(--silver-deep); outline-offset: 4px; }
@media (max-width: 1023px) { .v2-rail { --rail-cols: 2; } }

.v2-quote { position: relative; scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3vw, 38px); background: #fff; border: 1px solid var(--silver-light); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -36px rgba(0,0,0,.35); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color var(--dur); }
.v2-quote:hover { transform: translateY(-4px); border-color: var(--silver); box-shadow: 0 32px 60px -36px rgba(0,0,0,.45); }
.v2-quote-mark { position: absolute; top: 10px; right: 24px; font-family: var(--font-display); font-size: 110px; line-height: 1; color: var(--silver-light); pointer-events: none; }
.v2-quote p { position: relative; margin: 0; flex: 1; font-family: var(--font-display); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; }
.v2-quote footer { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--silver-light); font-size: 13px; }
.v2-quote footer b { display: block; font-size: 14px; text-transform: capitalize; }
.v2-quote footer span { color: var(--dim); }
.v2-quote .quote-initial { background: radial-gradient(circle at 30% 25%, #fff, var(--silver) 85%); box-shadow: inset 0 0 0 1px var(--silver-deep); }

/* ── Newsletter: framed silver panel ── */
.v2-news .news { background: linear-gradient(180deg, #f6f6f6, #ffffff 60%); padding-top: clamp(8px, 2vw, 24px); }
.v2-news .news .wrap { position: relative; width: auto; max-width: calc(var(--wrap) - 160px); padding: clamp(44px, 6vw, 88px) clamp(20px, 5vw, 72px); border-radius: calc(var(--radius-lg) + 8px); overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #ededed 45%, #d6d6d6 100%); box-shadow: inset 0 0 0 1px var(--silver), 0 40px 80px -56px rgba(0,0,0,.5); }
.v2-news .news .wrap::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.75); border-radius: calc(var(--radius-lg) - 2px); pointer-events: none; }
.v2-news .news .eyebrow { letter-spacing: .26em; text-transform: uppercase; font-size: 12px; color: #4a4a4a; }
.v2-news .news .sec-title { font-size: clamp(34px, 4.6vw, 64px); margin-top: 12px; }
.v2-news .news .sec-sub { color: #4a4a4a; max-width: 520px; }
.v2-news .news form { position: relative; box-shadow: 0 18px 36px -24px rgba(0,0,0,.4); border-color: var(--silver); }

/* ── Tablet ── */
@media (max-width: 1023px) {
  .v2-promise-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .v2-promise-item:nth-child(odd)::before { display: none; }
  .v2-edit-media { grid-column: 1 / span 8; }
  .v2-edit-card { grid-column: 5 / span 8; }
  .v2-news .news .wrap { max-width: none; margin-inline: var(--gutter); }
}

/* ── Phone: card tucks under the photo, rail shows one card with the next peeking ── */
@media (max-width: 767px) {
  .v2-promise-item { padding-inline: 8px; }
  .v2-promise-ico { width: 50px; height: 50px; }
  .v2-promise-item b { font-size: 17px; }
  .v2-promise-item > span:last-child { font-size: 12px; }

  .v2-edit-grid { grid-template-columns: 1fr; }
  .v2-edit-media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 4.4; }
  .v2-edit-card { grid-column: 1; grid-row: 2; margin: -64px 14px 0; padding: 30px 24px 32px; }
  .v2-edit-card::before { left: 24px; right: 24px; }

  .v2-reviews-head { align-items: center; flex-direction: column; }
  .v2-rail-nav { display: none; }
  .v2-rail { grid-auto-columns: 84%; }
  .v2-quote-mark { font-size: 84px; right: 18px; }

  .v2-news .news .wrap { margin-inline: 12px; padding-inline: 20px; }
  .v2-news .news .wrap::before { inset: 8px; }
}
@media (max-width: 380px) {
  .v2-promise-grid { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .v2-edit-card { margin-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-quote, .v2-promise-ico { transition: none; }
  .v2-quote:hover, .v2-promise-item:hover .v2-promise-ico { transform: none; }
}
