/* ============================================================
   AAHGOO — Contact Page Stylesheet
   Mobile-First Responsive | Extends base style.css
   ============================================================ */


/* ============================================================
   CONTACT HERO
   ============================================================ */
.contact-hero {
  position: relative;
  padding: 110px 0 50px;
  overflow: hidden;
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--clr-canvas);
  background-image:
    radial-gradient(at 0% 0%, var(--clr-rose-light) 0px, transparent 60%),
    radial-gradient(at 100% 0%, var(--clr-peach-soft) 0px, transparent 50%),
    radial-gradient(at 100% 100%, var(--clr-blue-soft) 0px, transparent 60%),
    radial-gradient(at 0% 100%, #e6dfec 0px, transparent 50%);
}

/* Warm neutral canvas used by the approved contact-page reference. */
.contact-hero__bg {
  background-color: #fcf8f3;
  background-image: none;
}

.contact-hero__inner {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

.contact-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-purple);
  margin-bottom: 12px;
}

.contact-hero__eyebrow svg {
  width: 14px;
  height: 14px;
}

.contact-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 500;
  color: var(--clr-dark);
  line-height: 1.1;
  margin-bottom: 8px;
}

.contact-hero__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--clr-pink-text);
  line-height: 1.35;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 14px;
}

.contact-hero__desc {
  font-size: 0.88rem;
  color: var(--clr-body);
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: 24px;
}

.contact-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-purple);
  color: var(--clr-white);
  padding: 14px 30px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.25s;
}

.contact-hero__cta:hover {
  background: var(--clr-purple-deep);
}

.contact-hero__image {
  display: none;
}


/* ============================================================
   CONTACT FORM & SUPPORT — Two-Column Section
   ============================================================ */
.contact-main {
  padding: 48px 0;
  background: var(--clr-white);
}

.contact-main .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* --- Form Panel --- */
.contact-form-panel {
  border: 1px solid var(--clr-rose-light);
  border-radius: 24px;
  padding: 32px 24px;
  background: var(--clr-white);
}

.contact-form-panel__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--clr-dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-form-panel__title svg {
  width: 20px;
  height: 20px;
  color: var(--clr-pink-text);
}

.contact-form-panel__desc {
  font-size: 0.82rem;
  color: var(--clr-body);
  line-height: 1.5;
  margin-bottom: 28px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
}

.contact-form__group label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-dark);
  margin-bottom: 6px;
}

.contact-form__group label span {
  color: var(--clr-pink-text);
}

.contact-form__group input,
.contact-form__group select,
.contact-form__group textarea {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--clr-dark);
  background: var(--clr-white);
  border: 1px solid var(--clr-rose-light);
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form__group input:focus,
.contact-form__group select:focus,
.contact-form__group textarea:focus {
  border-color: var(--clr-purple-soft);
  box-shadow: 0 0 0 3px rgba(155, 123, 158, 0.1);
}

.contact-form__group input::placeholder,
.contact-form__group textarea::placeholder {
  color: var(--clr-muted);
}

.contact-form__group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a8d8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
  cursor: pointer;
}

.contact-form__group textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form__char-count {
  text-align: right;
  font-size: 0.68rem;
  color: var(--clr-muted);
  margin-top: 4px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--clr-purple);
  color: var(--clr-white);
  padding: 15px 36px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.25s;
  border: none;
  cursor: pointer;
  width: 100%;
}

.contact-form__submit:hover {
  background: var(--clr-purple-deep);
}

.contact-form__submit svg {
  width: 16px;
  height: 16px;
}

.contact-form__note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--clr-muted);
  margin-top: 8px;
}

.contact-form__note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--clr-rose-dark);
}


/* --- Support Info Panel --- */
.contact-support {
  border: 1px solid var(--clr-rose-light);
  border-radius: 24px;
  padding: 32px 24px;
  background: var(--clr-white);
}

.contact-support__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--clr-dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-support__title svg {
  width: 20px;
  height: 20px;
  color: var(--clr-pink-text);
}

.contact-support__desc {
  font-size: 0.82rem;
  color: var(--clr-body);
  line-height: 1.5;
  margin-bottom: 28px;
}

.contact-support__items {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-support__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-support__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--clr-rose-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-support__icon svg {
  width: 20px;
  height: 20px;
  color: var(--clr-purple-deep);
}

.contact-support__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-dark);
  margin-bottom: 4px;
}

