/* ===== Looksi product page — completely independent of main.css =====
   Own palette, own type, own rhythm. Loaded only on template-looksi.php.
   Palette is lifted from the Looksi app icon (src-tauri/icons/icon-1024.png):
   green-black #0B2E28, mid green #164A40, teal #3CBDA3, deep teal #107F6D,
   paper #F1FBF8, lipstick coral #FF5C4D.                                   */
.lk{
  --lk-bg:#061613; --lk-surface:#0b2e28; --lk-line:#164a40;
  --lk-ink:#f1fbf8; --lk-dim:#a3c4bb; --lk-mute:#86b0a6;
  --lk-teal:#3cbda3; --lk-deep:#107f6d; --lk-coral:#ff5c4d;
  --lk-disp:"Bricolage Grotesque",system-ui,sans-serif;
  --lk-body:Chivo,system-ui,sans-serif;
  background:var(--lk-bg); color:var(--lk-ink); font-family:var(--lk-body);
  line-height:1.6; overflow-x:hidden;
}
.lk *{box-sizing:border-box;}
.lk a{color:var(--lk-teal);text-decoration:none;}
.lk a:hover{color:#5fd3bb;}
.lk-wrap{max-width:1120px;margin:0 auto;padding:0 60px;}
.lk-disp{font-family:var(--lk-disp);font-weight:800;letter-spacing:-.03em;line-height:.98;}
.lk-lbl{font-family:var(--lk-body);font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--lk-mute);}
.lk h1,.lk h2,.lk h3{margin:0;}
.lk p{margin:0;}
.lk img,.lk video{max-width:100%;}

/* ── section rhythm ── */
.lk-sec{padding:110px 0 0;}
.lk-sec-pad{padding:96px 0;}
.lk-panel{background:var(--lk-surface);border-top:1px solid var(--lk-line);border-bottom:1px solid var(--lk-line);}

/* ── hero ── */
.lk-top{position:relative;overflow:hidden;}
.lk-aurora{position:absolute;left:0;right:0;top:0;height:1100px;pointer-events:none;
  background:radial-gradient(95% 46% at 14% -10%,rgba(60,189,163,.30),transparent 62%),
             radial-gradient(80% 42% at 96% 4%,rgba(16,127,109,.32),transparent 64%);
  animation:lk-aurora 26s ease-in-out infinite;will-change:transform;}
.lk-rule{position:absolute;left:0;right:0;top:0;height:3px;background:var(--lk-line);}
.lk-progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--lk-teal),var(--lk-deep) 55%,var(--lk-coral));}
.lk-head{position:relative;padding-top:40px;display:flex;align-items:center;gap:14px;}
.lk-head img{width:42px;height:auto;border-radius:10px;display:block;}
.lk-head .lk-name{font-family:var(--lk-disp);font-weight:800;font-size:23px;letter-spacing:-.01em;}
.lk-head .lk-home{margin-inline-start:auto;font-size:13px;color:var(--lk-mute);}
.lk-kick{display:flex;align-items:center;gap:10px;margin-bottom:26px;}
.lk-kick > span:first-child{width:38px;height:2px;background:var(--lk-coral);display:block;}
.lk-kick > b{font-family:var(--lk-body);font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--lk-teal);}
.lk-hero{position:relative;padding-top:76px;}
.lk-hero h1{font-family:var(--lk-disp);font-weight:800;font-size:clamp(44px,7vw,94px);letter-spacing:-.03em;line-height:.98;margin-bottom:26px;max-width:920px;}
.lk-hero h1 .lk-hot{color:var(--lk-teal);display:block;}
.lk-hero .lk-sub{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--lk-dim);max-width:670px;margin-bottom:36px;}
.lk-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;}
.lk-btn{display:inline-block;padding:16px 30px;font-weight:700;font-size:15px;border-radius:8px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;}
/* These have to out-rank `.lk a` above, which is (0,1,1). Written bare they are
   (0,1,0) and lose, so the solid button drew teal-on-coral — a label you could
   barely read — and the outline button drew teal instead of ink. */
