/* =========================================================
   EXPLORE PALGHAR
   LIST YOUR BUSINESS
   ========================================================= */


.list-business-page{
  background:var(--off-white);
}



/* =========================================================
   BREADCRUMB
   ========================================================= */

.business-breadcrumb-wrap{
  background:var(--cream);

  border-bottom:
    1px solid
    rgba(32,37,34,.07);
}


.business-breadcrumb{
  min-height:48px;

  display:flex;
  align-items:center;

  gap:9px;

  color:var(--gray);

  font-size:.8rem;
}


.business-breadcrumb a{
  color:var(--green-dark);
}


.business-breadcrumb a:hover{
  color:var(--terracotta);
}



/* =========================================================
   HERO
   ========================================================= */

.business-hero{
  position:relative;

  min-height:590px;

  display:flex;
  align-items:flex-end;

  overflow:hidden;

  isolation:isolate;

  background:var(--green-dark);
}


.business-hero-media{
  position:absolute;
  inset:0;

  z-index:-3;
}


.business-hero-media img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;
}


.business-hero-overlay{
  position:absolute;
  inset:0;

  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(8,25,22,.94) 0%,
      rgba(8,25,22,.82) 38%,
      rgba(8,25,22,.46) 70%,
      rgba(8,25,22,.26) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8,25,22,.03),
      rgba(8,25,22,.42)
    );
}


.business-hero-inner{
  width:100%;
}


.business-hero-content{
  max-width:770px;

  padding:
    100px 0 70px;
}


.business-hero .eyebrow{
  color:var(--gold);
}


.business-hero .eyebrow::before{
  background:var(--gold);
}


.business-hero h1{
  max-width:15ch;

  color:var(--off-white);

  font-size:
    clamp(2.6rem,5vw,4.45rem);
}


.business-hero-lede{
  max-width:59ch;

  margin-top:20px;

  color:
    rgba(255,253,249,.84);

  font-size:1.04rem;
}


.business-hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:28px;
}


.business-hero-note{
  margin-top:20px;

  color:
    rgba(255,253,249,.65);

  font-size:.74rem;
  font-weight:600;
}



/* =========================================================
   BENEFIT STRIP
   ========================================================= */

.business-benefit-strip{
  background:var(--green-dark);

  border-top:
    1px solid
    rgba(255,255,255,.08);
}


.business-benefit-strip-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));
}


.business-benefit-strip-grid > div{
  min-height:94px;

  display:flex;

  flex-direction:column;
  justify-content:center;

  padding:
    18px 25px;

  border-right:
    1px solid
    rgba(255,255,255,.1);
}


.business-benefit-strip-grid > div:last-child{
  border-right:0;
}


.business-benefit-strip strong{
  color:var(--gold);

  font-size:.75rem;
}


.business-benefit-strip span{
  margin-top:3px;

  color:
    rgba(255,253,249,.67);

  font-size:.68rem;
}



/* =========================================================
   GENERIC HEAD
   ========================================================= */

.business-section-head{
  max-width:760px;

  margin-bottom:36px;
}


.business-section-head h2{
  font-size:
    clamp(2rem,3vw,2.8rem);
}


.business-section-head > p:not(.eyebrow){
  max-width:61ch;

  margin-top:11px;

  color:var(--gray);
}



/* =========================================================
   BENEFITS
   ========================================================= */

.business-benefits{
  padding:95px 0;

  background:var(--off-white);
}


.business-benefits-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  border-top:
    1px solid
    rgba(32,37,34,.11);

  border-left:
    1px solid
    rgba(32,37,34,.11);
}


.business-benefits-grid article{
  min-height:270px;

  padding:27px;

  border-right:
    1px solid
    rgba(32,37,34,.11);

  border-bottom:
    1px solid
    rgba(32,37,34,.11);
}


.business-benefit-number{
  display:block;

  margin-bottom:42px;

  color:var(--gold);

  font-family:var(--font-display);

  font-size:1.08rem;
}


.business-benefits-grid h3{
  margin-bottom:11px;

  font-size:1.18rem;
}


.business-benefits-grid p{
  color:var(--gray);

  font-size:.8rem;
}



/* =========================================================
   TYPES
   ========================================================= */

