/* ==========================================================================
   Gleaming — Contact page (Figma desktop 1256:12629 / mobile 1256:15801)
   Sections: hero band, form + contact details, our services, ready-to-book
   CTA, stray "Calculate my price" link (desktop frame only), shared footer.
   ========================================================================== */

/* Page background: outside the hero band the frame is pure white, the band
   itself is the #FCFCFC page tone (same treatment as the blog page). */
body {
  background: var(--color-white);
}

/* Paired desktop/mobile content spans (GL2 mobile frame diverges in copy,
   icons and form styling). .ct-m is revealed only under 767px. */
.ct-m {
  display: none;
}

/* --------------------------------------------------------------------------
   Hero band (1256:12736, 1440x432) — full-bleed #FCFCFC card behind the
   header, bottom radius 40, 3D stars clipped at the right edge.
   Identical to the blog hero (frames share the same components).
   -------------------------------------------------------------------------- */
.contact-hero {
  position: relative;
  height: 432px;
  margin-top: -174px; /* navbar 96 + secondary bar 78 */
  padding-top: 174px;
  background: var(--color-page-bg);
  border-radius: var(--radius-card); /* all four corners rounded in the design */
  overflow: hidden;
}

.contact-hero__stars {
  position: absolute;
}

.contact-hero__stars--desktop {
  top: 0;
  /* keep the star group aligned with the 1440px-max design canvas */
  right: max(0px, calc((100% - 1440px) / 2));
  width: 604px;
  height: 432px;
}

/* mobile star render (group 1256:15806 = the desktop composite at 0.4133
   scale) — the fuller 604x500 export is swapped in below 768px */
.contact-hero__stars--mobile {
  display: none;
}

.contact-hero__content {
  position: relative;
  padding-top: 114px; /* title top at y=288 (288 - 174 header) */
}

.contact-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  color: var(--color-black);
}

.contact-hero__subtitle {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: var(--text-md); /* 18px */
  line-height: var(--leading-body);
  color: #434343;
}

/* --------------------------------------------------------------------------
   Form + contact details (fields 1256:12743 at y=500, details 1256:12749 at
   x=838/y=512, submit button 1256:12748 right-aligned under the fields)
   -------------------------------------------------------------------------- */
.contact-top {
  margin-top: 68px; /* band 432 -> fields 500 */
}

.contact-top__grid {
  display: grid;
  grid-template-columns: 352px 384.4px;
  justify-content: space-between;
  /* info column right edge sits 138px in from the container edge at 1280 */
  padding-right: clamp(0px, calc(100% - 1142px), 138px);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 28px; /* field pitch 84 - height 56 */
}

.contact-form__input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  background: var(--color-white);
  border: 1px solid #E0E1EF;
  border-radius: 16px;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.contact-form__input::placeholder {
  color: var(--color-neutral-600);
  opacity: 1;
}

.contact-form__submit {
  align-self: flex-end;
  margin-top: 28px; /* + 28 flex gap = 56 below the last field */
  min-width: 197px;
  min-height: 56px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px; /* row pitch 59.2 - row height 29.6 */
  margin-top: 12px; /* details top y=512 vs fields y=500 */
}

.contact-info__item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 30px;
}

.contact-info__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.contact-info__link {
  font-family: var(--font-alt); /* Roboto "Link text" style */
  font-size: var(--text-md);    /* 18px */
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Our services (1256:12679 at y=1164) — 72px centered title, 4 cards
   (305x341), pager dots. Same component row as the blog/home pages.
   -------------------------------------------------------------------------- */
.services {
  margin-top: 244px; /* submit bottom 920 -> title 1164 */
}

.services__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: var(--leading-tight);
  text-align: center;
  color: var(--color-black);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 89px; /* title 86 -> cards 175 */
}

.services__grid > li {
  display: flex;
}

/* shared .card overrides (Figma card 305x341, pad 32/24) */
.svc-card {
  flex: 1;
  gap: 0;
  padding: 32px 24px;
  box-shadow: 0 24px 48px -12px rgba(30, 44, 162, 0.10);
}

.svc-card .card__title { margin-top: 16px; }
.svc-card .card__text { margin-top: 16px; }

.svc-card .link-more {
  margin-top: auto;
  padding-top: 24px;
  align-self: flex-start;
}

.services__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 67px;
  margin-top: 23px;
}

.services__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #BCC0E4;
}

.services__dot.is-active {
  background: var(--color-primary-400);
}

/* --------------------------------------------------------------------------
   Ready-to-book CTA (1256:12724 at y=2038) — gradient panel, white 3D broom
   + sparkles at the right. Identical to the blog CTA node.
   -------------------------------------------------------------------------- */
.contact-cta {
  margin-top: 268px; /* dots end 1770 -> cta 2038 */
}

