/* =========================================================
 * Classic Page template — page-classic-template.php
 * Palette and typography follow the theme:
 * gold #aa8453 / accent #e4a853 / light #f8f5f0
 * headings "Gilda Display", body Barlow
 * ========================================================= */

/* ---------- Text colour ---------- */

/* Per-section text colour comes from ACF as a custom property on .pc-sec-{n},
   so one inline rule recolours a whole section. Every rule that reads one
   repeats the plain value first: browsers without custom property support
   (IE11) drop the var() line and keep the literal above it. Cards, forms and
   popups sit on their own backgrounds and are left out on purpose. */
.page-classic {
  --pc-heading: #222;
  --pc-text: #666;
}

/* ---------- Section plumbing ---------- */

/* Sections are ordered, hidden and repeated from ACF, so each one owns its
   vertical rhythm — none of them can lean on the section above. */
.page-classic .pc-sp--normal {
  padding-top: 45px;
  padding-bottom: 45px;
}

.page-classic .pc-sp--compact {
  padding-top: 45px;
  padding-bottom: 45px;
}

.page-classic .pc-sp--none {
  padding-top: 0;
  padding-bottom: 0;
}

/* Background images are painted the same way everywhere; the image itself is
   set inline per section by the template. */
.page-classic .pc-section {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Sections with a background image get an overlay on mobile so text stays
   readable over the smaller crop. */
.page-classic .pc-has-bg {
  position: relative;
}

.page-classic .pc-has-bg > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Shared ---------- */

/* Suptitles are gold across the page and stay that way regardless of the
   per-section text colour set in ACF. */
.page-classic .section-suptitle {
  color: #aa8453;
}

.page-classic .pc-section .section-title,
.page-classic .pc-hero .section-title {
  color: #222;
  color: var(--pc-heading, #222);
}

.page-classic .pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 34px;
  border: 1px solid #aa8453;
  background-color: #aa8453;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  transition: all 0.4s ease;
}

.page-classic .pc-btn::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 10px;
  background-color: currentColor;
  /* arrow → drawn as a mask so it always matches the text colour */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")
    no-repeat center / contain;
  transition: transform 0.4s ease;
}

.page-classic .pc-btn:hover::before {
  transform: translateX(4px);
}

.page-classic .pc-btn:hover {
  background-color: #96703f;
  border-color: #96703f;
  color: #fff;
}

.page-classic .pc-btn--outline {
  background-color: transparent;
  color: #aa8453;
  border-color: #aa8453;
}

.page-classic .pc-btn--outline:hover {
  background-color: #aa8453;
  border-color: #aa8453;
  color: #fff;
}

.page-classic .pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 40px;
}

.page-classic .pc-badges {
  list-style: none;
  margin: 35px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-classic .pc-badges__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid #f1eeeb;
  background-color: #fff;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-classic .pc-badges__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.page-classic .pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.page-classic .pc-tag {
  padding: 10px 20px;
  border: 1px solid #aa8453;
  background-color: #aa8453;
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.4s ease;
}

.page-classic .pc-tag:hover {
  border-color: rgba(34, 34, 34, 0.15);
  background-color: #fff;
  color: #aa8453;
}

/* ---------- Rich text ---------- */

/* Headings and bulleted lists typed into a WYSIWYG field. Left alone they fall
   back to the browser's bold sans-serif and round bullets, which reads as a
   different site. These match the checklist section: Gilda Display headings
   and the gold tick marker.

   FAQ answers are deliberately absent — their lists carry the verify badge
   instead — and so is .our-services__box-text, whose h4 the theme styles. */

