:root {
  --ink: #121212;
  --paper: #f3f0e9;
  --muted: #77736b;
  --line: rgba(18, 18, 18, .2);
  --yellow: #e8c447;
  --violet: #8172dc;
  --red: #df5b43;
  --white: #fffdf7;
  --display: 'Manrope', Arial, sans-serif;
  --editorial: 'Playfair Display', Georgia, serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 72px, 1400px);
  min-height: 94px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.brand-logo-frame {
  display: grid;
  place-items: center;
  width: 79px;
  height: 31px;
  overflow: hidden;
  background: var(--paper);
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.brand-name { display: grid; gap: 2px; }
.brand-name strong { font-size: 17px; letter-spacing: -.07em; line-height: 1; }

main,
.site-footer { width: min(100% - 72px, 1400px); margin: 0 auto; }

.hero {
  position: relative;
  min-height: min(760px, calc(100vh - 130px));
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  isolation: isolate;
}

.hero-photo,
.hero-shade,
.hero-grid-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo { z-index: -3; object-fit: cover; object-position: center 54%; }

.hero-shade {
  z-index: -2;
  background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .73) 37%, rgba(10, 10, 10, .08) 100%), linear-gradient(0deg, rgba(10, 10, 10, .65) 0%, transparent 50%);
}

.hero-grid-lines {
  z-index: -1;
  opacity: .23;
  background-image: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.55) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(255,255,255,.55) 50%, transparent 50.2%);
  background-size: 33.333% 100%, 100% 50%;
  pointer-events: none;
}

.hero-content { max-width: 650px; padding: clamp(75px, 12vw, 150px) 8% 130px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 28px;
  color: var(--muted);
  font: 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero .eyebrow { color: rgba(255,255,255,.65); }
.eyebrow span { color: var(--yellow); }

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 620px;
  margin-bottom: 29px;
  font-size: clamp(66px, 9vw, 142px);
  font-weight: 800;
  letter-spacing: -.11em;
  line-height: .82;
}

h1 em,
h2 em,
h3 em { color: var(--yellow); font-family: var(--editorial); font-weight: 600; letter-spacing: -.08em; }

.hero-description {
  max-width: 390px;
  margin-bottom: 36px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.65;
}

.construction-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.75);
  font: 9px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.construction-label span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(232,196,71,.18);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

.hero-bottom {
  position: absolute;
  right: 8%;
  bottom: 26px;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255,255,255,.72);
  font: 9px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-line { width: 46px; height: 1px; background: var(--yellow); }
.hero-corner-mark { position: absolute; right: 5%; top: 18%; color: rgba(255,255,255,.12); font-size: clamp(80px, 15vw, 220px); font-weight: 800; letter-spacing: -.15em; line-height: 1; }

.statement {
  position: relative;
  display: grid;
  grid-template-columns: .42fr 1fr .25fr;
  gap: 45px;
  align-items: end;
  min-height: 450px;
  padding: 105px 7% 100px;
}

