/* ===== HOMEPAGE V3: built from Andy's full-page mockup (Sep 15 2026) ===== */
/* Mobile first. Builds on style.css (variables, navbar, reviews carousel, sticky call button). */

.v3 [hidden] { display: none !important; }
.v3 { background: var(--bg); }

/* ----- Header: solid bar, links in the middle, assessment button on the right ----- */
.v3 .navbar { background: rgba(8,10,18,0.96); border-bottom: 1px solid rgba(255,255,255,0.06); }
.v3 .logo-main,
.v3 .logo-sub { font-family: 'Montserrat', 'Inter', sans-serif; }
.v3 .nav-links a { white-space: nowrap; } /* menu items stay on one line, including Refer & Earn */
.v3 .btn-nav { display: inline-flex; align-items: center; gap: 8px; }
.v3 .btn-nav svg { width: 16px; height: 16px; }

@media (min-width: 641px) and (max-width: 1079px) {
  .v3 .nav-toggle { display: flex; }

  .v3 .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 80px 32px 32px;
    border-left: 1px solid var(--border);
    background: var(--primary);
    box-shadow: -4px 0 40px rgba(0,0,0,0.5);
    transition: right var(--transition);
  }

  .v3 .nav-links.open { right: 0; }
}

.v3 .v3-nav-cta-desk { display: none; }

@media (min-width: 1080px) {
  .v3 .nav-container { position: relative; }
  .v3 .nav-links { position: absolute; top: 50%; left: 50%; gap: 38px; transform: translate(-50%, -50%); }
  .v3 .nav-links a.active { position: relative; }
  .v3 .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--accent); }
  .v3 .v3-nav-cta { display: none; }
  .v3 .v3-nav-cta-desk { display: inline-flex; margin-left: auto; }
}

/* the menu gained a sixth link (Refer & Earn): on narrow laptops it needs tighter spacing to stay on one row */
@media (min-width: 1080px) and (max-width: 1319px) {
  .v3 .nav-links { gap: 20px; font-size: 0.92rem; }
  .v3 .v3-nav-cta-desk { padding: 10px 14px; font-size: 0.8rem; }
}

/* ----- Buttons ----- */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.v3-btn svg { flex: none; width: 18px; height: 18px; }
.v3-btn:active { transform: translateY(1px); }
.v3-btn-primary { background: linear-gradient(135deg, var(--accent) 0%, #e06415 100%); box-shadow: 0 6px 20px var(--accent-glow); }
.v3-btn-outline { border-color: rgba(255,255,255,0.42); background: rgba(8,10,18,0.35); }
.v3-btn-outline:hover { border-color: var(--accent); }
.v3-btn-sm { min-height: 46px; padding: 10px 20px; font-size: 0.9rem; letter-spacing: 0; text-transform: none; }

/* ----- Hero: the before/after/SOLD photo, notes, headline, two buttons, trust row ----- */
.v3-hero { position: relative; padding-top: 72px; background: var(--bg); }
.v3-hero-visual { position: relative; height: 46vh; min-height: 300px; max-height: 560px; overflow: hidden; }
.v3-hero-media { display: block; height: 100%; }
.v3-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.v3-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,21,0) 55%, var(--bg) 100%); pointer-events: none; }

.v3-note {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  font-size: clamp(1.35rem, 5.6vw, 2.4rem);
  font-weight: 600;
  line-height: 0.92;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
  transform: rotate(-7deg);
  pointer-events: none;
}

.v3-note-before { top: 14%; left: 5%; }
.v3-note-after { top: 9%; right: 5%; text-align: right; }
.v3-note-arrow { width: 0.9em; height: 1.2em; }
.v3-note-before .v3-note-arrow { display: block; margin: 0.05em 0 0 1.6em; }
.v3-note-after .v3-note-arrow { display: inline-block; margin-right: 0.1em; vertical-align: -0.6em; }

.v3-hero-inner { position: relative; z-index: 2; margin-top: -36px; padding-bottom: 40px; }

