/* Medicinal cannabis page (2026-10-01), rebuilt from the live sekhn.com page in the V3 look: the homepage gradient
   and clouds in the hero, photos graded and grained like the homepage. On 2026-10-03 it moved onto the shared
   industry scale and palette in ind.css: homepage type tokens, homepage gradients and surfaces only (the fines tile is
   now the lime Strategy surface), and every photo under a forest or teal scrim. Loaded after v3.css and ind.css, and
   only by this page. */

/* film grain, the same monochrome noise the homepage photo tiles carry; sits on top of a .grain block */
.grain{position:relative;isolation:isolate}
.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}
/* content sits above the grain; photo layers (z -2) and scrims (z -1) stay below it */
.mtile>:not(.pl){position:relative;z-index:1}
@keyframes mdrift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.2%,.8%)}}

/* hero: her headline left, photo card right, on the homepage gradient. Headline size from ind.css, colour from v3 */
.mhero{min-height:0;padding-top:calc(64px + clamp(2.5rem,8vh,5rem));padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.mhero>.wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%}
.mtext{display:grid;gap:1.25rem;justify-items:start}
.mtext .crumb{margin:0;color:var(--ink2)}
.mtext h1{max-width:17ch}
.mtext .lede{color:var(--ink2);max-width:54ch;line-height:1.65}
.mtext .btn{margin-top:.3rem}
.mphoto{border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-height:560px;width:100%;justify-self:end;background:#16485A;box-shadow:0 30px 70px rgba(34,53,42,.2)}
.mphoto .ph,.mwphoto .ph,.mintl .ph,.mtile .pl{position:absolute;inset:-3%;z-index:-2;background:50% 50%/cover no-repeat}
.mphoto .ph{background-image:url(img/mc-hero.jpg);background-position:38% 50%}
.js .mphoto .ph,.js .mintl .ph{animation:mdrift 38s ease-in-out infinite alternate}
/* scrims on the two text-free photos: teal on the hero card, forest on the Why photo, light so the scene still reads */
.mphoto::before,.mwphoto::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.mphoto::before{background:linear-gradient(180deg,rgba(var(--s-teal),.12) 0%,rgba(var(--s-teal),.06) 45%,rgba(var(--s-teal),.32) 100%)}
.mwphoto::before{background:linear-gradient(180deg,rgba(var(--s-forest),.06) 0%,rgba(var(--s-forest),.08) 50%,rgba(var(--s-forest),.3) 100%)}

/* problem: a bento of five. Her four, plus the operational one; the fines tile runs tall in the middle */
.mbento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.mtile{border-radius:22px;padding:1.5rem 1.45rem 1.55rem;display:flex;flex-direction:column;gap:.6rem;overflow:hidden;min-height:250px}
.mtile .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:auto}
.mtile .ico .ic{width:20px;height:20px}
.mtile h3{font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title);margin-top:1.1rem;max-width:24ch}
.mtile p{font-size:var(--i-body);line-height:1.55;color:var(--i-text);max-width:46ch}
.mtile.glassy{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}
.mtile.glassy .ico{background:#EEF5DF;color:#3F5C3B}
/* the fines tile: the homepage Strategy surface. Its photo is turned to greyscale and coloured by the lime gradient
   beneath it, then the Strategy tile's two lime corner washes and a pale lime veil behind the text */
.mtile.lime{grid-column:2;grid-row:1/3;justify-content:center;background:var(--g-lime);--gr:.6}
.mtile.lime .pl{background-image:url(img/mc-fines.jpg);filter:grayscale(1) contrast(.9);mix-blend-mode:luminosity;opacity:.55}
.mtile.lime::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(85% 55% at 50% 55%,rgba(244,248,226,.66) 0%,rgba(244,248,226,.34) 62%,rgba(244,248,226,0) 100%),radial-gradient(120% 85% at 100% 0%,rgba(150,205,78,.78) 0%,rgba(150,205,78,0) 70%),radial-gradient(120% 85% at 0% 100%,rgba(198,229,124,.6) 0%,rgba(198,229,124,0) 70%)}
.mtile.lime>*{color:#0E3A1F;text-shadow:0 0 14px rgba(244,248,226,.6)}
.mtile.lime .big{font-family:var(--display);font-weight:600;font-size:clamp(3.4rem,6vw,5.2rem);letter-spacing:-.05em;line-height:.95}
.mtile.lime h3{font-size:var(--i-t1);margin-top:.6rem}
.mtile.lime p{color:rgba(14,58,31,.82)}
/* forest and teal photo tiles: photo layer, the homepage scrim in the tile's colour, then grain */
.mtile .pl{z-index:-2}
.mtile.forest,.mtile.teal{color:#fff}
.mtile.forest{background:#173D29}
.mtile.forest .pl{background-image:url(img/mc-ads.jpg);background-position:50% 70%;filter:saturate(.8)}
.mtile.forest::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--s-forest),.55) 0%,rgba(var(--s-forest),.72) 55%,rgba(var(--s-forest),.86) 100%)}
.mtile.teal{background:#16485A}
.mtile.teal .pl{background-image:url(img/mc-admin.jpg);background-position:50% 30%}
.mtile.teal::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--s-teal),.45) 0%,rgba(var(--s-teal),.66) 55%,rgba(var(--s-teal),.84) 100%)}
.mtile.forest .ico,.mtile.teal .ico{background:rgba(255,255,255,.12);color:#C6E57C;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mtile.teal .ico{color:#A6D6D8}
.mtile.forest h3,.mtile.teal h3{color:var(--i-title-on)}
.mtile.forest p,.mtile.teal p{color:var(--i-text-on)}

/* why SEKHN: photo left, her reasons right, each reason an icon and a heading */
.mwhy{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.mwphoto{border-radius:28px;overflow:hidden;aspect-ratio:4/5;max-height:620px;background:#ABD963;box-shadow:0 30px 70px rgba(34,53,42,.16)}
.mwphoto .ph{background-image:url(img/mc-why.jpg)}
.mwtext{display:grid;gap:1rem}
.mwtext h2{max-width:20ch}
.mwtext .lede{max-width:58ch}
.mreasons{display:grid;grid-template-columns:1fr;gap:0;margin-top:.6rem;border-top:1px solid rgba(34,53,42,.1)}
.mreason{display:flex;align-items:center;gap:.9rem;padding:.8rem 0;border-bottom:1px solid rgba(34,53,42,.1)}
.mreason .ico{width:40px;height:40px;border-radius:50%;background:#EEF5DF;color:#3F5C3B;display:grid;place-items:center;flex:none}
.mreason .ico .ic{width:20px;height:20px}
.mreason b{display:block;font-family:var(--display);font-weight:600;font-size:var(--i-t2);line-height:1.25;letter-spacing:-.02em;color:var(--i-title)}

/* services: the homepage band gradient (lime, yellow, teal) with grain; a glass switch between the two pillars */
.msvc{background:var(--g-band);--gr:.35}
.msvc>.wrap{position:relative;z-index:3}
.mtabs{display:flex;width:max-content;max-width:100%;margin:0 auto 1.4rem;padding:5px;gap:4px;border-radius:999px;overflow-x:auto;scrollbar-width:none;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 10px 30px rgba(34,53,42,.08),inset 0 1px 0 #fff}
.mtabs::-webkit-scrollbar{display:none}
.mtab{flex:none;border:0;border-radius:999px;padding:.72rem 1.25rem;background:transparent;font:600 .92rem/1.1 var(--sans);color:var(--ink2);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.mtab:hover{color:var(--ink);background:rgba(255,255,255,.55)}
.mtab[aria-selected="true"]{background:#0E3A1F;color:#fff;box-shadow:0 8px 20px rgba(34,53,42,.2)}
.mpanel:not([hidden]){animation:mfade .45s var(--ease)}
@keyframes mfade{from{opacity:0;transform:translateY(8px)}}
.mintro{display:grid;justify-items:center;gap:.5rem;text-align:center;margin-bottom:1.6rem}
.mintro p{font-size:var(--i-copy);color:var(--i-text);max-width:62ch}
/* the measure line, as on the homepage capability cards: ink2 text with a green (or teal for AI) icon */
.mintro .mt{display:inline-flex;gap:.45rem;align-items:flex-start;text-align:left;font-size:.88rem;line-height:1.45;color:var(--ink2)}
.mintro .mt .ic{flex:none;width:15px;height:15px;margin-top:.12rem;color:#3F5C3B}
.mpanel.ai .mintro .mt .ic{color:#1E6577}
/* 2 by 2 of landscape cards: icon and title on one line, then the description and the checklist, all left-aligned */
.mcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.6rem;max-width:1080px;margin:0 auto}
.mcard{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:.95rem;row-gap:.85rem;align-items:start;text-align:left;padding:1.9rem 2.1rem 1.9rem;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}
.mcard .ico{width:42px;height:42px;border-radius:50%;background:#EEF5DF;color:#3F5C3B;display:grid;place-items:center}
.mcard h3{align-self:center}
.mcard p,.mcard ul{grid-column:1/-1}
.mcard .ico .ic{width:20px;height:20px}
.mpanel.ai .mcard .ico{background:#DDEFF0;color:#1E6577}
.mcard h3{font-size:var(--i-t2);line-height:1.2;letter-spacing:-.02em;color:var(--i-title)}
.mcard p{font-size:var(--i-body);line-height:1.55;color:var(--i-text)}
.mcard ul{list-style:none;margin:.15rem 0 0;padding:1rem 0 0;border-top:1px solid rgba(34,53,42,.1);display:grid;gap:.55rem;align-self:end}
.mcard li{font-size:var(--i-li);line-height:1.45;color:var(--i-list);padding-left:1.35rem;position:relative}
.mcard li::before{content:"";position:absolute;left:0;top:.2em;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}
.mpanel.ai .mcard 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")}
.mcta{display:flex;justify-content:center;margin-top:clamp(1.6rem,4vh,2.4rem)}
.mcta .btn{min-width:min(340px,100%);justify-content:center;padding:.95rem 2.6rem}

/* international brands: her copy over his photo of a woman against open teal sky (2026-10-03), under the teal scrim,
   heaviest on the left where the text sits; on phones the photo runs across the top instead */
.mintl{border-radius:28px;overflow:hidden;min-height:clamp(420px,58vh,540px);display:flex;align-items:center;padding:clamp(2rem,5vw,4rem);background:#2A7891;--gr:.6}
.mintl .ph{z-index:-2;background-image:url(img/mc-intl.jpg);background-position:60% 40%}
.mintl::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--s-teal),.78) 0%,rgba(var(--s-teal),.55) 38%,rgba(var(--s-teal),.18) 70%,rgba(var(--s-teal),.12) 100%)}
.mitext{position:relative;z-index:3;max-width:560px;display:grid;gap:1rem;color:#fff}
.mitext h2{color:#fff;text-shadow:0 2px 24px rgba(var(--s-teal),.35)}
.mitext p{font-size:var(--i-copy);line-height:1.65;color:var(--i-text-on);text-shadow:0 1px 14px rgba(var(--s-teal),.3)}

/* her closing paragraphs: quiet, centred, all the same */
.mcopy{max-width:780px;margin:0 auto;display:grid;gap:1rem;text-align:center}
.mcopy p{font-size:var(--i-copy);line-height:1.7;color:var(--i-text)}

/* tablets: the bento goes to two columns, services to a 2 by 2 grid */
@media (max-width:1080px){
  .mbento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtile.lime{grid-column:1/-1;grid-row:auto;min-height:0}
}
/* phones: stacked hero with the photo under the copy; tiles and service cards become swipe rows */
@media (max-width:860px){
  .mhero>.wrap{grid-template-columns:1fr}
  .mtext h1{max-width:none}
  .mphoto{aspect-ratio:4/3;justify-self:stretch}
  .mwhy{grid-template-columns:1fr}
  .mwphoto{aspect-ratio:16/10;order:2}
  .mbento,.mcards{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--pad));padding:0 var(--pad) .6rem;scrollbar-width:none}
  .mbento::-webkit-scrollbar,.mcards::-webkit-scrollbar{display:none}
  .mtile,.mcard{flex:0 0 82%;scroll-snap-align:center}
  .mcard{padding:1.5rem 1.4rem}
  .mtile.lime{min-height:250px}
  .mtabs{width:100%;border-radius:20px}
  .mtab{flex:1 1 0;white-space:normal;text-align:center;border-radius:15px;padding:.6rem .7rem;font-size:.85rem;line-height:1.25}
  .mintro .mt{font-size:.8rem}
  /* the photo sits across the top of the panel so her face stays clear, fading into the teal under the copy */
  .mintl{align-items:flex-end;min-height:0;padding-top:64vw}
  .mintl .ph{inset:0 0 auto 0;height:80vw;background-position:72% 40%;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
  .mintl::before{background:linear-gradient(180deg,rgba(var(--s-teal),0) 0%,rgba(var(--s-teal),.1) 30%,rgba(var(--s-teal),.6) 58%,rgba(var(--s-teal),.82) 100%)}
}
@media (prefers-reduced-motion:reduce){.js .mphoto .ph,.js .mintl .ph{animation:none!important}.mpanel:not([hidden]){animation:none}}