:root{
  --navy:#111927;
  --red:#c72027;
  --ink:#17191c;
  --paper:#f4f2ed;
  --line:#d8d5ce;
  --max:1240px
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  background:#fff;
  line-height:1.45
}

.shell{
  max-width:var(--max);
  margin:auto;
  padding-left:36px;
  padding-right:36px
}

/* HEADER */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  height:76px;
  padding:0 max(24px,calc((100vw - var(--max))/2 + 36px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(17,25,39,.97);
  color:white
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  color:white;
  text-decoration:none;
  letter-spacing:.11em;
  font-size:14px
}

.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  display:block
}

.brand b{
  font-size:28px;
  line-height:1;
  letter-spacing:.08em
}

.mark{
  display:none!important
}

.contact{
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px
}

.contact a{
  color:white;
  text-decoration:none
}

.talk{
  border:1px solid rgba(255,255,255,.55);
  padding:9px 13px;
  letter-spacing:.1em;
  font-size:10px
}

/* HERO */

.hero{
  display:grid;
  grid-template-columns:50% 50%;
  min-height:0;
  padding-top:28px;
  padding-bottom:28px;
  align-items:center;
  gap:0
}

.media{
  background:#0d1118;
  overflow:hidden;
  align-self:center;
  width:88%;
  justify-self:start
}

.media video{
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  display:block;
  object-fit:contain;
  background:#0d1118
}

.hero-copy{
  padding:16px 0 16px 28px;
  align-self:center
}

.overline{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  margin:0 0 20px
}

.hero h1,
.intro h2,
.sectionhead h2,
.experience h2,
.cta h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.035em
}

.hero h1{
  font-size:clamp(50px,5.4vw,76px);
  line-height:.88;
  margin:0 0 24px
}

.hero h1 em{
  color:var(--red);
  font-weight:400
}

.lead{
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:1.38;
  margin:0 0 14px;
  max-width:470px
}

.small{
  font-size:14px;
  color:#666;
  max-width:400px
}

/* RED BAND */

.redband{
  background:var(--red);
  color:#fff
}

.redgrid{
  min-height:180px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center
}

.redgrid p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:28px;
  margin:0
}

.redgrid p i{
  font-size:18px
}

.redgrid strong{
  font-size:clamp(44px,5vw,72px);
  line-height:.82;
  letter-spacing:-.04em;
  text-align:right
}

/* INTRO */

.intro{
  padding-top:92px;
  padding-bottom:92px;
  display:grid;
  grid-template-columns:28% 72%;
  border-bottom:1px solid var(--line)
}

.intro>div{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px
}

.intro h2,
.sectionhead h2{
  font-size:clamp(42px,4.6vw,64px);
  line-height:1.02;
  margin:0
}

.intro div p{
  font-size:18px;
  color:#555;
  margin:7px 0 0;
  max-width:520px
}

/* SERVICES */

.services{
  padding-top:92px;
  padding-bottom:100px
}

.sectionhead{
  margin-bottom:45px
}

.sectionhead>p:last-child{
  max-width:650px;
  color:#666
}

.servicegrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink)
}

.servicegrid article{
  padding:24px 34px 28px;
  border-right:1px solid var(--line)
}

.servicegrid article:first-child{
  padding-left:0
}

.servicegrid article:last-child{
  border-right:0;
  padding-right:0
}

.num{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--red);
  font-weight:700
}

.prompt{
  font-family:Georgia,'Times New Roman',serif;
  font-size:18px;
  font-style:italic;
  min-height:58px;
  color:#555
}

.servicegrid h3{
  font-family:Georgia,'Times New Roman',serif;
  font-size:30px;
  line-height:1.05;
  font-weight:400;
  margin:26px 0 8px
}

.price{
  font-size:20px;
  font-weight:700;
  color:var(--red);
  margin-bottom:22px
}

.servicegrid ul{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:14px
}

.servicegrid li{
  padding:5px 0
}

/* EXPERIENCE */

.experience{
  background:var(--navy);
  color:white;
  padding:88px 0 92px
}

.experience .expgrid{
  display:grid;
  grid-template-columns:minmax(180px,.72fr) minmax(300px,1.35fr) minmax(300px,1.15fr);
  column-gap:clamp(36px,5vw,76px);
  align-items:start
}

.experience .expgrid > *{
  min-width:0;
  margin-top:0
}

