/**
 * The provider page, and nothing else.
 *
 * This is the design the operator supplied for a professional's page, and it
 * is deliberately not in site.css. Every one of the other 26,486 pages loads
 * that file, and a page-shaped design has no business in it: keeping this
 * separate is what makes "no other page changes" a fact about the build
 * rather than a promise about my care.
 */
/* ── a provider's page ─────────────────────────────────────────────────────
   Built to the supplied mockup, which is a lead page and not a directory
   entry: the reader is meant to leave a phone number, not to click through.
   That is also why nothing here links out. */
.pro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(24px,4vw,52px) 0}
.pro__l{display:flex;flex-direction:column;gap:20px;min-width:0;container-type:inline-size}
.pro__tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:13px;
  font-weight:600;letter-spacing:.06em;color:var(--ink-3)}
.pro__live{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--ink)}
.pro__live i{width:8px;height:8px;border-radius:50%;background:var(--green);
  animation:proBlink 2.4s ease-in-out infinite}
@keyframes proBlink{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.pro__live i{animation:none}}
.pro__by{display:flex;align-items:center;gap:16px}
.pro__av{width:76px;height:76px;border-radius:50%;flex:none;overflow:hidden;
  border:1px solid var(--line);background:var(--sunk);display:grid;place-items:center;
  font-family:var(--ui);font-weight:900;font-size:26px;color:var(--ink)}
.pro__av img{width:100%;height:100%;object-fit:cover;display:block}
.pro__by span{font-size:14px;color:var(--ink-3);line-height:1.55}
.pro h1{margin:0;font-family:var(--disp);font-weight:700;line-height:.88;letter-spacing:-.005em;
  font-size:min(clamp(48px,10vw,104px),calc(100cqi / var(--n,10) * 2.1))}
.pro__lede{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.5;font-weight:500;
  color:var(--ink);max-width:32ch}
.pro__sub{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2);max-width:52ch}
.pro__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:4px}
.pro__trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--ink-2)}
.pro__trust span{display:flex;align-items:center;gap:8px}
.pro__trust b{color:var(--green-ink)}

/* The picture is a screenshot of their own home page: an honest illustration
   for a page that deliberately does not send the reader there. */
.pro__shot{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--card);
  box-shadow:0 30px 60px -40px rgba(19,19,17,.5)}
.pro__shot img{width:100%;height:auto;display:block}

.pro__body{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-start;
  padding-top:clamp(8px,2vw,24px)}
.pro__main{flex:999 1 min(100%,520px);min-width:0;display:flex;flex-direction:column;
  gap:clamp(40px,5vw,68px)}
.pro__sec{display:flex;flex-direction:column;gap:20px}
.pro__sec>h2{margin:0;font-family:var(--disp);font-weight:700;line-height:.9;
  font-size:clamp(40px,5.5vw,66px)}
.pro__sec .prose p,.pro__sec>div>p{margin:0 0 18px;font-size:clamp(17px,1.4vw,19px);
  line-height:1.8;color:var(--ink);max-width:62ch}
.pro__sec>div>p:last-child{margin-bottom:0}

.pro__svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;
  list-style:none;margin:0;padding:0}
