/* ============================================
   PIAZZA — the GGC portfolio
   ============================================ */

:root {
  --black: #0b0b0c;
  --white: #ffffff;
  --grey: #e9e9e7;
  --grey-mid: #b9b9b9;

  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --nav-h: 88px;
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Nav (fixed, transitions from transparent-over-hero to solid) ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  z-index: 100;
  color: var(--white);
  background: transparent;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.96);
  color: var(--black);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
/* Contact page (and any non-hero page) always uses the solid nav style */
.nav--solid {
  background: var(--white);
  color: var(--black);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.nav__mark { flex-shrink: 0; position: relative; display: block; }
.nav__mark img { height: 68px; width: auto; transition: opacity .25s ease; }
.nav__mark img.dark {
  position: absolute; top: 0; left: 0;
  opacity: 0;
}
.nav.is-scrolled .nav__mark img.light,
.nav--solid .nav__mark img.light { opacity: 0; }
.nav.is-scrolled .nav__mark img.dark,
.nav--solid .nav__mark img.dark { opacity: 1; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  list-style: none;
  margin: 0; padding: 0;
  font-size: 16px;
  font-weight: 600;
}
.nav__links a, .nav__links button.navlink {
  opacity: 0.85;
  transition: opacity .2s ease;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.nav__links a:hover,
.nav__links button.navlink:hover { opacity: 1; }

.nav__langs { display: flex; align-items: center; gap: 8px; }
.nav__lang {
  background: none; border: none; color: inherit; font: inherit;
  font-weight: 600; opacity: 0.55; cursor: pointer; padding: 0;
  transition: opacity .2s ease;
}
.nav__lang:hover { opacity: .85; }
.nav__lang.is-active { opacity: 1; font-weight: 800; }

.nav__burger {
  display: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  width: 28px; height: 22px;
  padding: 0;
  position: relative;
}
.nav__burger-icon,
.nav__burger-icon::before,
.nav__burger-icon::after {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav__burger-icon { top: 10px; }
.nav__burger-icon::before { content: ""; top: -8px; }
.nav__burger-icon::after { content: ""; top: 8px; }
.nav__burger[aria-expanded="true"] .nav__burger-icon { background: transparent; }
.nav__burger[aria-expanded="true"] .nav__burger-icon::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-icon::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 480px;
  overflow: hidden;
  background: #111;
}
.hero video, .hero__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.2) 100%);
  pointer-events: none;
}
.hero__word {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(50px, 10vh, 110px);
  color: var(--white);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  z-index: 5;
}
.hero__word b { font-weight: 900; }

/* ---------- Logo bar (expects transparent PNG logos) ---------- */
.logobar {
  background: var(--black);
  padding: 16px var(--gutter);
}
.logobar__row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 3vw, 32px);
}
.logobar__row img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: clamp(30px, 5vw, 74px);
  object-fit: contain;
}

/* ---------- Services ---------- */
.services { padding: 84px var(--gutter) 40px; }
.services__grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.services__item h3 {
  font-size: 21px; font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 12px; text-transform: uppercase;
}
.services__item p {
  margin: 0 auto; color: #555; font-size: 15px; line-height: 1.55; max-width: 34ch;
}

