/* ─── HERO ───────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  padding: 132px var(--side) 48px;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg);
}

.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: grayscale(0.7) contrast(1.1);
  transform: scale(1.04);
}

.hero-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

.hero-bg::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22,19,14,0.32) 0%, transparent 30%, transparent 68%, rgba(22,19,14,0.55) 100%);
  content: "";
  z-index: 2;
}

.hero-content {
  align-self: center;
  max-width: 1200px;
  z-index: 3;
  padding: 32px clamp(20px, 4vw, 44px);
}

.hero-content .eyebrow {
  margin-bottom: 24px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.hero-content h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 13vw, 180px);
  line-height: 0.82;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
}

.hero-content h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 56px);
  line-height: 1;
  color: var(--accent);
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.hero-content p:not(.eyebrow) {
  max-width: 660px;
  margin: 26px 0 0;
  color: #fff;
  font-size: clamp(17px, 2vw, 23px);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  align-self: end;
  z-index: 3;
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ─── SECTIONS ───────────────────────────────────────────────────── */
.home-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(90px, 10vw, 160px) var(--side) 0;
}

.section-heading {
  display: grid;
  grid-template-columns: 0.28fr minmax(0,1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}

.section-heading h2 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(32px, 5.5vw, 84px);
  line-height: 0.96;
}

/* ─── WORK GRID ──────────────────────────────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  overflow: hidden;
  border: 2px solid var(--text);
  border-radius: var(--radius);
  background: var(--panel);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.work-card:nth-child(5n+1) { grid-column: span 8; }
.work-card:nth-child(5n+2) { grid-column: span 4; }
.work-card:nth-child(5n+5) { grid-column: span 12; }

.work-media {
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--panel-soft);
}

.work-card:nth-child(5n+2) .work-media { aspect-ratio: 4/5; }
.work-card:nth-child(5n+5) .work-media { aspect-ratio: 16/7; }

.work-media img,
.work-media .image-placeholder {
  object-position: top;
  transition: transform 440ms ease, filter 440ms ease;
}

.work-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-top: 2px solid var(--text);
  background: var(--panel);
}

.work-info span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.work-info h3 {
  max-width: 520px;
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.1;
  color: var(--text);
  text-transform: none;
}

.work-card:hover {
  box-shadow: var(--hard-shadow);
  transform: translate(-4px, -4px);
}

.work-card:hover .work-media img,
.work-card:hover .work-media .image-placeholder {
  filter: brightness(1.06) saturate(1.1);
  transform: scale(1.05);
}

/* ─── SERVICES ───────────────────────────────────────────────────── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
}

.service-grid article {
  min-height: 280px;
  padding: 26px;
  border: 2px solid var(--text);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
}

.service-grid article:hover {
  transform: translate(-5px, -5px);
  box-shadow: var(--hard-shadow);
}

.service-grid span {
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  font-family: var(--font-display);
}

.service-grid h3 {
  margin: 56px 0 12px;
  font-size: 22px;
  line-height: 1.05;
}

.service-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ─── ABOUT SLICE ────────────────────────────────────────────────── */
.about-slice {
  display: grid;
  grid-template-columns: minmax(0,1fr) 0.65fr;
  gap: 52px;
  align-items: end;
}

.about-slice h2,
.contact-strip h2 {
  margin: 0;
  font-size: clamp(38px, 6.5vw, 100px);
  line-height: 0.94;
}

.about-slice > p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
}

/* ─── CONTACT STRIP ──────────────────────────────────────────────── */
.contact-strip {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(90px, 10vw, 160px) var(--side) 0;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.contact-links a {
  padding: 13px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.contact-links a:hover {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 20px var(--glow-orange);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .section-heading, .about-slice { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .home-hero { min-height: 92vh; padding-top: 142px; }
  .hero-content h1 { font-size: clamp(56px, 19vw, 110px); }
  .hero-bottom { align-items: flex-start; flex-direction: column; }
  .work-grid, .service-grid { grid-template-columns: 1fr; }
  .work-card,
  .work-card:nth-child(5n+1),
  .work-card:nth-child(5n+2),
  .work-card:nth-child(5n+5) { grid-column: auto; }
  .work-media,
  .work-card:nth-child(5n+2) .work-media,
  .work-card:nth-child(5n+5) .work-media { aspect-ratio: 4/5; }
  .work-info { align-items: flex-start; flex-direction: column; padding: 18px; }
}