/* ==== Intelligence (Basira) page ==========================================
   Loaded only by page-intelligence.hbs. Uses the tokens in tokens.css.
   Live product screens are built in HTML so they can move. Motion follows the brand
   rules: fade-rise 16px / 500ms, 70ms stagger, nothing loops except the two small
   "live" dots and the pipeline pulse, and everything is static under
   prefers-reduced-motion. Hidden start states apply only under .i-motion (added by the
   page's inline script), so without JS every screen is shown finished. */

.i-note{font-size:var(--fs-small);opacity:.72;margin-block-start:var(--s-3)}

/* reveal primitive */
.i-motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 70ms)}
.i-motion [data-reveal].is-in{opacity:1;transform:none}

/* ---- hero ---- */
.i-hero{padding-block:var(--s-6) var(--s-7);overflow:hidden}
.i-hero__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-6);align-items:center}
.i-hero h1{font-size:var(--fs-display);line-height:1.04;color:var(--ivory);margin-block:var(--s-2) var(--s-3)}
.i-hero .lead{color:var(--ivory);opacity:.86;max-inline-size:560px}
.i-hero .eyebrow{color:var(--amber)}
.i-hero .text-link{color:var(--amber)}
.i-stage{position:relative;aspect-ratio:1.08/1;max-inline-size:600px;margin-inline:auto;inline-size:100%}
.i-stage__lines{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}
.i-stage__lines path{fill:none;stroke:var(--amber);stroke-width:1.5;stroke-dasharray:4 5;opacity:.7;vector-effect:non-scaling-stroke}
.i-portrait{position:absolute;left:31%;top:10%;inline-size:40%;margin:0;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.35);outline:1px solid rgba(247,243,236,.18)}
.i-portrait img{display:block;inline-size:100%;block-size:auto;aspect-ratio:3/4;object-fit:cover}
.i-portrait__tag{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--ivory);font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--radius-pill);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.i-chip{position:absolute;background:var(--paper);color:var(--text);border-radius:14px;padding:10px 14px;
  box-shadow:0 14px 34px rgba(0,0,0,.28);min-inline-size:150px}