.experience h2{
  font-size:clamp(42px,4.4vw,62px);
  line-height:1.02;
  margin:0;
  max-width:10.5ch
}

.experience .expgrid > p:last-child{
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:1.48;
  margin:0;
  max-width:31rem;
  color:#e3e6eb
}

/* PROJECTS */

.projects{
  padding-top:92px;
  padding-bottom:90px
}

.projects .sectionhead{
  max-width:760px
}

.project{
  display:grid;
  grid-template-columns:62% 38%;
  margin-top:34px;
  background:var(--paper);
  min-height:430px
}

.project.flip{
  grid-template-columns:38% 62%
}

.project.flip .photo{
  order:2
}

.photo{
  background:#ddd;
  overflow:hidden
}

.photo img{
  display:block;
  width:100%;
  height:100%;
  min-height:430px;
  object-fit:cover
}

.projectcopy{
  padding:55px;
  align-self:center
}

.projectcopy span{
  font-size:11px;
  color:var(--red);
  font-weight:700;
  letter-spacing:.14em
}

.projectcopy h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:38px;
  line-height:1.05;
  margin:16px 0
}

.projectcopy p{
  font-size:16px;
  color:#5d5d5d
}

/* CTA */

.cta{
  background:var(--red);
  color:white;
  padding:84px 0
}

.ctagrid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:80px;
  align-items:end
}

.cta h2{
  font-size:clamp(56px,6vw,84px);
  line-height:.9;
  margin:0
}

.ctagrid>div:last-child{
  padding-bottom:6px
}

.ctagrid>div:last-child p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  max-width:430px
}

.ctagrid a{
  display:block;
  color:white;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  margin-top:10px
}

/* FOOTER */

footer{
  background:var(--navy);
  color:#fff;
  padding:24px 0;
  font-size:11px;
  letter-spacing:.08em
}

footer .shell{
  display:flex;
  justify-content:space-between
}

/* TABLET / MOBILE */

@media(max-width:900px){

  .contact span,
  .contact a[href^=mailto]{
    display:none
  }

  .hero{
    grid-template-columns:1fr;
    min-height:0
  }

  /* Mobile video treatment */
  .media{
    width:min(100%,420px);
    justify-self:center;
    align-self:center;
    background:#0d1118;
    overflow:hidden
  }

  .media video{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4/5;
    object-fit:cover;
    object-position:center 35%;
    background:#0d1118
  }

  .hero-copy{
    padding:40px 0
  }

  .intro,
  .intro>div,
  .experience .expgrid{
    grid-template-columns:1fr
  }

  .intro{
    gap:18px
  }

  .intro>div{
    gap:24px
  }

  .experience{
    padding:64px 0
  }

  .experience .expgrid{
    row-gap:26px
  }

  .experience .expgrid h2,
  .experience .expgrid > p:last-child{
    max-width:38rem
  }

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

  .servicegrid article,
  .servicegrid article:first-child,
  .servicegrid article:last-child{
    padding:28px 0;
    border-right:0;
    border-bottom:1px solid var(--line)
  }

  .prompt{
    min-height:0
  }

  .project,
  .project.flip{
    grid-template-columns:1fr
  }

  .project.flip .photo{
    order:0
  }

  .ctagrid{
    grid-template-columns:1fr;
    gap:30px
  }
}

/* PHONE */

@media(max-width:600px){

  .shell{
    padding-left:20px;
    padding-right:20px
  }

  .topbar{
    height:64px;
    padding:0 18px
  }

  .brand-logo{
    width:40px;
    height:40px
  }

  .brand b{
    font-size:20px!important
  }

  .contact{
    gap:10px
  }

  .talk{
    display:none
  }

  .hero{
    padding-top:20px;
    padding-bottom:28px
  }

  .media{
    width:100%;
    max-width:420px
  }

  .hero h1{
    font-size:55px
  }

  .redgrid{
    grid-template-columns:1fr;
    gap:12px;
    padding-top:30px;
    padding-bottom:30px
  }

  .redgrid strong{
    text-align:left
  }

  .intro,
  .services,
  .projects{
    padding-top:60px;
    padding-bottom:60px
  }

  .experience,
  .cta{
    padding:60px 0
  }

  .projectcopy{
    padding:34px 25px
  }

  .photo img{
    min-height:280px
  }

  footer .shell{
    display:block
  }

  footer span{
    display:block;
    margin-top:6px
  }
}