.v3-hero-title {
  color: #fff;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: clamp(1.8rem, 8.4vw, 4.6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.v3-hero-title em { color: var(--accent); font-style: normal; }
.v3-hero-sub { margin-top: 12px; color: rgba(255,255,255,0.84); font-size: 1rem; line-height: 1.5; }
.v3-br-wide { display: none; }
.v3-hero-foot { display: grid; gap: 24px; margin-top: 24px; }
.v3-hero-actions { display: grid; gap: 12px; }
.v3-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.v3-trust-item { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 0.8rem; line-height: 1.3; }
.v3-trust-item svg { flex: none; width: 30px; height: 30px; color: var(--accent); }

@media (min-width: 700px) {
  .v3-br-wide { display: inline; }
  .v3-hero-actions { grid-template-columns: repeat(2, minmax(0, 260px)); }
  .v3-trust { grid-template-columns: repeat(4, auto); justify-content: start; gap: 22px; }
}

/* Desktop: the photo fills the hero and the words sit over its dark left side, as in the mockup */
@media (min-width: 900px) {
  .v3-hero { height: 640px; }
  .v3-hero-visual { position: absolute; inset: 72px 0 0; height: auto; max-height: none; }
  .v3-hero-media img { object-position: 50% 40%; }
  .v3-hero-visual::after {
    background:
      linear-gradient(90deg, rgba(8,10,18,0.92) 0%, rgba(8,10,18,0.72) 28%, rgba(8,10,18,0.18) 52%, rgba(8,10,18,0) 66%),
      linear-gradient(180deg, rgba(8,10,18,0.3) 0%, rgba(8,10,18,0) 24%, rgba(8,10,18,0) 72%, rgba(8,10,18,0.9) 100%);
  }
  .v3-note { font-size: clamp(1.7rem, 2.3vw, 2.5rem); }
  .v3-note-before { top: 12%; left: 6%; }
  .v3-note-after { top: 8%; right: 7%; }
  .v3-hero-inner { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; margin-top: 0; padding-bottom: 34px; }
  .v3-hero-title { font-size: clamp(2.8rem, 4.3vw, 3.9rem); }
  .v3-hero-sub { font-size: 1.15rem; }
  .v3-hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; margin-top: 28px; }
  .v3-hero-actions { grid-template-columns: repeat(2, 260px); gap: 18px; }
  .v3-trust { gap: 24px; }
}

/* ----- Sections ----- */
.v3-section { padding: 48px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.v3-eyebrow { color: var(--accent); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; }

.v3-title {
  margin-top: 8px;
  color: #fff;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: clamp(1.7rem, 6.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.v3-title span { color: var(--accent); }
.v3-head { display: grid; gap: 14px; margin-bottom: 24px; }
.v3-head-note { color: rgba(255,255,255,0.72); font-size: 0.95rem; line-height: 1.55; }
.v3-head .v3-btn { justify-self: start; }

@media (min-width: 900px) {
  .v3-section { padding: 60px 0; }
  .v3-head { grid-template-columns: 1fr auto; align-items: end; margin-bottom: 30px; }
  .v3-head .v3-btn { justify-self: end; }
}

/* ----- Our solutions: four photo cards ----- */
.v3-cards { display: grid; gap: 12px; }

.v3-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 118px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: #0f1320;
  color: #fff;
  transition: border-color var(--transition), transform var(--transition);
}

.v3-card:hover { border-color: rgba(244,117,32,0.6); transform: translateY(-3px); }
.v3-card-media { position: relative; flex: none; width: 38%; overflow: hidden; }
.v3-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.v3-card:hover .v3-card-media img { transform: scale(1.05); }
.v3-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,19,32,0) 45%, rgba(15,19,32,0.85) 100%); }
.v3-card-icon { position: absolute; z-index: 1; left: 10px; bottom: 10px; width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6)); }
.v3-card-body { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 5px; padding: 14px 44px 14px 14px; }
.v3-card-title { font-size: 1.04rem; font-weight: 700; line-height: 1.25; }
.v3-card-text { color: rgba(255,255,255,0.72); font-size: 0.9rem; line-height: 1.45; }
.v3-card-arrow { position: absolute; top: 50%; right: 14px; width: 20px; height: 20px; color: var(--accent); transform: translateY(-50%); }