.contact-support__value {
  font-size: 0.85rem;
  color: var(--clr-purple-deep);
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-support__value a {
  color: var(--clr-purple-deep);
  transition: color 0.2s;
}

.contact-support__value a:hover {
  color: var(--clr-purple);
}

.contact-support__detail {
  font-size: 0.75rem;
  color: var(--clr-body);
  line-height: 1.5;
}


/* ============================================================
   HOW CAN WE HELP?
   ============================================================ */
.contact-help {
  padding: 48px 0;
  background: var(--clr-white);
}

.contact-help .section-header {
  margin-bottom: 12px;
}

.contact-help .section-header p {
  max-width: 500px;
  margin: 0 auto;
}

.contact-help__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.contact-help__card {
  border: 1px solid var(--clr-rose-light);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s;
  background: var(--clr-white);
}

.contact-help__card:hover {
  box-shadow: 0 12px 36px rgba(45, 36, 36, 0.07);
  transform: translateY(-3px);
}

.contact-help__card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clr-rose-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.contact-help__card-icon svg {
  width: 26px;
  height: 26px;
  color: var(--clr-purple-deep);
}

.contact-help__card h3 {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 6px;
}

.contact-help__card p {
  font-size: 0.78rem;
  color: var(--clr-body);
  line-height: 1.5;
  margin-bottom: 14px;
}

.contact-help__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.contact-help__card-link:hover {
  color: var(--clr-purple-deep);
}

.contact-help__arrow {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 12px;
  margin-left: 5px;
  font-size: 0;
  vertical-align: -1px;
}

.contact-help__arrow::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.contact-help__arrow::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Wider decorative hearts used across the contact page headings. */
.contact-decor-heart {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  transform: scaleX(1.35);
  transform-origin: center;
}

/* Contact hero uses the same nested media/frame construction as the homepage. */
.contact-hero__media {
  display: none;
}

@media (min-width: 1025px) {
  .contact-hero__media {
    position: absolute;
    z-index: 1;
    top: 64px;
    right: calc(100% - 100vw);
    display: block;
    width: 62%;
    height: 384px;
    overflow: hidden;
    background: var(--clr-canvas);
    border-top-left-radius: clamp(52px, 6vw, 115px);
    border-bottom-left-radius: 28% 46%;
    border-bottom-right-radius: clamp(70px, 9vw, 175px) clamp(70px, 10vw, 185px);
  }

  .contact-hero__media .hero__media-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
  }

  .contact-hero__media .hero__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 35%;
    /* Crop the legacy baked-in edge so the media frame supplies one clean curve. */
    transform: scale(1.14);
    transform-origin: center;
  }
}

.contact-help__card-link svg {
  width: 14px;
  height: 14px;
}


/* ============================================================
   TESTIMONIALS (Contact Page Version)
   ============================================================ */
.contact-testimonials {
  padding: 48px 0;
  background: var(--clr-white);
}

.contact-testimonials__inner {
  background: none;
  border-radius: 60px;
  padding: 40px 20px;
  border: 0 solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg width='560' height='240' viewBox='0 0 560 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 80 0 C 180 0 180 3 280 3 C 380 3 380 0 480 0 A 80 80 0 0 1 560 80 L 560 160 A 80 80 0 0 1 480 240 C 380 240 380 237 280 237 C 180 237 180 240 80 240 A 80 80 0 0 1 0 160 L 0 80 A 80 80 0 0 1 80 0 Z' fill='%23FBF5F2'/%3E%3C/svg%3E");
  border-image-slice: 80 fill;
  border-image-width: 60px;
  border-image-repeat: round;
}

.contact-testimonials__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.contact-testimonials__header h2 {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--clr-dark);
  line-height: 1.15;
}

.contact-testimonials__header p {
  font-size: 0.82rem;
  color: var(--clr-body);
  line-height: 1.5;
  margin-bottom: 8px;
}

.contact-testimonials__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--clr-purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.contact-testimonials__cta:hover {
  color: var(--clr-purple-deep);
}

.contact-testimonials__cta svg {
  width: 14px;
  height: 14px;
}

.contact-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-testimonial-card {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contact-testimonial-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}

.contact-testimonial-card__body {
  padding: 16px;
  background: var(--clr-white);
  border: 1px solid var(--clr-rose-light);
  border-top: none;
  border-radius: 0 0 16px 16px;
}

.contact-testimonial-card__quote {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--clr-dark);
  line-height: 1.45;
  margin-bottom: 10px;
}

.contact-testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
}

.contact-testimonial-card__stars svg {
  width: 14px;
  height: 14px;
  fill: var(--clr-gold);
}


/* ============================================================
   CONTACT FAQ
   ============================================================ */
.contact-faq {
  padding: 48px 0;
  background: var(--clr-white);
}

.contact-faq .section-header {
  margin-bottom: 28px;
}

.contact-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}

.contact-faq__item {
  border: 1px solid var(--clr-rose-light);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.contact-faq__item:hover {
  box-shadow: 0 4px 16px rgba(45, 36, 36, 0.05);
}

.contact-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-dark);
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}

.contact-faq__question:hover {
  color: var(--clr-purple);
}

.contact-faq__question svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--clr-purple-soft);
  transition: transform 0.3s;
}

.contact-faq__item.is-open .contact-faq__question svg {
  transform: rotate(45deg);
}

.contact-faq__answer {
  display: none;
  padding: 0 20px 18px;
  font-size: 0.82rem;
  color: var(--clr-body);
  line-height: 1.6;
}

.contact-faq__item.is-open .contact-faq__answer {
  display: block;
}


/* ============================================================
   RESPONSIVE — 480px+
   ============================================================ */
@media (min-width: 481px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .contact-help__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-faq__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form__submit {
    width: auto;
  }
}


