/* Al-Maharah · the home page on phones.
   Loaded only for (max-width:700px), (max-height:500px) and (pointer:coarse).

   The desktop page is one bottle you follow from the hero to the last section. The phone page keeps
   that idea instead of stacking boxes:
   hero (the bottle between the words) → the two oils (one pinned scene: the bottle turns and
   Loralai becomes Zhob) → buy → the colour → the bottle, detail by detail → packing → who we are → journal.
   Motion is tied to the finger (scroll), never to a timer, apart from the first entrance. */

/* ---------- page frame ---------- */
#sky,#stage,.loader{display:none!important}
body.home{background:var(--paper)}
.home-main{display:flex;flex-direction:column}
#hero{order:1}#collection{order:2}#shop{order:3}#oil{order:4}#craft{order:5}#packing{order:6}#story{order:7}#journal{order:8}
.home-main>section,.home-main>div{position:relative;z-index:2}
.home-main .section{padding-block:76px}
.home-main .shead{margin-bottom:32px;gap:14px}
.home-main .shead h2,.craft-head h2,.story-m h2{font-size:clamp(2.25rem,9.8vw,2.875rem);line-height:1.04;letter-spacing:-.015em}
.home-main .shead .lead{font-size:15px;line-height:1.6;max-width:36ch!important}

/* header: steps aside while you read down, returns when you scroll up; light over the dark scene */
body.home .site.away{transform:translateY(-100%)}

/* ---------- 1 · hero: the bottle stands beside the two words ---------- */
.hero{height:100svh;min-height:600px;max-height:960px;padding:0}
.hero-back{position:absolute;inset:0;height:auto;min-height:0;display:block;overflow:hidden}
.hero-back::before{content:"";position:absolute;z-index:0;right:-30vw;top:calc(var(--header) + 2svh);width:110vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(202,177,97,.24),rgba(202,177,97,.07) 58%,rgba(202,177,97,0));pointer-events:none}
.hero-back .hw{position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);top:calc(var(--header) + env(safe-area-inset-top,0px) + 6px);bottom:var(--front-h,228px);width:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) minmax(0,1fr);column-gap:0;align-items:stretch;padding:0;transform:none;font-size:clamp(3.4rem,16.6vw,6rem);line-height:.92;letter-spacing:-.03em}
.hero-back .hw>span:first-child,.hero-back .hw>span:last-child{position:relative;z-index:1;grid-column:1;justify-self:start;white-space:nowrap;will-change:transform}
.hero-back .hw>span:first-child{grid-row:1;align-self:end}
.hero-back .hw>span:last-child{grid-row:2;align-self:start;padding-top:.08em}
.hero-back .hw .gap{grid-column:2;grid-row:1/3;position:relative;z-index:2;height:100%;aspect-ratio:262/1100;margin:0;will-change:transform,opacity}
.hero-back .hw .gap::after{content:"";position:absolute;left:-45%;right:-45%;bottom:-1.5%;height:4%;background:radial-gradient(50% 50% at 50% 50%,rgba(18,26,14,.3),rgba(18,26,14,0) 70%);z-index:-1}
.hero-bottle{display:block;position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-height:none;object-fit:contain;transform:none;filter:drop-shadow(-10px 26px 22px rgba(20,30,15,.22));animation:m-rise 1.5s var(--ease) .15s both}
.hero-back .hw>span:first-child{animation:m-word 1.2s var(--ease) .1s both}
.hero-back .hw>span:last-child{animation:m-word 1.2s var(--ease) .22s both}

.hero-front{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 0 calc(22px + env(safe-area-inset-bottom,0px))}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:end;justify-items:stretch;text-align:left}
.hero-row>span[aria-hidden]{display:none}
.hero-intro{display:grid;gap:6px;max-width:none;justify-items:start}
.hero-intro .ar{font-size:17px;line-height:1.4;color:var(--gold-ink);text-align:left}
.hero-intro h1{font-family:var(--f-body);font-size:15px;line-height:1.55;font-weight:400;letter-spacing:0;color:var(--muted);max-width:30ch}
.hero-cta{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:10px;justify-self:stretch;justify-items:stretch;align-items:center}
.hero-cta .btn-solid{min-height:54px;justify-content:space-between;padding-inline:24px 22px}
.hero-wa{display:inline-flex;width:54px;min-height:54px;padding:0;border-color:var(--line-2);color:var(--green)}
.hero-wa svg{width:22px;height:22px}
.hero-wa:hover svg{transform:none}
.hero-wa-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-note{grid-column:1/-1;font-size:12.5px;letter-spacing:0;color:var(--muted)}
.hero-tag,.hero-trust,.hb{display:none}

