/* =========================================================
   PGS - Home page (2026-10 redesign). Loaded by index.html only.
   Sample mockups are pure HTML/CSS (no images) and labelled as
   samples, not client work.
   ========================================================= */

/* ---------- Hero sample kit ---------- */
.hv-hero { min-height: auto; }
.hv-kit {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 5 / 4;
  margin-left: auto;
}
.hv-kit__note {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pgs-text-light);
  white-space: nowrap;
}

/* Phone with a captioned clip */
.hv-phone {
  position: absolute;
  left: 34%;
  top: 9%;
  width: 32%;
  aspect-ratio: 9 / 18.5;
  padding: 2.2%;
  border-radius: 28px;
  background: #0b1220;
  box-shadow: 0 30px 60px -20px rgba(15, 35, 56, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  z-index: 3;
}
.hv-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 25%, rgba(20, 184, 166, 0.55), transparent 60%),
    linear-gradient(180deg, #134e4a 0%, #0f2f2c 55%, #0b1a19 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hv-phone__tag {
  position: absolute;
  top: 6%;
  left: 7%;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hv-phone__avatar {
  margin-top: 26%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #e2e8f0 0 18%, transparent 19%),
    radial-gradient(ellipse 34% 26% at 50% 86%, #e2e8f0 0 98%, transparent 100%),
    linear-gradient(160deg, #5eead4, #0d9488);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.hv-phone__wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  margin-top: 9%;
}
.hv-phone__wave i {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: #5eead4;
  height: 30%;
  animation: hv-wave 1.4s ease-in-out infinite;
}
.hv-phone__wave i:nth-child(2) { height: 70%; animation-delay: -0.2s; }
.hv-phone__wave i:nth-child(3) { height: 100%; animation-delay: -0.4s; }
.hv-phone__wave i:nth-child(4) { height: 55%; animation-delay: -0.6s; }
.hv-phone__wave i:nth-child(5) { height: 85%; animation-delay: -0.8s; }
.hv-phone__wave i:nth-child(6) { height: 45%; animation-delay: -1s; }
.hv-phone__wave i:nth-child(7) { height: 65%; animation-delay: -1.2s; }
@keyframes hv-wave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
.hv-phone__caption {
  margin: auto 8% 0;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: clamp(0.75rem, 1.6vw, 1.05rem);
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hv-phone__caption mark {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: #facc15;
  color: #0b1220;
  padding: 0 0.2em;
  border-radius: 4px;
  text-shadow: none;
}
.hv-phone__bar {
  display: block;
  width: 84%;
  height: 3px;
  margin: 10% 0 12%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.hv-phone__bar i { display: block; width: 38%; height: 100%; background: #fff; }

/* Carousel slides */
.hv-slide {
  position: absolute;
  width: 40%;
  aspect-ratio: 4 / 5;
  padding: 5%;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--pgs-shadow-3);
  font-family: inherit;
}
.hv-slide b { font-size: clamp(0.8rem, 1.7vw, 1.1rem); line-height: 1.2; margin-top: 0.4rem; }
.hv-slide__kicker {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hv-slide__kicker::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: #14b8a6;
  margin-bottom: 0.6rem;
}
.hv-slide__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid currentColor;
  font-size: 0.5625rem;
  opacity: 0.7;
}
.hv-slide__foot i { font-style: normal; }
.hv-slide--front {
  left: 1%;
  top: 34%;
  width: 30%;
  background: #12363a;
  color: #fff;
  z-index: 2;
  transform: rotate(-6deg);
}
.hv-slide--front .hv-slide__kicker { color: #5eead4; }
.hv-slide--back {
  left: 5%;
  top: 25%;
  width: 30%;
  background: #fff;
  color: var(--pgs-text);
  z-index: 1;
  transform: rotate(-14deg);
  border: 1px solid var(--pgs-border);
}
.hv-slide--back .hv-slide__kicker { color: var(--pgs-primary-dark); }

/* Quote graphic */
.hv-quote {
  position: absolute;
  right: 0;
  top: 12%;
  width: 30%;
  padding: 4.5% 4.5% 4%;
  border-radius: 16px;
  background: linear-gradient(150deg, #ccfbf1 0%, #ffffff 70%);
  border: 1px solid rgba(13, 148, 136, 0.25);
  box-shadow: var(--pgs-shadow-3);
  transform: rotate(5deg);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.hv-quote__mark {
  font-size: 2.6rem;
  line-height: 0.6;
  font-weight: 800;
  color: var(--pgs-primary);
  font-family: Georgia, serif;
}
.hv-quote p {
  margin: 0.4rem 0 0;
  font-weight: 700;
  font-size: clamp(0.8rem, 1.6vw, 1.05rem);
  line-height: 1.25;
  color: var(--pgs-text);
}
.hv-quote__by {
  margin-top: 0.7rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pgs-primary-dark);
}

/* 30-day calendar */
.hv-cal {
  position: absolute;
  right: 0;
  top: 52%;
  width: 30%;
  padding: 3.5% 4%;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--pgs-border);
  box-shadow: var(--pgs-shadow-3);
  z-index: 4;
}
.hv-cal__title {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pgs-text);
  margin-bottom: 0.5rem;
}
.hv-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.hv-cal__grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #f1f5f9;
}
.hv-cal__grid i.c { background: #0d9488; }
.hv-cal__grid i.k { background: #8b5cf6; }
.hv-cal__grid i.q { background: #f59e0b; }
.hv-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin-top: 0.5rem;
}
.hv-cal__legend em {
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--pgs-text-light);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.hv-cal__legend em::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #0d9488; }
.hv-cal__legend em.k::before { background: #8b5cf6; }
.hv-cal__legend em.q::before { background: #f59e0b; }

/* Quote + calendar stack on the right so they never overlap */
.hv-kit__side {
  position: absolute;
  right: 0;
  top: 5%;
  width: 31%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 4;
}
.hv-kit__side .hv-quote,
.hv-kit__side .hv-cal {
  position: relative;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
}
.hv-kit__side .hv-cal { margin-left: 8%; }

/* Gentle float on the hero pieces */
@media (prefers-reduced-motion: no-preference) {
  .hv-kit .hv-phone { animation: hv-float 7s ease-in-out infinite; }
  .hv-kit .hv-quote { animation: hv-float-r 8s ease-in-out infinite; }
  .hv-kit .hv-cal { animation: hv-float 9s ease-in-out infinite -2s; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-phone__wave i { animation: none; }
}
@keyframes hv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes hv-float-r { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

/* ---------- Proof strip ---------- */
.hv-proof {
  padding: var(--pgs-space-2xl) 0;
  background: var(--pgs-bg);
  border-top: 1px solid var(--pgs-border);
  border-bottom: 1px solid var(--pgs-border);
}
.hv-proof__label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pgs-text-light);
  margin: 0 0 var(--pgs-space-lg);
}
.hv-proof__logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pgs-space-md);
}
.hv-proof__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pgs-space-lg);
  margin-top: var(--pgs-space-xl);
}
.hv-stat { text-align: center; }
.hv-stat .pgs3d-stat__num { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.hv-stat p {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--pgs-text-light);
  line-height: 1.35;
}

/* ---------- Outcomes (inside problem section) ---------- */
.hv-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pgs-space-lg);
  margin-top: var(--pgs-space-2xl);
  text-align: left;
}
.hv-outcome {
  padding: var(--pgs-space-lg);
  border-radius: var(--pgs-radius-lg);
  background: var(--pgs-glass-bg-strong);
  border: 1px solid var(--pgs-glass-border-dark);
  box-shadow: var(--pgs-shadow-1);
}
.hv-outcome h3 { font-size: 1.05rem; margin: var(--pgs-space-sm) 0 0.35rem; }
.hv-outcome p { margin: 0; color: var(--pgs-text-light); font-size: 0.9375rem; }

/* ---------- Deliverables with samples ---------- */
.hv-samples {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pgs-space-lg);
  margin-top: var(--pgs-space-2xl);
  text-align: left;
}
.hv-sample {
  display: flex;
  flex-direction: column;
  padding: var(--pgs-space-md);
  border-radius: var(--pgs-radius-lg);
  background: var(--pgs-glass-bg-strong);
  border: 1px solid var(--pgs-glass-border-dark);
  box-shadow: var(--pgs-shadow-2);
}
.hv-sample .pgs3d-pill { align-self: flex-start; margin-top: var(--pgs-space-md); }
.hv-sample h3 { font-size: 1.05rem; margin: 0.5rem 0 0.35rem; }
.hv-sample > p { margin: 0; color: var(--pgs-text-light); font-size: 0.875rem; }
.hv-sample__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--pgs-radius-md);
  background: linear-gradient(160deg, #f0fdfa, #e2e8f0);
  overflow: hidden;
}
.hv-sample__media--dark { background: linear-gradient(160deg, #134e4a, #0f172a); }
.hv-phone--mini { left: 31%; top: 8%; width: 38%; border-radius: 18px; }
.hv-phone--mini .hv-phone__screen { border-radius: 14px; }
.hv-phone--mini .hv-phone__avatar { margin-top: 22%; }
.hv-phone--mini .hv-phone__wave { height: 14px; gap: 3px; }
.hv-phone--mini .hv-phone__wave i { width: 3px; }
.hv-phone--mini .hv-phone__caption { font-size: 0.6875rem; }
.hv-slide--mini { width: 58%; border-radius: 12px; padding: 7%; }
.hv-slide--mini b { font-size: 0.875rem; }
.hv-slide--mini.hv-slide--front { left: 14%; top: 18%; transform: rotate(-4deg); }
.hv-slide--mini.hv-slide--back { left: 30%; top: 12%; transform: rotate(8deg); }
.hv-quote--mini {
  position: absolute;
  inset: 14%;
  width: auto;
  transform: rotate(-3deg);
}
.hv-quote--mini p { font-size: 0.9375rem; }
.hv-cal--mini {
  position: absolute;
  inset: 22% 10% auto;
  top: 22%;
  width: auto;
  padding: 7%;
}
.hv-samples__note {
  margin: var(--pgs-space-md) 0 0;
  font-size: 0.75rem;
  color: var(--pgs-text-light);
}
.hv-included {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pgs-space-md);
  margin: var(--pgs-space-xl) 0 0;
  padding: var(--pgs-space-lg);
  border-radius: var(--pgs-radius-lg);
  background: rgba(13, 148, 136, 0.06);
  border: 1px solid rgba(13, 148, 136, 0.15);
  text-align: left;
}
.hv-included li { display: flex; flex-direction: column; gap: 0.2rem; padding-left: 1.6rem; position: relative; }
.hv-included li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--pgs-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.hv-included strong { font-size: 0.9375rem; color: var(--pgs-text); }
.hv-included span { font-size: 0.8125rem; color: var(--pgs-text-light); line-height: 1.45; }

/* ---------- Who it's for ---------- */
.hv-who { background: var(--pgs-bg-alt); }
.hv-who__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pgs-space-md);
  margin-top: var(--pgs-space-xl);
  text-align: left;
}
.hv-who__card {
  padding: var(--pgs-space-lg);
  border-radius: var(--pgs-radius-lg);
  background: var(--pgs-bg);
  border: 1px solid var(--pgs-border);
  border-top: 3px solid var(--pgs-primary);
}
.hv-who__card h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.hv-who__card p { margin: 0; font-size: 0.875rem; color: var(--pgs-text-light); }

