/* ===== INNER PAGES (services, contact): the homepage v3 design carried over. =====
   Header, buttons, section heads, option cards, numbered steps, insurer logos, form styling and footer all come
   from home-v3.css. This file only adds the pieces the homepage does not have. Mobile first. */

/* ----- Hero: the job on the left, the sold property on the right; the words sit low on the dark part ----- */
.sv-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(100vh, 860px);
  min-height: min(100svh, 860px);
  padding-top: 72px; /* fixed header */
  overflow: hidden;
  background: var(--bg);
}

.sv-hero-media { position: absolute; inset: 72px 0 0; display: block; }
.sv-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* the van photo: hold the right of the frame on phones so the sign and QR panel stay in view */
.sv-hero-van img { object-position: 100% 46%; }
/* About carries a longer headline, sub and trust row, which land straight on the van's own lettering.
   Its hero keeps the same photo but sits further back, so the words read and the van stays a silhouette. */
.pg-hero .sv-hero-van img { object-position: 50% 46%; }

@media (max-width: 899px) {
  .pg-hero .sv-hero-media::after {
    background: linear-gradient(180deg, rgba(8,10,18,0.2) 0%, rgba(8,10,18,0.34) 30%, rgba(8,10,18,0.8) 52%, rgba(8,10,18,0.93) 70%, var(--bg) 94%);
  }
}

/* one clean fall to black under the words, nothing over the scene itself */
.sv-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* a light veil over the whole photo lifts the white type off it; the dark still starts
     below the van, so its lettering and QR stay readable on a phone */
  background: linear-gradient(180deg, rgba(8,10,18,0.24) 0%, rgba(8,10,18,0.22) 38%, rgba(8,10,18,0.72) 60%, rgba(8,10,18,0.93) 72%, var(--bg) 92%);
}

.sv-hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 40px; padding-bottom: 36px; } /* full container width: a flex child with auto margins would shrink and centre */
.sv-hero-actions { margin-top: 24px; }

@media (min-width: 900px) {
  .sv-hero { min-height: 640px; }
  .sv-hero-media img { object-position: 50% 58%; }
  /* the words sit low on the left, so the dark gathers there; the SOLD sign on the right stays clear */
  .sv-hero-media::after {
    background:
      linear-gradient(90deg, rgba(8,10,18,0.62) 0%, rgba(8,10,18,0.4) 38%, rgba(8,10,18,0) 66%),
      linear-gradient(180deg, rgba(8,10,18,0.16) 0%, rgba(8,10,18,0.16) 32%, rgba(8,10,18,0.58) 58%, rgba(8,10,18,0.9) 84%, var(--bg) 100%);
  }
  .sv-hero-inner { padding-bottom: 48px; }
}

/* ----- Section heads with a short note beside the title ----- */
@media (min-width: 900px) {
  .sv-section .v3-head-note { max-width: 30em; text-align: right; }
}

/* ----- Checklists: an orange tick and the item ----- */
.sv-list { display: grid; gap: 9px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,0.08); list-style: none; }
.sv-list li { position: relative; padding-left: 26px; color: rgba(255,255,255,0.86); font-size: 0.92rem; line-height: 1.45; }

