/* SSC 2026 home page (revamp Phase 2, Option C final).
   Loads after ssc-2026.css and uses its tokens. Home-only classes. */

.s26-sec-title{font-size:30px;line-height:1.2;color:var(--s26-ink);margin:6px 0 10px}
.s26-sec-title-sm{font-size:26px;margin-top:34px}
.s26-sec-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.s26-sec-head .s26-sec-title{margin-bottom:0}

/* Hero (home variant) */
.s26-hhero .s26-wrap{padding-top:44px;padding-bottom:84px}
.s26-hhero h1{font-size:44px}
.s26-hl{color:#F6E3B0}
.s26-hero-more{margin-top:14px}
.s26-hero-more a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.s26-hhero .s26-hero-img{position:relative}
.s26-hhero .s26-hero-img img{height:420px}
.s26-hero-card{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(255,255,255,.96);color:var(--s26-ink);
  border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.s26-hero-card strong{font-size:16px}
.s26-hero-card span{color:var(--s26-body)}

/* About + stats */
.s26-about{background:var(--s26-cream)}
.s26-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-104px;margin-bottom:40px}
.s26-stat{background:#fff;border:1px solid var(--s26-line);border-top:4px solid var(--s26-gold);border-radius:var(--s26-radius);
  padding:18px 16px;text-align:center;box-shadow:0 6px 22px rgba(47,74,102,.08)}
.s26-stat b{display:block;font-size:30px;color:var(--s26-blue-d);line-height:1.1}
.s26-stat span{display:block;font-size:14px;color:var(--s26-body);margin-top:4px}
.s26-stat em{display:block;font-style:normal;font-size:12px;color:var(--s26-gold-t);margin-top:6px}

.s26-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
.s26-why-card{padding:18px}
.s26-why-card h3{font-size:18px;color:var(--s26-ink);margin:0 0 6px}
.s26-why-card p{margin:0;color:var(--s26-body)}

/* Specialities */
.s26-specs{background:#fff}
.s26-spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.s26-spec-body{padding:20px}
.s26-spec h3{font-size:20px;margin:0 0 8px}
.s26-spec h3 a{color:var(--s26-ink);text-decoration:none}
.s26-spec h3 a:hover{color:var(--s26-blue-d);text-decoration:underline}
.s26-spec p{margin:0 0 10px;color:var(--s26-body)}
.s26-spec-links{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:14px;margin:0}
.s26-pill{display:inline-block;background:var(--s26-gold-l);color:var(--s26-gold-t);font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:999px;margin-bottom:8px}
.s26-spec-ask{border-style:dashed;background:var(--s26-blue-xl)}

/* Conditions */
.s26-cond{background:var(--s26-blue-l)}
.s26-cond-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px}
.s26-cond-col h3{font-size:17px;color:var(--s26-ink);margin:0 0 8px}
.s26-cond-col ul{list-style:none;margin:0;padding:0}
.s26-cond-col li{margin:0 0 6px}
.s26-cond-col a{color:var(--s26-blue-d);text-decoration:none;font-size:15px}
.s26-cond-col a:hover{text-decoration:underline}

/* Numbered steps */
.s26-journey{background:var(--s26-cream)}
.s26-visit{background:#fff}
.s26-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.s26-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s26-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s26-steps li{background:#fff;border:1px solid var(--s26-line);border-radius:var(--s26-radius);padding:18px 16px}
.s26-steps h3{font-size:17px;margin:8px 0 4px;color:var(--s26-ink)}
.s26-steps h3 a{color:var(--s26-ink);text-decoration:none}
.s26-steps h3 a:hover{color:var(--s26-blue-d);text-decoration:underline}
.s26-steps p{margin:0;font-size:14px;color:var(--s26-body)}
.s26-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--s26-blue-l);color:var(--s26-blue-d);font-weight:700}

/* Doctor + extended team */
.s26-doctor{background:var(--s26-gold-l)}
.s26-tag-gold-t{color:var(--s26-gold-t)}
.s26-doc-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:start}
.s26-doc-photo{position:relative}
.s26-doc-photo img{width:100%;height:auto;border-radius:var(--s26-radius);display:block}
.s26-doc-badge{position:absolute;left:14px;bottom:14px;background:#fff;border-radius:10px;padding:8px 12px;
  font-size:13px;color:var(--s26-body);box-shadow:0 6px 18px rgba(47,74,102,.12)}
.s26-doc-badge b{display:block;font-size:18px;color:var(--s26-blue-d)}
.s26-cred-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.s26-cred{padding:12px 14px}
.s26-cred span{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--s26-gold-t)}
.s26-cred b{color:var(--s26-ink)}

