/* Created: 20:26 25-Aug-2026 */
/* Updated: 07:02 26-Aug-2026 — About: 5/4 media box (heads were cropped); .ab-close */
/* Updated: 08:26 26-Aug-2026 — .cr-form-fig, .ad-trust, .ad-flow-sec (BL-121 /admission/ rework — process roadmap, 3 photographs, 4 icons) */
/* Updated: 09:44 26-Aug-2026 — /offers/: per-offer carousel in a 4/5 frame, Book Now at the card foot, shared .gal-lb lightbox */
/* Updated: 09:06 26-Aug-2026 — /career/ rework: full-width hero (placeholder deleted, 2-col lede), equal job cards, testimonials on the shared carousel, one-up Life gallery + lightbox */
/* Updated: 11:24 26-Aug-2026 — /contact-us/: form figure uses the SHARED .cr-form-fig; a --tall 4/5 variant was added and then removed the same hour — Sumit rejected the portrait stock photo it existed for */
/* Updated: 16:09 22-Sep-2026 — form intro: 16px under the heading (site-wide heading gap) */
/* Updated: 19:18 12-Oct-2026 — S1-WP6-13 round-1 F4: office grids take one column per office (3 since D-191), an odd last card spans the 2-column row */
/* Updated: 13:44 16-Oct-2026 — client point 16-Oct #4: gallery lightbox centred (inset:0; margin:auto) so outside clicks close it */
/* /career/, /about/, /admission/, /contact-us/, /offers/, /blogs/ — the company pages.
   Shares the component kit in css/t2.css. */

/* ================= career ================= */
.cr-hero{position:relative;overflow:hidden;padding:var(--sec-l) 0 var(--sec-s);
  background:var(--ink-100);color:var(--paper-100)}
.cr-hero-bg{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 75% 15%,#2c4a52 0%,#16262e 58%,#101f26 100%)}
.cr-hero>.page-pad{position:relative;z-index:1}
.cr-hero h1{color:var(--paper-100)}
.cr-hero-lede{color:var(--paper-64);margin-top:18px}

.cr-roles{padding-block:var(--sec-s) var(--sec-m)}
.cr-jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;padding:0;
  align-items:start}
.cr-jobs-col{padding:26px 24px 22px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.cr-jobs-head{color:var(--text-strong);padding-bottom:12px;
  border-bottom:1px solid var(--border-faint)}
.cr-jobs-list{list-style:none;padding:0;margin:12px 0 0}
.cr-jobs-list li{padding:9px 0;font-size:15px;line-height:1.5;color:var(--text-medium)}
.cr-jobs-list li+li{border-top:1px solid var(--ink-4)}
.cr-apply{margin-top:28px;max-width:var(--measure-6)}
.cr-apply a{color:var(--accent)}

.cr-voice{padding-block:var(--sec-m)}
.cr-quote{margin:0;max-width:var(--measure-6);padding-left:26px;
  border-left:3px solid var(--teal)}
.cr-quote-text{margin:0;color:var(--text-strong);line-height:1.5}
.cr-quote-by{margin-top:20px;display:flex;flex-direction:column;gap:2px}

.cr-form-sec{padding-block:var(--sec-s) var(--sec-m)}
.cr-form-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;
  align-items:start}
.cr-form-intro{position:sticky;top:112px}
.cr-form-intro p{margin-top:16px}
.cr-form{display:grid;gap:16px;padding:32px;border-radius:16px;
  background:var(--paper-100);border:1px solid var(--border-faint)}
.cr-row--2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cr-field{display:block}
.cr-field>span{display:block;color:var(--text-medium);margin-bottom:6px}
.cr-field input,.cr-field select,.cr-field textarea{width:100%;padding:13px 14px;
  border-radius:10px;font:inherit;color:var(--text-strong);background:var(--bg);
  border:1px solid var(--border-subtle)}
.cr-field textarea{resize:vertical;min-height:110px}
.cr-field :focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  border-color:transparent}
.cr-cv{margin-top:2px}
.cr-cv a{color:var(--accent)}
.cr-submit{justify-self:start;margin-top:6px}

/* The event photographs are low-resolution collages, so they run small. */
.cr-life{padding-block:var(--sec-m)}
/* .cr-life-grid removed 26-Aug — replaced by the one-up carousel below. */

