/* Created: 08:34 25-Aug-2026 */
/* Updated: 02:28 23-Sep-2026 — step rail removed (it crossed the numerals) */
/* Updated: 09:12 25-Aug-2026 — condition photo cards (2-col), 4-step how-it-works */
/* Updated: 16:09 22-Sep-2026 — callout note: 16px under the heading (site-wide heading gap) */
/* Updated: 00:08 23-Sep-2026 — design pass: scroll-drawn step route, waking photos, 45-minute dial (Sumit 23-Sep) */
/* Updated: 00:20 23-Sep-2026 — dial replaced by a drawn rule; 'Request a call back' is a heading (Sumit 00:16) */
/* /doctors-on-call/ — see _build/render_doconcall.py for the five faults this replaces.
   Loaded only by that page. */

.doc-eyebrow{color:var(--text-medium);margin-bottom:10px}

/* ---- hero ---- */
.doc-hero{position:relative;overflow:hidden;padding:var(--sec-l) 0 var(--sec-m);
  background:var(--ink-100);color:var(--paper-100)}
.doc-hero-bg{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 12%,#2a4750 0%,#16262e 58%,#0f1d24 100%)}
.doc-hero>.page-pad{position:relative;z-index:1}
.doc-hero h1{color:var(--paper-100)}
.doc-hero-lede{color:var(--paper-64);margin-top:20px}
.doc-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* ---- call-back callout: the 5 stranded fragments, made one thing ---- */
.doc-callout{padding-block:var(--sec-s)}
.doc-callout-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:48px;align-items:center;padding:40px;border-radius:16px;background:var(--bg-two);
  border:1px solid var(--border-faint)}
.doc-phone{display:inline-block;margin-top:14px;font-size:38px;line-height:1.1;
  font-weight:600;letter-spacing:-.5px;color:var(--text-strong);text-decoration:none;
  font-variant-numeric:tabular-nums}
.doc-phone:hover{color:var(--accent)}
.doc-callout-or{color:var(--text-subtle);margin-top:16px}
.doc-callout-alt{color:var(--text-medium);margin-top:16px}
.doc-callout-alt a{color:var(--accent)}

.doc-callback{background:var(--paper-100);border:1px solid var(--border-faint);
  border-radius:14px;padding:24px}
.doc-callback-title{color:var(--text-medium);margin-bottom:14px}
.doc-field{display:block}
.doc-field>span{display:block;color:var(--text-medium);margin-bottom:6px}
.doc-field input{width:100%;padding:13px 14px;border-radius:10px;font:inherit;
  color:var(--text-strong);background:var(--bg);border:1px solid var(--border-subtle)}
.doc-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  border-color:transparent}
.doc-callback .btn{margin-top:14px;width:100%}
.doc-callback-note{margin-top:12px;font-size:13px;line-height:1.5;color:var(--text-subtle)}
.doc-callback-note a{color:var(--accent)}

/* ---- intro: sticky heading left, prose right ---- */
.doc-intro{padding-block:var(--sec-m) var(--sec-s)}
.doc-editorial{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;
  align-items:start}
.doc-editorial-head{position:sticky;top:120px}
.doc-editorial-body p+p{margin-top:18px}
.doc-editorial-body a{color:var(--accent)}

/* ---- the 11 conditions. Sumit 25-Aug: "I don't like the big cards, you are focusing
       completely on the image... the image, the text, then the image, the text in one
       row." So each card is a ROW - a small square photo beside its copy - and two of
       those sit per grid row. The photo still carries two frames that swap on hover and
       every 5s (js/main.js); the caption pill is gone, it crowded a small image. ---- */
.doc-conditions{padding-block:var(--sec-s) var(--sec-m);background:var(--bg-two)}
.doc-sub{color:var(--text-medium);margin-top:16px}
.cond-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  padding:0;margin:44px 0 0}
.cond-card{display:flex;align-items:stretch;gap:20px;padding:18px;
  background:var(--paper-100);border:1px solid var(--border-faint);border-radius:14px;
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ)}
@media (hover:hover){.cond-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--ink-8)}}
.cond-shot{position:relative;flex:0 0 132px;width:132px;height:132px;border-radius:10px;
  overflow:hidden;background:var(--surface-card)}
/* Frame A stays opaque underneath and only frame B fades in OVER it. Fading both at once
   left them ghosted together mid-transition and the card looked washed out. */
.cond-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cond-shot img:first-of-type{opacity:1}
.cond-shot img:last-of-type{opacity:0;transition:opacity .55s ease}
.cond-shot.is-b img:last-of-type{opacity:1}
.cond-cap{display:none}
.cond-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.cond-title{color:var(--text-strong);line-height:1.3}
.cond-text{color:var(--text-medium);margin-top:8px}

