html{background:var(--bg)}
body{background:transparent}

 
.artbg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.artbg svg{width:100%;height:100%;display:block;
  transform:translateY(var(--art-y,0px));will-change:transform}
.artbg .grid line{stroke:rgba(17,17,17,.05);stroke-width:1}


.artbg .arc{display:none}
 
.artbg .arc-1{stroke:rgba(17,17,17,.18)}
.artbg .arc-2{stroke:rgba(232,176,35,.55);stroke-width:1.8}
.artbg .arc-3{stroke:rgba(17,17,17,.10)}
 
.artbg .dot,.artbg .dot-o{display:none}





.head{background:rgba(255,255,255,.90)}
#mission{background:transparent}
section.tint#service{background:rgba(251,242,220,.88)}
#strength{background:rgba(255,255,255,.66)}
#news{background:rgba(244,244,244,.66)}
.contact{background:rgba(251,242,220,.55)}
.foot{background:rgba(244,244,244,.82)}






section.tint#works{background:radial-gradient(120% 90% at 14% 0%,#16242F 0%,#0F1A22 62%)}
#works .eyebrow{color:#D8A63C}
#works h2{color:var(--dark-ink);font-size:clamp(26px,3.4vw,40px)}
#works .lead{color:var(--on-dark)}
#works .case{background:rgba(247,245,240,.045);border-color:rgba(247,245,240,.16)}
#works .case h3,#works .item .lbl{color:var(--dark-ink)}
#works .item p,#works .item li{color:var(--on-dark)}
#works .tagband{background:rgba(247,245,240,.06);border-top-color:rgba(247,245,240,.14);color:rgba(247,245,240,.62)}
#works .pending{background:rgba(232,176,35,.10);border-color:rgba(232,176,35,.45);color:#E8C46A}
#works .more{color:#E8C46A;border-bottom-color:rgba(232,176,35,.7)}
 
#works h2::after{
  background-image:
    linear-gradient(to right, rgba(232,176,35,0) 0%, rgba(232,176,35,.32) 20%, var(--brand) 50%,
      rgba(232,176,35,.32) 80%, rgba(232,176,35,0) 100%),
    linear-gradient(to right, rgba(162,157,149,.26) 0%, rgba(162,157,149,.16) 52%, rgba(162,157,149,.05) 100%)}



#mission[data-anim="mask"] .sec{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
#mission[data-anim="mask"] .sec-head{position:static;max-width:60em}
#mission[data-anim="mask"] .eyebrow{justify-content:center}
#mission[data-anim="mask"] h2{font-size:clamp(26px,3.6vw,44px);max-width:22em;margin-left:auto;margin-right:auto}
#mission[data-anim="mask"] .sec-body{display:flex;justify-content:center}
#mission[data-anim="mask"] .lead{max-width:52em;text-align:center;margin:0 auto}


#mission[data-anim="mask"] h2 .reveal{display:block;word-break:auto-phrase;text-wrap:balance}

 
.pillar{position:relative;overflow:hidden}
.pillar > *{position:relative;z-index:1}
.pnum{display:inline-block}
 
.pillar::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;z-index:2;
  background:var(--brand);transform:scaleY(0);transform-origin:top;
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.pillar:hover::after{transform:scaleY(1)}



#service[data-anim="cards"] .sec{grid-template-columns:1fr;gap:26px}
#service[data-anim="cards"] .sec-head{position:static}
#service[data-anim="cards"] .lead{max-width:56em}
#service[data-anim="cards"] .pillars{display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:30px;border-top:0}
#service[data-anim="cards"] .pillar{display:flex;flex-direction:column;gap:0;
  padding:30px 28px 32px;border:1px solid var(--line-faint);border-radius:10px;
  background:rgba(255,255,255,.66);
  transition:transform .38s cubic-bezier(.16,1,.3,1),box-shadow .38s cubic-bezier(.16,1,.3,1),
    border-color .38s,background-color .38s;will-change:transform}


