/* Lumos design system — "light on the work".
   Dark stage, one warm light (#ed6336), editorial serif headlines, real work as imagery.
   Added 2026-10-18. Loaded by mu-plugins/lumos-site-enhancements.php. */

@font-face{font-family:"Lumos Serif";src:url(/wp-content/uploads/lumos-fonts/instrument-serif-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lumos Serif";src:url(/wp-content/uploads/lumos-fonts/instrument-serif-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lumos Sans";src:url(/wp-content/uploads/elementor/google-fonts/fonts/manrope-xn7gyhe41ni1adirggexsg.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Lumos Label";src:url(/wp-content/uploads/2025/04/monument-1.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --lx-ink:#0d0d0d; --lx-char:#222222; --lx-paper:#f3efe7; --lx-white:#fff; --lx-o:#ed6336; --lx-o-deep:#c9481e;
  --lx-line-d:rgba(255,255,255,.14); --lx-line-l:rgba(13,13,13,.14);
  --lx-mute-d:rgba(255,255,255,.66); --lx-mute-l:rgba(13,13,13,.64);
  --lx-serif:"Lumos Serif","Iowan Old Style","Times New Roman",serif;
  --lx-sans:"Lumos Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lx-label:"Lumos Label","Lumos Sans",sans-serif;
  --lx-gut:clamp(20px,4vw,64px); --lx-max:1320px;
  --lx-page-pad:max(var(--lx-gut),calc((100% - var(--lx-max)) / 2 + var(--lx-gut))); /* page-wide bars (header, footer) inset to the content edge; % resolves where used */
  --lx-ease:cubic-bezier(.2,.7,.1,1);
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* ---------- base ---------- */
.lx-sec,.lx-hero,.lx-close,.lx-case{--rule:var(--lx-line-d)}
.lx-paper{--rule:var(--lx-line-l)}
body{background:var(--lx-ink)}
.lx{overflow-x:clip;font-family:var(--lx-sans);font-size:clamp(16px,1.15vw,18px);line-height:1.65;color:var(--lx-white);background:var(--lx-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.lx *{box-sizing:border-box}
.lx p{margin:0 0 1em}
.lx img{max-width:100%;height:auto;display:block}
.lx a{color:inherit}
.lx :focus-visible{outline:2px solid var(--lx-o);outline-offset:4px;border-radius:2px}
.lx-wrap{max-width:var(--lx-max);margin:0 auto;padding:0 var(--lx-gut)}
.lx-sec{padding:clamp(88px,11vw,168px) 0;position:relative}
.lx-sec--tight{padding:clamp(64px,7vw,104px) 0}
.lx-paper{background:var(--lx-paper);color:var(--lx-ink)}
.lx-char{background:var(--lx-char)}
.lx-paper .lx-mute{color:var(--lx-mute-l)}
.lx-mute{color:var(--lx-mute-d)}

/* type */
.lx h1,.lx h2,.lx h3,.lx .lx-display{font-family:var(--lx-serif);font-weight:400;letter-spacing:-.012em;line-height:1.02;margin:0;color:inherit;text-transform:none}
.lx h1{font-size:clamp(44px,5.7vw,98px)}
.lx h2{font-size:clamp(36px,5vw,76px)}
.lx h3{font-size:clamp(26px,2.4vw,36px);line-height:1.1}
.lx h1 em,.lx h2 em,.lx h3 em,.lx-display em{font-style:italic;color:var(--lx-o)}
.lx-lede{font-size:clamp(19px,1.6vw,23px);line-height:1.55;max-width:38ch}
.lx-statement{font-family:var(--lx-serif);font-size:clamp(30px,3.6vw,54px);line-height:1.14;letter-spacing:-.01em;max-width:24ch;margin:0}
.lx-label{font-family:var(--lx-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.lx-line{display:block}

/* chapter marker: number + label + hairline that draws in */
.lx-chapter{display:flex;align-items:center;gap:18px;margin:0 0 clamp(40px,5vw,72px)}
.lx-chapter .lx-label{white-space:nowrap}
.lx-chapter .lx-n{color:var(--lx-o)}
.lx-chapter::after{content:"";flex:1;height:1px;background:rgba(128,128,128,.32);background:color-mix(in srgb,currentColor 18%,transparent);transform-origin:left;transform:scaleX(var(--lx-draw,1));transition:transform 1.2s var(--lx-ease)}

/* links & buttons */
.lx-btn{display:inline-flex;align-items:center;gap:12px;padding:17px 26px;background:var(--lx-o);color:#fff !important;font-family:var(--lx-sans);font-weight:600;font-size:16px;line-height:1.1;text-decoration:none;border-radius:2px;transition:background .25s,transform .25s var(--lx-ease)}
.lx-btn:hover{background:var(--lx-o-deep)}
.lx-btn .lx-arr{transition:transform .3s var(--lx-ease)}
.lx-btn:hover .lx-arr{transform:translateX(4px)}
.lx-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--lx-ease),color .2s}
.lx-link:hover{color:var(--lx-o);background-size:0 1px;background-position:100% 100%}
.lx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:clamp(28px,3vw,44px)}
.lx-note{font-size:14px;margin-top:14px}

/* email presented as a CTA, not raw text */
.lx-mail{display:inline-block;max-width:100%}
.lx-mail .lx-label{display:block;margin-bottom:8px;opacity:.7}
.lx-mail a{font-family:var(--lx-serif);font-size:clamp(26px,2.7vw,42px);line-height:1.15;text-decoration:none;overflow-wrap:break-word;background:linear-gradient(var(--lx-o),var(--lx-o)) 0 100%/0 2px no-repeat;transition:background-size .45s var(--lx-ease),color .2s;padding-bottom:4px}
.lx-mail a:hover,.lx-mail a:focus-visible{background-size:100% 2px;color:var(--lx-o)}
.lx-inline-mail{color:inherit;text-decoration:underline;text-decoration-color:var(--lx-o);text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.lx-inline-mail:hover{color:var(--lx-o)}

/* ---------- hero ---------- */
.lx-hero{min-height:min(calc(100svh - 80px),900px);display:flex;align-items:center;padding:clamp(48px,6vw,96px) 0 clamp(64px,7vw,104px);overflow:hidden;position:relative;isolation:isolate}
.lx-hero::before{content:"";position:absolute;inset:auto -10% -40% 30%;height:90%;background:radial-gradient(closest-side,rgba(237,99,54,.20),rgba(237,99,54,0));z-index:-1;pointer-events:none}
.lx-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.lx-hero__eyebrow{color:var(--lx-mute-d);margin-bottom:clamp(22px,3vw,36px)}
.lx-hero h1{margin-bottom:clamp(24px,3vw,40px)}
.lx-hero .lx-lede{color:var(--lx-mute-d)}
.lx-hero__art{position:relative;height:clamp(420px,46vw,640px)}
.lx-plate{position:absolute;margin:0;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);border-radius:6px;overflow:hidden;background:#111}
.lx-plate img{width:100%}
.lx-hero__art .lx-plate{width:44%}
.lx-hero__art .lx-plate:nth-of-type(1){left:0;top:12%;z-index:2}
.lx-hero__art .lx-plate:nth-of-type(2){left:30%;top:0;z-index:3;width:46%}
.lx-hero__art .lx-plate:nth-of-type(3){right:0;top:20%;z-index:1;opacity:.75}
.lx-cap{position:absolute;left:0;bottom:-34px;font-size:12px;color:var(--lx-mute-d);white-space:nowrap}
.lx-rays{position:absolute;width:clamp(120px,11vw,170px);right:2%;top:-4%;z-index:5;color:var(--lx-o);opacity:.9;pointer-events:none}
.lx-rays path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--len,200);stroke-dashoffset:0}

/* hero variants */
.lx-hero__art--wide .lx-plate:nth-of-type(n){width:80%}
.lx-hero__art--wide .lx-plate:nth-of-type(1){left:0;top:4%}
.lx-hero__art--wide .lx-plate:nth-of-type(2){left:auto;right:0;top:40%;opacity:1}
.lx-hero__art--rays{height:clamp(260px,30vw,460px)}
.lx-hero__art--rays .lx-rays{position:absolute;width:100%;max-width:460px;right:0;top:50%;transform:translateY(-50%);opacity:1}

/* ---------- split (two audiences) ---------- */
.lx-split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.lx-split>div{padding:clamp(36px,4vw,64px) clamp(0px,3vw,48px) 0 0}
.lx-split>div+div{border-left:1px solid var(--rule);padding-left:clamp(24px,4vw,64px);padding-right:0}
.lx-split h3{font-size:clamp(34px,3.6vw,56px);margin:14px 0 22px}
.lx-split p{max-width:44ch}
.lx-ticks{list-style:none;margin:26px 0 30px;padding:0;border-top:1px solid var(--rule)}
.lx-ticks li{padding:14px 0;border-bottom:1px solid var(--rule);display:flex;gap:14px;align-items:baseline}
.lx-ticks li::before{content:"";flex:0 0 18px;height:1px;background:var(--lx-o);transform:translateY(-4px)}

/* ---------- work rows ---------- */
.lx-work{display:grid;gap:clamp(64px,8vw,120px)} /* was 80–150px: on the home page the rows read as separate islands */
.lx-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:center}
.lx-row__media{grid-column:1 / span 7;position:relative}
.lx-row__text{grid-column:9 / span 4}
.lx-row--flip .lx-row__media{grid-column:6 / span 7;order:2}
.lx-row--flip .lx-row__text{grid-column:1 / span 4;order:1}
.lx-row--phone .lx-row__media{grid-column:2 / span 4}
.lx-row--phone.lx-row--flip .lx-row__media{grid-column:8 / span 4}
.lx-row--phone .lx-row__text{grid-column:7 / span 5}
.lx-row--phone.lx-row--flip .lx-row__text{grid-column:2 / span 5}
.lx-row figure{margin:0;border-radius:6px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.lx-row h3{margin:16px 0 18px}
.lx-row .lx-label{color:var(--lx-o)}
.lx-row p{color:var(--lx-mute-d)}
.lx-paper .lx-row p{color:var(--lx-mute-l)}
.lx-paper .lx-row figure{box-shadow:0 40px 80px -40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)}

/* ---------- typographic client list ---------- */
.lx-names{font-family:var(--lx-serif);font-size:clamp(30px,4.2vw,64px);line-height:1.18;letter-spacing:-.01em;margin:0}
.lx-names a,.lx-names span{text-decoration:none;transition:color .2s;white-space:nowrap}
.lx-names a:hover{color:var(--lx-o)}
.lx-names i{font-style:normal;color:var(--lx-o);padding:0 .22em;font-size:.6em;vertical-align:.25em}

/* ---------- steps on a line ---------- */
.lx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:0;counter-reset:s;position:relative}
.lx-steps::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:currentColor;opacity:.2}
.lx-steps li{counter-increment:s;padding:44px clamp(12px,2vw,28px) 0 0;position:relative}
.lx-steps li::before{content:"";position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;background:var(--lx-o);box-shadow:0 0 0 6px rgba(237,99,54,.16)}
.lx-steps b{display:block;font-family:var(--lx-serif);font-weight:400;font-size:clamp(24px,2.1vw,32px);line-height:1.1;margin-bottom:12px}
.lx-steps b::before{content:counter(s,decimal-leading-zero) " ";font-family:var(--lx-label);font-size:11px;letter-spacing:.14em;color:var(--lx-o);vertical-align:.6em;margin-right:6px}
.lx-steps p{font-size:15.5px;opacity:.75;margin:0}

/* ---------- definition rows (services, problems, plans) ---------- */
.lx-rows{border-top:1px solid var(--rule)}
.lx-rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:clamp(16px,3vw,56px);padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.lx-rows h3{font-size:clamp(26px,2.5vw,38px)}
.lx-rows p{margin:0;opacity:.8}
.lx-rows .lx-link{white-space:nowrap}
.lx-rows--num{counter-reset:r}
.lx-rows--num>div{grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr)}
.lx-rows--num>div::before{counter-increment:r;content:counter(r,decimal-leading-zero);font-family:var(--lx-label);font-size:11px;letter-spacing:.14em;color:var(--lx-o)}

