/* Tiba Medical Specialist: warm ivory, green and brown, with stepping stones.
   All content is visible before JavaScript enhancement. */
:root {
 --ivory:#FBFAF6; --ink:#1E2B24; --green:#2E6B4F; --soft:#E6F0EA;
 --brown:#8A5A3C; --white:#fff; --muted:#536259; --line:#d8dfd7;
 --font:'Tajawal',system-ui,sans-serif; --latin:'Nunito',sans-serif;
 --page:1180px; --pad:20px; --header-h:76px; --bar-h:72px; --section:56px;
}
*,*:before,*:after {box-sizing:border-box}
html {scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body {margin:0;color:var(--ink);background:var(--ivory);font:400 16px/1.65 var(--font)}
html[lang=en] body {font-family:var(--latin);line-height:1.6}
h1,h2,h3,p,figure,ul,ol {margin:0}
ul,ol {padding:0;list-style:none}
h1,h2,h3 {font-weight:700;line-height:1.25}
h1 {font-size:44px} h2 {font-size:28px} h3 {font-size:20px;line-height:1.4}
a {color:inherit;text-decoration:none}
button {font:inherit;cursor:pointer;color:inherit}
img {display:block;max-width:100%;height:auto}
button,a {-webkit-tap-highlight-color:transparent}
:focus-visible {outline:3px solid var(--brown);outline-offset:4px}
::selection {color:var(--white);background:var(--green)}
.container {width:100%;max-width:calc(var(--page) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.section-pad {padding-block:var(--section)}
.icon-sprite {position:absolute;height:0;width:0;overflow:hidden}
.glyph {flex:none;width:21px;height:21px}
.skip-link {position:fixed;z-index:1000;inset-inline-start:-200vw;top:10px;padding:12px 18px;background:var(--green);color:var(--white);border-radius:12px}
.skip-link:focus {inset-inline-start:12px}
.progress-line {position:fixed;inset-inline:0;top:0;height:3px;z-index:101;pointer-events:none}
.progress-line span {display:block;height:100%;background:var(--brown);transform:scaleX(0);transform-origin:left}
html[dir=rtl] .progress-line span {transform-origin:right}
.eyebrow {color:var(--brown);font-size:14px;font-weight:700;line-height:1.6;margin-bottom:12px}
html[lang=en] .eyebrow {letter-spacing:.035em}
.section-head {margin-bottom:26px}
.section-head h2 {max-width:25ch}
.button {min-height:50px;padding:11px 21px;display:inline-flex;gap:12px;align-items:center;justify-content:center;font-size:16px;font-weight:700;border-radius:50px;border:1px solid transparent;text-align:center}
.button-primary {color:var(--white);background:var(--green)}
.button-outline {color:var(--green);border-color:var(--green);background:transparent}
.button .glyph:last-child {transition:transform .2s ease}
.button:hover .glyph:last-child {transform:translateX(3px)}
html[dir=rtl] .button .glyph:last-child {transform:rotate(180deg)}
html[dir=rtl] .button:hover .glyph:last-child {transform:rotate(180deg) translateX(3px)}
.text-link {min-height:48px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px;font-size:15px;color:var(--green);font-weight:700}
/* Solid, focus-safe header; navigation gives way to the contact bar on phones. */
.site-header {position:fixed;z-index:100;inset-inline:0;top:0;background:var(--ivory);border-bottom:1px solid var(--line);transition:transform .22s ease}
.site-header.is-hidden {transform:translateY(-100%)}
.site-header:focus-within {transform:none}
.header-inner {min-height:var(--header-h);display:flex;align-items:center;gap:20px}
.wordmark {display:flex;flex-direction:column;justify-content:center;min-height:48px;line-height:1.3;margin-inline-end:auto}
.wordmark strong {color:var(--green);font-size:21px}
.wordmark>span {color:var(--brown);font:600 14px/1.4 var(--latin);letter-spacing:.02em}
html[lang=en] .wordmark>span {display:none}
.site-header nav {display:none;align-items:center;gap:22px}
.site-header nav a {display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;font-size:15px}
.site-header nav a:hover {color:var(--green);text-decoration:underline;text-underline-offset:7px}
.language-switch {min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-family:var(--font);color:var(--green);border-inline-start:1px solid var(--line);padding-inline:12px 0}
.header-cta {display:none}
/* Content-sized hero: no viewport-height lock or clipping in short windows. */
.hero {padding-top:calc(var(--header-h) + 36px);padding-bottom:20px}
.hero-grid {display:grid;gap:28px;align-items:center}
.hero-content {min-width:0}
.hero-content .eyebrow {max-width:40ch;margin-bottom:14px}
.hero h1 {max-width:11ch;line-height:1.27;letter-spacing:-.035em;color:var(--green)}
html[lang=en] .hero h1 {font-size:46px;max-width:14ch;line-height:1.1;letter-spacing:-.04em}
.hero-line {margin-top:10px;max-width:30ch;color:var(--ink);font-size:19px;line-height:1.6}
.dotline {display:flex;align-items:center;gap:9px;height:28px;margin-block:15px 4px}
.dotline i {display:block;width:10px;height:10px;background:var(--green);border-radius:50%}
.dotline i:nth-child(2n) {background:var(--brown);width:7px;height:7px}
.dotline i:nth-child(3n) {background:#a6b8a8}
.hero-city {font-size:15px;color:var(--muted)}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:4px 22px;margin-block:18px 8px}
.rating-chip {display:inline-flex;align-items:center;min-height:48px;font-size:14px}
.rating-chip>span {border-bottom:1px solid #9eafa2;padding-bottom:3px}
.hero-frame {position:relative;min-width:0}
.hero-frame>img {width:100%;height:230px;max-height:52svh;object-fit:cover;object-position:50% 45%;border-radius:34px 34px 80px 34px}
html[dir=rtl] .hero-frame>img {border-radius:34px 34px 34px 80px}
.hero-frame figcaption {display:flex;justify-content:space-between;gap:10px;padding:13px 4px 0;color:var(--brown);font-size:14px}
.hero-frame figcaption>span:last-child {font:400 14px/1.8 var(--latin);color:var(--muted)}
.hours-badge {margin-top:25px;border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:start;gap:9px;color:var(--muted);font-size:14px}
.hours-badge>i {flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:#718073}
.hours-badge[data-state=open]>i {background:var(--green)}
/* Audience blocks use the same visual rhythm, with different photo compositions. */
.adults {border-top:1px solid var(--line)}
.audience-grid {display:grid;gap:25px;align-items:center}
.audience-copy {min-width:0}
.children-copy {min-width:0}
.conditions {border-top:1px solid var(--line)}
.conditions li {position:relative;padding-block:13px;padding-inline:23px 0;border-bottom:1px solid var(--line)}
.conditions li:before {content:'';position:absolute;inset-inline-start:0;top:23px;width:7px;height:7px;border:1px solid var(--brown);border-radius:50%}
.service-photo {overflow:hidden}
.service-photo img {width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.service-photo:hover img {transform:scale(1.025)}
.adult-photo {height:240px;border-radius:28px 70px 28px 28px}
.adult-photo img {object-position:50% 43%}
.children {position:relative;background:var(--soft)}
.children-grid {display:grid;gap:26px;align-items:center}
.programme-list {counter-reset:programme}
.programme-list li {counter-increment:programme;display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding-block:10px;border-bottom:1px solid #bfcfc3;line-height:1.5}
.programme-list li:before {content:counter(programme,decimal-leading-zero);color:var(--brown);font:600 14px/1.8 var(--latin)}
.children-photos {position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:12px;align-items:start;padding-bottom:10px}
.child-main {height:220px;border-radius:55px 24px 24px 24px}
.child-detail {height:175px;margin-top:45px;border-radius:24px 24px 55px 24px}
.child-main img {object-position:50% 65%}
.play-dot {position:absolute;width:16px;height:16px;border-radius:50%;pointer-events:none}
.play-dot.yellow {background:#E9B949;inset-inline-end:20%;top:10px}
.play-dot.blue {background:#4F8FC0;width:10px;height:10px;inset-inline-start:42%;bottom:0}
/* Four family steps: vertical on phones and a horizontal path on wider screens. */
.visit .section-head {margin-bottom:28px}
.timeline {position:relative;display:grid}
.t-node {position:relative;display:grid;grid-template-columns:42px 1fr;gap:18px;padding-block:0 26px}
.t-node:last-child {padding-bottom:0}
.t-dot {position:relative;z-index:2;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--soft);border:1px solid #a6bcac;color:var(--green);font:700 14px/1 var(--latin)}
.t-node.is-active .t-dot {background:var(--green);color:var(--white)}
.t-seg {position:absolute;inset-inline-start:20px;top:46px;bottom:3px;width:2px;background:repeating-linear-gradient(to bottom,#9eafa2 0 4px,transparent 4px 11px)}
.t-body {padding-top:6px;display:flow-root}
.step-photo {float:inline-end;width:76px;height:64px;object-fit:cover;border-radius:12px;margin-inline-start:12px;margin-bottom:6px}
.t-body p {margin-top:7px;color:var(--muted);font-size:16px;max-width:36ch}
.visit-note {font-size:14px;color:var(--brown);margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
/* One readable static copy until the pause handler has installed successfully. */
.marquee-band {position:relative;background:var(--green);color:var(--white);overflow:hidden;padding:20px}
.marquee-viewport {overflow:hidden}
.marquee-track {display:block}
.marquee-copy {display:block;font-size:18px;line-height:1.8}
.marquee-copy[aria-hidden] {display:none}
.marquee-toggle {display:none;position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);border:1px solid #ffffff80;border-radius:50%;width:48px;height:48px;background:var(--green);color:var(--white);align-items:center;justify-content:center;z-index:2}
.icon-play {display:none}
html.js .marquee-ready {padding-block:21px;padding-inline:0 64px}
html.js .marquee-ready .marquee-track {display:flex;direction:ltr;width:max-content;animation:tb-marquee 28s linear infinite}
html.js .marquee-ready .marquee-copy {display:block;flex:none;padding-inline-end:32px;white-space:nowrap;font-size:22px;line-height:1.6}
html[dir=rtl] .marquee-copy span {direction:rtl;unicode-bidi:isolate;display:inline-block}
html.js .marquee-ready .marquee-toggle {display:flex}
html.js .is-paused .marquee-track {animation-play-state:paused}
.is-paused .icon-pause {display:none}
.is-paused .icon-play {display:block}
@keyframes tb-marquee {to{transform:translateX(-50%)}}
.centre {background:#f2efe7}
.gallery {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
.gallery-item {min-width:0}
.gallery-item img {width:100%;height:170px;object-fit:cover;border-radius:22px}
.gallery-item:nth-child(2n) {padding-top:26px}
.gallery-item:nth-child(3) img {object-position:50% 60%}
.gallery-item figure {overflow:hidden}
.gallery-item figcaption {display:flex;gap:10px;align-items:baseline;margin-top:12px;font-size:14px}
.gallery-item figcaption>span:first-child {font-family:var(--latin);color:var(--brown)}
/* Call panel: service prompts, published hours and a direct telephone action. */
.booking {background:var(--green);color:var(--white)}
.booking-grid {display:grid;gap:28px;align-items:center}
.booking .eyebrow {color:#fff;opacity:.8}
.booking-copy h2 {max-width:18ch}
.booking-copy>p:not(.eyebrow) {margin-top:16px;max-width:38ch}
.booking-phone {font-family:var(--latin);font-size:32px;font-weight:700;letter-spacing:.015em;min-height:48px;display:flex;width:max-content;align-items:center;margin-top:18px}
.booking-note {font-size:14px}
.booking-panel {padding:25px;border-radius:26px;background:var(--ivory);color:var(--ink)}
.booking-panel h3 {font-size:18px}
.call-services {margin-block:14px}
.call-services li {padding-inline-start:18px;position:relative;margin-top:5px}
.call-services li:before {content:'';width:5px;height:5px;border-radius:50%;position:absolute;inset-inline-start:0;top:11px;background:var(--brown)}
.booking-hours {font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px;line-height:1.9}
.location-head {display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:18px}
.location-head h2 {max-width:none}
.location-grid {display:grid;gap:25px}
.location-details {min-width:0}
.location-details address {font-style:normal;margin-bottom:20px;max-width:48ch}
.location-details h3 {font-size:18px}
.hours {margin-top:10px}
.hours li {display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-block:6px;border-bottom:1px solid var(--line);font-size:14px}
.day-group {display:flex;gap:5px;align-items:baseline;flex-wrap:wrap;min-width:60px}
.day-hours {text-align:end}
.today-tag {color:var(--green);font-size:14px;font-weight:700}
.hours .is-today {color:var(--green)}
.amenities {margin-top:18px;font-size:14px;color:var(--muted)}
.amenities li {position:relative;padding-inline-start:19px;margin-top:9px}
.amenities li:before {content:'✓';position:absolute;inset-inline-start:0;color:var(--green)}
.location-media {min-width:0}
.map-wrap {position:relative;height:300px;border-radius:28px;background:var(--soft);overflow:hidden}
.map-wrap iframe {width:100%;height:100%;border:0;pointer-events:none}
.map-wrap iframe:not([inert]) {pointer-events:auto}
.map-toggle {position:absolute;bottom:16px;inset-inline-start:16px;padding:11px 18px;min-height:48px;background:var(--ivory);border:1px solid var(--green);color:var(--green);border-radius:30px;font-size:14px;font-weight:700}
.site-footer {padding-block:30px calc(var(--bar-h) + 26px);background:var(--soft)}
.footer-top {display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:20px}
.footer-name {font-size:17px;font-weight:700;color:var(--green);max-width:42ch}
.footer-phone {display:inline-flex;min-height:48px;align-items:center;font-family:var(--latin);font-size:16px}
.social-links {display:flex;gap:10px}
.social-links a {display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #9fb5a4;border-radius:50%;color:var(--green)}
.preview-note {padding-top:18px;border-top:1px solid #bdcdc0;font-size:14px;color:var(--muted);max-width:95ch}
.contact-bar {position:fixed;z-index:99;bottom:0;inset-inline:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 20px calc(9px + env(safe-area-inset-bottom));background:var(--ivory);border-top:1px solid var(--line)}
.contact-bar a {display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:40px;background:var(--green);color:var(--white);font-size:16px;font-weight:700}
.contact-bar .mobile-directions {background:var(--soft);color:var(--green)}
@media(min-width:760px) {
 :root {--pad:32px}
 .hero-grid {grid-template-columns:1fr 1fr;gap:32px}
 .hero-frame>img {height:350px;max-height:70svh}
 .hero-frame figcaption>span:last-child {display:none}
 .audience-grid {grid-template-columns:1.1fr 1fr;gap:40px}
 .children-grid {grid-template-columns:1.15fr 1fr;gap:40px}
 .children-photos {display:block;padding-inline-end:25px;padding-bottom:90px}
 .child-main {height:320px;width:90%}
 .child-detail {position:absolute;width:49%;height:180px;inset-inline-end:0;bottom:0;border:6px solid var(--soft);margin:0}
 .play-dot.yellow {top:20px;inset-inline-end:1%}
 .play-dot.blue {bottom:40px;inset-inline-start:15%}
 .adult-photo {height:350px}
 .timeline {grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
 .t-node {display:block;padding:0}
 .t-dot {width:52px;height:52px;font-size:15px}
 .t-seg {inset-inline-start:60px;inset-inline-end:-14px;width:auto;height:2px;top:25px;bottom:auto;background:repeating-linear-gradient(to right,#9eafa2 0 4px,transparent 4px 11px)}
 .t-body {padding-top:20px}
 .t-body h3 {font-size:19px}
 .t-body p {font-size:15px}
 .gallery {grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
 .gallery-item img {height:235px}
 .gallery-item:nth-child(2n) {padding-top:36px}
 .booking-grid {grid-template-columns:1fr 1fr;gap:45px}
 .location-grid {grid-template-columns:1fr 1fr;gap:35px}
 .map-wrap {height:100%;min-height:420px}
}
@media(min-width:1024px) {
 :root {--pad:40px;--section:88px;--header-h:84px}
 body {font-size:17px} h2 {font-size:40px} h3 {font-size:22px}
 .site-header nav {display:flex}
 .header-cta {display:inline-flex;font-size:15px;padding-inline:17px}
 .header-cta .glyph:last-child {display:none}
 .wordmark strong {font-size:22px}
 .hero {padding-top:calc(var(--header-h) + 54px);padding-bottom:25px}
 .hero-grid {grid-template-columns:.98fr 1.02fr;gap:55px}
 .hero h1 {font-size:clamp(60px,5vw,72px)}
 html[lang=en] .hero h1 {font-size:clamp(60px,5.2vw,76px)}
 .hero-line {font-size:23px}
 .hero-frame>img {height:410px;border-radius:42px 42px 105px 42px}
 html[dir=rtl] .hero-frame>img {border-radius:42px 42px 42px 105px}
 .hero-frame figcaption>span:last-child {display:block}
 .hero-frame figcaption {padding-top:18px}
 .dotline {margin-top:20px}
 .hours-badge {margin-top:35px;padding-top:18px}
 .adult-photo {height:380px;max-width:560px}
 .conditions li {padding-block:16px}
 .conditions li:before {top:27px}
 .programme-list li {padding-block:11px}
 .child-main {height:385px;max-width:400px}
 .child-detail {height:220px}
 .children-photos {padding-bottom:70px}
 .t-body h3 {font-size:22px}
 .t-body p {font-size:17px}
 .gallery-item img {height:290px}
 .booking-panel {padding:32px}
 .booking-phone {font-size:40px}
 .booking-grid {gap:100px}
 .location-grid {gap:70px}
 .contact-bar {display:none}
 .site-footer {padding-bottom:30px}
}
@media(min-width:1024px) and (max-width:1199px) {
 .site-header nav {gap:12px}
 .header-inner {gap:12px}
 .wordmark strong {font-size:18px}
 .header-cta {padding-inline:12px;font-size:14px}
 html[lang=en] .wordmark strong {max-width:140px}
 .hero-grid {gap:35px}
}
@media(max-width:359px) {
 h1 {font-size:40px}
 html[lang=en] .hero h1 {font-size:42px}
 .hero-actions {gap:4px 15px}
 .button {padding-inline:17px}
 .hero-frame figcaption>span:last-child {display:none}
 .programme-list li {gap:6px;grid-template-columns:23px 1fr}
 .hours li {align-items:start}
 .day-hours {max-width:170px}
 .gallery-item img {height:145px}
 .gallery-item figcaption {gap:6px}
 .booking-panel {padding:21px}
}
/* Compact family layout keeps the complete clinical copy within the phone height budget. */
@media(max-width:759px) {
 :root {--section:38px}
 .section-head {margin-bottom:18px}
 .eyebrow {margin-bottom:8px}
 .hero {padding-top:calc(var(--header-h) + 24px)}
 .hero-grid {gap:18px}
 .hero-frame>img {height:190px}
 .hero-frame figcaption {padding-top:10px}
 .hero-frame figcaption>span:last-child {display:none}
 .hero-line {font-size:18px}
 .dotline {margin-block:10px 0}
 .hero-actions {margin-block:12px 4px}
 .hours-badge {margin-top:18px;padding-top:13px}
 .conditions li {padding-block:10px}
 .conditions li:before {top:20px}
 .audience-grid {gap:20px}
 .adult-photo {height:190px}
 .children-grid {gap:20px}
 .programme-list li {padding-block:8px}
 .child-main {height:180px}
 .child-detail {height:145px;margin-top:35px}
 .t-node {padding-bottom:19px;gap:13px}
 .t-body p {margin-top:5px;line-height:1.5}
 .visit-note {margin-top:20px;padding-top:12px}
 .gallery {gap:14px}
 .gallery-item img {height:145px}
 .gallery-item:nth-child(2n) {padding-top:15px}
 .gallery-item figcaption {margin-top:8px}
 .booking-grid {gap:20px}
 .booking-panel {padding:21px}
 .booking-copy>p:not(.eyebrow) {margin-top:10px}
 .booking-phone {margin-top:10px}
 .map-wrap {height:230px}
 .location-grid {gap:20px}
 .site-footer {padding-top:24px}
 .wordmark>span {font-size:14px}
}
@media(max-width:359px) {
 :root {--section:24px}
 .hero-frame>img {height:170px}
 .adult-photo {height:160px}
 .child-main {height:150px}
 .child-detail {height:125px;margin-top:25px}
 .gallery-item img {height:120px}
 .map-wrap {height:180px}
 .programme-list li {padding-block:6px}
 .conditions li {padding-block:8px}
 .conditions li:before {top:18px}
 .t-node {padding-bottom:14px}
}
@media(prefers-reduced-motion:reduce) {
 *,*:before,*:after {animation:none!important;transition:none!important}
 .marquee-band {padding:20px!important}
 .marquee-track {display:block!important;width:auto!important;transform:none!important}
 .marquee-copy {white-space:normal!important;font-size:18px!important}
 .marquee-copy[aria-hidden],.marquee-toggle {display:none!important}
 .site-header.is-hidden {transform:none}
 .hero-image,.service-photo img,.gallery-item img {transform:none!important}
}

.centre-motto { margin-top: 10px; font-size: 17px; font-weight: 500; color: var(--brown, #8A5A3C); }