/* Morta home: rebuilt to the measured values of the purchased ARCHΣ template (1440 frame). */
:root{--bg:#F5F5F5;--ink:#000;--mut:rgba(0,0,0,.7);--blue:#0700FF;--dash:rgba(7,0,255,.45);--serif:"Instrument Serif","Times New Roman",serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--e:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:none}
h1,h2,h3,h4,p,ul{margin:0;padding:0}
ul{list-style:none}
.px{image-rendering:pixelated}
.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}

/* type */
.lbl{display:flex;align-items:center;gap:8px;font:500 14px/22.4px var(--mono);text-transform:uppercase}
.lbl::before{content:"";width:5px;height:5px;background:var(--blue);flex:none}
.on-blue .lbl::before{background:#fff}
.h1{font:400 110px/100px var(--serif);letter-spacing:-3px}
.h2{font:400 75px/70px var(--serif);letter-spacing:-1px}
.h3{font:400 60px/50px var(--serif)}
.lead{font:400 18px/28px var(--mono);color:var(--mut)}
.small{font:400 14px/20px var(--mono);color:var(--mut)}
.it{font-style:italic}

/* dashed frame with corner crosses that turn on hover */
.fr{position:relative}
.fr::before{content:"";position:absolute;inset:0;border:1px dashed var(--dash);pointer-events:none}
.fr>.cn{position:absolute;width:11px;height:11px;pointer-events:none;transition:transform .35s var(--e)}
.fr>.cn::before,.fr>.cn::after{content:"";position:absolute;background:var(--blue)}
.fr>.cn::before{left:5px;top:0;width:1.5px;height:11px}
.fr>.cn::after{top:5px;left:0;height:1.5px;width:11px}
.fr>.cn.tl{left:-5px;top:-5px}.fr>.cn.tr{right:-5px;top:-5px}.fr>.cn.bl{left:-5px;bottom:-5px}.fr>.cn.br{right:-5px;bottom:-5px}
.fr:hover>.cn{transform:rotate(45deg)}
.on-blue .fr::before{border-color:rgba(255,255,255,.5)}
.on-blue .fr>.cn::before,.on-blue .fr>.cn::after{background:#fff}

/* buttons: the label rolls to its second line on hover */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 18px;font:600 16px/24px var(--mono);white-space:nowrap;overflow:hidden;transition:background-color .35s var(--e),color .35s var(--e)}
.btn .roll{display:block;height:24px;overflow:hidden}
.btn .roll span{display:block;transition:transform .45s var(--e)}
.btn:hover .roll span{transform:translateY(-100%)}
.btn-p{background:#000;color:#fff}
.btn-p:hover{background:var(--blue)}
.btn-s{color:#000}
.btn-sm{height:45px;font-size:14px;line-height:22px;padding:0 14px}
.btn-sm .roll{height:22px}

/* nav */
.nav{position:absolute;top:30px;left:30px;z-index:20;width:800px;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 15px}
.nav .navbg{position:absolute;inset:1px;overflow:hidden}
.nav .navbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.wm{position:relative;font:600 28px/19.6px var(--mono);letter-spacing:-.5px}
.nav-l{position:relative;display:flex;gap:26px;font:500 14px/22.4px var(--mono)}
.nav-l a{transition:color .25s}.nav-l a:hover{color:var(--blue)}
.nav .btn{position:relative}
.burger{display:none}

/* sections */
.sec{position:relative;overflow:hidden}
.wrap{position:relative;padding:0 53px}
.head{display:flex;flex-direction:column;gap:24px;padding:48px 0 20px}
.head .lead{max-width:560px}
.center{align-items:center;text-align:center}
.center .lead{margin:0 auto}

/* hero */
.hero{height:928px;padding-top:100px}
.hero .bgimg{top:100px;height:828px;object-position:center;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.hero-in{position:relative;height:828px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:100px 30px}
.hero .lbl{padding-left:13px}
.hero .lead{max-width:660px}
.btns{display:flex;gap:24px;padding-top:20px}

/* clients */
.clients{height:1080px;padding-top:100px}
.clients .bgimg{height:925px;object-position:center top;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 94%);mask-image:linear-gradient(to bottom,#000 70%,transparent 94%)}
.tiles{display:grid;grid-template-columns:repeat(6,201px);justify-content:space-between;margin-top:50px}
.tile{height:80px;display:flex;align-items:center;justify-content:center;gap:12px;font:400 38px/1 var(--serif);color:rgba(0,0,0,.45);transition:color .35s var(--e)}
.tile svg{width:30px;height:30px;fill:currentColor;flex:none}
.tile:hover{color:#000}
.band-t{position:absolute;left:53px;top:829px;max-width:560px}

/* manifesto */
.manifesto{height:900px}
.manifesto .side{position:absolute;top:0;height:100%;width:349px;object-fit:cover}
.manifesto .side.l{left:0}.manifesto .side.r{right:0}
.mcard{position:relative;width:429px;margin:100px auto 0;background:var(--blue);color:#fff;padding:15px;box-shadow:0 .6px 2.3px rgba(0,0,0,.1),0 10px 40px rgba(7,0,255,.18)}
.mcard-in{position:relative;padding:42px 30px 30px;min-height:402px;display:flex;flex-direction:column;justify-content:space-between}
.mcard-in::before{content:"";position:absolute;inset:0;border:1px dashed rgba(255,255,255,.55)}
.mcard .q{font:400 90px/50px var(--serif);text-align:center;height:52px}
.mcard p{font:italic 400 32px/37px var(--serif)}
.mcard .sig{font:400 29px/32px var(--serif);text-transform:uppercase;margin-top:14px}

/* operational (blue) */
.ops{height:1200px;padding:100px 0}
.ops-in{position:relative;height:900px;background:var(--blue);color:#fff;padding:0 30px 100px;display:flex;flex-direction:column;justify-content:space-between}
.ops-in .bgimg{object-position:right center}
.ops-in>:not(.bgimg){position:relative}
.ops .head{padding-left:23px}
.ops .lead{color:rgba(255,255,255,.8)}
.ops ul{position:relative;display:grid;gap:29px;padding-left:23px}
.ops li{font:400 29px/32px var(--serif);text-transform:uppercase}

/* loop (architecture) */
.loop{padding:100px 0}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.card-img{height:420px;padding:15px}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-t{padding:30px;display:flex;flex-direction:column;gap:14px}

/* process */
.process{height:1222px;padding:40px}
.process .dots{position:absolute;inset:0;background-image:radial-gradient(var(--blue) 1.9px,transparent 2px);background-size:7px 7px}
.process-in{position:relative;height:100%;background:var(--bg);padding:60px 0;display:flex;flex-direction:column;align-items:center}
.phases{width:559px;margin-top:28px;padding:30px;display:grid;gap:100px;background:var(--bg);box-shadow:0 .8px 4px rgba(0,0,0,.22),0 20px 60px rgba(0,0,0,.12)}
.phase{text-align:center;display:grid;gap:10px}
.phase .small{max-width:420px;margin:0 auto}

/* agents (team) */
.agents{padding:100px 0 140px}
.agents .bgimg{top:auto;bottom:0;height:860px;object-position:center}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
.agent{background:var(--blue);color:#F5F5F5;padding:8px;display:flex;flex-direction:column}
.agent .ph{height:300px;background:var(--bg);overflow:hidden}
.agent .ph{background-repeat:no-repeat;image-rendering:pixelated}
.agent .nm{padding:26px 12px 8px;font:400 52px/50px var(--serif)}
.agent .meta{padding:0 12px 18px;font:400 14px/20px var(--mono);display:grid;gap:4px}
.agent .meta b{font-weight:400;color:#fff}
.agent .meta span{color:rgba(245,245,245,.75)}

/* faq */
.faq{padding:100px 0}
.acc{margin-top:32px;background:var(--blue);color:#fff;padding:10px 0}
.qa{border-bottom:1px solid rgba(255,255,255,.12)}
.qa:last-child{border-bottom:0}
.qa button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:16px 24px;font:400 22px/28px var(--serif)}
.qa button::before{content:"•";margin-right:10px}
.qa button span{flex:1}
.qa button i{font-style:normal;font:300 24px/1 var(--mono);transition:transform .35s var(--e)}
.qa.open button i{transform:rotate(45deg)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--e)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 24px 18px 40px;max-width:760px;font:400 18px/24px var(--serif);letter-spacing:.3px;color:rgba(255,255,255,.9)}

/* cta */
.cta{height:556px}
.cta .bgimg{object-position:center 22%;-webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 96%),linear-gradient(to right,transparent 30%,#000 62%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 35%,transparent 96%),linear-gradient(to right,transparent 30%,#000 62%);mask-composite:intersect}
.cta .lead{max-width:520px}
.cta .wrap{height:100%;display:flex;flex-direction:column;justify-content:center}
.cta .btns{padding-top:24px}

/* footer */
.foot{border-top:1px dashed var(--dash);padding:44px 30px 30px;display:flex;justify-content:space-between;gap:40px}
.foot .wm{font-size:28px}
.foot small{display:block;margin-top:44px;font:400 14px/20px var(--mono)}
.fcols{display:flex;gap:56px;font:400 14px/22px var(--mono)}
.fcols div{display:grid;gap:4px;align-content:start}
.fcols a:hover{color:var(--blue)}

/* motion: words and blocks start hidden only when JS is on (see js/arch.js) */
.js [data-words] .w{display:inline-block;opacity:0;transform:translateY(10px);filter:blur(5px);transition:opacity .55s var(--e),transform .55s var(--e),filter .55s var(--e)}
.js [data-words].in .w{opacity:1;transform:none;filter:none}
.js [data-rise]{opacity:0;transform:translateY(32px);transition:opacity .8s var(--e),transform .8s var(--e)}
.js [data-rise].in{opacity:1;transform:none}

/* tablet + phone (mobile values measured on the template at 390) */
@media (max-width:1100px){
  .nav{left:15px;right:15px;width:auto}.nav-l{display:none}
  .h1{font-size:72px;line-height:68px}.h2{font-size:52px;line-height:50px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:16px}
  .cards4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .wrap{padding:0 15px}
  .nav{height:54px;top:15px}.nav .btn{height:40px;font-size:13px}
  .hero{height:auto;padding-top:80px}.hero-in{height:auto;min-height:640px;padding:60px 15px 80px;justify-content:flex-end}
  .hero .bgimg{top:0;height:62%;object-position:72% top;opacity:.75}
  .lbl{font-size:12px;line-height:14px}
  .h1{font-size:52px;line-height:50px}.h2{font-size:34px;line-height:36px}.h3{font-size:28px;line-height:34px}
  .lead{font-size:16px;line-height:24px;letter-spacing:-.4px}
  .btns{gap:12px;flex-wrap:wrap}.btn{height:46px;font-size:14px}
  .clients{height:auto;padding:60px 0 340px}.tiles{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}.tile{height:64px;font-size:28px}
  .band-t{left:15px;right:15px;bottom:40px;font-size:15px}
  .manifesto{height:auto;padding:60px 0}.manifesto .side{display:none}.mcard{width:auto;margin:40px 15px 0}.mcard p{font-size:22px;line-height:27px}.mcard .sig{font-size:22px}
  .ops .ops-in .bgimg{object-position:78% center;opacity:.6}
  .ops{height:auto;padding:40px 0}.ops-in{height:auto;min-height:640px;padding:0 15px 40px;gap:60px}.ops .head,.ops ul{padding-left:0}.ops li{font-size:22px;line-height:26px}
  .loop,.faq{padding:60px 0}.cards3{grid-template-columns:1fr}.card-img{height:300px}
  .process{height:auto;padding:16px}.process-in{padding:40px 15px}.phases{width:100%;gap:56px;padding:24px 16px}
  .agents{padding:60px 0}.cards4{grid-template-columns:1fr}.agent .nm{font-size:34px;line-height:40px}
  .qa button{font-size:19px;padding:14px 16px}.qa .ans p{padding:0 16px 16px 30px;font-size:15px}
  .cta{height:auto;padding:60px 0 300px}.cta .bgimg{top:auto;bottom:0;height:320px;object-position:65% center;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%)}
  .foot{flex-direction:column;padding:32px 15px}
}

/* burger + menu (below 1100px the links fold into it) */
.nav-r{position:relative;display:flex;align-items:center;gap:8px}
.burger{all:unset;cursor:pointer;width:40px;height:40px;display:none;flex-direction:column;justify-content:center;gap:6px;padding:0 10px;box-sizing:border-box}
.burger i{display:block;height:1.5px;background:#000;transition:transform .35s var(--e)}
.nav.open .burger i:first-child{transform:translateY(3.75px) rotate(45deg)}.nav.open .burger i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu{position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);display:grid;background:var(--bg);border:1px dashed var(--dash);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--e),transform .3s var(--e),visibility .3s}
.menu a{padding:14px 16px;font:500 14px/1 var(--mono);border-top:1px dashed rgba(7,0,255,.2)}
.menu a:first-child{border-top:0}
.nav.open .menu{opacity:1;visibility:visible;transform:none}
@media (max-width:1100px){.burger{display:flex}}