.s26-ec{margin-top:40px;padding-top:30px;border-top:1px solid rgba(122,93,36,.25)}
.s26-ec-title{font-size:26px;color:var(--s26-ink);margin:0 0 8px}
.s26-ec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.s26-ec-card{padding:18px}
.s26-ec-card h3{font-size:18px;color:var(--s26-ink);margin:0 0 6px}
.s26-ec-card p{margin:0 0 8px;color:var(--s26-body)}
.s26-rel a{color:var(--s26-blue-d);font-weight:600;text-decoration:none}
.s26-rel a:hover{text-decoration:underline}
.s26-ec-ask{border-style:dashed;background:#fff}

/* Fertility */
.s26-fert{background:#fff}
.s26-tag-mint{color:var(--s26-mint-t)}
.s26-fert .s26-num{background:var(--s26-mint-l);color:var(--s26-mint-t)}
.s26-fert .s26-steps{margin-bottom:20px}

/* Facilities, videos, reviews, areas */
.s26-fac{background:var(--s26-cream)}
.s26-fac-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
.s26-fac-card{padding:18px}
.s26-fac-card h3{font-size:17px;color:var(--s26-ink);margin:0 0 6px}
.s26-fac-card p{margin:0;color:var(--s26-body);font-size:15px}

.s26-vids{background:var(--s26-blue-xl)}
.s26-vid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.s26-vid{overflow:hidden}
.s26-vid-btn{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.s26-vid-btn img{width:100%;height:auto;display:block}
.s26-vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:rgba(59,104,144,.92);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.s26-vid-frame{width:100%;aspect-ratio:16/9;border:0;display:block}
.s26-vid-title{margin:0;padding:12px 16px;font-weight:600}
.s26-vid-title a{color:var(--s26-ink);text-decoration:none}
.s26-vid-title a:hover{text-decoration:underline}

.s26-rev{background:var(--s26-blue-l)}
.s26-rev-badge{color:var(--s26-gold-t);font-weight:600;margin:0 0 18px}
.s26-rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.s26-rev-card{padding:18px;margin:0}
.s26-rev-card p{margin:0 0 10px;color:var(--s26-body)}
.s26-rev-card cite{font-style:normal;font-weight:700;color:var(--s26-ink)}

.s26-faq{background:var(--s26-cream)}
.s26-faq-list{max-width:880px}

.s26-areas{background:var(--s26-gold-l)}
.s26-chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.s26-chip{display:inline-block;background:#fff;border:1px solid var(--s26-line);border-radius:999px;
  padding:8px 14px;font-size:14px;color:var(--s26-blue-d);text-decoration:none}
a.s26-chip:hover{border-color:var(--s26-blue);text-decoration:underline}
.s26-chip-plain{color:var(--s26-body);background:rgba(255,255,255,.6)}

/* Booking */
.s26-book-sec{background:var(--s26-cream)}
.s26-book-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start}
.s26-book-form{padding:22px}
.s26-book-side{display:flex;flex-direction:column;gap:18px}
.s26-book-side .s26-sec{padding:0}
.s26-map{padding:18px}
.s26-map h3{font-size:18px;color:var(--s26-ink);margin:0 0 4px}
.s26-map p{margin:0 0 10px;color:var(--s26-body)}

/* Tablet */
@media (max-width:1024px){
  .s26-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-70px}
  .s26-why,.s26-fac-grid,.s26-cond-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s26-spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s26-steps,.s26-steps-3,.s26-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s26-doc-grid,.s26-book-grid{grid-template-columns:minmax(0,1fr)}
  .s26-rev-grid{grid-template-columns:minmax(0,1fr)}
}

/* Phone */
@media (max-width:720px){
  .s26-hhero h1{font-size:30px}
  .s26-hhero .s26-wrap{padding-bottom:70px}
  .s26-hhero .s26-hero-img img{height:260px}
  .s26-sec-title{font-size:24px}
  .s26-sec-title-sm,.s26-ec-title{font-size:21px}
  .s26-stats{grid-template-columns:minmax(0,1fr);margin-top:-56px}
  .s26-why,.s26-fac-grid,.s26-cond-grid,.s26-spec-grid,.s26-ec-grid,.s26-vid-grid,
  .s26-steps,.s26-steps-3,.s26-steps-4,.s26-cred-grid{grid-template-columns:minmax(0,1fr)}
  .s26-hero-card{position:static;margin-top:10px}
}
/* ssc-rhythm-v1
   The base stylesheet resets margin to 0 on every heading and paragraph
   inside .s26, and the home page sections never restore it, so copy sits
   flush against whatever follows. This gives the page a deliberate rhythm
   without adding empty space: more room above a heading than below it, and
   a line length people can actually read. */
.s26-tag{margin:0 0 12px;letter-spacing:.09em}
.s26-sec-title{margin:0 0 16px}
.s26-sec-head .s26-sec-title{margin-bottom:0}
.s26-sec-title-sm{margin-top:48px}
/* 68 characters a line, against the 140 the full container was giving. */
.s26-sec > .s26-wrap > p{max-width:68ch;line-height:1.75}
.s26-lead{max-width:68ch;margin:0;line-height:1.75}
/* A heading that follows body copy needs room above it, not below. */
.s26-sec > .s26-wrap > p + h2,
.s26-sec > .s26-wrap > p + h3{margin-top:44px}
.s26-sec > .s26-wrap > .s26-tag + h2{margin-top:0}
@media (max-width:560px){
  .s26-sec > .s26-wrap > p,.s26-lead{max-width:none}
  .s26-sec-title-sm{margin-top:34px}
  .s26-sec > .s26-wrap > p + h2,
  .s26-sec > .s26-wrap > p + h3{margin-top:32px}
}

/* ssc-hero-gap-v1
   Empty blue under the hero buttons. The text column is centred against a
   taller photo, and the hero then added 84px of its own padding beneath.
   56px of padding and a 380px photo brings the gap from about 104px to
   about 56px. The stats cards still clear the photo by roughly 8px, which
   is why this does not go further. */
.s26-hhero .s26-wrap{padding-bottom:56px}
.s26-hhero .s26-hero-img img{height:380px}
@media (max-width:720px){
  /* the photo is hidden below 960px, so here it is only the padding */
  .s26-hhero .s26-wrap{padding-bottom:52px}
}