/* LPJH Join Our Portfolio — assets/css/join.css
   Enqueue AFTER brand-tokens.css, homepage.css, location.css AND owner.css:
   reuses .hp bands, .loc-hero, .loc-prose and the .hs-form / .hs-field controls.
   Tokens only.

   The second half of this file maps GRAVITY FORMS output onto those controls.
   All of it is scoped to .jp-app so no other form on the site is affected.
*/
/* ============================================================
   LPJH — Join Our Portfolio (the application)
   After homepage.css + location.css + hs.css. Reuses .hp bands, .loc-hero,
   .loc-prose and the .hs-form / .hs-field controls.
   Prefix: .jp-
   ============================================================ */

/* ---------- STICKY ENABLER ----------
   Cassio wraps every page in .page-wrapper > .page-wrapper__content, both set to
   overflow:hidden. That makes each a (non-scrolling) scroll container, so the
   sidebar's position:sticky sticks to a box that never scrolls and thus never
   pins. overflow:clip clips identically (contains any horizontal bleed) WITHOUT
   creating a scroll container, so sticky resolves against the viewport again.
   Scoped to body.lpjh-join (added in lpjh-join-enqueue.php); the page already
   runs native scroll (header.php native-scroll template list), which sticky
   also requires. */
body.lpjh-join .page-wrapper,
body.lpjh-join .page-wrapper__content{overflow:clip}

/* ---------- FIT ---------- */
.jp-fit{display:grid;grid-template-columns:1fr 1.25fr;gap:4rem;align-items:start}
.jp-fit__intro{position:sticky;top:6.5rem;align-self:start}
.jp-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--tr-border)}
.jp-col{padding:1.5rem 2rem 0 0}
.jp-cols>.jp-col:last-child{padding:1.5rem 0 0 2rem;border-left:1px solid var(--tr-border)}
.jp-col__h{margin:0 0 1.1rem;font-family:var(--tr-font-body);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.jp-col--yes .jp-col__h{color:var(--tr-accent)}
.jp-col--no .jp-col__h{color:var(--tr-stone-400)}
.jp-col ul{list-style:none;margin:0;padding:0}
.jp-col li{position:relative;padding:.6rem 0 .6rem 1.35rem;font-family:var(--tr-font-body);font-size:.86rem;line-height:1.65;color:var(--tr-text)}
.jp-col li::before{content:"";position:absolute;left:0;top:1.2rem;width:.55rem;height:1px}
.jp-col--yes li::before{background:var(--tr-accent)}
.jp-col--no li::before{background:var(--tr-stone-300)}
.jp-fit__note{margin:2rem 0 0;padding-top:1.2rem;border-top:1px solid var(--tr-border);font-family:var(--tr-font-display);font-size:1.05rem;font-style:italic;line-height:1.55;color:var(--tr-text-muted);text-wrap:pretty}

/* ---------- APPLICATION ---------- */
.jp-app{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start}
.jp-proc{position:sticky;top:6.5rem;align-self:start}
.jp-proc__h{margin:0 0 1.35rem;font-family:var(--tr-font-body);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-accent)}
.jp-proc__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--tr-border)}
.jp-proc__list li{display:grid;grid-template-columns:2.25rem 1fr;gap:.9rem;padding:1.05rem 0;border-bottom:1px solid var(--tr-border)}
.jp-proc__n{font-family:var(--tr-font-display);font-size:1.1rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--tr-accent)}
.jp-proc__list b{display:block;margin-bottom:.2rem;font-family:var(--tr-font-display);font-size:1.05rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-heading)}
.jp-proc__list p{margin:0;font-family:var(--tr-font-body);font-size:.8rem;line-height:1.6;color:var(--tr-text-muted);text-wrap:pretty}

/* Progress */
.jp-prog{display:flex;align-items:stretch;gap:0;margin-bottom:2.5rem;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border)}
.jp-prog__item{flex:1 1 0;display:flex;flex-direction:column;gap:.3rem;padding:.95rem 1.1rem;border-left:1px solid var(--tr-border);background:none;text-align:left;cursor:default}
.jp-prog__item+.jp-prog__item{border-left:1px solid var(--tr-border)}
.jp-prog>.jp-prog__item:first-child{border-left:0}
/* The bar is a bordered container, so its contents are padded INSIDE it — the
   first cell keeps its padding rather than sitting flush, or the active linen fill
   runs right up to the text and reads as clipped. */