@media (max-width:1023px){
  .cr-jobs{grid-template-columns:1fr}
  .cr-form-grid{grid-template-columns:1fr;gap:32px}
  .cr-form-intro{position:static}
  .cr-life-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639px){
  .cr-row--2{grid-template-columns:1fr}
  .cr-form{padding:24px}
}

/* ================= shared company hero ================= */
.pg-hero{position:relative;overflow:hidden;padding:var(--sec-l) 0 var(--sec-m);
  background:var(--ink-100);color:var(--paper-100)}
.pg-hero-bg{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 12%,#2c4a52 0%,#16262e 58%,#101f26 100%)}
.pg-hero>.page-pad{position:relative;z-index:1}
.pg-hero h1{color:var(--paper-100)}
.pg-hero-lede{color:var(--paper-64);margin-top:18px}

/* ================= offers ================= */
/* Every offer was left-aligned in a stack with its flyer at whatever size the source
   happened to be. The flyers are portrait artwork, so each card holds one at a fixed
   ratio with the rest of the set beneath it. */
.of-grid-sec{padding-block:var(--sec-m)}
.of-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  padding:0;margin:0}
/* Sumit 26-Aug: "those offers need to be carousels... you are making them of one big long
   image." Measured: the five cards ran 2296 / 1030 / 1030 / 1030 / 1452px, because the
   first STACKED five 1080x1350 flyers and the others stacked two. One frame, one image at
   a time, and every card is the same height whatever it holds. */
.of-card{display:flex;flex-direction:column;background:var(--paper-100);
  border:1px solid var(--border-faint);border-radius:18px;overflow:hidden;
  transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ)}
@media (hover:hover){.of-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px var(--ink-8)}}

/* The flyers are 1080x1350 - a 4/5 portrait. The frame matches, so the artwork is shown
   at its own ratio rather than cropped or letterboxed. */
.of-shot{position:relative;background:var(--surface-card);aspect-ratio:4/5}
.of-slides{list-style:none;margin:0;padding:0;height:100%}
.of-slide{height:100%}
.of-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:zoom-in;line-height:0}
.of-open img{display:block;width:100%;height:100%;object-fit:contain}
.of-open:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.of-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--paper-24);background:var(--ink-88);color:var(--paper-100);
  font-size:16px;line-height:1;opacity:0;transition:opacity .25s}
.of-card:hover .of-arrow,.of-arrow:focus-visible{opacity:1}
.of-arrow--p{left:10px}
.of-arrow--n{right:10px}
.of-count{position:absolute;right:12px;bottom:12px;z-index:2;
  padding:4px 10px;border-radius:999px;font-size:12px;letter-spacing:.04em;
  background:var(--ink-88);color:var(--paper-100)}
/* Touch has no hover, so the arrows must not be invisible there. */
@media (hover:none){.of-arrow{opacity:1}}

.of-body{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px 0}
.of-label{margin:0;font-size:17px;line-height:25px;font-weight:600;color:var(--text-strong)}
.of-dots{display:flex;gap:6px;flex:0 0 auto}
.of-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink-16);transition:background .2s,transform .2s}
.of-dot.is-on{background:var(--teal);transform:scale(1.3)}
.of-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The button belongs at the FOOT of the card (Sumit), and margin-top:auto keeps it on the
   bottom edge whether the label wraps to one line or two. */
.of-foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:18px 22px 22px;margin-top:auto}
.of-foot .btn{align-self:stretch;justify-content:center}
.of-call{font-size:13.5px;color:var(--text-medium);text-decoration:underline;
  text-underline-offset:3px;align-self:center}
.of-call:hover{color:var(--text-strong)}
.of-note{margin-top:36px;max-width:var(--measure-6)}
.of-note strong{color:var(--text-strong)}

/* Shared lightbox, built by js/gallery.js (one per page, not one per carousel). */
/* 16-Oct-2026 (client point 4, site-wide check): inset:0 + margin:auto centre the lightbox; margin 0 left it stuck at the
   top-left, so a click on the dark area mostly hit the lightbox itself and never closed it (same fix as .tm-dialog). */
.gal-lb{position:fixed;inset:0;margin:auto;width:min(94vw,1100px);max-width:94vw;max-height:94vh;padding:0;border:0;
  border-radius:18px;background:var(--ink-100);color:var(--paper-100);overflow:hidden}