.sv-list li::before {
  content: "";
  position: absolute;
  top: 0.32em;
  left: 2px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ----- Repairs & Restore: three service cards ----- */
.sv-grid { display: grid; gap: 14px; }

.sv-item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: #0f1320; }
.sv-item-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.sv-item-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-item-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,19,32,0) 50%, #0f1320 100%); }
.sv-item-icon { position: absolute; z-index: 1; left: 20px; bottom: 6px; width: 38px; height: 38px; color: var(--accent); filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6)); }
.sv-item-body { display: flex; flex: 1; flex-direction: column; padding: 12px 20px 22px; }
.sv-item h3 { color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.sv-item p { margin-top: 8px; color: rgba(255,255,255,0.72); font-size: 0.94rem; line-height: 1.55; }

@media (min-width: 700px) and (max-width: 999px) {
  /* one per row, photo beside the words */
  .sv-item { display: grid; grid-template-columns: 40% 1fr; }
  .sv-item-media { aspect-ratio: auto; min-height: 100%; }
  .sv-item-media::after { background: linear-gradient(90deg, rgba(15,19,32,0) 55%, #0f1320 100%); }
  .sv-item-body { padding: 22px 24px 24px 8px; }
}

@media (min-width: 1000px) {
  .sv-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .sv-item-body { padding: 14px 24px 26px; }
}

/* ----- Renovate for Value: photo beside the words ----- */
.sv-split { display: grid; gap: 26px; align-items: center; }
.sv-split-media { overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
.sv-split-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-split .v3-text { max-width: 36em; }
.sv-split .v3-btn { margin-top: 24px; }

@media (min-width: 900px) {
  .sv-split { grid-template-columns: 1.05fr 1fr; gap: 60px; }
  .sv-list-cols { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

/* ----- Thinking of selling: two photo panels ----- */
.sv-sell { display: grid; gap: 14px; }

.sv-sell-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: #0f1320;
  scroll-margin-top: 96px;
}

.sv-sell-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sv-sell-card:hover img { transform: scale(1.04); }
.sv-sell-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,18,0) 20%, rgba(8,10,18,0.78) 62%, rgba(8,10,18,0.96) 100%); }
.sv-sell-body { position: relative; z-index: 1; padding: 24px 22px 24px; }
.sv-sell-icon { width: 38px; height: 38px; color: var(--accent); }
.sv-sell-body h3 { margin-top: 10px; color: #fff; font-family: 'Montserrat', 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.sv-sell-body p { margin-top: 6px; color: rgba(255,255,255,0.8); font-size: 1rem; line-height: 1.5; }
.sv-sell-body .v3-btn { margin-top: 18px; }

@media (min-width: 800px) {
  .sv-sell { grid-template-columns: 1fr 1fr; gap: 18px; }
  .sv-sell-card { min-height: 400px; }
  .sv-sell-body { padding: 30px 30px 30px; }
  .sv-sell-body h3 { font-size: 1.8rem; }
}

/* ----- Insurance claims: the homepage steps, with room for a sentence under each ----- */
.sv-steps li { align-content: start; } /* a longer sentence under one step must not push the other titles down */

@media (min-width: 900px) {
  .sv-steps .v3-step-text { max-width: 17em; margin: 0 auto; line-height: 1.5; }
}

.sv-insurers { display: grid; gap: 14px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); }
.sv-insurers .v3-insurer-logos { flex-wrap: wrap; justify-content: center; gap: 18px 28px; margin-top: 0; } /* seven logos here, so they wrap (centred) on phones */

@media (min-width: 900px) {
  .sv-insurers { grid-template-columns: auto 1fr; align-items: center; gap: 48px; }
  .sv-insurers .v3-insurer-logos { justify-content: space-between; }
}

/* ----- Closing call to action, in the homepage Refer & Earn card's look ----- */
.sv-cta-card {
  display: grid;
  gap: 22px;
  padding: 28px 22px;
  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%);
}

.sv-cta-card .v3-title,
.sv-cta-card .v3-text { text-wrap: balance; }
.sv-cta-actions { display: grid; gap: 12px; }

@media (min-width: 700px) {
  .sv-cta-actions { grid-template-columns: repeat(2, minmax(0, 260px)); }
}

@media (min-width: 1000px) {
  .sv-cta-card { grid-template-columns: 1fr auto; align-items: center; padding: 40px 44px; }
  .sv-cta-actions { grid-template-columns: repeat(2, 240px); }
}

/* the section jump links land below the fixed header */
.sv-page section[id], .sv-page article[id] { scroll-margin-top: 80px; }

/* ----- Contact page ----- */
.ct-hero { min-height: 0; padding-bottom: 8px; }
.ct-hero .sv-hero-inner { padding-top: 150px; }

@media (min-width: 900px) {
  .ct-hero { min-height: 460px; }
  .ct-hero .sv-hero-inner { padding-top: 40px; }
}

.ct-grid { display: grid; gap: 22px; }

@media (min-width: 900px) {
  .ct-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
}

/* the short enquiry form, in the same card style as the rest of the site */
.ct-form-card { padding: 22px 20px 24px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: #0f1320; }
.ct-form-card .v3-title { font-size: clamp(1.5rem, 5.2vw, 1.9rem); }
.ct-form-card .hm-form { margin-top: 18px; }
.ct-note { margin-top: 10px; color: rgba(255,255,255,0.6); font-size: 0.86rem; line-height: 1.5; }

@media (min-width: 900px) {
  .ct-form-card { padding: 30px 30px 32px; }
}

.ct-side { display: grid; gap: 14px; }

.ct-card { padding: 22px 20px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: #0f1320; }
.ct-card h3 { color: #fff; font-family: 'Montserrat', 'Inter', sans-serif; font-size: 1.12rem; font-weight: 700; }
.ct-card p { margin-top: 8px; color: rgba(255,255,255,0.74); font-size: 0.94rem; line-height: 1.55; }
.ct-card .v3-btn { margin-top: 16px; width: 100%; }

/* the quick sale card stands out: same look as the closing card on the services page */
.ct-card-sell { border-color: rgba(244,117,32,0.6); background: linear-gradient(135deg, rgba(244,117,32,0.1) 0%, rgba(255,255,255,0.02) 100%); }
.ct-card-sell .ct-card-icon { width: 38px; height: 38px; margin-bottom: 4px; color: var(--accent); }

.ct-details { display: grid; gap: 14px; margin-top: 14px; padding: 0; list-style: none; }
.ct-details li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: rgba(255,255,255,0.86); font-size: 0.95rem; line-height: 1.45; }
.ct-details svg { width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.ct-details a { color: inherit; }
.ct-details a:hover { color: var(--accent); }

/* ----- About and Our Work ----- */
/* a shorter hero than the services page: these pages are about reading, not choosing */
.pg-hero { min-height: min(72svh, 620px); }

@media (min-width: 900px) {
  .pg-hero { min-height: 520px; }
}

/* Who we are: the story beside a panel of facts */
.pg-story { display: grid; gap: 26px; }
.pg-story .v3-text + .v3-text { margin-top: 14px; }

.pg-panel { padding: 24px 22px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: #0f1320; }
.pg-panel-label { color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.pg-panel-figure { display: block; margin: 6px 0 10px; color: #fff; font-family: 'Montserrat', 'Inter', sans-serif; font-size: 3.2rem; font-weight: 800; line-height: 1; }
.pg-panel p { color: rgba(255,255,255,0.74); font-size: 0.95rem; line-height: 1.55; }

@media (min-width: 900px) {
  .pg-story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .pg-panel { padding: 30px 28px; }
}

/* How we work: four numbered cards */
.pg-numcards { display: grid; gap: 14px; }
.pg-numcard { padding: 22px 20px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: #0f1320; }
.pg-num { display: block; color: var(--accent); font-family: 'Montserrat', 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.pg-numcard h3 { margin-top: 12px; color: #fff; font-size: 1.08rem; font-weight: 700; }
.pg-numcard p { margin-top: 8px; color: rgba(255,255,255,0.72); font-size: 0.94rem; line-height: 1.55; }

@media (min-width: 700px) { .pg-numcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pg-numcards { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* What we repair: four links into the services page */
.pg-caps { display: grid; gap: 10px; margin-top: 22px; }

.pg-cap {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size: 0.96rem;
  transition: border-color var(--transition), background var(--transition);
}

.pg-cap svg { width: 26px; height: 26px; color: var(--accent); }
.pg-cap:hover { border-color: rgba(244,117,32,0.6); background: rgba(244,117,32,0.08); }

@media (min-width: 600px) { .pg-caps { grid-template-columns: 1fr 1fr; } }

/* Our Work: filter chips and the project cards */
.pg-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

.pg-filters .filter-btn {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.84);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.pg-filters .filter-btn:hover { border-color: rgba(244,117,32,0.6); color: #fff; }
.pg-filters .filter-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }

.pg-gallery { display: grid; gap: 14px; }
.pg-work { overflow: hidden; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: #0f1320; }
.pg-work.hidden { display: none; }
.pg-work-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pg-work-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pg-work:hover .pg-work-media img { transform: scale(1.04); }

.pg-work-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(8,10,18,0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pg-work-body { padding: 16px 18px 20px; }
.pg-work-body h3 { color: #fff; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.pg-work-body p { margin-top: 8px; color: rgba(255,255,255,0.72); font-size: 0.94rem; line-height: 1.55; }

@media (min-width: 700px) { .pg-gallery { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pg-gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* the trust row under the About headline */
.pg-trust { margin-top: 22px; }
.pg-hero .sv-hero-inner { padding-bottom: 30px; }

/* the four plain points under the two ways to sell */
.pg-sell-points { margin-top: 22px; border-top: 0; padding-top: 0; }

@media (min-width: 700px) { .pg-sell-points { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 1000px) { .pg-sell-points { grid-template-columns: repeat(4, 1fr); } }

.pg-about-actions { margin-top: 26px; }