.jp-prog__item:first-child{padding-left:1.1rem}
.jp-prog__n{font-family:var(--tr-font-body);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400)}
.jp-prog__l{font-family:var(--tr-font-display);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-stone-400);transition:color .26s ease}
.jp-prog__item.is-current{background:var(--tr-linen)}
.jp-prog__item.is-current .jp-prog__n,.jp-prog__item.is-current .jp-prog__l{color:var(--tr-accent)}
.jp-prog__item.is-done{cursor:pointer}
.jp-prog__item.is-done .jp-prog__l{color:var(--tr-heading)}
.jp-prog__item.is-done:hover .jp-prog__l{color:var(--tr-accent)}

/* Checkbox group — the only control hs.css does not already cover */
.jp-checks{display:flex;flex-wrap:wrap;gap:.6rem}
.jp-check{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border:1px solid var(--tr-border);cursor:pointer;font-family:var(--tr-font-body);font-size:.82rem;color:var(--tr-text);transition:border-color .26s ease,background-color .26s ease,color .26s ease}
.jp-check:hover{border-color:var(--tr-accent)}
.jp-check input{position:absolute;opacity:0;width:0;height:0}
.jp-check__box{position:relative;width:.85rem;height:.85rem;border:1px solid var(--tr-stone-300);flex:0 0 auto;transition:border-color .26s ease,background-color .26s ease}
.jp-check input:checked+.jp-check__box{background:var(--tr-accent);border-color:var(--tr-accent)}
.jp-check input:checked+.jp-check__box::after{content:"";position:absolute;left:2px;top:4px;width:.35rem;height:.18rem;border-left:1.5px solid var(--tr-on-accent);border-bottom:1.5px solid var(--tr-on-accent);transform:rotate(-45deg)}
.jp-check input:focus-visible+.jp-check__box{outline:2px solid var(--tr-focus);outline-offset:2px}
.jp-check:has(input:checked){border-color:var(--tr-accent)}
.jp-field__help{margin:.35rem 0 0;font-family:var(--tr-font-body);font-size:.74rem;line-height:1.55;color:var(--tr-stone-400)}

/* Nav */
.jp-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;margin-top:1rem;flex-wrap:wrap}
.jp-nav__back{background:none;border:0;padding:0;cursor:pointer;font-family:var(--tr-font-body);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-stone-500);transition:color .26s ease}
.jp-nav__back:hover{color:var(--tr-accent)}
.jp-nav__fine{flex:1 1 100%;margin:0;font-family:var(--tr-font-body);font-size:.72rem;line-height:1.6;color:var(--tr-stone-400)}

/* Sent */
.jp-sent{padding:2.5rem 0;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border)}
.jp-sent h3{margin:0 0 .7rem;font-family:var(--tr-font-display);font-size:2rem;font-weight:500;letter-spacing:-.015em;color:var(--tr-heading)}
.jp-sent p{margin:0;font-family:var(--tr-font-body);font-size:.95rem;line-height:1.8;color:var(--tr-text-muted);max-width:38em}