.pro__svc li{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;
  display:flex;flex-direction:column;gap:10px;min-width:0;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pro__svc li:hover{transform:translateY(-3px);border-color:var(--ink);
  box-shadow:0 24px 40px -24px rgba(19,19,17,.35)}
.pro__svc .mono{font-size:12px;color:var(--green-ink);direction:ltr;text-align:start}
.pro__svc b{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em}

.pro__steps{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.pro__steps li{background:var(--card);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.pro__steps i{font-family:var(--disp);font-weight:700;font-size:44px;line-height:1;
  color:var(--green-ink);font-style:normal}
.pro__steps b{font-weight:700;font-size:17px}
.pro__steps span{font-size:14px;color:var(--ink-2);line-height:1.6}

/* The form, twice: once beside the name and once in a column that follows.
   Named askbox and not lead: `.lead` is already the tool page's hero, a grid
   of auto-fit 400px columns, and the first version of this inherited it. The
   card rendered at its right width with every field inside it crushed into a
   ninety-pixel column. */
.askbox{background:var(--card);border:1px solid var(--line);border-radius:28px;
  padding:clamp(22px,2.5vw,30px);box-shadow:0 30px 60px -40px rgba(19,19,17,.5);
  display:flex;flex-direction:column;gap:18px;width:100%;max-width:460px;justify-self:center;
  scroll-margin-top:90px}
.askbox__top{display:flex;flex-direction:column;gap:6px}
.askbox__top b{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--green-ink)}
.askbox__top h2{margin:0;font-size:26px;font-weight:800;line-height:1.15}
.askbox__top p{margin:0;font-size:14px;color:var(--ink-3);line-height:1.6}
.askbox label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#2A2A28}
.askbox input,.askbox textarea{height:50px;padding:0 16px;border-radius:14px;border:1px solid var(--line-3);
  background:var(--paper);font:inherit;font-size:16px;color:var(--ink);width:100%}
.askbox textarea{height:auto;padding:14px 16px;line-height:1.5;resize:vertical}
.askbox input[type=tel]{direction:ltr;text-align:left;font-family:var(--mono)}
.askbox input:focus,.askbox textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.askbox__fields{display:flex;flex-direction:column;gap:12px}
.askbox__chips{display:flex;flex-wrap:wrap;gap:8px}
.askbox__chips button{padding:9px 14px;border-radius:999px;border:1px solid var(--line-3);
  background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:500;
  cursor:pointer;min-height:40px;transition:all .2s ease}
.askbox__chips button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.askbox__send{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);
  color:var(--paper);padding:18px 24px;border-radius:999px;font:inherit;font-size:17px;
  font-weight:700;border:0;cursor:pointer;min-height:56px;
  box-shadow:0 16px 36px -16px rgba(19,19,17,.6);transition:transform .2s ease,background .2s ease}
.askbox__send:hover{transform:translateY(-2px);background:var(--green-ink);color:#fff}
.askbox__note{margin:0;font-size:12px;color:var(--ink-3);line-height:1.6;text-align:center}
.askbox__err{font-size:13px;color:#C0392B;margin-top:-6px}
.askbox__ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:18px 0}
.askbox__ok i{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:34px;font-weight:700;font-style:normal}
.askbox__ok h2{margin:0;font-size:28px;font-weight:800;line-height:1.15}
.askbox__ok p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.7}


/* ── the inactive form ───────────────────────────────────────────────────
   On a page nobody has claimed, the lead form is the real one, greyed and
   disabled, with a veil over it. Not a different box: the business looking at
   its own page should see exactly what it gets by registering, and a greyed
   version of the thing is a clearer promise than a paragraph describing it.

   Grey, not green. A page the business has not agreed to is not a live
   listing, and colouring it like one would be the design telling a lie the
   copy is careful not to tell. */
.askbox--off,.quick--off{position:relative;overflow:hidden}
.askbox--off>[data-form],.quick--off>[data-form]{
  filter:grayscale(1);opacity:.38;pointer-events:none;user-select:none}
.askbox__veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:24px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.82))}
.quick--off .askbox__veil{background:linear-gradient(180deg,rgba(19,19,17,.6),rgba(19,19,17,.86));color:#fff}
.askbox__veil b{font-size:15px;font-weight:800;line-height:1.3;max-width:300px}
.askbox__veil p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:280px}
.quick--off .askbox__veil p{color:rgba(255,255,255,.75)}
.askbox__claim{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  padding:15px 22px;border-radius:999px;font:inherit;font-size:16px;font-weight:700;border:0;
  cursor:pointer;min-height:52px;margin-top:6px;
  box-shadow:0 16px 36px -16px rgba(19,19,17,.6);transition:transform .2s ease,background .2s ease}
