:root {
  --navy:#060b35;
  --deep-blue:#0c2979;
  --electric:#085cf8;
  --ice:#b0e8ff;
  --paper:#f4f7fb;
  --ink:#050a2f;
  --line:#b0e8ff3d
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  background:var(--navy);
  overflow-x:clip
}

body {
  color:var(--ice);
  background:var(--navy);
  -webkit-font-smoothing:antialiased;
  margin:0;
  font-family:Arial Narrow,Aptos Narrow,Arial,sans-serif;
  overflow-x:clip
}

a {
  color:inherit;
  text-decoration:none
}

::selection {
  color:var(--navy);
  background:var(--ice)
}

.site-header {
  z-index:10;
  justify-content:space-between;
  align-items:center;
  width:auto;
  padding:26px 4vw;
  display:flex;
  position:absolute;
  top:0;
  left:0;
  right:0
}

.brand {
  width:116px;
  display:block
}

.brand img,footer img {
  width:100%;
  height:auto;
  display:block
}

nav {
  letter-spacing:.12em;
  text-transform:uppercase;
  gap:clamp(20px,3vw,52px);
  font-size:12px;
  display:flex
}

nav a {
  padding:6px 0;
  position:relative
}

nav a:after {
  background:var(--ice);
  content:"";
  width:0;
  height:1px;
  transition:width .18s;
  position:absolute;
  bottom:0;
  left:0
}

nav a:hover:after {
  width:100%
}

nav a:focus-visible:after {
  width:100%
}

.hero {
  aspect-ratio:16/9;
  isolation:isolate;
  min-height:0;
  padding:0;
  position:relative;
  overflow:hidden
}

.hero-image {
  z-index:-3;
  object-fit:cover;
  object-position:center;
  width:100%;
  height:100%;
  position:absolute;
  inset:0
}