#service[data-anim="cards"] .pillar:hover{transform:translateY(-6px);
  border-color:var(--line-soft);background:var(--bg);
  box-shadow:0 1px 2px var(--line-faint),0 22px 44px -12px var(--line-soft)}
#service[data-anim="cards"] .pillar:hover .picon{color:var(--brand-dim)}
#service[data-anim="cards"] .picon{transition:color .38s}
#service[data-anim="cards"] .picon{color:var(--muted-2);margin:0 0 16px}
#service[data-anim="cards"] .picon svg{display:block;width:30px;height:30px}
#service[data-anim="cards"] .pnum{font-style:normal;font-size:34px;line-height:1.1;
  letter-spacing:.02em;margin:0 0 12px}
#service[data-anim="cards"] .pname{font-size:16px;font-weight:700;margin:0 0 2px}
#service[data-anim="cards"] .pen{font-size:12.5px;margin:0 0 10px}
#service[data-anim="cards"] .pillar p{font-size:13.5px;line-height:1.9;color:var(--muted);margin:0 0 8px}
#service[data-anim="cards"] .pbody{gap:0}
#service[data-anim="cards"] .pbody .more{margin-top:8px}
#service[data-anim="cards"] .pending{margin-top:6px}



#strength[data-anim="cols"] .sec{grid-template-columns:1fr;gap:26px}
#strength[data-anim="cols"] .sec-head{position:static}
#strength[data-anim="cols"] .strengths{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:0}
#strength[data-anim="cols"] .st{display:flex;flex-direction:column;gap:10px;padding:26px 0 4px}
#strength[data-anim="cols"] .st p{margin-top:0}



.st{position:relative;border-top-color:transparent}
.st::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--brand)}
.js-anim .st::before{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s}
.js-anim .st.is-in::before{transform:scaleX(1)}

 
.tagband{position:relative;overflow:hidden}
.tagband::before{content:"";position:absolute;inset:0;background:inherit}
.js-anim .case .tagband::before{transform:translateX(0);
  transition:transform .8s cubic-bezier(.2,.7,.2,1) .35s}
.js-anim .case.is-in .tagband::before{transform:translateX(101%)}

 
.ni{position:relative;padding-left:16px}
.ni::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--brand-dim)}
.js-anim .ni::before{transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1) .2s}
.js-anim .ni.is-in::before{transform:scaleX(1)}
.ni .d{color:var(--brand-dim)}


#news .ni{border-bottom-color:transparent}
#news .ni::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-soft)}
.js-anim #news .ni::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .7s cubic-bezier(.2,.7,.2,1) .3s}
.js-anim #news .ni.is-in::after{transform:scaleX(1)}

 
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";height:1px;width:56px;background:var(--brand-dim);opacity:.5}
.js-anim .eyebrow::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s}
.js-anim .eyebrow.is-in::after{transform:scaleX(1)}
#works .eyebrow::after{background:#D8A63C}



.head .wrap{transition:height .28s cubic-bezier(.2,.7,.2,1)}
.head.is-small .wrap{height:52px}
.brand{transition:font-size .28s cubic-bezier(.2,.7,.2,1)}
.head.is-small .brand{font-size:21px}

 


.js-anim .rf-x,.js-anim .rf-y{opacity:0;
  transition:opacity .6s,transform 1s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.js-anim .rf-x{transform:translateX(-40px)}
.js-anim .rf-y{transform:translateY(40px)}
.js-anim .rf-pop{opacity:0;transform:scale(.1);
  transition:opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1);will-change:opacity,transform}
.js-anim .rf-x.is-in,.js-anim .is-in .rf-x,
.js-anim .rf-y.is-in,.js-anim .is-in .rf-y,
.js-anim .rf-pop.is-in,.js-anim .is-in .rf-pop{opacity:1;transform:none}




 
.wrap{max-width:1440px;padding:0 96px}
section{padding:140px 0}


