/* Premium upgrade layer — sits on top of colors_and_type.css. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');

:root {
  --font-editorial: 'Fraunces', 'Times New Roman', serif;
  --paccc-grain-opacity: 0.5;
}

/* ---- Page-wide grain texture ---- */
.paccc-grain { position: relative; }
.paccc-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjUgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM24pJy8+PC9zdmc+");
  opacity: var(--paccc-grain-opacity);
  mix-blend-mode: multiply;
  z-index: 1;
}
.paccc-grain > * { position: relative; z-index: 2; }

/* ---- Entrance animation primitives ---- */
@keyframes paccc-rise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes paccc-rise-sm{ from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes paccc-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes paccc-stamp  { 0% { opacity: 0; transform: scale(.92) rotate(-3deg); } 60% { opacity: 1; transform: scale(1.03) rotate(.5deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

.paccc-anim-rise    { animation: paccc-rise 720ms cubic-bezier(.2,.9,.25,1.05) both; }
.paccc-anim-rise-sm { animation: paccc-rise-sm 600ms cubic-bezier(.2,.9,.25,1.05) both; }
.paccc-anim-fade    { animation: paccc-fade 900ms ease-out both; }
.paccc-anim-stamp   { animation: paccc-stamp 720ms cubic-bezier(.2,.9,.25,1.1) both; }

.paccc-reveal { opacity: 0; transform: translateY(24px); transition: opacity 720ms cubic-bezier(.2,.9,.25,1.05), transform 720ms cubic-bezier(.2,.9,.25,1.05); }
.paccc-reveal.is-in { opacity: 1; transform: translateY(0); }

.paccc-rule { height: 2px; background: var(--paccc-charcoal); width: 100%; position: relative; }
.paccc-rule::before, .paccc-rule::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; background: var(--paccc-orange); border-radius: 999px; }
.paccc-rule::before { left: 0; } .paccc-rule::after { right: 0; }

.paccc-editorial { font-family: var(--font-editorial); font-style: italic; font-weight: 300; letter-spacing: -0.02em; text-transform: none; }

.paccc-marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.paccc-halo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.paccc-halo::before {
  content: ""; position: absolute;
  width: 600px; height: 600px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(243,107,29,0.22), transparent 70%);
  left: var(--mx, 30%); top: var(--my, 40%);
  transform: translate(-50%, -50%);
  transition: left 400ms cubic-bezier(.2,.9,.25,1.05), top 400ms cubic-bezier(.2,.9,.25,1.05);
  filter: blur(20px);
}

.paccc-logo-plate {
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 0 22px;
  background: var(--paccc-bone);
  border: 1.5px solid var(--paccc-charcoal);
  border-radius: 18px;
  font-family: var(--font-editorial);
  font-style: italic; font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--paccc-charcoal);
  filter: grayscale(1) contrast(1.05);
  transition: transform 200ms cubic-bezier(.2,.9,.25,1.05), box-shadow 200ms, filter 200ms;
  text-align: center;
}
.paccc-logo-plate:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 0 var(--paccc-orange);
  filter: grayscale(0) contrast(1);
}

/* =========================================================
   RESPONSIVE LAYER
   ========================================================= */

/* Tablet — collapse big horizontal paddings, soften scale */
@media (max-width: 1024px) {
  section { padding-left: 32px !important; padding-right: 32px !important; }
  section[id="top"] > div:nth-child(3) { padding-left: 32px !important; padding-right: 32px !important; }

  /* Two-column grids → keep 2 cols but with smaller gap */
  section [style*="grid-template-columns: repeat(3, 1fr)"],
  section [style*="grid-template-columns:repeat(3, 1fr)"],
  section [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  section [style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* About 1fr/1.3fr → stack */
  section[id="about"] > div {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  section[id="about"] > div > div:first-child > div {
    max-width: 280px !important;
  }
}

/* Mobile — full-screen single column */
@media (max-width: 720px) {
  section { padding-left: 22px !important; padding-right: 22px !important; }
  section[id="top"] { padding-top: 92px !important; }
  section[id="top"] > div:last-of-type > div { font-size: 16px !important; gap: 36px !important; }

  /* Header — hide nav links, keep CTA */
  header { padding: 14px 22px !important; }
  header > nav { gap: 12px !important; }
  header > nav > a { display: none !important; }

  /* Top bar text */
  section[id="top"] > div:nth-child(2) { top: 18px !important; left: 22px !important; right: 22px !important; gap: 10px; flex-wrap: wrap; }
  section[id="top"] > div:nth-child(2) > div { font-size: 11px !important; letter-spacing: 0.12em !important; }

  /* Hero wordmark — clamp already responsive, but tighten margins */
  section[id="top"] > div:nth-child(3) { padding: 0 22px 80px !important; }

  /* Headlines — drop one tier */
  h1, .paccc-h1 { font-size: clamp(36px, 9vw, 56px) !important; }
  h2, .paccc-h2 { font-size: clamp(34px, 8.5vw, 52px) !important; }
  h3, .paccc-h3 { font-size: clamp(24px, 6vw, 36px) !important; }
  p, .paccc-body { font-size: 17px !important; }

  /* All multi-column grids → single column */
  section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards — smaller padding */
  section [style*="padding: 36px"],
  section [style*="padding:36px"],
  section [style*="padding: 40px"] {
    padding: 24px !important;
  }

  /* Modak numerals shrink */
  section[id="services"] [style*="font-size: 96px"],
  section[id="services"] [style*="font-size:96px"] { font-size: 64px !important; }
  section[id="methodes"] [style*="font-size: 88px"] { font-size: 56px !important; }

  /* About avatar */
  section[id="about"] [style*="font-size: 240px"] { font-size: 140px !important; }

  /* Contact mailto button */
  section[id="contact"] a[href^="mailto"] {
    font-size: 18px !important;
    padding: 16px 22px !important;
    word-break: break-word;
  }
  section[id="contact"] h2 { text-shadow: 4px 4px 0 var(--paccc-charcoal) !important; }

  /* Footer wordmark */
  footer [style*="font-size: clamp(120px"] { font-size: clamp(72px, 22vw, 140px) !important; }
  footer > div > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  footer > div > div:first-child > div:last-child { align-items: flex-start !important; }

  /* Logos plate row */
  .paccc-logo-plate { height: 76px; font-size: 16px; padding: 0 14px; }

  /* Marquee — smaller */
  .paccc-marquee-mask > div { font-size: 18px !important; gap: 36px !important; }

  /* Tags row in hero */
  section[id="top"] > div:nth-child(3) > div:last-child {
    gap: 12px !important;
  }
  section[id="top"] > div:nth-child(3) > div:last-child > span:last-child {
    margin-left: 0 !important;
    width: 100%;
  }

  /* FAQ buttons */
  section[id="faq"] button > span:first-child { font-size: 17px !important; }

  /* Insights — center the orange "+" badges */
  section[id="insights"] [style*="grid-template-columns: repeat(2, 1fr)"] > div { padding: 22px !important; }
}

/* Small mobile — under 420 */
@media (max-width: 420px) {
  h1, .paccc-h1 { font-size: 34px !important; line-height: 0.95 !important; }
  section { padding-top: 72px !important; padding-bottom: 72px !important; }
  section[id="contact"] a[href^="mailto"] { font-size: 15px !important; }
  .paccc-logo-plate { height: 64px; font-size: 14px; }
}

/* Hide cursor halo on touch */
@media (hover: none) {
  .paccc-halo { display: none; }
}