.business-types{
  padding:85px 0;

  background:var(--sand);
}


.business-type-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.business-type-grid > div{
  min-height:110px;

  display:flex;

  align-items:center;

  gap:14px;

  padding:18px;

  border:
    1px solid
    rgba(32,37,34,.08);

  border-radius:10px;

  background:var(--off-white);
}


.business-type-grid span{
  flex:0 0 auto;

  width:40px;
  height:40px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--cream);

  color:var(--terracotta);

  font-size:1rem;
}


.business-type-grid strong{
  color:var(--green-dark);

  font-size:.82rem;
}



/* =========================================================
   PROCESS
   ========================================================= */

.business-process{
  padding:90px 0;

  background:var(--cream);
}


.business-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;
}


.business-process-grid article{
  position:relative;

  min-height:220px;

  padding:25px;

  border:
    1px solid
    rgba(32,37,34,.09);

  border-radius:10px;

  background:var(--off-white);
}


.business-process-grid article > span{
  display:block;

  margin-bottom:34px;

  color:var(--gold);

  font-family:var(--font-display);

  font-size:1.15rem;
}


.business-process-grid h3{
  margin-bottom:9px;
}


.business-process-grid p{
  color:var(--gray);

  font-size:.77rem;
}



/* =========================================================
   FORM SECTION
   ========================================================= */

.business-form-section{
  padding:100px 0;

  background:var(--sand);
}


.business-form-layout{
  display:grid;

  grid-template-columns:
    minmax(280px,.7fr)
    minmax(0,1.3fr);

  gap:80px;

  align-items:start;
}



/* LEFT */

.business-form-intro{
  position:sticky;

  top:105px;
}


.business-form-intro h2{
  margin-bottom:15px;

  font-size:
    clamp(2rem,3vw,2.75rem);
}


.business-form-intro > p:not(.eyebrow){
  max-width:44ch;

  color:var(--gray);
}


.business-required-note{
  display:flex;

  align-items:flex-start;

  gap:13px;

  margin-top:32px;

  padding:20px;

  border-radius:10px;

  background:var(--green-dark);
}


.business-required-note > span{
  flex:0 0 auto;

  width:27px;
  height:27px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--gold);

  color:var(--green-dark);

  font-weight:900;
}


.business-required-note strong{
  display:block;

  margin-bottom:4px;

  color:#fff;

  font-size:.8rem;
}


.business-required-note p{
  color:
    rgba(255,255,255,.67);

  font-size:.7rem;
}


.business-form-help{
  margin-top:25px;

  padding-top:20px;

  border-top:
    1px solid
    rgba(32,37,34,.11);
}


.business-form-help strong{
  display:block;

  margin-bottom:7px;

  color:var(--green-dark);

  font-size:.78rem;
}


.business-form-help p{
  color:var(--gray);

  font-size:.73rem;
}



/* =========================================================
   FORM CARD
   ========================================================= */

.business-form-card{
  overflow:hidden;

  border:
    1px solid
    rgba(32,37,34,.08);

  border-radius:15px;

  background:var(--off-white);

  box-shadow:var(--shadow-md);
}


.business-form-card-head{
  padding:
    32px 34px 25px;

  border-bottom:
    1px solid
    rgba(32,37,34,.08);
}


.business-form-step{
  display:inline-flex;

  margin-bottom:10px;

  padding:5px 9px;

  border-radius:20px;

  background:var(--cream);

  color:var(--terracotta);

  font-size:.6rem;
  font-weight:800;

  letter-spacing:.06em;
  text-transform:uppercase;
}


.business-form-card-head h2{
  font-size:2rem;
}


.business-form-card-head p{
  margin-top:5px;

  color:var(--gray);

  font-size:.7rem;
}


.business-form-card-head p strong{
  color:var(--terracotta);
}



/* =========================================================
   FORM
   ========================================================= */

.business-listing-form{
  padding:34px;
}


.business-required-fields{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;
}


.business-form-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;
}


.business-field{
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:7px;
}


.business-field label{
  color:var(--green-dark);

  font-size:.77rem;
  font-weight:700;
}


.business-field label > span{
  color:var(--terracotta);
}


.business-field label small{
  margin-left:5px;

  color:var(--gray);

  font-size:.62rem;
  font-weight:500;
}