.lk a.lk-btn-solid{background:var(--lk-coral);color:#0b1f1b;}
.lk a.lk-btn-solid:hover{color:#0b1f1b;transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,92,77,.28);}
.lk a.lk-btn-line{border:1px solid var(--lk-line);color:var(--lk-ink);}
.lk a.lk-btn-line:hover{color:var(--lk-ink);transform:translateY(-2px);border-color:var(--lk-teal);}
.lk a.lk-home{color:var(--lk-mute);}
.lk a.lk-home:hover{color:var(--lk-ink);}
.lk-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--lk-mute);}

/* ── healing ramp ── */
.lk-ramp-card{background:var(--lk-surface);border:1px solid var(--lk-line);border-radius:14px;padding:30px 34px;margin-top:62px;position:relative;}
.lk-ramp{display:flex;gap:8px;}
.lk-ramp>div{flex:1;}
.lk-ramp i{display:block;height:5px;transform-origin:left;}
.lk-ramp > b{display:block;font-size:11px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--lk-mute);padding-top:10px;}
/* the app's own STAGE_COLORS, in order */
.lk-ramp>div:nth-child(1) i{background:#c62828;} .lk-ramp>div:nth-child(2) i{background:#d84343;}
.lk-ramp>div:nth-child(3) i{background:#8e44ad;} .lk-ramp>div:nth-child(4) i{background:#b26a00;}
.lk-ramp>div:nth-child(5) i{background:#c9a227;} .lk-ramp>div:nth-child(6) i{background:#7f8c8d;}
.lk-ramp>div:nth-child(7) i{background:#95a5a6;} .lk-ramp>div:nth-child(8) i{background:#d5dbdb;}
.lk-ramp-note{font-size:14.5px;line-height:1.6;color:var(--lk-dim);max-width:760px;margin-top:20px;}

/* ── generic pieces ── */
.lk-h2{font-family:var(--lk-disp);font-weight:800;font-size:clamp(32px,4.4vw,54px);letter-spacing:-.03em;line-height:.98;margin-bottom:22px;}
.lk-lead{font-size:17px;line-height:1.62;color:var(--lk-dim);max-width:800px;}
.lk-quote{background:var(--lk-surface);border-inline-start:3px solid var(--lk-teal);padding:26px 30px;border-radius:0 10px 10px 0;}
.lk-quote.lk-quote-coral{border-inline-start-color:var(--lk-coral);background:var(--lk-bg);}
.lk-quote p{font-size:19px;line-height:1.6;color:var(--lk-ink);max-width:840px;}
.lk-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;}
.lk-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;}
.lk-card-top{border-top:1px solid var(--lk-line);padding-top:18px;}
.lk-card-top h3{font-family:var(--lk-disp);font-weight:800;font-size:26px;letter-spacing:-.02em;margin-bottom:9px;}
.lk-card-top p{font-size:15.5px;line-height:1.62;color:var(--lk-dim);}

/* ── revisions ── */
.lk-pile{border-top:2px solid var(--lk-line);padding-top:16px;}
.lk-pile > b{display:block;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;}
.lk-pile p{font-size:14.5px;line-height:1.6;color:var(--lk-dim);}
.lk-pile:nth-child(1){border-top-color:#6aa9e8;} .lk-pile:nth-child(1) b{color:#6aa9e8;}
.lk-pile:nth-child(2){border-top-color:#3cbda3;} .lk-pile:nth-child(2) b{color:#3cbda3;}
.lk-pile:nth-child(3){border-top-color:#e8935e;} .lk-pile:nth-child(3) b{color:#e8935e;}
.lk-pile:nth-child(4){border-top-color:#f2705a;} .lk-pile:nth-child(4) b{color:#f2705a;}

/* ── chips ── */
.lk-chips{display:flex;gap:10px;flex-wrap:wrap;}
.lk-chips > span{border:1px solid currentColor;padding:7px 15px;border-radius:999px;font-size:12.5px;letter-spacing:.06em;white-space:nowrap;}
/* AA-checked against #061613 */
.lk-chips > span:nth-child(1){color:#f2705a;} .lk-chips > span:nth-child(2){color:#e8935e;}
.lk-chips > span:nth-child(3){color:#ab8cff;} .lk-chips > span:nth-child(4){color:#3cbda3;}
.lk-chips > span:nth-child(5){color:#6aa9e8;} .lk-chips > span:nth-child(6){color:#8aa6ea;}
.lk-chips > span:nth-child(7){color:#e87aac;} .lk-chips > span:nth-child(8){color:#57c184;}

/* ── media: a screenshot, or a silent looping clip in the same slot ── */
/* A step's picture sits OUTSIDE .lk-wrap, so it has to reproduce the wrap's own
   box or it will not line up with the text above it. It previously carried a
   hardcoded 140px inset, which only matched the content column at exactly
   1200px wide and drifted at every other size. */
.lk-media{max-width:1120px;margin:34px auto 0;padding:0 60px;}
.lk-media img,.lk-media video{width:100%;border:1px solid var(--lk-line);border-radius:12px;
  display:block;box-shadow:0 40px 100px rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.lk-media:hover img,.lk-media:hover video{transform:translateY(-6px);}
/* The flat variant is already inside a .lk-wrap; it must not add the box twice. */
.lk-media-flat{max-width:none;margin:0;padding:0;}
.lk-media img.lk-poster{display:none;}
.lk-slot{border:1px dashed var(--lk-line);border-radius:12px;background:var(--lk-surface);aspect-ratio:16/10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;}
.lk-slot > b{font-family:var(--lk-disp);font-weight:800;font-size:24px;}
.lk-slot p{font-size:14px;line-height:1.55;color:var(--lk-dim);max-width:460px;}

/* ── steps ── */
.lk-step{margin-bottom:96px;}
.lk-step .lk-num{font-family:var(--lk-disp);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--lk-teal);margin-bottom:10px;}
.lk-step h3{font-family:var(--lk-disp);font-weight:800;font-size:34px;letter-spacing:-.03em;margin-bottom:14px;}
.lk-step p{font-size:16px;line-height:1.62;color:var(--lk-dim);max-width:760px;}
.lk-step strong{color:var(--lk-coral);font-weight:700;}

/* ── booking ── */
.lk-mini{background:var(--lk-surface);border:1px solid var(--lk-line);border-radius:14px;padding:24px 26px;}
.lk-mini-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.lk-mini-head > span:first-child{font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lk-mute);}
.lk-tag{margin-inline-start:auto;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lk-mute);border:1px solid var(--lk-line);padding:3px 8px;border-radius:4px;}
.lk-row{display:grid;grid-template-columns:1.5fr .8fr .7fr .8fr;gap:8px;padding:11px 0;border-top:1px solid var(--lk-line);font-size:13.5px;}
.lk-row.lk-row-head{border-top:0;padding-bottom:4px;font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lk-mute);}
.lk-row > i{font-style:normal;color:var(--lk-dim);}
.lk-row > u{text-decoration:none;color:var(--lk-teal);font-weight:700;text-align:end;}

/* ── outputs ── */
.lk-out{background:var(--lk-bg);border:1px solid var(--lk-line);border-radius:12px;padding:20px 22px;}
.lk-out h4{font-family:var(--lk-disp);font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:8px;}
.lk-out p{font-size:14px;line-height:1.58;color:var(--lk-dim);}

/* ── offline note ── */
.lk-note{border:1px solid var(--lk-line);border-radius:14px;padding:40px 44px;
  background:linear-gradient(135deg,rgba(60,189,163,.09),transparent 60%);}

/* ── download ── */
.lk-get{text-align:center;}
/* App icon crowning the closing call to action. The rounded-rect mask matches
   the macOS icon grid so the PNG's own corners never show against the panel. */
.lk-get-icon{width:88px;height:88px;display:block;margin:0 auto 26px;border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.42);}
.lk-get .lk-cta-row{justify-content:center;}
.lk-get .lk-sub{font-size:18px;color:var(--lk-dim);max-width:560px;margin:0 auto 34px;}
.lk-ipad{display:inline-flex;align-items:center;gap:14px;border:1px dashed var(--lk-line);border-radius:10px;
  padding:14px 22px;background:rgba(60,189,163,.05);margin-top:26px;}
.lk-ipad > b{font-size:15px;color:var(--lk-ink);}
.lk-ipad > em{font-style:normal;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#0b1f1b;background:var(--lk-teal);padding:4px 9px;border-radius:999px;}

/* ── footer ── */
.lk-foot{padding:44px 0 56px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--lk-mute);}
.lk-foot img{width:26px;height:auto;border-radius:6px;}
.lk-foot a{margin-inline-start:auto;color:var(--lk-mute);}

/* ── motion ── */
@keyframes lk-rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes lk-shot{from{opacity:0;transform:translateY(48px) scale(1.02);}to{opacity:1;transform:none;}}
@keyframes lk-in-l{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:none;}}
@keyframes lk-in-r{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:none;}}
@keyframes lk-aurora{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(2.5%,2%,0) scale(1.10);}100%{transform:translate3d(0,0,0) scale(1);}}
@keyframes lk-wipe{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.lk-rv{opacity:0;}
.lk-rv.lk-in{animation:lk-rise .78s cubic-bezier(.2,.7,.2,1) both;}
.lk-rv-shot.lk-in{animation:lk-shot .95s cubic-bezier(.2,.7,.2,1) both;}
.lk-rv-l.lk-in{animation:lk-in-l .8s cubic-bezier(.2,.7,.2,1) both;}
.lk-rv-r.lk-in{animation:lk-in-r .8s cubic-bezier(.2,.7,.2,1) both;}
.lk-d1{animation-delay:.07s;} .lk-d2{animation-delay:.14s;} .lk-d3{animation-delay:.21s;}
.lk-d4{animation-delay:.28s;} .lk-d5{animation-delay:.35s;}
.lk-ramp i{transform:scaleX(0);}
.lk-ramp-card.lk-in i{animation:lk-wipe .7s cubic-bezier(.2,.7,.2,1) forwards;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(1) i{animation-delay:0s;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(2) i{animation-delay:.075s;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(3) i{animation-delay:.15s;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(4) i{animation-delay:.225s;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(5) i{animation-delay:.3s;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(6) i{animation-delay:.375s;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(7) i{animation-delay:.45s;}
.lk-ramp-card.lk-in>.lk-ramp>div:nth-child(8) i{animation-delay:.525s;}

/* Never hide content from anyone who cannot run the reveal. */
.no-js .lk-rv,.lk-editor .lk-rv{opacity:1;}
.no-js .lk-ramp i,.lk-editor .lk-ramp i{transform:none;}
@media(prefers-reduced-motion:reduce){
  .lk-rv{opacity:1!important;animation:none!important;transform:none!important;}
  .lk-aurora{animation:none;}
  .lk-ramp i{transform:none;animation:none!important;}
  .lk-btn,.lk-media img,.lk-media video{transition:none;}
  .lk-progress{display:none;}
  .lk-media video{display:none;}
  .lk-media video+img.lk-poster{display:block;}
}

/* ── responsive ── */
@media(max-width:1000px){
  .lk-wrap{padding:0 30px;}
  .lk-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lk-media{padding:0 30px;}
}
@media(max-width:720px){
  .lk-sec{padding:72px 0 0;} .lk-sec-pad{padding:64px 0;}
  .lk-grid-2,.lk-grid-4{grid-template-columns:1fr;gap:26px;}
  .lk-hero{padding-top:48px;}
  .lk-cta-row .lk-btn{flex:1 1 100%;text-align:center;}
  .lk-meta{gap:6px 14px;font-size:12px;}
  /* eight stages across a phone squashes the labels to nothing */
  .lk-ramp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;}
  .lk-ramp>div{display:flex;align-items:center;gap:10px;}
  .lk-ramp i{width:26px;height:4px;border-radius:2px;flex:none;}
  .lk-ramp > b{padding-top:0;}
  .lk-row{grid-template-columns:1.4fr .8fr .6fr .8fr;font-size:12.5px;}
  .lk-note{padding:26px 24px;}
}

/* ── hero with a screenshot beside it ──────────────────────────────────
   Two columns from 1000px up, the shot bleeding off the right edge so the
   app reads as something that continues past the page. Below that it
   stacks and the shot sits under the copy at full width.              */
/* The copy column stays wider than the picture: the headline has to hold its
   line breaks, and the wrap itself is left at 1120 so this text lines up with
   every section below it. */
.lk-hero-split{display:grid;grid-template-columns:minmax(0,58%) minmax(0,42%);gap:48px;align-items:center;}
.lk-hero-split h1{font-size:clamp(34px,3.6vw,50px);text-wrap:balance;}
.lk-hero-split .lk-sub{font-size:clamp(16px,1.4vw,17px);margin-bottom:28px;}
.lk-hero-split .lk-cta-row{margin-bottom:20px;}
/* Four items and three middots will not sit on one line in a 580px column, and
   a wrapped line ending in a middot looks like a mistake. Drop the separators
   here and space the items instead. */
.lk-hero-split .lk-meta{gap:6px 20px;}
.lk-hero-split .lk-meta > span:nth-child(even){display:none;}
.lk-hero-shot img,.lk-hero-shot video{width:100%;display:block;border:1px solid var(--lk-line);
  border-radius:14px;box-shadow:0 50px 110px rgba(0,0,0,.7);}
.lk-hero-shot img.lk-poster{display:none;}
/* No bleed. The picture's right edge lines up with the content column, which is
   the same edge every section below it uses — an overshoot here is what makes the
   hero look off-centre against the rest of the page. */
@media(max-width:999px){
  .lk-hero-split{grid-template-columns:1fr;gap:40px;}
  .lk-hero-split h1{font-size:clamp(38px,7vw,60px);}
  .lk-hero-shot{margin-right:0;}
}
@media(prefers-reduced-motion:reduce){
  .lk-hero-shot video{display:none;}
  .lk-hero-shot video+img.lk-poster{display:block;}
}


/* ═══════════════════════════════════════════════════════════════════
   BILINGUAL (7.3) — English/Arabic toggle
   Same mechanism as the main theme (main.css: body.ar / .en / .ara) and the
   same one Soundi's page uses, scoped under .lk instead of body so this page
   never depends on header.php. Every render callback in looksi-blocks.php
   prints BOTH halves of every string; this is the only place that decides
   which one is visible.
   ═══════════════════════════════════════════════════════════════════ */
.lk{--lk-ar:"IBM Plex Sans Arabic","Cairo","Segoe UI",Tahoma,sans-serif;--lk-ar-disp:"Cairo","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;}
.lk .ara{display:none;}
.lk.ar{font-family:var(--lk-ar);direction:rtl;}
.lk.ar .en{display:none!important;}
.lk.ar .ara{display:revert;}

/* Bricolage Grotesque and the wide letter-spacing tuned for it have no Arabic
   glyphs and no reason to exist in Arabic type — every element that sets its
   own display or label font gets Cairo back, tracking reset to 0, and any
   uppercase transform dropped (Arabic has no case to transform). */
.lk.ar .lk-disp,
.lk.ar .lk-head .lk-name,
.lk.ar .lk-hero h1,
.lk.ar .lk-h2,
.lk.ar .lk-card-top h3,
.lk.ar .lk-slot > b,
.lk.ar .lk-step .lk-num,
.lk.ar .lk-step h3,
.lk.ar .lk-out h4{font-family:var(--lk-ar);letter-spacing:0;}
.lk.ar .lk-lbl,
.lk.ar .lk-kick > b,
.lk.ar .lk-ramp > b,
.lk.ar .lk-pile > b,
.lk.ar .lk-mini-head > span:first-child,
.lk.ar .lk-tag,
.lk.ar .lk-row.lk-row-head,
.lk.ar .lk-ipad > em{font-family:var(--lk-ar);letter-spacing:0;text-transform:none;}

/* Border-radius has no shorthand logical equivalent for four independent
   corners, so the one asymmetric radius on the page is mirrored by hand. */
.lk.ar .lk-quote{border-radius:10px 0 0 10px;}

/* ── language toggle — sits in the header row next to the home link ── */
.lk-head{flex-wrap:wrap;row-gap:10px;}
.nh-lang-toggle{display:flex;align-items:center;gap:0;border:1px solid var(--lk-line);
  border-radius:999px;overflow:hidden;margin-inline-start:18px;flex:none;}
.nh-lang-btn{appearance:none;border:0;background:transparent;color:var(--lk-mute);
  font-family:var(--lk-body);font-weight:700;font-size:11px;letter-spacing:.06em;
  padding:7px 13px;cursor:pointer;transition:color .2s,background .2s;}
.nh-lang-btn:hover{color:var(--lk-ink);}
.nh-lang-btn.active{background:var(--lk-teal);color:#0b1f1b;}
.nh-lang-sep{width:1px;align-self:stretch;background:var(--lk-line);}
@media(prefers-reduced-motion:reduce){.nh-lang-btn{transition:none;}}


/* ── Arabic typographic metrics ──────────────────────────────────────────
   The Latin display type here runs at line-height .98 with -.03em tracking,
   settings that only work for a face with a flat baseline and no marks.
   Arabic stacks tall alif and lam ascenders over deep descenders and carries
   dots above and below the line, so at .98 those lines physically collide —
   which is what makes the Arabic read as cluttered. Headings get room to
   breathe, body copy goes to 1.9 (the comfortable measure for Arabic), and
   up a hair in size, since Plex Arabic sets smaller than Chivo at the same
   pixel value. */
.lk.ar .lk-disp,
.lk.ar .lk-hero h1,
.lk.ar h1,.lk.ar h2,.lk.ar h3,.lk.ar h4{font-family:var(--lk-ar-disp);line-height:1.42;letter-spacing:0;}
.lk.ar .lk-hero h1{line-height:1.3;font-size:clamp(34px,5.4vw,70px);}
.lk.ar,
.lk.ar p,.lk.ar li{line-height:1.9;font-size:1.04em;}
.lk.ar .lk-sub,.lk.ar .lk-lead{line-height:1.85;}

/* Tracking tuned to open up Latin smallcaps just pulls Arabic letters out of
   their joins — drop it wherever it is set, along with the uppercasing, which
   Arabic has no concept of. */
.lk.ar [class*="lk-"]{letter-spacing:0;text-transform:none;}

/* Arabic reads better on a slightly narrower measure than Latin. */
.lk.ar p,.lk.ar .lk-lead,.lk.ar .lk-sub{max-width:62ch;}

/* ── working together (nh/looksi-sync) and the continuity-risk cards ─────── */
.lk-hz{gap:18px;margin-top:24px;}
.sy-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;}
.sy-panel{background:linear-gradient(180deg,#0d3530,var(--lk-surface));border:1px solid var(--lk-line);border-radius:18px;padding:26px 24px 20px;}
.sy-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sy-head h3{font-family:var(--lk-disp);font-weight:800;font-size:20px;letter-spacing:-.015em;margin:0;}
.sy-tag{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lk-teal);border:1px solid var(--lk-line);border-radius:999px;padding:4px 10px;white-space:nowrap;}
.sy-panel p{font-size:14.5px;line-height:1.58;color:var(--lk-dim);margin:10px 0 6px;min-height:3.2em;}
.sy-panel svg{display:block;width:100%;height:auto;direction:ltr;}
.sy-panel svg text{font-family:var(--lk-body);}
.sy-cap{font-size:12.5px;color:var(--lk-mute);text-align:center;margin-top:4px;}
.sy-promises{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border:1px solid var(--lk-line);border-radius:18px;overflow:hidden;}
.sy-promise{padding:22px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.sy-promise + .sy-promise{border-inline-start:1px solid var(--lk-line);}
.sy-promise b{font-family:var(--lk-disp);font-weight:800;font-size:17px;}
.sy-promise span{font-size:13px;color:var(--lk-mute);line-height:1.45;max-width:24ch;}
.sy-promise svg{width:28px;height:28px;}
.lk.ar .sy-head h3,.lk.ar .sy-promise b{font-family:var(--lk-ar-disp);letter-spacing:0;}
.lk.ar .sy-tag{letter-spacing:0;}
@media(max-width:820px){.sy-panels,.sy-promises{grid-template-columns:1fr;}.sy-promise + .sy-promise{border-inline-start:0;border-top:1px solid var(--lk-line);}}

/* ── day sheet (nh/looksi-daysheet) ─────────────────────────────────────── */
.ds-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin-top:34px;align-items:start;}
.ds-side{display:grid;gap:24px;}
.ds-fig{margin:0;}
.ds-fig figcaption{margin-top:14px;}
.ds-fig h4{font-family:var(--lk-disp);font-weight:800;font-size:19px;letter-spacing:-.01em;margin:0 0 6px;}
.ds-fig p{font-size:14.5px;line-height:1.58;color:var(--lk-dim);margin:0;max-width:52ch;}
.lk.ar .ds-fig h4{font-family:var(--lk-ar-disp);letter-spacing:0;}
@media(max-width:820px){.ds-grid{grid-template-columns:1fr;}}

/* ── section labels: bigger, brighter, with the brand bar ───────────────── */
.lk-lbl{display:inline-flex;align-items:center;gap:14px;font-size:14px;letter-spacing:.2em;color:var(--lk-teal);}
.lk-lbl::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--lk-coral);flex:none;}
.lk-lead{font-size:18px;color:#bcd6cf;margin-top:6px;}

/* ── click-to-enlarge screenshots ─────────────────────────────────────── */
.lk-media img:not(.lk-poster){cursor:zoom-in;}
.lk-media img:not(.lk-poster):focus-visible{outline:2px solid var(--lk-teal);outline-offset:4px;}
.nh-lb-lock{overflow:hidden;}
.nh-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top,0px)) 24px;background:rgba(3,10,9,.86);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;cursor:zoom-out;}
.nh-lb.is-open{opacity:1;visibility:visible;transition:opacity .25s ease;}
.nh-lb img{max-width:min(1600px,94vw);max-height:88vh;width:auto;height:auto;border-radius:12px;
  border:1px solid var(--lk-line);box-shadow:0 30px 90px rgba(0,0,0,.6);transform:scale(.96);transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.nh-lb.is-open img{transform:scale(1);}
.nh-lb-x{position:absolute;top:max(18px,env(safe-area-inset-top,0px));inset-inline-end:22px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--lk-line);background:var(--lk-surface);color:var(--lk-ink);font-size:24px;line-height:1;cursor:pointer;}
.nh-lb-x:focus-visible{outline:2px solid var(--lk-teal);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){.nh-lb,.nh-lb img{transition:none;}}

/* ── the department edge: text beside one small screenshot ──────────────── */
.lk-team-top{align-items:start;gap:56px;margin:36px 0 40px;}
.lk-team-shot{justify-self:end;width:100%;max-width:440px;}
.lk-team-shot .lk-media{max-width:none;margin:0;padding:0;}
.lk-team-top>div:first-child p:first-child{margin-top:0;}
@media(max-width:820px){.lk-team-shot{justify-self:start;}}

/* ---- Film under the hero ---- */
.lk-vid-sec{padding-top:64px;}
.lk-vid-sec .lk-lead{max-width:640px;margin-bottom:30px;}
.lk-vid{position:relative;}
.lk-vid::before{content:"";position:absolute;inset:8% 4% -6%;background:radial-gradient(60% 60% at 50% 50%,var(--lk-coral),transparent 70%);opacity:.22;filter:blur(40px);z-index:0;pointer-events:none;}
.lk-vid-stage{position:relative;z-index:1;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--lk-line);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.7);}
.lk-vid-stage video,.lk-vid-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;}
.lk-vid-play{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:pointer;display:block;color:#fff;}
.lk-vid-play img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;filter:brightness(.9);transition:filter .35s ease,transform .6s ease;}
.lk-vid-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.25));}
.lk-vid-btn{position:absolute;z-index:2;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--lk-coral);color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 40px rgba(0,0,0,.5);transition:transform .25s ease;}
.lk-vid-btn svg{margin-inline-start:4px;}
.lk-vid-btn::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--lk-coral);opacity:.55;animation:lk-ring 2.6s ease-out infinite;}
@keyframes lk-ring{0%{transform:scale(.86);opacity:.6;}100%{transform:scale(1.35);opacity:0;}}
.lk-vid-cap{position:absolute;z-index:2;inset-inline:22px;bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;font-size:14px;letter-spacing:.06em;}
.lk-vid-cap>span{background:rgba(6,22,19,.78);padding:8px 16px;border-radius:99px;}
.lk-vid-cap b{font-weight:700;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:99px;}
.lk-vid-play:hover img{filter:brightness(1);transform:scale(1.02);}
.lk-vid-play:hover .lk-vid-btn{transform:scale(1.07);}
.lk-vid-play:focus-visible{outline:3px solid var(--lk-teal);outline-offset:-3px;}
@media(max-width:820px){.lk-vid-sec{padding-top:44px;}.lk-vid-btn{width:70px;height:70px;margin:-35px 0 0 -35px;}.lk-vid-cap{inset-inline:14px;bottom:12px;font-size:13px;}}
@media(prefers-reduced-motion:reduce){.lk-vid-btn::before{animation:none;}.lk-vid-play img{transition:none;}}