/* ===========================================================================
   List your property, the partner page.
   2026-08-17, build lane.

   Kept out of salus.css deliberately. This is the only page that uses any of
   it, and salus.css was being edited by another lane at the same time. It is
   copied to /assets/partner.css and loaded by that one page, the same way the
   map component loads map.css.

   Tokens only. No new colours, no new typefaces, no new radii.
   =========================================================================== */

/* ---------------------------------------------------------------- hero */
.pn-hero{position:relative;background:var(--forest-deep);overflow:hidden}
.pn-hero-media{position:absolute;inset:0}
/* The photograph carries the band, so it is drawn at full strength and the
   scrim does the contrast work. Dialled back from opacity .5 with a .92 scrim
   on top, which looked at a glance exactly like the broken image fault this
   project has already shipped twice. Text sits on both halves here, so the
   scrim never drops below .58, which is where white copy stops being
   comfortable against a bright sky. */
.pn-hero-media img{width:100%;height:100%;object-fit:cover}
.pn-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(31,42,32,.90),rgba(31,42,32,.66) 55%,rgba(31,42,32,.60));
}
.pn-hero .wrap{position:relative;padding-top:84px;padding-bottom:84px}
.pn-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.pn-hero h1{color:#fff;margin-bottom:18px}
.pn-hero .pn-sub{
  font-size:19px;line-height:31px;color:rgba(255,255,255,.82);
  max-width:56ch;margin-bottom:30px;
}
.pn-hero .eyebrow{color:var(--sage)}
.pn-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* .btn-secondary is a forest outline on a forest word, which is invisible on
   the two dark bands. Same button, inverted. */
.btn-secondary.btn-on-dark{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-secondary.btn-on-dark:hover{background:#fff;color:var(--forest)}

/* The four benefit lines that sit beside the headline. */
.pn-benefits{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pn-benefits li{
  display:flex;gap:14px;align-items:flex-start;
  padding:17px 0;border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9);font-size:16px;line-height:25px;
}
.pn-benefits li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.pn-benefits svg{
  width:19px;height:19px;flex:0 0 19px;margin-top:3px;
  stroke:var(--gold);fill:none;stroke-width:1.6;
}
.pn-benefits b{display:block;font-weight:500;color:#fff}
.pn-benefits span{display:block;font-size:14px;line-height:22px;color:rgba(255,255,255,.66)}

/* ---------------------------------------------------------- trust band */
.pn-trust{background:var(--cream);border-bottom:1px solid var(--line)}
.pn-trust .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px 40px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px;
}
.pn-trust .pn-trust-lead{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0;
}
.pn-marks{display:flex;gap:14px 34px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.pn-marks li{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--forest);
}
.pn-marks svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.6;flex:0 0 17px}

/* ------------------------------------------------------- the two routes */
.pn-routes{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pn-route{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 38px 34px;background:#fff;display:flex;flex-direction:column;
  transition:box-shadow .18s ease,transform .18s ease;
}
.pn-route:hover{box-shadow:var(--shadow-raise);transform:translateY(-2px)}
.pn-route .pn-tag{
  align-self:flex-start;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);background:var(--cream);
  border-radius:var(--pill);padding:6px 14px;margin-bottom:20px;
}
.pn-route h3{margin-bottom:10px}
.pn-route p{color:var(--muted);margin:0 0 22px;font-size:16px;line-height:26px}
.pn-route .pn-go{
  margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:500;color:var(--forest);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.pn-route .pn-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}

/* ------------------------------------------------ three benefit blocks */
.pn-three{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px}
/* White, not cream. This block sits on a cream section, and a cream disc on a
   cream ground is a disc nobody can see, which is what it was. */
.pn-block .ic{
  width:52px;height:52px;border-radius:50%;background:var(--white);
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.pn-block .ic svg{width:23px;height:23px;stroke:var(--forest);fill:none;stroke-width:1.5}
.pn-block h3{font-size:26px;margin-bottom:10px}
.pn-block p{color:var(--muted);margin:0;font-size:16px;line-height:26px}

/* .steps in salus.css is a four column grid. This flow has three. */
.pn-steps{grid-template-columns:repeat(3,1fr)}

/* ------------------------------------------------------------ stats band */
.pn-stats{background:var(--forest);color:#fff}
.pn-stats .wrap{padding-top:64px;padding-bottom:64px}
.pn-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pn-stat{border-top:1px solid rgba(255,255,255,.2);padding-top:22px}
.pn-stat b{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:52px;line-height:1.02;color:var(--gold);margin-bottom:8px;
}
.pn-stat p{margin:0;font-size:15px;line-height:24px;color:rgba(255,255,255,.78);max-width:34ch}

/* --------------------------------------------------------- Scale panel */
.pn-scale{background:var(--cream)}
.pn-scale-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.pn-points{list-style:none;margin:0;padding:0}
.pn-points li{
  display:flex;gap:14px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--line);font-size:16px;line-height:26px;
}
.pn-points li:first-child{border-top:1px solid var(--line)}
.pn-points svg{width:18px;height:18px;flex:0 0 18px;margin-top:5px;stroke:var(--gold);fill:none;stroke-width:1.7}
.pn-points b{font-weight:500;color:var(--forest)}
.pn-points i{font-style:normal;color:var(--muted)}
.pn-scale-note{font-size:15px;line-height:25px;color:var(--muted);margin:26px 0 0;max-width:56ch}
.pn-scale-img{width:100%;height:100%;min-height:460px;object-fit:cover;border-radius:var(--radius)}

/* -------------------------------------------------------- testimonials */
/* Renders nothing while OPERATOR_TESTIMONIALS is empty, which it is. The rules
   are here so the section is a styling decision already taken the day a real
   operator quote exists to put in it. */
.pn-quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.pn-quote{
  margin:0;padding:34px 34px 30px;background:var(--cream);
  border-radius:var(--radius);display:flex;flex-direction:column;
}
.pn-quote blockquote{
  margin:0 0 20px;font-family:'Cormorant Garamond',serif;font-size:25px;line-height:35px;
  color:var(--forest);
}
.pn-quote figcaption{margin-top:auto;font-size:14px;color:var(--muted)}

/* -------------------------------------------------------- FAQ accordion */
.pn-faq{max-width:82ch}
.pn-q{border-bottom:1px solid var(--line)}
.pn-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:'Outfit',sans-serif;font-size:17px;font-weight:500;color:var(--forest);
}
.pn-q summary::-webkit-details-marker{display:none}
.pn-q summary::after{
  content:"";flex:0 0 12px;width:12px;height:12px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);margin-top:-5px;transition:transform .18s ease,margin-top .18s ease;
}
.pn-q[open] summary::after{transform:rotate(225deg);margin-top:5px}
.pn-q summary:hover{color:var(--gold-deep)}
.pn-q .pn-a{padding:0 0 24px;margin:0;color:var(--muted);font-size:16px;line-height:27px;max-width:74ch}

/* ------------------------------------------------------------ closing CTA */
.pn-close{background:var(--forest-deep);color:#fff}
.pn-close .wrap{padding-top:88px;padding-bottom:88px;text-align:center}
.pn-close h2{color:#fff;margin-bottom:16px}
.pn-close .pn-sub{
  font-size:18px;line-height:29px;color:rgba(255,255,255,.78);
  max-width:58ch;margin:0 auto 30px;
}
.pn-close .pn-cta-row{justify-content:center}
.pn-contact{
  margin:34px 0 0;font-size:14px;line-height:24px;color:rgba(255,255,255,.62);
}
.pn-contact a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pn-contact strong{display:block;color:#fff;font-weight:500;font-size:15px;margin-bottom:4px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .pn-hero-grid{grid-template-columns:1fr;gap:40px}
  .pn-hero .wrap{padding-top:56px;padding-bottom:56px}
  /* The hero stacks here, so the copy runs the full height of the band and the
     lighter end of a left to right gradient ends up underneath it. Vertical and
     close to even, so the benefit lines at the bottom sit on the same ground as
     the headline at the top. */
  .pn-hero-media::after{
    background:linear-gradient(180deg,rgba(31,42,32,.88),rgba(31,42,32,.74));
  }
  .pn-scale-grid{grid-template-columns:1fr;gap:40px}
  .pn-three{grid-template-columns:1fr;gap:34px}
  .pn-stat-grid{grid-template-columns:1fr;gap:26px}
  .pn-stat b{font-size:44px}
  .pn-steps{grid-template-columns:1fr}
  .pn-scale-img{min-height:300px}
}
@media (max-width:760px){
  .pn-routes{grid-template-columns:1fr;gap:16px}
  .pn-route{padding:28px 24px 26px}
  .pn-hero .pn-sub{font-size:17px;line-height:29px}
  .pn-cta-row .btn{width:100%;justify-content:center}
  .pn-trust .wrap{padding-top:20px;padding-bottom:20px}
  .pn-marks{gap:10px 22px}
  .pn-close .wrap{padding-top:60px;padding-bottom:60px}
  .pn-q summary{font-size:16px}
  .pn-quotes{grid-template-columns:1fr}
  .pn-scale-img{min-height:240px}
}