.fv{padding:132px 0}
.fv .wrap{max-width:var(--wrap);padding-left:28px;padding-right:28px}

 
.sec{grid-template-columns:1fr;gap:28px}
.sec-head{position:static}
.lead{max-width:45em}



#mission[data-anim="mask"] .sec{grid-template-columns:minmax(0,514fr) minmax(0,669fr);
  gap:64px;justify-items:stretch;text-align:left}
#mission[data-anim="mask"] .sec-head{max-width:none}
#mission[data-anim="mask"] .eyebrow{justify-content:flex-start}
#mission[data-anim="mask"] h2{max-width:none;margin-left:0;margin-right:0}
#mission[data-anim="mask"] .sec-body{display:block}
#mission[data-anim="mask"] .lead{max-width:45em;text-align:left;margin:0}

 
#service[data-anim="cards"] .pillar{padding:32px 26px 30px;border-radius:18px}



#strength[data-anim="cols"] .strengths{display:flex;flex-direction:column;gap:0}
#strength[data-anim="cols"] .st{display:grid;grid-template-columns:180px 1fr;gap:48px;
  align-items:start;padding:44px 0 46px;border:0;border-top:1px solid transparent;
  border-radius:0;background:transparent}
#strength[data-anim="cols"] .st .no{font-size:52px;line-height:1}
#strength[data-anim="cols"] .stbody{max-width:52em}
#strength[data-anim="cols"] .stbody h3{font-size:21px;margin:0 0 10px}
#strength[data-anim="cols"] .st p{font-size:14.5px;margin:0}
#strength[data-anim="cols"] .st::before{left:0;right:0;top:-1px}

 
#works[data-anim="cardsBig"] .cases{gap:20px}
#works[data-anim="cardsBig"] .case{border:1px solid rgba(247,245,240,.16);
  border-radius:18px;overflow:hidden}

 
#news[data-anim="rowsSlide"] .news{margin-top:0}

 
.contact .eyebrow{justify-content:flex-start}
.contact h2{text-align:left}
.contact .lead{text-align:left;margin:0}



.js-anim #strength[data-anim="cols"] .st .rf-x,
.js-anim #strength[data-anim="cols"] .st .rf-y,
.js-anim #strength[data-anim="cols"] .st .rf-pop,
.js-anim #works[data-anim="cardsBig"] .case .rf-x,
.js-anim #works[data-anim="cardsBig"] .case .rf-y,
.js-anim #works[data-anim="cardsBig"] .case .rf-pop,
.js-anim #news[data-anim="rowsSlide"] .ni .rf-x,
.js-anim #news[data-anim="rowsSlide"] .ni .rf-y,
.js-anim #news[data-anim="rowsSlide"] .ni .rf-pop{opacity:1;transform:none;transition:none}





#strength[data-anim="cols"]{overflow-x:clip;overflow-y:visible}
.js-anim #strength[data-anim="cols"] .st{opacity:0;
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.9s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform}
.js-anim #strength[data-anim="cols"] .st:nth-child(odd){transform:translateX(-96px)}
.js-anim #strength[data-anim="cols"] .st:nth-child(even){transform:translateX(96px)}


.js-anim #strength[data-anim="cols"] .st.st-in{opacity:1;transform:none}




.js-anim #strength[data-anim="cols"] .st::before{
  transform:scaleX(0);
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .35s}
.js-anim #strength[data-anim="cols"] .st.st-in::before{transform:scaleX(1)}



@media (min-width:881px) and (min-height:760px){
  .js-anim #strength[data-anim="cols"]{padding:0;height:220vh}
  .js-anim #strength[data-anim="cols"] > .wrap{
    position:sticky;top:0;
    box-sizing:border-box;min-height:100vh;
    padding-top:112px;padding-bottom:44px;
    display:grid;align-content:center}
   
  .js-anim #strength[data-anim="cols"] .st{padding:30px 0 32px}
}

 