/* ============================================================
   RESPONSIVE — 768px+ (Tablets)
   ============================================================ */
@media (min-width: 768px) {
  .contact-hero {
    padding: 120px 0 56px;
  }

  .contact-hero__image {
    display: block;
    border-radius: 20px;
    max-height: 300px;
    object-fit: cover;
    width: 100%;
  }

  .contact-hero__inner {
    grid-template-columns: 1fr 1fr;
  }

  .contact-help__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .contact-testimonials__inner {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  .contact-testimonials__header {
    flex: 0 0 24%;
    margin-bottom: 0;
  }
}


/* ============================================================
   RESPONSIVE — 1025px+ (Desktop)
   ============================================================ */
@media (min-width: 1025px) {
  .contact-hero {
    padding: 140px 0 64px;
  }

  .contact-main .container {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
  }

  .contact-form-panel {
    padding: 40px 36px;
  }

  .contact-support {
    padding: 40px 36px;
  }
}

/* ============================================================
   CONTACT REFERENCE COMPOSITION
   The contact page deliberately uses a narrower editorial grid than the
   product pages. This keeps the airy proportions of the supplied design.
   ============================================================ */
@media (min-width: 768px) {
  .announcement-bar .container,
  .site-header .container,
  .contact-hero .container,
  .contact-main .container,
  .contact-help .container,
  .newsletter-footer-wrap .container {
    max-width: 1050px;
  }

  .contact-hero {
    padding: 62px 0 0;
    min-height: 362px;
  }

  .contact-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    min-height: 300px;
  }

  .contact-hero__content {
    align-self: center;
    padding-bottom: 2px;
  }

  .contact-hero__eyebrow {
    font-size: .55rem;
    margin-bottom: 14px;
  }

  .contact-hero__title {
    font-size: 2.2rem;
    line-height: 1.05;
    margin-bottom: 9px;
  }

  .contact-hero__subtitle {
    font-size: 1.06rem;
    margin-bottom: 12px;
  }

  .contact-hero__desc {
    max-width: 310px;
    font-size: .7rem;
    margin-bottom: 20px;
  }

  .contact-hero__cta {
    padding: 12px 25px;
    font-size: .58rem;
  }

  .contact-hero__image {
    display: block;
    width: 100%;
    height: 300px;
    max-height: none;
    overflow: hidden;
    border-radius: 42% 0 0 18%;
    margin-top: 60px;
  }

  .contact-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .contact-main {
    padding: 36px 0 0;
  }

  .contact-main .container {
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .contact-form-panel,
  .contact-support {
    border-radius: 18px;
    padding: 28px;
  }

  .contact-form-panel__title,
  .contact-support__title {
    font-size: 1.18rem;
  }

  .contact-form-panel__desc,
  .contact-support__desc {
    font-size: .63rem;
    margin-bottom: 20px;
  }

  .contact-form { gap: 13px; }
  .contact-form__row { gap: 12px; }
  .contact-form__group label { font-size: .58rem; margin-bottom: 5px; }
  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea { font-size: .66rem; border-radius: 9px; padding: 10px 12px; }
  .contact-form__group textarea { min-height: 92px; }
  .contact-form__char-count { font-size: .56rem; }
  .contact-form__submit { padding: 12px 24px; font-size: .59rem; }
  .contact-form__note { font-size: .56rem; margin-top: 2px; }
  .contact-support__items { gap: 19px; }
  .contact-support__item { gap: 12px; }
  .contact-support__icon { width: 34px; height: 34px; }
  .contact-support__label { font-size: .57rem; margin-bottom: 3px; }
  .contact-support__value { font-size: .66rem; }
  .contact-support__detail { font-size: .59rem; }

  .contact-help {
    padding: 76px 0 42px;
  }

  .contact-help .section-header { margin-bottom: 14px; }
  .contact-help .section-header h2 { font-size: 1.5rem; }
  .contact-help .section-header p { font-size: .68rem; }
  .contact-help__grid { max-width: 738px; gap: 14px; }
  .contact-help__card { min-height: 176px; border-radius: 15px; padding: 20px 13px; }
  .contact-help__card-icon { width: 42px; height: 42px; margin-bottom: 11px; }
  .contact-help__card-icon svg { width: 20px; height: 20px; }
  .contact-help__card h3 { font-size: .67rem; margin-bottom: 5px; }
  .contact-help__card p { font-size: .56rem; margin-bottom: 12px; }
  .contact-help__card-link { font-size: .54rem; }

  .contact-testimonials { padding: 0 0 26px; }
  .contact-testimonials .container { max-width: 1175px; }
  .contact-testimonials__inner { padding: 24px 30px; border-radius: 46px; gap: 28px; }
  .contact-testimonials__header { flex-basis: 22%; gap: 4px; }
  .contact-testimonials__header h2 { font-size: 1.2rem; }
  .contact-testimonials__header p { font-size: .6rem; }
  .contact-testimonials__cta { font-size: .52rem; }
  .contact-testimonials__grid { flex: 1; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .contact-testimonial-card { display: grid; grid-template-columns: 82px 1fr; align-items: start; gap: 12px; }
  .contact-testimonial-card__img { aspect-ratio: 1 / 1.3; border-radius: 7px; }
  .contact-testimonial-card__body { padding: 0; background: transparent; border: 0; border-radius: 0; }
  .contact-testimonial-card__quote { font-size: .6rem; line-height: 1.35; margin-bottom: 7px; }
  .contact-testimonial-card__body span { color: var(--clr-gold); font-size: .56rem; letter-spacing: 1px; }

  .newsletter { padding: 38px 0 42px; }
  .newsletter h2 { font-size: 1.45rem; }
  .newsletter p { font-size: .62rem; }
  .newsletter__form { max-width: 370px; }
  .newsletter__form input { font-size: .64rem; }
  .newsletter__form button { font-size: .56rem; }
  .footer { padding-bottom: 16px; }
  .footer__main { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; padding-bottom: 25px; margin-bottom: 16px; }
  .footer__col h4 { font-size: .54rem; margin-bottom: 10px; }
  .footer__col ul li { margin-bottom: 6px; }
  .footer__col ul a, .footer__contact-item { font-size: .6rem; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; font-size: .54rem; }
}

/* Full-bleed contact hero artwork: the image sits against the right edge and
   is revealed through the asymmetric nursery-window curve from the reference. */
@media (min-width: 768px) {
  .contact-hero {
    min-height: 360px;
  }

  /* The hero has a wider canvas than the cards below it. */
  .contact-hero .container {
    width: calc(100% - 216px);
    max-width: 1304px;
  }

  .contact-hero__inner {
    display: block;
    min-height: 360px;
  }

  .contact-hero__content {
    position: relative;
    z-index: 2;
    width: 42%;
    padding-top: 54px;
  }

  .contact-hero__image {
    position: absolute;
    z-index: 1;
    top: 0;
    /* Offset the image out of the centred content grid to the viewport edge. */
    /* Align to the hero grid, not the viewport edge. */
    right: 0;
    width: 62%;
    height: 360px;
    margin: 0;
    border-radius: 42% 0 0 35% / 62% 0 0 42%;
  }

  .contact-hero__image img {
    object-position: 52% center;
  }
}

/* Contact card controls and support details */
@media (min-width: 768px) {
  .contact-form-panel,
  .contact-support {
    border-color: #f3dfe5;
    box-shadow: 0 2px 12px rgba(109, 67, 76, .025);
  }

  .contact-form-panel__title,
  .contact-support__title {
    font-size: 1.28rem;
    letter-spacing: -.02em;
  }

  .contact-form-panel__title span,
  .contact-support__title span {
    color: #de91aa;
    font-size: .66em;
  }

  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea {
    border-color: #f5e4e8;
    background-color: #fffdfd;
  }

  .contact-form__submit {
    width: 224px;
    background: linear-gradient(90deg, #c95a79 0%, #dd668c 100%);
    box-shadow: 0 5px 12px rgba(202, 90, 121, .16);
    padding: 12px 22px;
  }

  .contact-form__submit:hover {
    background: linear-gradient(90deg, #ba4e6c 0%, #d3547e 100%);
  }

  .contact-form__submit span {
    color: #fff;
    font-size: .76rem;
  }

  .contact-support__items { gap: 23px; }
  .contact-support__icon {
    width: 48px;
    height: 48px;
    background-color: #fff0f3;
    color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px;
  }
  .contact-support__item:nth-child(1) .contact-support__icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5' stroke='%23df8ea8' stroke-width='1.8'/%3E%3Cpath d='m4.8 7 7.2 5.4L19.2 7' stroke='%23df8ea8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .contact-support__item:nth-child(2) .contact-support__icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.1 4.5 5.8 6.8c-.7.7-.8 1.8-.2 2.6 3.1 4.6 5.2 6.7 9.8 9.8.8.6 1.9.5 2.6-.2l2.3-2.3-3.4-3.4-2 1.5c-1.9-1.1-3.5-2.7-4.6-4.6l1.5-2-3.7-3.7Z' stroke='%23df8ea8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .contact-support__item:nth-child(3) .contact-support__icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='7.5' stroke='%23df8ea8' stroke-width='1.7'/%3E%3Cpath d='M12 8v4.5l3 1.8M8 3.8v2.3m8-2.3v2.3' stroke='%23df8ea8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .contact-support__item:nth-child(4) .contact-support__icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 10.3c0 5-7 9.2-7 9.2s-7-4.2-7-9.2a7 7 0 1 1 14 0Z' stroke='%23df8ea8' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10.3' r='2.3' stroke='%23df8ea8' stroke-width='1.7'/%3E%3C/svg%3E"); }
  .contact-support__label {
    font-size: .64rem;
    letter-spacing: 0;
    text-transform: none;
  }
  .contact-support__value { color: #6e5366; font-size: .68rem; }
  .contact-support__value a { color: #6e5366; }
  .contact-support__detail { font-size: .62rem; }
}

/* Reference-style help panel */
@media (min-width: 768px) {
  .contact-help {
    padding: 58px 0 48px;
  }

  .contact-help .container {
    max-width: 1120px;
    padding: 20px 24px 18px;
    border: 1px solid #f4e5e7;
    border-radius: 22px;
    background: #fffdfd;
    box-shadow: 0 2px 12px rgba(109, 67, 76, .025);
  }

  .contact-help .section-header {
    text-align: left;
    margin: 0 0 16px;
  }

  .contact-help .section-header h2 {
    font-size: 1.18rem;
    line-height: 1.15;
    margin-bottom: 5px;
  }

  .contact-help .section-header h2 span {
    color: #df8ea8;
  }

  .contact-help .section-header p {
    margin: 0;
    max-width: none;
    font-size: .57rem;
  }

  .contact-help__grid {
    max-width: none;
    gap: 14px;
  }

  .contact-help__card {
    min-height: 158px;
    border-radius: 12px;
    padding: 16px 12px;
    box-shadow: none;
  }

  .contact-help__card:hover {
    box-shadow: 0 7px 18px rgba(193, 105, 137, .08);
    transform: translateY(-2px);
  }

  .contact-help__card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
  }

  .contact-help__card-icon svg { display: none; }
  .contact-help__card:nth-child(1) .contact-help__card-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8 16 16-8 16 8-16 8-16-8Z' stroke='%23df8ea8' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M8 16v18l16 8 16-8V16M24 24v18' stroke='%23df8ea8' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .contact-help__card:nth-child(2) .contact-help__card-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 13v24m26-24v24M9 18h30M9 29h30M15 10v29m18-29v29' stroke='%23df8ea8' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M13 12h22M11 38h26' stroke='%23df8ea8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .contact-help__card:nth-child(3) .contact-help__card-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18h22v16H7zM29 23h7l6 6v5H29zM4 34h4m21 0h3M14 38a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm20 0a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='%23df8ea8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .contact-help__card:nth-child(4) .contact-help__card-icon { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.8 37.5 11 26.2C5.5 21.3 7.2 12 14.5 12c4 0 6.5 2.1 9.3 5.2 2.8-3.1 5.3-5.2 9.3-5.2 7.3 0 9 9.3 3.5 14.2L23.8 37.5Z' stroke='%23df8ea8' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M16 28c-1 7-5.7 8.3-9.5 3.7-3.5-4.2-1-9.5 3.4-11.2M31.6 28c1 7 5.7 8.3 9.5 3.7 3.5-4.2 1-9.5-3.4-11.2' stroke='%23df8ea8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

  .contact-help__card h3 {
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .contact-help__card p {
    font-size: .56rem;
    line-height: 1.42;
    margin-bottom: 11px;
  }

  .contact-help__card-link {
    color: #d47798;
    font-size: .54rem;
  }
}

/* Shared chrome intentionally follows the homepage sizing, not the narrower
   editorial grids used by the contact content. */
@media (min-width: 768px) {
  .announcement-bar .container,
  .site-header .container,
  .newsletter-footer-wrap .container {
    max-width: var(--container-max);
  }
}

@media (min-width: 1025px) {
  .footer__main {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
    gap: 32px;
    padding-bottom: 40px;
    margin-bottom: 24px;
  }

  .footer__col h4 {
    font-size: .68rem;
    margin-bottom: 16px;
  }

  .footer__col ul li { margin-bottom: 10px; }
  .footer__col ul a,
  .footer__contact-item { font-size: .82rem; }

  .footer__bottom {
    font-size: .72rem;
  }
}

/* Homepage body scale: contact content uses the same container and readable
   type scale as the rest of the storefront. */
@media (min-width: 1025px) {
  .contact-main .container,
  .contact-help .container {
    max-width: var(--container-max);
  }

  .contact-main .container {
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
  }

  .contact-form-panel,
  .contact-support {
    padding: 40px 36px;
  }

  .contact-form-panel__title,
  .contact-support__title {
    font-size: 1.5rem;
  }

  .contact-form-panel__desc,
  .contact-support__desc {
    font-size: .82rem;
    margin-bottom: 28px;
  }

  .contact-form { gap: 18px; }
  .contact-form__row { gap: 18px; }
  .contact-form__group label { font-size: .72rem; margin-bottom: 6px; }
  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea { font-size: .85rem; padding: 14px 16px; }
  .contact-form__group textarea { min-height: 120px; }
  .contact-form__char-count,
  .contact-form__note { font-size: .68rem; }
  .contact-form__submit { width: 100%; padding: 15px 36px; font-size: .75rem; }

  .contact-support__items { gap: 28px; }
  .contact-support__icon { width: 42px; height: 42px; }
  .contact-support__label { font-size: .72rem; }
  .contact-support__value { font-size: .85rem; }
  .contact-support__detail { font-size: .75rem; }

  .contact-help .container { padding: 32px; }
  .contact-help .section-header h2 { font-size: 1.5rem; }
  .contact-help .section-header p { font-size: .82rem; }
  .contact-help__card { min-height: 190px; padding: 25px 18px; }
  .contact-help__card h3 { font-size: .92rem; }
  .contact-help__card p { font-size: .78rem; }
  .contact-help__card-link { font-size: .72rem; }
}

/* Homepage newsletter dimensions and alignment */
@media (min-width: 768px) {
  .newsletter {
    padding: 60px 0;
  }

  .newsletter__layout {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 56px;
  }

  .newsletter__text { max-width: 330px; }
  .newsletter h2 { font-size: 2.1rem; margin-bottom: 10px; }
  .newsletter p { font-size: .88rem; }
  .newsletter__form { max-width: 560px; }
  .newsletter__form input { font-size: .88rem; }
  .newsletter__form button { font-size: .72rem; }
}

/* FAQ block placed between the story carousel and newsletter */
@media (min-width: 768px) {
  .contact-faq {
    padding: 34px 0 42px;
  }

  .contact-faq .container {
    max-width: var(--container-max);
  }

  .contact-faq .section-header {
    margin-bottom: 14px;
    text-align: left;
  }

  .contact-faq .section-header h2 {
    font-size: 1.35rem;
  }

  .contact-faq__grid {
    max-width: none;
    gap: 0 20px;
  }

  .contact-faq__item {
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .contact-faq__question {
    padding: 12px 8px;
    font-size: .72rem;
  }

  .contact-faq__question span {
    color: var(--clr-dark);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
  }

  .contact-faq__item.is-open .contact-faq__question span {
    transform: rotate(45deg);
  }
}

/* Compact the contact pair to the shared height requested for the desktop layout. */
@media (min-width: 1025px) {
  .contact-form-panel,
  .contact-support {
    height: 511px;
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .contact-form {
    gap: 10px;
  }

  .contact-form__row {
    gap: 12px;
  }

  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea {
    padding: 9px 14px;
  }

  .contact-form__group textarea {
    min-height: 58px;
  }

  .contact-support__items {
    gap: 20px;
  }
}

/* Contact hero uses the same two-column, rounded media treatment as Journal. */
@media (min-width: 1025px) {
  .contact-hero {
    min-height: 0;
    padding: 96px 0 56px;
  }

  .contact-hero .container {
    width: auto;
    max-width: var(--container-max);
    height: auto;
    padding: var(--container-pad);
  }

  .contact-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    min-height: 0;
    align-items: center;
  }

  .contact-hero__content {
    position: static;
    width: auto;
    padding: 0;
  }

  .contact-hero__image {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: 340px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 28px;
    box-shadow: 0 16px 34px rgba(70, 48, 45, .10);
  }

  .contact-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Reference-scale contact hero typography */
@media (min-width: 1025px) {
  .contact-hero__eyebrow {
    color: #d4879c;
    font-size: .66rem;
    margin-bottom: 16px;
  }

  .contact-hero__title {
    font-size: 2.55rem;
    line-height: 1.07;
    margin-bottom: 11px;
  }

  .contact-hero__subtitle {
    font-size: 1.28rem;
    margin-bottom: 15px;
  }

  .contact-hero__desc {
    font-size: .8rem;
    line-height: 1.55;
    margin-bottom: 24px;
  }

  .contact-hero__cta {
    padding: 14px 29px;
    font-size: .66rem;
  }
}

/* Align the contact cards with the approved two-panel composition. */
@media (min-width: 1025px) {
  .contact-main {
    padding: 64px 0 56px;
  }

  .contact-main .container {
    /* Match the help-topic panel so the contact cards share one desktop grid. */
    max-width: 1240px;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    align-items: stretch;
  }

  .contact-form-panel,
  .contact-support {
    height: 100%;
    padding: 32px 36px;
    border-radius: 26px;
  }

  .contact-form {
    gap: 14px;
  }

  .contact-form__row {
    gap: 16px;
  }

  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea {
    padding: 12px 16px;
  }

  .contact-form__group textarea {
    min-height: 112px;
  }

  .contact-form__submit {
    width: 300px;
    min-height: 46px;
    padding: 12px 24px;
    border-radius: 999px;
  }

  .contact-form__row .contact-form__group {
    position: relative;
  }

  .contact-form__row .contact-form__group label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .contact-form__submit svg {
    width: 14px;
    height: 14px;
  }

  .contact-support__items {
    gap: 24px;
  }
}

/* Compact the message panel so both contact cards finish at the same visual
   baseline, without changing the support card's internal content. */
@media (min-width: 1025px) {
  .contact-form-panel {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .contact-form-panel__title {
    font-size: 1.28rem;
    margin-bottom: 4px;
  }

  .contact-form-panel__desc {
    font-size: .76rem;
    line-height: 1.4;
    margin-bottom: 16px;
  }

  .contact-form {
    gap: 10px;
  }

  .contact-form__row {
    gap: 12px;
  }

  .contact-form__group label {
    font-size: .66rem;
    margin-bottom: 4px;
  }

  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea {
    font-size: .78rem;
    padding: 9px 14px;
    border-radius: 10px;
  }

  .contact-form__group textarea {
    min-height: 84px;
  }

  .contact-form__char-count {
    font-size: .6rem;
    margin-top: 2px;
  }

  .contact-form__submit {
    min-height: 40px;
    padding: 10px 22px;
    font-size: .66rem;
  }

  .contact-form__note {
    font-size: .6rem;
    margin-top: 0;
  }
}

/* The first four labels are presented as text inside their input fields. */
.contact-form__row .contact-form__group label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Keep the Contact item visibly selected in the shared header. */
@media (min-width: 1025px) {
  .site-header .main-nav__link.is-active {
    position: relative;
    color: var(--clr-dark) !important;
  }

  .site-header .main-nav__link.is-active::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    width: 54px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--clr-pink-text) 0 68%, var(--clr-dark) 68% 100%);
  }
}

/* Match the larger icon and rounded-card treatment in the help-topic panel. */
@media (min-width: 1025px) {
  .contact-help {
    padding: 64px 0 54px;
  }

  .contact-help .container {
    max-width: 1240px;
    padding: 30px 32px 28px;
    border-radius: 28px;
  }

  .contact-help .section-header {
    margin-bottom: 22px;
  }

  .contact-help__grid {
    gap: 18px;
  }

  .contact-help__card {
    min-height: 260px;
    padding: 24px 18px;
    border-radius: 18px;
  }

  .contact-help__card-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 12px;
    background-size: 76px;
  }

  .contact-help__card h3 {
    font-size: 1rem;
    margin-bottom: 9px;
  }

  .contact-help__card p {
    font-size: .72rem;
    line-height: 1.5;
    margin-bottom: 16px;
  }
}

/* Reuse the homepage hero's asymmetric image frame on the contact page. */
@media (min-width: 768px) {
  .contact-hero__image {
    position: relative;
    background: var(--clr-canvas);
    overflow: hidden;
    border: 0;
    border-top-left-radius: clamp(52px, 6vw, 115px);
    border-bottom-left-radius: 28% 46%;
    border-bottom-right-radius: clamp(70px, 9vw, 175px) clamp(70px, 10vw, 185px);
    box-shadow: none;
  }

  .contact-hero__image .hero__media-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
  }

  .contact-hero__image .hero__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 35%;
  }
}

/* Contact reference: full-bleed nursery artwork with the homepage-style
   sculpted edge, rather than a standalone rounded image card. */
@media (min-width: 1025px) {
  .contact-hero {
    min-height: 480px;
    padding: 0;
  }

  .contact-hero .container {
    position: relative;
    z-index: 2;
    /* Use the site-wide centered content width, like the body sections. */
    max-width: var(--container-max);
    height: 480px;
  }

  .contact-hero__inner {
    display: block;
    min-height: 480px;
  }

  .contact-hero__content {
    position: relative;
    z-index: 2;
    width: 40%;
    padding-top: 128px;
  }

  .contact-hero__image {
    position: absolute;
    z-index: 1;
    /* Keep the media completely below the overlaid site header. */
    top: var(--header-height);
    right: calc((100vw - 100%) / -2);
    width: min(48vw, 760px);
    height: calc(440px - var(--header-height));
    margin: 0;
    /* Same sculpted frame geometry as the homepage hero. */
    border-radius: 0;
    border-top-left-radius: clamp(52px, 6vw, 115px);
    border-bottom-left-radius: 28% 46%;
    border-bottom-right-radius: clamp(70px, 9vw, 175px) clamp(70px, 10vw, 185px);
  }

  .contact-hero__image .hero__image {
    object-position: 50% 35%;
  }
}

/* A single image element using the homepage hero's sculpted silhouette. */
@media (min-width: 1025px) {
  .contact-hero__image {
    display: block;
    /* Fixed offset keeps the image clear of the absolutely positioned header. */
    top: 76px;
    right: 0;
    width: min(55vw, 820px);
    height: auto;
    background: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
  }
}

/* Contact reference: show the supplied nursery scene as a clean, full image panel. */
@media (min-width: 1025px) {
  .contact-hero__media {
    top: var(--header-height);
    /* Extend from the centered content grid to the viewport's right edge. */
    right: calc((100vw - 100%) / -2);
    width: 76.2%;
    height: auto;
    aspect-ratio: 2048 / 896;
    background: none;
    border-radius: 0;
    overflow: hidden;
  }

  .contact-hero__media .hero__media-frame {
    border-radius: 0;
  }

  .contact-hero__media .hero__image {
    transform: none;
    object-fit: cover;
    object-position: center;
  }
}

/* Match the desktop reference: the blush hero ends exactly with the image. */
@media (min-width: 1440px) {
  .contact-hero,
  .contact-hero .container,
  .contact-hero__inner {
    min-height: 29.4vw;
    height: 29.4vw;
  }
}

/* Keep the nursery scene inside the hero's available height.  The media panel
   starts below the header, so its height must account for that offset rather
   than growing past (and being clipped by) the hero section. */
@media (min-width: 1025px) {
  .contact-hero__media {
    height: calc(480px - var(--header-height));
    aspect-ratio: auto;
    /* Dissolve the artwork into the hero canvas at its inner (left) edge. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
  }

  .contact-hero__media .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1440px) {
  .contact-hero__media {
    height: calc(29.4vw - var(--header-height));
  }
}

/* Keep the transition from the contact cards to the help panel compact. */
@media (min-width: 1025px) {
  .contact-main {
    padding-bottom: 24px;
  }

  .contact-help {
    padding-top: 28px;
  }
}

/* Lift the desktop hero copy and CTA clear of the hero's lower edge. */
@media (min-width: 1025px) {
  .contact-hero__content {
    transform: translateY(-28px);
  }
}

/* Desktop contact cards: shared reference-scale typography and details. */
@media (min-width: 1025px) {
  .contact-form-panel,
  .contact-support {
    padding: 32px 36px;
    border-radius: 26px;
    border-color: #f3dfe5;
  }

  .contact-form-panel__title,
  .contact-support__title {
    font-size: 1.5rem;
  }

  .contact-form-panel__desc,
  .contact-support__desc {
    font-size: .82rem;
  }

  .contact-form {
    gap: 14px;
  }

  .contact-form__row {
    gap: 16px;
  }

  .contact-form__group label {
    font-size: .72rem;
    margin-bottom: 6px;
  }

  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea {
    font-size: .85rem;
    padding: 12px 16px;
  }

  .contact-form__group textarea {
    min-height: 112px;
  }

  .contact-form__char-count,
  .contact-form__note {
    font-size: .68rem;
  }

  .contact-form__submit {
    min-height: 46px;
    padding: 12px 24px;
    font-size: .75rem;
  }

  .contact-support__items {
    gap: 26px;
  }

  .contact-support__icon {
    width: 42px;
    height: 42px;
  }

  .contact-support__icon svg {
    width: 22px;
    height: 22px;
  }

  .contact-support__label {
    font-size: .72rem;
  }

  .contact-support__value {
    font-size: .85rem;
  }

  .contact-support__detail {
    font-size: .75rem;
  }
}

/* Keep the contact pair and help-topic panel on one shared desktop canvas. */
@media (min-width: 1025px) {
  .contact-main .container,
  .contact-help .container {
    width: calc(100% - 64px) !important;
    max-width: 1240px !important;
    margin-inline: auto;
  }
}

/* Final desktop sizing pass: this follows all reference overrides above. */
@media (min-width: 1025px) {
  .contact-form-panel,
  .contact-support {
    height: 540px;
    padding-top: 26px;
    padding-bottom: 26px;
  }

  .contact-form { gap: 10px; }
  .contact-form__row { gap: 12px; }

  .contact-form__group input,
  .contact-form__group select,
  .contact-form__group textarea {
    font-size: 1rem;
    padding: 12px 16px;
  }

  .contact-form__group label { font-size: .8rem; }
  .contact-form__char-count { font-size: .75rem; }

  /* Keep clear space below the security note at the card edge. */
  .contact-form__group textarea { min-height: 100px; }
  .contact-support__items { gap: 20px; }
}

/* Keep the action button and security line aligned as a single form action stack. */
@media (min-width: 1025px) {
  .contact-form-panel__title {
    font-size: 1.4rem;
  }

  .contact-form__submit {
    align-self: start;
    margin-top: 2px;
    font-size: .82rem;
    transform: none;
  }

  .contact-form__submit svg {
    width: 18px;
    height: 18px;
  }

  .contact-form__note {
    margin-top: 0;
    font-size: calc(.75rem);
    transform: none;
  }

  .contact-form__note-icon {
    width: 24px;
    height: 24px;
  }

  .contact-form__note .contact-form__note-icon,
  .contact-form__note .contact-form__note-icon * {
    color: #000 !important;
    stroke: #000 !important;
  }
}

/* Bring the help panel in to the contact-card width without scaling its content. */
@media (min-width: 1025px) {
  .contact-help .container {
    max-width: 1140px !important;
  }
}

/* Customer Support: scale the details to use the full height of its panel. */
@media (min-width: 1025px) {
  .contact-support__title {
    font-size: 1.4rem;
  }

  .contact-support__desc {
    font-size: .84rem;
  }

  .contact-support__items { gap: 26px; }

  .contact-support__icon {
    width: 56px;
    height: 56px;
    background-size: 32px;
  }

  .contact-support__icon svg {
    width: 26px;
    height: 26px;
  }

  .contact-support__label {
    font-size: .9rem;
  }

  .contact-support__value {
    font-size: 1.05rem;
  }

  .contact-support__detail {
    font-size: .93rem;
  }
}

/* Give the message card 2px more of the shared contact grid. */
@media (min-width: 1025px) {
  .contact-main .container {
    grid-template-columns:
      minmax(0, calc(58.333333% - 2.5px))
      minmax(0, calc(41.666667% - 27.5px));
  }
}

/* Extend the contact pair toward the left while preserving its right edge. */
@media (min-width: 1280px) {
  .contact-main .container {
    max-width: 1266px !important;
    transform: translateX(-13px);
  }

  .contact-help .container {
    max-width: 1170px !important;
    transform: translateX(-15px);
  }
}

/* Pull only the support card's right edge in by 5px. */
@media (min-width: 1025px) {
  .contact-support {
    margin-right: 5px;
  }
}