/* Plumb Lucky "book a plumber" page (tokens, fonts and nav from the live site), dressing stepped-lead-form. */
:root {
  --lime: #A8F58E; --blue: #9EC3FF; --ink: #0A0A0A; --coral: #F4948A; --cream: #FFF1E6;
  --display: 'Hammer', 'Dela Gothic One', sans-serif; --accent: 'Cooper Nouveau', serif; --body: 'Relative', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--lime); color: var(--ink); font: 400 16px/1.45 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100svh; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* nav, as the site */
.nav { position: relative; z-index: 2; height: 76px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 2.5px solid var(--ink); font-size: 19px; line-height: 1; background: var(--lime); }
.nav-side { display: flex; align-items: center; gap: 44px; }
.nav-side.r { justify-content: flex-end; }
.nav-side a:not(.pill) { text-decoration: none; }
.logo img { height: 62px; width: auto; }
.pill { display: inline-flex; align-items: center; background: var(--ink); color: var(--lime); border-radius: 10px; padding: .45em .8em .5em; text-decoration: none; white-space: nowrap; }
.pill .short { display: none; }

/* heading */
main { position: relative; min-height: calc(100svh - 76px); padding: 52px 56px 64px; overflow: hidden; }
.sky { position: absolute; left: -2%; width: 104%; max-width: none; bottom: -95px; pointer-events: none; }
.head { position: relative; text-align: center; }
.accent { font-family: var(--accent); font-weight: 400; margin: 0; font-size: 46px; line-height: 1; position: relative; z-index: 1; margin-bottom: -.1em; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; margin: 0; font-size: 118px; line-height: .8; letter-spacing: -.035em; }
.display span { display: block; }
.cloud { position: absolute; pointer-events: none; }
.c1 { width: 150px; top: 40px; left: 46px; }
.c2 { width: 118px; top: 150px; right: 52px; }

/* the form card: cream, inked edge, flat offset shadow like the site's fact card */
.card { position: relative; max-width: 938px; margin: 40px auto 0; padding: 40px 44px 44px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink); }
.slf {
  --slf-ink: var(--ink); --slf-ink-2: rgba(10, 10, 10, .62); --slf-line: rgba(10, 10, 10, .28);
  --slf-accent: var(--ink); --slf-accent-ink: var(--lime); --slf-radius-card: 14px; --slf-radius-field: 12px; --slf-gap: 24px;
  --slf-seg-h: 5px; --slf-font: var(--body); --slf-font-accent: var(--accent);
  min-height: 560px;
}
.slf__progress-row { font-size: 14px; color: var(--ink); }
.slf__title { font: 400 44px/1.05 var(--accent); letter-spacing: 0; }
.slf__kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.slf__kind { padding: 22px 20px; min-height: 124px; border: 2px solid var(--ink); background: #fff; }
.slf__kind:hover { background: #fff; }
.slf__kind-text { gap: 8px; }
.slf__kind-text strong { font: 400 21px/1.15 var(--body); font-weight: 600; }
.slf__kind-text small { font-size: 16px; }
.slf__kind-icon { width: 32px; height: 32px; border-width: 2px; }
.slf__kind-icon svg { width: 16px; height: 16px; }
.slf__group legend { font-size: 15px; margin-bottom: 12px; color: var(--ink); letter-spacing: .12em; text-transform: uppercase; }
.slf__chips { gap: 10px; }
.slf__chip { padding: 15px 22px; border: 2px solid var(--ink); background: #fff; font-size: 19px; }
.slf__back { border: 2px solid var(--ink); font-size: 15px; padding: 10px 14px; background: #fff; }
.slf__hint, .slf__note { font-size: 16px; }
.slf__next { padding: 18px 30px; border-radius: 10px; font: 400 20px/1 var(--body); }
.slf__next svg { width: 20px; height: 20px; }
.slf__field { font-size: 15px; color: var(--ink); gap: 10px; }
.slf__control { height: 62px; border: 2px solid var(--ink); background: #fff; font-size: 21px; padding: 0 18px; }
textarea.slf__control { min-height: 96px; height: 96px; padding: 16px 18px; font-size: 18px; }
.slf__control:focus-visible { box-shadow: 0 0 0 3px var(--lime), 0 0 0 5px var(--ink); }
.slf .fbs-btn { --fbs-bg: var(--ink); --fbs-bg-hover: #2a2a2a; --fbs-bg-press: #000; --fbs-bg-success: #2a2a2a; --fbs-ink: var(--lime); --fbs-spin-color: var(--lime);
  --fbs-radius: 10px; --fbs-h: 62px; font: 400 21px/1 var(--body); }
.slf__foot .fbs-btn { min-width: 240px; }
.slf .fbs-btn__label { display: inline-flex; align-items: center; gap: 10px; }
.slf .fbs-btn__label svg { width: 20px; height: 20px; }
.slf__sent { padding-top: 40px; gap: 18px; }
.slf__check { width: 72px; height: 72px; }
.slf__check svg { width: 34px; height: 34px; }
.slf__sent-title { font: 400 58px/1.02 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.slf__sent-title em { display: block; font: 400 52px/1.1 var(--accent); text-transform: none; font-style: normal; }
.slf__sent-text { font-size: 21px; line-height: 1.5; color: var(--ink); max-width: 30em; }
.slf__again { font: 400 19px/1 var(--body); text-decoration-thickness: 2px; }

/* desktop windows shorter than the stage */
@media (min-width: 761px) and (max-height: 1000px) {
  main { padding-top: 26px; }
  .accent { font-size: 36px; }
  .display { font-size: 84px; }
  .card { margin-top: 24px; padding: 28px 40px 32px; }
  .slf { min-height: 0; }
  .slf__kind { min-height: 104px; }
}
/* phone */
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; height: 64px; padding: 0 16px; }
  .nav-side.l, .nav-side .wide, .pill .num { display: none; }
  .pill .short { display: inline; }
  .logo img { height: 44px; }
  main { padding: 28px 16px 40px; }
  .accent { font-size: 28px; }
  .display { font-size: 64px; }
  .cloud { display: none; }
  .sky { bottom: -40px; }
  .card { margin-top: 24px; padding: 24px 18px 26px; box-shadow: 5px 5px 0 var(--ink); }
  .slf { min-height: 0; --slf-gap: 18px; }
  .slf__title { font-size: 32px; }
  .slf__kinds { grid-template-columns: 1fr 1fr; gap: 10px; }
  .slf__kind { min-height: 0; padding: 14px; }
  .slf__kind-icon { display: none; }
  .slf__kind-text strong { font-size: 17px; }
  .slf__kind-text small { font-size: 14px; }
  .slf__chip { font-size: 16px; padding: 12px 16px; }
  .slf__sent-title { font-size: 42px; }
  .slf__sent-title em { font-size: 36px; }
  .slf__sent-text { font-size: 17px; }
}