/* ---------- Pricing additions ---------- */
.hv-guarantee {
  display: flex;
  align-items: center;
  gap: var(--pgs-space-md);
  max-width: 620px;
  margin: var(--pgs-space-xl) auto 0;
  padding: var(--pgs-space-md) var(--pgs-space-lg);
  border-radius: var(--pgs-radius-lg);
  background: var(--pgs-glass-bg-strong);
  border: 1px solid var(--pgs-glass-border-dark);
  text-align: left;
}
.hv-guarantee .pgs3d-guarantee__seal { flex: 0 0 auto; width: 56px; height: 56px; }
.hv-guarantee .pgs3d-guarantee__seal svg { width: 28px; height: 28px; }
.hv-guarantee h3 { font-size: 1rem; margin: 0 0 0.2rem; }
.hv-guarantee p { margin: 0; font-size: 0.875rem; color: var(--pgs-text-light); }
.hv-pricing__note {
  max-width: 680px;
  margin: var(--pgs-space-lg) auto 0;
  color: var(--pgs-text-light);
  font-size: 0.9rem;
}

/* ---------- Service guides ---------- */
.hv-guides { background: var(--pgs-bg-alt); }
.hv-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pgs-space-md);
  margin-top: var(--pgs-space-xl);
}
.hv-guide {
  position: relative;
  display: block;
  padding: var(--pgs-space-lg) var(--pgs-space-xl) var(--pgs-space-lg) var(--pgs-space-lg);
  border-radius: var(--pgs-radius-lg);
  background: var(--pgs-bg);
  border: 1px solid var(--pgs-border);
  text-decoration: none !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.hv-guide:hover { border-color: var(--pgs-primary); transform: translateY(-2px); box-shadow: var(--pgs-shadow-2); }
.hv-guide h3 { font-size: 1rem; margin: 0 0 0.3rem; color: var(--pgs-text); }
.hv-guide p { margin: 0; font-size: 0.875rem; color: var(--pgs-text-light); }
.hv-guide span {
  position: absolute;
  top: var(--pgs-space-lg);
  right: var(--pgs-space-lg);
  color: var(--pgs-primary-dark);
  font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hv-kit { margin: 0 auto; max-width: 460px; }
  .hv-samples { grid-template-columns: repeat(2, 1fr); }
  .hv-included { grid-template-columns: repeat(2, 1fr); }
  .hv-who__grid { grid-template-columns: repeat(2, 1fr); }
  .hv-proof__logos { grid-template-columns: repeat(2, 1fr); }
  .hv-guides__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hv-kit { max-width: 340px; }
  .hv-slide__foot { display: none; }
  .hv-proof__stats { grid-template-columns: repeat(2, 1fr); }
  .hv-outcomes { grid-template-columns: 1fr; }
  .hv-guides__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hv-samples { grid-template-columns: 1fr 1fr; gap: var(--pgs-space-sm); }
  .hv-sample { padding: var(--pgs-space-sm); }
  .hv-sample > p { display: none; }
  .hv-slide--mini b { font-size: 0.75rem; }
  .hv-slide--mini .hv-slide__kicker { font-size: 0.5rem; }
  .hv-quote--mini p { font-size: 0.8125rem; }
  .hv-phone--mini .hv-phone__caption { font-size: 0.5625rem; }
  .hv-sample h3 { font-size: 0.9375rem; }
  .hv-included { grid-template-columns: 1fr; }
  .hv-who__grid { grid-template-columns: 1fr; }
  .hv-proof__logos { grid-template-columns: 1fr 1fr; gap: var(--pgs-space-sm); }
  .hv-proof__logos .pgs3d-cred { padding: 0.6rem; gap: 0.5rem; }
  .hv-proof__logos .pgs3d-cred__logo { width: 32px; height: 32px; }
  .hv-proof__logos .pgs3d-cred__meta strong { font-size: 0.8125rem; }
  .hv-proof__logos .pgs3d-cred__meta span { display: none; }
  .hv-guarantee { flex-direction: column; text-align: center; }
}