:root {
  --base : #ff9900;--ink : #111;--muted : #777;--line : #dedede;--paper : #f5f1e8;--white : #fff;--black : #000;--radius : 0px;--container : 1200px
}
* {
  box-sizing : border-box
}
html {
  scroll-behavior : smooth
}
body {
  margin : 0;
  background : var(--paper);
  color : var(--ink);
  font-family : 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size : 16px;
  line-height : 1.45
}
body.loaded .reveal {
  opacity : 1;
  transform : none
}
.wrap {
  width : min(var(--container), calc(100% - 40px));
  margin : auto
}
.nav {
  position : sticky;
  top : 0;
  z-index : 50;
  background : rgba(245, 241, 232, .92);
  backdrop-filter : blur(10px);
  border-bottom : 1px solid var(--line)
}
.navin {
  height : 84px;
  display : flex;
  align-items : center;
  justify-content : space-between
}
.brand {
  font-weight : 900;
  font-size : 26px;
  letter-spacing : -.04em;
  color : var(--ink);
  text-decoration : none
}
  .brand : before {
  content : '';
  display : inline-block;
  width : 20px;
  height : 20px;
  background : var(--base);
  border-radius : 50%;
  margin-right : 10px;
  vertical-align : -2px
}
.links {
  display : flex;
  gap : 30px;
  align-items : center
}
.links a, .footer a {
  color : var(--ink);
  text-decoration : none;
  font-weight : 700;
  text-transform : uppercase;
  font-size : 13px;
  letter-spacing : .06em
}
  .links a : hover, .footer a : hover {
  color : var(--base)
}
.talk {
  background : var(--ink);
  color : #fff!important;
  padding : 16px 25px
}
  .talk : hover {
  background : var(--base);
  color : #111!important
}
.mobile {
  display : none;
  background : none;
  border : 0;
  font-size : 32px
}
.hero {
  padding : 76px 0 55px
}
.kicker {
  font-size : 13px;
  text-transform : uppercase;
  font-weight : 900;
  letter-spacing : .16em;
  color : var(--base);
  margin-bottom : 18px
}
.hero h1, .page-title {
  font-family : 'Anton', 'Arial Black', Impact, sans-serif;
  font-weight : 400;
  text-transform : uppercase;
  letter-spacing : -.035em;
  line-height : .91;
  font-size : clamp(68px, 13vw, 182px);
  margin : 0
}
.hero-line {
  display : flex;
  align-items : center;
  gap : 24px
}
.hero-img {
  width : min(580px, 24vw);
  height : 312px;
  object-fit : contain;
  /*border-radius : 999px;
  border : 5px solid var(--ink);*/
  filter : grayscale(0.6)
}
.tagrow {
  display : flex;
  gap : 30px;
  margin-top : 40px;
  flex-wrap : wrap
}
.tag {
  display : flex;
  gap : 14px;
  align-items : center;
  font-weight : 900;
  text-transform : uppercase;
  letter-spacing : .08em
}
.star {
  width : 28px;
  height : 28px;
  background : var(--base);
  clip-path : polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}
