/* About and Contact (pages/about.php, pages/contact.php), rebuilt 1 Nov 2026 in the homepage's
   look: "make both consistent with our website's theme" — the client. White page, Fraunces
   headings with a blue italic accent (as the homepage hero), dark-grey text, green primary
   buttons, blue and green icon tints. No gold, no dark hero (the colour rule in CLAUDE.md).
   The tokens are home2.css's, repeated here so these pages need not load the homepage sheet. */

:root {
  --ip-ink: #111827;
  --ip-text: #374151;
  --ip-text-2: #4B5563;
  --ip-blue: #2563EB;
  --ip-blue-soft: #EFF4FF;
  --ip-green: #0EB17A;
  --ip-green-soft: #E7F6EE;
  --ip-line: #E5E7EB;
  --ip-surface: #F8FAFC;
  --ip-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

body.ip-page { background: #fff; color: var(--ip-ink); }

.ip-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ── Hero ── */
.ip-hero {
  position: relative;
  padding: calc(var(--navbar-height, 72px) + clamp(48px, 7vw, 88px)) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  overflow: hidden;
  background: #fff;
}
/* The moving waves (gradient-waves.js) behind the hero; the text sits above them. */
.ip-hero-waves {
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.ip-hero > .ip-wrap { position: relative; z-index: 1; }
.ip-eyebrow {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--ip-blue-soft);
  color: var(--ip-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ip-display {
  margin: 20px 0 0;
  font-family: var(--ip-serif);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ip-ink);
}
.ip-display .ip-line { display: block; overflow: hidden; }
.ip-display .ip-line > span { display: block; }
.ip-display em, .ip-h2 em { font-style: italic; color: var(--ip-blue); }
.ip-lead {
  margin: 20px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--ip-text);
  text-wrap: pretty;
}

/* ── Live figures (About) ── */
.ip-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: clamp(36px, 4vw, 52px) auto 0;
}
.ip-stat {
  padding: 22px 18px;
  border: 1px solid var(--ip-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(17, 24, 39, .05);
}
.ip-stat-num { font-size: clamp(32px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.02em; color: var(--ip-ink); }
.ip-stat-num span:last-child { color: var(--ip-green); }
.ip-stat-label { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ip-text-2); }

/* ── Sections ── */
.ip-section { padding: clamp(64px, 8vw, 110px) 0; }
.ip-section--tint { background: var(--ip-surface); border-top: 1px solid #EEF1F5; }
.ip-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.ip-h2 {
  margin: 20px 0 0;
  font-family: var(--ip-serif);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ip-ink);
}
.ip-p { margin: 18px 0 0; max-width: 540px; font-size: 16.5px; line-height: 1.75; color: var(--ip-text); text-wrap: pretty; }
.ip-p strong { color: var(--ip-ink); }

/* ── Feature cards ── */
.ip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.ip-card {
  padding: 26px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--ip-line);
  box-shadow: 0 4px 18px rgba(17, 24, 39, .04);
}
.ip-card h3 { margin: 16px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ip-ink); }
.ip-card p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ip-text-2); text-wrap: pretty; }
.ip-card p a { color: var(--ip-blue); font-weight: 600; text-decoration: none; word-break: break-word; }
.ip-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--ip-blue-soft);
  color: var(--ip-blue);
}
.ip-ico--green { background: var(--ip-green-soft); color: var(--ip-green); }

/* ── Buttons (the homepage's: green primary, plain outline) ── */
.ip-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ip-actions--center { justify-content: center; }
.ip-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ip-btn--green { background: var(--ip-green); color: #fff; box-shadow: 0 10px 24px rgba(14, 177, 122, .25); }
.ip-btn--green:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14, 177, 122, .32); color: #fff; }
.ip-btn--outline { background: #fff; color: var(--ip-ink); border: 1px solid #D1D5DB; }
.ip-btn--outline:hover { border-color: #9CA3AF; transform: translateY(-2px); color: var(--ip-ink); }

/* ── Closing call to action (About) ── */
.ip-cta { text-align: center; max-width: 760px; margin: 0 auto; }
.ip-cta .ip-lead { margin-top: 16px; }

/* ── Contact form ── */
.ip-form-card {
  padding: clamp(26px, 3vw, 40px);
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--ip-line);
  box-shadow: 0 10px 40px rgba(17, 24, 39, .07);
}
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-label { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 700; color: var(--ip-ink); }
.cf-count { font-size: 12px; font-weight: 600; color: var(--ip-text-2); }
.cf-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid #D1D5DB;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ip-ink);
  transition: border-color .2s, box-shadow .2s;
}
.cf-input::placeholder { color: #6B7280; }
.cf-input:focus { outline: 0; border-color: var(--ip-blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
textarea.cf-input { resize: vertical; min-height: 132px; line-height: 1.6; }
.cf-submit {
  width: 100%;
  padding: 16px 28px;
  border: 0;
  border-radius: 12px;
  background: var(--ip-blue);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .28);
  transition: transform .2s, box-shadow .2s;
}
.cf-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37, 99, 235, .36); }
.cf-submit:disabled { background: #93AEEA; box-shadow: none; cursor: progress; }
.ip-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ip-contact-cards { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.ip-contact-cards .ip-card { display: grid; grid-template-columns: 46px 1fr; gap: 4px 16px; align-items: center; padding: 20px 22px; }
.ip-contact-cards .ip-card .ip-ico { grid-row: span 2; }
.ip-contact-cards .ip-card h3 { margin: 0; font-size: 15.5px; }
.ip-contact-cards .ip-card p { margin: 0; font-size: 14px; }

@media (max-width: 640px) {
  .ip-stats { grid-template-columns: 1fr; max-width: 360px; }
  .ip-btn { width: 100%; justify-content: center; }
}