#works[data-anim="cardsBig"]{overflow:hidden}
.js-anim #works[data-anim="cardsBig"] .case{opacity:0;transform:translateX(64px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform}
.js-anim #works[data-anim="cardsBig"] .case.is-in{opacity:1;transform:none}
.js-anim #works[data-anim="cardsBig"] .case:nth-child(2){transition-delay:.16s}
.js-anim #works[data-anim="cardsBig"] .case:nth-child(3){transition-delay:.32s}
 
.js-anim #works .case:nth-child(2).is-in .tagband::before{transition-delay:.51s}
.js-anim #works .case:nth-child(3).is-in .tagband::before{transition-delay:.67s}

 
.js-anim #news[data-anim="rowsSlide"] .ni{opacity:0;transform:translateY(20px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform}
.js-anim #news[data-anim="rowsSlide"] .ni.is-in{opacity:1;transform:none}
.js-anim #news[data-anim="rowsSlide"] .ni:nth-child(2){transition-delay:.12s}
.js-anim #news[data-anim="rowsSlide"] .ni:nth-child(3){transition-delay:.24s}
 
.js-anim #news .ni:nth-child(2)::before{transition-delay:.32s}
.js-anim #news .ni:nth-child(3)::before{transition-delay:.44s}
.js-anim #news .ni:nth-child(2)::after{transition-delay:.42s}
.js-anim #news .ni:nth-child(3)::after{transition-delay:.54s}



.fv-b .fv-bg{
  background-image:url(lp-an1-hero-1920.webp);
  animation:fv-zoom 20s ease-in-out infinite;
  will-change:transform}
.fv-b::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,.50) 0%,rgba(17,17,17,.42) 58%,rgba(17,17,17,.12) 100%)}
.fv-b .wrap{z-index:2}
.fv-b::after{z-index:3}
@keyframes fv-zoom{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}






section.tint#service{background:rgba(246,245,242,.90)}
.contact{background:rgba(246,245,242,.72)}



section > .wrap .sec-head > h2::after,
.phead h1::after{
  height:1px;
  background:
    linear-gradient(to right,
      rgba(154,107,18,0) 0%, rgba(154,107,18,.20) 20%, rgba(154,107,18,.55) 50%,
      rgba(154,107,18,.20) 80%, rgba(154,107,18,0) 100%),
    linear-gradient(to right,
      rgba(17,17,17,.20) 0%, rgba(17,17,17,.12) 52%, rgba(17,17,17,.04) 100%)}
#works h2::after{
  background:
    linear-gradient(to right,
      rgba(232,176,35,0) 0%, rgba(232,176,35,.18) 20%, rgba(232,176,35,.48) 50%,
      rgba(232,176,35,.18) 80%, rgba(232,176,35,0) 100%),
    linear-gradient(to right,
      rgba(162,157,149,.22) 0%, rgba(162,157,149,.13) 52%, rgba(162,157,149,.04) 100%)}



.eyebrow{font-family:var(--font-ui);font-style:normal;font-size:12px;
  font-weight:600;letter-spacing:.16em}
.eyebrow::after{width:40px;opacity:.35}



.st::before{background:var(--line-soft)}



#service[data-anim="cards"] .pnum{font-size:24px;margin:0 0 14px}
#strength[data-anim="cols"] .st .no{font-size:34px}



#service[data-anim="cards"] .pillar{border-radius:2px}
#works[data-anim="cardsBig"] .case{border-radius:2px}
.btn,.fsubmit{border-radius:2px}
.cform{border-radius:2px}



#service[data-anim="cards"] .pillar:hover{transform:none;
  border-color:var(--line-soft);background:var(--bg)}
.pillar::after{width:1px;background:var(--brand-dim)}



.req{background:transparent;color:var(--brand-dim);padding:0;
  font-size:11px;letter-spacing:.10em;font-weight:600}



.js-anim .rf-pop{opacity:0;transform:translateY(12px);
  transition:opacity .6s,transform .8s cubic-bezier(.16,1,.3,1)}

 
.artbg .grid line{stroke:rgba(17,17,17,.035)}
.fv::after{height:2px}