/* ---------- Big PIAZZA wordmark (image, full-bleed, provided by designer) ---------- */
.wordmark {
  padding: 40px 0 0;
  overflow: hidden;
}
.wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Behance CTA ---------- */
.behance { padding: 70px var(--gutter); text-align: center; }
.behance a {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  font-size: clamp(20px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.01em;
}
.behance a b { font-weight: 900; }
.behance .be {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--black); color: var(--white);
  font-size: 0.6em; font-weight: 800;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.behance a:hover .be { transform: rotate(8deg) scale(1.06); }

#portfolio { scroll-margin-top: var(--nav-h); }

/* ---------- Portfolio grid ---------- */
/* Square tiles, 4 across. Each shows just the project name (bold brand
   line(s) + regular descriptor line(s)) by default. On hover the text
   fades out and the designer-provided gif fades in to fill the tile. */
.grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--white);
}
.grid__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; margin: 0; width: 100%;
  padding: clamp(16px, 2vw, 26px);
}
.grid__label {
  position: relative;
  z-index: 2;
  display: block;
  text-align: left;
  transition: opacity .3s ease;
}
.grid__label-bold, .grid__label-reg {
  display: block;
}
.grid__label-bold span, .grid__label-reg span {
  display: block;
  text-transform: uppercase;
  line-height: 1.28;
  font-size: clamp(13px, 1.35vw, 17px);
}
.grid__label-bold span { font-weight: 800; }
.grid__label-reg span { font-weight: 500; color: #1a1a1a; }

.grid__gif {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 1;
}
@media (hover: hover) {
  .grid__item:hover .grid__label { opacity: 0; }
  .grid__item:hover .grid__gif { opacity: 1; }
}

/* Mobile tap-to-preview state (JS-controlled, see main.js) */
.grid__tap-label {
  display: none;
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  background: rgba(11,11,12,0.6);
  padding: 6px 10px;
  border-radius: 3px;
}
.grid__item.is-armed .grid__gif { opacity: 1; }
.grid__item.is-armed .grid__label-bold,
.grid__item.is-armed .grid__label-reg { display: none; }
.grid__item.is-armed .grid__tap-label { display: inline-block; }

/* ---------- Me section ---------- */
/* The whole scene (grey panel + photo + signature + mascot) is ONE image
   the designer provides. We only overlay the "ME" title (transparent PNG)
   and the real, editable copy text on top of it, positioned by percentage
   so they scale together with the image at any screen width. */
.me {
  position: relative;
  margin-top: 60px;
  scroll-margin-top: var(--nav-h);
}
.me__scene { position: relative; width: 100%; }
.me__scene img.bg { width: 100%; height: auto; display: block; }

.me__title {
  position: absolute;
  left: 5.5%;
  top: 27%;
  width: 15%;
  min-width: 90px;
  height: auto;
  z-index: 2;
}
.me__copy {
  position: absolute;
  left: 5.5%;
  top: 49%;
  width: 30%;
  max-width: 380px;
  z-index: 2;
}
.me__copy p {
  font-size: clamp(11px, 1.15vw, 15.5px);
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0 0 1.1em;
}
/* ---------- Footer ---------- */
.footer {
  background: var(--black);
  color: rgba(255,255,255,.75);
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.5;
}
.footer img { height: 42px; width: auto; }
.footer__legal { max-width: 70ch; text-align: right; }

/* ---------- Inner-page header (Contact) ---------- */
.pagehead { padding: calc(var(--nav-h) + 56px) var(--gutter) 40px; }
.pagehead h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -0.02em; margin: 0; }

/* ---------- Contact page ---------- */
.contact { padding: 0 var(--gutter) 100px; max-width: 760px; }
.contact p.lead { font-size: 18px; color: #444; line-height: 1.6; margin-bottom: 40px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #777; margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%; border: none; border-bottom: 2px solid var(--black); background: transparent;
  padding: 10px 2px; font-size: 16px; font-family: inherit; outline: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.submit {
  margin-top: 8px; background: var(--black); color: var(--white); border: none;
  padding: 14px 32px; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: opacity .2s ease;
}
.submit:hover { opacity: .85; }
.submit:disabled { opacity: .6; cursor: default; }
.form-status {
  margin: 14px 0 0;
  font-size: 14px;
  color: #444;
  min-height: 1.2em;
}
.contact__meta { margin-top: 56px; display: flex; gap: 48px; flex-wrap: wrap; }
.contact__meta div span {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: #777; margin-bottom: 6px;
}
.contact__meta div a, .contact__meta div p { font-size: 16px; font-weight: 600; margin: 0; }

/* ---------- Responsive ---------- */
/* Tablet range: still overlay text on the image, just scaled down */
@media (max-width: 980px) and (min-width: 701px) {
  .me__title { top: 24%; width: 20%; min-width: 70px; }
  .me__copy { top: 46%; width: 42%; }
  .me__copy p { font-size: clamp(9px, 2.1vw, 13px); }
}

@media (max-width: 860px) {
  .services__grid { grid-template-columns: 1fr; gap: 32px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--white);
    color: var(--black);
    padding: 4px var(--gutter) 22px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    gap: 0;
    font-size: 17px;
  }
  .nav__links.is-open li {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .nav__links.is-open li.nav__langs {
    border-bottom: none;
    padding-top: 18px;
  }
  .footer { flex-direction: column; align-items: flex-start; }
  .footer__legal { text-align: left; }
  .logobar { padding: 10px var(--gutter); }

  /* True mobile: text moves OUT of the image overlay and into normal flow
     below it. This is deliberate — overlaying variable-length text on a
     fixed-aspect image is what was causing it to spill into the photo and
     the footer. Below the image there's no ceiling on how much room the
     text can take, so it can never overlap anything again. */
  .me__scene {
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .me__title,
  .me__copy {
    position: static;
    left: auto; top: auto;
    width: auto;
    max-width: none;
  }
  .me__title {
    display: block;
    width: 120px;
    margin: 8px auto 18px;
    order: 1;
  }
  .me__copy {
    padding: 0 28px 32px;
    text-align: center;
    order: 2;
  }
  .me__copy p {
    font-size: 14.5px;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
  }
  .me__scene img.bg { order: 3; }
}