/* =====================================================================
   NAJD AURUM: PAPER
   One look for every public page: warm ivory paper, serif headlines,
   near-black text, a coral accent, black buttons with small radii, and
   rounded dark windows for everything that moves (the film, the mine,
   the satellite scene, the map). A dark footer closes every page.

   Loaded last, after each page's own styles, so it wins on equal terms.
   Light and Charcoal both stay: Charcoal is the same paper, at night.
   ===================================================================== */
:root{
  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --coral:#d97757; --coral-2:#c15f3c; --coral-soft:#f3dcd2;
  --win:#1f1e1d; --win2:#2a2927;
  /* the dark parts of the homepage take the window colours */
  --nh-stage:var(--win); --nh-ink:#faf9f5; --nh-mut:rgba(250,249,245,.68); --nh-acc:#d97757; --nh-acc2:#e08a6a;
  --nh-line:rgba(250,249,245,.14);
}
html[data-theme="light"],:root:not([data-theme]){
  --bg:#faf9f5; --card:#ffffff; --ink:#141413; --ink2:#3d3d3a; --mut:#5e5d59; --faint:#87867f;
  --line:#dedcd1; --line2:#e8e6dc; --soft:#f0eee6; --band:#f5f4ed; --tapebg:#f0eee6;
  --pri:#d97757; --pri-2:#c15f3c; --pri-ink:#ffffff; --tint:#f6e5dd;
  --btn:#141413; --btn-2:#3d3d3a; --btn-ink:#faf9f5; --alt:#ebe9e0; --alt-2:#e0ddd2; --alt-ink:#141413;
  --sh:0 1px 2px rgba(20,20,19,.05),0 18px 44px -26px rgba(20,20,19,.28); --edge:0 0 0 0 transparent;
}
html[data-theme="charcoal"]{
  --bg:#1f1e1d; --card:#262624; --ink:#faf9f5; --ink2:#e5e3d9; --mut:#c2c0b6; --faint:#9c9a92;
  --line:#3e3d38; --line2:#33322e; --soft:#2a2927; --band:#232220; --tapebg:#262624;
  --pri:#d97757; --pri-2:#e08a6a; --pri-ink:#141413; --tint:#3a2a23;
  --btn:#faf9f5; --btn-2:#e5e3d9; --btn-ink:#141413; --alt:#30302e; --alt-2:#3a3936; --alt-ink:#faf9f5;
  --win:#141413; --win2:#1f1e1d;
  --sh:0 1px 2px rgba(0,0,0,.25),0 18px 44px -26px rgba(0,0,0,.7);
}
html{background:var(--bg)}
body{background:var(--bg)!important;color:var(--ink)}
::selection{background:var(--coral-soft);color:#141413}

/* ------------------------------------------------------------ type */
h1,h2,h3,h4{font-family:var(--serif)!important;font-optical-sizing:auto}
h1,h2{font-weight:500!important;letter-spacing:-.012em!important}
h3,h4{letter-spacing:-.004em!important}
h2{font-size:46px!important;line-height:1.1!important;color:var(--mut)}
h2 em{color:var(--ink)!important;font-style:normal}
.kick{font:500 13px/1.3 var(--sans)!important;letter-spacing:.07em!important;color:var(--pri)!important}
.sdesc,.prose{color:var(--mut)}
a{color:inherit}
.prose a,.sdesc a{color:var(--pri)}
@media(max-width:720px){ h2{font-size:32px!important;line-height:1.16!important} }

/* ------------------------------------------------------------ buttons */
.cta,.nh-btn.pri,.nh-btn.ink,nav.top .megain a.mgo{background:var(--btn)!important;color:var(--btn-ink)!important;
  border:1px solid transparent!important;border-radius:8px!important;box-shadow:none!important;font-weight:500}
.cta:hover,.nh-btn.pri:hover,.nh-btn.ink:hover,nav.top .megain a.mgo:hover{background:var(--btn-2)!important}
.cta.ghost,.nh-btn.sec,.nh-btn.line{background:var(--alt)!important;color:var(--alt-ink)!important;
  border:1px solid var(--line)!important;border-radius:8px!important;box-shadow:none!important}
.cta.ghost:hover,.nh-btn.sec:hover,.nh-btn.line:hover{background:var(--alt-2)!important}
.nh-btn{border-radius:8px!important;height:48px}

/* ------------------------------------------------------------ header */
header{background:color-mix(in srgb,var(--bg) 94%,transparent)!important;border-bottom:1px solid var(--line2)!important;
  backdrop-filter:saturate(160%) blur(14px)}
@media(min-width:1081px){ nav.top{margin-left:auto!important} .hact{margin-left:14px!important} }
nav.top>div>a{color:var(--ink2)!important;font:400 15.5px var(--sans)!important;padding:0 13px!important}
nav.top>div>a:hover,nav.top>div:hover>a,nav.top>div.open>a{color:var(--ink)!important}
nav.top>div>a.on{color:var(--ink)!important;border-bottom-color:var(--coral)!important}
.megain{background:var(--card)!important;border:1px solid var(--line2)!important;border-radius:16px!important}
nav.top .megain a.mitem:hover b{color:var(--ink)!important}
nav.top .megain a.mall{color:var(--pri)!important}
.tbtn{border-radius:8px!important;border-color:var(--line)!important;color:var(--ink2)!important}
.hcta{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:8px;background:var(--btn);color:var(--btn-ink)!important;
  font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .2s}
.hcta:hover{background:var(--btn-2)}
@media(max-width:1180px){ .hcta{display:none} }
.hiring{background:var(--coral)!important;color:#fff!important}
.logo .s{color:var(--faint)!important}
.logo .mk{color:var(--ink)}
.logo .n{font-family:var(--serif)!important;font-weight:500!important;font-size:21px!important;letter-spacing:-.2px!important;line-height:1!important;color:var(--ink)!important}
@media(max-width:760px){ .logo .n{font-size:19px!important} }
.drawer .panel{background:var(--bg)!important}
.drawer .dfoot .cta{background:var(--btn)!important;color:var(--btn-ink)!important}

/* ------------------------------------------------------------ page heroes
   The banner photograph (or live picture) moves below the words, as a
   rounded panel; the words stand centred on the paper. */
.pbanner{display:flex!important;flex-direction:column-reverse;align-items:stretch;min-height:0!important;overflow:visible!important;background:var(--bg)}
.pbanner .in{position:relative;padding:78px 0 44px!important;text-align:center}
.pbanner .in .wrap{display:flex;flex-direction:column;align-items:center}
.pbanner .crumb{color:var(--faint)!important;margin-bottom:24px!important;font-size:13.5px!important}
.pbanner .crumb a{color:var(--mut)!important}
.pbanner .crumb a:hover{color:var(--ink)!important}
.pbanner .crumb i{color:var(--faint)!important}
.pbanner h1{color:var(--ink)!important;font-size:62px!important;line-height:1.06!important;max-width:17ch;margin:0 auto}
.pbanner .lede{color:var(--mut)!important;font-size:20px!important;line-height:1.55!important;max-width:54ch;margin:22px auto 0!important}
.pbanner .pills{justify-content:center}
.pbanner .pills span{background:var(--soft)!important;color:var(--ink2)!important;border:1px solid var(--line2);backdrop-filter:none!important}
.pbanner .bg{position:relative!important;inset:auto!important;width:calc(100% - 80px);max-width:1200px;margin:0 auto 10px;
  aspect-ratio:16/6.2;border-radius:24px;overflow:hidden;background:var(--win)!important}
.pbanner .bg:after{background:none!important}
.pbanner .bg img{filter:none!important;padding:0!important}
.pbanner.fit .bg img{object-fit:cover!important}
@media(max-width:720px){
  .pbanner .in{padding:44px 0 26px!important}
  .pbanner h1{font-size:38px!important;line-height:1.1!important}
  .pbanner .lede{font-size:17px!important;line-height:1.55!important}
  .pbanner .bg{width:calc(100% - 32px);aspect-ratio:4/3;border-radius:18px}
}

/* ------------------------------------------------------------ sections */
.psec{padding:96px 0}
.band{background:var(--band)!important}
.shead{grid-template-columns:1fr!important;justify-items:center;text-align:center;gap:14px!important;margin-bottom:48px!important}
.shead>div{display:flex;flex-direction:column;align-items:center}
.shead .sdesc{max-width:62ch;margin:0 auto!important;padding:0!important}
.fc{background:var(--soft)!important;border:0!important;box-shadow:none!important;border-radius:20px!important}
.fc .dot,.st .n{color:var(--pri)}
.fc .dot{background:var(--coral)!important}
.fcard,.reqcard,.lcard,.opsitem,.kpis>div{background:var(--card)!important;border:1px solid var(--line2)!important;box-shadow:none!important;border-radius:20px!important}
.req{background:var(--soft)!important;border-radius:24px!important}
.req h2{color:var(--mut)!important}
.fig,.split .fig{border-radius:24px!important;border:0!important;box-shadow:none!important;background:var(--soft)!important;overflow:hidden}
.split .fig figcaption,.fig figcaption{background:transparent!important;border-top:0!important;color:var(--mut)!important}
.steps .st{border-top:1px solid var(--line)!important}
.steps .st:nth-child(n){border-color:var(--line)!important}
.steps .st .n{color:var(--pri)!important}
.step,.step:nth-child(n){border-color:var(--line)!important}
.step .n{color:var(--pri)!important}
.bullets svg,.reqcard svg{color:var(--coral)!important}
details,.faq details{border-color:var(--line2)!important}
table th{background:var(--soft)}
table td,table th{border-color:var(--line2)!important}
.form input,.form select,.form textarea{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:8px!important;color:var(--ink)!important}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink2)!important;box-shadow:0 0 0 3px rgba(217,119,87,.2)!important;outline:0}
.tgal .tcard,.tcard{border-radius:24px!important;border:0!important;background:var(--soft)!important;box-shadow:none!important}
.tcard .well{border-radius:18px;overflow:hidden}
.na-live{background:var(--win)!important;border-radius:inherit}