.section-index { align-self: start; color: var(--muted); font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.statement-copy h2 { margin-bottom: 28px; font-size: clamp(44px, 5.3vw, 78px); letter-spacing: -.1em; line-height: .9; }
.statement-copy p { max-width: 405px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.statement-stamp {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 123px;
  height: 123px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transform: rotate(11deg);
}

.statement-stamp span { font: 700 41px var(--display); letter-spacing: -.16em; line-height: .7; }
.statement-stamp small { margin-top: -10px; font: 8px var(--mono); letter-spacing: .02em; text-align: center; text-transform: uppercase; }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-bottom: 115px; }
.value-card { position: relative; min-height: 300px; padding: 25px 27px; overflow: hidden; }
.value-card-yellow { background: var(--yellow); }
.value-card-violet { background: var(--violet); color: var(--white); }
.value-card-red { background: var(--red); color: var(--white); }
.value-number { font: 10px var(--mono); opacity: .65; }
.value-card h3 { position: absolute; bottom: 67px; left: 27px; margin-bottom: 0; font-size: clamp(30px, 3vw, 45px); letter-spacing: -.09em; line-height: .85; }
.value-card h3 em { color: inherit; }
.value-card p { position: absolute; right: 27px; bottom: 24px; left: 27px; max-width: 225px; margin-bottom: 0; font-size: 12px; line-height: 1.45; opacity: .76; }

.construction-showcase {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 75px;
  padding: 90px 8%;
  background: var(--ink);
  color: var(--white);
}

.construction-copy h2 { margin-bottom: 25px; font-size: clamp(40px, 5vw, 72px); letter-spacing: -.1em; line-height: .88; }
.construction-copy h2 em { color: var(--yellow); }
.construction-copy > p:last-child { max-width: 400px; margin-bottom: 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.65; }
.construction-showcase .eyebrow { color: rgba(255,255,255,.62); }

.work-zone {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background: #242420;
  isolation: isolate;
}

.work-sky { position: absolute; inset: 0 0 34%; background: linear-gradient(145deg, #332f2a, #151513); }
.work-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(90deg, transparent 49%, rgba(232,196,71,.6) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, rgba(232,196,71,.6) 50%, transparent 51%); background-size: 48px 48px; transform: perspective(250px) rotateX(45deg) scale(1.35); transform-origin: bottom; }
.work-sign { position: absolute; top: 30px; left: 50%; display: grid; place-items: center; width: 112px; height: 67px; border: 2px solid var(--yellow); background: var(--ink); color: var(--yellow); transform: translateX(-50%) rotate(-4deg); animation: sign-sway 3s ease-in-out infinite; }
.work-sign span { font-size: 23px; font-weight: 800; letter-spacing: -.13em; line-height: .8; }
.work-sign small { font: 7px var(--mono); letter-spacing: .13em; }
.work-gear { position: absolute; color: var(--yellow); font-size: 58px; line-height: 1; animation: gear-turn 7s linear infinite; }
.gear-large { top: 85px; right: 8%; }
.gear-small { top: 160px; right: 27%; color: var(--red); font-size: 32px; animation-direction: reverse; animation-duration: 5s; }
.work-cone { position: absolute; bottom: 43px; left: 26%; width: 55px; height: 100px; animation: cone-bob 2.2s ease-in-out infinite; }
.cone-light { position: absolute; top: 0; left: 18px; width: 18px; height: 20px; border-radius: 50% 50% 10% 10%; background: var(--yellow); }
.cone-light::after { position: absolute; top: 7px; left: -4px; width: 26px; height: 10px; background: var(--white); content: ''; transform: skewY(-12deg); }
.cone-band { position: absolute; top: 25px; left: 6px; width: 43px; height: 12px; background: var(--white); clip-path: polygon(30% 0, 100% 0, 80% 100%, 0 100%); }
.cone-band::after { position: absolute; top: 23px; left: -1px; width: 45px; height: 10px; background: var(--white); content: ''; transform: skewY(-8deg); }
.cone-base { position: absolute; bottom: 0; left: -3px; width: 62px; height: 14px; border-radius: 4px; background: var(--red); box-shadow: 0 7px 0 rgba(0,0,0,.3); }
.work-tape { position: absolute; right: -15%; left: -15%; padding: 10px 0; overflow: hidden; background: var(--yellow); color: var(--ink); font: 9px var(--mono); letter-spacing: .08em; white-space: nowrap; }
.tape-one { bottom: 82px; transform: rotate(-9deg); animation: tape-slide 14s linear infinite; }
.tape-two { bottom: 38px; background: var(--red); color: var(--white); transform: rotate(8deg); animation: tape-slide 18s linear infinite reverse; }
.work-progress { position: absolute; right: 24px; bottom: 18px; left: 24px; height: 3px; background: rgba(255,255,255,.18); }
.work-progress span { display: block; width: 68%; height: 100%; background: var(--yellow); animation: progress-grow 3s ease-in-out infinite alternate; }
.work-label { position: absolute; right: 24px; bottom: 27px; color: rgba(255,255,255,.62); font: 8px var(--mono); letter-spacing: .06em; }
.work-label strong { color: var(--yellow); font-weight: 400; }

.site-footer { display: flex; align-items: center; justify-content: space-between; min-height: 95px; color: var(--muted); font: 9px var(--mono); letter-spacing: .03em; }
.footer-brand span { color: var(--ink); font-weight: 700; }
.site-footer p { margin: 0; color: var(--ink); font-family: var(--editorial); font-size: 15px; }
.footer-meta { text-align: right; }

.reveal { animation: reveal .8s ease both; }
.statement.reveal { animation-delay: .12s; }
.values.reveal { animation-delay: .2s; }
.construction-showcase.reveal { animation-delay: .28s; }

@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes sign-sway { 0%, 100% { transform: translateX(-50%) rotate(-4deg); } 50% { transform: translateX(-50%) rotate(4deg); } }
@keyframes gear-turn { to { transform: rotate(360deg); } }
@keyframes cone-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes tape-slide { from { margin-left: 0; } to { margin-left: 170px; } }
@keyframes progress-grow { from { width: 52%; } to { width: 78%; } }

@media (max-width: 820px) {
  .site-header, main, .site-footer { width: min(100% - 40px, 640px); }
  .hero { min-height: 680px; }
  .hero-photo { object-position: 43% center; }
  .hero-content { padding: 85px 8% 130px; }
  .statement { grid-template-columns: 1fr .25fr; gap: 30px; padding-right: 4%; padding-left: 4%; }
  .section-index { grid-column: 1 / -1; }
  .statement-copy { grid-column: 1; }
  .statement-stamp { grid-column: 2; grid-row: 2; }
  .construction-showcase { grid-template-columns: 1fr; gap: 55px; padding: 65px 8%; }
}

@media (max-width: 560px) {
  .site-header { min-height: 78px; }
  .brand-logo-frame { width: 66px; height: 26px; }
  .brand-name strong { font-size: 15px; }
  .hero { min-height: 650px; }
  .hero-photo { object-position: 48% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(10,10,10,.91) 0%, rgba(10,10,10,.55) 100%), linear-gradient(0deg, rgba(10,10,10,.72) 0%, transparent 62%); }
  .hero-content { padding: 70px 8% 130px; }
  h1 { font-size: clamp(58px, 17vw, 87px); }
  .hero-description { font-size: 13px; }
  .hero-bottom { align-items: flex-start; flex-wrap: wrap; right: 8%; left: 8%; line-height: 1.4; }
  .hero-line { display: none; }
  .statement { display: block; min-height: 0; padding: 75px 2% 85px; }
  .statement-copy { margin-top: 45px; }
  .statement-stamp { margin-top: 48px; margin-left: auto; }
  .values { grid-template-columns: 1fr; padding-bottom: 80px; }
  .value-card { min-height: 250px; }
  .construction-showcase { margin-bottom: 35px; padding: 58px 8%; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 14px; padding: 26px 0; }
  .footer-meta { text-align: left; }
}

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