.ci .k{font-family:var(--font-ui);font-style:normal;font-size:12px;
  font-weight:600;letter-spacing:.16em}

 
.more{border-bottom-color:rgba(154,107,18,.45)}
#works .more{border-bottom-color:rgba(232,176,35,.45)}

@media (prefers-reduced-motion: reduce){
  .artbg svg{transform:none}
   
  .fv-b .fv-bg{animation:none;transform:none}
  .st::before,.ni::before,.eyebrow::after{transform:none}
  .rf-x,.rf-y,.rf-pop{opacity:1;transform:none}
  .head .wrap,.brand{transition:none}
   
  .pillar::after{transition:none}
  #service[data-anim="cards"] .pillar,
  #service[data-anim="cards"] .picon{transition:none}
  #service[data-anim="cards"] .pillar:hover{transform:none}
  #news .ni::after{transform:none}
   
  #strength[data-anim="cols"] .st,
  #works[data-anim="cardsBig"] .case,
  #news[data-anim="rowsSlide"] .ni{opacity:1;transform:none;transition:none}
  

  .js-anim #strength[data-anim="cols"] .st:nth-child(odd),
  .js-anim #strength[data-anim="cols"] .st:nth-child(even){opacity:1;transform:none;transition:none}
  

  .js-anim #strength[data-anim="cols"]{padding:140px 0;height:auto}
  .js-anim #strength[data-anim="cols"] > .wrap{position:static;min-height:0;padding-top:0;padding-bottom:0;display:block}
}

 
@media (max-width:820px){
  .artbg .grid{display:none}
}

 
@media (max-width:1200px){
  .wrap{padding:0 40px}
  #mission[data-anim="mask"] .sec{gap:40px}
}

 
@media (max-width:880px){
  

  .wrap{padding:0 24px}
  section{padding:88px 0}
   
  .fv{padding:72px 0}
  #mission[data-anim="mask"] .sec{grid-template-columns:1fr;gap:24px}
  #strength[data-anim="cols"] .st{grid-template-columns:1fr;gap:12px;padding:30px 0 32px}
  #strength[data-anim="cols"] .st .no{font-size:26px}   
  #service[data-anim="cards"] .pillars{grid-template-columns:1fr}
  #mission[data-anim="mask"] .sec-head{max-width:100%}
}




body.an1 section.tint#works{background:rgba(246,245,242,.90)}
body.an1 .contact{background:rgba(246,245,242,.90)}

body.an1 #works .eyebrow{color:var(--brand-dim)}
body.an1 #works .eyebrow::after{background:var(--brand-dim)}
body.an1 #works h2{color:var(--ink)}
body.an1 #works .lead{color:var(--text)}
body.an1 #works .case{background:var(--bg);border-color:var(--line-soft)}
body.an1 #works[data-anim="cardsBig"] .case{border-color:var(--line-soft)}
body.an1 #works .case h3,body.an1 #works .item .lbl{color:var(--ink)}
body.an1 #works .item p,body.an1 #works .item li{color:var(--text)}
body.an1 #works .tagband{background:var(--panel-2);
  border-top-color:var(--line-faint);color:var(--muted)}
body.an1 #works .pending{background:var(--brand-pale);
  border-color:var(--brand-dim);color:var(--brand-dim)}
body.an1 #works .more{color:var(--brand-dim);border-bottom-color:rgba(154,107,18,.45)}
 
body.an1 #works h2::after{
  height:1px;
  background:
    linear-gradient(to right,
      rgba(154,107,18,0) 0%, rgba(154,107,18,.20) 20%, rgba(154,107,18,.55) 50%,
      rgba(154,107,18,.20) 80%, rgba(154,107,18,0) 100%),
    linear-gradient(to right,
      rgba(17,17,17,.20) 0%, rgba(17,17,17,.12) 52%, rgba(17,17,17,.04) 100%);
  background-size:42% 100%,100% 100%;
  background-repeat:no-repeat;
  background-position:0% 0,0 0}