/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · the lead form: the two-step form in a raised panel with dark, hairline fields and a "Step 1 of 2" label with two segment
   marks. Two settings: the closing section of 14 pages (.lf--c, at the end of this file, with its gallery) and /contact (.lf--ct, placed by
   that page's own styles). The form posts to the site's Formspree endpoint and answers in place; without JavaScript it is one long form
   that posts normally. Dark is authored here; light re-points the --lf-* tokens at the end. Script: theme/lead.js.
   ══════════════════════════════════════════════════════════════════════════════════ */
.lf { --lf-bg: #000; --lf-ink: #f4f4f4; --lf-body: rgba(244,244,244,.74); --lf-meta: rgba(244,244,244,.54); --lf-line: rgba(255,255,255,.1);
  --lf-panel: #0e0e0e; --lf-edge: rgba(255,255,255,.09); --lf-field: rgba(255,255,255,.035); --lf-field-line: rgba(255,255,255,.14); --lf-field-hover: rgba(255,255,255,.26);
  --lf-field-ink: #f4f4f4; --lf-field-ph: rgba(244,244,244,.4); --lf-ring: rgba(255,255,255,.1); --lf-chip: rgba(255,255,255,.16);
  --lf-btn: #f4f4f4; --lf-btn-hover: #fff; --lf-btn-ink: #0e0e0e; --lf-seg: rgba(255,255,255,.14); --lf-err: #f3a99f; --lf-glow: rgba(255,255,255,.055);
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 144px 0 136px;   /* clip, not hidden: a hidden box is a scroll container and would capture the reel's view timeline */ background: var(--lf-bg); color: var(--lf-ink);
  font-family: 'Mona Sans', 'Inter', sans-serif; -webkit-font-smoothing: antialiased; scroll-margin-top: 64px; }
.lf *, .lf *::before, .lf *::after { box-sizing: border-box; }
/* one soft light behind the form, so the panel reads as lifted off the ground */
.lf::before { content: ''; position: absolute; z-index: 0; right: max(-160px, calc(50% - 760px)); top: 50%; width: 900px; height: 760px; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--lf-glow), transparent 72%); }
/* the column: each setting arranges it (.lf--c below, .lf--ct on /contact) */
.lf-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.lf-sub { margin: 18px 0 0; max-width: 27em; font-size: 16.5px; line-height: 1.55; letter-spacing: -.006em; color: var(--lf-body); text-wrap: pretty; }
/* the panel */
.lf-panel { position: relative; padding: 34px 36px 30px; border-radius: 24px; background: var(--lf-panel); box-shadow: inset 0 0 0 1px var(--lf-edge), 0 50px 100px -60px rgba(0,0,0,.9); }
.lf-form { margin: 0; }
.lf-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.lf-count { font-family: 'DM Mono', 'Roboto Mono', monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--lf-meta); font-variant-numeric: tabular-nums; }
.lf-segs { display: flex; gap: 6px; }
.lf-segs i { display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--lf-seg); transition: background-color .5s ease; }
.lf-segs i.on { background: var(--lf-ink); }
.lf-step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.lf-step[hidden] { display: none; }
.lf [hidden] { display: none !important; }   /* the buttons and steps set their own display; hidden has to win */
/* each step has a real legend for screen readers and a visible title as the first grid item (a legend cannot sit in a grid) */
.lf-legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lf-kick { grid-column: 1 / -1; margin: 0 0 4px; font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; color: var(--lf-ink); }
.lf-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lf-f--wide { grid-column: 1 / -1; }
.lf-f > label, .lf-f > .lf-lab { font-size: 13.5px; font-weight: 500; line-height: 1.25; letter-spacing: -.004em; color: var(--lf-body); }
.lf-f > label em, .lf-f > .lf-lab em { font-style: normal; color: var(--lf-meta); }
.lf-f > label small, .lf-f > .lf-lab small { font-size: 12.5px; font-weight: 400; color: var(--lf-meta); }
.lf input[type="text"], .lf input[type="email"], .lf select, .lf textarea { width: 100%; height: 50px; padding: 0 15px; border: 0; border-radius: 12px; background: var(--lf-field); color: var(--lf-field-ink);
  font: 400 15px/1.3 'Mona Sans', 'Inter', sans-serif; letter-spacing: -.005em; outline: none; box-shadow: inset 0 0 0 1px var(--lf-field-line); transition: box-shadow .2s ease, background-color .2s ease; -webkit-appearance: none; appearance: none; }