.business-field > small{
  color:var(--gray);

  font-size:.62rem;
  line-height:1.45;
}


.business-field input,
.business-field select,
.business-field textarea{
  width:100%;

  border:
    1px solid
    rgba(32,37,34,.16);

  border-radius:7px;

  outline:none;

  background:#fff;

  color:var(--charcoal);

  font:inherit;

  font-size:.85rem;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}


.business-field input,
.business-field select{
  min-height:49px;

  padding:0 13px;
}


.business-field textarea{
  resize:vertical;

  min-height:120px;

  padding:13px;
}


.business-field input:focus,
.business-field select:focus,
.business-field textarea:focus{
  border-color:var(--green);

  box-shadow:
    0 0 0 3px
    rgba(33,77,58,.08);
}



/* =========================================================
   PHONE
   ========================================================= */

.business-phone-input{
  display:grid;

  grid-template-columns:55px 1fr;

  overflow:hidden;

  border:
    1px solid
    rgba(32,37,34,.16);

  border-radius:7px;

  background:#fff;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}


.business-phone-input:focus-within{
  border-color:var(--green);

  box-shadow:
    0 0 0 3px
    rgba(33,77,58,.08);
}


.business-phone-input > span{
  display:flex;

  align-items:center;
  justify-content:center;

  border-right:
    1px solid
    rgba(32,37,34,.1);

  background:var(--cream);

  color:var(--green-dark);

  font-size:.78rem;
  font-weight:700;
}


.business-phone-input input{
  border:0;

  box-shadow:none !important;
}



/* =========================================================
   READY STATUS
   ========================================================= */

.business-ready-status{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:18px;

  padding:
    11px 13px;

  border-radius:7px;

  background:var(--cream);
}


.business-ready-dot{
  width:8px;
  height:8px;

  flex:0 0 auto;

  border-radius:50%;

  background:#b5a99a;

  transition:background .18s ease;
}


.business-ready-status p{
  color:var(--gray);

  font-size:.66rem;
}


.business-ready-status.is-ready{
  background:
    rgba(33,77,58,.08);
}


.business-ready-status.is-ready
.business-ready-dot{
  background:var(--green);
}


.business-ready-status.is-ready p{
  color:var(--green-dark);

  font-weight:700;
}



/* =========================================================
   OPTIONAL DETAILS
   ========================================================= */

.business-optional-details{
  margin-top:30px;

  border-top:
    1px solid
    rgba(32,37,34,.1);

  border-bottom:
    1px solid
    rgba(32,37,34,.1);
}


.business-optional-details > summary{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:20px 0;

  cursor:pointer;

  list-style:none;
}


.business-optional-details
summary::-webkit-details-marker{
  display:none;
}


.business-optional-details summary > span{
  display:flex;

  flex-direction:column;

  gap:2px;
}


.business-optional-details summary strong{
  color:var(--green-dark);

  font-size:.83rem;
}


.business-optional-details summary small{
  color:var(--gray);

  font-size:.63rem;
}


.business-optional-details summary i{
  color:var(--terracotta);

  font-style:normal;

  font-size:1.1rem;

  transition:transform .2s ease;
}


.business-optional-details[open]
summary i{
  transform:rotate(45deg);
}


.business-optional-inner{
  display:flex;

  flex-direction:column;

  gap:19px;

  padding:
    0 0 25px;
}



/* =========================================================
   DYNAMIC FIELDS
   ========================================================= */

.business-dynamic-fields{
  padding:18px;

  border-radius:9px;

  background:var(--cream);
}


.business-dynamic-fields[hidden],
.business-dynamic-group[hidden]{
  display:none !important;
}


.business-dynamic-group{
  display:flex;

  flex-direction:column;

  gap:16px;
}


.business-dynamic-title{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding-bottom:11px;

  border-bottom:
    1px solid
    rgba(32,37,34,.09);
}


.business-dynamic-title strong{
  color:var(--green-dark);

  font-size:.77rem;
}


.business-dynamic-title span{
  color:var(--gray);

  font-size:.61rem;
}



/* =========================================================
   SUBMIT
   ========================================================= */

.business-submit-area{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;

  margin-top:27px;
}


.business-submit-area > p{
  max-width:45ch;

  color:var(--gray);

  font-size:.62rem;
}


.business-submit-btn{
  flex:0 0 auto;
}



/* =========================================================
   HONEYPOT
   ========================================================= */

.business-honeypot{
  position:absolute !important;

  width:1px !important;
  height:1px !important;

  overflow:hidden !important;

  clip:
    rect(0,0,0,0) !important;

  white-space:nowrap !important;
}



/* =========================================================
   LOCAL FOCUS
   ========================================================= */

.business-local-focus{
  padding:95px 0;

  background:var(--green-dark);

  color:var(--off-white);
}


.business-local-layout{
  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap:85px;

  align-items:center;
}


.business-local-copy .eyebrow{
  color:var(--gold);
}


.business-local-copy .eyebrow::before{
  background:var(--gold);
}


.business-local-copy h2{
  max-width:13ch;

  margin-bottom:18px;

  color:#fff;

  font-size:
    clamp(2rem,3vw,2.8rem);
}


.business-local-copy > p:not(.eyebrow){
  max-width:55ch;

  margin-top:11px;

  color:
    rgba(255,255,255,.68);
}


.business-focus-compare{
  border-top:
    1px solid
    rgba(255,255,255,.15);
}


.business-focus-row{
  display:grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:25px;

  padding:20px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.15);
}