/* ---- what happens when you call ---- */
.doc-how{padding-block:var(--sec-m) var(--sec-s)}
.doc-how-cta{display:flex;align-items:center}
.doc-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding:0;margin:44px 0 0;counter-reset:step}
.doc-step{padding:26px 22px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.doc-step-num{display:block;color:var(--accent);font-family:'IBM Plex Mono',monospace;
  margin-bottom:14px}
.doc-step-title{color:var(--text-strong)}
.doc-step-body{color:var(--text-medium);margin-top:8px}

/* ---- why bayti: 4 cards, was one 626-character wall ---- */
.doc-why{padding-block:var(--sec-m)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.why-card{display:flex;flex-direction:column;padding:28px 24px;border-radius:14px;
  background:var(--paper-100);border:1px solid var(--border-faint)}
.why-num{color:var(--accent);font-family:'IBM Plex Mono',monospace;margin-bottom:16px}
.why-title{color:var(--text-strong)}
.why-body{color:var(--text-medium);margin-top:10px}

/* ---- closing cta ---- */
.doc-cta{padding-block:var(--sec-s) var(--sec-m);background:var(--bg-two)}
.doc-cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

@media (max-width:1099px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .doc-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:899px){
  .doc-callout-inner,.doc-editorial{grid-template-columns:1fr;gap:32px}
  .doc-editorial-head{position:static}
  .doc-hero{padding:var(--sec-m) 0 var(--sec-s)}
}
@media (max-width:1023px){
  .cond-grid{grid-template-columns:1fr}
}
@media (max-width:479px){
  .cond-card{flex-direction:column}
  .cond-shot{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/10}
}
@media (max-width:639px){
  .why-grid,.doc-steps{grid-template-columns:1fr}
  .doc-callout-inner{padding:24px}
  .doc-phone{font-size:30px}
}

/* ================================================================ design pass, 23-Sep-2026
   Sumit: bring the homepage's design language inside, and be inventive with motion and scroll.
   Chrome, copy, photos and section order are untouched. Everything here is entrance-only or
   hover-only, and every hidden start state hangs off html.ds, which js/motion.js sets only when
   JS runs and reduced motion is off — so the page is complete without either. */

/* ---- the four steps become a route that draws itself as you scroll ---- */
.doc-steps{position:relative}
/* 23-Sep, Sumit: the rail crossed the step numbers and made them unreadable. Removed
   here and in design-service-pages.css. The steps still light in sequence. */
.ds .doc-step{transition:transform .45s var(--ease-circ),box-shadow .45s var(--ease-circ),
  border-color .45s var(--ease-circ),opacity .45s var(--ease-circ);opacity:.55}
.ds .doc-step.is-live{opacity:1;transform:translateY(-4px);border-color:rgb(36 187 187 / .4);
  box-shadow:0 22px 44px -30px rgb(26 154 154 / .75)}
.doc-step-num{position:relative;display:inline-grid !important;place-items:center;width:38px;height:38px;
  border-radius:var(--d-r-chip);background:rgb(36 187 187 / .12);color:var(--d-teal-deep);
  font-weight:700;transition:background-color .45s var(--ease-circ),color .45s var(--ease-circ),
  box-shadow .45s var(--ease-circ)}
.ds .doc-step.is-live .doc-step-num{background:var(--d-grad);color:#fff;
  box-shadow:0 12px 24px -14px rgb(26 154 154 / .95)}

/* ---- treatments: the photo wakes up as the card arrives ---- */
.ds .cond-card{opacity:0;translate:0 16px;transition:opacity .55s var(--ease-circ),
  translate:.55s var(--ease-circ),box-shadow .35s var(--ease-circ),border-color .35s var(--ease-circ);
  transition-delay:calc(var(--i,0) * 70ms)}
.ds .cond-card.is-in{opacity:1;translate:none}
.cond-shot img{filter:saturate(.35) contrast(1.02);transition:filter .7s var(--ease-circ)}
.ds .cond-card.is-in .cond-shot img{filter:none}
.cond-card{border:1px solid rgb(36 187 187 / .14);background:#fff;
  box-shadow:0 16px 36px -34px rgb(9 30 38 / .55)}
@media (hover:hover){.cond-card:hover{border-color:rgb(36 187 187 / .38);
  box-shadow:0 22px 44px -30px rgb(26 154 154 / .6)}}
.cond-shot{border-radius:var(--d-r-chip);overflow:hidden}

/* ---- the callout: a calm brand frame, no floating graphic ----
   The dial was clipped by the panel and read as a glitch (Sumit 00:16). Replaced by the same
   language the rest of the page uses: a gradient rule that draws in above the headline, and a
   soft wash in the corner. Nothing overlaps the form. */
.doc-callout-inner{background:#fff;border:1px solid rgb(36 187 187 / .2);
  box-shadow:0 22px 46px -34px rgb(9 30 38 / .55);position:relative;overflow:hidden}
.doc-callout-inner::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(46% 70% at 4% 0%,rgb(36 187 187 / .12),transparent 64%),
             radial-gradient(40% 60% at 100% 100%,rgb(83 79 160 / .08),transparent 62%)}
.doc-callout-lead,.doc-callback{position:relative;z-index:1}
.doc-callout-lead h2{position:relative;padding-top:20px}
.doc-callout-lead h2::before{content:"";position:absolute;top:0;inset-inline-start:0;height:4px;
  width:72px;border-radius:4px;background:var(--d-grad);
  transform-origin:left center;scale:var(--lead,1) 1;transition:scale .8s var(--ease-circ) .1s}
[dir="rtl"] .doc-callout-lead h2::before{transform-origin:right center}
.ds .doc-callout-lead h2::before{--lead:0}
.ds .doc-callout.is-in .doc-callout-lead h2::before{--lead:1}

/* ---- the call-back form: brand focus, nothing moving near it ---- */
.doc-field input:focus-visible{outline:2px solid var(--d-teal);outline-offset:2px}
.doc-callback{background:rgb(36 187 187 / .06);border:1px solid rgb(36 187 187 / .18)}

@media (prefers-reduced-motion:reduce){
  .cond-shot img{filter:none}
}

/* the form's own title reads as a heading, not as another field label (Sumit 00:16) */
.doc-callback-title{font-family:inherit;font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.2px;
  text-transform:none;color:var(--text-strong);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.doc-callback-title::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--d-grad)}
.doc-field>.label-2{color:var(--text-subtle);letter-spacing:.08em}