.i-chip__k{display:block;font-size:11px;letter-spacing:.02em;color:#6b7280;margin-block-end:2px}
.i-chip__v{display:block;font-weight:700;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.i-chip__v .gold{color:#B8862B}
.i-chip__v .dot{display:inline-block;inline-size:7px;block-size:7px;border-radius:50%;background:#B8862B;margin-inline-end:6px;vertical-align:middle}
.i-chip--rfm{left:0;top:4%}
.i-chip--ltv{right:0;top:0}
.i-chip--churn{left:0;top:42%;min-inline-size:170px}
.i-chip--season{right:0;top:38%}
.i-chip--next{left:4%;bottom:4%}
.i-chip--loc{right:2%;bottom:12%}
.i-meter{display:flex;align-items:center;gap:10px}
.i-meter__track{flex:1;block-size:6px;border-radius:6px;background:var(--hairline);overflow:hidden}
.i-meter__fill{display:block;block-size:100%;inline-size:18%;background:var(--emerald);border-radius:inherit}
.i-motion .i-meter__fill{inline-size:0;transition:inline-size 1.1s cubic-bezier(.2,.7,.2,1) .6s}
.i-motion .is-in .i-meter__fill{inline-size:18%}
.i-motion .i-stage__lines path{stroke-dashoffset:60;opacity:0;transition:opacity .6s ease .4s,stroke-dashoffset 1.2s ease .4s}
.i-motion .i-stage.is-in .i-stage__lines path{stroke-dashoffset:0;opacity:.7}
.i-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ivory);opacity:.8;margin-block-start:var(--s-3)}
.i-live::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:#3fbf94;animation:i-pulse 2.4s ease-out infinite}
@keyframes i-pulse{0%{box-shadow:0 0 0 0 rgba(63,191,148,.55)}70%{box-shadow:0 0 0 9px rgba(63,191,148,0)}100%{box-shadow:0 0 0 0 rgba(63,191,148,0)}}

/* ---- stat band ---- */
.i-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.i-stat{border-inline-start:2px solid var(--amber);padding-inline-start:var(--s-3)}
.i-stat__num{display:block;font-family:var(--font-display);font-weight:620;font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.i-stat__label{display:block;margin-block-start:var(--s-1);color:var(--ink-80)}

/* ---- engine pipeline ---- */
.i-pipe{position:relative;margin-block:var(--s-5) var(--s-2)}
.i-pipe svg{display:block;inline-size:100%;block-size:auto}
html:not(.i-motion) .i-pipe__pulse{display:none}

/* ---- six models: tabs + app window ---- */
.i-models{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:var(--s-5);align-items:start;margin-block-start:var(--s-6)}
.i-tabs{display:grid;gap:var(--s-1)}
.i-tab{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:var(--s-2) var(--s-3);border-radius:12px;border:1px solid transparent;transition:background .2s,border-color .2s}
.i-tab:hover{background:rgba(12,89,80,.05)}
.i-tab[aria-selected="true"]{background:var(--paper);border-color:var(--hairline);box-shadow:var(--shadow-card)}
.i-tab:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.i-tab__name{display:block;font-family:var(--font-display);font-weight:620;font-size:20px;color:var(--ink)}
.i-tab__line{display:block;font-size:.92rem;color:var(--ink-80);margin-block-start:2px}
.i-tab[aria-selected="true"] .i-tab__name{color:var(--emerald)}
.i-app{background:var(--paper);border:1px solid var(--hairline);border-radius:18px;box-shadow:0 24px 60px rgba(16,28,54,.12);overflow:hidden}
.i-app__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-block-end:1px solid var(--hairline);font-size:12px;font-weight:600;color:var(--ink-80)}
.i-app__bar i{inline-size:10px;block-size:10px;border-radius:50%;background:var(--hairline);display:block}
.i-app__bar span{margin-inline-start:8px}
.i-app__bar em{margin-inline-start:auto;font-style:normal;font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#B8862B}
.i-app__body{padding:var(--s-4);min-block-size:360px}
.i-panel[hidden]{display:none}
.i-panel h4{margin:0 0 var(--s-2);font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-80)}
.i-panel p.i-desc{margin:0 0 var(--s-3);color:var(--ink-80)}
.i-fact{display:inline-block;margin-block-start:var(--s-3);font-weight:700;color:var(--emerald);font-variant-numeric:tabular-nums}
.i-panel.is-shown .i-anim{animation:i-rise .5s ease both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes i-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* RFM treemap */
.i-rfm{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:58px;gap:6px}
.i-rfm div{border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700;color:var(--ivory);background:var(--emerald);display:flex;align-items:flex-end;line-height:1.2}
.i-rfm .champ{grid-column:span 2;grid-row:span 2;font-size:16px;outline:3px solid var(--amber);outline-offset:-3px}
.i-rfm .w2{grid-column:span 2}
.i-rfm .t2{background:#2a7a70}.i-rfm .t3{background:#5e9d95}.i-rfm .t4{background:#9cc3bd;color:var(--ink)}
.i-rfm .warn{background:#E9C07A;color:var(--ink)}.i-rfm .hot{background:var(--amber);color:var(--ink)}
/* churn gauge */
.i-gauge{display:grid;justify-items:center}
.i-gauge svg{inline-size:min(320px,100%);block-size:auto}
.i-gauge__val{font-family:var(--font-display);font-weight:620;font-size:52px;line-height:1;color:var(--ink);margin-block-start:-44px;font-variant-numeric:tabular-nums}
.i-gauge__lab{font-weight:700;color:#b5452f;margin-block-start:6px}
.i-gauge .arc-bg{fill:none;stroke:var(--hairline);stroke-width:18;stroke-linecap:round}
.i-gauge .arc-fg{fill:none;stroke:url(#i-gauge-grad);stroke-width:18;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:73.6}
.i-panel.is-shown .arc-fg{animation:i-gauge 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes i-gauge{from{stroke-dashoffset:283}to{stroke-dashoffset:73.6}}
.i-bands{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-block-start:var(--s-2);font-size:12px;color:var(--ink-80)}
.i-bands span{padding:3px 10px;border-radius:var(--radius-pill);border:1px solid var(--hairline)}
.i-bands .on{background:#b5452f;border-color:#b5452f;color:#fff}
/* LTV */
.i-ltv__bar{display:flex;block-size:46px;border-radius:12px;overflow:hidden;margin-block:var(--s-2)}
.i-ltv__given{background:var(--emerald);color:var(--ivory);display:flex;align-items:center;padding-inline:12px;font-weight:700;font-size:13px;flex:0 0 66%;white-space:nowrap}
.i-ltv__fore{background:repeating-linear-gradient(135deg,#9cc3bd 0 8px,#b7d4cf 8px 16px);color:var(--ink);display:flex;align-items:center;padding-inline:12px;font-weight:700;font-size:13px;flex:1;white-space:nowrap}
.i-panel.is-shown .i-ltv__given{animation:i-grow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes i-grow{from{flex-basis:0}}
.i-ltv__total{font-family:var(--font-display);font-size:34px;color:var(--ink)}
.i-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-block-start:var(--s-3)}
.i-tiers span{text-align:center;font-size:12px;font-weight:700;padding:8px 0;border-radius:8px;background:var(--ivory);color:var(--ink-80)}
.i-tiers .on{background:#E9C07A;color:var(--ink);outline:2px solid #B8862B}
/* next transaction rhythm */
.i-rhythm{position:relative;block-size:130px;margin-block:var(--s-3)}
.i-rhythm::before{content:"";position:absolute;left:0;right:0;top:64px;border-block-start:2px solid var(--hairline)}
.i-rhythm b{position:absolute;top:56px;inline-size:16px;block-size:16px;border-radius:50%;background:var(--emerald)}
.i-rhythm b.next{background:var(--paper);border:2px dashed var(--amber);inline-size:24px;block-size:24px;top:52px}
.i-rhythm small{position:absolute;top:92px;font-size:12px;color:var(--ink-80);white-space:nowrap}
.i-rhythm .i-rhythm__next{position:absolute;top:6px;right:0;font-weight:700;color:var(--ink);font-size:14px;background:rgba(224,165,63,.16);padding:6px 10px;border-radius:10px}
/* seasonal mini calendar */
.i-hijri{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;block-size:150px}
.i-hijri i{display:block;block-size:var(--h);background:#cfe0dd;border-radius:6px 6px 2px 2px}
.i-hijri i.am{background:var(--amber)}
.i-hijri-lab{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;font-size:10px;color:var(--ink-80);text-align:center;margin-block-start:6px}
.i-hijri-lab .am{color:#8a6420;font-weight:700}
.i-panel.is-shown .i-hijri i{animation:i-bar .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 50ms);transform-origin:bottom}
@keyframes i-bar{from{transform:scaleY(0)}to{transform:none}}
.i-tags{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:var(--s-3)}
.i-tags span{font-size:12px;font-weight:700;padding:5px 10px;border-radius:var(--radius-pill);background:rgba(224,165,63,.16);color:#8a6420}
/* chat */
.i-chat{display:grid;gap:10px}
.i-q{justify-self:end;background:#efe7d8;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px;max-inline-size:80%;color:var(--ink)}
.i-a{background:var(--ivory);border:1px solid var(--hairline);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:14px;line-height:1.5;max-inline-size:92%;color:var(--text)}
.i-a strong{color:var(--ink)}
.i-a .i-link{color:var(--emerald);font-weight:700}
.i-typing{display:none;gap:4px;padding:12px 14px;background:var(--ivory);border:1px solid var(--hairline);border-radius:16px;inline-size:max-content}
.i-typing i{inline-size:6px;block-size:6px;border-radius:50%;background:#9aa3ae;animation:i-dot 1s infinite}
.i-typing i:nth-child(2){animation-delay:.15s}.i-typing i:nth-child(3){animation-delay:.3s}
@keyframes i-dot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.i-cite{font-size:12px;color:var(--ink-80);margin:0}
.i-motion .i-chat .i-a,.i-motion .i-chat .i-cite{display:none}
.i-motion .i-chat .i-typing{display:inline-flex}
.i-motion .i-chat.is-answered .i-typing{display:none}
.i-motion .i-chat.is-answered .i-a,.i-motion .i-chat.is-answered .i-cite{display:block;animation:i-rise .5s ease both}

/* ---- photo + floating UI composites ---- */
.i-composite{position:relative;margin:0 0 60px}
.i-composite > img{display:block;inline-size:82%;block-size:auto;border-radius:20px;box-shadow:0 24px 60px rgba(16,28,54,.16)}
.i-composite--right > img{margin-inline-start:auto}
.i-seg{position:absolute;right:0;bottom:-52px;inline-size:min(500px,90%);background:var(--paper);border:1px solid var(--hairline);border-radius:16px;box-shadow:0 24px 60px rgba(16,28,54,.22);overflow:hidden}
.i-seg__head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-block-end:1px solid var(--hairline);font-size:13px;font-weight:700;color:var(--ink)}
.i-seg__head small{font-weight:600;color:var(--ink-80);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.i-seg__head small::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:#3fbf94;animation:i-pulse 2.4s ease-out infinite}
.i-seg__body{display:grid;grid-template-columns:1.6fr 1fr}
.i-rules{padding:12px 14px;display:grid;gap:8px;border-inline-end:1px solid var(--hairline);align-content:start}
.i-rule{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.i-rule b{font-size:10px;font-weight:800;color:var(--emerald);inline-size:26px}
.i-rule span{border:1px solid var(--hairline);border-radius:8px;padding:5px 8px;font-weight:600;color:var(--ink);background:var(--ivory)}
.i-rule em{font-style:normal;color:var(--ink-80)}
.i-motion .i-rule{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i,0) * 350ms + .3s)}
.i-motion .is-in .i-rule{opacity:1;transform:none}
.i-seg__out{padding:12px 14px;background:var(--ivory)}
.i-seg__out small{display:block;font-size:11px;color:var(--ink-80)}
.i-seg__out strong{display:block;font-family:var(--font-display);font-size:30px;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;margin-block-end:6px}
.i-seg__out strong.em{color:var(--emerald);font-size:24px}
.i-seg__btns{display:flex;gap:6px;margin-block-start:8px;flex-wrap:wrap}
.i-seg__btns span{font-size:11px;font-weight:700;padding:5px 10px;border-radius:var(--radius-pill);border:1px solid var(--hairline);color:var(--ink)}
.i-seg__btns span:first-child{background:var(--emerald);border-color:var(--emerald);color:var(--ivory)}
.i-toast{position:absolute;left:0;bottom:-36px;display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--hairline);border-radius:14px;padding:12px 16px;box-shadow:0 20px 44px rgba(16,28,54,.2);font-size:13px;inline-size:min(330px,72%)}
.i-toast strong{display:block;color:var(--ink)}
.i-toast span{color:var(--ink-80)}
.i-toast svg{flex:0 0 18px;color:var(--emerald);margin-block-start:2px}
.i-motion .i-toast{opacity:0;transform:translateY(16px);transition:opacity .5s ease .6s,transform .5s ease .6s}
.i-motion .is-in .i-toast{opacity:1;transform:none}
.i-dest{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-block-start:var(--s-4)}
.i-dest span{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--hairline);border-radius:12px;background:var(--paper);font-size:13px;font-weight:600;color:var(--ink)}
.i-dest span::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--emerald);flex:0 0 8px}
.i-motion .i-dest span::before{background:var(--hairline);transition:background .3s ease;transition-delay:calc(var(--i,0) * 110ms + .3s)}
.i-motion .i-dest.is-in span::before{background:var(--emerald)}

/* ---- impact bars ---- */
.i-bars{display:grid;gap:var(--s-4)}
.i-bar__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2)}
.i-bar__label{font-weight:600;color:var(--ink)}
.i-bar__pct{font-family:var(--font-display);font-weight:620;font-size:clamp(28px,3.2vw,40px);color:var(--emerald);font-variant-numeric:tabular-nums}
.i-bar__track{block-size:12px;border-radius:var(--radius-pill);background:var(--hairline);margin-block:var(--s-1);overflow:hidden}
.i-bar__fill{display:block;block-size:100%;border-radius:inherit;background:var(--emerald);inline-size:var(--w)}
.i-motion .i-bar__fill{inline-size:0;transition:inline-size 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 150ms)}
.i-motion .i-bars.is-in .i-bar__fill{inline-size:var(--w)}
.i-bar__note{margin:0;font-size:var(--fs-small);color:var(--ink-80)}
.i-photo{display:block;inline-size:100%;block-size:auto;border-radius:20px;box-shadow:0 24px 60px rgba(16,28,54,.16)}

/* ---- analyst, 360, behaviour cards ---- */
.i-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-block-start:var(--s-5)}
.i-card{background:var(--paper);border:1px solid var(--hairline);border-radius:18px;box-shadow:var(--shadow-card);padding:var(--s-4)}
.i-card--wide{grid-column:1 / -1;display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s-5);align-items:center}
.i-card__title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);margin-block-end:var(--s-3)}
.i-card__title svg{color:var(--emerald);flex:0 0 18px}
.i-card__foot{font-size:var(--fs-small);color:var(--ink-80);margin:var(--s-3) 0 0}
.i-360{border:1px solid var(--hairline);border-radius:14px;background:var(--ivory);padding:12px 14px}
.i-360__who{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--ink);margin-block-end:8px}
.i-360__who span{font-size:12px;color:#B8862B}
.i-360 ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.i-360 li{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-80);padding-block:6px;border-block-start:1px dashed var(--hairline)}
.i-360 li em{font-style:normal;color:#8a6420;white-space:nowrap}
.i-motion .i-360 li{opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--i,0) * 160ms + .2s)}
.i-motion .is-in .i-360 li{opacity:1;transform:none}
.i-hours{display:grid;grid-template-columns:repeat(21,1fr);gap:3px;align-items:end;block-size:130px}
.i-hours i{display:block;background:#5e9d95;border-radius:3px 3px 1px 1px;block-size:var(--h)}
.i-hours i.pk{background:var(--amber)}
.i-motion .i-hours i{transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 35ms)}
.i-motion .is-in .i-hours i{transform:none}
.i-hours-lab{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-80);margin-block-start:6px}
.i-hours-lab b{color:#8a6420}

/* ---- Hijri year (ink) ---- */
.i-year{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:end;block-size:200px;margin-block-start:var(--s-5)}
.i-year i{display:block;block-size:var(--h);border-radius:8px 8px 3px 3px;background:rgba(247,243,236,.22)}
.i-year i.am{background:var(--amber)}
.i-motion .i-year i{transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 60ms)}
.i-motion .i-year.is-in i{transform:none}
.i-year-lab{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-block-start:8px;font-size:12px;color:var(--ivory);opacity:.75;text-align:center}
.i-year-lab .am{color:var(--amber);font-weight:700}
.i-year-cap{font-size:var(--fs-small);color:var(--ivory);opacity:.6;margin-block-start:var(--s-2)}
.i-cal > *{min-inline-size:0}
.i-year-lab span{font-size:0;line-height:1.2}
.i-year-lab span::after{content:attr(data-s);font-size:12px}
.i-cal{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-6);align-items:end;margin-block-start:var(--s-5)}

/* ---- quote ---- */
.i-quote{display:grid;grid-template-columns:220px 1fr;gap:var(--s-5);align-items:center;background:var(--paper);border:1px solid var(--hairline);border-radius:22px;padding:var(--s-4);box-shadow:var(--shadow-card)}
.i-quote img{inline-size:100%;block-size:auto;border-radius:14px;display:block}
.i-quote blockquote{margin:0;font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1.3;color:var(--ink)}
.i-quote p{margin:var(--s-2) 0 0;color:var(--ink-80);font-size:var(--fs-small)}


/* ---- layout shared by the sections ---- */
.showcase{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-6);align-items:center}
.showcase--reverse > :first-child{order:2}
.showcase__body h2{margin-block-end:var(--s-2)}
.showcase__body .lead{margin-block-end:var(--s-3)}
.wide-shot{margin-block-start:var(--s-5)}
.checks{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.checks li{padding-inline-start:28px;position:relative}
.checks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.35em;inline-size:16px;block-size:16px;border-radius:50%;
  border:1.5px solid var(--emerald);background:radial-gradient(circle,var(--emerald) 0 3px,transparent 3.5px)}
