/* ============================================================
   GOLDENEYE - HOMEPAGE STYLES
   ============================================================ */

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  min-height: 620px;
  position: relative;
  overflow: hidden
}

@media(max-width:960px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto
  }
}

.hero-black {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 8vw, 96px) clamp(24px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative
}

.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px
}

.hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--red)
}

.hero-title {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(62px, 9.2vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: var(--paper)
}

.hero-tag {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 36px;
  text-transform: uppercase
}

.hero-tag span {
  color: var(--red)
}

.hero-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap
}

.hero-red {
  background: var(--red);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px clamp(24px, 4vw, 48px)
}

.dots-pattern {
  position: absolute;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  pointer-events: none
}

.dots-tl {
  top: 48px;
  left: 36px;
  width: 140px;
  height: 110px
}

.dots-br {
  bottom: 42px;
  right: 44px;
  width: 170px;
  height: 90px
}

.hero-photos {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1.05/1
}

.photo-ring {
  position: absolute;
  border-radius: 50%;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  border: 6px solid var(--paper)
}

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

/* Triangle composition: photo a (top-left), photo b (bottom-right),
   seal (top-right). All three sized as peers (photo-ring scale) with
   intentional overlap so the group reads as one unit, not three
   disconnected circles. */
.photo-ring.a {
  width: 56%;
  aspect-ratio: 1/1;
  left: 0;
  top: 18%;
  z-index: 2
}

.photo-ring.b {
  width: 56%;
  aspect-ratio: 1/1;
  right: 4%;
  bottom: 0;
  z-index: 1
}

.photo-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2)
}

.hero-arc {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 60px;
  background: var(--ink);
  clip-path: ellipse(100% 52% at 0% 50%);
  z-index: 3
}

/* Hero seal: third member of the triangle composition with photos a + b.
   Sized + positioned to overlap intentionally with photo b, completing
   the composition as a unified group of three circles instead of two
   photos + one floating badge.

   Treatment is deliberately PEER to the photo rings: same 6px white
   border, same shadow, same border-radius. Only difference is the
   interior — white fill instead of a photo, with the goldeneye badge
   centered inside acting as the "stamp" content of this circle. The
   badge image is inset slightly via padding so its black ring sits
   cleanly inside the white border rather than fighting against it. */
.hero-seal {
  position: absolute;
  width: 56%;
  aspect-ratio: 1/1;
  right: 0;
  top: 0;
  z-index: 3;
  border-radius: 50%;
  background: var(--paper);
  border: 6px solid var(--paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  pointer-events: none
}

.hero-seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

@media(max-width:960px) {
  .hero-red {
    min-height: 420px;
    padding: 48px 24px
  }

  .hero-photos {
    max-width: 360px
  }

  /* Seal stays as a peer in the composition at narrower widths.
     Percent-based sizing already scales it down with the container.
     No overrides needed beyond what the base rules provide. */

  .hero-arc {
    display: none
  }
}

/* Trust strip - simple, single row */
.trust-strip {
  background: var(--ink);
  color: var(--paper);
  padding: 28px var(--gutter-x);
  border-top: 1px solid rgba(255, 255, 255, 0.06)
}

.trust-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 40px
}

.trust-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600
}

.trust-item strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--red);
  letter-spacing: -0.01em;
  text-transform: none
}

.trust-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12)
}

@media(max-width:640px) {
  .trust-divider {
    display: none
  }
}

/* Brand carousel */
.brands {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px);
  overflow: hidden
}

.brands-header {
  max-width: var(--max);
  margin: 0 auto clamp(40px, 5vw, 56px);
  padding: 0 var(--gutter-x);
  text-align: center
}

.brands-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px
}

.brands-headline {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 780px;
  margin: 0 auto
}

.brands-headline em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--red);
  letter-spacing: -0.01em
}

.brands-track {
  display: flex;
  align-items: center;
  gap: 72px;
  animation: brand-scroll 45s linear infinite;
  width: max-content
}

.brand-logo {
  flex: 0 0 auto;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center
}

.brand-logo img {
  max-height: 88px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity 0.25s;
  display: block
}

.brand-logo:hover img {
  opacity: 1
}

@keyframes brand-scroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* Anchor section (single short block between carousel and projects) */
.anchor-section {
  padding: clamp(64px, 8vw, 96px) var(--gutter-x);
  background: var(--bone);
  text-align: center
}

.anchor-inner {
  max-width: 780px;
  margin: 0 auto
}

.anchor-inner .h2 {
  margin-bottom: 18px
}

.anchor-inner p {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 32px
}

.anchor-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  transition: color 0.2s, border-color 0.2s
}

.anchor-link:hover {
  color: var(--red);
  border-color: var(--red)
}

.anchor-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s
}

.anchor-link:hover svg {
  transform: translateX(4px)
}

/* Projects grid */
.projects-header {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 48px
}

@media(max-width:840px) {
  .projects-header {
    grid-template-columns: 1fr;
    gap: 20px
  }
}

.projects-header p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 480px
}

.projects-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr;
  grid-auto-rows: 280px;
  gap: 16px
}

@media(max-width:900px) {
  .projects-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 240px
  }
}

@media(max-width:560px) {
  .projects-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px
  }
}

.project {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer
}

.project.tall {
  grid-row: span 2
}

.project.wide {
  grid-column: span 2
}

@media(max-width:900px) {
  .project.wide {
    grid-column: span 1
  }
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)
}

.project::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.2) 42%, transparent 70%);
  pointer-events: none
}

.project:hover img {
  transform: scale(1.05)
}

.project-info {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: var(--paper);
  z-index: 2
}

.project-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 6px
}

.project-info h4 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 4px
}

.project-info p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78)
}

.admin-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red-pale);
  color: var(--red-deep);
  padding: 10px 16px;
  border-left: 3px solid var(--red);
  font-size: 13px;
  font-weight: 500;
  margin-top: 32px
}

.admin-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}


.projects-header-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.project-info h4:empty,
.project-info p:empty {
  display: none;
}
.project-placeholder {
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.62);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 12px, rgba(255,255,255,.08) 12px, rgba(255,255,255,.08) 24px), #111;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}