.contact-cta__panel {
  position: relative;
  overflow: hidden;
  min-height: 441px;
  border-radius: var(--radius-card);
  background: linear-gradient(112.7deg, var(--color-primary-400) 28%, #A0ABFF 100%);
  padding: 79px 83px;
}

.contact-cta__decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 536px;
  height: 441px;
}

.contact-cta__content {
  position: relative;
  max-width: 602px;
}

.contact-cta__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--color-white);
}

.contact-cta__text {
  margin-top: 16px;
  /* Figma box is 602px and fits "…member-only offers" on line 1; Chrome
     measures that run at 602.9px, so allow a hair more so the wrap matches */
  width: 610px;
  font-family: var(--font-body);
  font-size: var(--text-md); /* 18px */
  line-height: 1.115; /* 20px — tight Figma leading */
  color: var(--color-white);
}

.contact-cta__btn {
  margin-top: 44px;
  width: 343px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-primary-400);
}

/* --------------------------------------------------------------------------
   Stray "Calculate my price" text (1256:12630 at x=1168/y=2526) — sits on
   the white gap between the CTA and the footer in the desktop frame only.
   -------------------------------------------------------------------------- */
.contact-calc {
  margin-top: 47px;    /* cta bottom 2479 -> text 2526 */
  padding-bottom: 32px; /* + footer's 80px margin = 112 gap (padding so it
                           does not collapse with the footer margin) */
}

.contact-calc .container {
  text-align: right;
}

.contact-calc__link {
  display: inline-block;
  margin-right: 63px; /* text right edge x=1297, container edge 1360 */
  font-family: var(--font-alt);
  font-size: var(--text-base); /* 16px */
  line-height: var(--leading-body);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Tablet 768–1023 — hamburger header (96px), compressed grids
   ========================================================================== */
@media (max-width: 1023px) {
  .contact-hero {
    margin-top: -96px; /* mobile navbar only */
    padding-top: 96px;
  }

  .contact-hero__content {
    padding-top: 140px;
  }

  .contact-hero__stars--desktop {
    right: 0;
    width: min(604px, 55vw);
    height: auto;
  }

  .contact-top__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    padding-right: 0;
  }

  .services {
    margin-top: 160px;
  }

  .services__title {
    font-size: 56px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 48px;
  }

  .contact-cta {
    margin-top: 140px;
    /* padding (not margin) so it can't collapse with the footer's 80px
       margin-top: 72 + 80 = 152px gap, matching the blog page */
    padding-bottom: 72px;
  }

  .contact-cta__panel {
    padding: 64px 40px;
  }

  .contact-cta__title {
    font-size: 44px;
  }

  .contact-cta__content {
    max-width: 60%;
  }

  .contact-cta__text {
    width: auto;
  }

  .contact-cta__decor {
    width: 45%;
    height: auto;
  }

  /* the stray link only exists in the 1440 desktop frame */
  .contact-calc {
    display: none;
  }
}

/* ==========================================================================
   Mobile < 768 — matches the 402px frame (1256:15801)
   ========================================================================== */