@media (max-width:980px){.showcase{grid-template-columns:1fr;gap:var(--s-4)}.showcase--reverse > :first-child{order:0}}

/* ---- responsive ---- */
@media (max-width:980px){
  .i-hero__grid,.i-models,.i-cal,.i-card--wide{grid-template-columns:1fr}
  .i-stats{grid-template-columns:repeat(2,1fr)}
  .i-tabs{grid-template-columns:repeat(3,1fr)}
  .i-tab__line{display:none}
}
@media (max-width:700px){
  .i-stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .i-stage__lines{display:none}
  .i-portrait{position:relative;left:auto;top:auto;inline-size:72%;grid-column:1 / -1;justify-self:center;margin-block-end:var(--s-2)}
  .i-chip{position:static;min-inline-size:0}
  .i-tabs{grid-template-columns:repeat(2,1fr)}
  .i-tab__name{font-size:17px}
  .i-app__body{padding:var(--s-3)}
  .i-cards,.i-quote{grid-template-columns:1fr}
  .i-quote img{max-inline-size:200px}
  .i-composite{margin-block-end:var(--s-4)}
  .i-composite > img,.i-composite > .i-media{inline-size:100%}
  .i-seg,.i-toast{position:relative;right:auto;left:auto;bottom:auto;inline-size:100%;margin-block-start:-28px}
  .i-seg__body{grid-template-columns:1fr}
  .i-rules{border-inline-end:none;border-block-end:1px solid var(--hairline)}
  .i-hours{gap:2px}
  .i-year{gap:4px;block-size:150px}
  .i-year-lab{gap:4px}
  .i-year-lab span::after{font-size:9px}
  .i-hijri-lab{font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  .i-live::before,.i-seg__head small::before,.i-typing i{animation:none}
  .i-pipe__pulse{display:none}
  .i-panel.is-shown *{animation:none !important}
}

/* ==== RFM mind map (six-models tab) and destinations hub =================== */
.i-mind{position:relative;aspect-ratio:640/380;margin-block:var(--s-2) 0}
.i-mind__svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.i-mind__line{fill:none;stroke:#bcd5d1;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.i-motion .i-mind__line{stroke-dashoffset:1;transition:stroke-dashoffset .7s ease;transition-delay:calc(var(--i,0) * 60ms)}
.i-motion .i-panel.is-shown .i-mind__line{stroke-dashoffset:0}
.i-mind__dot{fill:var(--amber)}
html:not(.i-motion) .i-mind__dot{display:none}
.i-mind__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);inline-size:112px;block-size:112px;border-radius:50%;
  background:var(--ink);color:var(--ivory);display:grid;place-content:center;text-align:center;box-shadow:0 14px 30px rgba(16,28,54,.25);z-index:1}
