/* ============================================================
   Shared components introduced beyond the original page designs:
   rich-text blocks, the team grid, and the contact form.
   Loaded on every page (after the page CSS). Uses the same tokens.
   ============================================================ */

.container.narrow{width:min(820px,92vw)}

/* Topbar + header pin together as one sticky unit, so the "trusted worldwide"
   bar stays visible even after jumping to a #section. */
.site-top{position:sticky;top:0;z-index:40}
.site-top > header{position:static;top:auto}

/* When jumping to a section via a #anchor, stop below the sticky header unit. */
section[id]{scroll-margin-top:118px}

/* ---- Rich-text content blocks (full formatting) ---- */
.rte-content{color:var(--muted);line-height:1.7;font-size:17px}
.rte-content p{margin:0 0 1em}
.rte-content h2{color:#fff;font-size:28px;margin:1.2em 0 .5em;text-transform:none}
.rte-content h3{color:#fff;font-size:22px;margin:1.1em 0 .4em}
.rte-content ul,.rte-content ol{margin:0 0 1em 1.3em;padding:0}
.rte-content li{margin:0 0 .4em}
.rte-content a{color:var(--red);text-decoration:underline}
.rte-content blockquote{margin:1em 0;padding:10px 18px;border-left:3px solid var(--red);color:#c9d2db}
.rte-content strong{color:#fff}
:root[data-theme="light"] .rte-content h2,
:root[data-theme="light"] .rte-content h3,
:root[data-theme="light"] .rte-content strong{color:#141b22}
:root[data-theme="light"] .rte-content blockquote{color:#48525c}

/* ---- Feature cards (home "Explore the platform") ----
   auto-fit so the row always fills the container regardless of card count. */
.feature-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin-top:8px;
}
.feature-card{
  border:1px solid var(--line);
  background:linear-gradient(155deg,#151e27,#0b1015);
  overflow:hidden;display:flex;flex-direction:column;
}
:root[data-theme="light"] .feature-card{background:linear-gradient(150deg,#ffffff,#eef2f6)}
.feature-card img{width:100%;height:auto;max-height:400px;object-fit:contain;background:#0b1015;padding:6px;display:block}
:root[data-theme="light"] .feature-card img{background:#eef2f6}
.feature-card > div{padding:22px}
.feature-card h3{margin:0 0 8px;font-size:21px}
.feature-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.card-link{display:inline-block;color:var(--red);font-weight:800;font-size:13px;letter-spacing:.03em}
.card-link:hover{text-decoration:underline}
@media(max-width:900px){.feature-cards{grid-template-columns:1fr}}

/* ---- Team grid ---- */
/* auto-fit (not auto-fill) so 4 cards fill/centre the row instead of leaving
   empty phantom columns on the right. */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:8px}
.team-card{border:1px solid var(--line);background:linear-gradient(155deg,#151e27,#0b1015);overflow:hidden}
:root[data-theme="light"] .team-card{background:linear-gradient(150deg,#ffffff,#eef2f6)}
.team-photo{aspect-ratio:1/1;background:#0a0f14;overflow:hidden;display:grid;place-items:center}
:root[data-theme="light"] .team-photo{background:#e7ebf0}
/* Fill the frame, centred, head anchored to the top so faces aren't cut. */
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.team-initials{font:700 46px Georgia,serif;color:#fff;letter-spacing:.02em;background:linear-gradient(150deg,#1a2531,#0d141b);width:100%;height:100%;display:grid;place-items:center}
:root[data-theme="light"] .team-initials{background:linear-gradient(150deg,#dfe5ec,#eef2f6);color:var(--red)}
.team-info{padding:20px}
.team-info h3{margin:0 0 4px;font-size:20px}
.team-role{display:block;color:var(--red);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.team-bio{font-size:14px;line-height:1.55}

/* ---- Contact / enquiry form ---- */
.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:26px;align-items:start;margin-top:8px}
.contact-form-wrap{border:1px solid var(--line);background:linear-gradient(155deg,#141c24,#0c1116);padding:30px}
:root[data-theme="light"] .contact-form-wrap{background:linear-gradient(150deg,#ffffff,#eef2f6)}
.contact-field{margin-bottom:16px}
.contact-field label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;text-transform:uppercase}
.contact-field input,.contact-field textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);color:inherit;
  padding:12px 14px;font-size:15px;font-family:inherit;border-radius:4px
}
:root[data-theme="light"] .contact-field input,
:root[data-theme="light"] .contact-field textarea{background:#fff}
.contact-field input:focus,.contact-field textarea:focus{outline:none;border-color:var(--red)}
.contact-field textarea{resize:vertical;min-height:120px}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-submit{display:inline-block;background:var(--red);color:#fff;border:0;padding:14px 26px;font-size:13px;font-weight:900;letter-spacing:.04em;cursor:pointer}
.contact-submit:hover{background:#c11217}
.contact-success{padding:18px 20px;margin-bottom:20px;background:rgba(31,122,61,.14);border:1px solid #1f7a3d;color:#7fe0a5;font-weight:600}
.contact-info{border:1px solid var(--line);background:linear-gradient(150deg,#151e27,#0b1015);padding:28px}
:root[data-theme="light"] .contact-info{background:linear-gradient(150deg,#ffffff,#eef2f6)}
.contact-info h3{margin:0 0 14px;font-size:22px}
.contact-info .rte-content{font-size:15px;line-height:1.6;margin-bottom:16px}
.contact-info a{color:var(--red);display:block;margin-bottom:6px;font-weight:600}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .contact-row{grid-template-columns:1fr}
}