.gal-lb::backdrop{background:rgba(8,14,18,.84)}
.gal-lb-fig{margin:0;padding:22px}
.gal-lb-fig img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;
  border-radius:10px;margin:0 auto}
.gal-lb-fig figcaption{margin-top:12px;text-align:center;color:var(--paper-64)}
.gal-lb-x,.gal-lb-nav{position:absolute;z-index:2;display:grid;place-items:center;
  width:42px;height:42px;border:1px solid var(--paper-24);border-radius:50%;cursor:pointer;
  background:var(--ink-88);color:var(--paper-100);font-size:20px;line-height:1}
.gal-lb-x{top:14px;right:14px}
.gal-lb-nav{top:50%;transform:translateY(-50%)}
.gal-lb-prev{left:14px}
.gal-lb-next{right:14px}
.gal-lb-x:hover,.gal-lb-nav:hover{background:var(--teal);border-color:var(--teal)}

/* ================= contact ================= */
.ct-offices{padding-block:var(--sec-m) var(--sec-s)}
/* align-items:stretch (the default) so all four cards match, and the card is a flex
   column with the phone numbers and Get-directions link pinned to the bottom by
   margin-top:auto. They were 194/172/194/194 before - Sumit: "the height of all the
   cards should be same". */
/* One column per office (D-191 left 3; a fixed 4 left an empty quarter), 2 + a full-width last below 900. */
.ct-office-grid{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:22px;
  padding:0;margin:40px 0 0}
.ct-office{display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:14px;
  background:var(--paper-100);border:1px solid var(--border-faint);
  transition:transform .4s var(--ease-circ),box-shadow .4s var(--ease-circ)}
@media (hover:hover){.ct-office:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--ink-8)}}
.ct-office-name{color:var(--text-strong)}
.ct-office-addr{margin-top:10px;line-height:1.6}
.ct-office-foot{margin-top:auto;padding-top:16px}
.ct-office-contact{margin:0;line-height:1.8;color:var(--text-medium)}
.ct-office-contact a{color:var(--accent);text-decoration:none}
.ct-office-contact a:hover{text-decoration:underline}
.ct-directions{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:9px 15px;border-radius:100vw;border:1px solid var(--border-subtle);
  background:var(--bg);color:var(--text-strong);text-decoration:none;
  font-size:14px;font-weight:500;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.ct-directions svg{color:var(--teal-deep);flex:0 0 16px}
@media (hover:hover){.ct-directions:hover{background:var(--text-strong);color:var(--bg);
  border-color:var(--text-strong)}
  .ct-directions:hover svg{color:var(--bg)}}

.ct-map-sec{padding-block:var(--sec-s) var(--sec-m)}
.ct-map-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--border-faint);
  background:var(--surface-card);line-height:0}
.ct-map{display:block;width:100%;height:440px;border:0}

/* ================= about ================= */
.ab-band{padding-block:var(--sec-s)}
.ab-band+.ab-band{padding-top:0}
.ab-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;
  align-items:center}
.ab-copy .t2-prose{margin-top:18px}
.ab-media{margin:0;border-radius:16px;overflow:hidden;background:var(--surface-card)}
/* 26-Aug: both About photographs are PORTRAIT (558x615 and 800x1122) and a 3/2 box
   threw away 41% and 54% of their height respectively, cutting both sets of heads off.
   A 5/4 box keeps 72% and 57%; the per-image anchor in render_company.AB_POS pulls the
   window to the top where the faces are. Never crop heads — project rule, 24-Aug. */
.ab-media img{display:block;width:100%;height:auto;aspect-ratio:5/4;max-height:560px;
  object-fit:cover;object-position:50% 12%}

/* ---------------- about: closing statement ----------------
   The closing heading is a full sentence — "With respectful, compassionate, caring and
   efficient, value-driven professionals..." — and .h2.measure-5 caps it at 564px, so it
   broke over six short lines in a narrow left column with the whole right half empty
   (Sumit, 26-Aug: "this is turning out to be a paragraph ... maybe you can make that
   line full so that there is no space like that"). It now runs the container's full
   width, and the accreditation logos fill the row beneath it — the client's OWN marks,
   and the paragraph beside them already names the JCI accreditation. */