@media (min-width: 600px) {
  .v3-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .v3-card { flex-direction: column; }
  .v3-card-media { width: auto; aspect-ratio: 16 / 10; }
  .v3-card-media::after { background: linear-gradient(180deg, rgba(15,19,32,0) 45%, rgba(15,19,32,0.95) 100%); }
  .v3-card-icon { left: 18px; bottom: 10px; width: 40px; height: 40px; }
  .v3-card-body { justify-content: flex-start; padding: 12px 20px 22px; }
  .v3-card-title { font-size: 1.12rem; }
  .v3-card-text { max-width: 14em; }
  .v3-card-arrow { top: auto; right: 18px; bottom: 22px; transform: none; }
}

@media (min-width: 1000px) {
  .v3-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ----- A simple process: four numbered steps on a line ----- */
.v3-steps { position: relative; display: grid; gap: 22px; margin: 4px 0 0; padding: 0; list-style: none; }
.v3-steps::before { content: ""; position: absolute; top: 15px; bottom: 15px; left: 15px; width: 2px; background: linear-gradient(var(--accent), rgba(244,117,32,0.35)); }
.v3-steps li { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 16px; }

.v3-step-num {
  z-index: 1;
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--bg);
  color: #0a0c15;
  font-size: 0.92rem;
  font-weight: 800;
}