.hero-overlay {
  z-index:-2;
  background:linear-gradient(#060b3552,#0000 25%),linear-gradient(#0000 62%,#060b35b8);
  position:absolute;
  inset:0
}

.hero-caption {
  z-index:2;
  border-left:2px solid var(--ice);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background:#060b3542;
  padding:14px 17px;
  position:absolute;
  bottom:38px;
  left:4vw
}

.hero-caption h1 {
  color:var(--paper);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
  font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.2
}

.hero-caption p {
  letter-spacing:.08em;
  margin:6px 0 0;
  font-size:12px
}

.eyebrow,.section-index,.media-label,.media-status,.project-meta,.coming-soon,.portrait-note {
  letter-spacing:.15em;
  text-transform:uppercase;
  margin:0;
  font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;
  font-size:11px;
  font-weight:400
}

.hero-copy h1 {
  max-width:950px;
  color:var(--paper);
  letter-spacing:-.075em;
  margin:18px 0 24px;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(62px,10.5vw,158px);
  font-weight:400;
  line-height:.78
}

.hero-first-line,.hero-motion-line {
  display:block
}

.hero-found {
  color:inherit;
  font-style:normal
}

.hero-motion-line {
  color:var(--ice);
  margin-left:clamp(18px,7vw,130px);
  font-style:italic
}

.intro {
  max-width:520px;
  margin:0 0 0 clamp(18px,7vw,130px);
  font-size:clamp(17px,1.5vw,23px);
  line-height:1.45
}

.hero-mark {
  z-index:0;
  opacity:.1;
  color:var(--ice);
  letter-spacing:-.25em;
  pointer-events:none;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(260px,39vw,590px);
  line-height:.7;
  display:flex;
  position:absolute;
  top:18%;
  right:-2vw
}

.hero-mark span:last-child {
  transform:translate(-.08em)
}

.scroll-link {
  letter-spacing:.12em;
  text-transform:uppercase;
  align-items:center;
  gap:24px;
  font-size:12px;
  display:flex;
  position:absolute;
  bottom:56px;
  right:4vw
}

.scroll-link span {
  font-size:24px
}

.manifesto {
  color:var(--navy);
  background:var(--ice);
  grid-template-columns:1fr 3fr;
  gap:40px;
  padding:clamp(90px,12vw,180px) 4vw;
  display:grid
}

.manifesto-copy {
  letter-spacing:-.05em;
  max-width:1050px;
  margin:0;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(34px,5.5vw,82px);
  line-height:1.03
}

.work-section,.capabilities {
  padding:clamp(90px,10vw,160px) 4vw
}

.section-heading {
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:64px;
  display:flex
}

.section-heading h2,.about-copy h2,.contact-section h2 {
  color:var(--paper);
  letter-spacing:-.065em;
  margin:14px 0 0;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(50px,8vw,120px);
  font-weight:400;
  line-height:.9
}

.section-note {
  opacity:.72;
  max-width:320px;
  margin:0;
  font-size:14px;
  line-height:1.5
}

.project-list {
  gap:clamp(58px,8vw,118px);
  display:grid
}

.project {
  --project-accent:var(--ice);
  --project-label-ink:var(--navy);
  border:1px solid #b0e8ff33;
  border-top:3px solid var(--project-accent);
  isolation:isolate;
  background:linear-gradient(145deg,#0c297924,#060b35f5);
  grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);
  align-items:center;
  gap:clamp(28px,5vw,78px);
  padding:clamp(64px,6vw,92px) clamp(24px,4vw,64px) clamp(38px,5vw,72px);
  display:grid;
  position:relative;
  overflow:hidden;
  box-shadow:0 35px 90px #01041c4d
}

.project:before {
  z-index:0;
  opacity:.055;
  color:var(--project-accent);
  content:attr(data-project);
  letter-spacing:-.12em;
  pointer-events:none;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(180px,24vw,390px);
  line-height:.8;
  position:absolute;
  bottom:-.18em;
  right:clamp(16px,3vw,46px)
}

.project:after {
  z-index:2;
  color:var(--project-label-ink);
  background:var(--project-accent);
  content:attr(data-chapter);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:11px 17px;
  font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;
  font-size:10px;
  position:absolute;
  top:0;
  left:0
}

.project>* {
  z-index:1;
  position:relative
}

.project--charity {
  --project-accent:var(--ice);
  background:linear-gradient(140deg, #085cf826, transparent 45%), linear-gradient(145deg, #071043, var(--navy) 72%)
}

.project--tropical {
  --project-accent:var(--electric);
  --project-label-ink:var(--paper);
  background:radial-gradient(circle at 82% 18%,#b0e8ff2b,#0000 32%),linear-gradient(150deg,#0b226b,#050a31 72%)
}

.project--football {
  --project-accent:var(--deep-blue);
  --project-label-ink:var(--ice);
  background:linear-gradient(90deg,#0000 49.8%,#b0e8ff0b 50%,#0000 50.2%),radial-gradient(circle at 75% 55%,#085cf833,#0000 28%),linear-gradient(145deg,#040823,#071149)
}

.project--hair {
  --project-accent:var(--paper);
  background:radial-gradient(circle at 18% 18%,#f4f7fb21,#0000 31%),linear-gradient(145deg,#0c1d61,#050a31 68%)
}

.project:nth-child(2n) {
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr)
}

.project:nth-child(2n) .project-media {
  order:2
}

.project.has-video:not(.has-portrait-video) {
  grid-template-columns:minmax(0,2.35fr) minmax(240px,.65fr)
}

.project.has-portrait-video {
  grid-template-columns:minmax(280px,.8fr) minmax(360px,.9fr);
  align-items:start
}

.project.has-portrait-video .project-media {
  order:0;
  grid-area:1/1/span 2
}

.project.has-portrait-video .project-copy,.project.has-portrait-video .project-gallery {
  grid-column:2
}

.project.gallery-only {
  grid-template-columns:minmax(280px,.72fr) minmax(360px,1fr)
}

.project-gallery {
  grid-column:1/-1;
  justify-self:center;
  width:min(100%,660px)
}

.project-gallery.is-compact {
  justify-self:start;
  width:min(100%,400px)
}

.project.gallery-only .project-gallery {
  grid-column:auto;
  width:min(100%,660px)
}

.project-media {
  aspect-ratio:16/9;
  background-color:var(--deep-blue);
  border:1px solid #b0e8ff52;
  position:relative;
  overflow:hidden;
  box-shadow:0 28px 70px #01041c4d
}

.project-media video,.project-media iframe {
  background:#02051b;
  border:0;
  width:100%;
  height:100%;
  display:block
}

.project-media video {
  object-fit:cover
}

.project-media.is-portrait-video {
  aspect-ratio:9/16;
  justify-self:center;
  width:min(100%,480px)
}

.project-media.is-portrait-video video {
  object-fit:contain
}

.media-label {
  z-index:2;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  background:#060b35a8;
  border:1px solid #b0e8ff4d;
  border-radius:999px;
  padding:8px 11px;
  position:absolute;
  top:18px;
  left:22px
}

.project-meta,.project-footer {
  justify-content:space-between;
  gap:24px;
  display:flex
}

.project-meta {
  border-bottom:1px solid var(--line);
  padding-bottom:16px
}

.project-copy h3 {
  color:var(--paper);
  letter-spacing:-.05em;
  margin:28px 0 20px;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(36px,4.1vw,68px);
  font-weight:400;
  line-height:.95
}

.project-copy>p {
  opacity:.78;
  max-width:480px;
  margin:0 0 44px;
  font-size:16px;
  line-height:1.6
}

.project-footer {
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:12px
}

.coming-soon {
  color:var(--electric);
  letter-spacing:.08em
}

.carousel-shell {
  border-top:1px solid var(--line);
  padding-top:clamp(18px,3vw,42px)
}

.carousel-header {
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:20px;
  display:flex
}

.carousel-kicker {
  letter-spacing:.14em;
  text-transform:uppercase;
  font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;
  font-size:10px
}

.carousel-header h4 {
  color:var(--paper);
  letter-spacing:-.04em;
  margin:8px 0 0;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(25px,3vw,42px);
  font-weight:400
}

.carousel-controls {
  letter-spacing:.1em;
  align-items:center;
  gap:14px;
  font-size:11px;
  display:flex
}

.carousel-controls button {
  border:1px solid var(--line);
  width:42px;
  height:42px;
  color:var(--ice);
  cursor:pointer;
  background:0 0;
  border-radius:50%;
  place-items:center;
  padding:0;
  transition:color .18s,background .18s,transform .18s;
  display:grid
}

:is(.carousel-controls button:hover,.carousel-controls button:focus-visible) {
  color:var(--navy);
  background:var(--ice);
  transform:scale(1.06)
}

.carousel-viewport {
  aspect-ratio:4/5;
  background:#02051b;
  border:1px solid #b0e8ff4d;
  overflow:hidden
}

.carousel-track {
  height:100%;
  transition:transform .52s cubic-bezier(.2,.8,.2,1);
  display:flex
}

.carousel-slide {
  flex:0 0 100%;
  height:100%;
  margin:0;
  position:relative
}

.carousel-slide img {
  object-fit:cover;
  width:100%;
  height:100%;
  display:block
}

.carousel-slide figcaption {
  color:var(--ice);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  letter-spacing:.12em;
  text-transform:uppercase;
  background:#060b35ad;
  border-radius:999px;
  margin:0;
  padding:7px 10px;
  font-size:11px;
  position:absolute;
  bottom:16px;
  right:16px
}

.carousel-dots {
  grid-template-columns:repeat(auto-fit,minmax(8px,1fr));
  gap:4px;
  margin-top:16px;
  display:grid
}

.carousel-dots button {
  opacity:.28;
  background:var(--ice);
  cursor:pointer;
  border:0;
  width:100%;
  height:3px;
  padding:0;
  transition:width .18s,opacity .18s
}

.carousel-dots button.is-active {
  opacity:1;
  width:100%
}

.about-section {
  color:var(--navy);
  background:var(--ice);
  grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);
  gap:clamp(50px,8vw,130px);
  padding:clamp(90px,12vw,180px) 4vw;
  display:grid
}

.about-portrait {
  aspect-ratio:2/3;
  background:var(--deep-blue);
  border-radius:48% 48% 2% 2%;
  min-height:630px;
  position:relative;
  overflow:hidden
}

.about-portrait:after {
  content:"";
  background:linear-gradient(#0000 58%,#060b35b3);
  position:absolute;
  inset:0
}

.about-portrait img {
  object-fit:cover;
  object-position:center 42%;
  width:100%;
  height:100%;
  display:block
}

.portrait-initials {
  color:#b0e8ffe6;
  letter-spacing:-.18em;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(130px,18vw,280px)
}

.portrait-note {
  z-index:2;
  color:var(--ice);
  position:absolute;
  bottom:24px;
  right:26px
}

.about-copy {
  align-self:center
}

.about-copy h2 {
  color:var(--navy)
}

.about-lead {
  letter-spacing:-.035em;
  margin:46px 0 28px;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(28px,3.6vw,54px)!important;
  line-height:1.08!important
}

.about-copy>p:not(.section-index) {
  max-width:710px;
  font-size:17px;
  line-height:1.65
}

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

.capability-item {
  border-bottom:1px solid var(--line);
  outline:none;
  grid-template-columns:70px minmax(170px,.7fr) minmax(260px,1.3fr);
  align-items:center;
  gap:24px;
  min-height:128px;
  padding:22px 24px;
  transition:color .26s,background .26s,padding .26s;
  display:grid;
  position:relative
}

.capability-item:before {
  background:var(--electric);
  content:"";
  width:0;
  transition:width .36s cubic-bezier(.2,.75,.25,1);
  position:absolute;
  top:0;
  bottom:0;
  left:0
}

.capability-item:hover:before,.capability-item:focus:before {
  width:100%
}

.capability-item>* {
  z-index:1;
  position:relative
}

.capability-number {
  color:var(--electric);
  letter-spacing:.12em;
  font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;
  font-size:12px;
  transition:color .22s,transform .26s
}

.capability-item h3 {
  color:var(--paper);
  margin:0;
  font-family:Georgia,Times New Roman,serif;
  font-size:clamp(28px,3.2vw,48px);
  font-weight:400;
  transition:color .22s,transform .26s
}

.capability-item p {
  opacity:.66;
  margin:0;
  font-size:14px;
  line-height:1.6;
  transition:color .22s,opacity .22s,transform .26s
}

.capability-item:hover,.capability-item:focus {
  color:var(--navy);
  padding-left:32px;
  padding-right:16px
}

.capability-item:hover .capability-number,.capability-item:focus .capability-number,.capability-item:hover h3,.capability-item:focus h3 {
  color:var(--navy)
}

.capability-item:hover .capability-number,.capability-item:focus .capability-number {
  transform:scale(1.35)
}

.capability-item:hover h3,.capability-item:focus h3,.capability-item:hover p,.capability-item:focus p {
  transform:translate(8px)
}

.capability-item:hover p,.capability-item:focus p {
  opacity:1
}

.contact-section {
  color:var(--navy);
  background:var(--electric);
  padding:clamp(100px,13vw,200px) 4vw 30px
}

.contact-section h2 {
  max-width:1180px;
  color:var(--navy)
}

.contact-section h2 span {
  color:var(--ice);
  font-style:italic;
  display:block
}

.contact-links {
  gap:18px;
  margin:70px 0 140px;
  display:flex
}

.contact-links a {
  border:1px solid var(--navy);
  letter-spacing:.12em;
  text-transform:uppercase;
  justify-content:space-between;
  align-items:center;
  min-width:190px;
  padding:17px 20px;
  font-size:12px;
  transition:color .18s,background .18s;
  display:flex
}

.contact-arrow {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6px;
  stroke-linecap:square;
  stroke-linejoin:miter;
  flex:0 0 18px;
  width:18px;
  height:18px;
  transition:transform .18s
}

:is(.contact-links a:hover,.contact-links a:focus-visible) {
  color:var(--ice);
  background:var(--navy)
}

:is(.contact-links a:hover .contact-arrow,.contact-links a:focus-visible .contact-arrow) {
  transform:translate(2px,-2px)
}

footer {
  border-top:1px solid #060b3573;
  grid-template-columns:140px 1fr auto;
  align-items:end;
  gap:30px;
  padding-top:28px;
  font-size:12px;
  display:grid
}

footer img {
  filter:brightness(0)saturate()invert(5%)sepia(34%)saturate(6502%)hue-rotate(224deg)brightness(67%)contrast(111%)
}

footer p {
  margin:0
}

@media (max-width:960px) {
  .project,.project:nth-child(2n),.project.has-video:not(.has-portrait-video),.project.has-portrait-video,.project.gallery-only,.about-section {
    grid-template-columns:1fr
  }
  .project:nth-child(2n) .project-media {
    order:0
  }
  .project-gallery,.project-gallery.is-compact,.project.gallery-only .project-gallery {
    grid-column:1;
    justify-self:center
  }
  .project.has-portrait-video .project-media,.project.has-portrait-video .project-copy,.project.has-portrait-video .project-gallery {
    grid-area:auto/1
  }
  .capability-item {
    grid-template-columns:60px minmax(170px,.7fr) minmax(220px,1.3fr) 34px
  }
  .about-portrait {
    min-height:500px
  }
  .manifesto {
    grid-template-columns:1fr
  }
}

@media (max-width:640px) {
  .site-header {
    width:auto;
    padding:20px;
    left:0;
    right:0
  }
  .brand {
    width:76px
  }
  nav {
    gap:12px;
    font-size:9px
  }
  .hero {
    aspect-ratio:16/10;
    background:var(--navy);
    width:100vw;
    max-width:100vw;
    min-height:0;
    padding:0
  }
  .hero-image {
    object-fit:contain;
    object-position:center
  }
  .hero-caption {
    display:none
  }
  .hero-copy h1 {
    font-size:clamp(58px,20vw,92px);
    line-height:.86
  }
  .hero-motion-line,.intro {
    margin-left:0
  }
  .intro {
    width:calc(100vw - 40px);
    max-width:calc(100vw - 40px)
  }
  .hero-found {
    display:block
  }
  .hero-motion-line {
    margin-top:8px
  }
  .scroll-link {
    display:none
  }
  .manifesto,.work-section,.about-section,.capabilities,.contact-section {
    padding-left:20px;
    padding-right:20px
  }
  .section-heading {
    display:block
  }
  .section-note {
    margin-top:24px
  }
  .project {
    padding:58px 14px 34px
  }
  .project:before {
    font-size:170px;
    right:8px
  }
  .project-footer,.carousel-header {
    flex-direction:column;
    align-items:flex-start
  }
  .project-media.is-portrait-video {
    width:min(100%,420px)
  }
  .about-portrait {
    min-height:420px
  }
  .capability-item {
    grid-template-columns:38px minmax(0,1fr);
    gap:12px;
    min-height:150px;
    padding:20px 8px
  }
  .capability-item h3 {
    grid-column:2
  }
  .capability-item p {
    grid-column:2/-1;
    font-size:13px
  }
  .capability-item:hover,.capability-item:focus {
    padding-left:14px;
    padding-right:8px
  }
  .contact-links {
    flex-direction:column;
    align-items:stretch;
    margin-bottom:100px
  }
  footer {
    grid-template-columns:1fr
  }
  footer img {
    width:110px
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,:before,:after {
    transition-duration:.01ms!important
  }
}