:root{
  --ink-900: rgba(0,0,0,.90);
  --ink-700: rgba(0,0,0,.70);
  --muted: #666a73;
  --bg: #ffffff;
  --tint: #f6f7f8;
  --tint-2: #fbfbfc;
  --line: #eaedf1;
  --accent: #E53935;
  --accent-strong: #C62828;
  --gold: #f6b81b;
  --btn-ink: #ffffff;
  --maxw: 1240px;
  --radius: 14px;
  --shadow: 0 8px 26px rgba(17, 23, 39, .08);
  --shadow-soft: 0 4px 16px rgba(17, 23, 39, .06);
}
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  font-family:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
  background: var(--bg); color: var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block }
a{ color: var(--accent-strong); text-decoration:none }
a:hover{ color: var(--accent); }
.container{ max-width: var(--maxw); margin-inline:auto; padding-inline: clamp(16px, 3vw, 28px); }
.section{ padding-block: clamp(64px, 9vw, 96px); }
.kicker{ color: var(--accent-strong); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; }
.lede{ color: var(--muted); max-width: 78ch; }
/* Header / Nav */
header.top{ position: sticky; top:0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.nav{ height:72px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{ height: 40px; width:auto; }
.nav ul{ list-style:none; display:flex; gap: clamp(14px, 2.2vw, 28px); margin:0; padding:0; }
.nav a{ color: var(--ink); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.88rem; }
.nav a:hover{ color: var(--accent); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:12px; font-weight:800; border:2px solid transparent; box-shadow: var(--shadow-soft); transition: .2s ease; }
.btn-primary{ background: var(--accent); color: var(--btn-ink); border-color: var(--accent); }
.btn-primary:hover{ background: var(--accent-strong); border-color: var(--accent-strong); transform: translateY(-1px); }
.btn-ghost{ background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover{ border-color: #cfd6df; transform: translateY(-1px); }
/* Hero */
.hero{ position:relative; background: var(--tint); }
.hero-wrap{ position:relative; height:58vh; min-height:420px; max-height:780px; border-radius: 0 0 14px 14px; overflow:hidden; }
.hero img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.03) }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(17,17,17,.38), rgba(17,17,17,.08)); }
.hero-inner{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; padding:24px; }
.hero h1{ font-size: clamp(30px, 5vw, 48px); margin:0 0 .4rem; line-height:1.1; }
.hero h1{ color:#fff !important; ... }
.hero p{ font-size: clamp(16px, 2.4vw, 20px); margin:0 0 1rem; opacity:.95; }
.pills{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.pill{ background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.45rem .8rem; font-weight:800; letter-spacing:.04em; }
/* Grid / Card */
.grid{ display:grid; gap: clamp(16px, 2vw, 28px); }
.cols-2{ grid-template-columns: 1.1fr .9fr; }
.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:1100px){ .cols-3,.cols-4{ grid-template-columns: 1fr 1fr } }
@media (max-width:760px){ .cols-2,.cols-3,.cols-4{ grid-template-columns: 1fr } }
.card{ background:#fff; border:1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow:hidden; }
.card .pad{ padding: clamp(14px, 2vw, 20px); }
.cover{ aspect-ratio: 16/9; width:100%; object-fit: cover; background: var(--tint); }
/* Experience */
.experience{ background: var(--tint-2); }
.statbar{ display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 10px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius: 12px; padding: 14px; text-align:center; }
.stat b{ display:block; color: var(--ink-600); font-size: 22px }
/* Results */
.results{ background: var(--tint-2); }
.score{ background:#fff; border:1px solid var(--line); border-radius: 12px; padding: 16px; }
.score b{ color: var(--accent-strong); font-size: 26px }
/* Testimonials */
.testimonials{ background: linear-gradient(180deg, #fff, var(--tint-2)); }
.t-grid{ display:grid; gap: 16px; grid-template-columns: repeat(4,1fr); }
@media (max-width:1100px){ .t-grid{ grid-template-columns: repeat(2,1fr)} }
@media (max-width:760px){ .t-grid{ grid-template-columns: 1fr } }
.t{ background:#fff; border:1px solid var(--line); border-radius: 12px; padding: 16px; display:flex; flex-direction:column; gap:.6rem }
.t .logo{ height: 72px; display:flex; align-items:center; justify-content:center }
.t .logo img{ width:auto; height:100%; object-fit:contain }
.stars{ color: var(--gold) }
.logo-attribution{ font-size:.95rem; opacity:.75; margin-top: 1rem; }
/* Family / Team */
.family{ background: var(--tint); }
.timeline{ display:grid; gap: 10px; }
.tl{ background: #fff; border:1px solid var(--line); border-radius: 12px; padding: 12px }
.team{ background: var(--tint-2); }
.team-grid{ display:grid; gap: 14px; grid-template-columns: repeat(6,1fr) }
@media (max-width:1100px){ .team-grid{ grid-template-columns: repeat(3,1fr) } }
@media (max-width:760px){ .team-grid{ grid-template-columns: repeat(2,1fr) } }
.member{ background:#fff; border:1px solid var(--line); border-radius: 12px; overflow:hidden; text-align:center }
.member img{ aspect-ratio: 1/1; object-fit:cover }
.member .meta{ padding: 10px }
.member b{ display:block; font-weight:800 }
.member small{ color: var(--muted) }
/* Contact */
.contact{ background: linear-gradient(180deg, #fff, var(--tint-2)); }
.contact-grid{ display:grid; gap: 20px; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.panel{ background:#fff; border:1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; }
form{ display:grid; gap:.75rem; }
label{ font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; }
input, select, textarea{ width:100%; border:1px solid var(--line); background:#fff; color: var(--ink); border-radius: 10px; padding:.8rem .9rem; font-size:1rem; }
textarea{ min-height: 120px; }
.btn-row{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
/* Footer */
footer{ background:#fff; color:#565b67; border-top:1px solid var(--line); padding-block: 24px; }