.business-focus-row span{
  color:
    rgba(255,255,255,.55);

  font-size:.7rem;
}


.business-focus-row strong{
  color:var(--gold);

  font-size:.82rem;
}



/* =========================================================
   AFTER SUBMIT
   ========================================================= */

.business-after{
  padding:85px 0;

  background:var(--cream);
}


.business-after-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:15px;
}


.business-after-grid article{
  padding:22px;

  border:
    1px solid
    rgba(32,37,34,.09);

  border-radius:8px;

  background:var(--off-white);
}


.business-after-grid strong{
  display:block;

  margin-bottom:8px;

  color:var(--green-dark);

  font-family:var(--font-display);

  font-size:1rem;
}


.business-after-grid p{
  color:var(--gray);

  font-size:.72rem;
}



/* =========================================================
   FAQ
   ========================================================= */

.business-faq{
  padding:95px 0;

  background:var(--off-white);
}


.business-faq-layout{
  display:grid;

  grid-template-columns:
    .7fr 1.3fr;

  gap:80px;

  align-items:start;
}


.business-faq-intro{
  position:sticky;

  top:105px;
}


.business-faq-intro h2{
  margin-bottom:13px;

  font-size:
    clamp(2rem,3vw,2.7rem);
}


.business-faq-intro p:not(.eyebrow){
  max-width:40ch;

  color:var(--gray);
}


.business-faq-list{
  border-top:
    1px solid
    rgba(32,37,34,.12);
}


.business-faq-list details{
  border-bottom:
    1px solid
    rgba(32,37,34,.12);
}


.business-faq-list summary{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:20px 0;

  color:var(--green-dark);

  font-family:var(--font-display);

  font-size:1.03rem;
  font-weight:600;

  cursor:pointer;

  list-style:none;
}


.business-faq-list
summary::-webkit-details-marker{
  display:none;
}


.business-faq-list summary span{
  color:var(--terracotta);

  font-family:var(--font-body);

  transition:transform .2s ease;
}


.business-faq-list
details[open] summary span{
  transform:rotate(45deg);
}


.business-faq-list details > div{
  padding:
    0 0 21px;
}


.business-faq-list p{
  color:var(--gray);

  font-size:.83rem;
}


.business-faq-list p + p{
  margin-top:10px;
}



/* =========================================================
   CONTACT CTA
   ========================================================= */

.business-contact-cta{
  padding:70px 0;

  background:var(--sand);
}


.business-contact-inner{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:50px;
}


.business-contact-inner > div{
  max-width:650px;
}


.business-contact-inner h2{
  margin-bottom:9px;

  font-size:
    clamp(1.9rem,3vw,2.5rem);
}


