/* Peptide & longevity clinics page (2026-10-01), rebuilt from the live sekhn.com page in the V3 look. Aspirational and
   premium: the site's only dark hero (the homepage calculator panel's deep forest, with a lime and teal aurora), then
   light bands carried by lime hairlines and line drawings. Loaded after v3.css and ind.css, and only by this page.
   Prefix: pk. Colours and type come from ind.css (2026-10-03): homepage palette and scale only. */

.pkp{--pkline:rgba(171,217,99,.75)}
.pkpane.ai{--pkline:rgba(166,214,216,.95)}

/* film grain, the same monochrome noise as the homepage photo tiles; sits on top of a .pkgrain block */
.pkgrain{position:relative;isolation:isolate}
.pkgrain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:var(--gr,.55);mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}

/* ---- nav over the dark hero: white wordmark and links, a glass call button and a solid white dropdown, until the
   bar turns frosted on scroll (.scrolled), when the shared nav styles take over again ---- */
.pkp .nbar .logo{transition:color .3s}
.pkp .nav:not(.scrolled)::before{opacity:0}
.pkp .nav:not(.scrolled) .nbar .logo{color:#fff}
.pkp .nav:not(.scrolled) .nlink{color:rgba(255,255,255,.86)}
.pkp .nav:not(.scrolled) .nlink:hover,.pkp .nav:not(.scrolled) .nlink[aria-expanded="true"]{background:rgba(255,255,255,.12);color:#fff}
.pkp .nav:not(.scrolled) .nbtn.dark{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pkp .nav:not(.scrolled) .nbtn.dark:hover{background:rgba(255,255,255,.2)}
.pkp .nav:not(.scrolled) .nmenu{background:rgba(255,255,255,.12);color:#fff}
.pkp .nav:not(.scrolled) .ndd .npanel{background:rgba(255,255,255,.96);border-color:#fff}
.pkp .nav:not(.scrolled) :focus-visible,.pkhero :focus-visible{outline-color:#E3F08C}

/* ---- hero: the calculator result panel's surface (deep forest, a forest glow top right, a teal glow bottom left),
   a lime and teal aurora, heavy grain; her copy on its own (the arched photo was removed on 2026-10-03) ---- */
.pkhero{min-height:clamp(620px,96vh,900px);justify-content:center;padding-top:calc(64px + clamp(1.5rem,5vh,3.5rem));padding-bottom:clamp(2.5rem,7vh,4.5rem);
  color:#fff;border-radius:0 0 clamp(26px,3.4vw,44px) clamp(26px,3.4vw,44px);background:var(--g-dark)}
/* heavy grain over the whole hero: an overlay layer for texture and a faint screen layer so the specks read on dark */
.pkhero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px;
  opacity:.1;mix-blend-mode:screen}
.pkhero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/220px 220px;
  opacity:.9;mix-blend-mode:overlay}
.pkhero .sky{z-index:-1}
.pkhero>.wrap{position:relative;z-index:1;width:100%}
/* the CSS aurora: a lime glow top left, a teal glow top right, a low lime haze; under the shader they dim */
.pkaura{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;border-radius:inherit;transition:opacity 1.6s var(--ease)}
.pkaura i{position:absolute;border-radius:50%;will-change:transform}
.pkaura .a1{width:min(980px,78vw);height:min(560px,52vw);left:-18%;top:-16%;background:radial-gradient(closest-side,rgba(198,229,124,.22),rgba(198,229,124,.06) 55%,rgba(198,229,124,0));animation:pka1 34s ease-in-out infinite alternate}
.pkaura .a2{width:min(900px,70vw);height:min(760px,62vw);right:-20%;top:-14%;background:radial-gradient(closest-side,rgba(166,214,216,.3),rgba(42,120,145,.12) 55%,rgba(42,120,145,0));animation:pka2 41s ease-in-out infinite alternate}
.pkaura .a3{width:min(1100px,90vw);height:min(420px,36vw);left:-10%;bottom:-20%;background:radial-gradient(closest-side,rgba(198,229,124,.14),rgba(171,217,99,.05) 60%,rgba(171,217,99,0));animation:pka3 29s ease-in-out infinite alternate}
@keyframes pka1{to{transform:translate(14%,10%) scale(1.12) rotate(6deg)}}
@keyframes pka2{to{transform:translate(-12%,16%) scale(.9) rotate(-8deg)}}
@keyframes pka3{to{transform:translate(18%,-14%) scale(1.15)}}
.pkhero.gl .pkaura{opacity:.4}
.pkhero.pkoff .pkaura i{animation-play-state:paused}

.pktext{display:grid;gap:1.25rem;justify-items:start}
.pktext .crumb{margin:0;color:rgba(255,255,255,.62)}
.pktext .crumb a:hover{color:#fff}
.pkhero h1{color:#fff;max-width:17ch;text-wrap:balance}
.pktext .lede{color:rgba(255,255,255,.9);max-width:54ch;line-height:1.65}
/* the booking button on the dark hero: white with deep forest text, as on the homepage calculator panel */
.btn.pkbtn{margin-top:.35rem;background:#fff;color:#0E3A1F;padding:.9rem 1.5rem}
.btn.pkbtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(var(--s-forest),.4)}
.js .pktext>*{animation:rise 1s var(--ease) both}
.js .pktext>*:nth-child(2){animation-delay:.08s}.js .pktext>*:nth-child(3){animation-delay:.16s}.js .pktext>*:nth-child(4){animation-delay:.24s}

/* ---- problem: her four plus the operational one, as typographic rows on lime hairlines that draw in row by row ---- */
section#problem.pkprob{background:#fff}
.pkhead{max-width:24ch;margin-bottom:clamp(1.6rem,4.5vh,2.8rem)}
.pkrows{border-bottom:1px solid var(--pkline)}
.pkrow{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.08fr);gap:clamp(1rem,3vw,3rem);align-items:start;padding:clamp(1.25rem,3vh,1.8rem) 0}
.pkrow::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--pkline);transform-origin:0 50%}
.pkrow .pkri{width:32px;height:32px;margin-top:-.05rem;color:#3F5C3B;stroke-width:1.4}
.pkrow h3{font-size:var(--i-t1);line-height:1.2;letter-spacing:-.02em;color:var(--i-title);max-width:24ch}
.pkrow p{font-size:var(--i-body);color:var(--i-text);line-height:1.62;max-width:56ch;padding-top:.2rem}
.js .pkrow{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .pkrow::before{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.js .pkrow .pkri{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s .3s var(--ease)}
.js .pkrow.in{opacity:1;transform:none}
.js .pkrow.in::before{transform:none}
.js .pkrow.in .pkri{stroke-dashoffset:0}

/* ---- why SEKHN: her reasons as compact glass cards (icon and heading only) on the soft lime band; the peak photo on
   the right under a forest scrim, with a lime ridge line drawn over it ---- */
.pkwhy{background:var(--g-cream);--gr:.3}
.pkwhy>.wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pkwtext{display:grid;gap:1rem}
.pkwtext h2{max-width:22ch}
.pkwtext .lede{max-width:58ch}
.pkreasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.9rem}
.pkreason{display:flex;align-items:center;gap:.85rem;padding:.7rem 1rem .7rem .7rem;border-radius:22px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 18px 44px rgba(34,53,42,.09),inset 0 1px 0 #fff}
.pkreason .ic{flex:none;width:42px;height:42px;padding:11px;border-radius:50%;background:#EEF5DF;color:#3F5C3B;stroke-width:1.6}
.pkreason b{font-family:var(--display);font-weight:600;font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title)}
.js .pkreasons .ic{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease)}
.js .pkreasons .pkreason:nth-child(2) .ic{transition-delay:.12s}.js .pkreasons .pkreason:nth-child(3) .ic{transition-delay:.24s}.js .pkreasons .pkreason:nth-child(4) .ic{transition-delay:.36s}
.js .pkreasons.in .ic{stroke-dashoffset:0}
.pkpeak{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-height:620px;width:100%;justify-self:end;background:#173D29;--gr:.55;
  box-shadow:0 30px 70px rgba(34,53,42,.16)}
.pkpeak::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--s-forest),.3) 0%,rgba(var(--s-forest),.08) 36%,rgba(var(--s-forest),.12) 64%,rgba(var(--s-forest),.42) 100%)}
.pkpeak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;z-index:-1}
.pkridge{position:absolute;inset:0;width:100%;height:100%;z-index:1;fill:none;stroke:#C6E57C;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.pkridge path{vector-effect:non-scaling-stroke}
.js .pkpeak .pkridge path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s .3s cubic-bezier(.5,0,.2,1)}
.js .pkpeak.in .pkridge path{stroke-dashoffset:0}

/* ---- services: a big two-position switch (forest and lime for marketing, teal for AI), then four open columns
   split by hairlines in the group's colour ---- */
.pksvc{background:#fff;padding-block:clamp(3.2rem,8vh,6rem)}
.pksh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:clamp(1.1rem,3vh,2rem)}
.pktoggle{display:flex;align-items:center;gap:.75rem}
.pkt{appearance:none;border:0;background:none;margin:0;padding:.45rem .3rem;border-radius:10px;cursor:pointer;
  font:600 var(--i-t2)/1.2 var(--display);letter-spacing:-.02em;color:var(--muted);transition:color .35s}
.pkt:hover{color:var(--ink2)}
.pkt[aria-selected="true"]{color:var(--ink)}
.pktrack{position:relative;flex:none;width:56px;height:30px;border-radius:999px;cursor:pointer;background:#173D29;transition:background .45s;
  box-shadow:inset 0 1px 5px rgba(var(--s-forest),.5),0 6px 16px rgba(34,53,42,.16)}
.pkknob{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#C6E57C;
  box-shadow:0 2px 6px rgba(var(--s-forest),.35),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .55s var(--ease),background .45s}
.pktoggle[data-on="1"] .pktrack{background:#16485A}
.pktoggle[data-on="1"] .pkknob{transform:translateX(26px);background:#A6D6D8}
.pkpanes{display:grid}
.pkpane{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.pkpane.on{opacity:1;visibility:visible;transition:opacity .45s .05s,visibility 0s}
.pkintro{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.6rem;margin-bottom:clamp(1rem,2.6vh,1.6rem)}
.pkintro p{font-size:var(--i-copy);color:var(--i-text);max-width:62ch}
.pkmt{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;color:#3F5C3B;font-weight:500}
.pkpane.ai .pkmt{color:#1E6577}
.pkmt .ic{width:16px;height:16px}
.pkcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,auto);border-top:1px solid var(--pkline)}
.pkcol{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-content:start;row-gap:.6rem;padding:1.4rem clamp(1rem,1.6vw,1.45rem) .2rem;border-left:1px solid var(--pkline)}
.pkcol:first-child{border-left:0;padding-left:0}
.pkcol:last-child{padding-right:0}
.pkct{display:grid;justify-items:start;gap:.7rem}
.pkct .ic{width:28px;height:28px;color:#3F5C3B;stroke-width:1.45}
.pkpane.ai .pkct .ic{color:#1E6577}
.pkcol h3{font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title)}
.pkcol p{font-size:var(--i-body);line-height:1.55;color:var(--i-text)}
.pkcol ul{list-style:none;margin:.15rem 0 0;padding:0;display:grid;align-content:start;gap:.42rem}
.pkcol li{position:relative;padding-left:1.05rem;font-size:var(--i-li);line-height:1.45;color:var(--i-list)}
.pkcol li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #3F5C3B}
.pkpane.ai .pkcol li::before{box-shadow:inset 0 0 0 1.5px #1E6577}
/* columns rise in turn, the first time the section shows and again on each switch */
.js .pksvc:not(.in) .pkcol{opacity:0}
.js .pksvc.in .pkpane.on .pkcol{animation:pkup .7s var(--ease) both}
.js .pksvc.in .pkpane.on .pkcol:nth-child(2){animation-delay:.07s}
.js .pksvc.in .pkpane.on .pkcol:nth-child(3){animation-delay:.14s}
.js .pksvc.in .pkpane.on .pkcol:nth-child(4){animation-delay:.21s}
.js .pksvc.in .pkpane.on .pkct .ic{stroke-dasharray:1;animation:pkdraw 1.2s .2s var(--ease) both}
@keyframes pkup{from{opacity:0;transform:translateY(14px)}}
@keyframes pkdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pkcta{margin-top:clamp(1.5rem,4vh,2.4rem)}
.pkcta .btn{padding:.95rem 2rem}

/* ---- closing: her paragraphs centred on the homepage's lime, yellow and teal band, under a small line-drawn
   sunrise ---- */
.pkclose{background:var(--g-band);--gr:.35}
.pkclose>.wrap{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:1.1rem}
.pksun{width:120px;height:66px;fill:none;stroke:#3F5C3B;stroke-width:1.4;stroke-linecap:round;overflow:visible;margin-bottom:.2rem}
.pksun path{vector-effect:non-scaling-stroke}
.js .pksun path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)}
.js .pksun path:nth-child(2){transition-delay:.35s;transition-duration:1.8s}
.js .pksun path:nth-child(3){transition-delay:1.1s}
.js .pksun.in path{stroke-dashoffset:0}
.pkclose h2{max-width:22ch}
.pkcopy{max-width:790px;display:grid;gap:1rem;margin-top:.3rem}
.pkcopy p{font-size:var(--i-copy);color:var(--i-text);line-height:1.72}

/* ---- laptops and tablets ---- */
@media (max-width:1080px){
  .pkcols{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}
  .pkcol:nth-child(odd){border-left:0;padding-left:0}
  .pkcol:nth-child(even){padding-right:0}
  .pkcol:nth-child(n+3){border-top:1px solid var(--pkline);margin-top:1.4rem}
  .pkcol:nth-child(2){padding-right:0}
}
@media (max-width:960px){
  .pksh{flex-direction:column;align-items:flex-start}
}
/* ---- phones: rows stack their text; the switch becomes two equal
   halves; service columns become a swipe row ---- */
@media (max-width:860px){
  .pkhero{min-height:0;padding-top:calc(64px + 1.6rem)}
  .pkhero h1{max-width:none}
  .pkrow{grid-template-columns:30px minmax(0,1fr);gap:.55rem 1rem}
  .pkrow .pkri{width:26px;height:26px;margin-top:-.05rem}
  .pkrow p{grid-column:2;padding-top:0}
  .pkwhy>.wrap{grid-template-columns:1fr}
  .pkpeak{order:-1;aspect-ratio:16/11;max-height:none}
  .pkreasons{grid-template-columns:1fr;gap:.5rem;margin-top:.4rem}
  .pksh{gap:1rem}
  .pktoggle{display:grid;grid-template-columns:1fr 1fr;position:relative;width:100%;padding:5px;gap:0;border-radius:18px;background:#EEF5DF;box-shadow:inset 0 0 0 1px rgba(34,53,42,.08)}
  .pktrack,.pktoggle[data-on="1"] .pktrack{position:absolute;inset:5px;width:auto;height:auto;border-radius:14px;background:none;box-shadow:none;pointer-events:none}
  .pkknob{top:0;left:0;width:50%;height:100%;border-radius:14px;background:#173D29;box-shadow:0 6px 16px rgba(34,53,42,.22)}
  .pktoggle[data-on="1"] .pkknob{transform:translateX(100%);background:#16485A}
  .pkt{position:relative;z-index:1;padding:.75rem .5rem;border-radius:14px;font-size:.92rem;line-height:1.2;text-align:center;color:var(--ink2)}
  .pkt[aria-selected="true"]{color:#fff}
  .pkintro{display:grid;gap:.5rem}
  .pkcols{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--pad));padding:0 var(--pad) .4rem;scrollbar-width:none;border-top:0}
  .pkcols::-webkit-scrollbar{display:none}
  .pkcol,.pkcol:first-child,.pkcol:nth-child(n){flex:0 0 80%;display:flex;flex-direction:column;gap:.6rem;margin:0;padding:1.3rem 1.2rem .4rem 1.1rem;border:0;border-left:1px solid var(--pkline);border-top:1px solid var(--pkline);scroll-snap-align:start;scroll-margin-left:var(--pad)}
  .pkcta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .pktext>*,.pkaura i{animation:none!important}
  .js .pkrow,.js .pkrow::before,.js .pkrow .pkri,.js .pkreasons .ic,.js .pkpeak .pkridge path,.js .pksun path{transition:none!important;opacity:1;transform:none;stroke-dashoffset:0}
  .js .pksvc .pkcol,.js .pksvc .pkct .ic{animation:none!important;opacity:1}
  .pkpane,.pkknob,.pkt,.pktrack{transition:none!important}
}