/* =========================================================
   Work with me + booking flow: Figma Dev Handoff › Work with me (1092:21920), Payment steps (1092:21921)
   1440 base · ≥1680 (1920 frame) · ≤1199 (834 frame) · ≤699 (390 frame)
   ========================================================= */

.wwm-sp { display: inline-block; width: .3em; }

/* =========================================================
   Work with me · hero + offers
   ========================================================= */
.wwm-top { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 40px 0 40px; }
.wwm-top > .hdr { width: calc(100% - 80px); }
.wwm-top__head { width: 796px; max-width: calc(100% - 48px); display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.wwm-top__title { width: 636px; max-width: 100%; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.wwm-top__title .wwm-sp { width: .28em; }
.wwm-top__lede { font-size: 20px; line-height: 1.5; color: var(--ink); }
.wwm-offers { width: 100%; }
.wwm-offers .pricing__scroller { scroll-padding-left: 40px; }
.wwm-offers .pricing__cards { padding: 0 40px; }

/* =========================================================
   Work with me · fit cards + questions
   ========================================================= */
.wwm-fit { display: flex; flex-direction: column; align-items: center; gap: 42px; padding: 80px 40px; }
.wwm-fit__title { display: flex; align-items: flex-start; justify-content: center; gap: 22px; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.wwm-fit__title img { width: 410px; height: 120px; flex: none; }
.wwm-fit__cards { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fit {
  --grain: .16;
  display: flex; flex-direction: column; gap: 12px; padding: 40px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(138.49deg, #0e4887 9.27%, #0c265f 94.09%);
}
.fit--b { background: linear-gradient(132.96deg, #0e4887 .71%, #0c265f 93.3%); }
.fit--c { background: linear-gradient(144.19deg, #0e4887 1.5%, #0c265f 87.56%); }
.fit > * { position: relative; z-index: 1; }
.fit h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; color: var(--sand); white-space: nowrap; }
.fit h3 img { flex: none; }
.fit p { font-size: 20px; line-height: 1.5; color: rgba(221, 211, 185, .7); }

/* "Got questions?" card */
.qs-card {
  position: relative; width: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: 40px;
  padding: 32px; border-radius: 24px; overflow: hidden;
  background: #fff8e8; box-shadow: inset 0 0 0 1px #d0d0bd;
}
.qs-card__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.qs-card__main { display: flex; flex-direction: column; gap: 24px; width: 351px; max-width: 100%; }
.qs-card__title { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.qs-card__main p { font-size: 16px; line-height: 1.5; color: rgba(32, 30, 20, .7); }
.qs-card__mail { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.5; }
.qs-card__mail span { color: rgba(32, 30, 20, .7); }
.qs-card__mail a { color: var(--blue-700); }
.qs-card__mail a:hover { text-decoration: underline; text-underline-offset: 3px; }
.qs-card__art {
  --grain: 0;
  position: relative; flex: 0 0 629px; width: 629px; height: 469px; border-radius: 12px;
  background: linear-gradient(119.67deg, #0e4887 4.18%, #0c265f 102.19%);
}
.qs-card__art::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("../img/dove-sky.webp") center / cover no-repeat; mix-blend-mode: overlay; opacity: .57; }
.qs-card__dove { position: absolute; left: -177px; top: -14.08px; width: 666px; height: 457px; overflow: hidden; transform: translate3d(0, var(--dove-y, 0px), 0); will-change: transform; }
.qs-card__dove img { position: absolute; left: -27.72%; top: 0; width: 149.22%; height: 122.74%; max-width: none; }

/* =========================================================
   Booking flow
   ========================================================= */
.bk-top { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 40px; }
.bk-top__title { width: 636px; max-width: 100%; text-align: center; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.bk {
  --grain: .15;
  width: 100%; max-width: 1360px; display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 12px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(121deg, #0e4887 0%, #0c265f 100%);
}
.bk > * { position: relative; z-index: 1; }

/* stepper */
.bk-steps { display: flex; align-items: center; justify-content: center; width: min(100%, 980px); margin: 0; padding: 24px; list-style: none; }
.bk-steps__pill {
  display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 24px;
  font-size: 16px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  color: #fff; box-shadow: inset 0 0 0 1px var(--sand); opacity: .5;
  transition: background-color .4s var(--ease), color .4s var(--ease), opacity .4s var(--ease), box-shadow .4s var(--ease);
}
.bk-steps__pill.is-active, .bk-steps__pill.is-done { background: var(--gold); color: #1a1a1a; box-shadow: none; opacity: 1; }
.bk-steps__link { display: flex; align-items: center; flex: 1 1 64px; min-width: 40px; }
.bk-steps__link::before, .bk-steps__link::after { content: ""; flex: 1; height: 1px; background: var(--sand); }
.bk-steps__link i { flex: none; width: 16.2px; height: 16.2px; margin: 0 3.35px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px var(--sand); transition: background-color .4s var(--ease); }
.bk-steps__link.is-done::before, .bk-steps__link.is-done::after { background: var(--gold); }
.bk-steps__link.is-done i { background: var(--gold); box-shadow: none; }

/* card */
.bk-card {
  width: 100%; padding: 32px; border-radius: 12px;
  background: #0e4887; box-shadow: inset 0 0 0 1px #1560b2; isolation: isolate;
}
.bk-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("../img/card-texture.webp") center / cover no-repeat; mix-blend-mode: multiply; opacity: .2; }
.bk-pane { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.bk-pane[hidden] { display: none; }
.bk-pane:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .bk-pane:not([hidden]) { animation: bk-in .5s var(--ease-out) both; } }
@keyframes bk-in { from { opacity: 0; transform: translateY(12px); } }
.bk-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.bk-head__title { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; color: #fff; text-align: center; }
.bk-head__count { display: none; font-size: 12px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .7); }

/* fields */
.bk-fields { width: 974px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.bk-row { display: grid; gap: 24px; align-items: start; }
.bk-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fld { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fld__label { font-size: 16px; line-height: 1.5; color: var(--sand); }
.fld__wrap { position: relative; display: block; }
.fld__wrap::after { content: ""; position: absolute; right: 19px; top: 50%; width: 10px; height: 6px; margin-top: -3px; background: url("../svg/caret-sand.svg") center / contain no-repeat; pointer-events: none; }
.fld__input {
  width: 100%; height: 40px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: #265a93; color: var(--sand); font: inherit; font-size: 16px; line-height: 1.5;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
select.fld__input { padding-right: 44px; cursor: pointer; }
select.fld__input:invalid { color: rgba(221, 211, 185, .5); }
select.fld__input option { background: #265a93; color: var(--sand); }
.fld__input::placeholder { color: rgba(221, 211, 185, .5); opacity: 1; }
.fld__input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
.fld__msg { display: none; margin-top: -8px; font-size: 12px; font-weight: 500; line-height: 1.5; color: rgba(221, 211, 185, .7); }
/* Figma "Flag": red-tinted field + message under it */
.fld.is-flag .fld__input { background: #815f5e; box-shadow: inset 0 0 0 1px #f62828; }
.fld.is-flag .fld__msg { display: block; }
.bk-error { max-width: 974px; font-size: 14px; color: #ffd2cf; text-align: center; }
.bk-error[hidden] { display: none; }

.bk-btns { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bk .btn[disabled] { opacity: .5; cursor: not-allowed; }
.bk .btn[disabled]:active { transform: none; }
.bk .btn--cream[disabled]:hover { background: var(--gold); }

/* loading / not a fit / done */
.bk-state { min-height: 400px; justify-content: center; gap: 24px; text-align: center; }
.bk-state__icon { width: 40px; height: auto; }
.bk-state__text { max-width: 560px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; color: rgba(221, 211, 185, .8); }
p.bk-state__text { display: block; }
.bk-state__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.bk-state .bk-btns { margin-top: 16px; }
.bk-loader { display: flex; gap: 14px; }
.bk-loader i { width: 16.2px; height: 16.2px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px var(--sand); animation: bk-dot 1.2s var(--ease) infinite; }
.bk-loader i:nth-child(2) { animation-delay: .15s; }
.bk-loader i:nth-child(3) { animation-delay: .3s; }
@keyframes bk-dot { 0%, 100% { background: transparent; } 40% { background: var(--gold); box-shadow: none; } }

.bk-thanks { min-height: 420px; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.bk-thanks__title { font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #fff; }
.bk-thanks__text { max-width: 368px; font-size: 16px; line-height: 1.5; color: #d2cab5; }

/* meeting: Cal iframe paints white if color-scheme mismatches the host; keep it dark + transparent */
.bk-meet { gap: 24px; width: 100%; }
.bk-cal {
  position: relative; width: 100%; min-height: 0; border-radius: 12px; overflow: hidden;
  background: transparent; color-scheme: dark;
}
.bk-cal__embed { width: 100%; min-height: 540px; overflow: visible; background: transparent; color-scheme: dark; }
.bk-cal iframe { display: block; width: 100%; min-height: 540px; border: 0; background: transparent; color-scheme: dark; }

/* booking page: questions section */
.qs { padding: 80px 40px; }

/* =========================================================
   ≥1680 · Desktop 1920 frame
   ========================================================= */
@media (min-width: 1680px) {
  .wwm-top > .hdr { width: calc(100% - 160px); }
  .wwm-top .hdr__cta, .qs-card .btn { font-size: 20px; }
  .wwm-offers { padding: 0 80px; }
  .wwm-offers .pricing__scroller { overflow: visible; cursor: auto; }
  .wwm-offers .pricing__cards { width: 100%; padding: 0; }
  .wwm-offers .pricing__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wwm-offers .price { width: auto; min-width: 0; }
  .wwm-offers .price__title h3, .wwm-offers .price__value small, .wwm-offers .price__list li { font-size: 28px; }
  .wwm-offers .price__value { font-size: 64px; }

  .wwm-fit { padding: 80px; }
  .wwm-fit__title { gap: 32px; }
  .fit h3 { font-size: 28px; }
  .fit p { font-size: 24px; }

  .qs-card__title { font-size: 48px; }
  .qs-card__main p, .qs-card__mail { font-size: 20px; }

  .bk-top { padding: 40px 80px; }
  .qs { padding: 80px; }
}

/* =========================================================
   ≤1199 · Tablet 834 frame
   ========================================================= */
@media (max-width: 1199px) {
  .wwm-top { gap: 42px; padding: 40px; }
  .wwm-top > .hdr { width: 100%; }
  .wwm-top__head { width: 100%; max-width: 796px; } /* was a fixed 796px: scrolled sideways on 768px tablets */
  .wwm-offers .pricing__cards { padding: 0; }
  .wwm-offers .price { min-height: 752px; gap: 42px; justify-content: space-between; }

  .wwm-fit { padding: 80px 40px; }
  .wwm-fit__title { font-size: min(64px, 6.5vw); }
  .wwm-fit__title img { width: min(280px, 34vw); height: auto; }
  .wwm-fit__cards { grid-template-columns: minmax(0, 1fr); }

  .qs-card { flex-direction: column; gap: 24px; justify-content: flex-start; }
  .qs-card__text { flex: none; }
  .qs-card__art { flex: none; width: 100%; }
  .qs-card__dove { left: -87px; }

  .bk-top { gap: 42px; }
  .bk-steps { padding: 24px 0; }
  .bk-fields { width: 100%; }
}

/* =========================================================
   ≤699 · Mobile 390 frame
   ========================================================= */
@media (max-width: 699px) {
  .wwm-top { gap: 40px; padding: 40px 24px; }
  .wwm-top__head { width: 100%; gap: 46px; }
  .wwm-top__title { font-size: 40px; }
  .wwm-top__lede { font-size: 14px; }
  .wwm-offers .price { min-height: 0; }

  .wwm-fit { gap: 24px; padding: 40px 20px; }
  .wwm-fit__title { flex-direction: column; align-items: center; gap: 4px; font-size: 40px; }
  .wwm-fit__title img { width: 227px; height: 66px; }
  .wwm-fit__cards { gap: 12px; }
  .fit { min-height: 301px; }

  .qs-card { padding: 20px; }
  .qs-card__text { display: contents; }
  .qs-card__main { width: 100%; }
  .qs-card__title { font-size: 28px; }
  .qs-card__main p { font-size: 14px; }
  .qs-card__art { order: 2; height: 250px; }
  .qs-card__mail { order: 3; }
  .qs-card__mail a { font-size: 14px; }
  /* Scaled a touch and nudged right so the left wing tip stays inside the card (it was clipped on iPhone) */
  .qs-card__dove { left: -14px; top: -6px; width: 316px; height: 217px; }

  .bk-top { gap: 46px; padding: 20px; }
  .bk-top__title { font-size: 40px; margin-top: 4px; }
  .bk-top__title br { display: none; }
  .bk { padding: 8px; }
  .bk-steps { display: none; }
  .bk-card { padding: 20px; }
  .bk-pane { gap: 24px; }
  .bk-head__title { font-size: 18px; }
  .bk-head__count { display: block; }
  .bk-fields { gap: 32px; }
  .bk-row--2, .bk-row--3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fld { gap: 8px; }
  .fld__label { font-size: 14px; }
  .fld__input { height: 40px; font-size: 16px; } /* 16px stops iOS zooming into the field on focus */
  .fld__msg { margin-top: -4px; }
  .bk-btns { flex-direction: column-reverse; align-items: stretch; width: 100%; }
  .bk-form .bk-back { display: none; }
  .bk-state .bk-btns { flex-direction: column; }
  .bk-cal__embed, .bk-cal iframe { min-height: 720px; }

  .qs { padding: 40px 20px; }
}