/* ==========================================================================
   Get Listed (redesign) - page-get-listed-v2.php

   A restyle. The form underneath is Forminator's, with its own class names and
   its own inline stylesheet carrying !important on a good deal of it, so this
   dresses that markup rather than replacing it. Where a rule here uses
   !important it is answering one, not reaching for weight.

   Everything is scoped under .gl, which only this page and its sibling use.
   ========================================================================== */

.gl *{box-sizing:border-box}
.gl{font-family:Inter,system-ui,sans-serif;color:#0F172A;background:#F6F8FC;overflow-x:hidden}
.gl h1,.gl h2,.gl h3{font-family:var(--font-display),'DM Sans',system-ui,sans-serif;letter-spacing:-0.02em}
.gl svg.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@keyframes gl-drift{to{transform:translate(-132px,-132px)}}
@keyframes gl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gl-pat svg{animation:gl-drift 30s linear infinite}
.gl-rise{opacity:0;animation:gl-rise .7s cubic-bezier(.2,.7,.2,1) forwards}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.glv-hero{position:relative;overflow:hidden;background:#0B1220;padding:80px 24px 150px}
.gl-pat{position:absolute;inset:0;overflow:hidden;opacity:.08}
.gl-pat svg{position:absolute;left:0;top:0;width:calc(100% + 132px);height:calc(100% + 132px)}
.glv-hero__inner{position:relative;max-width:880px;margin:0 auto}

.glv-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#F5B400;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.glv-title{margin:22px 0 0;max-width:760px;font-size:clamp(38px,5vw,60px);line-height:1.05;font-weight:700;color:#fff}
.glv-title span{color:#F5B400}
.glv-lead{margin:18px 0 0;max-width:600px;font-size:18px;line-height:1.6;color:#CBD5E1}

.glv-steps{list-style:none;margin:40px 0 0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.glv-steps li{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.glv-step-n{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font:700 14px var(--font-display),'DM Sans',sans-serif}
.glv-step-n.is-now{background:#F5B400;color:#0B1220}
.glv-step-t{display:flex;flex-direction:column}
.glv-step-t strong{font-size:15px;font-weight:600;color:#fff}
.glv-step-t span{font-size:13px;color:#94A3B8}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */
.glv-body{padding:0 24px 112px}
.glv-layout{max-width:880px;margin:-96px auto 0;position:relative}
.glv-card{background:#fff;border-radius:28px;border:1px solid #E6ECF5;box-shadow:0 30px 70px -40px rgba(15,23,42,.35);overflow:hidden}

.glv-cardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 36px;background:#FAFCFF;border-bottom:1px solid #EDF1F7}
.glv-cardhead__left{display:flex;align-items:center;gap:14px}
.glv-cardhead__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#2563EB;color:#fff;flex:none}
.glv-cardhead h2{margin:0;font-size:24px}
.glv-cardhead p{margin:4px 0 0;font-size:14px;color:#64748B}
.glv-price{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#EEF3FF;color:#1D4ED8;font-size:13px;font-weight:600}

.glv-claiming{display:flex;gap:12px;margin:0;padding:18px 36px;background:#F3F7FF;border-bottom:1px solid #E3ECFB}
.glv-claiming__icon{flex:none;color:#1D4ED8}
.glv-claiming__text{display:flex;flex-direction:column;gap:2px;font-size:14px;color:#334155}
.glv-claiming__text strong{color:#0F172A}
.glv-claiming__text a{font-weight:600}

.glv-foot{padding:0 36px 36px;background:#FAFCFF}
.glv-foot__secure{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding-top:14px;font-size:13px;color:#475569}
.glv-foot__terms{margin:18px 0 0;font-size:12px;line-height:1.6;color:#64748B;text-align:center}

/* --------------------------------------------------------------------------
   Forminator, restyled
   The form is rendered by its shortcode, so these dress what it writes. Its
   own stylesheet and the form's saved custom CSS both use !important, which is
   why some of these have to.
   -------------------------------------------------------------------------- */
.glv-embed{padding:8px 36px 28px}
.glv-embed .forminator-row{margin:0 !important}

/* Fields sit in a two-column grid; a full-width field spans it. */
.glv-embed .forminator-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px !important}
.glv-embed .forminator-col{width:auto !important;max-width:none !important;padding:0 !important;float:none !important}
.glv-embed .forminator-col-12{grid-column:1/-1}

.glv-embed .forminator-label,
.glv-embed .forminator-custom-form .forminator-label{
    display:block;margin:0 0 8px !important;
    color:#1E293B !important;font-size:14px !important;font-weight:600 !important;
    letter-spacing:0 !important;text-transform:none !important;
}

.glv-embed .forminator-required{color:#DC2626 !important;margin-left:2px}

.glv-embed .forminator-input,
.glv-embed .forminator-textarea,
.glv-embed .forminator-custom-form .forminator-input,
.glv-embed .forminator-custom-form .forminator-textarea{
    width:100%;min-height:52px !important;
    padding:0 16px !important;
    border-radius:14px !important;border:1.5px solid #DCE4F0 !important;
    background:#F9FBFE !important;
    font:500 15px Inter,sans-serif !important;color:#0F172A !important;
    outline:0;transition:border-color .2s,box-shadow .2s,background .2s;
}

.glv-embed .forminator-textarea,
.glv-embed .forminator-custom-form .forminator-textarea{
    min-height:140px !important;padding:14px 16px !important;line-height:1.6 !important;resize:vertical;
}

.glv-embed .forminator-input:hover{border-color:#C5D2E6 !important}
.glv-embed .forminator-input:focus,
.glv-embed .forminator-textarea:focus{
    border-color:#2563EB !important;background:#fff !important;box-shadow:0 0 0 4px #DCE7FF !important;
}
.glv-embed .forminator-input::placeholder,
.glv-embed .forminator-textarea::placeholder{color:#8A97AB !important;font-weight:400 !important}

/* Forminator's own description line under a field. */
.glv-embed .forminator-description{margin:8px 0 0 !important;font-size:13px !important;color:#64748B !important;line-height:1.5 !important}

/* Errors */
.glv-embed .forminator-error-message{margin-top:8px !important;font-size:13px !important;font-weight:500 !important;color:#B91C1C !important}
.glv-embed .forminator-has_error .forminator-input,
.glv-embed .forminator-has_error .forminator-textarea{border-color:#DC2626 !important;background:#FFFBFB !important}

/* --------------------------------------------------------------------------
   Sections
   Written round Forminator's rows by the script, so the five numbered groups
   of the design appear without a single input being moved.
   -------------------------------------------------------------------------- */
.glv-sec{padding:32px 0;border-top:1px solid #EDF1F7}
.glv-sec:first-of-type{border-top:0;padding-top:24px}
.glv-sechead{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.glv-num{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#EEF3FF;color:#1D4ED8;font:700 14px var(--font-display),'DM Sans',sans-serif;transition:background .25s,color .25s}
.glv-sec.is-done .glv-num{background:#16A34A;color:#fff}
.glv-sec.is-done .glv-num span{display:none}
.glv-num svg{display:none}
.glv-sec.is-done .glv-num svg{display:block}
.glv-sectitle{margin:0;font:700 19px var(--font-display),'DM Sans',sans-serif;letter-spacing:-.01em}
.glv-sechint{margin:4px 0 0;font-size:13px;color:#64748B;line-height:1.5}

/* --------------------------------------------------------------------------
   Practice-area chips
   The group already carries .practice-area-checkbox, which Forminator's own
   stylesheet never touches. The design's tile is drawn on the label.
   -------------------------------------------------------------------------- */
.glv-embed .practice-area-checkbox .forminator-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.glv-embed .practice-area-checkbox .forminator-field > .forminator-label{grid-column:1/-1}

.glv-embed .practice-area-checkbox .forminator-checkbox{
    position:relative;display:flex;align-items:center;gap:10px;
    min-height:52px;margin:0 !important;padding:8px 14px 8px 12px !important;
    border-radius:14px !important;border:1.5px solid #DCE4F0 !important;background:#fff !important;
    cursor:pointer;font-size:14px !important;font-weight:600 !important;color:#1E293B !important;
    transition:all .2s;user-select:none;
}
.glv-embed .practice-area-checkbox .forminator-checkbox:hover{border-color:#BFD0EE !important;background:#FAFCFF !important}

/* The box on the right, drawn here because Forminator's own indicator is set
   to display:none by the form's saved CSS. */
.glv-embed .practice-area-checkbox .forminator-checkbox::after{
    content:"";margin-left:auto;flex:none;width:20px;height:20px;border-radius:6px;
    border:1.5px solid #C5D2E6;background:#fff no-repeat center;background-size:12px 12px;
    transition:all .2s;
}
.glv-embed .practice-area-checkbox .forminator-checkbox:has(input:checked),
.glv-embed .practice-area-checkbox .forminator-checkbox.is-selected{
    border-color:#2563EB !important;background:#F3F7FF !important;color:#1D4ED8 !important;
}
.glv-embed .practice-area-checkbox .forminator-checkbox:has(input:checked)::after,
.glv-embed .practice-area-checkbox .forminator-checkbox.is-selected::after{
    background-color:#2563EB;border-color:#2563EB;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.glv-embed .practice-area-checkbox .forminator-checkbox-label{color:inherit !important;font-size:14px !important;font-weight:600 !important}
/* The form's saved CSS prints its own tick glyph; the box above replaces it. */
.glv-embed .practice-area-checkbox .forminator-checkbox:has(input:checked) .forminator-checkbox-label::before{content:none !important;margin-right:0 !important}
.glv-embed .practice-area-checkbox .forminator-checkbox-box{display:none}
.glv-embed .practice-area-checkbox .forminator-checkbox input[type="checkbox"]{
    position:absolute !important;width:1px !important;height:1px !important;min-width:1px !important;
    margin:0 !important;opacity:0 !important;pointer-events:none !important;
}
.glv-embed .practice-area-checkbox .forminator-checkbox:has(input:focus-visible){box-shadow:0 0 0 4px #DCE7FF}

.glv-chipsmeta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:13px;color:#64748B}
.glv-chipsmeta strong{color:#2563EB}

/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */
.glv-embed .forminator-button-submit{
    position:relative;overflow:hidden;width:100%;
    display:flex !important;align-items:center;justify-content:center;gap:10px;
    min-height:58px !important;border:0 !important;border-radius:16px !important;
    background:#F5B400 !important;color:#0B1220 !important;
    font:700 17px Inter,sans-serif !important;cursor:pointer;
    transition:transform .2s,box-shadow .2s,background .2s;
}
.glv-embed .forminator-button-submit:hover{background:#FFC21A !important;transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(245,180,0,.7)}
.glv-embed .forminator-button-submit:focus-visible{outline:3px solid #0B1220;outline-offset:3px}

/* --------------------------------------------------------------------------
   The city combo, inside the new field shape
   -------------------------------------------------------------------------- */
.glv-embed .gl-city{position:relative}
.glv-embed .gl-city__list{top:calc(100% + 6px)}

@media (max-width:980px){
  .glv-layout{margin-top:-80px}
}
@media (max-width:640px){
  .glv-embed .forminator-row{grid-template-columns:minmax(0,1fr)}
  .glv-embed .practice-area-checkbox .forminator-field{grid-template-columns:minmax(0,1fr)}
  .glv-embed{padding:8px 20px 24px}
  .glv-cardhead,.glv-claiming,.glv-foot{padding-left:20px;padding-right:20px}
  .glv-sec{padding:26px 0}
  .gl-steps-row{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .gl *,.gl *::before,.gl *::after{animation:none !important;transition:none !important}
  .gl-rise{opacity:1 !important;transform:none !important}
}

/* The block stylesheet is loaded here for the city dropdown, and it draws its
   own tick box on ::before - so every chip had two, one each side. That page's
   design keeps the box on the left; this one puts it on the right, so the
   inherited one goes. */
.glv-embed .practice-area-checkbox .forminator-checkbox::before{content:none !important}

/* The form's saved CSS turns a checked chip solid blue with a white label.
   This design keeps the chip pale, so that white label was invisible on it.
   Its selector carries :has(input:checked), which outranks a plain label rule
   - hence matching it here rather than reaching for more !important. */
.glv-embed .practice-area-checkbox .forminator-checkbox:has(input:checked) .forminator-checkbox-label,
.glv-embed .practice-area-checkbox .forminator-checkbox.is-selected .forminator-checkbox-label{
    color:#1D4ED8 !important;
}

/* --------------------------------------------------------------------------
   Headings
   Dark navy rather than the slate the body text uses, so the numbered steps
   read as structure instead of as more copy.
   -------------------------------------------------------------------------- */
.glv-sectitle,
.glv-cardhead h2{color:#0B1220 !important}
.glv-embed .forminator-label,
.glv-embed .forminator-custom-form .forminator-label{color:#0B1220 !important}

/* The practice-area group says its own name twice: once as the section
   heading written here, and again as Forminator's field label underneath it.
   The heading stays; the field label is hidden from sight but left in the
   accessibility tree, because the checkbox group is what it labels. */
.glv-embed .practice-area-checkbox .forminator-field > .forminator-label{
    position:absolute !important;
    width:1px !important;height:1px !important;
    margin:-1px !important;padding:0 !important;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}