/* ==========================================================================
   HiS Health Center page (/hishealthcenter) — lote H1 (Pepito)
   HiS brand only: Manrope Extrabold headings, Midnight Navy / Mist White /
   Logo Green / Logo Blue, Brushed Gold used once as a sparing accent.
   All rules scoped to this page's own classes (oic26-h1-*) or to the shared
   oic26-his-band component already defined in interior.css / site.css.
   ========================================================================== */

/* ---- 1. Hero ------------------------------------------------------------ */
.oic26-h1-hero.oic26-ihero--photo { background: var(--oic26-his-mist); }
.oic26-h1-hero .oic26-ihero-fade {
  background: linear-gradient(90deg,
    var(--oic26-his-mist) 0%, var(--oic26-his-mist) 40%,
    rgba(231,234,236,0.92) 48%, rgba(231,234,236,0.55) 60%, rgba(231,234,236,0) 76%);
}
.oic26-h1-hero-copy { gap: 16px; }
.oic26-ihero-copy .oic26-h1-logo { height: 64px; width: auto; max-width: 240px; object-fit: contain; align-self: flex-start; flex: 0 0 auto; }
.oic26-h1-eyebrow {
  display: inline-block; text-transform: uppercase; font-size: 13px; font-weight: 800;
  letter-spacing: 0.09em; color: #4a8aab;
}
.oic26-h1-hero-copy h1 {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 52px; line-height: 1.08;
  color: var(--oic26-his-navy); letter-spacing: -0.01em;
}
.oic26-h1-hero-copy p.oic26-ihero-lead { color: #24384a; }
@media (max-width: 1024px) { .oic26-h1-hero-copy h1 { font-size: 40px; } }
@media (max-width: 768px) {
  .oic26-h1-hero-copy h1 { font-size: 32px; }
  .oic26-ihero-copy .oic26-h1-logo { height: 48px; }
}

/* ---- 2. One visit. Everything handled. (navy poster band) --------------- */
.oic26-h1-poster {
  position: relative;
  background: url('/assets/his/brand-bg.jpg') center / cover no-repeat, var(--oic26-his-navy);
  color: #fff;
}
.oic26-h1-poster::before {
  content: ""; position: absolute; inset: 0; background: rgba(14,36,54,0.84);
}
.oic26-h1-poster-inner {
  position: relative; z-index: 1; max-width: var(--oic26-container); margin: 0 auto;
  padding: 92px var(--oic26-gutter);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center;
}
.oic26-h1-poster-head h2 {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.1; color: #fff;
}
.oic26-h1-poster-rule {
  display: block; width: 64px; height: 4px; border-radius: 2px;
  background: var(--oic26-his-green); margin: 20px 0 20px;
}
.oic26-h1-poster-head p { font-size: 17px; line-height: 1.6; color: var(--oic26-his-mist); max-width: 420px; }
.oic26-h1-steps { display: flex; flex-direction: column; gap: 22px; list-style: none; margin: 0; padding: 0; }
.oic26-h1-step {
  display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 14px;
  padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.oic26-h1-step:last-child { border-bottom: none; padding-bottom: 0; }
.oic26-h1-step-num { font-weight: 800; font-size: 20px; color: var(--oic26-his-green); }
.oic26-h1-step h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.oic26-h1-step p { font-size: 15px; line-height: 1.5; color: var(--oic26-his-mist); }
@media (max-width: 1024px) {
  .oic26-h1-poster-inner { grid-template-columns: 1fr; gap: 40px; padding: 64px var(--oic26-gutter); }
  .oic26-h1-poster-head h2 { font-size: 36px; }
}
@media (max-width: 600px) {
  .oic26-h1-poster-inner { padding: 52px var(--oic26-gutter); }
  .oic26-h1-poster-head h2 { font-size: 30px; }
}

/* ---- 3. Twelve services --------------------------------------------------*/
.oic26-h1-services { background: var(--oic26-his-mist); padding: 84px 0; }
.oic26-h1-services-head { max-width: 640px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 12px; }
.oic26-h1-services-head h2 {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.1; color: var(--oic26-his-navy);
}
.oic26-h1-gold-rule { display: block; width: 48px; height: 3px; border-radius: 2px; background: #c6a15b; }
.oic26-h1-services-head p { font-size: 17px; line-height: 1.55; color: #3d4a57; }
.oic26-h1-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: 30px; }
.oic26-h1-service-card {
  background: #fff; border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 2px rgba(14,36,54,0.06); transition: transform .18s ease, box-shadow .18s ease;
}
.oic26-h1-service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(14,36,54,0.12); }
.oic26-h1-service-card .oic26-icon { background: var(--oic26-his-blue-chip, #8ac6e3); color: var(--oic26-his-navy); }
.oic26-h1-service-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--oic26-his-navy); }
.oic26-h1-services-more { display: inline-block; font-weight: 700; font-size: 16px; color: var(--oic26-his-navy); text-decoration: underline; }
@media (max-width: 1024px) { .oic26-h1-service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) {
  .oic26-h1-services { padding: 56px 0; }
  .oic26-h1-service-grid { grid-template-columns: 1fr; }
  .oic26-h1-services-head h2 { font-size: 30px; }
}

/* ---- 4. Built for men who put it off ------------------------------------ */
.oic26-h1-why {
  display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); gap: 60px; align-items: center;
  padding-top: 88px; padding-bottom: 88px;
}
.oic26-h1-why-media { margin: 0; }
.oic26-h1-why-frame { display: block; aspect-ratio: 4 / 3; }
.oic26-h1-why-copy h2 {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 36px; line-height: 1.12;
  color: var(--oic26-his-navy); margin-bottom: 14px;
}
.oic26-h1-why-copy > p { font-size: 17px; line-height: 1.6; color: #3d4a57; max-width: 520px; margin-bottom: 30px; }
.oic26-h1-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 20px; margin-bottom: 28px; }
.oic26-h1-why-card { display: flex; flex-direction: column; gap: 8px; }
.oic26-h1-why-card .oic26-icon { width: 40px; height: 40px; background: var(--oic26-his-blue-chip, #8ac6e3); color: var(--oic26-his-navy); }
.oic26-h1-why-card .oic26-icon svg { width: 20px; height: 20px; }
.oic26-h1-why-card h3 { font-size: 16px; font-weight: 700; color: var(--oic26-his-navy); }
.oic26-h1-why-card p { font-size: 14px; line-height: 1.5; color: #3d4a57; }
.oic26-h1-why-sub { font-size: 14px; line-height: 1.5; color: #5a6672; border-top: 1px solid var(--oic26-border); padding-top: 20px; }
@media (max-width: 1024px) {
  .oic26-h1-why { grid-template-columns: 1fr; gap: 36px; padding-top: 60px; padding-bottom: 60px; }
  .oic26-h1-why-frame { aspect-ratio: 16 / 9; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .oic26-h1-why-grid { grid-template-columns: 1fr; }
  .oic26-h1-why-copy h2 { font-size: 28px; }
}

/* "Built for men" as a full-bleed band: lobby photo on the left fading into Mist White, copy on the right */
.oic26-h1-why--bleed { position: relative; overflow: hidden; background: #e7eaec; display: block; max-width: none; padding: 0; margin: 0; }
.oic26-h1-why--bleed .oic26-h1-why-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.oic26-h1-why--bleed .oic26-h1-why-fade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(231,234,236,0) 0%, rgba(231,234,236,0) 50%, rgba(231,234,236,0.55) 58%, rgba(231,234,236,0.8) 66%, rgba(231,234,236,0.86) 100%); }
.oic26-h1-why--bleed .oic26-h1-why-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; align-items: center; padding-top: 44px; padding-bottom: 44px; }
.oic26-h1-why--bleed .oic26-h1-why-copy { grid-column: 2; }
@media (max-width: 1024px) { .oic26-h1-why--bleed .oic26-h1-why-inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
@media (max-width: 768px) {
  .oic26-h1-why--bleed { display: flex; flex-direction: column; }
  .oic26-h1-why--bleed .oic26-h1-why-bg { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; order: 1; }
  .oic26-h1-why--bleed .oic26-h1-why-fade { display: none; }
  .oic26-h1-why--bleed .oic26-h1-why-inner { order: 2; display: block; min-height: 0; padding-top: 36px; padding-bottom: 48px; }
}

.oic26-h1-why--bleed { aspect-ratio: 1916 / 733; }
.oic26-h1-why--bleed .oic26-h1-why-inner { height: 100%; }
@media (max-width: 1024px) { .oic26-h1-why--bleed { aspect-ratio: auto; } }
@media (max-width: 768px) { .oic26-h1-why--bleed { aspect-ratio: auto; } }

/* Services: big icon circle bleeding off the left edge, name beside it, gold on hover */
.oic26-h1-services .oic26-h1-service-card { position: relative; overflow: hidden; display: flex; flex-direction: row; align-items: center; gap: 0; padding: 0 22px 0 0; min-height: 112px; }
.oic26-h1-services .oic26-h1-service-card .oic26-icon { flex: 0 0 auto; width: 150px; height: 150px; margin: -19px 22px -19px -52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 40px; transition: background .25s ease, transform .25s ease; }
.oic26-h1-service-card .oic26-icon svg { width: 46px; height: 46px; }
.oic26-h1-services .oic26-h1-service-card h3 { font-size: 22px; font-weight: 800; }
.oic26-h1-service-card:hover .oic26-icon, .oic26-h1-service-card:focus-visible .oic26-icon { background: #c6a15b; color: #0e2436; transform: scale(1.04); }
@media (max-width: 600px) { .oic26-h1-services .oic26-h1-service-card { min-height: 96px; } .oic26-h1-services .oic26-h1-service-card .oic26-icon { width: 128px; height: 128px; margin: -16px 18px -16px -46px; padding-left: 36px; } .oic26-h1-service-card .oic26-icon svg { width: 40px; height: 40px; } .oic26-h1-service-card h3 { font-size: 19px; } }

/* Round 2: graphite fade, 2/3 height, title on the photo (left), cards on graphite (right) */
.oic26-h1-why--bleed { aspect-ratio: auto; background: #24272d; }
.oic26-h1-why--bleed .oic26-h1-why-bg { width: 62%; object-position: 30% 55%; }
.oic26-h1-why--bleed .oic26-h1-why-fade { background: linear-gradient(90deg, rgba(36,39,45,0) 0%, rgba(36,39,45,0) 30%, rgba(36,39,45,0.55) 44%, #24272d 56%, #24272d 100%); }
.oic26-h1-why--bleed .oic26-h1-why-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; min-height: 0; height: auto; padding-top: 34px; padding-bottom: 34px; align-items: center; }
.oic26-h1-why-title { grid-column: 1; align-self: end; }
.oic26-h1-why-title h2 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.45); max-width: 420px; }
.oic26-h1-why--bleed .oic26-h1-why-copy { grid-column: 2; padding-left: 12px; }
.oic26-h1-why--bleed .oic26-h1-why-copy > p { color: #e7eaec; font-size: 16px; margin-bottom: 20px; }
.oic26-h1-why--bleed .oic26-h1-why-grid { gap: 14px 20px; margin-bottom: 18px; }
.oic26-h1-why--bleed .oic26-h1-why-card .oic26-icon { width: 34px; height: 34px; background: #b2d589; }
.oic26-h1-why--bleed .oic26-h1-why-card .oic26-icon svg { width: 17px; height: 17px; }
.oic26-h1-why--bleed .oic26-h1-why-card h3 { color: #fff; font-size: 15px; }
.oic26-h1-why--bleed .oic26-h1-why-card p { color: #c9d1cc; font-size: 13.5px; }
.oic26-h1-why--bleed .oic26-h1-why-sub { color: #b9c3bd; border-top-color: rgba(255,255,255,0.15); padding-top: 14px; font-size: 13px; }
@media (max-width: 1024px) { .oic26-h1-why-title h2 { font-size: 34px; } }
@media (max-width: 768px) {
  .oic26-h1-why--bleed .oic26-h1-why-bg { width: 100%; }
  .oic26-h1-why--bleed .oic26-h1-why-inner { padding-top: 28px; padding-bottom: 40px; }
  .oic26-h1-why-title h2 { font-size: 30px; text-shadow: none; margin-bottom: 18px; }
  .oic26-h1-why--bleed .oic26-h1-why-copy { padding-left: 0; }
}