/* V3 Partners: the Gabriel Network page. A full-screen photo hero, why Gabriel, five ways to join (every audience's
   criteria in view), frontier care (full-bleed), and the three-step application. */

/* ---------- 1. Hero: the whole first screen, as on the home, so the fold falls on the photo's edge ---------- */
.p-hero.hero-page{min-height:max(640px,100svh)}
.p-hero .hero-bg img{object-position:50% 32%}
/* the client's ivory jacket sits under the copy: a deeper smoke on the left and at the foot */
.p-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.18) 9%,rgba(12,16,18,0) 18%),linear-gradient(90deg,rgba(14,18,21,.8) 0%,rgba(14,18,21,.54) 34%,rgba(14,18,21,.1) 62%,rgba(14,18,21,0) 100%),linear-gradient(0deg,rgba(17,21,24,.7) 0%,rgba(17,21,24,0) 44%)}
@media (max-width:760px){
  .p-hero.hero-page{min-height:max(620px,100svh)}
  .p-hero .hero-bg img{object-position:50% 30%}
  .p-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,.18) 9%,rgba(12,16,18,0) 18%),linear-gradient(0deg,rgba(12,16,18,.95) 0%,rgba(12,16,18,.84) 48%,rgba(12,16,18,.42) 70%,rgba(12,16,18,0) 90%)}
}

/* ---------- 2. Why Gabriel: three text columns. It follows the photo on dark, so it starts sooner and the
   chapter rule is drawn brighter than the shared hairline, where it would vanish against the photo's smoke ---------- */
.p-why{padding-top:clamp(72px,7vw,112px)}
section[data-tone=dark]:not(.photo):not(.logos)+section.p-why[data-tone=dark]:not(.photo){border-top-color:rgba(240,243,241,.16)}
.p-why .ln{display:block}
.why-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(48px,5vw,72px)}
.why-list li{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--line)}
.why-list h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.why-list p{font-size:var(--fs-17);color:var(--silver);max-width:24em;text-wrap:pretty}
@media (max-width:860px){.why-list{grid-template-columns:1fr;gap:28px}}