/* ---------- 2 · the two oils: one pinned scene ---------- */
#collection{height:330svh;position:relative}
.coll-pin{display:block;position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper);color:var(--ink)}
.coll-pin::before{content:"";position:absolute;left:50%;top:calc(var(--header) + 4svh);width:96vw;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0) 72%);opacity:var(--glow,1);pointer-events:none}
.m-count{display:flex;align-items:center;gap:12px;position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:calc(var(--header) + env(safe-area-inset-top,0px) + 4px);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--c-muted,var(--muted))}
.m-count span{transition:color .4s,opacity .4s;opacity:.55}
.m-count span.on{opacity:1;color:var(--c-acc,var(--gold-ink))}
.m-count i{position:relative;flex:1;height:1px;background:currentColor;opacity:.35}
.m-count b{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--c-acc,var(--gold-ink));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.m-bottle{display:block;position:absolute;z-index:1;left:50%;top:calc(var(--header) + env(safe-area-inset-top,0px) + 40px);height:calc(100svh - var(--header) - var(--copy-h,292px) - 56px);max-height:620px;aspect-ratio:262/1100;transform:translateX(-50%);will-change:transform}
.m-bottle img,.m-bottle canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(10,16,8,.28))}
.m-bottle .mb-green,.m-bottle canvas{opacity:0}
.m-bottle.is-green .mb-gold{opacity:0}
.m-bottle.is-green .mb-green{opacity:1}
.m-bottle.is-spin img{opacity:0}
.m-bottle.is-spin canvas{opacity:1}
.m-bottle::after{content:"";position:absolute;z-index:-1;left:-55%;right:-55%;bottom:-2%;height:4.5%;background:radial-gradient(50% 50% at 50% 50%,rgba(10,16,8,.32),rgba(10,16,8,0) 70%)}

.coll-pin .chapter{position:absolute;z-index:2;left:0;right:0;bottom:0;min-height:0;display:block;padding:0 0 calc(26px + env(safe-area-inset-bottom,0px));background:none!important}
.coll-pin .chap{display:block}
.coll-pin .chap-side,.coll-pin .specs{display:none}
.coll-pin .chap-copy{display:grid;gap:12px;max-width:none;justify-items:start;will-change:opacity,transform}
#ch-green .chap-copy{opacity:0;visibility:hidden}
#ch-gold{--c-ink:var(--ink);--c-muted:var(--muted);--c-line:var(--line-2);--c-acc:var(--gold-ink);--c-btn:var(--green);--c-btn-ink:var(--on-dark)}
#ch-green{--c-ink:var(--on-dark);--c-muted:rgba(243,238,223,.72);--c-line:var(--line-d);--c-acc:var(--gold);--c-btn:var(--gold);--c-btn-ink:var(--green-deep)}
.coll-pin .kicker{font-size:13px}
.coll-pin .chap h2{font-size:clamp(2.5rem,12.4vw,3.375rem);line-height:.98;letter-spacing:-.02em}
.coll-pin .desc{font-size:15px;line-height:1.55;max-width:38ch}
.coll-pin .buy{width:100%;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:16px;margin-top:4px;padding-top:16px;border-top:1px solid var(--c-line)}
.coll-pin .buy .price{font-size:1.625rem}
.coll-pin .buy .price small{display:block;margin:0 0 4px;font-size:12px}
.coll-pin .chap-btn{min-height:48px;padding-inline:20px}
.coll-pin.is-dark{color:var(--on-dark)}
.coll-pin.is-dark .m-count{--c-muted:rgba(243,238,223,.72);--c-acc:var(--gold)}