.v3-steps strong { color: #fff; font-size: 1.02rem; }
.v3-step-text { color: rgba(255,255,255,0.7); font-size: 0.94rem; }

@media (min-width: 900px) {
  .v3-steps { grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; }
  .v3-steps::before { top: 15px; right: 12.5%; bottom: auto; left: 12.5%; width: auto; height: 2px; background: var(--accent); }
  .v3-steps li { grid-template-columns: 1fr; justify-items: center; row-gap: 4px; }
  .v3-step-num { grid-row: auto; margin-bottom: 10px; }
}

/* ----- Featured result: words left, before/after with the orange slash right ----- */
.v3-featured-grid { display: grid; gap: 26px; align-items: center; }
.v3-title-white { color: #fff; }
.v3-text { margin-top: 10px; color: rgba(255,255,255,0.76); font-size: 1rem; line-height: 1.55; }
.v3-featured .v3-btn { margin-top: 20px; }

.v3-split { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: #0d1018; }
.v3-side { position: absolute; top: 0; bottom: 0; width: 58%; background-repeat: no-repeat; background-size: 200% auto; }
.v3-side-before { left: 0; background-position: 0 50%; clip-path: polygon(0 0, 100% 0, 72.4% 100%, 0 100%); }
.v3-side-after { right: 0; background-position: 100% 50%; clip-path: polygon(27.6% 0, 100% 0, 100% 100%, 0 100%); }
.v3-slash { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.v3-slash line { stroke: var(--accent); stroke-width: 6px; vector-effect: non-scaling-stroke; }

.v3-tag {
  position: absolute;
  z-index: 2;
  top: 14px;
  padding: 5px 12px;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 4px;
  background: rgba(10,12,21,0.6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.v3-tag-before { left: 14px; }
.v3-tag-after { right: 14px; }

@media (min-width: 900px) {
  .v3-featured-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: 40px; }
  .v3-split { aspect-ratio: 2.35 / 1; }
}

/* ----- Refer & Earn card ----- */
.v3-refer { padding-top: 8px; border-top: 0; }

.v3-refer-card {
  display: grid;
  gap: 16px;
  padding: 24px 20px;
  border: 1px solid rgba(244,117,32,0.6);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(244,117,32,0.1) 0%, rgba(255,255,255,0.02) 100%);
}

.v3-refer-icon { width: 46px; height: 46px; color: var(--accent); }

.v3-refer-title {
  margin-top: 6px;
  color: #fff;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.v3-refer-title span { color: var(--accent); font-size: 1.28em; }
.v3-refer-text { color: rgba(255,255,255,0.78); font-size: 0.95rem; line-height: 1.5; }
.v3-refer-action .v3-btn { width: 100%; }
.v3-refer-fine { margin-top: 8px; color: rgba(255,255,255,0.55); font-size: 0.72rem; line-height: 1.4; text-align: center; }

@media (min-width: 700px) {
  .v3-refer-card {
    grid-template-areas: "icon head action" "icon text action";
    grid-template-columns: auto minmax(0, 1fr) 260px;
    align-items: center;
    gap: 10px 28px;
    padding: 24px 28px;
  }
  .v3-refer-icon { grid-area: icon; width: 56px; height: 56px; }
  .v3-refer-head { grid-area: head; }
  .v3-refer-text { grid-area: text; max-width: 34em; }
  .v3-refer-action { grid-area: action; text-align: center; }
  .v3-refer-fine { font-size: 0.68rem; }
  .v3-refer-title { white-space: nowrap; }
}

/* wide screens: one row, and the card runs a little wider than the page, as in the mockup */
@media (min-width: 1200px) {
  .v3-refer .container { max-width: 1340px; }
  .v3-refer-card { grid-template-areas: "icon head text action"; grid-template-columns: auto auto minmax(0, 1fr) 300px; gap: 32px; padding: 22px 34px; }
  .v3-refer-action .v3-btn { min-width: 230px; }
}

/* ----- Reviews + insurers ----- */
.v3-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; } /* minmax: the slider's hidden slides must not widen the column */
.v3-proof-title { margin-top: 8px; color: #fff; font-family: 'Montserrat', 'Inter', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }

.v3 .v3-reviews { min-width: 0; max-width: none; margin: 0; padding: 0 52px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: #0f1320; overflow: visible; }
.v3-reviews-window { overflow: hidden; }
.v3 .v3-reviews .review-slide { padding: 22px 4px 20px; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.v3 .v3-reviews .review-stars { margin-bottom: 10px; color: var(--accent); font-size: 1.1rem; }
.v3 .v3-reviews .review-text { margin-bottom: 12px; color: rgba(255,255,255,0.82); font-size: 0.9rem; line-height: 1.6; }
.v3 .v3-reviews .review-author strong { font-size: 0.88rem; }
.v3 .v3-reviews .review-arrow { position: absolute; top: 50%; width: 34px; height: 34px; background: transparent; border-color: rgba(255,255,255,0.22); font-size: 1.3rem; transform: translateY(-50%); }
.v3 .v3-reviews .review-arrow:hover { background: var(--accent); border-color: var(--accent); }
.v3 .v3-reviews .review-prev { left: 9px; }
.v3 .v3-reviews .review-next { right: 9px; }

.v3-insurers-title { color: rgba(255,255,255,0.6); font-size: 0.72rem; letter-spacing: 0.24em; line-height: 1.6; text-transform: uppercase; }
.v3-insurer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 14px; }
.v3-insurer-logos img { width: auto; height: 26px; filter: grayscale(100%) brightness(0) invert(1); opacity: 0.8; }

@media (min-width: 1000px) {
  .v3-proof-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) minmax(0, 1.05fr); align-items: center; gap: 36px; }
  .v3-insurer-logos { flex-wrap: nowrap; gap: 16px; }
  .v3-insurer-logos img { height: 20px; }
}

/* ----- The one enquiry form, opened by every sell / work / assessment button ----- */
.v3-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto; /* style.css resets every margin to 0, which would pin the form to the top left */
  padding: 28px 24px 24px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background: #0f1320;
  color: #fff;
}

.v3-dialog::backdrop { background: rgba(4,6,12,0.74); backdrop-filter: blur(4px); }
.v3-dialog-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: transparent; color: rgba(255,255,255,0.7); font-size: 1.9rem; line-height: 1; cursor: pointer; }
.v3-dialog-title { margin-top: 6px; font-family: 'Montserrat', 'Inter', sans-serif; font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.v3-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v3-choice label { position: relative; }
.v3-choice input { position: absolute; opacity: 0; }

.v3-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.v3-choice input:checked + span { border-color: var(--accent); background: rgba(244,117,32,0.14); }
.v3-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* form pieces shared with the other homepage (home.js submits them) */
.v3 .hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent) 0%, #e06415 100%);
  box-shadow: 0 6px 20px var(--accent-glow);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.v3 .hm-btn svg { flex: none; width: 20px; height: 20px; }
.v3 .hm-btn[disabled] { opacity: 0.7; cursor: default; }
.v3 .hm-form { position: relative; display: grid; gap: 12px; margin-top: 18px; }
.v3 .hm-field { display: flex; flex-direction: column; gap: 6px; }
.v3 .hm-field span { color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; }

.v3 .hm-field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font: inherit;
  font-size: 17px; /* 16px or more stops iPhones zooming in */
}

.v3 .hm-field input:focus { border-color: var(--accent); outline: none; }
.v3 .hm-field input[aria-invalid="true"] { border-color: #dc2626; }
.v3 .hm-hp { display: none !important; } /* honeypot: hidden so phone AutoFill never fills it */
.v3 .hm-error { padding: 12px 14px; border: 1px solid rgba(239,68,68,0.55); border-radius: 10px; background: rgba(239,68,68,0.12); color: #fecaca; }
.v3 .hm-thanks { margin-top: 18px; padding: 20px 22px; border: 1px solid rgba(34,197,94,0.45); border-radius: var(--radius); background: rgba(34,197,94,0.1); }
.v3 .hm-thanks strong { display: block; margin-bottom: 4px; color: #bbf7d0; font-size: 1.1rem; }
.v3 .hm-thanks p { color: rgba(255,255,255,0.82); }
.v3 .hm-thanks .hm-photos-email { margin-top: 14px; overflow-wrap: anywhere; }
.v3 .hm-photos-btn { width: 100%; margin-top: 12px; }

/* ----- Footer ----- */
.v3-footer { padding-top: 44px; border-top: 1px solid rgba(255,255,255,0.08); background: #080a12; color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.v3-footer-grid { display: grid; gap: 28px 20px; }
.v3-footer-brand p { max-width: 26em; margin-top: 14px; line-height: 1.55; }
.v3-footer-col h3 { margin-bottom: 10px; color: #fff; font-size: 0.92rem; font-weight: 700; }
.v3-footer-col ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.v3-footer-col a { color: rgba(255,255,255,0.72); }
.v3-footer-col a:hover { color: var(--accent); }
.v3-contact li { display: flex; align-items: flex-start; gap: 10px; }
.v3-contact svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.v3-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 34px; padding: 18px 0 26px; border-top: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); font-size: 0.8rem; }
.v3-sep { margin: 0 8px; }

/* The Call Now button steps aside over the footer, which shows the phone number anyway */
.v3 .sticky-call.v3-call-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* phones: one short centred column. No second logo (the header above already shows it), contact first,
   the page links in one row, and the four "Your options" links left out (they all lead to the cards above) */
@media (max-width: 699px) {
  .v3-footer { padding-top: 34px; text-align: center; }
  .v3-footer-grid { gap: 22px; }
  .v3-footer-brand .logo-mark { display: none; }
  .v3-footer-brand p { max-width: 24em; margin: 0 auto; }
  .v3-footer-contact { order: 1; }
  .v3-footer-col:not(.v3-footer-contact):not(.v3-footer-options) { order: 2; }
  .v3-footer-options { display: none; }
  .v3-footer-col h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v3-footer-col ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
  .v3-footer .v3-contact { display: grid; justify-content: stretch; gap: 10px; }
  /* every line of text is centred on the page; each icon hangs just to its left and takes no space */
  .v3-footer .v3-contact li { display: block; text-align: center; }
  .v3-footer .v3-contact svg { display: inline-block; margin: 0 8px 0 -26px; vertical-align: -4px; }
  .v3-footer-bottom { flex-direction: column; align-items: center; gap: 6px; margin-top: 26px; }
  .v3-sep-licence { display: none; }
  .v3-licence { display: block; margin-top: 6px; }
}

.v3-phone-only { display: none; }

@media (max-width: 699px) {
  .v3-phone-only { display: list-item; }
}

/* phones and tablets: insurer logos in one even row, centred under the reviews */
@media (max-width: 999px) {
  .v3-insurers { text-align: center; }
  .v3-insurer-logos { flex-wrap: nowrap; justify-content: space-between; gap: 12px; max-width: 420px; margin: 16px auto 0; }
  .v3-insurer-logos img { height: 20px; }
}

@media (max-width: 380px) {
  .v3-insurer-logos { gap: 10px; }
  .v3-insurer-logos img { height: 18px; }
}

@media (max-width: 340px) {
  .v3-insurer-logos { flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  .v3-insurer-logos { gap: 12px; }
  .v3-insurer-logos img { height: 17px; }
}

@media (min-width: 700px) {
  .v3-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
}

/* ----- Refer & Earn popup (homepage), built to Andy's reference: the photograph on top falling away into black,
   left-aligned sentence-case words in Outfit, the $5,000, three steps and the button. Every size is a share of
   the pop-up's own width (cqw), measured off the reference at a 370px-wide pop-up, so a small phone gets the same
   composition, only smaller. The width is also capped by the screen height, so the whole pop-up always fits. ----- */
html:has(body.v3) { scrollbar-gutter: stable; }
html:has(.v3-refer-pop[open]) { overflow: hidden; }

.v3-refer-pop {
  position: relative;
  container-type: inline-size;
  width: min(420px, calc(100vw - 20px), calc((100dvh - 60px) / 1.97)); /* tall enough screens get the full width; short ones get a smaller pop-up that still fits */
  max-width: none;
  max-height: calc(100dvh - 20px);
  margin: auto;
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  background: #07090f;
  box-shadow: 0 26px 70px rgba(0,0,0,0.6);
  color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
  text-align: left;
}

/* the pop-up itself takes focus when it opens (refer-popup.js), so no ring lands on the close button;
   a keyboard user who tabs to it still gets one */
.v3-refer-pop:focus { outline: none; }
.v3-refer-pop::backdrop { background: rgba(5,7,12,0.62); backdrop-filter: blur(2px); }
.v3-refer-pop[open] { animation: v3-rp-in 0.32s ease-out; }
.v3-refer-pop[open]::backdrop { animation: v3-rp-fade 0.32s ease-out; }

@keyframes v3-rp-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes v3-rp-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .v3-refer-pop[open],
  .v3-refer-pop[open]::backdrop { animation: none; }
}

/* the job on the left, the sold property on the right, clear and natural; the words start on its dark lower edge */
.v3-rp-bg { position: absolute; top: 0; left: 0; right: 0; display: block; aspect-ratio: 1.2; pointer-events: none; }
.v3-rp-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* one clean fall to black, nothing over the scene itself */
.v3-rp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,9,15,0) 0%, rgba(7,9,15,0) 58%, rgba(7,9,15,0.45) 76%, rgba(7,9,15,0.88) 90%, #07090f 100%);
}

.v3-rp-close {
  position: absolute;
  z-index: 3;
  top: 2.2cqw;
  right: 2.2cqw;
  display: grid;
  place-items: center;
  width: max(40px, 10.8cqw);
  height: max(40px, 10.8cqw);
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
}

.v3-rp-close:hover,
.v3-rp-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(244,117,32,0.5); }
.v3-rp-close svg { width: 50%; height: 50%; }

.v3-rp-inner { position: relative; z-index: 2; padding: 76.2cqw 6.2cqw 5cqw; }

.v3-rp-title { font-size: 11.57cqw; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.v3-rp-title-sub { display: block; font-size: 0.678em; }
.v3-rp-title em { color: var(--accent); font-style: normal; }

.v3-rp-paid { margin-top: 2.3cqw; color: rgba(255,255,255,0.85); font-size: 5.3cqw; font-weight: 400; line-height: 1.07; }

.v3-rp-amount {
  margin-top: 3.3cqw;
  padding: 2.5cqw 0 2.7cqw;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 18.38cqw;
  line-height: 1;
  text-align: center;
}

/* the eye must land on $5,000 first, so the words around it stay at supporting-copy size */
.v3-rp-upto { display: block; margin-bottom: 0.6cqw; color: rgba(255,255,255,0.8); font-size: max(11px, 3.68cqw); font-weight: 400; }
.v3-rp-sum { display: block; color: var(--accent); font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -0.03em; }
.v3-rp-per {
  display: block;
  margin-top: 1.1cqw;
  color: rgba(255,255,255,0.88);
  font-size: max(11px, 3.68cqw);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v3-rp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3.2cqw 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.v3-rp-steps li { position: relative; display: grid; justify-items: center; gap: 1.1cqw; }
.v3-rp-steps svg { width: 6.8cqw; height: 6.8cqw; color: var(--accent); }
.v3-rp-steps strong { color: rgba(255,255,255,0.92); font-size: max(12px, 3.68cqw); font-weight: 400; line-height: 1; }

/* a thin orange chevron between the steps, level with the icons */
.v3-rp-steps li + li::before {
  content: "";
  position: absolute;
  top: 2.3cqw;
  left: -1.1cqw;
  width: 2.2cqw;
  height: 2.2cqw;
  border-top: 1.5px solid rgba(244,117,32,0.85);
  border-right: 1.5px solid rgba(244,117,32,0.85);
  transform: rotate(45deg);
}

.v3-rp-handle { margin-top: 3.6cqw; color: rgba(255,255,255,0.78); font-size: max(10.5px, 3.81cqw); font-weight: 400; line-height: 1; text-align: center; }

.v3-rp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  min-height: max(48px, 12.4cqw);
  margin-top: 3.9cqw;
  padding: 0 3cqw;
  border-radius: 2.2cqw;
  background: linear-gradient(135deg, #f58a3c 0%, var(--accent) 45%, #e06415 100%);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: max(10.5px, 3.97cqw);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter var(--transition), transform var(--transition);
}

.v3-rp-cta svg { flex: none; width: 1.25em; height: 1.25em; }
.v3-rp-cta:hover { filter: brightness(1.06); }
.v3-rp-cta:active { transform: translateY(1px); }
.v3-rp-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.v3-rp-fine { margin-top: 3.2cqw; color: rgba(255,255,255,0.62); font-size: max(11px, 3.05cqw); font-weight: 400; line-height: 1; text-align: center; }

/* a phone turned sideways: the wide photo behind the left half, the words on the right, in fixed sizes */
@media (max-height: 520px) {
  .v3-refer-pop { width: min(760px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
  .v3-rp-bg { bottom: 0; aspect-ratio: auto; }
  .v3-rp-bg img { object-position: 50% 45%; }
  .v3-rp-bg::after { background: linear-gradient(90deg, rgba(7,9,15,0) 0%, rgba(7,9,15,0.35) 34%, rgba(7,9,15,0.92) 50%, #07090f 60%); }
  .v3-rp-close { top: 8px; right: 8px; width: 40px; height: 40px; }
  .v3-rp-inner { margin-left: 48%; padding: 16px 20px 12px; }
  .v3-rp-title { font-size: 26px; }
  .v3-rp-paid { margin-top: 6px; font-size: 14px; line-height: 1.2; }
  .v3-rp-amount { margin-top: 8px; padding: 5px 0 6px; font-size: 40px; }
  .v3-rp-upto { margin-bottom: 1px; font-size: 11px; }
  .v3-rp-per { margin-top: 3px; font-size: 11px; letter-spacing: 0.12em; }
  .v3-rp-steps { margin-top: 8px; }
  .v3-rp-steps li { gap: 4px; }
  .v3-rp-steps svg { width: 22px; height: 22px; }
  .v3-rp-steps strong { font-size: 12px; }
  .v3-rp-steps li + li::before { top: 7px; left: -4px; width: 8px; height: 8px; }
  .v3-rp-handle { display: none; }
  .v3-rp-cta { gap: 8px; min-height: 48px; margin-top: 10px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
  .v3-rp-fine { margin-top: 8px; font-size: 11px; }
}

/* ----- "Terms apply" links ----- */
.v3-refer-fine a,
.v3-rp-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ----- Why Restyling: the credibility that used to be an About page, in one section ----- */
.v3-cred-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.v3-cred-points li {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 2px 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: #0f1320;
}

.v3-cred-points svg { grid-row: 1 / span 2; width: 30px; height: 30px; color: var(--accent); }
.v3-cred-points strong { color: #fff; font-size: 1.02rem; font-weight: 700; }
.v3-cred-points span { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.35; }

.v3-cred-proof { display: grid; gap: 22px; margin-top: 22px; }

@media (min-width: 700px) {
  .v3-cred-points { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (min-width: 1000px) {
  .v3-cred-points { grid-template-columns: repeat(4, 1fr); }
  .v3-cred-proof { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-top: 28px; }
}