.page-classic .pc-hero__desc h2,
.page-classic .pc-media__intro h2,
.page-classic .pc-media__list-item__desc h2,
.page-classic .pc-process__item-desc h2,
.page-classic .pc-why__card-text h2,
.page-classic .pc-types__footer h2,
.page-classic .pc-checklist__text h2,
.page-classic .pc-cta__text h2,
.page-classic .pc-appraisal__desc h2,
.page-classic .pc-store__text h2 {
  margin: 35px 0 18px 0;
  color: #222;
  color: var(--pc-heading, #222);
  font-family: "Gilda Display";
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
}

.page-classic .pc-hero__desc h3,
.page-classic .pc-media__intro h3,
.page-classic .pc-media__list-item__desc h3,
.page-classic .pc-process__item-desc h3,
.page-classic .pc-why__card-text h3,
.page-classic .pc-types__footer h3,
.page-classic .pc-checklist__text h3,
.page-classic .pc-cta__text h3,
.page-classic .pc-appraisal__desc h3,
.page-classic .pc-store__text h3 {
  margin: 35px 0 18px 0;
  color: #222;
  color: var(--pc-heading, #222);
  font-family: "Gilda Display";
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.page-classic .pc-hero__desc h4,
.page-classic .pc-media__intro h4,
.page-classic .pc-media__list-item__desc h4,
.page-classic .pc-process__item-desc h4,
.page-classic .pc-why__card-text h4,
.page-classic .pc-types__footer h4,
.page-classic .pc-checklist__text h4,
.page-classic .pc-cta__text h4,
.page-classic .pc-appraisal__desc h4,
.page-classic .pc-store__text h4 {
  margin: 28px 0 14px 0;
  color: #222;
  color: var(--pc-heading, #222);
  font-family: "Gilda Display";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
}

/* A heading that opens the block has no copy above it to clear. */
.page-classic .pc-hero__desc > h2:first-child,
.page-classic .pc-media__intro > h2:first-child,
.page-classic .pc-checklist__text > h2:first-child,
.page-classic .pc-cta__text > h2:first-child,
.page-classic .pc-appraisal__desc > h2:first-child,
.page-classic .pc-store__text > h2:first-child,
.page-classic .pc-hero__desc > h3:first-child,
.page-classic .pc-media__intro > h3:first-child,
.page-classic .pc-checklist__text > h3:first-child,
.page-classic .pc-cta__text > h3:first-child,
.page-classic .pc-appraisal__desc > h3:first-child,
.page-classic .pc-store__text > h3:first-child {
  margin-top: 0;
}

.page-classic .pc-hero__desc ul,
.page-classic .pc-media__intro ul,
.page-classic .pc-media__list-item__desc ul,
.page-classic .pc-process__item-desc ul,
.page-classic .pc-why__card-text ul,
.page-classic .pc-types__footer ul,
.page-classic .pc-checklist__text ul,
.page-classic .pc-cta__text ul,
.page-classic .pc-appraisal__desc ul,
.page-classic .pc-store__text ul {
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-classic .pc-hero__desc ul li,
.page-classic .pc-media__intro ul li,
.page-classic .pc-media__list-item__desc ul li,
.page-classic .pc-process__item-desc ul li,
.page-classic .pc-why__card-text ul li,
.page-classic .pc-types__footer ul li,
.page-classic .pc-checklist__text ul li,
.page-classic .pc-cta__text ul li,
.page-classic .pc-appraisal__desc ul li,
.page-classic .pc-store__text ul li {
  position: relative;
  padding-left: 32px;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 17px;
  line-height: 1.5;
}

/* Same tick as .pc-checklist__list-item — two borders on a rotated box. */
.page-classic .pc-hero__desc ul li::before,
.page-classic .pc-media__intro ul li::before,
.page-classic .pc-media__list-item__desc ul li::before,
.page-classic .pc-process__item-desc ul li::before,
.page-classic .pc-why__card-text ul li::before,
.page-classic .pc-types__footer ul li::before,
.page-classic .pc-checklist__text ul li::before,
.page-classic .pc-cta__text ul li::before,
.page-classic .pc-appraisal__desc ul li::before,
.page-classic .pc-store__text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 13px;
  border-right: 2px solid #aa8453;
  border-bottom: 2px solid #aa8453;
  transform: rotate(45deg);
}

/* ---------- Hero ---------- */

/* The hero is fixed at the top of the template, outside the section loop, so
   it keeps its own padding rather than the pc-sp--* scale. */
.page-classic .pc-hero {
  background-color: #f8f5f0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* .site-header is position:fixed — the top padding clears it, same as the front page hero */
  padding: 210px 0 110px 0;
}

/* The hero copy sits straight on the background photo, so a light wash keeps it
   readable without flattening the image. The mobile rule further down raises
   this to 0.6, where the tighter crop puts more detail behind the text. */
.page-classic .pc-hero.pc-has-bg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.35;
  pointer-events: none;
}

.page-classic .pc-hero__title {
  margin: 0 0 30px 0;
  color: #222;
  color: var(--pc-heading, #222);
  font-family: "Gilda Display";
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
}

.page-classic .pc-hero__desc p {
  margin: 0 0 15px 0;
  max-width: 780px;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 18px;
  line-height: 1.55;
}

.page-classic .pc-hero__desc p:last-of-type {
  margin-bottom: 0;
}

/* Hero and CTA carry the same actions block — primary button, any number of
   outline buttons, then the note and social icons. */
.page-classic .pc-hero__actions,
.page-classic .pc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px 45px;
  margin-top: 45px;
}

.page-classic .pc-hero__buttons,
.page-classic .pc-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-classic .pc-hero__socials,
.page-classic .pc-cta__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  flex-direction: column;
}

.page-classic .pc-hero__socials-label,
.page-classic .pc-cta__socials-label {
  color: #666;
  color: var(--pc-text, #666);
  font-size: 16px;
  line-height: 1.4;
}

.page-classic .pc-hero__socials-list,
.page-classic .pc-cta__socials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.page-classic .pc-hero__social,
.page-classic .pc-cta__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.page-classic a.pc-hero__social:hover,
.page-classic a.pc-cta__social:hover {
  transform: translateY(-3px);
}

.page-classic .pc-hero__social img,
.page-classic .pc-cta__social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Services ---------- */

/* Box markup and styling come from the theme's own .our-services rules, but
   .our-services__box-img has no height there — so the img's height: 100% has
   nothing to resolve against and every box ends up as tall as its upload.
   A fixed height on the wrapper lets the theme's object-fit: cover crop them
   all to one size, the way the types gallery does. */
.page-classic .pc-services .our-services__box-img {
  height: 340px;
}

/* ---------- Text & Media ---------- */

.page-classic .pc-media__text h2 {
  margin-bottom: 30px;
}

.page-classic .pc-media__intro p {
  margin: 20px 0 0 0;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 18px;
  line-height: 1.45833;
}

.page-classic .pc-media__list {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.page-classic .pc-media__list-item {
  position: relative;
  padding-left: 48px;
}

.page-classic .pc-media__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 35px;
  border-bottom: 1px solid #aa8453;
}

/* Sub-headings use Barlow 600 — Gilda Display ships a single weight,
   so bolding it would render as a synthetic (faux) bold. */
.page-classic .pc-media__list-item__title {
  margin: 0 0 6px 0;
  color: #222;
  color: var(--pc-heading, #222);
  font-family: "Gilda Display";
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.page-classic .pc-media__list-item__desc p {
  margin: 0;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 17px;
  line-height: 1.45833;
}

.page-classic .pc-media__image {
  height: 100%;
  min-height: 400px;
}

.page-classic .pc-media__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 13px;
}

/* Second copy of the image, rendered under the heading.
   Hidden on desktop, swapped in below 992px. */
.page-classic .pc-media__image--mobile {
  display: none;
}

/* ---------- Selling Process ---------- */

.page-classic .pc-process__title {
  margin-bottom: 55px;
}

.page-classic .pc-process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.page-classic .pc-process__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  padding: 30px 60px 30px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.page-classic .pc-process__item-img {
  width: 30%;
  max-width: 320px;
  flex-shrink: 0;
}

.page-classic .pc-process__item-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.page-classic .pc-process__item-text {
  flex: 1;
}

.page-classic .pc-process__item-title {
  margin: 0 0 10px 0;
  color: #222;
  color: var(--pc-heading, #222);
  font-family: "Gilda Display";
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
}

.page-classic .pc-process__item-desc p {
  margin: 0;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 18px;
  line-height: 1.45833;
}

.page-classic .pc-process__item-number {
  position: absolute;
  right: 0;
  top: 30px;
  color: #e4a853;
  font-size: 20px;
  line-height: 1;
}

/* ---------- Why Us ---------- */

/* Cards sit on white and keep their own colours, so the per-section text
   colour deliberately stops at the heading above them. */
.page-classic .pc-why {
  background-color: #f8f5f0;
}

.page-classic .pc-why__title {
  margin-bottom: 55px;
}

.page-classic .pc-why__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.page-classic .pc-why__card {
  width: calc(33.333% - 17.34px);
  padding: 35px 30px 40px 30px;
  border: 1px solid #f1eeeb;
  background-color: #fff;
}

.page-classic .pc-why__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 25px;
}

.page-classic .pc-why__card-icon img {
  object-fit: contain;
}

.page-classic .pc-why__card-title {
  margin: 0 0 14px 0;
  color: #222;
  font-family: "Gilda Display";
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}

.page-classic .pc-why__card-text p {
  margin: 0;
  color: #666;
  font-size: 17px;
  line-height: 1.45833;
}

/* ---------- Types Gallery ---------- */

.page-classic .pc-types__title {
  margin-bottom: 55px;
}

.page-classic .pc-types__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 10px;
}

.page-classic .pc-types__item {
  position: relative;
  display: block;
  overflow: hidden;
}

.page-classic .pc-types__item--tall {
  grid-row: span 2;
}

.page-classic .pc-types__item--wide {
  grid-column: span 2;
}

.page-classic .pc-types__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.page-classic .pc-types__item:hover img {
  transform: scale(1.05);
}

.page-classic .pc-types__item-label {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 40px 18px 16px 18px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  color: #fff;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.page-classic .pc-types__footer {
  margin-top: 30px;
}

.page-classic .pc-types__footer p {
  margin: 0;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 17px;
  line-height: 1.45833;
}

.page-classic .pc-types__footer a {
  color: #aa8453;
}

/* ---------- Checklist ---------- */

.page-classic .pc-checklist__title {
  margin-bottom: 25px;
}

.page-classic .pc-checklist__text p {
  margin: 0 0 15px 0;
  max-width: 860px;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 18px;
  line-height: 1.45833;
}

.page-classic .pc-checklist__list-title {
  margin: 35px 0 18px 0;
  color: #222;
  color: var(--pc-heading, #222);
  font-family: "Gilda Display";
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.page-classic .pc-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-classic .pc-checklist__list-item {
  position: relative;
  padding-left: 32px;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 17px;
  line-height: 1.5;
}

.page-classic .pc-checklist__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 13px;
  border-right: 2px solid #aa8453;
  border-bottom: 2px solid #aa8453;
  transform: rotate(45deg);
}

/* ---------- CTA ---------- */

/* Shares the actions block with the hero — see the Hero section above. */
.page-classic .pc-cta__text p {
  margin: 20px 0 0 0;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 18px;
  line-height: 1.45833;
}

/* ---------- FAQ (theme markup, colours only) ---------- */

/* Accordion behaviour and box styling come from the theme's own .faq rules in
   style.css; main.js binds on .faq__item, so repeated FAQ sections each get
   their own accordion without extra script. */
.page-classic .pc-faq .faq__title {
  margin-bottom: 55px;
}

/* Bulleted lists inside an answer swap the browser marker for the verify
   badge. Numbered lists are left alone — they keep their numbers. */
.page-classic .pc-faq .faq__item-desc ul {
  list-style: none;
  margin: 15px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-classic .pc-faq .faq__item-desc ul li {
  position: relative;
  padding-left: 32px;
  line-height: 1.5;
}

.page-classic .pc-faq .faq__item-desc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background-image: url("../img/verify.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ---------- Appraisal ---------- */

.page-classic .pc-appraisal {
  background-color: #f8f5f0;
}

.page-classic .pc-appraisal__desc p {
  margin: 20px 0 0 0;
  max-width: 560px;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 18px;
  line-height: 1.45833;
}

.page-classic .pc-appraisal__form {
  padding: 35px 30px 40px 30px;
  background-color: #fff;
  border: 1px solid #f1eeeb;
}

.page-classic .pc-appraisal__form-title {
  margin: 0 0 25px 0;
  color: #222;
  font-family: "Gilda Display";
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
}

.page-classic .pc-appraisal__form input[type="text"],
.page-classic .pc-appraisal__form input[type="email"],
.page-classic .pc-appraisal__form input[type="tel"],
.page-classic .pc-appraisal__form input[type="date"],
.page-classic .pc-appraisal__form textarea {
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 12px;
  border: 1px solid #f1eeeb;
  background-color: #fff;
  color: #222;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.page-classic .pc-appraisal__form textarea {
  min-height: 110px;
  resize: vertical;
}

.page-classic .pc-appraisal__form input:focus,
.page-classic .pc-appraisal__form textarea:focus {
  outline: none;
  border-color: #aa8453;
}

.page-classic .pc-appraisal__form input[type="submit"] {
  width: 100%;
  padding: 16px 28px;
  border: 1px solid #aa8453;
  background-color: #aa8453;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
}

.page-classic .pc-appraisal__form input[type="submit"]:hover {
  background-color: transparent;
  color: #222;
  border-color: rgba(34, 34, 34, 0.5);
}

/* ---------- Store ---------- */

.page-classic .pc-store__title {
  margin-bottom: 20px;
}

.page-classic .pc-store__text p {
  margin: 0 0 40px 0;
  max-width: 860px;
  color: #666;
  color: var(--pc-text, #666);
  font-size: 18px;
  line-height: 1.45833;
}

.page-classic .pc-store__box {
  height: 100%;
  padding: 35px 30px 40px 30px;
  background-color: #f8f5f0;
}

.page-classic .pc-store__box-title {
  margin: 0 0 18px 0;
  color: #222;
  font-family: "Gilda Display";
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}

.page-classic .pc-store__address p {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 17px;
  line-height: 1.5;
}

.page-classic .pc-store__address a {
  color: #aa8453;
}

.page-classic .pc-store__map {
  height: 100%;
  min-height: 300px;
}

.page-classic .pc-store__map iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  display: block;
}

/* ---------- Popups ---------- */

body.pc-popup-open {
  overflow: hidden;
}

.pc-popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  overflow-y: auto;
}

.pc-popup[hidden] {
  display: none;
}

/* Fixed, not absolute: .pc-popup scrolls when the form is taller than the
   screen, and an absolute 100% would only cover the visible slice — the
   backdrop would then break off as soon as you scroll. */
.pc-popup__backdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.55);
}

.pc-popup__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: 50px 45px;
  background-color: #fff;
  border: 1px solid #f1eeeb;
  box-shadow: 0 20px 60px -20px rgba(34, 34, 34, 0.35);
  animation: pc-popup-in 0.35s ease-out;
}

@keyframes pc-popup-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pc-popup__close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: #666;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
}

.pc-popup__close:hover,
.pc-popup__close:focus-visible {
  color: #aa8453;
}

.pc-popup__title {
  margin: 0 0 12px 0;
  color: #222;
  font-family: "Gilda Display";
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.pc-popup__text {
  margin-bottom: 28px;
  text-align: center;
}

.pc-popup__text p {
  margin: 0;
  color: #666;
  font-size: 17px;
  line-height: 1.5;
}

.pc-popup__form input[type="text"],
.pc-popup__form input[type="email"],
.pc-popup__form input[type="tel"],
.pc-popup__form input[type="date"],
.pc-popup__form textarea {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid #dcd5cb;
  background-color: #fff;
  color: #222;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.pc-popup__form textarea {
  min-height: 100px;
  resize: vertical;
}

.pc-popup__form input:focus,
.pc-popup__form textarea:focus {
  outline: none;
  border-color: #aa8453;
}

.pc-popup__form input[type="submit"] {
  width: 100%;
  padding: 17px 28px;
  border: 1px solid #aa8453;
  background-color: #aa8453;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
}

.pc-popup__form input[type="submit"]:hover {
  background-color: transparent;
  color: #222;
  border-color: rgba(34, 34, 34, 0.5);
}

.page-classic .pc-btn:focus-visible,
.pc-popup__close:focus-visible,
.pc-popup__form input:focus-visible,
.pc-popup__form textarea:focus-visible {
  outline: 2px solid #aa8453;
  outline-offset: 2px;
}

/* ---------- Content links ---------- */

/* Inline links inside the WYSIWYG copy. The theme sets no global anchor
   colour, so without this they fall back to the browser's blue. Buttons
   (.pc-btn) and tag pills (.pc-tag) sit outside these blocks and keep their
   own styling. .pc-types__footer and .pc-store__address are left out here on
   purpose — they already carry the gold above — and only join the hover rule. */
.page-classic .pc-hero__desc a,
.page-classic .pc-media__intro a,
.page-classic .pc-media__list-item__desc a,
.page-classic .pc-process__item-desc a,
.page-classic .pc-why__card-text a,
.page-classic .pc-checklist__text a,
.page-classic .pc-checklist__list-item a,
.page-classic .pc-cta__text a,
.page-classic .pc-faq .faq__item-desc a,
.page-classic .pc-appraisal__desc a,
.page-classic .pc-store__text a,
.page-classic .our-services__box-text a,
.pc-popup__text a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-classic .pc-hero__desc a:hover,
.page-classic .pc-media__intro a:hover,
.page-classic .pc-media__list-item__desc a:hover,
.page-classic .pc-process__item-desc a:hover,
.page-classic .pc-why__card-text a:hover,
.page-classic .pc-types__footer a:hover,
.page-classic .pc-checklist__text a:hover,
.page-classic .pc-checklist__list-item a:hover,
.page-classic .pc-cta__text a:hover,
.page-classic .pc-faq .faq__item-desc a:hover,
.page-classic .pc-appraisal__desc a:hover,
.page-classic .pc-store__text a:hover,
.page-classic .pc-store__address a:hover,
.page-classic .our-services__box-text a:hover,
.pc-popup__text a:hover {
  color: #aa8453;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .pc-popup__dialog {
    animation: none;
  }
}

/* =========================================================
 * Responsive
 * ========================================================= */

/* Image on the left is a desktop-only swap: below 992px the image column is
   hidden and the copy runs full width, so the order stops mattering. */
@media only screen and (min-width: 992px) {
  .page-classic .pc-media--image-left > .container > .row {
    flex-direction: row-reverse;
  }
}

@media only screen and (max-width: 1440px) {
  .page-classic .pc-hero {
    background-position: left;
  }
}

@media only screen and (max-width: 1199px) {
  .page-classic .pc-hero__title {
    font-size: 44px;
  }

  .page-classic .pc-why__card {
    width: calc(50% - 13px);
  }
}

@media only screen and (max-width: 991px) {
  /* Top bar is showing by default, so the hero clears header + bar.
     Once the bar is dismissed, page-classic.js flags <body> and this drops back. */
  .page-classic .pc-hero {
    padding: 200px 0 60px 0;
  }

  body.pc-top-bar-closed .page-classic .pc-hero {
    padding-top: 130px;
  }

  .page-classic .pc-hero__title {
    font-size: 36px;
  }

  .page-classic .pc-hero__actions,
  .page-classic .pc-cta__actions {
    gap: 22px 30px;
  }

  .page-classic .pc-btn {
    padding: 17px 26px;
    font-size: 16px;
  }

  .page-classic .pc-sp--normal {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .page-classic .pc-sp--compact {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* Below lg every box takes the whole row. The theme's col-md-6 would keep
     the small ones two across down to 768px, which leaves their images too
     narrow to read. Three properties because the grid sizes columns with
     flex-basis in Bootstrap 4 and with width in 5. */
  .page-classic .pc-services .gap-30 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .page-classic .pc-services .our-services__box-img {
    height: 280px;
  }

  .page-classic .pc-media__image {
    margin-top: 40px;
    min-height: 0;
    height: 340px;
  }

  /* Swap: the column copy goes away, the one under the heading takes over. */
  .page-classic .pc-media__image-col {
    display: none;
  }

  .page-classic .pc-media__image--mobile {
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .page-classic .pc-process__item {
    padding-right: 0;
  }

  .page-classic .pc-process__item-img {
    width: 100%;
    max-width: none;
  }

  .page-classic .pc-process__item-number {
    position: static;
    display: block;
    order: -1;
  }

  .page-classic .pc-appraisal__form {
    margin-top: 40px;
  }

  .page-classic .pc-store__map {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 1440px) {
  /* Background overlay — mobile only, matching the mobile background images.
     One rule now: sections are interchangeable, so a per-section opacity would
     have nothing stable to hang on. */
  .page-classic .pc-hero.pc-has-bg::before,
  .page-classic .pc-section.pc-has-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.6;
    pointer-events: none;
  }
}
@media only screen and (max-width: 767px) {
  .page-classic .pc-services .our-services__box-img {
    height: 240px;
  }

  .page-classic .pc-types__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .page-classic .pc-why__card {
    width: 100%;
  }

  .page-classic .pc-hero {
    background-position: center;
  }
}

@media only screen and (max-width: 565px) {
  /* Narrower screen — the top bar wraps onto more lines, so it needs more room. */
  .page-classic .pc-hero {
    padding: 215px 0 50px 0;
  }

  body.pc-top-bar-closed .page-classic .pc-hero {
    padding-top: 120px;
  }

  .page-classic .pc-hero__title {
    font-size: 30px;
  }

  .page-classic .pc-hero__buttons,
  .page-classic .pc-cta__buttons {
    width: 100%;
  }

  .pc-popup {
    padding: 20px 14px;
  }

  .pc-popup__dialog {
    padding: 40px 22px 30px 22px;
  }

  .pc-popup__title {
    font-size: 26px;
  }

  .page-classic .pc-hero__desc p,
  .page-classic .pc-media__intro p,
  .page-classic .pc-cta__text p,
  .page-classic .pc-checklist__text p,
  .page-classic .pc-store__text p,
  .page-classic .pc-appraisal__desc p {
    font-size: 16px;
  }

  .page-classic .pc-btn,
  .page-classic .pc-hero__actions .pc-btn,
  .page-classic .pc-cta__actions .pc-btn,
  .page-classic .pc-actions .pc-btn {
    width: 100%;
  }

  .page-classic .pc-types__grid {
    grid-template-columns: 1fr;
  }

  .page-classic .pc-types__item--tall,
  .page-classic .pc-types__item--wide {
    grid-row: span 1;
    grid-column: span 1;
  }

  .page-classic .pc-appraisal__form {
    padding: 35px 15px 40px 15px;
  }
}