/* intro block: heading left, copy right */
.lx-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
/* an intro whose right column is a list (the store review) is read from the top: the heading's first line sits on the same
   baseline as the first list item instead of sinking to the bottom of the tall column, level with the button. 2026-10-21 */
.lx-intro:has(>div>.lx-ticks){align-items:baseline}
.lx-intro p{margin:0;max-width:46ch}

/* ---------- plans ---------- */
.lx-plans{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule)}
.lx-plans>div{padding:clamp(32px,4vw,56px) clamp(0px,3vw,48px) 0 0}
.lx-plans>div+div{border-left:1px solid var(--rule);padding-left:clamp(24px,4vw,56px)}
.lx-plans h3{margin:12px 0 18px}

/* ---------- FAQ ---------- */
.lx-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,110px);align-items:start}
.lx-faq__head{position:sticky;top:120px}
.lx-faq details{border-bottom:1px solid var(--rule)}
.lx-faq details:first-child{border-top:1px solid var(--rule)}
.lx-faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-size:clamp(18px,1.4vw,21px);font-weight:600;line-height:1.35}
.lx-faq summary::-webkit-details-marker{display:none}
.lx-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--lx-o),var(--lx-o)) center/14px 2px no-repeat,linear-gradient(var(--lx-o),var(--lx-o)) center/2px 14px no-repeat;transition:transform .3s var(--lx-ease)}
.lx-faq details[open] summary::after{transform:rotate(45deg)}
.lx-faq details p{padding:0 44px 26px 0;margin:0;opacity:.8;max-width:62ch}

/* ---------- closing ---------- */
.lx-close{padding:clamp(110px,14vw,210px) 0;overflow:hidden;position:relative;isolation:isolate}
.lx-close::before{content:"";position:absolute;left:50%;bottom:-55%;width:120%;height:100%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(237,99,54,.28),rgba(237,99,54,0));z-index:-1}
.lx-close h2{font-size:clamp(48px,8vw,128px);max-width:12ch}
.lx-close__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,6vw,96px);align-items:end;margin-top:clamp(36px,4vw,60px)}
.lx-close__grid p{color:var(--lx-mute-d);max-width:44ch}

