/* R67 — identity-safe brand / click-to-call / portrait framing refinement.
 * Goal: match the approved German/English/Arabic header direction without
 * generating or retouching the doctor's face. The approved R50 portrait file
 * remains untouched; all visual cleanup is non-destructive CSS framing.
 */
:root{
  --r67-navy:#031a31;
  --r67-navy-2:#062e4c;
  --r67-gold:#e4b65a;
  --r67-gold-soft:#f2cd7c;
  --r67-ivory:#fffaf0;
}

/* ---------- Header / brand lockup ---------- */
.r67-header-inner,
.home .r67-header-inner{
  grid-template-columns:minmax(320px,1fr) auto minmax(300px,1fr)!important;
  gap:24px!important;
}

.r67-brand,
.home .r67-brand{
  gap:14px!important;
  min-width:292px!important;
  max-width:360px!important;
  overflow:visible!important;
}
.r67-brand .r67-brand-mark,
.home .r67-brand .r67-brand-mark{
  width:72px!important;
  height:72px!important;
  flex:0 0 72px!important;
}
.r67-brand .r67-brand-mark::before,
.home .r67-brand .r67-brand-mark::before{
  inset:0!important;
  background:
    radial-gradient(circle at 34% 26%,#fffdf8 0 18%,#fff8e9 47%,#f2e4c9 72%,rgba(228,182,90,.22) 83%,transparent 84%)!important;
  box-shadow:0 9px 24px rgba(0,9,21,.28),0 0 0 1px rgba(236,201,128,.14)!important;
}
.r67-brand .r67-brand-mark::after,
.home .r67-brand .r67-brand-mark::after{
  inset:6px!important;
  border-color:rgba(218,169,72,.42)!important;
}
.r67-brand .approved-brand-raster,
.home .r67-brand .approved-brand-raster{
  inset:6px!important;
  width:60px!important;
  height:60px!important;
  filter:drop-shadow(0 3px 5px rgba(0,20,45,.20))!important;
}

.r67-brand .r67-brand-copy,
.home .r67-brand .r67-brand-copy{
  display:block!important;
  min-width:0!important;
  width:auto!important;
  max-width:268px!important;
  text-align:left!important;
  direction:ltr!important;
}
.r67-brand-localized{display:none!important;min-width:0!important}
html[lang^="de"] .r67-brand-de,
html[lang^="en"] .r67-brand-en,
html[lang^="ar"] .r67-brand-ar{display:grid!important}
.r67-brand-localized{
  grid-template-rows:auto auto auto!important;
  gap:4px!important;
  align-items:center!important;
}
.r67-brand-name{
  display:block!important;
  color:var(--r67-ivory)!important;
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;
  font-size:18.5px!important;
  font-weight:400!important;
  line-height:1.04!important;
  letter-spacing:.006em!important;
  white-space:nowrap!important;
  text-shadow:0 1px 0 rgba(255,255,255,.03)!important;
}
.r67-brand-name>span{
  color:var(--r67-gold-soft)!important;
  font-family:"Plus Jakarta Sans",Arial,sans-serif!important;
  font-size:.60em!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  vertical-align:.08em!important;
}
.r67-brand-practice{
  display:grid!important;
  grid-template-columns:minmax(23px,1fr) auto minmax(23px,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  color:var(--r67-gold)!important;
}
.r67-brand-practice i{
  display:block!important;
  height:1px!important;
  min-width:20px!important;
  background:linear-gradient(90deg,transparent,var(--r67-gold))!important;
  opacity:.92!important;
}
.r67-brand-practice i:last-child{background:linear-gradient(90deg,var(--r67-gold),transparent)!important}
.r67-brand-practice b{
  color:var(--r67-gold-soft)!important;
  font-family:"Plus Jakarta Sans",Arial,sans-serif!important;
  font-size:7.9px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.25em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.r67-brand-location{
  display:block!important;
  justify-self:center!important;
  color:#aebfca!important;
  font-family:"Plus Jakarta Sans",Arial,sans-serif!important;
  font-size:7.5px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.36em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* DE + EN: symbol left, live wordmark right. */
html:not([dir="rtl"]) .r67-brand,
html[dir="ltr"] .r67-brand{flex-direction:row!important;direction:ltr!important}

/* AR: brand occupies the right header zone; symbol stays on the far right and Arabic copy sits to its left. */
html[dir="rtl"] .r67-header-inner{
  grid-template-columns:minmax(300px,1fr) auto minmax(320px,1fr)!important;
  direction:ltr!important;
}
html[dir="rtl"] .r67-brand{
  grid-column:3!important;
  justify-self:end!important;
  flex-direction:row-reverse!important;
  direction:ltr!important;
}
html[dir="rtl"] .r67-brand .r67-brand-copy{
  text-align:right!important;
  direction:rtl!important;
  max-width:275px!important;
}
html[dir="rtl"] .r67-brand-ar{direction:rtl!important}
html[dir="rtl"] .r67-brand-name{
  font-family:"Noto Naskh Arabic",Tahoma,serif!important;
  font-size:20px!important;
  line-height:1.04!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
html[dir="rtl"] .r67-brand-name>span{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif!important;
  font-size:.56em!important;
  letter-spacing:0!important;
}
html[dir="rtl"] .r67-brand-practice{direction:rtl!important}
html[dir="rtl"] .r67-brand-practice b{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif!important;
  font-size:9px!important;
  letter-spacing:.06em!important;
  text-transform:none!important;
}
html[dir="rtl"] .r67-brand-location{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif!important;
  font-size:8.5px!important;
  letter-spacing:.15em!important;
  text-transform:none!important;
}
html[dir="rtl"] .r67-desktop-nav{grid-column:2!important;direction:rtl!important}
html[dir="rtl"] .r67-header-actions{
  grid-column:1!important;
  justify-self:start!important;
  justify-content:flex-start!important;
  direction:ltr!important;
}
html[dir="rtl"] .r67-header-call{order:-1!important}

/* ---------- Click-to-call CTA ---------- */
.r67-header-call,
.home .r67-header-call{
  min-width:166px!important;
  height:48px!important;
  padding:0 19px!important;
  gap:10px!important;
  font-size:13.5px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
  text-transform:none!important;
  font-variant-numeric:tabular-nums!important;
}
.r67-header-call svg,
.home .r67-header-call svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.r67-header-call span{display:block!important;white-space:nowrap!important}

body.home .r67-primary-call{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-width:178px!important;
  min-height:50px!important;
  padding:0 20px!important;
  border:1px solid rgba(255,239,199,.32)!important;
  border-radius:10px!important;
  font-family:"Plus Jakarta Sans",Arial,sans-serif!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  font-variant-numeric:tabular-nums!important;
  text-decoration:none!important;
}
body.home .r67-primary-call svg{
  display:block!important;
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
body.home .r67-primary-call:hover,
body.home .r67-primary-call:focus-visible{filter:brightness(1.045)!important;transform:translateY(-1px)!important}

.r67-mobile-call{gap:9px!important}
.r67-mobile-call svg{
  width:18px!important;
  height:18px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* ---------- Identity-safe hero portrait treatment ---------- */
body.home .r67-hero-layout{
  grid-template-columns:minmax(0,.84fr) minmax(590px,1.16fr)!important;
  gap:66px!important;
  padding-top:48px!important;
  padding-bottom:56px!important;
}
body.home .r67-hero-media{width:min(690px,100%)!important}
body.home .r67-hero-stage{
  aspect-ratio:1.43/1!important;
  background:
    radial-gradient(circle at 35% 18%,rgba(255,255,255,.78),transparent 34%),
    linear-gradient(112deg,#e9e8e3 0%,#eef0ed 67%,#e6e8e6 100%)!important;
}

/* Doctor slide: no generated replacement and no retouching of the doctor.
 * The original R50 source is scaled down slightly for headroom. The far-right
 * waiting-area clutter is optically dissolved into a neutral clinic wall using
 * a CSS-only fade, leaving the face and central body pixels untouched. */
body.home .r67-doctor-slide::before{
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(249,248,244,.76) 0%,rgba(239,241,239,.94) 64%,rgba(235,238,236,.98) 100%),
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.92),transparent 42%)!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
}
body.home .r67-doctor-slide::after{
  inset:0!important;
  z-index:2!important;
  background:
    linear-gradient(90deg,transparent 0 72%,rgba(238,240,237,.20) 76%,rgba(236,239,236,.76) 86%,rgba(235,238,235,.98) 100%),
    linear-gradient(180deg,transparent 70%,rgba(5,28,46,.045) 100%)!important;
  pointer-events:none!important;
}
body.home .r67-doctor-photo{
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:scale(.93)!important;
  transform-origin:center bottom!important;
  filter:none!important;
  opacity:1!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0 74%,rgba(0,0,0,.96) 77%,rgba(0,0,0,.60) 83%,transparent 90%)!important;
  mask-image:linear-gradient(90deg,#000 0 74%,rgba(0,0,0,.96) 77%,rgba(0,0,0,.60) 83%,transparent 90%)!important;
}

/* Add a restrained warm architectural light in the cleaned background zone. */
body.home .r67-doctor-slide .r67-doctor-photo{will-change:auto!important}
body.home .r67-doctor-slide{
  background:
    linear-gradient(90deg,#ecebe6 0 80%,#eceeea 80% 100%)!important;
}

/* Ensure hero call and secondary action remain balanced as a pair. */
body.home .r67-hero-actions{gap:18px!important}
body.home .r67-hero-actions .r66-secondary-link{min-height:50px!important;padding-inline:4px!important}

/* ---------- Responsive ---------- */
@media(max-width:1240px){
  .r67-header-inner,.home .r67-header-inner{
    grid-template-columns:minmax(290px,1fr) auto minmax(205px,1fr)!important;
    gap:16px!important;
  }
  .r67-brand,.home .r67-brand{min-width:270px!important;max-width:305px!important;gap:11px!important}
  .r67-brand .r67-brand-mark,.home .r67-brand .r67-brand-mark{width:64px!important;height:64px!important;flex-basis:64px!important}
  .r67-brand .approved-brand-raster,.home .r67-brand .approved-brand-raster{inset:6px!important;width:52px!important;height:52px!important}
  .r67-brand-name{font-size:16.5px!important}
  .r67-brand-practice b{font-size:7.2px!important;letter-spacing:.20em!important}
  .r67-brand-location{font-size:7px!important;letter-spacing:.28em!important}
  .r67-header-call,.home .r67-header-call{min-width:156px!important;padding-inline:17px!important;font-size:12.5px!important}
  body.home .r67-hero-layout{grid-template-columns:minmax(0,.84fr) minmax(525px,1.16fr)!important;gap:44px!important}
  body.home .r67-hero-media{width:min(630px,100%)!important}
  html[dir="rtl"] .r67-header-inner{grid-template-columns:minmax(205px,1fr) auto minmax(290px,1fr)!important}
}

@media(max-width:1030px){
  .r67-header-inner,.home .r67-header-inner{display:flex!important;direction:ltr!important}
  .r67-brand,.home .r67-brand{min-width:0!important;max-width:calc(100% - 64px)!important}
  html[dir="rtl"] .r67-brand{order:2!important;margin:0!important;flex-direction:row-reverse!important}
  html[dir="rtl"] .r67-header-actions{order:1!important;margin:0!important}
  body.home .r67-hero-layout,html[dir="rtl"] body.home .r67-hero-layout{display:flex!important;gap:32px!important}
  body.home .r67-hero-media,html[dir="rtl"] body.home .r67-hero-media{width:min(780px,100%)!important}
  body.home .r67-hero-stage{aspect-ratio:1.38/1!important}
  body.home .r67-doctor-photo{transform:scale(.92)!important}
}

@media(max-width:620px){
  .r67-brand .r67-brand-mark,.home .r67-brand .r67-brand-mark{width:52px!important;height:52px!important;flex-basis:52px!important}
  .r67-brand .approved-brand-raster,.home .r67-brand .approved-brand-raster{inset:6px!important;width:40px!important;height:40px!important}
  .r67-brand .r67-brand-copy,.home .r67-brand .r67-brand-copy{max-width:200px!important}
  .r67-brand-name{font-size:13.5px!important}
  .r67-brand-practice{grid-template-columns:16px auto 16px!important;gap:5px!important}
  .r67-brand-practice b{font-size:6.5px!important;letter-spacing:.14em!important}
  .r67-brand-location{font-size:6.4px!important;letter-spacing:.20em!important}
  html[dir="rtl"] .r67-brand-name{font-size:15px!important}
  html[dir="rtl"] .r67-brand-practice b{font-size:7.2px!important}
  html[dir="rtl"] .r67-brand-location{font-size:7px!important}
  body.home .r67-hero-stage{aspect-ratio:1.18/1!important}
  body.home .r67-doctor-photo{
    transform:scale(.90)!important;
    -webkit-mask-image:linear-gradient(90deg,#000 0 88%,rgba(0,0,0,.7) 95%,transparent 100%)!important;
    mask-image:linear-gradient(90deg,#000 0 88%,rgba(0,0,0,.7) 95%,transparent 100%)!important;
  }
  body.home .r67-primary-call{min-width:168px!important;font-size:13px!important}
}

@media(max-width:430px){
  .r67-brand .r67-brand-copy,.home .r67-brand .r67-brand-copy{max-width:176px!important}
  .r67-brand-name{font-size:12.5px!important}
  .r67-brand-practice b{font-size:6px!important}
  .r67-brand-location{font-size:6px!important}
  html[dir="rtl"] .r67-brand-name{font-size:14px!important}
  body.home .r67-hero-actions{width:100%!important}
  body.home .r67-primary-call{width:100%!important;max-width:230px!important}
}
