:root {
  color-scheme: dark;
  --bg: #000;
  --text: #f6f6f4;
  --muted: #b7b7b2;
  --line: #171717;
  --button: #f4f4f1;
  --button-text: #111;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
img { display: block; max-width: 100%; }
h1, h2, p, figure { margin: 0; }
.shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.section { border-bottom: 1px solid var(--line); }

.hero { min-height: 635px; display: grid; place-items: center; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(310px, 1.1fr);
  align-items: center;
  gap: clamp(48px, 9vw, 132px);
  padding: 88px 0;
}
.hero-visual { display: flex; justify-content: flex-end; }
.hero-visual img { width: min(100%, 360px); height: auto; object-fit: contain; border-radius: 9px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.mobile-brand { display: none; }
.brand-mark { width: 112px; height: 112px; object-fit: contain; margin-bottom: 7px; }
.brand-name { margin-bottom: 23px; color: #f6f6f4; font-size: 13px; font-weight: 600; letter-spacing: .2em; }
h1 { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.05; font-weight: 400; letter-spacing: -.035em; }
.hero-copy .services { margin-top: 15px; color: var(--muted); font-size: clamp(12px, 1.4vw, 16px); }
.hero-copy .services span { margin: 0 6px; color: #666; }

.button {
  min-height: 42px;
  margin-top: 28px;
  padding: 11px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--button);
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.button:hover { background: transparent; color: var(--text); transform: translateY(-2px); }
.button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.portfolio { padding: 84px 0 105px; }
.portfolio h2, .reviews h2 { text-align: center; font-size: clamp(17px, 2vw, 27px); font-weight: 300; letter-spacing: -.02em; }
.work-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.3vw, 30px); }
.work-grid img { width: 100%; height: auto; object-fit: contain; border-radius: 18px; }

.reviews { padding: 94px 0 112px; }
.review-strip { margin: 58px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; max-width: 1040px; align-items: start; }
.review-strip figure {
  width: 100%;
}
.review-strip img { width: 100%; height: auto; object-fit: contain; border-radius: 14px; }

.brand-divider { height: 82px; display: grid; place-items: center; border-bottom: 1px solid var(--line); color: #999; font-size: 11px; letter-spacing: .16em; }
.final-cta { min-height: 520px; display: grid; place-items: center; border-bottom: 0; text-align: center; }
.final-cta .shell { display: flex; flex-direction: column; align-items: center; }
.final-mark { width: 76px; height: 76px; margin-bottom: 25px; object-fit: contain; }
.final-cta h2 { font-size: clamp(28px, 3.8vw, 48px); font-weight: 400; letter-spacing: -.04em; }
.button-large { margin-top: 34px; min-height: 46px; padding-inline: 34px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay, .reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 150ms; }
.reveal-delay-3 { transition-delay: 220ms; }

@media (max-width: 700px) {
  .shell { width: min(100% - 32px, 568px); }
  .hero { min-height: 100svh; }
  .hero-inner {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
    padding: 16px 0 24px;
  }
  .mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
  }
  .mobile-brand img { width: 58px; height: 58px; object-fit: contain; }
  .mobile-brand span { font-size: 9px; font-weight: 700; letter-spacing: .2em; }
  .hero-visual { justify-content: center; }
  .hero-visual img {
    width: min(100%, 430px);
    height: min(46svh, 410px);
    object-fit: cover;
    object-position: center 48%;
    border-radius: 8px;
  }
  .hero-copy { align-items: center; min-width: 0; text-align: center; }
  .hero-copy .brand-mark, .hero-copy .brand-name { display: none; }
  h1 { max-width: 100%; font-size: clamp(24px, 7.3vw, 34px); line-height: 1.07; }
  .hero-copy .services { max-width: 100%; margin-top: 8px; font-size: clamp(10px, 3vw, 13px); line-height: 1.45; }
  .hero-copy .services span { margin-inline: 3px; }
  .hero-copy .button { width: min(100%, 260px); min-height: 44px; margin-top: 13px; padding: 11px 24px; font-size: 14px; }
  .portfolio { padding: 44px 0 66px; }
  .portfolio h2, .reviews h2 { font-size: 15px; }
  .work-grid,
  .review-strip {
    width: calc(100vw - 16px);
    max-width: none;
    margin-left: calc((100vw - min(100vw - 32px, 568px)) / -2 + 8px);
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;
    padding: 0 8px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .work-grid::-webkit-scrollbar,
  .review-strip::-webkit-scrollbar { display: none; }
  .work-grid { margin-top: 32px; }
  .work-grid img {
    flex: 0 0 min(78vw, 390px);
    width: min(78vw, 390px);
    height: min(104vw, 520px);
    object-fit: cover;
    scroll-snap-align: center;
    border-radius: 14px;
  }
  .reviews { padding: 62px 0 76px; }
  .review-strip { margin-top: 38px; }
  .review-strip figure {
    flex: 0 0 min(88vw, 500px);
    width: min(88vw, 500px);
    scroll-snap-align: center;
  }
  .review-strip img { width: 100%; height: auto; border-radius: 10px; }
  .brand-divider { height: 54px; font-size: 8px; }
  .final-cta { min-height: 350px; }
  .final-mark { width: 56px; height: 56px; margin-bottom: 18px; }
  .final-cta h2 { font-size: 24px; }
  .button-large { min-height: 36px; margin-top: 24px; padding-inline: 26px; }
}

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