@media (max-width: 767px) {
  /* content pairing: reveal the GL2-mobile variants */
  .ct-d {
    display: none;
  }

  .ct-m {
    display: revert;
  }

  img.ct-m {
    display: block;
  }

  /* hero: band bottom at 261 (GL2 frame 315 incl. the 54px status bar),
     title "Blog" 32/34 at y141, subtitle at y187. Band tone is #FCFCFF in
     the GL2 mobile frame (vs #FCFCFC desktop token). */
  .contact-hero {
    height: 261px;
    background: #FCFCFF;
  }

  .contact-hero__content {
    padding-top: 45px; /* header 96 -> title box top 141 */
    margin-left: -1px; /* GL2 frame puts the title/subtitle at x19/x21 */
  }

  .contact-hero__title {
    font-size: 32px;
    line-height: 34px;
  }

  .contact-hero__subtitle {
    margin-top: 12px;
    font-size: var(--text-base); /* 16px */
    line-height: 24px;
  }

  /* GL2 star group 1001:8908 exported pre-clipped by the band:
     233x279 at page (169, -18) */
  .contact-hero__stars--desktop {
    display: none;
  }

  .contact-hero__stars--mobile {
    display: block;
    top: -18px;
    left: 169px;
    right: auto;
    width: 233px;
    height: 279px;
  }

  /* details block first (page y=324), then the form (page y=561) */
  .contact-top {
    margin-top: 63px; /* band 261 -> details 324 */
  }

  .contact-top__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* GL2 mobile order: phone, email, address (desktop DOM: email first) */
  .contact-info {
    order: -1;
    margin-top: 0;
    gap: 27.875px; /* row pitch 55.75 - row height 27.875 */
  }

  .contact-info__item:nth-child(1) { order: 2; }
  .contact-info__item:nth-child(2) { order: 1; }
  .contact-info__item:nth-child(3) { order: 3; }

  .contact-info__item {
    min-height: 27.875px; /* rows are 27.875 in the 402 frame */
    gap: 13.9px; /* icon end x47.9 -> text x61.8 */
  }

  .contact-info__icon {
    width: 27.875px;
    height: 27.875px;
  }

  .contact-info__link {
    font-family: var(--font-heading); /* Cabinet Grotesk 500 on mobile */
    font-weight: 500;
    font-size: 20.9px; /* pixel-fit: GL2 ink is 4.5% wider/taller than 20px */
    line-height: 26px;
    color: var(--color-primary-400);
  }

  .contact-form {
    margin-top: 97.6px; /* details end 463.4 -> fields 561 */
  }

  /* GL2 mobile text fields: Material-outlined look with floating labels,
     "Input" values and clear icons; the real inputs are desktop-only. */
  .contact-form__input {
    display: none;
  }

  .contact-form__field {
    position: relative;
    height: 56px;
  }

  .mfield {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px; /* field box x19..382 vs container x20 */
    right: 0;
    background: var(--color-white);
    border: 1px solid #79747E;
    border-radius: 20px;
  }

  .mfield--focus {
    border: 3px solid #6750A4;
  }

  .mfield__label {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 0 4px;
    background: var(--color-white);
    font-family: var(--font-alt);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #49454F;
  }

  /* the 3px focus border shrinks the padding box by 2px each side; offset
     the absolutely-positioned children so they stay at the same page coords */
  .mfield--focus .mfield__label {
    top: -10px;
    left: 10px;
    color: #6750A4;
  }

  .mfield__value {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--font-alt);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #1D1B20;
  }

  .mfield--focus .mfield__value {
    top: 14px;   /* inside a 3px border the content box starts 2px higher */
    left: 14px;
  }

  .mfield__caret {
    display: inline-block;
    width: 2px;
    height: 18px;
    margin-left: 1px;
    vertical-align: -3px;
    background: #6750A4;
  }

  .mfield__clear {
    position: absolute;
    top: 16px;
    right: 12px;
    width: 24px;
    height: 24px;
  }

  .mfield--focus .mfield__clear {
    top: 14px;
    right: 10px;
  }

  .mfield__clear svg {
    display: block;
  }

  .contact-form__submit {
    min-width: 203px;
  }

  /* services: centered 32/38 title at page y1149, stacked cards at y1211 */
  .services {
    margin-top: 168px; /* submit bottom 981 -> title 1149 */
  }

  .services__title {
    font-size: 32px;
    line-height: 38px;
  }

  .services__grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .svc-card {
    padding: 16px 24px;
  }

  /* GL2 hand-sized card heights: 245 / 257 / 263 / 261 */
  .services__grid > li:nth-child(1) .svc-card { min-height: 245px; }
  .services__grid > li:nth-child(2) .svc-card { min-height: 257px; }
  .services__grid > li:nth-child(3) .svc-card { min-height: 263px; }
  .services__grid > li:nth-child(4) .svc-card { min-height: 261px; }

  .svc-card .card__title {
    font-size: 24px;
    line-height: 31px;
  }

  .svc-card .card__text {
    font-size: var(--text-base);
    line-height: 24px; /* GL2 mobile card body 16/24 */
  }

  .svc-card .link-more {
    padding-top: 0;
  }

  .services__dots {
    display: none;
  }

  /* CTA: tall panel (718), decor at the bottom */
  .contact-cta {
    margin-top: 172px;    /* cards end 2351 -> cta 2523 */
    padding-bottom: 104px; /* + footer's 80px margin = 184 gap (3241 -> 3425);
                              padding so it can't collapse with the footer margin */
  }

  .contact-cta__panel {
    min-height: 718px;
    padding: 79px 31px;
    /* GL2 mobile gradient: same stops as desktop but near-horizontal angle
       (sampled: left plateau #1E2CA2 to ~28%, #A0ABFF at the bottom-right) */
    background: linear-gradient(94.2deg, var(--color-primary-400) 28%, #A0ABFF 100%);
  }

  .contact-cta__content {
    max-width: 288px;
  }

  .contact-cta__title {
    font-size: 32px;
  }

  .contact-cta__btn {
    margin-top: 44px;
    width: auto;
    min-width: 192px;
  }

  /* GL2 mobile decor: native export of group 1001:8977 (broom + stars,
     gradient baked, pre-clipped to the 362 panel) at panel-relative y=314 */
  .contact-cta__decor {
    display: none;
  }

  .contact-cta__decor-m {
    position: absolute;
    left: 0;
    top: 314px;
    width: 362px;
    height: auto;
  }

  /* Footer columns/underline nudges were promoted to the shared footer in
     components.css (corroborated on 5+ pages); the frame's baked iOS home
     indicator is phone chrome, excluded like the status bar (masked in
     .verify/diff.py). Only the contact-frame-specific Book nudge remains. */
  .page-contact .site-footer .btn--outline {
    transform: translateY(-2px);
  }
}