/* RnP Consulting Landing Page Styles */

/* ===== BASE ===== */
:root {
  /* Imported from style.css */
  --primary: #64BAAA;
  --secondary: #F02671; /* not used on landing */
  --accent: hsla(169, 80%, 72%, 1);
  --dark: #4C8076;
  --dark-dark: #344b46;
  --black: #000000;
  --dark-gray: #161616;
  --light: hsla(167, 90%, 75%, 1);
  --light-transparent: hsla(167, 90%, 88%, 0.1);
  --white: #ffffff;
  --white-dark: #d1d1d1;
  --text-muted: #7f8c8d;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--dark-dark);
  background: #fafafa;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76,128,118,0.25), transparent);
  margin: 40px 0;
}



/* ===== LOGO STRIP ===== */
.logo-strip {
    background: var(--black);
    padding: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.logo {
    height: 100px;
    width: auto;
}

.pia-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: absolute;
    right: 0;
    transition: transform 0.3s ease;
}

.pia-link:hover {
    transform: scale(1.15);
}

.pia-arrow {
    height: auto;
    width: 80px;
    object-fit: contain;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(100,186,170,0.18) 0%, transparent 90%),
              radial-gradient(900px 500px at 95% 10%, rgba(76,128,118,0.12) 0%, transparent 60%),
              #ffffff;
}
.hero .header {
  padding: 22px 0 8px;
}

.hero .container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; }
.hero-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: 8px 0 12px;
  color: var(--dark-dark);
}
.hero-subtitle {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: #2f3f3b;
}
.hero-note {
  margin-top: 18px;
  color: var(--text-muted);
}

.hero-card {
  background: #fff;
  border: 1px solid rgba(100,186,170,0.25);
  border-radius: 14px;
  padding: 20px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}
.hero-card ul { list-style: none; margin: 0; padding: 0; }
.hero-card li { margin-left: 12px; display: flex; align-items:flex-start; gap:20px; padding:10px 0; }
.hero-card .icon img { height: 75px;; width:75px; }

/* ===== CONTENT ===== */
.section h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin: 0 0 14px;
  color: var(--dark-dark);
}
.section h3 { font-size: 1.2rem; margin: 0 0 8px; color: var(--dark-dark); }
.section .lead { font-size: 1.05rem; color: #2f3f3b; }
.section p { margin: 10px 0; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:start; }
.grid-1 { display:grid; grid-template-columns: 1fr; gap: 20px; }

.card {
  background:#fff; border:1px solid rgba(76,128,118,0.18); border-radius:12px; padding:18px 20px;
}

.list { list-style:none; padding:0; margin:8px 0 0; }
.list li { position:relative; padding-left:28px; margin:10px 0; color:#2a3a36; }
.list li::before {
  content:""; position:absolute; left:0; top:5px; height:18px; width:18px;
  border:2px solid var(--primary); border-radius:50%;
}

.emphasis { font-weight:600; color: var(--dark-dark); }
.callout { color: var(--dark); font-weight:600; }
.link { color: var(--primary); text-decoration:none; border-bottom:1px solid rgba(100,186,170,0.35); }
.link:hover { color: #3aa896; }

/* ===== FOOTER ===== */
.footer {
  background: #fff; border-top: 1px solid rgba(76,128,118,0.18);
}
.footer .container { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; }
.footer small { color: var(--text-muted); }
.footer-nav { display:flex; gap:18px; }
.footer-nav a { color: var(--dark-dark); text-decoration:none; }
.footer-nav a:hover { color: var(--primary); }

/* ===== ANIMATIONS ===== */
.reveal { opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity:1; transform: translateY(0); }

/* ===== PIA SECTION (layout per mock) ===== */
.pia { background: linear-gradient(0deg, rgba(100,186,170,0.08), rgba(100,186,170,0.08)); }
.section-title { position: relative; padding-bottom: 8px; }
.section-title::after { content:""; display:block; width: 120px; height: 3px; background: var(--primary); margin-top: 12px; }


.pia-card { background:#fff; border:1px solid rgba(100,186,170,0.28); border-radius:12px; margin-top: 24px; padding:24px; box-shadow: 0 10px 26px rgba(0,0,0,0.06); }
.pia-card-header { color: var(--dark); font-weight:600; margin-bottom: 14px; }
.pia-grid { display:grid; grid-template-columns: repeat(4, minmax(180px,1fr)); gap: 24px; }

.pia-item { text-align:center; padding: 14px 8px; position: relative; }
.pia-item .icon { color: var(--secondary); }
.pia-item .icon img { height:110px; width:110px; }
.pia-item h4 { margin: 10px 0 6px; font-size: 1rem; color: var(--dark-dark); }
.pia-item small { color: var(--text-muted); }

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Tooltip with Image */
.tooltip-content {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--light-transparent);
  background: color-mix(in srgb, var(--primary) 70%, transparent);
  color: var(--white);
  padding: 16px;
  border-radius: 8px;
  width: 210px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  z-index: 1000;
  animation: tooltipFadeIn 0.3s ease-out;
}

.tooltip-content img {
  width: 160px;
  height: 90px;
  margin-bottom: 12px;
  object-fit: contain;
  border-radius: 12px;
}

.tooltip-content p {
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.4;
  padding-top: 5px;
  padding-bottom: 10px;
}

.pia-note { margin-top: 18px; font-weight:600; color:#2f3f3b; }
.pia-callout { margin-top: 14px; background: #fff4d6; border:1px solid rgba(76,128,118,0.15); border-radius:8px; padding: 16px 18px; }

.pia-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.pia-text-link:hover {
  transform: scale(1.2);
}

.pia-callout-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  margin: 0 4px;
  vertical-align: baseline;
}

/* ===== VALUES SECTION ===== */
.values { padding-top: 25px; }

@media (max-width: 1000px) { .pia-grid { grid-template-columns: repeat(2, minmax(180px,1fr)); } }
@media (max-width: 600px) { .pia-grid { grid-template-columns: 1fr; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .footer .container { flex-direction:column; gap:12px; }
}