/* ---------- 3. Five ways to join: an index of the five types the form offers, every audience's criteria in view ---------- */
.ways{margin-top:clamp(48px,5vw,72px);border-top:1px solid var(--rule)}
.way{display:grid;grid-template-columns:72px minmax(0,3.2fr) minmax(0,6fr) minmax(0,2.8fr);grid-template-areas:"n t d a";column-gap:clamp(20px,2.4vw,40px);align-items:baseline;padding:30px 0;border-bottom:1px solid var(--rule)}
.way-n{grid-area:n;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;color:var(--emerald)}
.way-t{grid-area:t;font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.way-d{grid-area:d}
.way-d p{font-size:var(--fs-17);line-height:1.55;color:var(--ash);max-width:34em;text-wrap:pretty}
.way-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.way .arrow-link{grid-area:a;justify-self:end;min-height:44px;margin-top:-12px;text-align:right}
@media (max-width:1100px){
  .way{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"n t" ". d" ". a";row-gap:10px;padding:26px 0}
  .way .arrow-link{justify-self:start;margin-top:0;text-align:left}
}
/* phones: the number stays beside the name; the criteria and the link take the full width */
@media (max-width:760px){.way{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"n t" "d d" "a a";row-gap:12px}}

/* ---------- 4. Frontier care: full-bleed ripple, the list on the smoky side ---------- */
.p-frontier{align-items:stretch}
.fr-media{position:absolute;inset:0}
.p-frontier .photo-bg img{object-position:70% 50%}
.p-frontier .photo-shade{background:linear-gradient(90deg,rgba(12,16,18,.9) 0%,rgba(12,16,18,.76) 36%,rgba(12,16,18,.24) 66%,rgba(12,16,18,.08) 100%),linear-gradient(0deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,0) 30%),linear-gradient(180deg,rgba(12,16,18,.4) 0%,rgba(12,16,18,0) 22%)}
.fr-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(40px,4vw,56px)}
.fr-in>*{width:100%;max-width:600px}
.fr-head{gap:22px}
.fr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
.fr-group h3{padding-bottom:12px;border-bottom:1px solid rgba(240,243,241,.2);font-family:var(--mono);font-size:var(--fs-12);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.fr-group ul{padding-top:10px}
.fr-group li{padding:5px 0;font-size:var(--fs-17);line-height:1.35;color:var(--pearl)}
/* expansions of PEMF, TMS and EWOT: a quiet gloss on its own line, so the list keeps one name per line */
.fr-x{display:block;margin-top:2px;font-size:var(--fs-13);line-height:1.4;color:var(--silver)}
.fr-caveat{margin-top:calc(-1 * clamp(12px,1.6vw,24px));padding-top:18px;border-top:1px solid rgba(240,243,241,.2);font-size:var(--fs-15);line-height:1.6;color:var(--silver);text-wrap:pretty}
.fr-foot{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fr-note{font-size:var(--fs-15);color:var(--silver);text-wrap:pretty}
/* tablets and phones: the photo becomes a block above the list, the heading rising into its smoke */
@media (max-width:960px){
  .p-frontier{display:block;min-height:0;background:var(--abyss)}
  .fr-media{position:relative;inset:auto;aspect-ratio:3/2;overflow:hidden}
  .p-frontier .photo-bg img{object-position:60% 50%}
  .p-frontier .photo-shade{background:linear-gradient(0deg,var(--abyss) 0%,rgba(17,21,24,.8) 28%,rgba(17,21,24,0) 58%),linear-gradient(180deg,rgba(12,16,18,.45) 0%,rgba(12,16,18,0) 24%)}
  .fr-in{margin-top:-112px;padding-top:0;gap:40px}
  .fr-in>*{max-width:none}
  .fr-head{max-width:640px}
}
@media (max-width:760px){
  .fr-media{aspect-ratio:4/5}
  .p-frontier .photo-bg img{object-position:50% 50%}
  .fr-in{gap:36px}
  .fr-grid{gap:28px 20px}
  .fr-group li{font-size:var(--fs-15)}
  .fr-group h3{letter-spacing:.1em}
  .fr-foot .btn{width:100%;height:54px}
}
/* narrow phones: one column, so every modality stays on one line */
@media (max-width:520px){.fr-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- 5. Apply: the heading holds still, the form card moves one short step at a time ---------- */
.p-apply [hidden]{display:none!important}  /* the steps, buttons and thank-you state switch with the hidden attribute */
.apply-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(40px,6vw,112px);align-items:start}
.apply-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
.apply-head{gap:22px}
.apply-aside{padding-top:24px;border-top:1px solid var(--rule);max-width:28em}
.apply-main{min-width:0}
.pf-wrap{position:relative;padding:clamp(24px,3.4vw,44px);border-radius:18px;border:1px solid rgba(200,206,206,.8);background:var(--paper);box-shadow:0 30px 60px -46px rgba(17,21,24,.45)}
.pf-meter{height:2px;border-radius:2px;background:var(--rule);overflow:hidden}
.pf-meter span{display:block;height:100%;width:33.33%;background:var(--emerald);transition:width .5s var(--ease-out)}
.pf-meta{display:flex;justify-content:space-between;margin:12px 0 36px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.pf-step h3{margin-bottom:24px;font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2;outline:none;text-wrap:balance}
.pf-step:not([hidden]){animation:pfIn .45s var(--ease-out) both}
@keyframes pfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pf-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;margin:0;padding:0;border:0}
.pf-types label{position:relative;cursor:pointer}
.pf-types .pf-wide{grid-column:1/-1}
.pf-types input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pf-types span{display:flex;align-items:center;min-height:64px;padding:0 20px;border-radius:12px;border:1px solid var(--rule);background:#fff;font-size:var(--fs-17);color:var(--ink);transition:border-color .15s,background .15s,color .15s}
.pf-types span::after{content:"→";margin-left:auto;padding-left:12px;color:var(--ash);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.pf-types label:hover span{border-color:var(--ink)}
.pf-types label:hover span::after,.pf-types input:checked+span::after{opacity:1;transform:none}
.pf-types input:checked+span{background:var(--obsidian);border-color:var(--obsidian);color:var(--pearl)}
.pf-types input:checked+span::after{color:var(--pearl)}
.pf-types input:focus-visible+span{outline:2px solid var(--emerald);outline-offset:3px}
.pf-wrap .field>label{font-size:var(--fs-13);font-weight:500;color:var(--ink)}
.pf-span{grid-column:1/-1}
.pf-wrap .textarea{min-height:104px}
.pf-wrap [aria-invalid=true]{border-color:#a1473a}
.pf-err{font-size:var(--fs-13);color:#a1473a}
.pf-step>.pf-err{margin-top:10px}
.pf-more{margin-top:20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pf-more summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;list-style:none;font-size:var(--fs-15);color:var(--ink)}
.pf-more summary::-webkit-details-marker{display:none}
.pf-more summary span{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.pf-more summary span::after{content:" +"}
.pf-more[open] summary span::after{content:" \2212"}
.pf-more[open] .form-grid{padding-bottom:22px}
.pf-consent{margin-top:24px}
.pf-consent a{color:var(--ink);text-underline-offset:3px}
.pf-step>.pf-consent+.pf-err{margin-top:8px}
.pf-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:32px}
.pf-actions .btn{min-width:200px}
.pf-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:auto;padding:0;border:0;background:none;color:var(--ash);font:inherit;font-size:var(--fs-15);cursor:pointer}
.pf-back:hover{color:var(--ink)}
.pf-submit-error{margin:0 0 14px;font-size:var(--fs-15);color:#9b2c2c}
/* the spam trap: never on screen, never announced */
.pf-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pf-success{display:flex;flex-direction:column;align-items:flex-start;gap:12px;outline:none}
.pf-success h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.pf-success p:not(.eyebrow){font-size:var(--fs-17);color:var(--ash);max-width:30em;text-wrap:pretty}
.pf-success .pf-success-note{color:var(--ink)}
.pf-success-note strong{font-weight:500}
.pf-success .btn{margin-top:14px}
.pf-help{font-size:var(--fs-15);color:var(--ash)}
.pf-help a{color:var(--ink);text-underline-offset:3px}
.pf-disclosure{margin-top:10px;text-wrap:pretty}
@media (max-width:1100px){
  .apply-grid{grid-template-columns:1fr;gap:clamp(40px,5vw,56px)}
  .apply-side{display:contents}
  .apply-head{order:1}
  .apply-main{order:2;max-width:720px}
  .apply-aside{order:3;margin-top:-12px;padding-top:0;border-top:0}
}
@media (max-width:760px){
  .pf-types{grid-template-columns:1fr;gap:8px}
  .pf-types span{min-height:56px}
  .pf-actions{flex-direction:column-reverse;align-items:stretch;gap:6px}
  .pf-actions .btn{width:100%;min-width:0;height:54px}
  .pf-back{margin:0;justify-content:center}
}

/* ---------- Phones under 360px: the sticky bar keeps one line of label beside its button ---------- */
@media (max-width:359px){.sticky-cta .sc-t span{display:none}}

@media (prefers-reduced-motion:reduce){
  .pf-meter span{transition:none}
  .pf-step:not([hidden]){animation:none}
}