.business-contact-inner p:not(.eyebrow){
  color:var(--gray);
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .business-benefits-grid,
  .business-type-grid,
  .business-process-grid,
  .business-after-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .business-form-layout{
    grid-template-columns:
      .8fr 1.2fr;

    gap:45px;
  }


  .business-local-layout{
    gap:50px;
  }

}



/* =========================================================
   SMALL TABLET
   ========================================================= */

@media(max-width:850px){

  .business-benefit-strip-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .business-benefit-strip-grid > div{
    border-bottom:
      1px solid
      rgba(255,255,255,.1);
  }


  .business-form-layout,
  .business-local-layout,
  .business-faq-layout{
    grid-template-columns:1fr;

    gap:45px;
  }


  .business-form-intro,
  .business-faq-intro{
    position:static;
  }


  .business-contact-inner{
    align-items:flex-start;

    flex-direction:column;

    gap:23px;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .business-hero{
    min-height:540px;
  }


  .business-hero-content{
    padding:
      65px 0 48px;
  }


  .business-hero h1{
    font-size:
      clamp(2.15rem,10vw,3rem);
  }


  .business-hero-lede{
    font-size:.9rem;
  }


  .business-hero-actions{
    flex-direction:column;

    align-items:stretch;
  }


  .business-hero-actions .btn{
    justify-content:center;
  }


  .business-benefit-strip-grid > div{
    min-height:78px;

    padding:14px;
  }


  .business-benefit-strip strong{
    font-size:.66rem;
  }


  .business-benefit-strip span{
    font-size:.57rem;
  }


  .business-benefits,
  .business-process,
  .business-local-focus,
  .business-faq{
    padding:
      70px 0;
  }


  /* Keep informational cards compact:
     2 cards per row on mobile */

  .business-benefits-grid,
  .business-type-grid,
  .business-process-grid,
  .business-after-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:9px;
  }


  .business-benefits-grid article{
    min-height:220px;

    padding:16px;
  }


  .business-benefit-number{
    margin-bottom:24px;

    font-size:.85rem;
  }


  .business-benefits-grid h3{
    font-size:.94rem;
  }


  .business-benefits-grid p{
    font-size:.66rem;
  }


  .business-type-grid > div{
    min-height:86px;

    gap:9px;

    padding:12px;
  }


  .business-type-grid span{
    width:31px;
    height:31px;

    font-size:.75rem;
  }


  .business-type-grid strong{
    font-size:.67rem;
  }


  .business-process-grid article{
    min-height:185px;

    padding:15px;
  }


  .business-process-grid article > span{
    margin-bottom:23px;

    font-size:.85rem;
  }


  .business-process-grid h3{
    font-size:.95rem;
  }


  .business-process-grid p{
    font-size:.64rem;
  }


  .business-form-section{
    padding:
      70px 0;
  }


  .business-form-card-head{
    padding:
      25px 18px 20px;
  }


  .business-form-card-head h2{
    font-size:1.65rem;
  }


  .business-listing-form{
    padding:22px 18px;
  }


  /* Form fields become 1 column on phones */

  .business-required-fields,
  .business-form-grid{
    grid-template-columns:1fr;
  }


  .business-submit-area{
    align-items:stretch;

    flex-direction:column;
  }


  .business-submit-btn{
    width:100%;

    justify-content:center;
  }


  .business-local-copy h2{
    max-width:none;
  }


  .business-focus-row{
    grid-template-columns:1fr;

    gap:5px;
  }


  .business-after-grid article{
    padding:14px;
  }


  .business-after-grid strong{
    font-size:.85rem;
  }


  .business-after-grid p{
    font-size:.62rem;
  }


  .business-contact-cta{
    padding:55px 0;
  }

}



/* =========================================================
   VERY SMALL
   ========================================================= */

@media(max-width:390px){

  .business-benefits-grid,
  .business-type-grid,
  .business-process-grid,
  .business-after-grid{
    gap:7px;
  }


  .business-benefits-grid article{
    padding:13px;
  }


  .business-benefits-grid h3{
    font-size:.85rem;
  }


  .business-benefits-grid p{
    font-size:.61rem;
  }


  .business-process-grid article{
    padding:13px;
  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .business-field input,
  .business-field select,
  .business-field textarea,
  .business-phone-input,
  .business-optional-details summary i,
  .business-ready-dot{
    transition:none !important;
  }

}