.ab-close{padding-block:var(--sec-m)}
.ab-close-title{max-width:none;margin:0 0 32px}
.ab-close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;
  align-items:center}
.ab-close-logos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:0;margin:0}
.ab-close-logos li{display:flex;align-items:center;justify-content:center;min-height:84px;
  padding:12px;border-radius:12px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.ab-close-logos img{max-width:100%;max-height:44px;width:auto;height:auto}
@media (max-width:899px){
  .ab-close-grid{grid-template-columns:1fr;gap:36px}
  .ab-close-logos{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:599px){.ab-close-logos{grid-template-columns:repeat(2,1fr)}}

/* ================= admission ================= */
.ad-intro{padding:var(--sec-m) 0 var(--sec-s)}
.ad-intro-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;
  align-items:start}

@media (max-width:1099px){
  .of-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:899px){
  .ab-grid,.ad-intro-grid{grid-template-columns:1fr;gap:28px}
  .ct-office-grid{grid-auto-flow:row;grid-template-columns:repeat(2,1fr)}
  .ct-office-grid>:last-child:nth-child(odd){grid-column:1/-1}
  .ct-map{height:340px}
}
@media (max-width:639px){
  .of-grid{grid-template-columns:1fr}
  .ct-office-grid{grid-template-columns:1fr}
}

/* career hero — FULL WIDTH, 26-Aug (Sumit: "on the top too much text... maybe you want to
   remove the image and spread the text").

   Measured before: a 95-word lede in a 564px column, 260px tall, beside a 550x300 EMPTY
   placeholder box asking BAYTI for a team photograph. Two faults, one cause — a two-column
   hero with nothing in the second column.

   The lede is now flowed into two CSS columns. The <p> is untouched: one element, the
   same 95 words, verbatim. Only column-count is ours, so there is no way for a layout
   change to alter client copy. `orphans/widows` stop a single line stranding at a break. */
.cr-hero-kicker{color:var(--paper-64)}
/* The heading holds the left column and the lede holds the RIGHT one - the column that
   used to be an empty placeholder box. That is the actual fix: the fault was never the
   two-column hero, it was the second column having nothing in it. Setting the copy full
   width instead just moves the hole from the right third to the bottom third. */
.cr-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:64px;align-items:end;margin-top:16px}
.cr-hero-h1{max-width:14ch}
.cr-hero-lede{color:var(--paper-64);max-width:none;padding-bottom:6px}
.cr-hero-actions{margin-top:34px}

/* Three facts, each already published elsewhere on this site: "since 2013" (footer),
   the two offices (footer), and the JCI/DOH/JAWDA strip (homepage). Nothing new is
   claimed — but the LABEL WORDING is ours and is flagged as BL-116 for Omar. */
.cr-hero-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;padding:34px 0 0;margin:52px 0 0;
  border-top:1px solid var(--paper-16)}
.cr-hero-facts li{display:flex;flex-direction:column;gap:6px;color:var(--paper-64)}
.cr-fact-n{font-size:30px;line-height:1;font-weight:600;color:var(--paper-100);
  letter-spacing:-.01em}

/* Job cards — one row, EQUAL height (Sumit: "make these boxes aligned properly").
   Measured before: 185 / 189 / 227px, three different shapes holding 2 / 1 / 3 rows.
   The grid stretches and the card is a column, so the head sits at a common baseline
   and the list grows downward instead of centring. */
.cr-jobs{list-style:none;align-items:stretch}
.cr-jobs-col{display:flex;flex-direction:column;height:100%}
.cr-jobs-idx{color:var(--teal);margin:0 0 10px}
.cr-jobs-list li{display:flex;gap:10px;align-items:baseline}
.cr-job-dot{flex:0 0 5px;width:5px;height:5px;margin-top:1px;border-radius:50%;
  background:var(--teal);opacity:.75}

/* Staff testimonials — the HOMEPAGE carousel, reused. .rev-viewport / .rev-track and the
   [data-testi-*] slider in main.js do the work; only the card skin is career-specific.
   Sumit: "make them scrollable right to left, show three and show arrows". The old
   3-across wrapping grid put 5 cards on 2 rows with a hole, and cost the page 1,050px.
   The flex basis is declared ALONGSIDE .rev-card so "three across" has ONE definition. */
