/* ===== Noon design system v3 — noon-core/assets/noon-design.css =============
   Layout follows the Medicare Clinic demo. Every measurement below was taken
   from the live demo with getComputedStyle; the CSS itself is written from
   scratch for Noon. No Medicare CSS, HTML or images are used.

   Measured and applied:
     container 1160 · section 80/80 · heading 60px/1.15 w700
     strip 4 boxes, min-height 253, padding 40/30, overlapping the hero by 20
     card: photo bleeds over the column padding, 80px circle pulled up 40,
           kicker, title 25px/28.75 w700, text centred
     working-hours panel on a rgba(0,0,0,.07) wash, 40px top and bottom
     buttons 48px, radius 3px

   Two deliberate departures from the reference, both forced:
     - body 17px, not 13px: 13px is not readable in Arabic
     - letter-spacing 0, not 2px: tracking breaks Arabic letter joining
     - the demo's teal ramp fails WCAG on white text (2.14:1 to 3.33:1).
       The ramp here is built from Noon's own teal and clears 4.5:1 at every
       step: 4.70 / 5.51 / 6.58 / 7.6.
   ========================================================================== */
:root{
 --nn-navy:#1B2A4A;--nn-navy-2:#22355C;--nn-navy-3:#13203A;--nn-ink-dark:#1D1F27;
 --nn-gold:#C9A35E;--nn-gold-2:#E9D9B6;--nn-gold-l:#F7F0E1;
 --nn-turq:#39B8A5;--nn-teal:#087F73;
 /* accessible ramp for the strip — white text passes 4.5:1 on all four */
 --nn-t1:#0C8275;--nn-t2:#09766A;--nn-t3:#06695F;--nn-t4:#045C53;
 --nn-beige:#F6F1E7;--nn-mint:#EAF7F3;--nn-ink:#222222;--nn-text:#444444;
 --nn-muted:#6B7385;--nn-soft:rgba(68,68,68,.45);
 --nn-line:#E5E5E5;--nn-gray:#F5F5F5;
 --nn-r:3px;--nn-r-l:4px;--nn-r-btn:3px;
 --nn-shadow:0 1px 3px rgba(19,32,58,.08),0 10px 30px rgba(19,32,58,.07);
 --nn-shadow-h:0 2px 6px rgba(19,32,58,.10),0 22px 44px rgba(19,32,58,.12);
 --nn-sec:80px;--nn-w:1160px;
 --nn-font:"Cairo",system-ui,"Segoe UI",sans-serif;
}
@media (max-width:1024px){:root{--nn-sec:64px}}
@media (max-width:767px){:root{--nn-sec:52px}}