/* ---------- OWNER TESTIMONIAL ---------- */
.jp-quote{max-width:44em}
.jp-quote__t{margin:0;font-family:var(--tr-font-display);font-size:2rem;font-weight:500;font-style:italic;line-height:1.4;letter-spacing:-.01em;color:var(--tr-cream);text-wrap:pretty}
.jp-quote__a{margin:1.5rem 0 0;font-family:var(--tr-font-body);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-gold-pale)}
/* ---------- CLOSE ---------- */
.jp-close{display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.jp-close__h{margin:0;font-family:var(--tr-font-display);font-size:2rem;font-weight:500;line-height:1.1;letter-spacing:-.015em;color:var(--tr-heading)}
.jp-close__p{margin:.6rem 0 0;font-family:var(--tr-font-body);font-size:.92rem;line-height:1.75;color:var(--tr-text-muted);max-width:36em}
.jp-close__tel{font-family:var(--tr-font-display);font-size:2rem;font-weight:500;letter-spacing:-.015em;color:var(--tr-accent);text-decoration:none;white-space:nowrap;transition:color .26s ease}
.jp-close__tel:hover{color:var(--tr-accent-hover)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .jp-fit,.jp-app{grid-template-columns:1fr;gap:2.5rem}
  .jp-fit__intro,.jp-proc{position:static;top:auto}
  .jp-proc__list{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
}
@media (max-width:899px){
  .jp-cols{grid-template-columns:1fr}
  .jp-cols>.jp-col:last-child{padding:1.5rem 0 0;border-left:0;border-top:1px solid var(--tr-border)}
  .jp-col{padding-right:0}
  .jp-proc__list{grid-template-columns:1fr}
  .jp-prog{display:grid;grid-template-columns:repeat(3,1fr)}
  .jp-prog__item{padding:.8rem .6rem}
  .jp-prog__item:first-child{padding-left:.6rem}
  .jp-prog__l{font-size:.9rem}
  .jp-quote__t{font-size:1.5rem}
  .jp-close__h,.jp-close__tel{font-size:1.6rem}
}

/* ---------- GRAVITY FORMS MAPPING ----------
   The form is configured in Gravity Forms, so its output has to inherit the
   design's controls rather than the plugin's defaults. Scoped to .jp-app so no
   other form on the site is affected. */
.jp-app .gform_wrapper{margin:0}
.jp-app .gform_wrapper form{display:flex;flex-wrap:wrap;gap:1.5rem 1.25rem}
.jp-app .gform_wrapper .gform_fields{display:flex;flex-wrap:wrap;gap:1.5rem 1.25rem;width:100%;margin:0;padding:0;list-style:none;grid-template-columns:none!important}
.jp-app .gform_wrapper .gfield{display:flex;flex-direction:column;gap:.45rem;flex:1 1 100%;min-width:0;margin:0;padding:0;grid-column:auto!important}
.jp-app .gform_wrapper .gfield.jp-w50{flex:1 1 calc(50% - .625rem)}
.jp-app .gform_wrapper .gfield.jp-w33{flex:1 1 calc(33.333% - .834rem)}
.jp-app .gform_wrapper .gfield.jp-w67{flex:1 1 calc(66.666% - .417rem)}
.jp-app .gform_wrapper .gfield_label{font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-stone-400);margin:0}
.jp-app .gform_wrapper .gfield_required{color:var(--tr-accent)}
.jp-app .gform_wrapper input[type=text],.jp-app .gform_wrapper input[type=email],.jp-app .gform_wrapper input[type=tel],.jp-app .gform_wrapper input[type=number],.jp-app .gform_wrapper select,.jp-app .gform_wrapper textarea{width:100%;padding:.8rem 0;background:none;border:0;border-bottom:1px solid var(--tr-border);border-radius:0;font-family:var(--tr-font-body);font-size:.95rem;color:var(--tr-heading);box-shadow:none;transition:border-color .26s ease}
.jp-app .gform_wrapper textarea{resize:vertical;min-height:4.5rem;line-height:1.6}
.jp-app .gform_wrapper select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--tr-stone-400) 50%),linear-gradient(135deg,var(--tr-stone-400) 50%,transparent 50%);background-position:calc(100% - 9px) 1.35rem,calc(100% - 5px) 1.35rem;background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:1.5rem}
.jp-app .gform_wrapper input:focus,.jp-app .gform_wrapper select:focus,.jp-app .gform_wrapper textarea:focus{outline:none;border-bottom-color:var(--tr-accent);box-shadow:none}
.jp-app .gform_wrapper .gfield_description{margin:.35rem 0 0;padding:0;font-family:var(--tr-font-body);font-size:.74rem;line-height:1.55;color:var(--tr-stone-400)}

/* Checkbox group — matches the design's chip control. */
.jp-app .gform_wrapper .gfield_checkbox{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.jp-app .gform_wrapper .gfield_checkbox .gchoice{margin:0}
.jp-app .gform_wrapper .gfield_checkbox label{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border:1px solid var(--tr-border);cursor:pointer;font-family:var(--tr-font-body);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--tr-text);transition:border-color .26s ease,color .26s ease}
.jp-app .gform_wrapper .gfield_checkbox label:hover{border-color:var(--tr-accent)}
.jp-app .gform_wrapper .gfield_checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;width:.85rem;height:.85rem;margin:0;border:1px solid var(--tr-stone-300);border-radius:0;flex:0 0 auto;position:relative;cursor:pointer;transition:background-color .26s ease,border-color .26s ease}
.jp-app .gform_wrapper .gfield_checkbox input[type=checkbox]:checked{background:var(--tr-accent);border-color:var(--tr-accent)}
.jp-app .gform_wrapper .gfield_checkbox input[type=checkbox]:checked::after{content:"";position:absolute;left:2px;top:3px;width:.35rem;height:.18rem;border-left:1.5px solid var(--tr-on-accent);border-bottom:1.5px solid var(--tr-on-accent);transform:rotate(-45deg)}
.jp-app .gform_wrapper .gfield_checkbox input[type=checkbox]:focus-visible{outline:2px solid var(--tr-focus);outline-offset:2px}