.i-mind__hub strong{font-family:var(--font-display);font-size:20px;line-height:1.1}
.i-mind__hub small{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--amber)}
.i-mind__ring{position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(224,165,63,.5)}
.i-motion .i-mind__ring{animation:i-ring 3s ease-out infinite}
@keyframes i-ring{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.18);opacity:0}}
.i-node{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;z-index:1;
  padding:5px 12px 5px 5px;border-radius:var(--radius-pill);background:var(--paper);border:1px solid var(--hairline);
  box-shadow:0 8px 20px rgba(16,28,54,.10);font-size:12.5px;font-weight:700;color:var(--ink)}
.i-node__ic{display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--emerald);color:var(--ivory);flex:0 0 28px}
.i-node__ic svg{inline-size:16px;block-size:16px}
.i-node--champ{border:2px solid var(--amber);font-size:14px}
.i-node--champ .i-node__ic{background:var(--amber);color:var(--ink);inline-size:32px;block-size:32px;flex-basis:32px}
.i-node--mid .i-node__ic{background:#5e9d95}
.i-node--cool .i-node__ic{background:#cfe0dd;color:var(--ink)}
.i-node--warn .i-node__ic{background:#E9C07A;color:var(--ink)}
.i-node--hot .i-node__ic{background:var(--amber);color:var(--ink)}
.i-motion .i-panel .i-node{opacity:0;transform:translate(-50%,-50%) scale(.85)}
.i-panel.is-shown .i-node{animation:i-pop .45s ease forwards;animation-delay:calc(.25s + var(--i,0) * 70ms)}
@keyframes i-pop{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.i-hub__title{text-align:center;margin-block:var(--s-6) var(--s-3)}
.i-hub{position:relative;aspect-ratio:1000/480;max-inline-size:1000px;margin-inline:auto}
.i-hub__svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.i-hub__line{fill:none;stroke:#d8cfbf;stroke-width:1.5}
.i-hub__flow{fill:none;stroke:var(--emerald);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.035 .1;opacity:.45}
.i-motion .i-hub__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease;transition-delay:calc(var(--i,0) * 60ms)}
.i-motion .i-hub.is-in .i-hub__line{stroke-dashoffset:0}
.i-motion .i-hub__flow{opacity:0;transition:opacity .4s ease;transition-delay:calc(.8s + var(--i,0) * 60ms)}
.i-motion .i-hub.is-in .i-hub__flow{opacity:.85;animation:i-flow 1.8s linear infinite}
@keyframes i-flow{from{stroke-dashoffset:.135}to{stroke-dashoffset:0}}
.i-hub__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:grid;justify-items:center;gap:2px;text-align:center;
  background:var(--ink);color:var(--ivory);border-radius:22px;padding:16px 26px;box-shadow:0 20px 44px rgba(16,28,54,.28)}
.i-hub__core svg{inline-size:58px;block-size:auto}
.i-hub__core strong{font-family:var(--font-display);font-size:24px;line-height:1.1}
.i-hub__core small{font-size:12px;opacity:.75}
.i-motion .i-hub.is-in .i-hub__core{animation:i-glow 3s ease-in-out infinite}
@keyframes i-glow{0%,100%{box-shadow:0 20px 44px rgba(16,28,54,.28),0 0 0 0 rgba(224,165,63,.0)}50%{box-shadow:0 20px 44px rgba(16,28,54,.28),0 0 0 10px rgba(224,165,63,.14)}}
.i-dnode{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;inline-size:112px;text-align:center;z-index:1}
.i-dnode__name{font-size:12px;font-weight:600;line-height:1.25;color:var(--ink)}
.i-logo{display:grid;place-items:center;inline-size:54px;block-size:54px;border-radius:50%;background:var(--paper);border:1px solid var(--hairline);
  box-shadow:0 8px 20px rgba(16,28,54,.10);color:var(--c,var(--ink))}
.i-logo svg{inline-size:25px;block-size:25px}
.i-logo svg:not([fill]){fill:currentColor}
.i-logo--snap{background:#FFFC00;border-color:#e8e400}
.i-logo--ms{grid-template-columns:11px 11px;grid-auto-rows:11px;gap:2px;place-content:center}
.i-logo--ms i{display:block;inline-size:11px;block-size:11px}
.i-logo--mono{font-weight:800;font-size:21px;letter-spacing:-.02em}
.i-logo--sm{font-size:15px}
.i-motion .i-dnode{opacity:0;transform:translate(-50%,-38%);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(.3s + var(--i,0) * 70ms)}
.i-motion .i-hub.is-in .i-dnode{opacity:1;transform:translate(-50%,-50%)}

@media (max-width:760px){
  .i-hub{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3) var(--s-2)}
  .i-hub__svg{display:none}
  .i-hub__core{position:static;transform:none;grid-column:1 / -1;justify-self:center;margin-block-end:var(--s-2)}
  .i-dnode{position:static;inline-size:auto}
  .i-motion .i-dnode,.i-motion .i-hub.is-in .i-dnode{transform:none}
}
@media (max-width:700px){
  .i-mind{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .i-mind__svg{display:none}
  .i-mind__hub{position:relative;left:auto;top:auto;transform:none;grid-column:1 / -1;justify-self:center;margin-block-end:var(--s-2)}
  .i-node{position:static;transform:none;white-space:normal}
  .i-motion .i-panel .i-node{transform:scale(.9)}
  @keyframes i-pop{to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.i-mind__ring{animation:none}}

/* ==== living photos (Higgsfield loops) ======================================
   The photo stays the real <img> (alt text, LCP, no-JS); the silent loop sits on top
   and fades in only once it is actually playing. */
.i-media{position:relative;display:block;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(16,28,54,.16);background:var(--ink)}
.i-media img{display:block;inline-size:100%;block-size:auto;border-radius:0;box-shadow:none}
.i-vid{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
.is-playing > .i-vid{opacity:1}
.i-composite > .i-media{inline-size:82%}
.i-composite--right > .i-media{margin-inline-start:auto}
.i-media--quote{border-radius:14px;box-shadow:none}
.i-portrait .i-vid{z-index:0}
.i-portrait__tag{z-index:1}

/* ==== the golden thread ======================================================
   One amber line from the donor in the hero, down the page, with a branch into each
   component; drawn by scroll position (not time). Geometry is built by the page script. */
.i-main{position:relative}
.i-thread{position:absolute;inset:0 auto auto 0;z-index:1;pointer-events:none;overflow:visible;display:none}
.i-thread.is-ready{display:block}
.i-thread__track{fill:none;stroke:rgba(224,165,63,.22);stroke-width:1.5}
.i-thread__line{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
.i-thread__branch{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease}
.i-thread__branch.on{stroke-dashoffset:0}
.i-thread__node{fill:var(--ivory);stroke:rgba(224,165,63,.5);stroke-width:2;transition:fill .4s ease,stroke .4s ease}
.i-thread__node.on{fill:var(--amber);stroke:var(--amber)}
.i-thread__tip{fill:var(--amber);filter:drop-shadow(0 0 6px rgba(224,165,63,.9))}
html:not(.i-motion) .i-thread__tip{display:none}
[data-link]{position:relative;z-index:2}
.i-motion [data-link]{transition:box-shadow .6s ease}
.i-linked.i-app,.i-linked.i-quote,.i-linked.i-cards > .i-card:first-child{box-shadow:0 0 0 2px rgba(224,165,63,.55),0 24px 60px rgba(16,28,54,.12)}
@media (max-width:1023px){.i-thread,.i-thread.is-ready{display:none}}

/* small phones: keep the four figures inside 360px */
.i-stat{min-inline-size:0}
@media (max-width:420px){
  .i-stats{gap:var(--s-3) var(--s-2)}
  .i-stat{padding-inline-start:var(--s-2)}
  .i-stat__num{font-size:34px}
  .i-stat__label{font-size:.9rem}
}
/* very small phones (320px): let grid children shrink and long labels wrap */
.i-hero__grid > *,.i-models > *,.i-cal > *,.showcase > *{min-inline-size:0}
.i-hero .eyebrow{white-space:normal;overflow-wrap:anywhere}
.i-app__bar{flex-wrap:wrap}
@media (max-width:360px){.i-app__bar em{display:none}.i-tab{padding:var(--s-2)}}
.i-cards > *{min-inline-size:0}
@media (max-width:420px){
  .i-card{padding:var(--s-3)}
  .i-360 li{flex-wrap:wrap;gap:2px 12px}
  .i-360 li em{white-space:normal}
}

@media (max-width:700px){.i-composite > .i-media{inline-size:100%}}