/* Pharmacies page (2026-10-01, palette and type brought in line with the homepage 2026-10-03): "from shopfront to
   doorstep". The homepage .flow hero with a line-drawn shopfront whose dotted route runs to a house and a phone; glass
   problem cards and a wide photo tile under a forest scrim; a sticky split for Why SEKHN; both service groups as tinted
   panels. Sizes and colours come from ind.css. Loaded after v3.css and ind.css, this page only. */

/* film grain: the same monochrome noise as the homepage photo tiles; sits on top of a .ph-grain block */
.ph-grain{position:relative;isolation:isolate}
.ph-grain::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}

/* hero: split, her copy left, the drawing right, on the homepage .flow gradient */
.ph-hero{min-height:0;padding-top:calc(64px + clamp(2rem,6vh,4rem));padding-bottom:clamp(1.5rem,5vh,3.5rem)}
.ph-hero>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(2rem,4vw,4rem);align-items:center;width:100%}
.ph-htext{display:grid;gap:1.25rem;justify-items:start}
.ph-htext .crumb{margin:0;color:var(--ink2)}
.ph-htext h1{max-width:15ch}
.ph-htext .lede{color:var(--ink2);max-width:52ch;line-height:1.65}
.ph-htext .btn{margin-top:.3rem}
.ph-hart{position:relative;width:100%;max-width:620px;justify-self:end}
.ph-hart::before{content:"";position:absolute;inset:6% 4% 2% 4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.6),rgba(255,255,255,0));filter:blur(6px)}
.ph-art{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:#0E3A1F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* line drawings: strokes draw in through stroke-dashoffset (every stroke has pathLength=1), fills fade in after */
.ph-art .ph-thin,.ph-gdraw .ph-thin{stroke-width:1.6}
.ph-art .ph-soft,.ph-gdraw .ph-soft{stroke-opacity:.45}
.ph-art .ph-sun{stroke:#3F5C3B}
.js .ph-ln{stroke-dasharray:1 1.02;stroke-dashoffset:1.01;opacity:0}
.js .ph-on .ph-ln{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset var(--t,1.1s) var(--ease) var(--d,0s),opacity .01s linear var(--d,0s)}
.js .ph-fl{opacity:0}
.js .ph-on .ph-fl{opacity:1;transition:opacity .9s ease var(--d,0s)}
/* the dotted route, revealed by a mask stroke that runs from the shop door to the phone */
.ph-route{stroke:#0E3A1F;stroke-width:3.2;stroke-dasharray:0 9;stroke-linecap:round;fill:none}
.ph-rm{fill:none;stroke:#fff;stroke-width:22;stroke-linecap:round}
.js .ph-rm{stroke-dasharray:1 1.02;stroke-dashoffset:1.01}
.js .ph-art.ph-on .ph-rm{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s linear 2.1s}
.ph-ring{fill:none;stroke:#ABD963;stroke-width:2}
.ph-still{display:none}
html:not(.js) .ph-still,.ph-art.ph-rest .ph-still{display:inline}
.ph-art.ph-rest .ph-mover,.ph-art.ph-rest .ph-ring,.ph-art.ph-rest .ph-screen{display:none}

/* problem: heading left, her four points as a 2 by 2 of white glass cards with marketing icon circles */
.ph-prob{padding-top:clamp(2.5rem,6vh,4rem)}
.ph-ptitle{max-width:25ch;margin-bottom:clamp(1.6rem,4vh,2.4rem)}
.ph-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ph-pcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;align-items:start;padding:1.65rem 1.75rem 1.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}
.ph-gico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#EEF5DF;color:#3F5C3B}
.ph-gico .ic{width:20px;height:20px}
.ph-pcard h3{font-size:var(--i-t2);line-height:1.3;letter-spacing:-.02em;color:var(--i-title);margin:.15rem 0 .45rem;max-width:30ch}
.ph-pcard p{font-size:var(--i-body);line-height:1.6;color:var(--i-text);max-width:56ch}

/* the fifth, operational point: a wide photo tile, a forest scrim from the left so the text reads */
.ph-admin{margin-top:1rem;border-radius:26px;overflow:hidden;min-height:clamp(220px,30vh,270px);display:flex;align-items:center;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.6rem,4vw,3.2rem);background:#173D29;--gr:.6;box-shadow:0 24px 60px rgba(34,53,42,.14)}
.ph-admin .ph-photo{position:absolute;inset:-3%;z-index:-2;background:url(img/ph-admin.jpg) 50% 45%/cover no-repeat}
.ph-admin::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--s-forest),.9) 0%,rgba(var(--s-forest),.78) 34%,rgba(var(--s-forest),.3) 62%,rgba(var(--s-forest),.04) 88%)}
.js .ph-admin .ph-photo{animation:phdrift 40s ease-in-out infinite alternate}
@keyframes phdrift{from{transform:scale(1)}to{transform:scale(1.06) translate(-1.5%,.6%)}}
.ph-atext{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;align-items:start;max-width:600px;color:#fff}
.ph-aico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#C6E57C;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ph-aico .ic{width:20px;height:20px}
.ph-atext h3{color:var(--i-title-on);font-size:var(--i-t1);line-height:1.2;letter-spacing:-.02em;margin:.1rem 0 .5rem;text-shadow:0 2px 18px rgba(var(--s-forest),.3)}
.ph-atext p{font-size:var(--i-body);color:var(--i-text-on);line-height:1.6;max-width:50ch}

/* why SEKHN: sticky lead on the left, her reasons on the right as a ruled list, each an icon and its heading */
.ph-whysec{background:#fff}
.ph-why{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.ph-wlead{position:sticky;top:112px;display:grid;gap:1rem}
.ph-wlead h2{max-width:16ch;margin-bottom:.2rem}
.ph-wlead .lede{max-width:46ch;line-height:1.65}
.ph-wlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ph-wrow{display:flex;align-items:center;gap:1.1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.ph-wico{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#EEF5DF}
.ph-wico svg{width:22px;height:22px;fill:none;stroke:#0E3A1F;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ph-wico .ph-ln{--t:1s}
.ph-wrow b{display:block;font-family:var(--display);font-weight:600;font-size:var(--i-t2);line-height:1.3;letter-spacing:-.02em;color:var(--i-title)}

/* services: two tinted panels, each a header column and a 2 by 2 of glass cards */
.ph-svc{background:#fff}
.ph-groups{display:grid;gap:1.1rem}
.ph-group{border-radius:28px;overflow:hidden;padding:var(--gp);display:grid;grid-template-columns:minmax(196px,.44fr) minmax(0,2fr);gap:clamp(1.4rem,2.4vw,2.2rem);--gr:.4}
.ph-svc{--gp:clamp(1.2rem,2vw,1.7rem)}
.ph-shead{padding-inline:var(--gp)}
.ph-group>*{position:relative;z-index:1}
.ph-mkt{background:var(--g-cream)}
.ph-ai{background:var(--i-tealsoft)}
.ph-ghead{display:flex;flex-direction:column;gap:.85rem;padding:.35rem 0 .2rem}
.ph-ghead h3{font-size:var(--i-t1);line-height:1.2;letter-spacing:-.02em;color:var(--i-title);max-width:12ch}
.ph-ghead p{font-size:var(--i-copy);color:var(--i-text);line-height:1.58}
.ph-gdraw{flex:1;display:grid;place-items:center;min-height:120px;padding:.4rem 0}
.ph-gdraw svg{width:100%;max-width:230px;height:auto;overflow:visible;fill:none;stroke:#0E3A1F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ph-ai .ph-gdraw svg{stroke:#16485A}
.ph-dots{fill:none;stroke-width:3;stroke-dasharray:0 8;stroke-linecap:round}
.ph-mt{display:flex;gap:.5rem;align-items:center;padding-top:.85rem;border-top:1px solid rgba(34,53,42,.14);font-size:.86rem;font-weight:600;color:#3F5C3B;line-height:1.35}
.ph-mt .ic{width:16px;height:16px}
.ph-ai .ph-mt{color:#1E6577}
.ph-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.ph-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.2rem 1.05rem;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}
.ph-ct{display:flex;align-items:center;gap:.75rem}
.ph-cico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#EEF5DF;color:#3F5C3B}
.ph-cico .ic{width:19px;height:19px}
.ph-ai .ph-cico{background:#DDEFF0;color:#1E6577}
.ph-card h4{margin:0;font-family:var(--display);font-weight:600;font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title);text-wrap:balance}
.ph-card p{font-size:var(--i-body);line-height:1.55;color:var(--i-text)}
.ph-card ul{list-style:none;margin:.1rem 0 0;padding:.65rem 0 0;border-top:1px solid rgba(34,53,42,.1);display:grid;gap:.36rem}
.ph-card li{position:relative;padding-left:1.3rem;font-size:var(--i-li);line-height:1.45;color:var(--i-list)}
.ph-card li::before{content:"";position:absolute;left:0;top:.24em;width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F5C3B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat}
.ph-ai .ph-card li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6577' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E")}
.ph-cta{display:flex;justify-content:center;margin-top:clamp(1.6rem,4vh,2.4rem)}
.ph-cta .btn{min-width:min(340px,100%);justify-content:center;padding:.95rem 2.6rem}

/* closing: centred heading, a lime hairline that draws out from a lime dot, her paragraphs */
.ph-close{text-align:center}
.ph-close h2{max-width:22ch;margin:0 auto}
.ph-hair{width:min(240px,60%);height:12px;margin:clamp(1.3rem,3.5vh,1.8rem) auto clamp(1.3rem,3.5vh,1.8rem)}
.ph-hair svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:#ABD963;stroke-width:1.4;stroke-linecap:round}
.ph-hair .ph-ln{--t:1.3s;vector-effect:non-scaling-stroke}
.ph-hair circle{fill:#ABD963;stroke:#0E3A1F;stroke-width:1.2;vector-effect:non-scaling-stroke}
.ph-copy{max-width:780px;margin:0 auto;display:grid;gap:1rem}
.ph-copy p{font-size:var(--i-copy);color:var(--i-text);line-height:1.7}

/* laptops under 1180: the service header column narrows */
@media (max-width:1180px){
  .ph-group{grid-template-columns:minmax(0,.55fr) minmax(0,2fr)}
}
/* tablets: the service panels put their header on top */
@media (max-width:1024px){
  .ph-group{grid-template-columns:1fr}
  .ph-ghead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:2rem;row-gap:.6rem;align-items:start}
  .ph-ghead h3{max-width:none;grid-row:1/3}
  .ph-gdraw{display:none}
  .ph-mt{grid-column:2}
}
/* phones: stacked hero with the drawing under the copy; problem cards and service cards become swipe rows */
@media (max-width:860px){
  .ph-hero>.wrap{grid-template-columns:1fr}
  .ph-htext h1{max-width:none}
  .ph-hart{justify-self:center;max-width:460px}
  .ph-pgrid,.ph-cards{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ph-pgrid{margin-inline:calc(-1*var(--pad));padding:0 var(--pad) .6rem}
  .ph-pgrid::-webkit-scrollbar,.ph-cards::-webkit-scrollbar{display:none}
  .ph-pcard{flex:0 0 84%;scroll-snap-align:center;grid-template-columns:1fr;align-content:start;gap:.9rem}
  .ph-card{flex:0 0 84%;scroll-snap-align:center}
  .ph-admin{align-items:flex-end;min-height:360px}
  .ph-admin::before{background:linear-gradient(180deg,rgba(var(--s-forest),.1) 0%,rgba(var(--s-forest),.55) 38%,rgba(var(--s-forest),.88) 100%)}
  .ph-atext{grid-template-columns:1fr;gap:.9rem}
  .ph-why{grid-template-columns:1fr;gap:1.6rem}
  .ph-wlead{position:static}
  .ph-wlead h2{max-width:none}
  .ph-wrow{gap:.9rem;padding:.8rem 0}
  .ph-wico{width:44px;height:44px}
  .ph-wico svg{width:20px;height:20px}
  .ph-shead{padding-inline:0}
  .ph-group{border-radius:24px;padding:1.4rem 0 1.2rem}
  .ph-ghead{display:flex;padding:0 1.3rem}
  .ph-ghead h3{max-width:none}
  .ph-cards{padding:0 1.3rem .5rem;scroll-padding-inline:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .js .ph-ln,.js .ph-fl,.js .ph-rm{stroke-dashoffset:0!important;opacity:1!important;transition:none!important}
  .js .ph-admin .ph-photo{animation:none!important}
}