/* Emmanuel Epau | clear thinking, considered design. */

:root{
  --bg: #f5f5f7;
  --bg-2: #fff;
  --cream: #fff;
  --text: #1d1d1f;
  --muted: #62636b;
  --line: #dedee4;
  --accent: #0066cc;
  --warm: #0066cc;
  --warm-ink: #0055ad;
  --maxw: 1240px;
  --ease: cubic-bezier(.28,.11,.32,1);
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif
}

body{
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  font-feature-settings: 'cv05','cv11';
  letter-spacing: -.012em
}

html{
  scroll-padding-top: 108px
}

button,input,select{
  font: inherit
}

a,button{
  -webkit-tap-highlight-color: transparent
}

a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline: 3px solid #0077ed;
  outline-offset: 5px
}

a,button{
  touch-action: manipulation
}

.wrap{
  padding-inline: 40px
}

.display,.cond,.lead,.logo,.eyebrow,.btn,.navcta,.navlinks a,.method-c h3,.method-c .mkick,.method-c .mnum,.card h3,.card .go,.cell h3,.cell .num,.feat h3,.feat-link,.footrow .quote,.footrow .meta a,.proof,.edition .date,.edition h4,.about-grid .big,.scrollcue,.viewall,.back,.galtitle,.galsub,.galhead .gn,.galhead h3,.galhead p,.rlabel,.cs-hero h1,.cs-kicker,.cs-main h2,.facts .k,.why .lab,.method .lab,.chartcard h4,.takeaway .lab,.takeaway p,.backbar a{
  font-family: var(--font)!important;
  text-transform: none!important;
  letter-spacing: -.025em
}

h1,h2,h3,h4{
  text-wrap: balance
}

p{
  text-wrap: pretty
}

.display{
  font-weight: 650;
  line-height: 1.04
}

.eyebrow,.cs-kicker{
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase!important;
  color: var(--accent)
}

header{
  top: 16px;
  left: 24px;
  right: 24px;
  max-width: 1160px;
  margin-inline: auto;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 8px 32px #10182b09
}

header.scrolled{
  background: rgba(255,255,255,.9);
  border-color: #ffffffb3;
  backdrop-filter: blur(22px)
}

header .wrap{
  padding: 0 24px
}

nav{
  height: 64px;
  gap: 20px
}

.logo{
  font-size: 18px;
  letter-spacing: -.04em;
  font-weight: 750;
  color: #1d1d1f;
  white-space: nowrap
}

.navlinks{
  gap: 26px
}

.navlinks a{
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0;
  color: #55565d;
  padding: 13px 0;
  min-height: 44px
}

.navlinks a:hover,.navlinks a.active{
  color: #0066cc
}

.navlinks a::after{
  display: none
}

.navlinks .navcta{
  border: 0;
  border-radius: 99px;
  background: #0071e3;
  color: white;
  padding: 10px 18px;
  min-height: 40px
}

.navlinks .navcta:hover{
  color: white;
  background: #0077ed
}

.burger{
  border: 0;
  background: none;
  padding: 12px;
  color: #1d1d1f;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center
}

.burger span{
  width: 20px;
  background: currentColor;
  height: 1.5px;
  transition: transform .2s,opacity .2s
}

.skip-link{
  position: fixed;
  z-index: 10001;
  top: -100px;
  left: 30px;
  border-radius: 12px;
  padding: 12px 20px;
  background: #0071e3;
  color: white
}

.skip-link:focus{
  top: 25px
}

.btn{
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 999px;
  min-height: 48px;
  padding: 14px 24px;
  gap: 10px
}

.btn-solid{
  background: #0071e3;
  border-color: #0071e3;
  color: white
}

.btn-solid:hover{
  background: #0077ed;
  color: white;
  border-color: #0077ed
}

.btn-ghost{
  color: var(--accent);
  border-color: transparent;
  background: transparent
}

.btn-ghost:hover{
  color: #0055ad;
  background: #e9f1fc;
  border-color: transparent
}

.btn:active{
  transform: scale(.97)
}