/* ---------- facts strip (case studies) ---------- */
.lx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 0 clamp(48px,6vw,80px);padding:0;list-style:none}
.lx-facts li{padding:20px 20px 20px 0}
.lx-facts .lx-label{display:block;color:var(--lx-mute-d);margin-bottom:6px}
.lx-case{max-width:var(--lx-max);margin:0 auto;padding:0 var(--lx-gut) clamp(80px,9vw,140px)}
.lx-case__plates{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:clamp(16px,2.5vw,36px);align-items:end;margin-bottom:clamp(56px,7vw,100px)}
.lx-case__plates figure{margin:0;border-radius:6px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.lx-case__plates figcaption,.lx-figcap{font-size:13px;color:var(--lx-mute-d);margin-top:12px}
.lx-case__body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,90px);border-top:1px solid var(--rule);padding-top:clamp(32px,4vw,56px);margin-top:clamp(32px,4vw,56px)}
.lx-case__body h2{font-size:clamp(30px,3vw,44px)}
.lx-case__body p{color:var(--lx-mute-d);max-width:60ch}

/* ---------- motion ---------- */
.lx-js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--lx-ease),transform 1.1s var(--lx-ease);transition-delay:var(--d,0s)}
.lx-js [data-reveal].is-in{opacity:1;transform:none}
.lx-js .lx-chapter{--lx-draw:0}
.lx-js .lx-chapter.is-in{--lx-draw:1}
/* chapters light in turn: as each chapter marker arrives, its rule draws out from the number with a point of light at the drawing
   tip (the light sits at the rule's far end, so the scaleX draw carries it), which then slips off the end and leaves the plain rule:
   one thin thread of light carried from chapter to chapter. Paint-only on a 1px line; runs once per chapter. 2026-10-21 */