body{font-family:var(--nn-font);font-size:17px;line-height:1.8;color:var(--nn-text)}
.entry-content p{color:inherit}
/* Visible focus — the reference has none; a medical site needs it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
 outline:3px solid var(--nn-teal);outline-offset:2px}

/* ===================== HEADER ===================== */
.site-top-header-wrap .site-header-row-container-inner{background:#fff!important;border-bottom:1px solid var(--nn-line)}
.site-main-header-wrap .site-header-row-container-inner{background:#fff;border-bottom:1px solid var(--nn-line)}
.site-top-header-wrap .header-html{margin:0}
/* three icon items: 60px icon cell, 14px title over a 13px muted line */
.nn-hinfo{display:flex;gap:28px;align-items:center}
.nn-hi{display:flex;gap:5px;align-items:center;line-height:1.3}
.nn-hi__ic{width:60px;height:60px;flex:0 0 60px;display:inline-flex;align-items:center;justify-content:center}
.nn-hi__ic:before{content:"";position:absolute;width:44px;height:44px;border:1px solid var(--nn-teal);border-radius:50%}
.nn-hi__ic{position:relative}
.nn-hi__ic svg{width:20px;height:20px;stroke:var(--nn-teal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;position:relative}
.nn-hi b{display:block;color:var(--nn-text);font-size:14px;font-weight:600}
.nn-hi small,.nn-hi small p{display:block;color:var(--nn-soft)!important;font-size:13px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;font-weight:400;line-height:1.3!important}
.nn-hi small .noon-dot{display:none}
.nn-hi a{color:var(--nn-teal)!important;font-weight:600;text-decoration:none!important}
.header-navigation .header-menu-container>ul>li>a{font-size:14.5px;font-weight:600;color:var(--nn-ink)}
.header-navigation .header-menu-container>ul>li.current-menu-item>a,
.header-navigation .header-menu-container>ul>li>a:hover{color:var(--nn-teal)}
.header-navigation .header-menu-container>ul>li.current-menu-item>a{box-shadow:inset 0 -3px 0 var(--nn-teal)}
.header-navigation .header-menu-container>ul>li.noon-menu-cta>a{box-shadow:none}
.header-mobile-button-wrap a,.mobile-header-button-wrap a{min-height:48px;display:inline-flex;align-items:center}

/* ===================== SECTIONS ===================== */
.nn-sec{padding:var(--nn-sec) 0!important;position:relative}
.nn-sec>.kt-row-column-wrap,.nn-sec .kb-theme-content-width{max-width:var(--nn-w)!important}
.nn-sec--semi{padding-top:40px!important}
.nn-sec--gray{background:var(--nn-gray)}
.nn-sec--beige{background:var(--nn-beige)}
.nn-sec--mint{background:var(--nn-mint)}
.nn-sec--dark{background:var(--nn-ink-dark);color:#B9BDC6}
/* Painted fallback only while the row carries no background photo; once
   Kadence renders one, its own overlay takes over. */
.nn-sec--photo:not(.kt-row-has-bg){background:linear-gradient(115deg,rgba(19,32,58,.96) 0%,rgba(27,42,74,.90) 45%,rgba(8,127,115,.78) 100%),repeating-linear-gradient(135deg,#2a3c62 0 2px,transparent 2px 22px),var(--nn-navy)}
/* a section with a real photo keeps light text over the overlay */
.nn-team.kt-row-has-bg{color:#B9BDC6}
.nn-team.kt-row-has-bg .nn-h,.nn-team.kt-row-has-bg h2{color:#fff!important}
.nn-team.kt-row-has-bg .nn-sup{color:var(--nn-turq)!important}
.nn-team.kt-row-has-bg .nn-lead{color:#B9BDC6!important}
.nn-team.kt-row-has-bg .noon-card{background:rgba(255,255,255,.96)}
/* the placeholder label is gone: these rows now take a real photo */

/* kicker + two-tone display heading */
.nn-sup{font-size:16px!important;font-weight:600!important;color:var(--nn-teal)!important;margin:0 0 10px!important;line-height:1.5!important}
.nn-sec--dark .nn-sup,.nn-sec--photo .nn-sup{color:var(--nn-turq)!important}
.nn-h,.nn-display{font-weight:700!important;color:var(--nn-ink)!important;line-height:1.15!important;margin:0 0 20px!important;letter-spacing:0!important;font-family:var(--nn-font)!important}
.nn-h{font-size:clamp(32px,4.6vw,60px)!important}
.nn-display{font-size:clamp(34px,5vw,60px)!important}
.nn-sec--dark .nn-h,.nn-sec--photo .nn-h,.nn-sec--dark .nn-display{color:#fff!important}
/* the reference's signature: half the heading in the accent colour */
.nn-accent{color:var(--nn-teal)!important}
.nn-sec--dark .nn-accent,.nn-sec--photo .nn-accent,.nn-hero .nn-accent{color:var(--nn-turq)!important}
.nn-lead{font-size:16px!important;line-height:1.85!important;color:var(--nn-text)!important;margin:0 0 28px!important;max-width:620px}
.nn-sec--dark .nn-lead,.nn-sec--photo .nn-lead{color:#B9BDC6!important}
.nn-center{text-align:center}.nn-center .nn-lead{margin-inline:auto!important}
.nn-head{margin-bottom:38px}
.nn-small{font-size:13.5px!important;color:var(--nn-soft)!important}

/* ===================== IMAGE PLACEHOLDERS ===================== */
.nn-ph{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;margin:0!important;padding:20px;border-radius:0;background:linear-gradient(160deg,#E7EDF1 0%,#D5DEE6 100%);color:#8E9BA6!important;font-size:12.5px!important;font-weight:500;line-height:1.7!important;overflow:hidden}
.nn-ph:before{content:"";width:44px;height:44px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9BA6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h3l2-3h8l2 3h3v13H3z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/21px no-repeat}
.nn-ph--43{aspect-ratio:4/3}.nn-ph--11{aspect-ratio:1/1}
/* 4:5 left a tall empty column next to short text; 3:4 with a ceiling keeps
   the image substantial without dragging the section open */
.nn-ph--tall{aspect-ratio:3/4;max-height:520px}
.nn-ph--wide{aspect-ratio:4/3}
.nn-ph--frame{box-shadow:var(--nn-shadow)}

/* ===================== HERO =====================
   Styled on the slider itself, not on the .nn-hero wrapper, so the current
   home page and the redesign draft both pick it up.
   Depth comes from two radial lights over the base gradient — with no
   photography available, a flat colour block is what makes a hero look
   unfinished. */
.nn-hero{margin:0!important}
.noon-slider{max-width:none!important;border-radius:0!important;margin:0!important}
/* the slides are absolutely positioned inside the track, so the height has to
   go on the track — setting it on the slide collapses the slider */
.noon-slider__track{min-height:620px}
.noon-slide{overflow:hidden;
 padding-inline:max(24px,calc((100% - var(--nn-w))/2))!important;padding-block:96px!important;
 background:
  radial-gradient(1100px 620px at 78% 18%,rgba(18,140,126,.40),transparent 62%),
  radial-gradient(820px 560px at 12% 88%,rgba(201,163,94,.14),transparent 66%),
  linear-gradient(145deg,#0E1A33 0%,#1B2A4A 46%,#1E3353 100%)!important}
/* a fine architectural grid, masked so it fades out — gives the flat area texture */
.noon-slide:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
 background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
 background-size:78px 78px;
 -webkit-mask-image:radial-gradient(circle at 72% 38%,#000,transparent 76%);
         mask-image:radial-gradient(circle at 72% 38%,#000,transparent 76%)}
/* Photo slides: the image sits under a navy scrim that stays dark on the
   text side and clears toward the far edge, so the photo reads while the
   headline keeps its contrast whatever the picture turns out to be. */
.noon-slide__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.noon-slide__photo{width:100%;height:100%;object-fit:cover;object-position:center}
.noon-slide.has-photo:after{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(100deg,rgba(12,22,39,.94) 0%,rgba(14,26,51,.82) 42%,rgba(14,26,51,.30) 100%)}
.noon-slide.has-photo:before{opacity:.25}
.noon-slide.has-photo .noon-slide__icon{display:none!important}
/* was 620px inside a 1160 container, so nearly half the hero sat empty */
.noon-slide__text{position:relative;z-index:2;max-width:760px}
.noon-slide__title{font-size:clamp(36px,5.2vw,64px)!important;font-weight:800!important;
 line-height:1.12!important;color:#fff!important;letter-spacing:0!important;margin:0 0 18px!important}
.noon-slide__desc{font-size:18px!important;line-height:1.85!important;color:#BBC7DA!important;max-width:640px}
.noon-kicker{display:inline-flex;align-items:center;gap:12px;color:var(--nn-gold)!important;
 font-size:15px!important;font-weight:700;margin-bottom:16px}
.noon-kicker:before{content:"";width:30px;height:1px;background:var(--nn-gold)}
.noon-slide__actions{margin-top:34px!important}
/* the oversized decorative glyph reads as template filler; keep it as a faint
   watermark behind the text instead of a competing element */
.noon-slide__icon{position:absolute!important;inset-inline-start:6%;top:50%;transform:translateY(-50%);
 opacity:.07!important;z-index:1;pointer-events:none}
.noon-slide__icon svg{width:min(34vw,420px);height:auto}
.noon-slide__note{position:relative;z-index:2;color:#BBC7DA!important}
/* slider controls */
.noon-slider__controls{position:relative;z-index:3}
.noon-slider__prev,.noon-slider__next,.noon-slider__toggle{background:rgba(255,255,255,.08)!important;
 border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;border-radius:50%!important;
 transition:background .25s,border-color .25s}
.noon-slider__prev:hover,.noon-slider__next:hover,.noon-slider__toggle:hover{
 background:var(--nn-teal)!important;border-color:var(--nn-teal)!important}
@media (max-width:1024px){.noon-slide__icon{opacity:.05!important}}

/* ===================== STRIP — 4 boxes over the hero ===================== */
.nn-strip{position:relative;z-index:3;margin-top:-20px!important}
.nn-strip>.kt-row-column-wrap{max-width:var(--nn-w)!important;row-gap:0!important;column-gap:0!important}
/* nn-sbox sits on the Kadence column itself, so .kt-inside-inner-col is its
   direct child. Each box carries its own ramp step rather than relying on
   nth-child, which breaks if the column count changes. */
.nn-strip .nn-sbox>.kt-inside-inner-col{min-height:253px;padding:40px 30px!important;height:100%;display:flex;flex-direction:column}
.nn-strip .nn-sbox--1>.kt-inside-inner-col{background:var(--nn-t1)}
.nn-strip .nn-sbox--2>.kt-inside-inner-col{background:var(--nn-t2)}
.nn-strip .nn-sbox--3>.kt-inside-inner-col{background:var(--nn-t3)}
.nn-strip .nn-sbox--4>.kt-inside-inner-col{background:var(--nn-t4)}
/* Photo at the head of each strip box. It bleeds to the box edges and the
   colour sits under it, so the band still reads as one unit. */
.nn-strip .nn-sbox>.kt-inside-inner-col{padding:0 0 30px!important}
.nn-sbox__photo{margin:0 0 22px!important}
.nn-sbox__photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* padding, not margin: the strip h3/p rules zero their margins with !important,
   which left the text touching the box edge */
.nn-strip .nn-sbox>.kt-inside-inner-col>*:not(.nn-sbox__photo){padding-inline:30px!important}
.nn-strip h3,.nn-strip .nn-pt-title{color:#fff!important;font-size:18px!important;font-weight:600!important;margin:0 0 14px!important;line-height:1.4!important}
.nn-strip p{color:rgba(255,255,255,.92)!important;font-size:14.5px!important;line-height:1.7!important;margin:0!important}
.nn-strip a:not(.kb-button){color:#fff!important}
/* the button block is the flex child, so the auto margin belongs on it */
.nn-strip .wp-block-kadence-advancedbtn{margin-top:auto;padding-top:20px}
/* the reference uses 42px here; raised to 44 to meet the tap-target floor.
   display is set here too so min-height holds without relying on Kadence's
   own button CSS being present. */
.nn-strip .kb-button{display:inline-flex!important;align-items:center;justify-content:center;
 background:transparent!important;border:1px solid rgba(255,255,255,.6)!important;color:#fff!important;
 font-size:13px!important;min-height:44px!important;padding:0 22px!important}
.nn-strip .kb-button:hover{background:#fff!important;color:var(--nn-t4)!important;border-color:#fff!important}
@media (max-width:1024px){.nn-strip{margin-top:0!important}}

/* ===================== BUTTONS — 48px, 3px radius ===================== */
.nn-btns{margin-top:28px!important;gap:12px}
.nn-btn.kb-button,.nn-btn .kb-button{display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;border-radius:var(--nn-r-btn)!important;font-weight:700!important;font-size:14.5px!important;line-height:1.35!important;padding:12px 30px!important;background:var(--nn-teal)!important;color:#fff!important;border:2px solid var(--nn-teal)!important;transition:all .2s ease}
.nn-btn.kb-button:hover{background:#01807E!important;border-color:#01807E!important}
.nn-btn--ghost.kb-button,.nn-btn--ghost .kb-button{background:transparent!important;color:var(--nn-ink)!important;border-color:var(--nn-line)!important}
.nn-btn--ghost.kb-button:hover{background:var(--nn-ink)!important;color:#fff!important;border-color:var(--nn-ink)!important}
.nn-sec--dark .nn-btn--ghost.kb-button,.nn-sec--photo .nn-btn--ghost.kb-button{color:#fff!important;border-color:rgba(255,255,255,.5)!important}
.nn-btn--gold.kb-button{background:var(--nn-gold)!important;border-color:var(--nn-gold)!important;color:var(--nn-navy)!important}
.noon-btn{min-height:48px;border-radius:var(--nn-r-btn)!important;font-weight:700}
.nn-link{font-weight:700;color:var(--nn-teal)!important;text-decoration:none!important;display:inline-flex;align-items:center;min-height:44px}

/* ===================== SPLIT / POINTS ===================== */
.nn-split .kt-row-column-wrap{align-items:center}
.nn-split .nn-ph{align-self:stretch;height:100%;max-height:520px}
.nn-point>.kt-inside-inner-col{border-top:1px solid var(--nn-line);padding:18px 0!important}
.nn-point h3,.nn-pt-title{font-size:18px!important;font-weight:700!important;color:var(--nn-ink)!important;line-height:1.35!important;margin:4px 0 4px!important}
.nn-sec--dark .nn-pt-title,.nn-sec--photo .nn-pt-title{color:#fff!important}
.nn-tag{display:inline-block!important;font-size:13px!important;font-weight:700;line-height:1.5!important;border-radius:999px;padding:4px 14px;margin:0!important;background:#EEF1F4;color:var(--nn-ink)!important}
.nn-tag--gold{background:var(--nn-gold-l);color:#7A5E28!important}
.nn-tag--teal{background:var(--nn-mint);color:var(--nn-teal)!important}
.nn-confirm{font-size:13.5px!important;color:var(--nn-soft)!important;margin:12px 0 0!important;line-height:1.7!important}
.nn-confirm:before{content:"ⓘ ";color:var(--nn-teal)}
/* --cta is a dark box but not a dark section, so it needs the light note
   colour too — without this the note sits dark-on-dark. */
.nn-sec--dark .nn-confirm,.nn-sec--photo .nn-confirm,.nn-hours .nn-confirm,
.nn-callout--cta .nn-confirm{color:#9AA0AC!important}
.nn-callout--cta .nn-confirm:before{color:var(--nn-turq)}

/* ===================== SERVICE ICON LIST (dark section) ===================== */
.nn-svcgrid .kt-row-column-wrap{row-gap:40px!important}
.nn-svcitem{margin-bottom:34px}
.nn-svcitem .kt-blocks-info-box-link-wrap{background:transparent!important;border:0!important;padding:0!important;display:flex!important;gap:20px;align-items:flex-start;text-align:start!important}
.nn-svcitem .kt-blocks-info-box-media-container{margin:0!important;flex:0 0 auto}
.nn-svcitem .kt-blocks-info-box-media{width:80px;height:80px;display:flex!important;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5)!important;border-radius:50%!important;background:transparent!important;padding:0!important;margin:0!important;transition:all .25s ease}
.nn-svcitem .kt-blocks-info-box-media svg{stroke:#fff;color:#fff}
.nn-svcitem .kt-blocks-info-box-link-wrap:hover .kt-blocks-info-box-media{background:var(--nn-t1)!important;border-color:var(--nn-t1)!important}
.nn-svcitem .kt-blocks-info-box-title{color:#fff!important;font-size:21px!important;font-weight:700!important;line-height:1.3!important;margin:4px 0 6px!important}
.nn-svcitem .kt-blocks-info-box-text{color:#B9BDC6!important;font-size:15px!important;line-height:1.75!important}
.nn-svcitem .kt-blocks-info-box-learnmore{background:transparent!important;border:0!important;color:var(--nn-turq)!important;padding:0!important;margin:8px 0 0!important;font-weight:700;min-height:40px;display:inline-flex!important;align-items:center}

/* ===================== WORKING HOURS ===================== */
/* dark variant (inside .nn-sec--dark) */
.nn-hours>.kt-inside-inner-col{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--nn-r-l);padding:34px 30px!important}
.nn-hours h3{color:#fff!important;font-size:25px!important;font-weight:700!important;line-height:1.15!important;margin:0 0 11px!important}
.nn-hours .noon-hours{background:none!important;border:0!important;border-block:1px solid rgba(255,255,255,.16)!important;border-radius:0!important;box-shadow:none!important;padding:16px 0!important;margin:18px 0!important;color:#fff!important;font-size:16px!important;font-weight:600}
.nn-hours .nn-small{color:#9AA0AC!important}
/* light panel variant — the reference's fourth column, 7% black wash */
.nn-hours--panel>.kt-inside-inner-col{background:rgba(0,0,0,.07)!important;border:0!important;border-radius:0!important;padding:40px 25px!important;text-align:center}
.nn-hours--panel h3{color:var(--nn-ink)!important}
.nn-hours--panel .noon-hours{color:var(--nn-text)!important;border-block-color:rgba(0,0,0,.1)!important;justify-content:center}
.nn-hours--panel .nn-small,.nn-hours--panel .nn-confirm{color:var(--nn-soft)!important}

/* ===================== PHOTO CARDS — the reference anatomy ===================== */
.nn-cards .kt-row-column-wrap{row-gap:30px!important}
.nn-card>.kt-inside-inner-col{background:#fff;border-radius:0;height:100%;display:flex;flex-direction:column;text-align:center;transition:box-shadow .3s ease}
.nn-card>.kt-inside-inner-col:hover{box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.nn-card .nn-ph{border-radius:0}
.nn-card .wp-block-kadence-infobox{flex:1}
.nn-card .kt-blocks-info-box-link-wrap{background:transparent!important;border:0!important;padding:0 20px 26px!important;text-align:center!important}
/* 80px circle pulled up exactly half, so it straddles the photo edge */
.nn-card .kt-blocks-info-box-media-container{margin:-40px auto 8px!important;position:relative;z-index:10;display:flex;justify-content:center}
.nn-card .kt-blocks-info-box-media{width:80px;height:80px;display:inline-flex!important;align-items:center;justify-content:center;background:var(--nn-t1)!important;border:0!important;border-radius:50%!important;padding:0!important;margin:0!important;transition:background .3s}
.nn-card .kt-blocks-info-box-media svg{stroke:#fff;color:#fff;width:38px;height:38px}
.nn-card>.kt-inside-inner-col:hover .kt-blocks-info-box-media{background:var(--nn-t4)!important}
.nn-card__kicker,.nn-card .kt-blocks-info-box-subtitle{display:block;font-size:14.5px!important;font-weight:500;color:var(--nn-soft)!important;margin:5px 0 6px!important}
.nn-card .kt-blocks-info-box-title{color:var(--nn-ink)!important;font-size:25px!important;font-weight:700!important;line-height:1.15!important;margin:0 0 11px!important}
.nn-card .kt-blocks-info-box-text{color:var(--nn-text)!important;font-size:15px!important;line-height:1.75!important}
.nn-card .kt-blocks-info-box-learnmore{background:transparent!important;border:0!important;color:var(--nn-teal)!important;padding:0!important;margin:16px 0 0!important;font-weight:700;font-size:13.5px;min-height:40px;display:inline-flex!important;align-items:center}

/* ===================== TEAM / DOCTOR CARDS ===================== */
.nn-team .noon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px}
.nn-team .noon-card--doctor{display:flex!important;flex-direction:column;background:#fff;border:1px solid var(--nn-line);border-radius:0!important;overflow:hidden;padding:0!important;text-decoration:none!important;max-width:380px;transition:box-shadow .3s}
.nn-team .noon-card--doctor:hover{box-shadow:0 18px 40px -22px rgba(0,0,0,.35)!important}
.nn-team .noon-card--doctor .noon-card__img{width:100%!important;height:auto!important;aspect-ratio:1/1;border-radius:0!important;margin:0!important}
.nn-team .noon-card--doctor .noon-card__img--ph{background:linear-gradient(160deg,#E7EDF1,#D5DEE6)!important}
.nn-team .noon-card__body{padding:22px 24px 26px!important;display:block;text-align:center}
.nn-team .noon-card__title{font-size:21px!important;display:block;margin:10px 0 4px}
.nn-team .noon-card__meta{color:var(--nn-teal)!important;font-weight:600}
.nn-team .noon-search{max-width:520px;margin:0 auto 30px;display:block}
.nn-team .noon-search__input{min-height:52px;border-radius:var(--nn-r)!important;border:1px solid var(--nn-line)!important;background:#fff!important;padding-inline:18px!important}
.nn-team .noon-note{border-radius:var(--nn-r)!important}

/* ===================== CONTACT ===================== */
.nn-contact .nn-cbox>.kt-inside-inner-col{border:1px solid rgba(255,255,255,.16);border-radius:var(--nn-r-l);padding:30px 28px!important;height:100%}
.nn-contact h3{color:#fff!important;font-size:21px!important;font-weight:700!important;margin:14px 0 8px!important}
.nn-contact p{color:#B9BDC6}
.nn-cic{width:50px;height:50px;border:1px solid var(--nn-turq);border-radius:50%;display:inline-flex!important;align-items:center;justify-content:center;margin:0!important}
.nn-cic svg{width:22px;height:22px;stroke:var(--nn-turq);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nn-contact .noon-btn--disabled{background:rgba(255,255,255,.08)!important;color:#9AA0AC!important;border-color:transparent!important}
.nn-cbox .noon-btn{width:100%;justify-content:center;font-size:14px;padding-inline:14px}

/* ===================== POSTS ===================== */
.noon-grid--posts{gap:30px!important}
.noon-grid--posts .noon-card{display:flex!important;flex-direction:column;padding:0!important;background:#fff;border:1px solid var(--nn-line)}
.noon-grid--posts .noon-card__img{aspect-ratio:1/1;width:100%!important;height:auto!important;border-radius:0!important}
.noon-grid--posts .noon-card__body{padding:26px 24px 30px!important}
.noon-empty{background:#fff;border:1px dashed #CBD3DF!important;border-radius:var(--nn-r)!important;padding:34px!important;text-align:center;color:var(--nn-soft)}
.noon-card{border-radius:0!important}
.noon-card__title{color:var(--nn-ink)!important;font-weight:700!important;font-size:21px!important;line-height:1.3!important}

/* Kadence's own mobile menu button is 31px; on a site whose only conversion
   is a tap, the controls have to clear 44. */
.menu-toggle-open,.menu-toggle-close,.mobile-toggle-open-container .menu-toggle-open{
 min-width:44px!important;min-height:44px!important;display:inline-flex!important;
 align-items:center;justify-content:center}
.site-middle-footer-wrap li a,.site-bottom-footer-wrap a{min-height:44px;display:inline-flex;align-items:center}

/* ===================== TICKER AND SLIDER CONTROLS =====================
   noon.css sizes these at 28–32px, below the 44px tap-target floor. */
.noon-ticker__toggle{width:44px!important;height:44px!important;font-size:14px!important}
.noon-slider__dots button{width:44px!important;height:44px!important;display:flex!important;
 align-items:center;justify-content:center}
.noon-slider__dots button span{width:28px}
.noon-slider__prev,.noon-slider__next,.noon-slider__toggle{min-width:44px;min-height:44px;
 display:inline-flex!important;align-items:center;justify-content:center}

/* ===================== FAQ ACCORDION ===================== */
/* native <details>, so it opens with the keyboard and with find-in-page */
.nn-faq{background:#fff;border:1px solid var(--nn-line);margin:0 0 12px;max-width:860px;margin-inline:auto}
.nn-faq>summary{cursor:pointer;list-style:none;padding:20px 24px;font-size:18px;font-weight:700;
 color:var(--nn-ink);display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.nn-faq>summary::-webkit-details-marker{display:none}
.nn-faq>summary:after{content:"";width:11px;height:11px;flex:0 0 11px;border-inline-end:2px solid var(--nn-teal);
 border-bottom:2px solid var(--nn-teal);transform:rotate(45deg);transition:transform .25s ease;margin-top:-4px}
.nn-faq[open]>summary:after{transform:rotate(-135deg);margin-top:4px}
.nn-faq[open]>summary{border-bottom:1px solid var(--nn-line)}
.nn-faq>summary:hover{color:var(--nn-teal)}
.nn-faq p{margin:0;padding:18px 24px 22px;font-size:16px;line-height:1.85;color:var(--nn-text)}

/* ===================== PARTNERS ===================== */
.nn-panel>.kt-inside-inner-col{background:#fff;border:1px solid var(--nn-line);border-radius:0;padding:36px 34px!important;height:100%}
.nn-panel h3{font-size:25px!important;font-weight:700!important;color:var(--nn-ink)!important;line-height:1.15!important;margin:12px 0 14px!important}

/* ===================== FOOTER ===================== */
.site-middle-footer-wrap .site-footer-row-container-inner{background:var(--nn-ink-dark)!important;color:#9AA0AC;padding-block:24px}
.site-middle-footer-wrap .widget-title,.site-middle-footer-wrap h2,.site-middle-footer-wrap h3{color:#fff!important;font-size:17px!important;font-weight:700!important;margin-bottom:18px!important}
.site-middle-footer-wrap h3:after{content:"";display:block;width:34px;height:2px;background:var(--nn-turq);margin-top:10px}
.site-middle-footer-wrap a{color:#B9BDC6!important;text-decoration:none!important}
.site-middle-footer-wrap a:hover{color:var(--nn-turq)!important}
.site-middle-footer-wrap ul{list-style:none;padding:0;margin:0}
.site-middle-footer-wrap li a{display:inline-block;padding:5px 0}
.site-middle-footer-wrap .noon-hours{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important}
.site-bottom-footer-wrap .site-footer-row-container-inner{background:#15171E!important;color:#7A808C;font-size:13.5px}
.nn-foot-note{font-size:13px!important;color:#7A808C!important}

/* ===================== INNER PAGES ===================== */
.single-post .entry-title,.single-noon_doctor .entry-title{color:var(--nn-ink);font-weight:700}
.noon-profile{display:grid;grid-template-columns:220px 1fr;gap:10px 28px;align-items:start;background:#fff;border:1px solid var(--nn-line);border-radius:0;padding:26px;margin-bottom:30px}
.noon-profile>*{grid-column:2;margin:0!important}
.noon-profile .noon-badge,.noon-profile .noon-btn{justify-self:start}
.noon-profile::before{content:"[صورة الطبيب المعتمدة]";grid-column:1;grid-row:1 / span 8;display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:1/1;background:linear-gradient(160deg,#E7EDF1,#D5DEE6);color:#8E9BA6;font-size:12.5px;font-weight:500;padding:10px}
.has-post-thumbnail .noon-profile{grid-template-columns:1fr}
.has-post-thumbnail .noon-profile>*{grid-column:1}
.has-post-thumbnail .noon-profile::before{display:none}
.nn-h--sm{font-size:25px!important;font-weight:700!important;color:var(--nn-ink)!important;line-height:1.15!important;margin:34px 0 12px!important}
.entry-content .nn-callout{margin:30px 0!important}
.nn-callout>.kt-row-column-wrap{padding:0!important}
.nn-callout .kt-inside-inner-col{background:var(--nn-mint);border-inline-start:4px solid var(--nn-turq);border-radius:0;padding:24px 26px 12px!important}
.nn-callout h2,.nn-callout h3{margin-top:0!important;color:var(--nn-ink)}
.nn-callout--cta .kt-inside-inner-col{background:var(--nn-ink-dark);border-inline-start-color:var(--nn-turq);color:#fff;padding-bottom:24px!important}
.nn-callout--cta .nn-h3,.nn-callout--cta h3{color:#fff!important}
.nn-callout--cta p{color:#B9BDC6}
.nn-h3{font-size:21px!important;font-weight:700!important;color:var(--nn-ink)!important}
.nn-toc .kb-table-of-content-wrap{background:var(--nn-gray)!important;border:0!important;border-radius:0!important}

/* ===================== ARTICLE AND DOCTOR COMPONENTS =====================
   These are emitted by the plugin (noon.css) and by the article template.
   noon.css styles them at v1: 10–12px radii and the old palette. v3 loads
   after it, so these rules bring them onto the same system as everything
   else — square corners, the ink/teal palette, the v3 type sizes. */
/* the short answer that opens a medical article (SEO/GEO) */
.noon-answer{background:var(--nn-mint)!important;border:0!important;border-inline-start:4px solid var(--nn-teal)!important;
 border-radius:0!important;padding:22px 24px!important;font-size:18px!important;line-height:1.8!important;
 color:var(--nn-ink)!important;margin:0 0 28px!important}
.noon-answer strong{color:var(--nn-teal)}
/* the medical reviewer line */
.noon-reviewed{background:var(--nn-gray)!important;border:0!important;border-inline-start:4px solid var(--nn-teal)!important;
 border-radius:0!important;padding:14px 20px!important;font-size:14.5px!important;color:var(--nn-text)!important;margin:0 0 26px!important}
.noon-reviewed a{color:var(--nn-teal)!important;font-weight:700}
/* the closing disclaimer */
.noon-disclaimer{font-size:13.5px!important;color:var(--nn-soft)!important;border-top:1px solid var(--nn-line);
 padding-top:18px!important;margin-top:34px!important;line-height:1.8!important}
/* share + QR on a doctor page */
.noon-share{border:1px solid var(--nn-line)!important;border-radius:0!important;padding:22px!important;
 margin:34px 0!important;gap:24px!important;background:var(--nn-gray)}
.noon-share__qr{border:1px solid var(--nn-line)}
.noon-share__title{color:var(--nn-ink)!important;font-size:17px!important}
/* lists the plugin builds from the meta fields */
.noon-list{padding-inline-start:0!important;list-style:none;margin:0 0 26px!important}
.noon-list li{position:relative;padding-inline-start:26px;padding-block:9px;border-bottom:1px solid var(--nn-line);
 font-size:16px;line-height:1.75}
.noon-list li:last-child{border-bottom:0}
.noon-list li:before{content:"";position:absolute;inset-inline-start:2px;top:19px;width:7px;height:7px;
 border-radius:50%;background:var(--nn-teal)}
/* lists written by hand in an article or on a doctor page get the same
   treatment as the ones the plugin builds */
.single-post .entry-content>ul,.single-noon_doctor .entry-content>ul,
.single-post .entry-content>.wp-block-list,.single-noon_doctor .entry-content>.wp-block-list{
 padding-inline-start:0;list-style:none;margin:0 0 26px}
.single-post .entry-content>ul>li,.single-noon_doctor .entry-content>ul>li,
.single-post .entry-content>.wp-block-list>li,.single-noon_doctor .entry-content>.wp-block-list>li{
 position:relative;padding-inline-start:26px;padding-block:9px;border-bottom:1px solid var(--nn-line);line-height:1.75}
.single-post .entry-content>ul>li:last-child,.single-noon_doctor .entry-content>ul>li:last-child,
.single-post .entry-content>.wp-block-list>li:last-child,.single-noon_doctor .entry-content>.wp-block-list>li:last-child{border-bottom:0}
.single-post .entry-content>ul>li:before,.single-noon_doctor .entry-content>ul>li:before,
.single-post .entry-content>.wp-block-list>li:before,.single-noon_doctor .entry-content>.wp-block-list>li:before{
 content:"";position:absolute;inset-inline-start:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--nn-teal)}
.noon-price{font-size:25px!important;font-weight:800!important;color:var(--nn-teal)!important}
.noon-profile__spec{font-size:18px!important;font-weight:700!important;color:var(--nn-ink)!important}
.noon-profile__info{color:var(--nn-soft)!important;font-size:15px!important}
/* the "who do I contact" picker */
.noon-chooser__select{min-height:52px!important;border:1px solid var(--nn-line)!important;border-radius:var(--nn-r)!important;
 font-size:16px!important;font-family:var(--nn-font)}
.noon-chooser__label{color:var(--nn-ink)!important;font-size:17px!important}
.noon-chooser__hint{color:var(--nn-soft)!important;font-size:13.5px!important}
/* callout variant used by the article template but never styled until now */
.nn-callout--doctor .kt-inside-inner-col{background:var(--nn-gold-l);border-inline-start-color:var(--nn-gold)}
.nn-callout--doctor h2,.nn-callout--doctor h3{color:var(--nn-ink)!important}

/* ===================== PAGE TITLE BAND ===================== */
.entry-hero .entry-hero-container-inner{background:linear-gradient(110deg,rgba(19,32,58,.97) 0%,rgba(27,42,74,.9) 55%,rgba(8,127,115,.75) 100%),repeating-linear-gradient(135deg,#2a3c62 0 2px,transparent 2px 22px),var(--nn-navy)!important;position:relative}
/* the band reads as finished on its own, so it carries no placeholder label;
   the slots that really need a photo are the ones inside the content */
.entry-hero .entry-header{max-width:var(--nn-w);margin-inline:auto}
.entry-hero .entry-title{color:#fff!important;font-size:clamp(30px,4.6vw,60px)!important;font-weight:700!important;line-height:1.15!important}
.entry-hero .kadence-breadcrumbs,.entry-hero .kadence-breadcrumbs a,.entry-hero .entry-meta,.entry-hero .entry-meta a{color:#C9D1DF!important;font-size:14px}
.entry-hero .kadence-breadcrumbs a:hover{color:var(--nn-turq)!important}
.entry-hero .entry-taxonomies a{color:var(--nn-turq)!important}

/* ===================== LAYOUT HELPERS ===================== */
.nn-sec>.kt-row-column-wrap{padding-top:0!important;padding-bottom:0!important}
.nn-sec .kb-row-layout-wrap:not(.nn-sec)>.kt-row-column-wrap{padding-top:0!important;padding-bottom:0!important}
.nn-points{margin:0!important}
.nn-points>.kt-row-column-wrap{padding-inline:0!important}
.nn-center .wp-block-kadence-advancedbtn,.nn-center .kb-buttons-wrap{justify-content:center}
.nn-split .nn-ph--tall{max-height:640px}
.nn-cboxes .kt-row-column-wrap{row-gap:24px!important}
/* nested rows stay inside their column */
.nn-sec .kb-row-layout-wrap:not(.nn-sec),.nn-sec .kb-row-layout-wrap.alignfull:not(.nn-sec){margin-left:0!important;margin-right:0!important;width:auto!important;max-width:100%!important;left:auto!important;right:auto!important}
.nn-sec .kb-row-layout-wrap:not(.nn-sec)>.kt-row-column-wrap{max-width:none!important;padding-left:0!important;padding-right:0!important}
.nn-sec .wp-block-kadence-column{min-width:0}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
 .site-top-header-wrap .header-html{display:none}
 .nn-hinfo{gap:16px}
}
@media (max-width:767px){
 body{font-size:16.5px}
 .noon-slider__track{min-height:500px}
 .noon-slide{padding-block:64px 80px!important}
 .noon-slide__desc{font-size:16.5px!important}
 .noon-slide__icon{display:none!important}
 .nn-lead{font-size:16px!important}
 .nn-head{margin-bottom:30px}
 .nn-svcitem .kt-blocks-info-box-media{width:64px;height:64px}
 .nn-svcitem .kt-blocks-info-box-link-wrap{gap:16px}
 .nn-hours>.kt-inside-inner-col,.nn-panel>.kt-inside-inner-col{padding:26px 20px!important}
 .nn-hours--panel>.kt-inside-inner-col{padding:32px 20px!important}
 .noon-profile{grid-template-columns:1fr;padding:18px}
 .noon-profile>*{grid-column:1}
 .noon-profile::before{grid-column:1;grid-row:auto;aspect-ratio:auto;min-height:190px}
 .nn-card .kt-blocks-info-box-link-wrap{padding:0 20px 26px!important}
}
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===================== EMPTY SECTIONS =====================
   A section whose only content is a "coming soon" notice was still taking a
   full 80/80 section plus its heading block — on the home page six of those
   came to 4,400px, about half the page, with nothing in them. They now
   collapse to the space their content actually needs. */
.nn-sec:has(.noon-empty){padding-block:46px!important}
.nn-sec:has(.noon-empty) .nn-head{margin-bottom:22px}
.nn-sec:has(.noon-empty) .nn-h{font-size:clamp(26px,3vw,36px)!important}
.noon-empty{padding:22px 26px!important;font-size:15px!important;background:transparent;
 border:1px dashed var(--nn-line)!important}
/* the doctor grid's own empty state sits inside .nn-team */
.nn-team:has(.noon-empty) .noon-search{display:none}

/* ===================== SPLIT PROPORTIONS =====================
   The intro split ran to 1,025px because a 4:5 portrait set the height and
   the text could not fill it. The image is capped and the row no longer
   stretches to match it. */
.nn-split>.kt-row-column-wrap{align-items:start!important}
/* The text column runs much longer than the image. Pinning the image to the
   top left dead space under it, and stretching it to match made it absurdly
   tall — so it travels with the reader instead, and the column never shows a
   gap. */
.nn-split .wp-block-kadence-column:has(>.kt-inside-inner-col>.nn-ph){position:sticky;top:96px;align-self:start}
.nn-split .nn-ph{max-height:500px;align-self:start}
.nn-split .nn-ph--tall{aspect-ratio:3/3.6;max-height:500px}
@media (max-width:900px){
 .nn-split .wp-block-kadence-column:has(>.kt-inside-inner-col>.nn-ph){position:static}
 .nn-split .nn-ph,.nn-split .nn-ph--tall{max-height:260px;aspect-ratio:16/9}
}

/* ===================================================================
   MOBILE
   The phone is where this site is actually read. Two things drive the
   work here: WhatsApp is the only conversion, and the page ran to 16.5
   screens because every grid collapsed to a single column.
   =================================================================== */

/* --- fixed action bar, phones only --- */
.noon-bar{display:none}
@media (max-width:860px){
 .noon-bar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:999;
  align-items:center;gap:12px;padding:10px 14px;
  background:rgba(12,22,39,.97);backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.12)}
 .noon-bar__hours{flex:1;min-width:0;color:#B9BDC6;font-size:12.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .noon-bar__wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  flex:0 0 auto;min-height:48px;padding:0 20px;border-radius:var(--nn-r-btn);
  background:var(--nn-teal);color:#fff!important;font-weight:700;font-size:14.5px;
  text-decoration:none!important}
 .noon-bar__wa svg{flex:0 0 20px}
 /* keep the bar clear of the page end and of the admin bar */
 body{padding-bottom:72px}
 .admin-bar .noon-bar{bottom:0}
}

/* --- two columns where the content is compact ---
   At 390px a pair of these still reads comfortably, and each pair removes
   a screen of scrolling. The photo-led clinic cards stay full width. --- */
@media (max-width:860px){
 /* Only the strip. Earlier attempts widened this to the dark sections and
    their nested rows, which squeezed single-column wraps to half width and
    made the page longer, not shorter — measured, reverted. */
 .nn-strip>.kt-row-column-wrap.kt-has-4-columns{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
 .nn-strip .nn-sbox>.kt-inside-inner-col{min-height:0;padding-bottom:22px!important}
 .nn-strip .nn-sbox>.kt-inside-inner-col>*:not(.nn-sbox__photo){padding-inline:16px!important}
 .nn-sbox__photo img{aspect-ratio:4/3}
 .nn-strip h3,.nn-strip .nn-pt-title{font-size:16px!important;margin-bottom:8px!important}
 .nn-strip p{font-size:13.5px!important}
 .nn-strip .kb-button{font-size:12.5px!important;padding:0 14px!important}
 .nn-svcitem{margin-bottom:18px}
 .nn-svcitem .kt-blocks-info-box-link-wrap{gap:12px}
 .nn-svcitem .kt-blocks-info-box-media{width:52px;height:52px}
 .nn-svcitem .kt-blocks-info-box-title{font-size:17px!important}
 .nn-svcitem .kt-blocks-info-box-text{font-size:14px!important}
 .nn-contact .nn-cbox>.kt-inside-inner-col{padding:20px 16px!important}
 .nn-contact h3{font-size:17px!important}
 .nn-cbox .noon-btn{font-size:12.5px;padding-inline:10px}
 /* the hours panel is a sibling of the cards, not one of them */
 .nn-cards>.kt-row-column-wrap{grid-template-columns:1fr!important}
 .nn-card .nn-ph{aspect-ratio:16/9}
 /* tighter rhythm: the section padding was tuned for desktop */
 :root{--nn-sec:40px}
 .nn-head{margin-bottom:24px}
}
/* below 380px the pairs get cramped, so they stack again */
@media (max-width:379px){
 .nn-strip>.kt-row-column-wrap{grid-template-columns:1fr!important}
}

/* ===================================================================
   MOBILE v2 — space, rhythm, motion (23 Oct, after the owner's review)
   Measured at 390px before this block: page 12,461px; footer 997px with
   every link on its own 44px row; 24px side gutters; six grey "photo goes
   here" boxes (192–340px each) that show the visitor nothing.
   =================================================================== */
@media (max-width:860px){
 /* one gutter for the whole phone layout: 16px, header to footer */
 .entry-content>.kb-row-layout-wrap>.kt-row-column-wrap,
 .site-header-row-container-inner>.site-container,
 .site-footer-row-container-inner>.site-container{padding-inline:16px!important}
 :root{--nn-sec:36px}
 .nn-head{margin-bottom:18px}
 .nn-h{font-size:28px!important;margin-bottom:12px!important}
 .nn-sup{font-size:14px!important;margin-bottom:6px!important}
 .nn-lead{font-size:15.5px!important;line-height:1.75!important;margin-bottom:18px!important}
 .nn-btns{margin-top:18px!important}

 /* placeholders are for the editor and the desktop layout; on a phone an
    empty grey box is just a gap in the page */
 .nn-ph,.noon-card__img--ph{display:none!important}
 .nn-split>.kt-row-column-wrap{row-gap:0!important}
 .nn-split .wp-block-kadence-column:has(>.kt-inside-inner-col>.nn-ph:only-child){display:none}

 /* strip: 2×2, tighter gap, the colour band starts right under the hero */
 .nn-strip>.kt-row-column-wrap.kt-has-4-columns{gap:10px!important;padding-top:12px!important}
 .nn-strip .nn-sbox>.kt-inside-inner-col{padding-bottom:16px!important}
 .nn-sbox__photo{margin-bottom:14px!important}
 .nn-strip .nn-sbox>.kt-inside-inner-col>*:not(.nn-sbox__photo){padding-inline:12px!important}
 .nn-strip .wp-block-kadence-advancedbtn{padding-top:12px}

 /* points (intro, glasses): one block each, no air between text and link */
 .nn-point>.kt-inside-inner-col{padding:14px 0!important}
 .nn-point .kt-inside-inner-col>*{margin-block:0 6px!important}
 .nn-point .nn-link,.nn-point .wp-block-kadence-advancedbtn{margin-top:4px!important}
 .nn-point .nn-link{min-height:40px}

 /* services: the six items become a 2×3 grid of compact tiles */
 .nn-svcgrid>.kt-row-column-wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .nn-svcgrid .wp-block-kadence-column,.nn-svcgrid .wp-block-kadence-column>.kt-inside-inner-col{display:contents}
 .nn-svcitem{margin:0!important}
 .nn-svcitem .kt-blocks-info-box-link-wrap{flex-direction:column;gap:8px;height:100%;
  padding:14px 12px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:var(--nn-r-l)}
 .nn-svcitem .kt-blocks-info-box-media{width:44px;height:44px}
 .nn-svcitem .kt-blocks-info-box-media svg{width:22px;height:22px}
 .nn-svcitem .kt-blocks-info-box-title{font-size:16px!important;margin:0 0 2px!important}
 .nn-svcitem .kt-blocks-info-box-text{font-size:13.5px!important;line-height:1.6!important}
 .nn-svcitem .kt-blocks-info-box-learnmore{margin-top:auto!important;min-height:36px;font-size:13.5px}
 .nn-sec--photo:not(.nn-contact)>.kt-row-column-wrap{row-gap:20px!important}
 .nn-hours>.kt-inside-inner-col{padding:20px 16px!important}
 .nn-hours h3{font-size:21px!important}
 .nn-hours .noon-hours{margin:12px 0!important;padding:12px 0!important}

 /* clinic cards: with the photo slot gone the icon sits in the flow */
 .nn-cards>.kt-row-column-wrap{row-gap:12px!important}
 .nn-card .kt-blocks-info-box-media-container{margin:20px auto 4px!important}
 .nn-card .kt-blocks-info-box-media{width:60px;height:60px}
 .nn-card .kt-blocks-info-box-media svg{width:28px;height:28px}
 .nn-card .kt-blocks-info-box-title{font-size:21px!important}
 .nn-card .kt-blocks-info-box-link-wrap{padding:0 16px 16px!important}
 .nn-card .kt-blocks-info-box-learnmore{margin-top:6px!important}
 .nn-hours--panel>.kt-inside-inner-col{padding:22px 16px!important}

 /* doctor cards and notes */
 .nn-team .noon-card__body{padding:16px!important}
 .nn-team .noon-note{padding:12px 14px!important;font-size:14px!important;margin-bottom:16px!important}
 .nn-team .noon-search{margin-bottom:16px}

 /* contact: icon beside the title instead of above it */
 .nn-cboxes .kt-row-column-wrap{row-gap:10px!important}
 .nn-contact .nn-cbox>.kt-inside-inner-col{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;padding:16px!important}
 .nn-contact .nn-cbox>.kt-inside-inner-col>*{grid-column:1 / -1;margin:0!important}
 .nn-contact .nn-cbox>.kt-inside-inner-col>.nn-cic{grid-column:1;width:44px;height:44px}
 .nn-contact .nn-cbox>.kt-inside-inner-col>h3{grid-column:2;margin:0!important}
 .nn-contact .nn-cbox p{margin:8px 0 12px!important;font-size:14.5px}
 .nn-cbox .noon-btn{font-size:14px;min-height:46px}

 /* partners */
 .nn-panel>.kt-inside-inner-col{padding:20px 16px!important}
 .nn-panel h3{font-size:22px!important;margin:8px 0 10px!important}
 .nn-sec--gray .kt-row-column-wrap{row-gap:12px!important}

 /* hero: no white seam under the ticker, and a height that fits its text */
 .noon-slider-wrap.nn-hero{padding:0!important}
 .noon-slider__track{min-height:470px}
 .noon-slide{padding-block:48px 84px!important}
 /* cards sat white-on-near-white, so their edges vanished and the page read as loose text */
 .nn-card>.kt-inside-inner-col{border:1px solid var(--nn-line)}

 /* ---- footer: a compact, tidy block instead of one link per screen row ---- */
 .site-middle-footer-wrap .site-footer-row{padding-block:24px 8px!important;row-gap:22px!important}
 .site-middle-footer-wrap .site-footer-row-container-inner{padding-block:0}
 .site-middle-footer-wrap h2,.site-middle-footer-wrap h3,.site-middle-footer-wrap .widget-title{font-size:16px!important;margin:0 0 10px!important}
 .site-middle-footer-wrap h3:after{margin-top:6px;width:28px}
 .site-middle-footer-wrap p{margin:0 0 8px!important;font-size:14.5px;line-height:1.65}
 .site-middle-footer-wrap p:empty{display:none}
 .site-middle-footer-wrap ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
 .site-middle-footer-wrap li a{min-height:36px!important;padding:0!important;font-size:14.5px;line-height:1.4}
 .site-middle-footer-wrap .noon-hours{display:block!important;background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 12px!important;font-size:14.5px;color:#fff!important}
 .site-middle-footer-wrap .noon-hours .noon-dot{display:none}
 .site-middle-footer-wrap .noon-btn{width:100%;justify-content:center;min-height:46px}
 .nn-foot-note{font-size:12.5px!important;line-height:1.6!important}
 .site-bottom-footer-wrap .site-footer-row{padding-block:12px!important;min-height:0!important}
 .site-bottom-footer-wrap .site-footer-row-container-inner{font-size:12.5px}
}

/* ===================== MOTION =====================
   The hero photo drifts slowly while its slide is showing, and blocks rise
   into place the first time they scroll into view. Nothing moves for
   visitors who ask for reduced motion. */
@keyframes nn-drift{from{transform:scale(1)}to{transform:scale(1.09) translate3d(-1.5%,-1%,0)}}
@keyframes nn-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
.noon-slide.is-active .noon-slide__photo{animation:nn-drift 9s ease-out both}
.nn-rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.nn-rv.is-in{opacity:1;transform:none}
.nn-rv img{transform-origin:50% 50%}
.nn-rv.is-in .nn-sbox__photo img{animation:nn-settle 1.8s cubic-bezier(.2,.7,.2,1) both}
.nn-sbox__photo{overflow:hidden}
@media (prefers-reduced-motion:reduce){
 .noon-slide.is-active .noon-slide__photo,.nn-rv.is-in .nn-sbox__photo img{animation:none!important}
 .nn-rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* rows that list posts stay hidden while they have nothing to show, and
   come back on their own as soon as something is published */
.nn-auto-hide:has(.noon-empty){display:none!important}

/* ===================== MOBILE TYPE AND RHYTHM =====================
   Audit at 390px found five heading sizes for three levels (16/17/21/21/22),
   headings at line-height 1.15 — tight enough to clip Arabic ascenders and
   dots — body at 1.8, two button sizes, and section heads that were centred
   in four sections and right-aligned in two. One scale now:
     h2 28/1.35 · card h3 20/1.4 · item title 17/1.45 · body 16/1.7 ·
     small 13.5/1.6 · every button 15px, ≥44px tall. */
@media (max-width:860px){
 body{font-size:16px;line-height:1.7}
 .nn-h{line-height:1.35!important}
 .nn-lead{line-height:1.7!important}
 .nn-card .kt-blocks-info-box-title,.nn-panel h3,.nn-hours h3{font-size:20px!important;line-height:1.4!important}
 .nn-pt-title,.nn-point h3,.nn-contact h3,.nn-strip h3,.nn-strip .nn-pt-title{font-size:17px!important;line-height:1.45!important}
 .nn-card .kt-blocks-info-box-text,.nn-panel p,.nn-point p{font-size:15px!important;line-height:1.7!important}
 .noon-btn,.nn-btn.kb-button,.nn-btn .kb-button{font-size:15px!important;min-height:46px}
 /* section heads all start on the reading edge, like the text under them */
 .nn-head,.nn-center.nn-head,.nn-sec .nn-center{text-align:start!important}
 .nn-center .nn-lead{margin-inline:0!important}
 .nn-center .wp-block-kadence-advancedbtn,.nn-center .kb-buttons-wrap{justify-content:flex-start}
 /* tap targets */
 .nn-link,.nn-point .nn-link{min-height:44px}
 .site-middle-footer-wrap li a{min-height:44px!important}
}