/* Buttons and footer */
.jp-app .gform_wrapper .gform_footer,.jp-app .gform_wrapper .gform_page_footer{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;width:100%;margin:1rem 0 0;padding:0;border:0}
.jp-app .gform_wrapper .gform_button,.jp-app .gform_wrapper .gform_next_button{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding:0 1.75rem;background:var(--tr-accent);border:1px solid var(--tr-accent);border-radius:0;color:var(--tr-on-accent);font-family:var(--tr-font-body);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .26s ease,border-color .26s ease}
.jp-app .gform_wrapper .gform_button:hover,.jp-app .gform_wrapper .gform_next_button:hover{background:var(--tr-accent-hover);border-color:var(--tr-accent-hover)}
.jp-app .gform_wrapper .gform_previous_button{background:none;border:0;padding:0;height:auto;color:var(--tr-stone-500);font-family:var(--tr-font-body);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .26s ease}
.jp-app .gform_wrapper .gform_previous_button:hover{color:var(--tr-accent)}

/* Native multi-page progress bar, restyled as the design's step bar. */
.jp-app .gform_wrapper .gf_progressbar_wrapper{margin:0 0 2.5rem;padding:0}
.jp-app .gform_wrapper .gf_progressbar_title{font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400);margin:0 0 .6rem}
.jp-app .gform_wrapper .gf_progressbar{background:var(--tr-linen);border-radius:0;height:2px;overflow:hidden}
.jp-app .gform_wrapper .gf_progressbar_percentage{background:var(--tr-accent);border-radius:0;height:2px}
.jp-app .gform_wrapper .gf_progressbar_percentage span{display:none}

/* Validation and confirmation */
.jp-app .gform_wrapper .gfield_error input,.jp-app .gform_wrapper .gfield_error select,.jp-app .gform_wrapper .gfield_error textarea{border-bottom-color:var(--tr-error)}
.jp-app .gform_wrapper .validation_message{margin:.35rem 0 0;padding:0;background:none;border:0;font-family:var(--tr-font-body);font-size:.74rem;line-height:1.55;color:var(--tr-error)}
.jp-app .gform_wrapper .gform_validation_errors{margin:0 0 1.5rem;padding:1rem 1.25rem;background:var(--tr-linen);border:0;border-top:1px solid var(--tr-error);border-radius:0;box-shadow:none}
.jp-app .gform_wrapper .gform_validation_errors h2{margin:0;font-family:var(--tr-font-display);font-size:1.1rem;font-weight:500;color:var(--tr-heading)}
.jp-app .gform_confirmation_wrapper{padding:2.5rem 0;border-top:1px solid var(--tr-border);border-bottom:1px solid var(--tr-border)}
.jp-app .gform_confirmation_message{font-family:var(--tr-font-body);font-size:.95rem;line-height:1.8;color:var(--tr-text-muted);max-width:38em}
.jp-app .gform_confirmation_message strong{display:block;margin-bottom:.7rem;font-family:var(--tr-font-display);font-size:2rem;font-weight:500;letter-spacing:-.015em;color:var(--tr-heading)}

@media (max-width:899px){
  .jp-app .gform_wrapper .gfield.jp-w50,.jp-app .gform_wrapper .gfield.jp-w33,.jp-app .gform_wrapper .gfield.jp-w67{flex:1 1 100%}
}

/* Native application form (Gravity Forms fallback) — flexes within .hs-form */
.jp-form__step{flex:1 1 100%;margin:1.75rem 0 .25rem;padding-top:1.5rem;border-top:1px solid var(--tr-border);font-family:var(--tr-font-body);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-accent)}
.jp-form>.jp-form__step:first-of-type{margin-top:0;padding-top:0;border-top:0}
.jp-field--full{flex:1 1 100%}
.jp-form__actions{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:1rem}
.jp-form__actions .jp-nav__fine{margin:0}
.jp-thanks{padding:.5rem 0}
.jp-thanks .jp-proc__h{margin:0 0 .5rem}