.marquee {
  overflow : hidden;
  background : var(--ink);
  color : #fff;
  padding : 24px 0;
  white-space : nowrap
}
.marquee span {
  display : inline-flex;
  gap : 24px;
  align-items : center;
  font-family : 'Anton';
  font-size : 38px;
  text-transform : uppercase;
  margin-right : 26px;
  animation : slide 22s linear infinite
}
.marquee .dot {
  width : 26px;
  height : 26px;
  background : var(--base);
  border-radius : 50%
}
@keyframes slide {
  from{transform : translateX(0)
}
to {
  transform : translateX(-50%)
}
}.section {
  padding : 90px 0;
  border-bottom : 1px solid var(--line)
}
.grid2 {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 70px;
  align-items : center
}
.portrait {
  width : 100%;
  min-height : 520px;
  object-fit : cover;
  filter : grayscale(1);
  border : 1px solid var(--ink)
}
.name-split {
  display : flex;
  justify-content : space-between;
  font-family : 'Anton';
  font-size : clamp(46px, 7vw, 96px);
  line-height : .9;
  text-transform : uppercase
}
.lead {
  font-size : 34px;
  line-height : 1.1;
  font-weight : 900;
  letter-spacing : -.04em
}
.muted {
  color : var(--muted)
}
.bio-grid {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 30px;
  margin-top : 35px
}
.bio-grid b {
  display : block;
  text-transform : uppercase;
  font-size : 12px;
  letter-spacing : .15em;
  color : var(--muted)
}
.bio-grid span {
  font-weight : 900;
  text-transform : uppercase;
  font-size : 20px
}
.stats {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  border-top : 1px solid var(--ink);
  border-bottom : 1px solid var(--ink);
  margin-top : 55px
}
.stat {
  padding : 28px;
  border-right : 1px solid var(--ink)
}
  .stat : last-child {
  border-right : 0
}
.stat strong {
  font-family : 'Anton';
  font-size : 72px;
  font-weight : 400
}
.headrow {
  display : flex;
  justify-content : space-between;
  gap : 30px;
  align-items : end;
  margin-bottom : 46px
}
.section h2 {
  font-family : 'Anton';
  font-weight : 400;
  text-transform : uppercase;
  font-size : clamp(44px, 7vw, 94px);
  letter-spacing : -.03em;
  line-height : .9;
  margin : 0
}
.sub {
  font-size : 12px;
  font-weight : 900;
  text-transform : uppercase;
  letter-spacing : .18em;
  color : var(--base)
}
.projects {
  border-top : 1px solid var(--ink)
}
.project {
  display : grid;
  grid-template-columns : 80px 1fr 1fr 90px;
  gap : 22px;
  padding : 26px 0;
  border-bottom : 1px solid var(--ink);
  align-items : center;
  text-decoration : none;
  color : var(--ink)
}
  .project : hover {
  color : var(--base)
}
.num {
  font-family : 'Anton';
  font-size : 38px
}
.ptype, .year {
  text-transform : uppercase;
  font-size : 12px;
  font-weight : 900;
  letter-spacing : .12em;
  color : var(--muted)
}
.ptitle {
  font-size : 26px;
  font-weight : 900;
  letter-spacing : -.04em
}
.cards {
  display : grid;
  grid-template-columns : repeat(2, 1fr);
  gap : 34px
}
.card {
  background : #fff;
  border : 1px solid var(--ink);
  padding : 18px;
  transition : .35s transform, .35s box-shadow
}
  .card : hover {
  transform : translateY(-8px);
  box-shadow : 10px 10px 0 var(--base)
}
.card img {
  width : 100%;
  height : 360px;
  object-fit : cover;
  filter : grayscale(1)
}
.card small {
  display : block;
  margin-top : 22px;
  text-transform : uppercase;
  font-weight : 900;
  letter-spacing : .12em;
  color : var(--base)
}
.card h3 {
  font-family : 'Anton';
  font-size : 42px;
  font-weight : 400;
  line-height : 1;
  margin : 8px 0 20px
}
.read {
  font-weight : 900;
  text-transform : uppercase;
  color : var(--ink);
  text-decoration : none;
  border-bottom : 2px solid var(--ink)
}
.services {
  border-top : 1px solid var(--ink)
}
.service {
  display : grid;
  grid-template-columns : 1fr 2fr 46px;
  gap : 35px;
  padding : 32px 0;
  border-bottom : 1px solid var(--ink);
  align-items : center;
  color : var(--ink);
  text-decoration : none
}
.service h3 {
  font-family : 'Anton';
  font-weight : 400;
  text-transform : uppercase;
  font-size : 48px;
  margin : 0
}
  .service : hover h3 {
  color : var(--base)
}
.arrow {
  width : 46px;
  height : 46px;
  border : 1px solid var(--ink);
  display : grid;
  place-items : center
}
.logos {
  display : grid;
  grid-template-columns : repeat(8, 1fr);
  gap : 1px;
  background : var(--ink)
}
.logo {
  background : #fff;
  height : 120px;
  display : grid;
  place-items : center;
  font-weight : 900;
  color : #aaa;
  text-transform : uppercase
}
.articles {
  display : grid;
  grid-template-columns : repeat(2, 1fr);
  gap : 1px;
  background : var(--ink)
}
.article {
  background : var(--paper);
  padding : 32px;
  text-decoration : none;
  color : var(--ink);
  min-height : 210px
}
  .article : hover {
  background : #fff
}
.article small {
  text-transform : uppercase;
  color : var(--base);
  font-weight : 900;
  letter-spacing : .1em
}
.article h3 {
  font-size : 28px;
  letter-spacing : -.04em;
  margin : 14px 0
}
.newsletter {
  display : flex;
  justify-content : space-between;
  gap : 25px;
  align-items : center;
  background : var(--ink);
  color : #fff;
  padding : 46px
}
.newsletter h3 {
  font-family : 'Anton';
  font-size : 52px;
  margin : 0;
  text-transform : uppercase;
  font-weight : 400
}
.newsletter form {
  display : flex;
  gap : 0
}
.newsletter input {
  height : 58px;
  min-width : 290px;
  border : 0;
  padding : 0 18px
}
.newsletter button, .btn {
  height : 58px;
  border : 0;
  background : var(--base);
  padding : 0 24px;
  font-weight : 900;
  text-transform : uppercase;
  color : #111;
  text-decoration : none;
  display : inline-flex;
  align-items : center
}
.page-hero {
  padding : 80px 0 40px
}
.copy {
  font-size : 22px;
  max-width : 760px
}
.contact-form {
  display : grid;
  gap : 18px
}
.contact-form input, .contact-form textarea {
  width : 100%;
  border : 1px solid var(--ink);
  background : #fff;
  padding : 18px;
  font : inherit
}
.contact-form textarea {
  min-height : 170px
}
.style-grid {
  display : grid;
  grid-template-columns : repeat(4, 1fr);
  gap : 24px
}
.swatch {
  height : 120px;
  border : 1px solid var(--ink);
  padding : 14px;
  display : flex;
  align-items : end;
  font-weight : 900
}
.footer {
  padding : 50px 0
}
.footin {
  display : flex;
  justify-content : space-between;
  gap : 25px;
  align-items : center
}
.social {
  display : flex;
  gap : 14px
}
.social a {
  width : 42px;
  height : 42px;
  display : grid;
  place-items : center;
  border : 1px solid var(--ink);
  text-decoration : none;
  color : var(--ink)
}
.reveal {
  opacity : 0;
  transform : translateY(26px);
  transition : 900ms cubic-bezier(.2, .8, .2, 1)
}
.delay1 {
  transition-delay : .12s
}
.delay2 {
  transition-delay : .24s
}
  @media(max-width : 860px) {
  .mobile{display : block
}
.links {
  display : none;
  position : absolute;
  top : 84px;
  left : 0;
  right : 0;
  background : var(--paper);
  padding : 20px;
  flex-direction : column;
  border-bottom : 1px solid var(--line)
}
.links.open {
  display : flex
}
.grid2, .cards, .articles {
  grid-template-columns : 1fr
}
.hero-line {
  display : block
}
.hero-img {
  width : 100%;
  margin : 18px 0
}
.bio-grid, .stats, .style-grid {
  grid-template-columns : 1fr
}
.stat {
  border-right : 0;
  border-bottom : 1px solid var(--ink)
}
.project, .service {
  grid-template-columns : 1fr
}
.logos {
  grid-template-columns : repeat(2, 1fr)
}
.newsletter, .footin {
  display : block
}
.newsletter form {
  margin-top : 20px;
  display : block
}
.newsletter input, .newsletter button {
  width : 100%;
  margin : 0 0 10px
}
.page-title {
  font-size : 70px
}
.hero h1 {
  font-size : 72px
}
}