.cr-voice{padding-block:var(--sec-m)}
.cr-voice-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cr-voice-track{align-items:stretch}
.cr-voice-card{position:relative;display:flex;flex-direction:column;
  padding:30px 26px 24px;border-radius:14px;background:var(--paper-100);
  border:1px solid var(--border-faint)}
.cr-voice-mark{position:absolute;top:10px;right:22px;font-size:64px;line-height:1;
  color:var(--teal);opacity:.16;font-family:Georgia,serif;pointer-events:none}
.cr-voice-text{position:relative;margin:0;color:var(--text-medium);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.cr-voice-card.is-open .cr-voice-text{-webkit-line-clamp:unset;overflow:visible}
.cr-voice-by{margin-top:auto;padding-top:18px}
.cr-voice-name{margin:0;color:var(--text-strong)}
.cr-voice-more{margin-top:10px;align-self:flex-start;padding:0;border:0;background:none;
  font:inherit;font-size:13px;color:var(--text-medium);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.cr-voice-more:hover{color:var(--text-strong)}

/* Life at Bayti — ONE photograph at a time (Sumit: "these images are not looking good").
   They are 1600x836 COLLAGES of 6-10 small photos. The old four-across strip drew them at
   329px — a 4.9x downscale that made every sub-photo ~70px wide. Shown one-up at ~900px
   they are near native. Same files, no crop, nothing deleted. */
.cr-life{padding-block:var(--sec-m)}
.cr-life-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cr-life-stage{margin-top:36px;display:flex;flex-direction:column;align-items:center;
  gap:18px}
.cr-life-slides{list-style:none;padding:0;margin:0;width:100%;max-width:960px}
.cr-life-slide{margin:0}
.cr-life-open{display:block;position:relative;width:100%;padding:0;border:0;
  border-radius:16px;overflow:hidden;background:var(--surface-card);cursor:zoom-in;
  line-height:0}
.cr-life-open img{display:block;width:100%;height:auto}
.cr-life-zoom{position:absolute;right:14px;bottom:14px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;line-height:0;
  background:var(--ink-100);color:var(--paper-100);opacity:.82;transition:opacity .2s}
.cr-life-open:hover .cr-life-zoom{opacity:1}
.cr-life-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cr-life-cap{margin:14px 0 0;text-align:center;color:var(--text-medium)}
.cr-life-dots{display:flex;gap:9px}
.cr-life-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink-16);transition:background .2s,transform .2s}
.cr-life-dot.is-on{background:var(--teal);transform:scale(1.25)}
.cr-life-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The /career/ lightbox rules moved to .gal-lb (shared, one per page) on 26-Aug
   when gallery.js was generalised from one carousel to N. */

/* The two real contact channels under the application form. hr@baytihealth.com is the
   client's own address, from their own copy; 800 9955 is the published hotline. */
.cr-form-links{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.cr-form-links li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.cr-form-links a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media (max-width:1099px){
  .cr-hero-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .cr-hero-h1{max-width:var(--measure-6)}
  .cr-hero-lede{max-width:var(--measure-6)}
}
@media (max-width:899px){
  .cr-hero-facts{grid-template-columns:1fr;gap:20px;margin-top:34px;padding-top:26px}
  .cr-voice-head,.cr-life-head{flex-direction:column;align-items:flex-start;gap:18px}
  .gal-lb-nav{width:36px;height:36px}
  .gal-lb-prev{left:8px}
  .gal-lb-next{right:8px}
}

/* The admission form's intro column ran ~330px short of the form beside it and left a
   hole. It is position:sticky, so a photograph below the copy fills the column AND
   travels with it. Added 08:34 26-Aug-2026. */
.cr-form-fig{margin:28px 0 0;border-radius:16px;overflow:hidden;
  background:var(--surface-card)}
.cr-form-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:50% 32%}
/* Marquee on a company page sits between two toned bands; give it its own breathing
   room rather than inheriting the homepage's stat-counter spacing. */
/* 80px top and bottom around a 101px marquee measured as 261px of band for 101px of
   content. The homepage version sits above stat counters and earns that room; here it
   is a divider between two content bands. */
.ad-trust{padding:var(--sec-xs) 0}
.ad-flow-sec{padding-block:var(--sec-m)}
@media (max-width:899px){.cr-form-fig img{aspect-ratio:16/9}}