/* ------------------------------------------------------------ footer: dark */
footer{background:#141413!important;color:#faf9f5;border-top:0!important;margin-top:0!important;padding:80px 0 40px!important;
  --ink:#faf9f5;--ink2:#e5e3d9;--mut:#b8b5a9;--faint:#8b8981;--line:#3e3d38;--line2:#30302e;--soft:#262624;--card:#1f1e1d;--pri:#d97757}
footer .logo .n{color:#faf9f5}
footer .fgrid a{color:#b8b5a9!important}
footer .fgrid a:hover{color:#faf9f5!important}
footer .ftag{color:#b8b5a9!important}
footer .fbot{border-top-color:#30302e!important;color:#8b8981!important}
footer .social a{color:#b8b5a9!important;border-color:#3e3d38!important}
footer .clocks,footer .clocks *{color:#b8b5a9}

/* =============================================== the homepage, on paper */
.pp-hero{padding:76px 0 24px;background:var(--bg)}
.pp-hin{display:flex;flex-direction:column;align-items:center;text-align:center}
.pp-icon{color:var(--ink);margin:0 0 22px;line-height:0}
.pp-icon svg{display:block;width:64px;height:64px}
.pp-icon.sm svg{width:50px;height:50px}
.pp-h1{font:500 78px/1.04 var(--serif)!important;letter-spacing:-.016em!important;color:var(--ink);margin:0;max-width:none}
.pp-sub{font:400 22px/1.5 var(--sans);color:var(--mut);margin:24px auto 0;max-width:42ch}
/* the headline and the line under it break evenly, and "AI-powered" never splits at its hyphen */
.pp-h1{text-wrap:balance}
.pp-sub{text-wrap:pretty}
.pp-sub .nw{white-space:nowrap}
.pp-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.pp-ctas.left{justify-content:flex-start}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:8px;
  font:500 16.5px/1 var(--sans);text-decoration:none;background:var(--btn);color:var(--btn-ink)!important;border:1px solid transparent;transition:background .2s}
.pp-btn:hover{background:var(--btn-2)}
.pp-btn.alt{background:var(--alt);color:var(--alt-ink)!important;border-color:var(--line)}
.pp-btn.alt:hover{background:var(--alt-2)}
.pp-btn:focus-visible,.pp-more:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* a window: the dark, rounded screen anything that moves is shown in */
.pp-win{position:relative;background:var(--win);border-radius:24px;overflow:hidden;isolation:isolate;color:#faf9f5}
.pp-win canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pp-hero .pp-win{margin-top:64px;aspect-ratio:16/8.6;max-height:min(76vh,720px);width:100%}

/* the film's controls, inside its window */
.pp-win .nh-chap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:46px 26px 18px;
  background:linear-gradient(180deg,rgba(20,20,19,0),rgba(20,20,19,.78))}
.pp-win .nh-chin{display:flex;align-items:center;gap:18px;max-width:none;padding:0;margin:0}
.pp-win .nh-ch{flex:1;min-width:0;background:0;border:0;color:rgba(250,249,245,.62);text-align:left;cursor:pointer;padding:0;font:500 13.5px/1.25 var(--sans)}
.pp-win .nh-ch i{display:block;height:2px;border-radius:2px;background:rgba(250,249,245,.22);overflow:hidden;margin-bottom:10px}
.pp-win .nh-ch i b{display:block;height:100%;background:var(--coral);transform-origin:0 50%;transform:scaleX(0)}
.pp-win .nh-ch span{font:500 12px/1 var(--mono);color:var(--coral);margin-right:8px}
.pp-win .nh-ch.on{color:#faf9f5}
.pp-win .nh-ch em{font-style:normal}
.pp-win .nh-pp{flex:0 0 38px;width:38px;height:38px;border-radius:19px;border:0;background:rgba(250,249,245,.12);color:#faf9f5;
  display:grid;place-items:center;cursor:pointer}
.pp-win .nh-pp .pl{display:none}
.pp-win .nh-pp[aria-pressed="true"] .pl{display:block}
.pp-win .nh-pp[aria-pressed="true"] .pa{display:none}
.pp-win .nh-cap{display:none}
@media(min-width:761px){ .pp-win .nh-ch em{display:block} }
.pp-play{position:absolute;left:22px;top:20px;z-index:3;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 6px;
  border-radius:21px;border:0;background:rgba(250,249,245,.12);backdrop-filter:blur(8px);color:#faf9f5;font:500 14.5px/1 var(--sans);cursor:pointer}
.pp-play i{width:30px;height:30px;border-radius:15px;background:#faf9f5;color:#141413;display:grid;place-items:center}
.pp-play small{color:rgba(250,249,245,.62);font-size:12.5px}
.pp-play:hover{background:rgba(250,249,245,.2)}

/* the facts under the film */
.pp-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:40px 0 0}
.pp-stats>div{padding:2px 28px;border-left:1px solid var(--line)}
.pp-stats>div:first-child{border-left:0;padding-left:0}
.pp-stats b{display:block;font:400 44px/1.05 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.pp-stats span{display:block;font:400 14.5px/1.45 var(--sans);color:var(--mut);margin-top:10px;max-width:24ch}

/* sections */
.pp-sec{padding:120px 0 0}
.pp-sec:last-of-type{padding-bottom:120px}
.pp-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto 52px;max-width:780px}
.pp-head h2{font-size:52px!important;line-height:1.08!important;color:var(--mut);margin:0}
.pp-head p{font:400 19px/1.55 var(--sans);color:var(--mut);margin:18px auto 0;max-width:58ch}

/* the mine: steps beside its window, on a paper panel */
.pp-panel{background:var(--soft);border-radius:24px;padding:40px;display:grid;grid-template-columns:.86fr 1.14fr;gap:44px;align-items:center}
.pp-panel .pp-win{aspect-ratio:1.18/1}
.pp-fig{margin:0;min-width:0}
.pp-fig figcaption{font:400 13px/1.45 var(--sans);color:var(--mut);margin-top:12px}
.pp-panel .nh-ml{margin-top:0}

/* services: two by two, a picture panel over each */
.pp-cards{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px}
.pp-card{display:flex;flex-direction:column;min-width:0}
.pp-media{position:relative;display:block;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:var(--soft)}
.pp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pp-card:hover .pp-media img{transform:scale(1.035)}
.pp-media.coral{background:var(--coral)}
.pp-media.sand{background:#e3dacc}
.pp-inwin{position:absolute;left:9%;right:0;top:11%;bottom:0;border-radius:16px 0 0 0;overflow:hidden;background:var(--win)}
.pp-inwin canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pp-cb{padding:24px 2px 0;display:flex;flex-direction:column;flex:1}
.pp-tag{font:500 13px/1 var(--sans);color:var(--pri);letter-spacing:.02em}
.pp-cb h3{font:500 26px/1.22 var(--serif)!important;margin:12px 0 0;color:var(--ink)}
.pp-cb h3 a{color:inherit;text-decoration:none}
.pp-cb p{font:400 16px/1.6 var(--sans);color:var(--mut);margin:10px 0 0}
.pp-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}
.pp-list li{position:relative;padding-left:18px;font:400 15px/1.5 var(--sans);color:var(--ink2)}
.pp-list li:before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--coral)}
.pp-more{display:inline-flex;align-items:center;gap:6px;margin-top:20px;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:8px;
  font:500 14.5px/1 var(--sans);color:var(--ink)!important;text-decoration:none;align-self:flex-start;transition:background .2s}
.pp-more svg{width:15px;height:15px}
.pp-more:hover{background:var(--soft)}

/* machines */
.pp-rail{max-width:none!important;padding:0!important}
.nh-m{border-radius:20px!important;background:var(--card)!important;border:1px solid var(--line2)!important}
.nh-m:hover{box-shadow:var(--sh)!important}
.nh-mb h3{font:500 21px/1.25 var(--serif)!important}
.nh-mgo{color:var(--pri)!important}
.nh-chips span{border-radius:8px!important}
.nh-chips span:first-child{background:var(--tint)!important;color:var(--pri)!important}
.pp-note{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:30px}
.pp-note p{font:400 16px/1.5 var(--sans);color:var(--mut);margin:0}

/* photographs */
.nh-ph{border-radius:20px!important}

/* the satellite scene: paper around a window */
.nh-sat{background:var(--bg)!important;color:var(--ink)!important;margin-top:120px}
.nh-steps .nh-kick{color:var(--pri)!important}
.nh-steps h2{font-size:48px!important;color:var(--mut)!important}
.nh-steps h2 em{color:var(--ink)!important}
.nh-sl li:before{background:var(--line)!important}
.nh-sl li i{background:var(--coral)!important}
.nh-sl b{color:var(--faint)!important;font-family:var(--sans)}
.nh-sl b span{color:var(--faint)!important}
.nh-sl li.on b{color:var(--ink)!important}
.nh-sl li.on b span{color:var(--pri)!important}
.nh-sl p{color:var(--mut)!important}
.nh-stage{background:var(--win);border-radius:24px;overflow:hidden;height:86%!important;align-self:center}
.nh-stage canvas{inset:0!important;height:100%!important}
.nh-sathint{right:20px!important;color:rgba(250,249,245,.45)!important}
.nh-satphone i{background:var(--line)!important}
.nh-satphone i b{background:var(--coral)!important}
.nh-satstats{border-top:1px solid var(--line)!important}
.nh-satstats>div+div{border-left-color:var(--line)!important}
.nh-satstats b{font-family:var(--serif)!important;font-weight:400;letter-spacing:-.01em!important;color:var(--ink)!important}
.nh-satstats span{color:var(--mut)!important}

/* the map: a window, not a wall */
.nh-ops{max-width:1200px;margin:120px auto 0!important;border-radius:24px;overflow:hidden;width:calc(100% - 80px)}
.nh-ops .nh-kick{color:var(--nh-acc)!important}
.nh-ops h2{color:rgba(250,249,245,.7)!important}
.nh-ops h2 em{color:#faf9f5!important}

/* hiring */
.nh-jgrid i.d20{background:#faf9f5!important;color:#141413!important}
.nh-jgrid i.d20:after{border-color:#faf9f5!important}
.nh-jkey i.v{background:#faf9f5!important}
.nh-jtag i,.jtag i{background:var(--coral)!important}
.nh-job{border-radius:20px!important;background:var(--card)!important;border:1px solid var(--line2)!important}
.nh-jb h3{font:500 23px/1.22 var(--serif)!important}
.nh-jcal{background:var(--win)!important}
.nh-jgrid i.d7{background:var(--coral)!important;color:#141413!important}
.nh-jgrid i.d7:after{border-color:var(--coral)!important}
.nh-jkey i{background:var(--coral)!important}
.nh-jmeta span:first-child{background:var(--tint)!important;color:var(--pri)!important}
.nh-jgo{color:var(--pri)!important}
.nh-hire{padding-top:120px!important}
.nh-hire .nh-head{grid-template-columns:1fr!important;justify-items:center;text-align:center;gap:14px!important}
.nh-hire .nh-head h2{font-size:52px!important}
.nh-hire .nh-lede{margin:0 auto!important;text-align:center}
.nh-jall{justify-content:center!important}

/* the last word: a paper panel */
.pp-end{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;background:var(--soft);border-radius:24px;padding:64px}
.pp-end h2{font-size:50px!important;margin:0}
.pp-end p{font:400 18px/1.6 var(--sans);color:var(--mut);margin:18px 0 0;max-width:46ch}
.pp-end .pp-icon{margin-bottom:18px}
.pp-addr{background:var(--card);border:1px solid var(--line2);border-radius:20px;padding:28px 30px}
.pp-addr .l{font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pp-addr .v{font:500 17px/1.4 var(--sans);color:var(--ink);margin:8px 0 22px;word-break:break-word}
.pp-addr .v:last-child{margin-bottom:0}
.pp-addr a{color:var(--pri);text-decoration:none}

/* kicker lines used by the homepage's old sections */
.nh-kick{letter-spacing:.07em!important;color:var(--pri)!important}
.nh-head h2{font-size:52px!important;letter-spacing:-.012em!important}
.nh-lede{color:var(--mut)!important}

/* ------------------------------------------------------------ narrower */
@media(max-width:1080px){
  .pp-h1{font-size:62px!important}
  .pp-panel{grid-template-columns:1fr;padding:28px}
  .pp-panel .pp-fig{order:-1}
  .pp-stats{grid-template-columns:1fr 1fr;row-gap:28px}
  .pp-stats>div:nth-child(3){border-left:0;padding-left:0}
  .pp-end{grid-template-columns:1fr;padding:48px 36px}
  .nh-ops{width:calc(100% - 56px)}
}
@media(max-width:760px){
  .pp-hero{padding:46px 0 10px}
  .pp-icon svg{width:52px;height:52px}
  .pp-h1{font-size:44px!important;line-height:1.08!important}
  .pp-sub{font-size:18px;margin-top:18px}
  .pp-ctas{margin-top:26px;width:100%}
  .pp-ctas .pp-btn{flex:1 1 auto}
  .pp-hero .pp-win{margin-top:40px;aspect-ratio:4/5;max-height:none;border-radius:20px}
  .pp-win .nh-chap{padding:30px 16px 14px}
  .pp-win .nh-chin{gap:8px}
  .pp-win .nh-ch em,.pp-win .nh-ch span{display:none}
  .pp-win .nh-ch i{margin-bottom:0}
  .pp-win .nh-cap{display:block;position:absolute;left:16px;right:16px;bottom:58px;z-index:3;font:500 14.5px/1.3 var(--sans);color:#faf9f5}
  .pp-win .nh-cap span{font:500 12px/1 var(--mono);color:var(--coral);margin-right:8px}
  .pp-play{left:14px;top:14px;height:38px;font-size:13.5px}
  .pp-play i{width:26px;height:26px}
  .pp-stats{margin-top:30px}
  .pp-stats>div{padding:0 16px}
  .pp-stats>div:nth-child(odd){padding-left:0;border-left:0}
  .pp-stats b{font-size:34px}
  .pp-stats span{font-size:13.5px}
  .pp-sec{padding-top:84px}
  .pp-head{margin-bottom:34px}
  .pp-head h2{font-size:34px!important}
  .pp-head p{font-size:17px}
  .pp-panel{padding:16px;border-radius:20px;gap:22px}
  .pp-panel .pp-win{aspect-ratio:1/1.04;border-radius:16px}
  .pp-cards{grid-template-columns:1fr;gap:44px}
  .pp-media{border-radius:20px}
  .pp-cb h3{font-size:23px!important}
  .nh-sat{margin-top:84px}
  .nh-stage{border-radius:18px;height:min(56vh,calc(100vw - 30px))!important}
  .nh-ops{width:calc(100% - 32px);border-radius:20px;margin-top:84px!important}
  .nh-hire{padding-top:84px!important}
  .nh-hire .nh-head h2{font-size:34px!important}
  .pp-end{padding:36px 22px;border-radius:20px;gap:28px}
  .pp-end h2{font-size:34px!important}
  .pp-end .pp-ctas{flex-direction:column;align-items:stretch}
  .pp-sec:last-of-type{padding-bottom:84px}
  .nh-head h2,.nh-steps h2{font-size:34px!important}
}
@media(prefers-reduced-motion:reduce){ .pp-media img{transition:none} }
@media print{ .pp-win,.pp-media{display:none} footer{background:#fff!important;color:#000} }

/* LinkedIn in the footer's social row, as a word in a pill (no third-party mark is drawn) */
.social .soc.txt{width:auto;padding:0 16px;font:500 14px/1 var(--sans);letter-spacing:.01em;text-decoration:none}
.social .soc.txt:hover,.social .soc.txt:focus-visible{color:#d97757;border-color:#d97757;outline-color:#d97757}

/* ---- the visit numbers (14 Oct 2026): real counts from our own server ----
   the homepage: people on the site now and the visits since counting began,
   under the two buttons; every footer: the visits. The space is held while
   the numbers load, so nothing below moves. */
.pp-live{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:22px auto 0;
 padding:9px 17px;border:1px solid var(--line);border-radius:999px;background:var(--card);
 font:400 14px/1.4 var(--sans);color:var(--mut);transition:opacity .6s ease}
.pp-live.wait{visibility:hidden;opacity:0}
.pp-live.off{display:none}
.pp-live b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pp-live .pp-lnow{display:inline-flex;align-items:center;gap:9px}
.pp-live .pp-lnow[hidden]{display:none}
.pp-live .pp-lnow:not([hidden])+.pp-ltot{padding-left:14px;border-left:1px solid var(--line)}
.pp-live .pp-ldot{width:8px;height:8px;border-radius:50%;background:#34D399;flex:none;box-shadow:0 0 0 0 rgba(52,211,153,.5)}
@media(prefers-reduced-motion:no-preference){.pp-live .pp-ldot{animation:pp-ping 2.2s ease-out infinite}}
@keyframes pp-ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}75%,100%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}
@media(max-width:600px){
 .pp-live{font-size:13.5px;padding:9px 15px;border-radius:18px}
 .pp-live .pp-lnow:not([hidden])+.pp-ltot{padding-left:0;border-left:0}
}
footer .fbot .fvis{font-variant-numeric:tabular-nums}
footer .fbot .fvis[hidden]{display:none}

/* ---- the Najd emblem in the header, moving (14 Oct 2026: the CEO's choice, the logo only) ----
   once a visit (js/na-pre.js marks the first page): the ring draws itself from the top, the
   orange chevron fills from the ground up, then the ivory chevron, then the bar. A light passes
   over the chevrons now and then, and pointing at the logo sends a light once round the ring.
   Still for anyone who asks for less motion, and wherever the motion engine is not running.
   The drawing holds its first frame while it waits (backwards) and lets go at the end, so the
   drawn emblem is exactly the emblem at rest. */
header .logo .em{overflow:visible}
header .logo .em .em-ring{transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
header .logo .em .em-arc{transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);stroke-dasharray:0 100;opacity:0}
header .logo .em .em-bar{transform-box:fill-box;transform-origin:center}
header .logo .em .em-glint{opacity:0;transform:translateX(-70px) rotate(22deg)}
html.em-intro header .logo .em .em-ring{animation:em-ring 1.1s cubic-bezier(.65,0,.35,1) .15s backwards}
html.em-intro header .logo .em .em-out{animation:em-rise .95s cubic-bezier(.2,.8,.2,1) .45s backwards}
html.em-intro header .logo .em .em-in{animation:em-rise-in .85s cubic-bezier(.2,.8,.2,1) .77s backwards}
html.em-intro header .logo .em .em-bar{animation:em-bar .6s cubic-bezier(.2,.8,.2,1) 1.17s backwards}
html.na-m header .logo .em .em-glint{animation:em-glint 7s ease-in-out 2.6s infinite}
html.na-m header .logo:hover .em .em-arc,html.na-m header .logo:focus-visible .em .em-arc{animation:em-orbit .95s cubic-bezier(.65,0,.35,1)}
@keyframes em-ring{from{stroke-dasharray:0 100}to{stroke-dasharray:100 0}}
@keyframes em-rise{from{transform:translateY(46px)}to{transform:translateY(0)}}
@keyframes em-rise-in{from{transform:translateY(36px)}to{transform:translateY(0)}}
@keyframes em-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes em-glint{0%{opacity:0;transform:translateX(-70px) rotate(22deg)}3%{opacity:.55}15%{opacity:.55;transform:translateX(70px) rotate(22deg)}17%,100%{opacity:0;transform:translateX(70px) rotate(22deg)}}
@keyframes em-orbit{0%{opacity:1;stroke-dasharray:16 84;transform:rotate(-90deg)}100%{opacity:1;stroke-dasharray:16 84;transform:rotate(270deg)}}
@media (prefers-reduced-motion:reduce){header .logo .em *{animation:none!important}header .logo .em .em-arc,header .logo .em .em-glint{opacity:0!important}}
/* eye-band: start. The ground, read as data: the eye window under the hero (15 Oct 2026).
   A dark window in both themes; the words on the left (on top on a phone), the eye in the free space. */
.nh-eye .pp-win.nh-eyewin{display:flex;align-items:center;min-height:540px;padding:56px 60px;box-sizing:border-box}
.nh-eyewin>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.nh-eyewin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,20,19,.74) 0%,rgba(20,20,19,.42) 33%,rgba(20,20,19,0) 54%)}
.nh-eyetxt{position:relative;z-index:2;max-width:460px}
.nh-eyetxt .nh-ekick{margin:0;font:500 13px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#e08a6a}
.nh-eyetxt h2{margin:14px 0 0;font:500 46px/1.08 var(--serif);letter-spacing:-.012em;color:rgba(250,249,245,.62)}
.nh-eyetxt h2 em{font-style:normal;color:#faf9f5!important}
.nh-eyetxt p.nh-elead{margin:18px 0 0;font:400 17px/1.55 var(--sans);color:rgba(250,249,245,.76)}
.nh-eyebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.nh-eyewin .nh-eyebtns .pp-btn{flex:0 0 auto;background:#faf9f5;color:#141413!important;border-color:transparent}
.nh-eyewin .nh-eyebtns .pp-btn:hover{background:#e5e3d9}
.nh-eyewin .nh-eyebtns .pp-btn.alt{background:rgba(250,249,245,.08);color:#faf9f5!important;border-color:rgba(250,249,245,.26)}
.nh-eyewin .nh-eyebtns .pp-btn.alt:hover{background:rgba(250,249,245,.16)}
.nh-eyewin .nh-eyebtns .pp-btn:focus-visible{outline:2px solid #e08a6a;outline-offset:3px}
@media(max-width:760px){
  .nh-eye .pp-win.nh-eyewin{display:block;min-height:0;padding:30px 22px 300px;border-radius:20px}
  .nh-eyewin::before{background:linear-gradient(180deg,rgba(20,20,19,.72) 0%,rgba(20,20,19,.36) 46%,rgba(20,20,19,0) 64%)}
  .nh-eyetxt{max-width:none}
  .nh-eyetxt h2{font-size:32px}
  .nh-eyetxt p.nh-elead{font-size:16px}
  .nh-eyewin .nh-eyebtns .pp-btn{flex:1 1 auto}
}
/* eye-band: end */
/* works-band: start. Our machines at work, in characters (15 Oct 2026): a dark window, dark in both themes. */
.pp-win.nh-workwin{aspect-ratio:16/7.2;min-height:420px;max-height:600px;width:100%}
.nh-workwin>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nh-workhint{position:absolute;left:22px;top:20px;z-index:2;margin:0;display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 12px;border-radius:999px;background:rgba(250,249,245,.08);border:1px solid rgba(250,249,245,.14);
  color:rgba(250,249,245,.86);font:500 13.5px/1.2 var(--sans);pointer-events:none}
.nh-workhint i{width:8px;height:8px;border-radius:50%;background:#e08a6a;box-shadow:0 0 0 4px rgba(224,138,106,.18)}
.nh-workhint .t{display:none}
@media (hover:none){ .nh-workhint .m{display:none} .nh-workhint .t{display:inline} }
@media(max-width:760px){ .pp-win.nh-workwin{aspect-ratio:4/5;min-height:0;border-radius:20px} .nh-workhint{left:14px;top:14px;font-size:12.5px} }
/* works-band: end */
/* world-band: start. The world at the top of the homepage (15 Oct 2026): the headline, its line and the
   buttons in one dark band with our machines at work, from edge to edge of the screen and filling it under
   the header (the CEO: no empty space at the sides); dark in Light and in Charcoal. */
.pp-hero.nh-world{padding-top:0}
.nh-world .pp-win.nh-worldwin{display:flex;flex-direction:column;align-items:center;margin-top:0;aspect-ratio:auto;max-height:none;
  width:100%;border-radius:0;min-height:clamp(640px,calc(100vh - 73px),1240px);min-height:clamp(640px,calc(100svh - 73px),1240px);
  padding:56px 40px 0;box-sizing:border-box}
.nh-world .pp-win.nh-worldwin{background:radial-gradient(70% 46% at 50% 82%,rgba(217,119,87,.15),rgba(217,119,87,0) 72%),var(--win)}
.nh-worldwin>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent);mask-image:linear-gradient(#000 calc(100% - 72px),transparent)}
/* over the world the header is dark with it (the class is in the page, and js/na-world.js takes it off once
   the world is scrolled past), so the top of the homepage is one piece from the very top of the screen */
header{transition:background-color .35s ease,border-color .35s ease}
header.nh-dk{--bg:#1f1e1d;--card:#262624;--ink:#faf9f5;--ink2:#e5e3d9;--mut:#c2c0b6;--faint:#9c9a92;--line:#3e3d38;--line2:#33322e;
  --soft:#2a2927;--band:#232220;--pri:#d97757;--pri-2:#e08a6a;--pri-ink:#141413;--tint:#3a2a23;--btn:#faf9f5;--btn-2:#e5e3d9;--btn-ink:#141413;
  --alt:#30302e;--alt-2:#3a3936;--alt-ink:#faf9f5;color:var(--ink);color-scheme:dark;background:var(--bg)!important;border-bottom-color:transparent!important}
html[data-theme="charcoal"] header.nh-dk{--bg:#141413}
@media (prefers-reduced-motion:reduce){ header{transition:none} }
.nh-wtxt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:1000px}
.nh-wtxt .pp-h1{color:#faf9f5}
.nh-wtxt .pp-sub{color:rgba(250,249,245,.78)}
.nh-wtxt .pp-btn{background:#faf9f5;color:#141413!important;border-color:transparent}
.nh-wtxt .pp-btn:hover{background:#e5e3d9}
.nh-wtxt .pp-btn.alt{background:rgba(250,249,245,.08);color:#faf9f5!important;border-color:rgba(250,249,245,.26)}
.nh-wtxt .pp-btn.alt:hover{background:rgba(250,249,245,.16)}
.nh-wtxt .pp-btn:focus-visible{outline:2px solid #e08a6a;outline-offset:3px}
.nh-wtxt .pp-live{background:rgba(250,249,245,.06);border-color:rgba(250,249,245,.16);color:rgba(250,249,245,.74)}
.nh-wtxt .pp-live b{color:#faf9f5}
.nh-wscene{flex:1 1 auto;min-height:330px;width:100%}
.nh-worldwin .nh-workhint{top:auto;bottom:22px;left:50%;transform:translateX(-50%);background:rgba(20,20,19,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;font-size:13px;padding:8px 14px 8px 11px;transition:opacity .8s ease .4s}
.nh-worldwin .nh-workhint.used{opacity:0}
@media (max-height:820px) and (min-width:761px){
  .nh-world .pp-win.nh-worldwin{padding-top:40px}
  .nh-wtxt .pp-sub{margin-top:16px} .nh-wtxt .pp-ctas{margin-top:24px} .nh-wtxt .pp-live{margin-top:16px}
}
@media(min-width:1100px){ .nh-wtxt .pp-sub{max-width:66ch} }
@media(max-width:1080px){ .nh-world .pp-win.nh-worldwin{min-height:clamp(600px,calc(100vh - 57px),1240px);min-height:clamp(600px,calc(100svh - 57px),1240px)} }
/* the headline is built from characters when the page opens, then shows as it is; while the satellite
   reads it, the letters under its beam glow orange. Whatever happens, it shows within 3 seconds. */
html.na-m .nh-wtxt h1.pp-h1{opacity:0;animation:nh-wh1 0s linear 3s forwards}
html.na-m .nh-wtxt h1.pp-h1.on{opacity:1;transition:opacity .7s ease}
@keyframes nh-wh1{to{opacity:1}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nh-wtxt h1.pp-h1{color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(90deg,#faf9f5 0,#faf9f5 calc(var(--bx,-9999px) - 90px),#f0b49b calc(var(--bx,-9999px) - 48px),#d97757 var(--bx,-9999px),#f0b49b calc(var(--bx,-9999px) + 48px),#faf9f5 calc(var(--bx,-9999px) + 90px),#faf9f5 100%)}
}
/* on a phone the words take less of the screen, so the world under them is big and clear: the line a
   little smaller, the two buttons side by side, the live numbers as two quiet lines without a box */
@media(max-width:760px){
  .nh-world .pp-win.nh-worldwin{min-height:calc(100vh - 57px);min-height:calc(100svh - 57px);padding:26px 18px 0;
    background:radial-gradient(95% 30% at 50% 70%,rgba(217,119,87,.2),rgba(217,119,87,0) 72%),var(--win)}
  .nh-wtxt .pp-sub{font-size:16px;line-height:1.5;margin-top:14px;color:rgba(250,249,245,.84)}
  .nh-wtxt .pp-ctas{margin-top:20px;gap:10px;flex-wrap:nowrap}
  .nh-wtxt .pp-ctas .pp-btn{flex:1 1 0;min-width:0;height:46px;padding:0 10px;font-size:15.5px;white-space:nowrap}
  .nh-wtxt .pp-live{flex-direction:column;margin-top:14px;padding:0;border:0;border-radius:0;background:none;font-size:13px;gap:3px;min-height:40px}
  .nh-wscene{min-height:360px}
  .nh-worldwin .nh-workhint{bottom:14px;font-size:12.5px;padding:7px 12px 7px 10px}
}
/* a narrow phone: the headline and the line a touch smaller, so the line keeps to three lines */
@media(max-width:380px){
  .nh-wtxt .pp-h1{font-size:40px!important}
  .nh-wtxt .pp-sub{font-size:15px}
  .nh-wtxt .pp-ctas .pp-btn{font-size:15px}
}
/* world-band: end */