section{
  padding: 112px 0
}

.section-head{
  align-items: flex-start;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px
}

.section-head h2{
  font-size: clamp(32px,4.6vw,60px);
  line-height: 1.06;
  max-width: 950px;
  font-weight: 650
}

.lead{
  font-size: clamp(27px,3.5vw,46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.035em
}

.ghost{
  display: none
}

.statement{
  background: #fff;
  border: 0
}

.statement .small{
  line-height: 1.75;
  font-size: 17px;
  max-width: 700px
}

.statement .accent{
  color: var(--accent)
}

.home .hero{
  min-height: 820px;
  min-height: 90svh;
  padding: 170px 0 105px;
  background: #f5f5f7;
  isolation: isolate;
  align-items: center
}

.home .hero .wrap{
  padding-right: 51%
}

.home .hero h1{
  font-size: clamp(43px,5.7vw,78px);
  line-height: 1.025;
  font-weight: 650;
  letter-spacing: -.055em
}

.home .hero h1 br{
  display: none
}

.home .hero .eyebrow{
  max-width: 380px;
  line-height: 1.8;
  letter-spacing: .07em;
  font-size: 10px
}

.home .hero .sub{
  font-size: 19px;
  color: #62636b;
  line-height: 1.55;
  margin-top: 26px
}

.home .hero-video{
  left: 54%;
  top: 150px;
  bottom: auto;
  width: 43%;
  height: calc(100% - 245px);
  border-radius: 32px;
  filter: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  background: #1d1d1f
}

.home .hero-fade{
  display: none
}

.home .hero .actions{
  gap: 8px;
  margin-top: 28px;
  align-items: center
}

.scrollcue{
  display: none
}

.hero-control{
  position: absolute;
  right: 5%;
  bottom: 120px;
  z-index: 4;
  background: #ffffffe6;
  backdrop-filter: blur(12px);
  border: 1px solid #ffffff80;
  border-radius: 99px;
  color: #1d1d1f;
  padding: 9px 16px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600
}

.home .proof-strip{
  padding: 28px 0!important;
  background: #fff;
  border: 0!important
}

.home .proof-strip p{
  font-family: var(--font)!important;
  text-transform: none!important;
  letter-spacing: 0!important;
  font-size: 12px!important;
  line-height: 1.6;
  color: #66676e!important
}

.home .proof-strip .accent{
  color: #a6abb3
}

.breath{
  background: #fff;
  color: var(--text)
}

.breath .eyebrow,.breath .khi{
  color: var(--accent)
}

.breath .about-grid .body p,.breath .muted{
  color: #62636b
}

.breath .about-grid .body p strong{
  color: #1d1d1f
}

.about-grid{
  gap: 70px
}

.about-grid .big{
  font-size: clamp(27px,3vw,39px);
  font-weight: 600;
  line-height: 1.22
}

.about-grid .body p{
  font-size: 16px;
  line-height: 1.8
}

.toolnote{
  font-size: 13px!important;
  color: #62636b!important
}

.methods{
  gap: 20px;
  border: 0;
  background: none
}

.method-c{
  border-radius: 24px;
  background: white;
  padding: 36px 28px;
  min-height: 230px;
  border: 1px solid #e9e9ef
}

.method-c:hover{
  background: white
}

.method-c .mnum{
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: #c2d5ee;
  top: 22px
}

.method-c .mkick{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase!important;
  margin-bottom: 45px
}

.method-c h3{
  font-size: 22px;
  font-weight: 650;
  line-height: 1.16
}

.method-c p{
  font-size: 14px;
  line-height: 1.7;
  color: #62636b
}

.feat{
  background: #fff;
  border: 0;
  border-radius: 30px;
  box-shadow: none;
  padding: 52px;
  gap: 48px
}

.feat .eyebrow{
  color: var(--accent)
}

.feat h3{
  font-size: clamp(27px,3vw,41px);
  font-weight: 650;
  line-height: 1.13
}

.feat p{
  font-size: 16px;
  color: #62636b;
  line-height: 1.75
}

.feat .tags{
  font-size: 11px;
  color: #62636b;
  line-height: 1.8;
  letter-spacing: 0
}

.feat-link{
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.feat-viz{
  border-radius: 24px;
  background: #f5f5f7;
  padding: 16px
}

.grid3{
  border: 0;
  gap: 20px;
  margin-top: 22px
}

.cell{
  padding: 30px;
  background: #fff;
  border: 0!important;
  border-radius: 24px
}

.cell h3{
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2
}

.cell .num{
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 22px
}

.cell p{
  color: #62636b;
  font-size: 15px;
  line-height: 1.75
}

.cards{
  gap: 24px
}

.card{
  border: 0;
  border-radius: 28px;
  min-height: 450px;
  color: #f5f5f7
}

.card .cbody{
  padding: 34px
}

.card h3{
  font-size: clamp(28px,3.2vw,44px);
  line-height: 1.07;
  font-weight: 600
}

.card p{
  color: #e0e1e6
}

.card .go{
  color: #9dcbff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0
}

.card .cimg::after{
  background: linear-gradient(transparent 10%,#060a12eb)
}

.card.wide{
  min-height: 370px
}

.aboutme{
  gap: 65px;
  align-items: center
}

.aboutme-photo img{
  border-radius: 28px
}

.cutout-accent{
  background: #e6eef9
}

.cutout-figure{
  filter: none
}

.aboutme .lead{
  font-size: clamp(27px,3.3vw,44px)
}

.portfolio .hero{
  min-height: 83svh;
  padding: 170px 0 75px;
  color: #f5f5f7;
  align-items: flex-end;
  background: #111
}

.portfolio .hero .wrap{
  padding-bottom: 0
}

.portfolio .hero .hero-bg{
  filter: none;
  transform: none
}

.portfolio .hero .hero-bg::after{
  background: linear-gradient(180deg,#080c1644,#080c1611 25%,#080c16c9)
}

.portfolio .hero h1{
  font-size: clamp(54px,8vw,110px);
  line-height: 1.0;
  font-weight: 650;
  letter-spacing: -.055em
}

.portfolio .hero .accent{
  color: #a9d3ff
}

.portfolio .hero .sub{
  color: #f5f5f7;
  max-width: 580px;
  font-size: 18px
}

.portfolio .hero .eyebrow{
  color: #cfe5ff
}

.lightgal,.galpage{
  background: #f5f5f7!important;
  color: var(--text);
  padding: 120px 0 70px
}

.galhead{
  max-width: 740px;
  margin-top: 65px!important
}

.galhead:first-child{
  margin-top: 0!important
}

.galhead .gn{
  font-size: 11px;
  color: var(--accent)!important;
  letter-spacing: .1em!important;
  font-weight: 600
}

.galhead h3{
  font-size: clamp(28px,4vw,43px)!important;
  line-height: 1.1!important;
  color: var(--text)!important;
  font-weight: 650
}

.galhead p{
  font-size: 16px;
  color: #62636b!important;
  line-height: 1.7!important;
  max-width: 620px
}

.jgal{
  gap: 12px
}

.jgal figure{
  border-radius: 12px;
  background: #e8e8ed;
  position: relative
}

.jgal figure:focus-visible{
  outline-offset: 3px
}

.jgal figure:hover img{
  transform: scale(1.025)
}

.viewall,.back{
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
  margin-top: 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.galtitle{
  font-size: clamp(44px,7vw,84px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.05em
}

.galsub{
  color: #62636b;
  font-size: 14px;
  letter-spacing: 0;
  margin: 18px 0 40px
}

.reel{
  border-radius: 20px;
  max-width: none
}

.rlabel{
  font-size: 13px!important;
  letter-spacing: 0!important;
  font-weight: 600
}

.rtri{
  border-left-color: white!important
}

.reels{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px
}

.lb{
  border: 0;
  margin: 0;
  padding: 50px 65px;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background: #080b10f5;
  color: white
}

.lb[open]{
  display: flex
}

.lb::backdrop{
  background: #080b10
}

.lb-content{
  margin: auto;
  max-height: 85dvh;
  flex-direction: column
}

.lb-content img{
  max-height: 78dvh;
  border-radius: 8px;
  box-shadow: none
}

.lb button{
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: #ffffff15;
  font-family: var(--font);
  color: white
}

.lb .lb-close{
  font-size: 28px;
  right: 24px;
  top: 20px
}

.lb .lb-prev,.lb .lb-next{
  font-size: 36px;
  padding: 0
}

.lb-caption{
  font-size: 13px;
  color: #d0d4dc;
  margin-top: 14px;
  max-width: 75ch;
  text-align: center
}

.newsletter .nl-hero{
  padding: 160px 0 100px;
  min-height: 100svh;
  background: #f5f5f7
}

.nl-hero .hero-bg{
  display: none
}

.nl-hero h1{
  font-size: clamp(42px,6.7vw,86px);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: -.05em;
  max-width: 1000px;
  margin-inline: auto
}

.nl-hero p{
  color: #62636b;
  font-size: 18px;
  line-height: 1.65;
  max-width: 640px
}

.nl-hero .kit-embed{
  margin-top: 32px;
  max-width: 560px;
  background: white;
  border-radius: 28px;
  padding: 12px
}

.nl-hero .formkit-form{
  background: white!important;
  border: 0!important;
  border-radius: 22px!important;
  padding: 20px!important;
  font-family: var(--font)!important
}

.nl-hero .formkit-input{
  min-height: 48px;
  border-radius: 12px!important;
  background: #f5f5f7!important;
  border: 1px solid #d9dce3!important;
  color: #1d1d1f!important;
  font-size: 15px!important
}

.nl-hero .formkit-submit{
  border-radius: 999px!important;
  background: #0071e3!important;
  color: white!important;
  min-height: 48px;
  font-family: var(--font)!important
}

.nl-hero .formkit-submit:hover{
  background: #0077ed!important
}

.proof{
  font-size: 11px!important;
  line-height: 1.7;
  letter-spacing: .02em!important;
  color: #62636b!important
}

.whatis{
  gap: 24px;
  border: 0
}

.whatis .cell{
  background: #f5f5f7
}

.editions{
  gap: 24px
}

.edition{
  border-radius: 24px;
  border: 1px solid #e7e7ec!important;
  padding: 30px;
  background: #f5f5f7!important
}

.edition:hover{
  transform: none
}

.edition .date{
  font-size: 11px;
  letter-spacing: .04em;
  color: #0066cc!important
}

.edition h4{
  font-size: 23px;
  line-height: 1.2;
  font-weight: 600
}

.edition p{
  font-size: 15px;
  line-height: 1.7
}

.case .cs-hero{
  padding: 170px 0 70px;
  background: #f5f5f7
}

.cs-hero h1{
  font-size: clamp(43px,6.8vw,86px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.05em;
  max-width: 1050px
}

.cs-hero .out{
  font-family: var(--font)!important;
  font-size: clamp(18px,2vw,23px);
  line-height: 1.55;
  max-width: 820px;
  color: #62636b
}

.facts{
  border: 0;
  gap: 18px;
  margin-top: 45px
}

.facts>div{
  border: 0;
  background: white;
  border-radius: 18px;
  padding: 22px
}

.facts .k{
  font-size: 10px;
  letter-spacing: .1em;
  color: #0066cc;
  padding: 0
}

.facts .v{
  font-size: 14px;
  padding: 0;
  border: 0;
  margin-top: 10px;
  line-height: 1.6
}

.cs-main{
  background: white
}

.cs-wrap{
  max-width: 900px;
  padding: 80px 40px
}

.cs-main h2{
  font-size: clamp(25px,3vw,33px);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.03em
}

.cs-main h2 .n{
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0;
  color: #0066cc
}

.cs-main p{
  font-size: 17px;
  line-height: 1.85;
  color: #51525a
}

.cs-main section{
  padding-bottom: 58px
}

.why{
  background: #eef5ff;
  border: 0;
  border-radius: 22px;
  padding: 30px;
  margin-bottom: 50px
}

.why .lab,.method .lab{
  color: #0066cc;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em
}

.why p{
  font-size: 19px;
  color: #25344e;
  line-height: 1.7
}

.method{
  background: #f5f5f7;
  border-radius: 18px;
  padding: 22px
}

.method p{
  font-size: 14px;
  line-height: 1.75;
  color: #62636b
}

.chartcard{
  border: 1px solid #e5e7ec;
  border-radius: 22px;
  padding: 26px
}

.chartcard h4{
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0
}

.chartcard .sub{
  color: #62636b;
  font-size: 13px;
  line-height: 1.6
}

.cap{
  font-size: 14px!important
}

.illus{
  color: #62636b;
  font-size: 12px
}

.takeaway{
  background: #101725;
  border-radius: 22px;
  padding: 30px
}

.takeaway .lab{
  color: #9acbff;
  font-size: 11px;
  letter-spacing: .07em
}

.takeaway p{
  color: #f5f5f7;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -.025em
}

.backbar{
  border-color: #dedee4
}

.backbar a{
  font-size: 13px;
  color: #0066cc;
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.stat,.stats .stat{
  border-radius: 18px
}

.stat .big{
  font-family: var(--font)!important;
  font-weight: 650;
  letter-spacing: -.04em
}

.cs-main .shape-card{
  border-radius: 24px
}

footer{
  background: #eeeef1;
  border: 0;
  padding: 70px 0 40px;
  color: #1d1d1f
}

.footrow{
  align-items: flex-start
}

.footrow .quote{
  font-size: clamp(24px,3vw,36px);
  font-weight: 600;
  line-height: 1.23;
  max-width: 660px
}

.footrow .meta .logo{
  margin-bottom: 12px
}

.footrow .meta a{
  font-size: 12px;
  letter-spacing: 0;
  color: #5f626c;
  padding: 5px 0;
  min-height: 30px
}

.copyright{
  color: #62636b;
  font-size: 11px;
  margin-top: 50px
}

.sticky-cta{
  left: auto;
  right: 24px;
  bottom: 20px;
  border-radius: 22px;
  background: #fffffff0;
  color: #1d1d1f;
  box-shadow: 0 8px 35px #15223415;
  backdrop-filter: blur(20px);
  max-width: 440px;
  transform: translateY(150%);
  border: 1px solid #ffffff
}

.sticky-cta .inner{
  padding: 13px 16px;
  gap: 16px
}

.sticky-cta strong{
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  max-width: 190px
}

.sticky-cta a{
  font-family: var(--font);
  font-size: 11px;
  border: 0;
  border-radius: 99px;
  background: #0071e3;
  color: white;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 17px;
  min-height: 44px;
  white-space: nowrap
}

.reveal{
  opacity: 1;
  transform: none;
  will-change: auto
}

.motion-ready .reveal:not(.in){
  opacity: 0;
  transform: translateY(18px)
}

.motion-ready .reveal{
  transition: opacity .65s var(--ease),transform .65s var(--ease)
}
@media(min-width:1500px){

.home .hero-video{
  left: 55%;
  width: 40%;
  max-width: 740px
}

.home .hero .wrap{
  padding-right: 600px
}

.home .hero{
  max-width: 1760px;
  margin: auto
}}
@media(max-width:980px){

header{
  left: 16px;
  right: 16px;
  top: 12px
}

.navlinks{
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 78px;
  background: #fffffff5;
  backdrop-filter: blur(22px);
  border: 1px solid #e6e9ee;
  border-radius: 24px;
  padding: 18px;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  box-shadow: 0 16px 30px #1d284011
}

.navlinks.open{
  display: flex
}

.navlinks a{
  padding: 12px 16px
}

.navlinks .navcta{
  margin-top: 8px;
  text-align: center
}

.burger{
  display: flex
}

.home .hero{
  padding-top: 145px;
  min-height: 760px
}

.home .hero .wrap{
  padding-right: 46%
}

.home .hero-video{
  left: 58%;
  width: 39%;
  top: 150px;
  height: 520px
}

.home .hero h1{
  font-size: clamp(43px,6.5vw,65px)
}

.home .hero .sub{
  font-size: 17px
}

.methods{
  grid-template-columns: repeat(2,minmax(0,1fr))
}

.grid3,.whatis{
  grid-template-columns: 1fr
}

.feat{
  padding: 35px;
  gap: 28px;
  grid-template-columns: 1fr 1fr
}

.reels{
  grid-template-columns: repeat(2,minmax(0,1fr))
}

.about-grid{
  gap: 35px
}

.aboutme{
  gap: 35px
}

.facts{
  grid-template-columns: repeat(2,minmax(0,1fr))
}

.hero-control{
  bottom: 75px;
  right: 5%
}

.cards{
  grid-template-columns: 1fr
}}
@media(max-width:700px){

.wrap{
  padding-inline: 24px
}

header .wrap{
  padding-inline: 18px
}

nav{
  height: 58px
}

.logo{
  font-size: 16px
}

.navlinks{
  top: 70px
}

.home .hero{
  display: block;
  padding: 140px 0 0;
  min-height: 0
}

.home .hero .wrap{
  padding-inline: 24px
}

.home .hero h1{
  font-size: clamp(40px,9vw,62px);
  max-width: 600px
}

.home .hero .eyebrow{
  font-size: 9px;
  max-width: 310px
}

.home .hero .sub{
  max-width: 500px;
  font-size: 17px
}

.home .hero .actions{
  margin-top: 24px
}

.home .hero-video{
  position: relative;
  inset: auto;
  width: calc(100% - 32px);
  height: 370px;
  margin: 40px 16px 24px;
  border-radius: 24px;
  display: block
}

.home .hero-control{
  bottom: 40px;
  right: 32px;
  font-size: 11px
}

.home .proof-strip{
  padding: 25px 0!important
}

.home .proof-strip p{
  gap: 10px!important;
  font-size: 11px!important
}

.home .proof-strip p .accent{
  display: none
}

section{
  padding: 76px 0
}

.section-head h2{
  font-size: 36px
}

.lead{
  font-size: 30px
}

.about-grid,.aboutme{
  grid-template-columns: 1fr;
  gap: 30px
}

.about-grid .big{
  font-size: 29px
}

.methods{
  grid-template-columns: 1fr;
  gap: 14px
}

.method-c{
  min-height: 190px;
  padding: 28px
}

.method-c .mkick{
  margin-bottom: 30px
}

.feat{
  grid-template-columns: 1fr;
  padding: 28px;
  border-radius: 24px
}

.feat h3{
  font-size: 30px
}

.feat-viz{
  max-height: 300px
}

.grid3{
  gap: 14px
}

.cell{
  padding: 28px
}

.cards{
  gap: 16px
}

.card{
  min-height: 400px
}

.card .cbody{
  padding: 28px
}

.aboutme-photo{
  max-width: 400px
}

.portfolio .hero{
  min-height: 700px;
  padding: 160px 0 70px
}

.portfolio .hero h1{
  font-size: 76px
}

.portfolio .hero .sub{
  font-size: 17px
}

.lightgal,.galpage{
  padding: 130px 0 50px
}

.portfolio .lightgal{
  padding-top: 70px
}

.galhead{
  margin-top: 45px!important
}

.galhead h3{
  font-size: 32px!important
}

.reels{
  grid-template-columns: 1fr
}

.lb{
  padding: 70px 12px
}

.lb-content img{
  max-width: 94vw;
  max-height: 74dvh
}

.lb-prev,.lb-next{
  top: auto!important;
  bottom: 15px;
  transform: none!important
}

.lb-prev{
  left: calc(50% - 70px)
}

.lb-next{
  right: calc(50% - 70px)
}

.newsletter .nl-hero{
  padding: 145px 0 70px;
  min-height: 0
}

.nl-hero h1{
  font-size: 43px
}

.nl-hero h1 br{
  display: none
}

.nl-hero p{
  font-size: 17px
}

.nl-hero .kit-embed{
  padding: 5px
}

.nl-hero .formkit-form{
  padding: 15px!important
}

.editions{
  grid-template-columns: 1fr
}

.case .cs-hero{
  padding: 145px 0 50px
}

.cs-hero h1{
  font-size: 45px
}

.cs-hero .out{
  font-size: 18px
}

.facts{
  gap: 12px;
  margin-top: 30px
}

.facts>div{
  padding: 17px
}

.facts .v{
  font-size: 12px
}

.cs-wrap{
  padding: 55px 24px
}

.cs-main h2{
  font-size: 27px
}

.cs-main p{
  font-size: 16px;
  line-height: 1.8
}

.chartcard{
  padding: 20px 15px;
  border-radius: 18px;
  overflow: hidden
}

.why,.takeaway{
  padding: 25px
}

.why p{
  font-size: 17px
}

.takeaway p{
  font-size: 22px
}

.footrow .meta{
  text-align: left
}

.footrow .meta a{
  display: inline-flex;
  margin-right: 16px;
  min-height: 44px;
  align-items: center
}

.footrow .quote{
  font-size: 28px
}

.sticky-cta{
  bottom: 12px;
  left: 12px;
  right: 12px;
  max-width: none;
  border-radius: 18px
}

.sticky-cta .inner{
  gap: 10px
}

.sticky-cta strong{
  max-width: 170px;
  font-size: 11px
}

.sticky-cta a{
  padding: 12px
}

.galtitle{
  font-size: 54px
}}
@media(prefers-reduced-motion:reduce){

html{
  scroll-behavior: auto
}

*,*::before,*::after{
  animation: none!important;
  transition: none!important
}

.motion-ready .reveal:not(.in),.csr{
  opacity: 1!important;
  transform: none!important
}

.hero-video{
  display: none!important
}

.home .hero::after{
  content: '';
  display: block;
  margin: 40px 16px 24px;
  height: 370px;
  border-radius: 24px;
  background: url('assets/hero-poster.jpg') center/cover
}

.home .hero-control{
  display: none
}

.home .hero::before{
  display: none
}

.portfolio .hero .hero-bg{
  transform: none
}

.jgal figure:hover img,.card:hover .cimg{
  transform: none
}}
/* Keep the film after the introduction in source order and static motion mode. */
@media(min-width:701px) and (prefers-reduced-motion:reduce){

.home .hero::after{
  position: absolute;
  left: 54%;
  top: 150px;
  bottom: auto;
  width: 43%;
  height: calc(100% - 245px);
  margin: 0;
  border-radius: 32px;
  background: url('assets/hero-poster.jpg') center/cover;
  z-index: 0
}}
@media(min-width:1500px) and (prefers-reduced-motion:reduce){

.home .hero::after{
  left: 55%;
  width: 40%;
  max-width: 740px
}}
@media(min-width:701px) and (max-width:980px) and (prefers-reduced-motion:reduce){

.home .hero::after{
  left: 58%;
  width: 39%;
  height: 520px
}}

/* The documentary keeps its monochrome imagery and quieter human voice. */
.ah-hero h1,.ah-voices h2,.ah-emblem .spes,.ah-close{text-transform:none;letter-spacing:-.045em;font-weight:650;line-height:1.06}
.ah-hero h1{font-size:clamp(64px,10vw,130px)}
.ah-hero .eyebrow-doc,.ah-emblem .spes .accent{color:#9dcbff}
.ah-hero .loc,.ah-emblem .creed{letter-spacing:.04em;text-transform:none}
.ah-cap,.ah-voices .vint{color:#62636b;letter-spacing:.04em;text-transform:none}
.voice{border-left:2px solid #c5d8ef}.voice span,.ah-back a{color:#0066cc;letter-spacing:0;text-transform:none}.voice p{font-size:21px;line-height:1.55}
.ah-close{font-size:clamp(25px,3vw,36px);line-height:1.3}.ah-back a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:700px){.jgal.mosaic{padding-inline:16px;gap:8px}.ah-cap{padding-inline:24px}.vgrid{padding-inline:24px}.ah-hero h1{font-size:70px}}