/* === Stamp Duty Calculator Page ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   ========================================================================== */

/* --- Page Wrapper --- */
.cc-sdc {
  padding-top: 79px;
}

/* --- Calculator Section --- */
.cc-calc {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 214px 151px 0 151px;
}

.cc-calc__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 40px;
  color: var(--cc-ink);
  margin-bottom: 43px;
  line-height: normal;
}

.cc-calc__layout {
  display: grid;
  grid-template-columns: 594px 1fr;
  gap: 0 145px;
}

/* Form */
.cc-calc__field {
  margin-bottom: 0;
}

.cc-calc__field + .cc-calc__field {
  margin-top: 44px;
}

.cc-calc__label {
  display: block;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 8px;
}

.cc-calc__label--state {
  color: #666;
}

.cc-calc__select-wrap {
  position: relative;
  width: 260px;
}

.cc-calc__select {
  width: 100%;
  padding: 14px 44px 14px 18px;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.cc-calc__select:focus:not(:hover),
.cc-calc__select:active {
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  box-shadow: none;
  outline: none;
}

.cc-calc__select-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cc-archive);
}

.cc-calc__input-wrap {
  position: relative;
  width: 100%;
}

.cc-calc__input {
  width: 100%;
  padding: 14px 48px 14px 18px;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.cc-calc__input:focus:not(:hover),
.cc-calc__input:active {
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  box-shadow: none;
  outline: none;
}

.cc-calc__input::placeholder {
  color: var(--cc-archive);
}

.cc-calc__help {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--cc-archive);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.cc-calc__help:hover {
  color: var(--cc-ink);
}

.cc-calc__tooltip {
  display: none;
  position: absolute;
  right: -10px;
  top: 100%;
  margin-top: 12px;
  width: 320px;
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  padding: 16px 20px;
  z-index: 10;
}

.cc-calc__help:hover .cc-calc__tooltip {
  display: block;
}

.cc-calc__tooltip p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  margin-bottom: 8px;
}

.cc-calc__tooltip p:last-child {
  margin-bottom: 0;
}

/* Slider */
.cc-calc__slider-wrap {
  margin-top: 62px;
  margin-bottom: 42px;
}

.cc-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}

.cc-calc__slider::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--cc-newsprint);
  border: none;
  border-radius: 4px;
}

.cc-calc__slider::-moz-range-track {
  height: 3px;
  background: var(--cc-newsprint);
  border: none;
  border-radius: 4px;
}

.cc-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-top: -19px;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}

.cc-calc__slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}

.cc-calc__slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
}

/* Toggles */
.cc-calc__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  max-width: 594px;
}

.cc-calc__toggle-row + .cc-calc__toggle-row {
  margin-top: 19px;
}

.cc-calc__toggle-label {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  color: var(--cc-archive);
  line-height: normal;
}

.cc-calc__toggle {
  position: relative;
  width: 47px;
  height: 20px;
  background: var(--cc-newsprint);
  border: none;
  border-radius: 4000px;
  box-shadow: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.cc-calc__toggle:hover,
.cc-calc__toggle:focus,
.cc-calc__toggle:active {
  background: var(--cc-newsprint);
  border: none;
  box-shadow: none;
  outline: none;
}

.cc-calc__toggle[aria-pressed="true"] {
  background: var(--cc-dark-parchment);
}

.cc-calc__toggle[aria-pressed="true"]:hover,
.cc-calc__toggle[aria-pressed="true"]:focus,
.cc-calc__toggle[aria-pressed="true"]:active {
  background: var(--cc-dark-parchment);
}

.cc-calc__toggle-knob {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.08);
}

.cc-calc__toggle[aria-pressed="true"] .cc-calc__toggle-knob {
  transform: translateX(27px);
}

/* Results */
.cc-calc__results {
  padding-top: 0;
}

.cc-calc__results-label {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 4px;
}

.cc-calc__results-total {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.2;
  color: var(--cc-archive);
  margin-bottom: 28px;
}

.cc-calc__breakdown-label {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 8px;
}

.cc-calc__breakdown-divider {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-newsprint);
  margin-bottom: 18px;
}

.cc-calc__breakdown-item {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  color: var(--cc-ink-2);
  line-height: normal;
  margin-bottom: 9px;
}

.cc-calc__breakdown-type {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-dark-parchment);
  margin-bottom: 22px;
}

.cc-calc__breakdown-total {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  color: var(--cc-dark-parchment);
  line-height: normal;
  margin-bottom: 29px;
}

.cc-calc__note p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  margin-bottom: 0;
}

.cc-calc__note a {
  text-decoration: underline;
}

/* --- Info Section --- */
.cc-info {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 155px var(--cc-gutter) 0;
}

.cc-info__divider {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  margin-bottom: 25px;
}

.cc-info__layout {
  display: grid;
  grid-template-columns: 614fr 595fr;
  gap: 0;
  position: relative;
}

