:root
{
    --black:#050505;
    --ink:#101113;
    --white:#f7f7f5;
    --gray:#a5a6a8;
    --line:rgba(255,255,255,.14);
    --max:1240px}*{box-sizing:border-box}

html
    {
        scroll-behavior:smooth
    }

body
    {
        margin:0;
        background:var(--black);
        color:var(--white);
        font-family:Inter,Arial,Helvetica,sans-serif;
        line-height:1.5}
        a{
            color:inherit;text-decoration:none}
        img{max-width:100%;
            display:block}
            
.skip-link{
    position:fixed;
    top:-100px;
    left:1rem;
    background:#fff;
    color:#000;
    padding:.75rem;
    z-index:999}
    
.skip-link:focus{
    top:1rem}
    
.site-header{
    height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 max(24px,calc((100% - var(--max))/2));
    position:absolute;
    inset:0 0 auto;
    z-index:20;
    border-bottom:1px solid var(--line)
}

.brand img{
    width:168px;
    height:64px;
    object-fit:cover;
    object-position:center
}

.main-nav{
    display:flex;
    align-items:center;
    gap:2.2rem;
    font-size:.82rem
}

.main-nav a{
    transition:opacity .2s
}

.main-nav a:hover{
    opacity:.65
}

.nav-cta{
    border:1px solid #fff;
    padding:.75rem 1.1rem
}

.menu-button{
    display:none;
    background:none;
    border:0;
    padding:10px
}

.menu-button span{
    display:block;
    width:25px;
    height:1px;
    background:#fff;
    margin:7px
}

.hero{
    min-height:780px;
    height:100vh;
    max-height:940px;
    padding:180px max(24px,calc((100% - var(--max))/2)) 80px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 82% 48%,#25282b 0,transparent 34%),linear-gradient(115deg,#050505 40%,#101214)
}

.hero-copy{
    max-width:720px;
    z-index:2
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.68rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 1.5rem
}

.eyebrow span{
    width:28px;
    height:1px;
    background:currentColor
}

.hero h1,
.section h2{
    font-size:clamp(3.5rem,6.7vw,6.6rem);
    line-height:.94;
    letter-spacing:-.065em;
    margin:0;
    font-weight:550
}

.hero h1 em,
.contact h2 em{font-family:Georgia,serif;
    font-weight:400
}

.hero-text{
    font-size:1.08rem;
    color:#b9babc;
    max-width:570px;
    margin:2rem 0
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:2rem;
    margin-top:2.4rem
}

.button{
    border:0;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    padding:1rem 1.25rem;
    min-width:210px;
    font-weight:700;
    cursor:pointer;
    font-size:.8rem
}

.button-light{
    background:#fff;
    color:#050505
}

.text-link{
    font-size:.78rem;
    border-bottom:1px solid #555;
    padding:.8rem 0
}

.hero-visual{
    position:relative;
    height:510px;
    display:grid;
    place-items:center;
    opacity:.82
}

.hero-visual img{
    width:520px;
    position:relative;
    z-index:1;
    mix-blend-mode:screen
}

.orbit{
    position:absolute;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%
}

.orbit-one{
    width:520px;
    height:520px
}

.orbit-two{
    width:360px;
    height:620px;
    transform:rotate(55deg)
}

.hero-index{
    position:absolute;
    right:max(24px,calc((100% - var(--max))/2));
    bottom:38px;
    font-size:.58rem;
    letter-spacing:.18em;
    color:#888;
    display:flex;
    align-items:center;
    gap:12px
}

.hero-index span{
    width:50px;
    height:1px;
    background:#555
}

.section{
    padding:130px max(24px,calc((100% - var(--max))/2))
}

.services{
    background:var(--white);
    color:var(--ink)
}

.section-heading{
    display:grid;
    grid-template-columns:1.4fr .6fr;
    gap:5rem;
    align-items:end;
    margin-bottom:5rem
}

.section-heading h2,
.client-intro h2,
.about h2,
.contact h2{
    font-size:clamp(2.7rem,4.6vw,4.8rem)
}

.section-heading>p{
    color:#67686b;
    font-size:.98rem;
    margin:0
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #ccc
}

.service-card{
    padding:2rem 1.6rem 1.8rem 0;
    border-right:1px solid #ccc;
    min-height:330px;
    display:flex;
    flex-direction:column
}

.service-card:not(:first-child){
    padding-left:1.6rem
}

.service-card:last-child{
    border:0
}

.service-number{
    font-size:.62rem;
    color:#999
}

.service-icon{
    font-size:2.2rem;
    margin:2.8rem 0 1.5rem
}

.service-card h3{
    font-size:1.15rem;
    margin:0 0 .8rem
}

.service-card p{
    font-size:.84rem;
    color:#777;
    margin:0
}

.service-card a{
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    border-top:1px solid #ddd;
    padding-top:1rem
}

.client-area{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8rem;
    background:#090a0b
}

.client-intro>p:not(.eyebrow){
    color:#949598;
    max-width:450px;
    margin-top:2rem
}

.tool-list{
    border-top:1px solid var(--line)
}

.tool-item{
    display:grid;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:1.2rem;
    padding:1.5rem 0;
    border-bottom:1px solid var(--line);
    transition:padding .2s,background .2s
}

.tool-item:hover{
    padding-left:12px;
    background:#111
}