.askbox__claim:hover{transform:translateY(-2px);background:var(--green-ink);color:#fff}
.quick--off .askbox__claim{background:#fff;color:var(--ink)}
.quick--off .askbox__claim:hover{background:var(--lime);color:var(--ink)}
.askbox__veil-alt{font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.quick--off .askbox__veil-alt{color:rgba(255,255,255,.7)}

/* ── the request dialog ─────────────────────────────────────────────────── */
.claimgate{max-width:460px}
.claimgate__kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px}
.claimgate h3{margin:0 0 8px}
.claimgate>[data-form]>p{margin:0 0 16px}
.claimgate label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#2A2A28}
.claimgate input,.claimgate textarea{height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--line-3);
  background:var(--paper);font:inherit;font-size:16px;color:var(--ink);width:100%}
.claimgate textarea{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.claimgate input[type=email],.claimgate input[type=tel]{direction:ltr;text-align:left;font-family:var(--mono);font-size:15px}
.claimgate input:focus,.claimgate textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.claimgate .askbox__fields{display:flex;flex-direction:column;gap:12px}
.claim__pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.claim__pick button{padding:13px 12px;border-radius:14px;border:1px solid var(--line-3);
  background:var(--card);color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;min-height:48px;text-align:center;transition:all .2s ease}
.claim__pick button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:420px){.claim__pick{grid-template-columns:1fr}}
.claimgate [data-send][disabled]{opacity:.6;cursor:progress}
.claimgate .askbox__ok{padding:28px 0 8px}

/* An unclaimed page still shows the status pill, but it is not a heartbeat. */
.pro__live--off{color:var(--ink-3)}
.pro__live--off i{background:var(--line-3);animation:none}

/* Seen by bots, never by people. Off-screen rather than display:none, which
   is the first thing a form-filler checks for. */
/* Every geometry property is !important because `.claim input` and
   `.askbox input` set width:100% and height:50px at equal specificity and win
   on source order. Without this the honeypot renders as a full-width field
   1,400px wide, which is how it was found: the page scrolled sideways. */
.hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;min-height:0!important;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0!important;opacity:0}

.pro__aside{flex:1 1 min(100%,320px);max-width:400px;position:sticky;top:88px;min-width:0}
.quick{background:var(--ink);color:#fff;border-radius:24px;padding:24px;display:flex;
  flex-direction:column;gap:14px;box-shadow:0 30px 60px -40px rgba(19,19,17,.7)}
.quick b{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--lime)}
.quick strong{font-size:22px;font-weight:800;line-height:1.15;display:block}
.quick input{height:52px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);font:inherit;font-size:17px;color:#fff;width:100%;
  direction:ltr;text-align:left;font-family:var(--mono)}
.quick input::placeholder{color:rgba(255,255,255,.45)}
.quick button{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;
  color:var(--ink);padding:15px 20px;border-radius:999px;font:inherit;font-size:16px;
  font-weight:700;border:0;cursor:pointer;min-height:52px;transition:background .2s ease}
.quick button:hover{background:var(--lime)}

.proband{margin-top:clamp(48px,7vw,92px);background:var(--ink);color:#fff;border-radius:28px;
  padding:clamp(28px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.proband::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.proband::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(31,154,82,.25),transparent 55%)}
.proband>*{position:relative;z-index:1}
/* The grid and the glow are drawn after the children, which put them on top
   of the button: the link was there, and no click reached it. */
.proband::before,.proband::after{pointer-events:none}
.proband h2{margin:0;font-family:var(--disp);font-weight:700;line-height:.9;
  font-size:clamp(40px,6vw,74px)}
.proband p{margin:8px 0 0;font-size:17px;color:rgba(255,255,255,.7);max-width:44ch;line-height:1.6}
.proband a{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);
  padding:17px 28px;border-radius:999px;font-size:17px;font-weight:700}
.proband a:hover{background:var(--lime);color:var(--ink)}

@media(max-width:900px){.pro__aside{position:static;max-width:none}}

/* `.article mark` is scoped to the tool page's article, and this is not one. */
.pro__sec mark{background:color-mix(in oklab,var(--green) 26%,transparent);color:inherit;
  padding:.08em .12em;border-radius:3px}
.pro__sec .art__facts,.pro__sec .art__tip,.pro__sec .art__quote{margin:22px 0 0}
.pro__sec .art__quote p{max-width:none}

/* ── paid placement ──────────────────────────────────────────────────────
   A card the business paid to put first. The frame is the site's warm
   yellow and it says so in one word, because a directory that sells the top
   slot and does not say so is selling the reader. The frame is a frame, not
   a fill: the card stays the card. */
.tool--featured{border:2px solid #F2C94C;box-shadow:0 0 0 4px #FFF4CC,0 24px 48px -32px rgba(19,19,17,.35)}
.tool--featured:hover{border-color:#E0B53A}
.tool__paid,.pro__paid{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;background:#F2C94C;color:#3A2E00;vertical-align:middle}
.pro__paid{font-size:12px;padding:6px 12px}