/* ---------- 3 · buy: the two oils, side by side in a column ---------- */
/* the two cards sit side by side: shared phone rules in style.css */
#shop .perks{grid-template-columns:minmax(0,1fr);gap:0;margin-top:32px;border-top:1px solid var(--line)}
#shop .perks div{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px 0;border-top:0;border-bottom:1px solid var(--line)}
#shop .perks svg{grid-row:1/3;width:20px;height:20px;margin:1px 0 0}
#shop .perks b{font-size:14px}
#shop .perks span{display:block;font-size:13px}

/* ---------- 4 · the colour ---------- */
#oil{background:var(--sand)}
.bowls{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bowl{gap:8px}
.bowl img{width:100%}
.bowl h3{font-size:1.25rem}
.bowl p{font-size:13px;line-height:1.45}

/* ---------- 5 · the bottle, detail by detail: the bottle stays, the notes pass ---------- */
#craft{height:auto;background:var(--paper)}
.craft-pin{position:relative;top:auto;height:auto;overflow:visible;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;padding:76px var(--gutter) 24px;max-width:none}
.craft-head{position:static;grid-column:1/-1;margin-bottom:20px}
.craft-head .wrap{padding:0}
#leaders{display:none!important}
.craft-fig{display:block;position:sticky;top:calc(var(--header) + 5svh);grid-column:1;grid-row:2;align-self:start;height:min(74svh,calc((100vw - 2 * var(--gutter) - 22px) * .4 / .2382));aspect-ratio:262/1100}
.craft-pin .craft-img{display:block;position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-height:none;transform:none;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(20,30,15,.2))}
.hs{display:grid;place-items:center;position:absolute;z-index:1;left:var(--mx,var(--x));top:var(--my,var(--y));width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(247,244,236,.92);box-shadow:0 0 0 1px var(--gold-ink),0 4px 10px -4px rgba(20,30,15,.4);color:var(--gold-ink);font-size:10.5px;font-weight:600;line-height:1;counter-increment:hs;transition:background .4s,color .4s,transform .4s var(--ease)}
.craft-fig{counter-reset:hs}
.hs::before{content:counter(hs)}
.hs::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--gold-ink);opacity:0}
.hs.is-on{background:var(--gold-ink);color:var(--paper);transform:scale(1.1)}
.hs.is-on::after{animation:m-ping 2s ease-out infinite}
.craft-pin .notes{position:static;grid-column:2;grid-row:2;display:block;padding:0;pointer-events:auto;counter-reset:nt}
.craft-pin .note{position:relative;left:auto!important;top:auto!important;width:auto;min-height:50svh;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0;border:0;visibility:visible;opacity:.25;text-align:left!important;counter-increment:nt;transition:opacity .5s var(--ease)}
.craft-pin .note.is-on{opacity:1}
.craft-pin .note::before{content:counter(nt,decimal-leading-zero);font-family:var(--f-display);font-size:1rem;color:var(--gold-ink)}
.craft-pin .note h3{font-size:1.625rem;line-height:1.1}
.craft-pin .note p{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ---------- 6 · packing: swipe through the four layers ---------- */
.pack{background:var(--paper)}
.pack-steps{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);counter-reset:pk}
.pack-steps::-webkit-scrollbar{display:none}
.pack-steps li{display:grid;grid-template-columns:none;gap:16px;align-content:start;scroll-snap-align:start;counter-increment:pk}
.pack-steps .pk{border-radius:6px;background-color:#EDE6D8}
.pack-steps li>div::before{content:counter(pk,decimal-leading-zero) " / 04";display:block;margin-bottom:8px;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--gold-ink)}
.pack-steps b{font-size:1.375rem;margin-bottom:6px}
.pack-steps p{font-size:14px;line-height:1.6}
.m-track{position:relative;height:2px;margin-top:28px;border-radius:2px;background:var(--line);overflow:hidden}
.m-track i{position:absolute;left:0;top:0;height:100%;width:var(--w,25%);border-radius:2px;background:var(--ink);transform:translateX(var(--x,0))}