.cc-info__text {
  padding-right: 60px;
}

.cc-info__description {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  color: var(--cc-ink-2);
  line-height: normal;
  margin-bottom: 0;
}

.cc-info__body {
  /* Was a hard-coded Figma offset (440px), which pushed this block to the
     bottom of the section and left a tall blank area above it whenever the
     text column was shorter than the image. Normal spacing instead. */
  margin-top: 40px;
  margin-bottom: 0;
}

.cc-info__body p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 16px;
}

.cc-info__body a {
  text-decoration: underline;
}

.cc-info__image-col {
  position: relative;
}

.cc-info__divider-vert {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: var(--cc-hairline, 0.5px) solid var(--cc-archive);
}

.cc-info__image {
  padding-left: 20px;
}

.cc-info__image img {
  width: 100%;
  height: 749px;
  object-fit: cover;
}

.cc-info__cta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-left: 20px;
  margin-top: 35px;
}

.cc-info__cta-arrow {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--cc-ink-2);
}

.cc-info__cta-text {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

/* --- Process Section --- */
.cc-process {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 60px var(--cc-gutter) 0;
}

.cc-process__divider {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  margin-bottom: 35px;
}

.cc-process__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-bottom: 110px;
}

.cc-process__grid {
  display: flex;
  gap: 0;
  margin-bottom: 161px;
}

.cc-process__col {
  flex: 1;
  padding: 131px 18px 0;
}

.cc-process__col:first-child {
  padding-left: 0;
  padding-top: 131px;
}

.cc-process__col:last-child {
  padding-right: 0;
  padding-top: 131px;
}

.cc-process__col-divider {
  width: 0;
  border-left: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  align-self: stretch;
}

.cc-process__number {
  display: block;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 7px;
}

.cc-process__col-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  color: var(--cc-ink);
}



.cc-sdc .cc-faq .cc-faq__divider {
  margin-bottom: 26px;
}




.cc-sdc .cc-faq .cc-faq__answer p {
  max-width: 960px;
}

/* ============================================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .cc-calc {
    padding: 120px var(--cc-gutter) 0;
  }

  .cc-calc__layout {
    grid-template-columns: 1fr;
    gap: 60px 0;
  }

  .cc-calc__toggle-row {
    max-width: 100%;
  }

  .cc-calc__select-wrap {
    width: 100%;
    max-width: 400px;
  }

  .cc-info__layout {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

  .cc-info__text {
    padding-right: 0;
  }

  .cc-info__divider-vert {
    display: none;
  }

  .cc-info__image {
    padding-left: 0;
  }

  .cc-info__image img {
    height: 500px;
  }

  .cc-info__body {
    margin-top: 40px;
  }

  .cc-info__cta {
    padding-left: 0;
  }

  .cc-process__col {
    padding-top: 60px;
  }

  .cc-process__col:first-child,
  .cc-process__col:last-child {
    padding-top: 60px;
  }

  .cc-process__heading {
    margin-bottom: 60px;
  }

  .cc-process__grid {
    margin-bottom: 80px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cc-calc {
    padding: 80px var(--cc-gutter) 0;
  }

  .cc-calc__title {
    font-size: 30px;
  }

  .cc-calc__results-total {
    font-size: 40px;
  }

  .cc-calc__toggle-label {
    font-size: 20px;
  }

  .cc-calc__breakdown-item {
    font-size: 20px;
  }

  .cc-calc__breakdown-total {
    font-size: 20px;
  }

  .cc-info {
    padding-top: 80px;
  }

  .cc-info__description {
    font-size: 20px;
  }

  .cc-info__image img {
    height: 350px;
  }

  .cc-process__grid {
    flex-direction: column;
    gap: 0;
    margin-bottom: 60px;
  }

  .cc-process__col {
    padding: 30px 0 30px 0;
    border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  }

  .cc-process__col:first-child {
    padding: 30px 0;
  }

  .cc-process__col:last-child {
    padding: 30px 0;
  }

  .cc-process__col-divider {
    display: none;
  }

  .cc-process__number {
    font-size: 40px;
  }

  .cc-process__col-title {
    font-size: 24px;
  }

  .cc-process__heading {
    font-size: 24px;
    margin-bottom: 40px;
  }
}

/* The 93px label gap is a desktop measure; on a phone it reads as a hole
   between the heading and the first question. Matches the FAQs page. */
@media (max-width: 768px) {
}

/* ── Mobile section rhythm ──
 *
 * These sections carry 120-180px of bottom padding, which is right on a 1512px
 * canvas and is most of a screen on a 390px phone: the homepage alone had three
 * sections ending in 160-180px of empty parchment, which is what the client saw
 * as "the mobile spacing is still not there". None of them had a mobile
 * override, so they all kept the desktop value. One value for all of them, so
 * the rhythm is consistent rather than nine separate guesses. */
@media (max-width: 768px) {
  .cc-sdc .cc-faq {
    padding-bottom: 70px;
  }
}