/* subpage.css - content styles for Olaunu's generated subpages.
 * Colors are chosen for WCAG 1.4.3: body text and links clear 4.5:1 on white.
 * --ocean (#26aae1) is about 2.3:1 on white, so it is used for rules and
 * accents only, never for text. Link text uses --ocean-deep (#0d3f5f, ~10:1).
 */
.subpage { padding: 120px 0 80px; background: #fff; }
.sp-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.sp-h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 600; line-height: 1.1;
         color: var(--dark); letter-spacing: -0.02em; margin-bottom: 22px; }
.sp-lead { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.6; color: #333;
           margin-bottom: 40px; padding-bottom: 28px;
           border-bottom: 3px solid var(--ocean); }
.sp-body { font-size: 17px; line-height: 1.75; color: #333; margin-bottom: 18px; }
.sp-sec { margin: 40px 0; }
.sp-sec h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--dark);
             line-height: 1.25; margin-bottom: 14px; }
.sp-sec p { font-size: 17px; line-height: 1.75; color: #333; margin-bottom: 16px; }
.sp-list, .sp-locs, .sp-people { list-style: none; margin: 0 0 16px; padding: 0; }
.sp-list li, .sp-people li { font-size: 17px; line-height: 1.7; color: #333;
             padding: 10px 0 10px 22px; border-bottom: 1px solid var(--light-gray);
             position: relative; }
.sp-list li::before, .sp-people li::before { content: ""; position: absolute; left: 0;
             top: 20px; width: 10px; height: 2px; background: var(--ocean); }
.sp-locs li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
             font-size: 16px; color: #333; padding: 12px 0;
             border-bottom: 1px solid var(--light-gray); }
.sp-locs li span { color: #555; font-variant-numeric: tabular-nums; }
.subpage a { color: var(--ocean-deep); text-decoration: underline;
             text-underline-offset: 3px; }
.subpage a:hover { color: var(--ocean-dark); }
.subpage a:focus-visible { outline: 3px solid var(--ocean-dark); outline-offset: 2px; }

/* service index cards */
.sp-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sp-card { border: 1px solid var(--light-gray); border-top: 4px solid var(--ocean);
           padding: 26px 24px; background: var(--off-white); }
.sp-card h2 { font-size: 21px; font-weight: 600; margin-bottom: 10px; line-height: 1.25; }
.sp-card h2 a { text-decoration: none; color: var(--dark); }
.sp-card h2 a:hover { color: var(--ocean-deep); text-decoration: underline; }
.sp-card p { font-size: 15.5px; line-height: 1.65; color: #444; margin-bottom: 14px; }
.sp-more { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

/* team */
.sp-people-grid { display: grid; gap: 44px; }
.sp-person img { width: 100%; height: auto; display: block; margin-bottom: 18px; }
.sp-person h2 { font-size: 26px; font-weight: 600; color: var(--dark); margin-bottom: 4px; }
.sp-role { font-size: 15px; color: #555; margin-bottom: 14px; font-weight: 500; }
.sp-person p { font-size: 16.5px; line-height: 1.75; color: #333; margin-bottom: 14px; }

/* faq */
.sp-faq { margin-top: 52px; padding-top: 34px; border-top: 3px solid var(--ocean); }
.sp-faq h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: var(--dark);
             margin-bottom: 22px; }
.faq { margin-bottom: 24px; }
.faq-q { font-size: 18px; font-weight: 600; color: var(--dark); margin-bottom: 8px;
         line-height: 1.35; }
.faq-a { font-size: 16.5px; line-height: 1.7; color: #333; }

/* tags + cta */
.sp-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.sp-tag { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
          color: var(--ocean-deep); border: 1px solid var(--ocean); padding: 6px 14px; }
.sp-cta { margin-top: 46px; padding: 30px 26px; background: var(--off-white);
          border-left: 4px solid var(--ocean); }
.sp-cta h2 { font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--dark); }
.sp-cta p { font-size: 16.5px; line-height: 1.7; color: #333; margin-bottom: 14px; }
.sp-cta a.btn-outline-blue { display: inline-block; }

@media (max-width: 640px) {
  .subpage { padding: 96px 0 60px; }
  .sp-locs li { flex-direction: column; gap: 2px; }
}

/* ===== SUBPAGE HEADER STATE =====
 * The shared header is built for the homepage, where it floats over a dark
 * hero with white text. Subpages have no hero, so it would render white on
 * white. subpage.css only loads on subpages, so pinning the solid state here
 * is safe and leaves the homepage untouched.
 */
.site-header {
  background: rgba(15, 20, 30, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(38, 170, 225, 0.2);
}
.site-header .lang-toggle { color: #fff; text-decoration: none; }

/* Button used by the page CTAs. Defined on the homepage inline styles only,
 * so it is restated here for the generated pages. */
.btn-outline-blue {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  /* #1a85b5 gives white text only 4.15:1; #157298 gives 5.40:1 on the same hue */
  background: #157298;
  border: 2px solid #157298;
  padding: 13px 30px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.btn-outline-blue:hover,
.subpage a.btn-outline-blue:hover {
  background: var(--ocean-deep);
  border-color: var(--ocean-deep);
  color: #fff;
}
.subpage a.btn-outline-blue { color: #fff; text-decoration: none; }