.lf textarea { height: auto; min-height: 108px; padding: 13px 15px; resize: vertical; }
.lf input::placeholder, .lf textarea::placeholder { color: var(--lf-field-ph); }
@media (hover: hover) { .lf input:hover, .lf select:hover, .lf textarea:hover { box-shadow: inset 0 0 0 1px var(--lf-field-hover); } }
.lf select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23f4f4f4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; }
.lf select:invalid { color: var(--lf-field-ph); }
.lf select option { color: #0e0e0e; background: #fff; }
.lf input:focus-visible, .lf select:focus-visible, .lf textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--lf-ink), 0 0 0 4px var(--lf-ring); }
.lf .is-bad input, .lf .is-bad select { box-shadow: inset 0 0 0 1.5px var(--lf-err); }
.lf-err { min-height: 0; margin: -2px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--lf-err); }
.lf-err:empty { display: none; }
/* chips */
.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-chip { position: relative; }
.lf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lf-chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lf-chip); color: var(--lf-body); font-size: 14px; letter-spacing: -.005em;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.lf-chip input:checked + span { background: var(--lf-ink); color: var(--lf-bg); box-shadow: none; }
@media (hover: hover) { .lf-chip:hover span { box-shadow: inset 0 0 0 1px var(--lf-ink); color: var(--lf-ink); } .lf-chip:hover input:checked + span { color: var(--lf-bg); } }
.lf-chip input:focus-visible + span { box-shadow: 0 0 0 2px var(--lf-panel), 0 0 0 4px var(--lf-ink); }
/* buttons */
.lf-foot { margin-top: 26px; }
.lf-btns { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lf-btns .lf-go { margin-left: auto; }
.lf-go { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px 0 24px; border: 0; border-radius: 999px; background: var(--lf-btn); color: var(--lf-btn-ink); font: 500 15px/1 'Mona Sans', 'Inter', sans-serif;
  letter-spacing: -.01em; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.lf-go svg { width: 15px; height: 15px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.lf-go:hover { background: var(--lf-btn-hover); } .lf-go:hover svg { transform: translateX(3px); } .lf-go:active { transform: translateY(1px); }
.lf-go:focus-visible, .lf-back:focus-visible { outline: 2px solid var(--lf-ink); outline-offset: 3px; }
.lf-go[disabled] { opacity: .6; cursor: progress; }
.lf-back { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px; border: 0; background: none; color: var(--lf-body); font: 500 14.5px/1 'Mona Sans', 'Inter', sans-serif; cursor: pointer; }
.lf-back svg { width: 14px; height: 14px; }
.lf-back:hover { color: var(--lf-ink); }
.lf-fine { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--lf-meta); }
.lf-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* sent */
.lf-done { text-align: center; padding: 48px 8px 44px; }
.lf-done[hidden] { display: none; }
.lf-done-ic { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%; background: var(--lf-ink); color: var(--lf-bg); }
.lf-done-ic svg { width: 20px; height: 20px; }
.lf-done h3 { margin: 0; font-weight: 500; font-size: 26px; letter-spacing: -.03em; color: var(--lf-ink); }
.lf-done p { margin: 12px auto 0; max-width: 400px; font-size: 15.5px; line-height: 1.55; color: var(--lf-body); }
.lf-done a { color: var(--lf-ink); }
.lf-fail { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--lf-err); }
.lf-fail:empty { display: none; }
.lf-fail a { color: inherit; }
/* step change: the incoming step settles in */
.lf-step.is-in { animation: lf-in .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes lf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* tablets and phones */
@media (max-width: 960px) {
  .lf { padding: 96px 0 88px; }
  .lf-in { padding: 0 24px; }
  .lf::before { right: 50%; transform: translate(50%, -50%); width: 700px; }
}
@media (max-width: 560px) {
  .lf-in { padding: 0 16px; }
  .lf-panel { padding: 24px 18px 22px; border-radius: 20px; }
  .lf-step { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lf-sub { font-size: 15.5px; }
  .lf-kick { font-size: 19px; }
  .lf-btns { flex-wrap: wrap; }
  .lf-btns .lf-go { flex: 1 1 auto; justify-content: center; }
  .lf input[type="text"], .lf input[type="email"], .lf select, .lf textarea { font-size: 16px; }   /* 16px stops iOS zooming into the field */
}
@media (prefers-reduced-motion: reduce) {
  .lf-step.is-in { animation: none !important; }
  .lf-segs i, .lf-go, .lf-go svg { transition: none; }
}
/* without the script the form is one long form: no step label, no Next/Back */
.lf:not(.lf-js) .lf-top { display: none; }
/* ───── light ───── */
html[data-theme="light"] .lf { --lf-bg: #fff; --lf-ink: #0e0e0e; --lf-body: #3f3f46; --lf-meta: #5d5d64; --lf-line: rgba(14,14,14,.1);
  --lf-panel: #fff; --lf-edge: rgba(14,14,14,.09); --lf-field: #f7f7f8; --lf-field-line: rgba(14,14,14,.12); --lf-field-hover: rgba(14,14,14,.28);
  --lf-field-ink: #0e0e0e; --lf-field-ph: #85858c; --lf-ring: rgba(14,14,14,.08); --lf-chip: rgba(14,14,14,.18);
  --lf-btn: #0e0e0e; --lf-btn-hover: #2b2b2e; --lf-btn-ink: #fff; --lf-seg: rgba(14,14,14,.12); --lf-err: #b4321f; --lf-glow: rgba(14,14,14,.035); }
html[data-theme="light"] .lf-panel { box-shadow: inset 0 0 0 1px var(--lf-edge), 0 50px 100px -56px rgba(14,14,14,.32); }
html[data-theme="light"] .lf select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230e0e0e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* the section takes the page ground (theme/grounds.css) and keeps rounded top corners: invisible where the page above is the same colour, a
   deliberate edge where it is not (the light case-study pages in dark mode); its type is set here so no page-level h2 / p / label rule can reach it */
.lf { border-radius: 36px 36px 0 0; margin-top: -36px; }
.lf-h, .lf-sub, .lf-done h3, .lf-done p, .lf-fine, .lf-f > label, .lf-lab, .lf-err, .lf-fail, .lf-chip span, .lf-kick { font-family: 'Mona Sans', 'Inter', sans-serif; text-transform: none; }
@media (max-width: 860px) { .lf { border-radius: 24px 24px 0 0; margin-top: -24px; } }

/* ══════════════════════════════════════════════════════════════════════════════════
   The closing section, centred (.lf--c, 14 pages; Contact keeps its own layout)
   One focal point: one sentence (the section's heading), then the form panel with the reply line under its button. Around it a gallery
   of the work turns on the inside of a ring (theme/lead-gallery.js draws it into .lf-stage); its centre runs behind this column, so no card
   ever sits behind the copy or the form. Large screens: the ring frames the column on both sides. Tablets: the ring is a short band above
   the copy. Phones: the copy and the form first, the band under them. The stage is lit softly from the centre.
   ══════════════════════════════════════════════════════════════════════════════════ */
.lf.lf--c { --lf-bg: #0f1011; --lfg-fog: #0f1011; --lf-ink: #f4f4f3; --lf-body: #c9c9c9; --lf-meta: #a3a3a3; --lf-line: #2a2b2d;
  --lf-panel: #171819; --lf-edge: #303133; --lf-field: #111213; --lf-field-line: #353638; --lf-field-hover: #4c4d50; --lf-field-ph: #76777a;
  --lf-ring: rgba(255,255,255,.12); --lf-chip: #3a3b3e; --lf-seg: #333437;
  --lfg-strip: 0px;
  content-visibility: auto; contain-intrinsic-size: auto 880px;   /* last on every page: laid out only once the visitor nears it (a faster first paint) */
  display: flex; flex-direction: column; justify-content: center; padding: 0; min-height: clamp(760px, calc(100vh - 64px), 940px);
  background: radial-gradient(ellipse 62% 58% at 50% 50%, #151617 0%, #0f1011 46%, #0b0c0c 80%, #080808 100%); }
.lf.lf--c::before { display: none; }
.lf--c .lf-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; }
.lf--c .lf-stage canvas { display: block; width: 100%; height: 100%; }
.lf--c .lf-vsrc { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.lf--c.lf-nogl .lf-stage { display: none; }
/* the column */
.lf--c .lf-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: none; margin: 0;
  padding: clamp(84px, 10vh, 116px) 24px clamp(76px, 9vh, 104px); text-align: center; grid-template: none; }
.lf--c .lf-head { max-width: 660px; padding: 0; }
/* the heading in the site's two voices (Mona Sans, the close in Instrument Serif italic, as on Services, About and Results), then one sentence */
.lf--c .lf-h { margin: 0 auto; max-width: 11.5em; font-style: normal; font-weight: 500; font-size: clamp(38px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -.045em;
  color: var(--lf-ink); text-wrap: balance; }
.lf--c .lf-h em { font-family: 'Instrument Serif', 'Cambo', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.015em; color: var(--lf-body); }
.lf--c .lf-sub { margin: 16px auto 0; max-width: 34em; font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: -.008em;
  color: var(--lf-meta); text-wrap: balance; }
/* the panel */
.lf--c .lf-panel { align-self: center; width: min(520px, 100%); margin-top: 30px; padding: 24px 26px 22px; border-radius: 18px; text-align: left; background: var(--lf-panel);
  box-shadow: inset 0 0 0 1px var(--lf-edge), 0 1px 0 rgba(255,255,255,.04) inset, 0 46px 90px -52px rgba(0,0,0,.95); }
.lf--c .lf-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.lf--c .lf-title { margin: 0; font: 500 18px/1.25 'Mona Sans', 'Inter', sans-serif; letter-spacing: -.02em; color: var(--lf-ink); }
.lf--c .lf-prog { display: inline-flex; align-items: center; gap: 10px; }
.lf--c .lf-count { font-size: 11px; color: var(--lf-meta); }
.lf--c .lf-segs i { width: 22px; height: 3px; }
.lf--c .lf-step { gap: 14px 12px; }
.lf--c .lf-f { gap: 7px; }
.lf--c .lf-f > label, .lf--c .lf-f > .lf-lab { font-size: 13px; color: var(--lf-body); }
.lf--c input[type="text"], .lf--c input[type="email"], .lf--c select, .lf--c textarea { height: 46px; border-radius: 11px; font-size: 14.5px; }
.lf--c textarea { height: auto; min-height: 92px; }
.lf--c .lf-chip span { height: 36px; padding: 0 13px; font-size: 13.5px; }
.lf--c .lf-foot { margin-top: 20px; }
.lf--c .lf-btns { gap: 10px; }
.lf--c .lf-btns .lf-go { flex: 1 1 auto; justify-content: center; margin-left: 0; height: 48px; }
.lf--c .lf-back { flex: 0 0 auto; height: 48px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lf-field-line); color: var(--lf-body); }
.lf--c .lf-back:hover { box-shadow: inset 0 0 0 1px var(--lf-field-hover); color: var(--lf-ink); }
.lf--c .lf-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--lf-meta); }
.lf--c .lf-fail { text-align: center; }
.lf--c .lf-done { padding: 34px 8px 30px; }
.lf-note, .lf-title { font-family: 'Mona Sans', 'Inter', sans-serif; text-transform: none; }
/* without the script: the form is one long form, so no step label, but the panel keeps its title */
.lf.lf--c:not(.lf-js) .lf-top { display: grid; }
.lf--c:not(.lf-js) .lf-prog { display: none; }
/* tablets: the ring becomes a short band above the copy */
@media (max-width: 1099px) {
  .lf.lf--c { --lfg-strip: clamp(196px, 26vw, 250px); min-height: 0; justify-content: flex-start; }
  .lf--c .lf-stage { inset: 16px 0 auto 0; height: var(--lfg-strip); }   /* clear of the section's rounded top edge */
  .lf--c .lf-in { padding: calc(var(--lfg-strip) + 34px) 24px 80px; }
}
/* phones, and any short landscape screen: the copy and the form come first; the band closes the section */
@media (max-width: 767px), (max-width: 1099px) and (max-height: 560px) {
  .lf.lf--c { --lfg-strip: 188px; }
  .lf--c .lf-stage { inset: auto 0 0 0; }
  .lf--c .lf-in { padding: 72px 24px calc(var(--lfg-strip) + 4px); }
}
@media (max-width: 560px) {
  .lf--c .lf-in { padding: 64px 16px calc(var(--lfg-strip) + 4px); }
  .lf--c .lf-h { font-size: clamp(32px, 9vw, 40px); }
  .lf--c .lf-sub { font-size: 15px; }
  .lf--c .lf-panel { margin-top: 24px; padding: 20px 16px 18px; border-radius: 16px; }
  .lf--c .lf-top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lf--c .lf-title { font-size: 17px; }
  .lf--c input[type="text"], .lf--c input[type="email"], .lf--c select, .lf--c textarea { font-size: 16px; }   /* no zoom on focus (iOS) */
}
/* light: the same stage on paper (the reference itself is a light page) */
html[data-theme="light"] .lf.lf--c { --lf-bg: #f6f6f7; --lfg-fog: #f3f3f5; --lf-ink: #0e0e0e; --lf-body: #3f3f46; --lf-meta: #5d5d64; --lf-line: #e2e2e6;
  --lf-panel: #ffffff; --lf-edge: #e1e1e5; --lf-field: #f7f7f8; --lf-field-line: #d7d7dc; --lf-field-hover: #a9a9b0; --lf-field-ph: #85858c;
  --lf-chip: #cfcfd5; --lf-seg: #e2e2e6;
  background: radial-gradient(ellipse 62% 58% at 50% 50%, #ffffff 0%, #fafafb 46%, #f3f3f5 80%, #eeeef1 100%); }
html[data-theme="light"] .lf--c .lf-panel { box-shadow: inset 0 0 0 1px var(--lf-edge), 0 46px 90px -56px rgba(14,14,14,.32); }