.lx-js .lx-chapter.is-in::after{--lx-seam:linear-gradient(90deg,rgba(237,99,54,0),var(--lx-o) 72%,#ffd6c4 96%,rgba(237,99,54,0));background:var(--lx-seam) no-repeat,color-mix(in srgb,currentColor 18%,transparent);background-size:18% 100%,100% 100%;animation:lx-seam 2.2s ease-in both}
@keyframes lx-seam{0%,50%{background-position:100% 0,0 0}100%{background-position:140% 0,0 0}}
/* reveal mask: a clip-path with room for descenders/marks (overflow:hidden cut g/y/p tails at line-height 1.02); no layout change. 2026-10-19 */
.lx-js .lx-hero .lx-line{clip-path:inset(-.4em -.25em -.6em -.25em)}
.lx-js .lx-hero .lx-line>span{display:inline-block;transform:translateY(calc(105% + 1em));animation:lx-up 1.1s var(--lx-ease) forwards;animation-delay:calc(.12s + var(--i,0) * .09s)}
.lx-js .lx-hero__fade{opacity:0;animation:lx-fade 1s var(--lx-ease) .55s forwards}
.lx-js .lx-hero__art .lx-plate{opacity:0;animation:lx-plate 1.4s var(--lx-ease) forwards;animation-delay:calc(.35s + var(--i,0) * .15s)}
.lx-js .lx-hero__art .lx-plate:nth-of-type(3){animation-name:lx-plate3}
.lx-js .lx-rays path{stroke-dashoffset:var(--len,200);animation:lx-draw 1.6s var(--lx-ease) forwards;animation-delay:calc(.6s + var(--i,0) * .06s)}
@keyframes lx-up{to{transform:none}}
@keyframes lx-fade{to{opacity:1}}
@keyframes lx-plate{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lx-plate3{from{opacity:0;transform:translateY(40px)}to{opacity:.75;transform:none}}
@keyframes lx-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .lx-js [data-reveal],.lx-js .lx-hero .lx-line>span,.lx-js .lx-hero__fade,.lx-js .lx-hero__art .lx-plate,.lx-js .lx-rays path{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important;stroke-dashoffset:0 !important}
  .lx-js .lx-hero__art .lx-plate:nth-of-type(3){opacity:.75 !important}
  .lx-js .lx-chapter{--lx-draw:1}
  @view-transition{navigation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .lx-hero__grid{grid-template-columns:1fr}
  .lx-hero__art{height:clamp(380px,80vw,560px);max-width:620px}
  .lx-row,.lx-row--flip{grid-template-columns:1fr}
  .lx-row__media,.lx-row__text,.lx-row--flip .lx-row__media,.lx-row--flip .lx-row__text,.lx-row--phone .lx-row__media,.lx-row--phone .lx-row__text,.lx-row--phone.lx-row--flip .lx-row__media,.lx-row--phone.lx-row--flip .lx-row__text{grid-column:1 / -1;order:0}
  .lx-row--phone .lx-row__media{max-width:340px}
  .lx-steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .lx-steps::before{display:none}
}
@media (max-width:767px){
  .lx-split,.lx-plans,.lx-intro,.lx-faq,.lx-close__grid,.lx-case__body,.lx-case__plates{grid-template-columns:1fr}
  .lx-split>div+div,.lx-plans>div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .lx-split>div,.lx-plans>div{padding-right:0;padding-bottom:36px}
  .lx-rows>div,.lx-rows--num>div{grid-template-columns:1fr;gap:10px}
  .lx-steps{grid-template-columns:1fr}
  .lx-faq__head{position:static}
  .lx-hero{min-height:auto}
  .lx-hero__art{height:auto;display:flex;gap:12px;margin-top:8px}
  .lx-hero__art .lx-plate{position:relative;inset:auto !important;width:33% !important;opacity:1}
  .lx-hero__art .lx-plate:nth-of-type(2){transform:translateY(-18px)}
  .lx-js .lx-hero__art .lx-plate:nth-of-type(3){animation-name:lx-plate}
  .lx-cap{display:none}
  .lx-rays{width:240px;right:-90px;top:-40px;opacity:.6}
  .lx-actions .lx-btn{width:100%;justify-content:center}
}

/* ---------- site chrome (header/footer/other templates) ---------- */
.elementor-location-header,.elementor-location-header .e-con.e-parent,.elementor-location-header .e-con.e-parent::before{background:var(--lx-ink) !important;background-color:var(--lx-ink) !important}
.elementor-location-header .e-con.e-parent{backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
/* header bar: one row on the page grid, everything on the bar's midline. The logo starts where the content starts and the menu
   (or the phone toggle) ends where the content ends. Elementor's layout had fixed 25%/75% columns (phones 70%/30%), a logo
   right-aligned inside its column at 60% width, and a flex-end on the column-direction menu container, which dropped the menu to
   the bottom of the bar 16px below the logo. 2026-10-21 */
.elementor-location-header .elementor-element.e-con.e-parent{--padding-left:var(--lx-page-pad);--padding-right:var(--lx-page-pad);--align-items:center;--gap:0 24px;--flex-wrap:nowrap}
.elementor-location-header .elementor-element.elementor-element-be2346f,.elementor-location-header .elementor-element.elementor-element-c322552{--width:auto;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--justify-content:center}
.elementor-location-header .e-con.e-child.elementor-element-be2346f{--flex-grow:0;--flex-shrink:0}
.elementor-location-header .e-con.e-child.elementor-element-c322552{--flex-grow:1;--flex-shrink:1;--align-items:flex-end;min-width:0}
.elementor-location-header .elementor-element.header-logo{text-align:start}
.elementor-location-header .header-logo a{display:block;line-height:0}
.elementor-location-header .elementor-element.header-logo img{display:block;width:auto;height:24px;max-height:none}
.elementor-location-header .elementor-nav-menu--main{justify-content:flex-end}
.elementor-location-header .elementor-menu-toggle{--lx-tg-pad:11px;align-self:flex-end;padding:var(--lx-tg-pad);margin-inline-end:calc(-1 * var(--lx-tg-pad))} /* 44px target; the icon itself lines up with the content edge */
@media (max-width:767px){.elementor-location-header .elementor-element.header-logo img{height:22px}}
.elementor-location-header .elementor-nav-menu--main .elementor-item{font-family:var(--lx-sans) !important;text-transform:none !important;font-weight:500 !important;font-size:15px !important;letter-spacing:0 !important;color:rgba(255,255,255,.82) !important;padding:10px 14px !important}
@media (max-width:1180px){.elementor-location-header .elementor-nav-menu--main .elementor-item{padding:10px 9px !important}}
@media (max-width:900px){.elementor-location-header .elementor-nav-menu--main .elementor-item{font-size:14px !important;padding:10px 8px !important}} /* seven items stay on one row down to 768px (EN 434px of text) */
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#fff !important}
.elementor-location-header .elementor-nav-menu--main .elementor-item::before,.elementor-location-header .elementor-nav-menu--main .elementor-item::after{background:var(--lx-o) !important;height:1px !important;bottom:4px !important;top:auto !important}
.elementor-location-header .elementor-nav-menu--main .menu-item:last-child .elementor-item{border:1px solid rgba(255,255,255,.4);margin-inline-start:12px;border-radius:2px;color:#fff !important}
.elementor-location-header .elementor-nav-menu--main .menu-item:last-child .elementor-item:hover{background:var(--lx-o) !important;border-color:var(--lx-o)}
.elementor-location-header .elementor-nav-menu--main .menu-item:last-child .elementor-item::before,.elementor-location-header .elementor-nav-menu--main .menu-item:last-child .elementor-item::after{display:none}
.elementor-location-header .elementor-menu-toggle{color:#fff !important;background:transparent !important}
.elementor-location-header .elementor-menu-toggle svg{fill:#fff !important}
.elementor-location-header .elementor-nav-menu--dropdown{background:var(--lx-ink) !important;border-top:1px solid var(--rule)}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item{font-family:var(--lx-sans) !important;text-transform:none !important;font-size:20px !important;font-weight:500 !important;color:#fff !important;background:transparent !important;padding:16px 24px !important;letter-spacing:0 !important}
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover{color:var(--lx-o) !important}
.elementor-location-footer{background:var(--lx-ink)}
/* footer content on the same edges as the header and the page (Elementor gave it 10% side padding: x=43 vs content x=118 at 1440). Footer #68 and its Arabic clone #1099 share the container ID. 2026-10-21 */
.elementor-location-footer .elementor-element.e-con.elementor-element-030a1e9{--padding-left:var(--lx-page-pad);--padding-right:var(--lx-page-pad)}
.elementor-location-footer,.elementor-location-footer .elementor-heading-title,.elementor-location-footer a{font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important}
.elementor-location-footer .elementor-heading-title{color:rgba(255,255,255,.7) !important;font-size:15px !important;font-weight:400 !important;line-height:1.6 !important}
.elementor-location-footer .elementor-heading-title a{color:#fff !important;text-decoration:none}
.elementor-location-footer .elementor-heading-title a:hover{color:var(--lx-o) !important}
.elementor-location-footer .elementor-heading-title a[href^="mailto:"]{text-decoration:underline;text-decoration-color:var(--lx-o);text-underline-offset:4px;overflow-wrap:anywhere}
/* project single + listing + generic pages adopt the palette */
.single-project .elementor-location-single,.page-id-55 .elementor,.page-id-760 .elementor{background:var(--lx-ink);color:#fff}
.single-project .elementor-location-single .elementor-heading-title{font-family:var(--lx-serif) !important;text-transform:none !important;font-weight:400 !important;letter-spacing:-.01em !important;color:#fff !important}
.single-project .elementor-location-single .elementor-widget-heading:first-child .elementor-heading-title,.single-project .elementor-location-single h2.elementor-heading-title{font-family:var(--lx-label) !important;font-size:11px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--lx-o) !important}
.single-project .elementor-location-single h1.elementor-heading-title{font-size:clamp(48px,8vw,120px) !important;line-height:1 !important;font-family:var(--lx-serif) !important;text-transform:none !important;letter-spacing:-.015em !important;color:#fff !important}
.single-project .elementor-location-single .elementor-button{background:transparent !important;border:1px solid rgba(255,255,255,.4) !important;border-radius:2px !important;font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important;color:#fff !important}
.single-project .elementor-location-single .elementor-button:hover{background:var(--lx-o) !important;border-color:var(--lx-o) !important}
.single-project .elementor-post-navigation a,.single-project .elementor-post-navigation span{color:rgba(255,255,255,.7) !important;font-family:var(--lx-sans) !important;text-transform:none !important}

.elementor-location-header .elementor-nav-menu--main>.elementor-nav-menu{justify-content:flex-end}
.lx-mail a .lx-at{white-space:nowrap}

/* ---------- contact page (Elementor page #57: heading, routes, Calendly heading, form) ---------- */
.page-id-57 .elementor-57{background:var(--lx-ink);color:#fff;padding:clamp(48px,7vw,110px) var(--lx-gut)}
.page-id-57 .elementor-57>.e-con{max-width:var(--lx-max);margin:0 auto;background:transparent !important}
.page-id-57 .elementor-57 .e-con{background:transparent !important}
.page-id-57 .elementor-widget-heading h1.elementor-heading-title{font-family:var(--lx-serif) !important;font-weight:400 !important;text-transform:none !important;font-size:clamp(44px,6vw,96px) !important;line-height:1.02 !important;letter-spacing:-.012em !important;color:#fff !important}
.page-id-57 .elementor-widget-heading h1 em{color:var(--lx-o);font-style:italic}
.page-id-57 .elementor-widget-heading h2.elementor-heading-title{font-family:var(--lx-sans) !important;text-transform:none !important;font-size:18px !important;font-weight:500 !important;color:rgba(255,255,255,.7) !important;letter-spacing:0 !important}
.page-id-57 .elementor-widget-heading h2.elementor-heading-title a{color:var(--lx-o) !important}
.page-id-57 .elementor-form .elementor-field-label{font-family:var(--lx-label) !important;font-size:11px !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:rgba(255,255,255,.66) !important;font-weight:400 !important}
.page-id-57 .elementor-form .elementor-field-textual{background:transparent !important;border:0 !important;border-bottom:1px solid rgba(255,255,255,.3) !important;border-radius:0 !important;color:#fff !important;font-family:var(--lx-sans) !important;font-size:18px !important;padding:12px 0 !important}
.page-id-57 .elementor-form .elementor-field-textual:focus{border-bottom-color:var(--lx-o) !important;box-shadow:none !important;outline:none}
.page-id-57 .elementor-form .elementor-field-textual:focus-visible{outline:2px solid var(--lx-o) !important;outline-offset:4px}
.page-id-57 .elementor-form .elementor-button{background:var(--lx-o) !important;border-radius:2px !important;font-family:var(--lx-sans) !important;font-weight:600 !important;text-transform:none !important;letter-spacing:0 !important;padding:17px 30px !important}
.page-id-57 .elementor-form .elementor-button:hover{background:var(--lx-o-deep) !important}
.page-id-57 .elementor-message{color:#fff}
.page-id-57 .lx-rows>div{grid-template-columns:1fr;gap:8px}
.page-id-57 .elementor-widget-heading h1.elementor-heading-title,.page-id-57 .elementor-element-3172280 .elementor-heading-title{text-align:left !important}
.page-id-57 .elementor-element-3172280 .elementor-heading-title a,.page-id-57 .elementor-element-3172280 .elementor-heading-title span{font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important;font-size:18px !important;font-weight:600 !important}
.page-id-57 .elementor-form .elementor-field-textual{text-align:left !important}
.page-id-57 .elementor-form .elementor-field-textual::placeholder{color:rgba(255,255,255,.55)}
.single-project .elementor-location-single>.e-con,.single-project .elementor-location-single .e-con{background-color:var(--lx-ink) !important;background-image:none !important}
.single-project .elementor-location-single .elementor-widget-heading:not(:has(h1)) .elementor-heading-title{font-family:var(--lx-label) !important;font-size:11px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--lx-o) !important}
.single-project .elementor-location-single .elementor-widget-text-editor{color:rgba(255,255,255,.7)}

/* ---------- work index (/projects/: Elementor loop grid #931f23a + taxonomy filter; cards from [lumos_project_card]) ---------- */
.page-id-55 .elementor-55>.e-con{background:var(--lx-ink) !important}
.page-id-55 .elementor-widget-heading h1.elementor-heading-title{font-family:var(--lx-serif) !important;font-weight:400 !important;text-transform:none !important;letter-spacing:-.012em !important;font-size:clamp(56px,9vw,136px) !important;line-height:.98 !important;color:#fff !important}
.page-id-55 .elementor-widget-heading h1 .highlighted{font-style:italic;color:var(--lx-o) !important}
.page-id-55 .elementor-widget-text-editor{font-family:var(--lx-sans);font-size:18px;color:rgba(255,255,255,.72);max-width:720px;margin:0 auto}
.page-id-55 .elementor-widget-text-editor a{color:#fff;text-decoration:underline;text-decoration-color:var(--lx-o);text-underline-offset:4px}
.page-id-55 .elementor-widget-taxonomy-filter .e-filter{gap:4px 28px !important;border-bottom:1px solid var(--lx-line-d);padding-bottom:0 !important}
.page-id-55 .elementor-widget-taxonomy-filter .e-filter-item{font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important;font-weight:500 !important;font-size:16px !important;color:rgba(255,255,255,.62) !important;background:transparent !important;border:0 !important;border-bottom:2px solid transparent !important;border-radius:0 !important;padding:14px 2px !important;margin-bottom:-1px;transition:color .2s,border-color .2s}
.page-id-55 .elementor-widget-taxonomy-filter .e-filter-item:hover{color:#fff !important}
.page-id-55 .elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]{color:#fff !important;border-bottom-color:var(--lx-o) !important}
.page-id-55 .elementor-widget-taxonomy-filter .e-filter-item:focus-visible{outline:2px solid var(--lx-o) !important;outline-offset:4px}
.page-id-55 .elementor-loop-container.elementor-grid{column-gap:clamp(28px,4vw,72px) !important;row-gap:clamp(64px,7vw,112px) !important;padding-bottom:clamp(40px,8vw,120px)}
.page-id-55 .elementor-loop-container .e-loop-item{transition:opacity .45s var(--lx-ease)}
.page-id-55 .elementor-widget-loop-grid.e-loading .e-loop-item,.page-id-55 .e-load-more-spinner+*{opacity:.35}
@media (min-width:768px){.page-id-55 .elementor-loop-container>.e-loop-item:nth-child(even of .e-loop-item){transform:translateY(clamp(48px,7vw,120px))}}
.page-id-55 .elementor-pagination{font-family:var(--lx-sans) !important;padding-top:40px}
.page-id-55 .elementor-pagination a,.page-id-55 .elementor-pagination span{font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important;color:rgba(255,255,255,.7) !important;font-size:16px !important}
.page-id-55 .elementor-pagination .current{color:var(--lx-o) !important}
.page-id-55 .e-loop-nothing-found-message{font-family:var(--lx-serif);font-size:32px;color:rgba(255,255,255,.75);text-align:center;padding:80px 0}

/* ---------- portfolio cards (shared by homepage contact sheet and /projects/) ---------- */
.lx-ink{background:var(--lx-ink)}
.lw-card{position:relative;font-family:var(--lx-sans);color:#fff}
.lw-card__link{display:block;color:inherit !important;text-decoration:none !important;border-radius:4px}
.lw-card__link:focus-visible{outline:2px solid var(--lx-o);outline-offset:6px}
.lw-card__media{position:relative;margin:0;overflow:hidden;border-radius:4px;background:#151515;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 40px 80px -48px rgba(0,0,0,.9)}
.lx .lw-img,.lw-img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center;transition:transform 1.1s var(--lx-ease),filter .6s var(--lx-ease)}
.lw-plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--lx-paper)}
.lx .lw-logo,.lw-logo{max-width:52%;max-height:34%;width:auto;height:auto;object-fit:contain}
.lw-plate__name{font-family:var(--lx-serif);font-size:clamp(26px,2.4vw,40px);color:var(--lx-ink)}
.lw-num{display:block;color:var(--lx-o);margin-bottom:8px}
.lw-card__name{font-family:var(--lx-serif) !important;font-weight:400 !important;letter-spacing:-.01em;line-height:1.05;margin:0;color:#fff !important;text-transform:none !important}
.lw-card__meta{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.62)}
.lw-card__cta{display:inline-flex;gap:8px;margin-top:12px;font-size:14px;font-weight:600;padding-bottom:3px;background:linear-gradient(var(--lx-o),var(--lx-o)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--lx-ease),color .2s}
.lw-card__link:hover .lw-card__cta,.lw-card__link:focus-visible .lw-card__cta{background-size:100% 1px;color:var(--lx-o)}

/* homepage contact sheet */
.lw-sheet-sec .lx-intro{margin-bottom:clamp(40px,5vw,72px)}
.lw-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:clamp(40px,4.5vw,64px);padding-bottom:clamp(40px,5vw,72px)}
.lw-card--sheet .lw-card__media{aspect-ratio:4/5}
.lw-card--sheet .lw-card__cap{padding-top:16px}
.lw-card--sheet .lw-card__name{font-size:clamp(22px,1.9vw,30px)}
.lw-card--sheet.lw-card--shot .lw-img{object-position:12% top}
.lw-card--sheet .lw-img{filter:saturate(.9) brightness(.9)}
.lw-card--sheet .lw-card__link:hover .lw-img,.lw-card--sheet .lw-card__link:focus-visible .lw-img{filter:none;transform:scale(1.035)}
@media (hover:hover) and (pointer:fine){
  .lw-sheet:hover .lw-card:not(:hover) .lw-card__media{opacity:.55}
  .lw-card--sheet .lw-card__media{transition:opacity .5s var(--lx-ease)}
  .lw-card--sheet .lw-card__cta{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--lx-ease),background-size .4s var(--lx-ease)}
  .lw-card--sheet .lw-card__link:hover .lw-card__cta,.lw-card--sheet .lw-card__link:focus-visible .lw-card__cta{opacity:1;transform:none}
}
@media (min-width:1025px){.lw-sheet>.lw-card:nth-child(4n+2),.lw-sheet>.lw-card:nth-child(4n+4){transform:translateY(56px)}.lw-sheet{padding-bottom:120px}}
.lw-disclosure{font-size:13px;color:rgba(255,255,255,.5);margin:0;padding-top:8px;border-top:1px solid var(--lx-line-d);padding-top:20px}

/* projects listing compositions */
.lw-card--work .lw-card__media{aspect-ratio:16/11}
.lw-card--work .lw-card__cap{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;padding-top:22px}
.lw-card--work .lw-card__name{font-size:clamp(32px,3.3vw,52px)}
.lw-card--work .lw-card__meta{grid-column:1}
.lw-card--work .lw-card__cta{grid-column:2;grid-row:1 / span 2;align-self:end}
.lw-card--work .lw-card__link:hover .lw-img--desk{transform:scale(1.03)}
.lw-card--duo .lw-inset .lw-img{position:absolute}
.lw-card--duo .lw-inset{position:absolute;right:5%;bottom:7%;width:22%;aspect-ratio:1/2;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12);transition:transform .9s var(--lx-ease)}
.lw-card--duo .lw-card__link:hover .lw-inset{transform:translateY(-12px)}
.lw-card--work.lw-card--phone .lw-card__media{display:flex;justify-content:center;background:radial-gradient(closest-side,rgba(237,99,54,.16),rgba(237,99,54,0)) center/80% 90% no-repeat,#141414}
.lx .lw-card--work.lw-card--phone .lw-img--phone,.lw-card--work.lw-card--phone .lw-img--phone{position:relative;inset:auto;width:auto;height:88%;margin-top:6%;aspect-ratio:1/2;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
.lw-card--work.lw-card--phone .lw-card__link:hover .lw-img--phone{transform:translateY(-8px)}
.lw-card--work.lw-card--logo .lw-card__link:hover .lw-logo{transform:scale(1.04)}
.lw-logo{transition:transform .8s var(--lx-ease)}

/* platform archives (/category/<slug>/, template mu-plugins/lumos/category-archive.php) */
.lx-archive{background:var(--lx-ink);color:#fff;padding:clamp(120px,14vw,200px) 0 clamp(80px,10vw,140px)}
body .site-main.lx-archive{max-width:none;width:100%;margin:0} /* Hello Elementor caps .site-main at 1140px */
.lx-archive__head{max-width:760px;margin-bottom:clamp(48px,6vw,88px)}
.lx-archive__head .lx-label{color:var(--lx-mute-d);margin:0 0 20px}
.lx-archive__head .lx-label a{color:var(--lx-o);text-decoration:none}
.lx-archive__head .lx-label a:hover,.lx-archive__head .lx-label a:focus-visible{text-decoration:underline}
.lx-archive__head h1{font-size:clamp(56px,9vw,120px);line-height:.98}
.lx-archive__head p:last-child{font-size:18px;color:var(--lx-mute-d);margin:24px 0 0;max-width:52ch}
.lx-archive__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px);row-gap:clamp(64px,7vw,112px)}
.lx-archive__all{margin:clamp(56px,7vw,96px) 0 0;padding-top:28px;border-top:1px solid var(--lx-line-d)}
.lx-archive__all .lx-link{color:#fff}

@media (max-width:1024px){.lw-sheet{grid-template-columns:repeat(3,minmax(0,1fr))}.lw-sheet>.lw-card:nth-child(3n+2){transform:translateY(40px)}.lw-sheet{padding-bottom:80px}}
@media (max-width:767px){
  .lw-sheet{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:32px}
  .lw-sheet>.lw-card:nth-child(3n+2){transform:none}.lw-sheet>.lw-card:nth-child(even){transform:translateY(32px)}
  .lw-card--sheet .lw-card__name{font-size:21px}.lw-card--sheet .lw-card__meta{font-size:12.5px}
  .lw-card--work .lw-card__cap{grid-template-columns:1fr}.lw-card--work .lw-card__cta{grid-column:1;grid-row:auto}
  .lx-archive__grid{grid-template-columns:1fr;row-gap:56px}
}
@media (prefers-reduced-motion:reduce){.lw-img,.lw-inset,.lw-logo,.lw-card__media,.lw-card__cta{transition:none !important}.lw-card__link:hover .lw-img,.lw-card__link:hover .lw-inset{transform:none !important}}

/* ---------- jobs (page #760, loop #770, single #794) ---------- */
.page-id-760 .elementor-760>.e-con,.single-jobs .elementor-location-single .e-con{background:var(--lx-ink) !important}
.page-id-760 h1.elementor-heading-title,.single-jobs h1.elementor-heading-title{font-family:var(--lx-serif) !important;font-weight:400 !important;text-transform:none !important;letter-spacing:-.012em !important;font-size:clamp(48px,7vw,104px) !important;line-height:1 !important;color:#fff !important}
.page-id-760 h1 em{color:var(--lx-o);font-style:italic}
.page-id-760 .elementor-element-aa1d6b3 .elementor-heading-title{font-family:var(--lx-label) !important;font-size:11px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:rgba(255,255,255,.66) !important;font-weight:400 !important}
.page-id-760 .elementor-widget-text-editor{font-family:var(--lx-sans);font-size:18px;color:rgba(255,255,255,.75);max-width:640px;margin:0 auto}
.e-loop-item.elementor-770{background:transparent !important;border:1px solid rgba(255,255,255,.16);border-radius:4px}
.e-loop-item.elementor-770 .e-con{background:transparent !important}
.e-loop-item.elementor-770 .elementor-heading-title{font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important;color:rgba(255,255,255,.7) !important;font-weight:400 !important}
.e-loop-item.elementor-770 .elementor-element-abdcb6f .elementor-heading-title{font-family:var(--lx-serif) !important;font-size:34px !important;color:#fff !important;line-height:1.1 !important}
.e-loop-item.elementor-770 .elementor-button,.single-jobs .elementor-button{background:var(--lx-o) !important;border-radius:2px !important;font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important}
.single-jobs .elementor-heading-title{font-family:var(--lx-sans) !important;text-transform:none !important;letter-spacing:0 !important}
/* ---------- legal / long-form pages (privacy #3, data deletion #923) ---------- */
.page-id-3 .elementor-3,.page-id-923 .elementor-923{background:var(--lx-paper);color:var(--lx-ink);padding:clamp(48px,7vw,110px) var(--lx-gut)}
.page-id-3 .elementor-3 .e-con,.page-id-923 .elementor-923 .e-con{background:transparent !important;max-width:760px;margin:0 auto}
.page-id-3 .elementor-widget-text-editor,.page-id-923 .elementor-widget-text-editor{font-family:var(--lx-sans);font-size:17px;line-height:1.7;color:#2a2a2a}
.page-id-3 h1,.page-id-923 h1,.page-id-3 .elementor-widget-text-editor h1{font-family:var(--lx-serif) !important;font-weight:400 !important;font-size:clamp(44px,6vw,80px) !important;line-height:1.02 !important;color:var(--lx-ink) !important;margin-bottom:.6em}
.page-id-3 .elementor-widget-text-editor h2,.page-id-3 .elementor-widget-text-editor h3,.page-id-923 .elementor-widget-text-editor h2,.page-id-923 .elementor-widget-text-editor h3{font-family:var(--lx-serif) !important;font-weight:400 !important;font-size:30px !important;margin:1.6em 0 .4em;color:var(--lx-ink) !important}
.page-id-3 .elementor-widget-text-editor a,.page-id-923 .elementor-widget-text-editor a{color:var(--lx-ink) !important;text-decoration:underline;text-decoration-color:var(--lx-o);text-underline-offset:3px;overflow-wrap:anywhere}
.page-id-3 h1 strong,.page-id-923 h1 strong{font-weight:400}
/* keyboard focus for theme/Elementor chrome (nav, footer, buttons) */
.elementor-location-header a:focus-visible,.elementor-location-footer a:focus-visible,.elementor-menu-toggle:focus-visible,.e-loop-item a:focus-visible,.elementor-button:focus-visible{outline:2px solid var(--lx-o) !important;outline-offset:4px !important}
/* portfolio cards inside Elementor wrappers: make wrappers full-width so aspect-ratio heights are computed at the real width */
.lw-card,.lw-card__link,.lw-card__media{width:100%}
.e-loop-item .elementor-widget-shortcode,.e-loop-item .elementor-shortcode,.elementor-widget-shortcode .lx{width:100%}

/* ---------- articles (/insights/*) ---------- */
.lx-article{max-width:740px;margin:0 auto;color:#262626}
.lx-article .lx-lede{max-width:none;margin-bottom:40px;color:var(--lx-ink)}
.lx-article h2{font-size:clamp(28px,3vw,40px);margin:56px 0 18px;color:var(--lx-ink)}
.lx-article p,.lx-article li{font-size:18px;line-height:1.75}
.lx-article .lx-list{padding-left:0;list-style:none;margin:0 0 8px}
.lx-article .lx-list li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--lx-line-l);margin:0}
.lx-article .lx-list li::before{content:"";position:absolute;left:2px;top:27px;width:16px;height:1px;background:var(--lx-o)}
.lx-article strong{color:var(--lx-ink)}
.lx-article a:not(.lx-btn){color:var(--lx-ink);text-decoration:underline;text-decoration-color:var(--lx-o);text-underline-offset:3px}
.lx-note-box{margin-top:64px;padding:32px 34px;background:#fff;border-left:3px solid var(--lx-o)}
.lx-note-box p{margin:0}

/* ---------- language switcher in the header menu (English ↔ Arabic, added 2026-10-19) ---------- */
.elementor-location-header .lumos-lang .elementor-item{opacity:.75}
.elementor-location-header .lumos-lang .elementor-item:hover{opacity:1}
.elementor-location-header .lumos-lang .elementor-item[lang="ar"]{font-size:16px !important}

/* consent banner: Manrope kerns y–t apart, which shows as a gap in "Analytics" at 14.5px; Latin text only (Arabic keeps its kerning). 2026-10-19 */
html:not([lang="ar"]) .lc-body,.lc-body bdi{font-kerning:none}

/* ---------- depth, scroll scenes and the 3D mark (driven by lumos.js / lumos-gl.js; all under .lx-js, so reduced motion and no-JS
   visitors get the static layout above). Only transform and opacity change while scrolling. 2026-10-21 ---------- */
/* hero: plates sit at different depths, tilt with the pointer, and recede/turn as the hero scrolls away; copy drifts slower than the page */
.lx-js .lx-hero__grid>div:first-child{translate:0 min(calc(var(--sy,0) * .1px), 44px)}
@media (min-width:1025px){
  .lx-js .lx-hero__grid{perspective:1100px}
  .lx-js .lx-hero__art{transform-style:preserve-3d;transform:rotateX(calc(var(--ty,0) * -7deg)) rotateY(calc(var(--tx,0) * 9deg))}
  .lx-js .lx-hero__art .lx-plate{translate:0 calc(var(--sy,0) * var(--depth,0) * 1px) calc(var(--z,0px) - var(--out,0) * 150px);rotate:y calc(var(--rest,0deg) + var(--out,0) * var(--turn,0deg))}
  .lx-js .lx-hero__art .lx-plate:nth-of-type(1){--z:40px;--turn:12deg;--rest:26deg}
  .lx-js .lx-hero__art .lx-plate:nth-of-type(2){--z:100px;--turn:-8deg;--rest:-10deg}
  .lx-js .lx-hero__art .lx-plate:nth-of-type(3){--z:0px;--turn:-14deg;--rest:-30deg}
  .lx-js .lx-hero__art--wide .lx-plate:nth-of-type(1){--rest:16deg}
  .lx-js .lx-hero__art--wide .lx-plate:nth-of-type(2){--rest:-14deg}
  .lx-js .lx-hero__art .lx-rays{translate:0 0 140px}
  .lx-js .lx-hero__art>.lx-gl--plates{translate:0 0 150px}
}
/* the 3D mark: fades in over the SVG mark once its first frame is drawn; the SVG stays as the fallback */
.lx-gl{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.6s var(--lx-ease)}
.lx-gl.is-on{opacity:1}
.lx-hero__art>.lx-gl{z-index:0}
.lx-hero__art>.lx-gl--plates{z-index:6}
.lx-hero__art.lx-gl-on>.lx-rays{opacity:0;transition:opacity 1s var(--lx-ease)}
/* closing section: the mark sits whole inside the section, beside the headline from 768px (centred on the second grid column) and in
   its own space under the actions on phones, as in the hero. It used to be centred 2% below the section's clipped bottom edge, so
   half of it was always cut off. --lx-mk is the canvas size; the mark itself spans 42% of it. A static SVG mark (::after, sized to
   match) holds the place until the first 3D frame and stays when WebGL is off, unsupported, too slow or lost. 2026-10-21 */
.lx-close{--lx-mk:min(640px,44vw);--lx-mx:calc(var(--lx-page-pad) + (100% - 2 * var(--lx-page-pad)) * .17);--lx-my:calc(clamp(110px,14vw,210px) + clamp(48px,8vw,128px) * 1.1)}
.lx-close>.lx-gl,.lx-close::after{position:absolute;inset-inline-end:calc(var(--lx-mx) - var(--lx-mk) / 2);top:calc(var(--lx-my) - var(--lx-mk) / 2);width:var(--lx-mk);height:var(--lx-mk);z-index:-1}
.lx-close>.lx-gl.is-on{opacity:.95}
.lx-close::after{content:"";pointer-events:none;opacity:.9;transition:opacity 1s var(--lx-ease);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ed6336' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M200 70V130q0 14 14 14M200 330V270q0-14-14-14M70 200H130q14 0 14-14M330 200H270q-14 0-14 14M108 108L150 150q10 10 20 0M292 292L250 250q-10-10-20 0M292 108L250 150q-10 10 0 20M108 292L150 250q10-10 0-20'/%3E%3C/svg%3E") center/64.6% no-repeat}
.lx-close.lx-gl-on::after{opacity:0}
@media (max-width:767px){
  .lx-close{--lx-mk:min(88vw,400px);padding-bottom:calc(var(--lx-mk) * .62)}
  .lx-close>.lx-gl,.lx-close::after{inset-inline-end:auto;left:50%;top:auto;bottom:calc(var(--lx-mk) * -.19);translate:-50% 0}
}
/* statement: words light up in reading order as the paragraph passes through the viewport */
.lx-js .lx-lit .lx-w{opacity:.65;transition:opacity .5s var(--lx-ease)}
.lx-js .lx-lit .lx-w.is-lit{opacity:1}
/* work rows + case-study plates: start tipped back, settle flat at mid-screen; the capture drifts slightly inside its frame */
.lx-js .lx-row figure,.lx-js .lx-case__plates figure{--tilt:clamp(0, calc((.46 - var(--p,.5)) * 2.6), 1);transform:perspective(1400px) rotateY(var(--ry,0deg)) rotateX(calc(var(--tilt) * 14deg)) scale(calc(1 - var(--tilt) * .06));transform-origin:50% 100%;transition:transform .9s var(--lx-ease)}
.lx-js .lx-row figure img,.lx-js .lx-case__plates figure img{scale:1.06;translate:0 calc((var(--p,.5) - .5) * -5%)}
/* process steps: the line draws with scroll; each step lights when the line reaches it */
.lx-js .lx-steps::after{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--lx-o);transform-origin:left;transform:scaleX(var(--p,0))}
.lx-js .lx-steps li::before{background:var(--lx-char);box-shadow:inset 0 0 0 1px rgba(237,99,54,.7);transition:background .5s,box-shadow .6s var(--lx-ease)}
.lx-js .lx-steps li.is-lit::before{background:var(--lx-o);box-shadow:0 0 0 6px rgba(237,99,54,.16),0 0 24px 4px rgba(237,99,54,.35)}
.lx-js .lx-steps li b,.lx-js .lx-steps li p{transition:opacity .6s var(--lx-ease)}
.lx-js .lx-steps li:not(.is-lit) b{opacity:.45}
.lx-js .lx-steps li:not(.is-lit) p{opacity:.35}
/* definition rows (services, problems): a line of light passes along the rule as each row arrives */
.lx-js .lx-rows>div{position:relative}
.lx-js .lx-rows>div::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--lx-o);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.lx-js .lx-rows>div.is-in::after{animation:lx-sweep 1.8s var(--lx-ease) .2s}
@keyframes lx-sweep{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
/* section edges: a section that changes tone opens from a slightly narrower sheet to full width as it rises */
.lx-js .lx-edge{isolation:isolate;background:transparent !important}
.lx-js .lx-edge::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lx-edge,var(--lx-paper));transform:scaleX(calc(1 - var(--e,0) * .05));border-radius:calc(var(--e,0) * 32px) calc(var(--e,0) * 32px) 0 0;pointer-events:none}
.lx-js .lx-char.lx-edge{--lx-edge:var(--lx-char)}
/* portfolio cards: a soft light follows the pointer over the capture, with a slight tilt */
@media (hover:hover) and (pointer:fine){
  .lx-js .lw-card__media{transition:opacity .5s var(--lx-ease),transform .7s var(--lx-ease)}
  .lx-js .lw-card__media.is-lit{transition:opacity .5s var(--lx-ease),transform .25s ease-out}
  .lx-js .lw-card__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s;mix-blend-mode:screen;background:radial-gradient(circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%),rgba(255,236,222,.24),rgba(237,99,54,.10) 30%,rgba(237,99,54,0) 62%)}
  .lx-js .lw-card__media.is-lit::after{opacity:1}
}
@media (max-width:1024px){.lx-js .lx-steps::after{display:none}}
/* phones: the services/about-style hero mark gets its own space under the buttons (it used to sit over the secondary link) */
@media (max-width:767px){
  .lx-hero__art--rays{height:min(76vw,320px);margin-top:8px}
  .lx-hero__art--rays .lx-rays{left:50%;right:auto;width:min(60vw,250px);transform:translate(-50%,-50%)}
  /* heroes with screenshots: the mark gets its own centred band above them, sized to the screen. It used to be a 240px corner
     piece pushed 90px past the right edge, so its 3D canvas (2.3x the mark) hung off-screen and covered the third capture. */
  .lx-hero__art:not(.lx-hero__art--rays){--lx-mk:min(34vw,136px);padding-top:calc(var(--lx-mk) + 26px)}
  .lx-hero__art:not(.lx-hero__art--rays) .lx-rays{width:var(--lx-mk);left:50%;right:auto;top:0;transform:translateX(-50%);opacity:.9}
}

/* ---------- the work in 3D: screenshots rest at an angle in space instead of lying flat (2026-10-21, owner request) ----------
   Rows angle toward their text; case-study captures face each other; a glass sheen marks each screen as a surface. */
.lx-js .lx-row figure{--ry:13deg}
.lx-js .lx-row--flip figure{--ry:-13deg}
.lx-js .lx-row--phone figure{--ry:20deg}
.lx-js .lx-row--phone.lx-row--flip figure{--ry:-20deg}
.lx-js .lx-row:hover figure{--ry:4deg}
.lx-js .lx-row--flip:hover figure{--ry:-4deg}
.lx-js .lx-case__plates figure:first-child{--ry:9deg}
.lx-js .lx-case__plates figure:nth-child(2){--ry:-16deg}
.lx-js .lx-plate::after,.lx-js .lx-row figure::after,.lx-js .lx-case__plates figure::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.lx-js .lx-row figure,.lx-js .lx-case__plates figure{position:relative}
/* portfolio cards: each capture tips up into place as it enters, then follows the pointer */
.lx-js .lw-card__media{--in:clamp(0, calc((.3 - var(--p,1)) * 3.4), 1);transform:perspective(1100px) rotateX(calc(var(--in) * 26deg)) translateY(calc(var(--in) * 36px));transform-origin:50% 100%}
@media (hover:hover) and (pointer:fine){
  .lx-js .lw-card__media.is-lit{transform:perspective(1000px) rotateX(calc((.5 - var(--my,.5)) * 10deg)) rotateY(calc((var(--mx,.5) - .5) * 14deg)) scale(1.02)}
}
@media (max-width:767px){
  .lx-js .lx-row figure{--ry:7deg}
  .lx-js .lx-row--flip figure{--ry:7deg}
  .lx-js .lx-hero__art .lx-plate:nth-of-type(1){rotate:y 14deg}
  .lx-js .lx-hero__art .lx-plate:nth-of-type(3){rotate:y -14deg}
  .lx-js .lx-hero__art{perspective:700px}
}

/* booking badge (Calendly): hidden by lumos.js while an inline booking link, the form, the footer, the consent banner or the menu needs the space */
.calendly-badge-widget{transition:opacity .2s var(--lx-ease),visibility .2s}
.calendly-badge-widget.lx-badge-off{opacity:0;visibility:hidden;pointer-events:none}
.calendly-badge-content:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.calendly-badge-widget{transition:none}}

/* Codex 2026-10-21: contact labels stay visible after typing, in both languages. */
.page-id-57 .elementor-form .elementor-field-label.elementor-screen-only{
  position:static !important;width:auto !important;height:auto !important;
  margin:0 0 8px !important;padding:0 !important;clip:auto !important;
  overflow:visible !important;white-space:normal !important;font-size:12px !important;
}
.page-id-57 .elementor-form .elementor-field-required>.elementor-field-label::after{content:" (required)";color:inherit}
html[lang^="ar"] .page-id-57 .elementor-form .elementor-field-required>.elementor-field-label::after{content:" (مطلوب)"}

/* Semantic section labels keep their existing visual size; dark orange meets contrast on paper. */
.lx .lx-chapter h2.lx-label{font-family:var(--lx-label);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;margin:0;color:inherit}
.lx-paper .lx-chapter .lx-n{color:#a83c1b}

/* Keep the orange arrival curtain, but reveal the page within about 300 ms. Leaving is unchanged. */
e-page-transition.e-page-transition--entering{--e-page-transition-animation-duration:200ms;--preloader-fade-duration:100ms}