/* ---------- 7 · who we are ---------- */
.story-m{display:block;position:relative;overflow:hidden;background:var(--green-deep);color:var(--on-dark);padding-block:84px 76px}
.story-m::before{content:"المحارة";position:absolute;right:-4vw;top:40px;font-family:var(--f-ar);font-size:40vw;line-height:1;direction:rtl;color:var(--gold);opacity:.07;pointer-events:none}
.story-m .wrap{position:relative;display:grid;gap:44px}
.st-copy{display:grid;gap:18px;justify-items:start}
.story-m p{color:rgba(243,238,223,.76);font-size:15px;line-height:1.7;max-width:40ch}
.st-facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.st-facts li{display:grid;grid-template-columns:6.25rem minmax(0,1fr);align-items:baseline;gap:16px;padding-block:18px;border-bottom:1px solid var(--line-d)}
.st-facts b{font-family:var(--f-display);font-weight:400;font-size:2.25rem;line-height:1;color:var(--gold)}
.st-facts span{font-size:14px;line-height:1.5;color:rgba(243,238,223,.76)}

/* ---------- 8 · journal: a rail ---------- */
#journal .posts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
#journal .posts::-webkit-scrollbar{display:none}
#journal .post{min-height:260px;scroll-snap-align:start}
#journal .post.feature{grid-column:auto}

/* ---------- buy bar, rail dots ---------- */
.hbar{display:block;position:fixed;z-index:70;left:0;right:0;bottom:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(253,252,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
.hbar.show{transform:none}
body.m-pinned .hbar{transform:translateY(110%)}
.hbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--max);margin-inline:auto}
.hbar-in>div{min-width:0;display:grid;gap:2px}
.hbar b{font-family:var(--f-display);font-weight:400;font-size:1.0625rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-in>div>span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .btn{min-height:46px;padding:0 22px;flex-shrink:0}
.dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
.dots[hidden]{display:none}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .35s var(--ease),background .35s}
.dots i.on{width:20px;background:var(--ink)}

/* ---------- arrival: sections settle in once, as they reach you ---------- */
.m-rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.m-rv.in{opacity:1;transform:none}

@keyframes m-rise{from{opacity:0;transform:translateY(5%)}to{opacity:1;transform:none}}
@keyframes m-word{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.25em)}to{opacity:1;clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes m-ping{0%{opacity:.8;transform:scale(.55)}80%,100%{opacity:0;transform:scale(1.5)}}

/* ---------- wider phones and small tablets held upright ---------- */
@media (min-width:560px){
  .hero-back .hw{font-size:min(15vw,6.5rem)}
  .pack-steps{grid-auto-columns:46%}
  #journal .posts{grid-auto-columns:48%}
}

/* ---------- phones turned sideways: words either side of the bottle, copy beside the scene ---------- */
@media (orientation:landscape) and (max-height:500px){
  .hero{min-height:0;max-height:none}
  .hero-back .hw{bottom:var(--front-h,118px);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:28px;font-size:min(11vw,22svh)}
  .hero-back .hw>span:first-child{grid-row:1;grid-column:1;align-self:center;justify-self:end}
  .hero-back .hw>span:last-child{grid-row:1;grid-column:3;align-self:center;justify-self:start;padding:0}
  .hero-back .hw .gap{grid-column:2;grid-row:1;margin:0}
  .hero-back::before{right:auto;left:50%;top:50%;width:70svh;transform:translate(-50%,-50%)}
  .hero-row{grid-template-columns:minmax(0,1fr) minmax(0,320px);column-gap:32px}
  .hero-intro .ar{display:none}
  .m-bottle{left:26%;top:calc(var(--header) + 34px);height:calc(100svh - var(--header) - 52px)}
  .coll-pin::before{left:26%;width:70svh}
  .coll-pin .chapter{left:46%;right:0;bottom:auto;top:calc(var(--header) + 34px)}
  .m-count{left:46%}
  .craft-fig{height:min(78svh,320px)}
  .craft-pin .note{min-height:70svh}
  .pack-steps{grid-auto-columns:32%}
}

@media (max-height:700px) and (orientation:portrait){
  .coll-pin .desc{font-size:14px;line-height:1.5}
  .coll-pin .chap-copy{gap:10px}
  .coll-pin .chap h2{font-size:clamp(2.25rem,11vw,3rem)}
}

@media (prefers-reduced-motion:reduce){
  .hero-bottle,.hero-back .hw>span{animation:none!important}
  .m-rv{opacity:1;transform:none;transition:none}
  .hs.is-on::after{animation:none}
}