.tool-icon{
    width:42px;
    height:42px;
    border:1px solid #555;
    display:grid;
    place-items:center;
    font-size:.62rem
}

.tool-item strong,
.tool-item small{
    display:block
}

.tool-item strong{
    font-size:.9rem
}

.tool-item small{
    font-size:.7rem;
    color:#777;
    margin-top:.25rem
}

.tool-item b{
    font-weight:400
}

.config-note{
    font-size:.68rem;
    color:#67686b;
    margin-top:1rem
}

.about{
    background:var(--white);
    color:var(--ink);
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:9rem;
    align-items:center
}

.about-mark{
    aspect-ratio:1;
    background:#101113;
    display:grid;
    place-items:center;
    overflow:hidden
}

.about-mark span{
    font-family:Georgia,serif;
    font-size:20rem;
    font-style:italic;
    color:#f5f5f5;
    transform:translate(-10px,-7px)
}

.about-copy>p:not(.eyebrow){
    color:#696a6c;
    max-width:680px;
    font-size:1.04rem;
    margin:2rem 0 3rem
}

.metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #ccc;
    padding-top:2rem
}

.metrics strong,
.metrics span{
    display:block
}

.metrics strong{
    font-size:2.1rem
}

.metrics span{
    font-size:.7rem;
    color:#777
}

.contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8rem;
    background:linear-gradient(120deg,#0b0c0d,#151719)
}

.contact-copy>p:not(.eyebrow){
    color:#999;
    max-width:500px;
    margin-top:2rem
}

.contact-form{
    padding-top:1rem
}

.field{
    margin-bottom:1.8rem
}

.field label{
    display:block;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.62rem;
    color:#aaa;
    margin-bottom:.4rem
}

.field input,
.field textarea{
    width:100%;
    border:0;
    border-bottom:1px solid #555;
    background:transparent;
    color:#fff;
    padding:.8rem 0;
    font:inherit;
    outline:none;
    resize:vertical
}

.field input:focus,
.field textarea:focus{
    border-color:#fff
}

.field input::placeholder,
.field textarea::placeholder{
    color:#555
}

.form-status{
    font-size:.78rem;
    color:#ccc;
    min-height:1.2em
}

.site-footer{
    padding:60px max(24px,calc((100% - var(--max))/2));
    display:grid;
    grid-template-columns:1fr 1fr auto;
    align-items:center;
    gap:2rem;
    border-top:1px solid var(--line);
    font-size:.75rem;
    color:#898a8c
}

.site-footer img{
    width:130px;
    height:50px;
    object-fit:cover
}

.footer-links{
    display:flex;
    gap:1.5rem
}

.site-footer small{
    grid-column:1/-1;
    border-top:1px solid var(--line);
    padding-top:1.5rem
}

.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease,transform .7s ease
}

.reveal.visible{
    opacity:1;
    transform:none
}
    @media(max-width:900px){.site-header{height:76px}
    .menu-button{display:block}
    .main-nav{display:none;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        background:#080808;
        padding:2rem;
        flex-direction:column;
        align-items:flex-start;
        border-bottom:1px solid #333
    }
    
.main-nav.open{
    display:flex
}

.hero{
    grid-template-columns:1fr;
    padding-top:135px;
    min-height:760px
}

.hero-visual{
    position:absolute;
    right:-160px;
    bottom:50px;
    width:480px;
    opacity:.28
}

.hero-copy{
    z-index:2
}

.section-heading,
.client-area,
.about,
.contact{
    grid-template-columns:1fr;
    gap:4rem
}

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

.service-card:nth-child(2){border-right:0}
.service-card{border-bottom:1px solid #ccc}
.section{padding-top:90px;
    padding-bottom:90px}
.about-mark{
    max-width:450px}
.site-footer{
    grid-template-columns:1fr 1fr}
.footer-links{
    justify-self:end}
}

@media(max-width:580px)
    {
    .brand img{width:135px}
    .hero h1{font-size:3.35rem}
    .hero-text{font-size:.95rem}
    .hero-actions{align-items:flex-start;
        flex-direction:column;
        gap:.8rem}
    .service-grid{grid-template-columns:1fr}
    .service-card,
    .service-card:not(:first-child){border-right:0;
        padding:1.8rem 0}
    .section-heading{gap:2rem}
    .client-area{gap:3rem}
    .about-mark span{font-size:14rem}
    .metrics{gap:1rem}
    .metrics strong{font-size:1.6rem}
    .contact h2{font-size:3rem}
    .site-footer{grid-template-columns:1fr}
    .footer-links{justify-self:start;
        flex-wrap:wrap}
    .site-footer small{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.reveal{opacity:1;transform:none;transition:none}
}

.examples-section {
  background: #f5f5f5;
  color: #111;
}

.examples-section p,
.examples-section li {
  color: #666;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #d8d8d8;
  border-left: 1px solid #d8d8d8;
}

.example-card {
  min-height: 360px;
  padding: 2rem;
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  background: #fff;
}

.example-tag {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
}

.example-card h3 {
  margin-bottom: 1rem;
  color: #111;
}

.example-card ul {
  margin: 1.5rem 0 0;
  padding-left: 1.1rem;
}

.example-card li {
  margin-bottom: 0.7rem;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .examples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .examples-grid {
    grid-template-columns: 1fr;
  }

  .example-card {
    min-height: auto;
  }
}

.about-mark {
  padding: 3rem;
}

.about-mark img {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
}