/* Habesha Care V7.4 | Targeted QA refinements.
   - Hero photograph is visibly pinned briefly on phones, released before text.
   - Both desktop & mobile FAQs: true-black expanded panel with rich-gold text.
   - Mobile process uses the desktop black/gold scheme; desktop 5-step grid unchanged.
   - Desktop HOMEPAGE service colors reversed: Bookkeeping black, Payroll cream.
   Existing wording, service links, booking links, portrait, bilingual sign preserved. */
:root{--fc74-black:#0B0B0B;--fc74-gold:#D6AC2B;--fc74-cream:#FCF9F2;--fc74-brown:#72513A;}
/* Added visual photo stage has zero layout impact on desktops. */
@media(min-width:761px){html body main#top section.hero .fc-v74-photo-stage{display:contents!important}}

/* FAQs: preserve light/closed cards, and provide one unmistakable gold-on-black
   expanded state on desktop, tablet, and phones. */
html body main#top .faq-list details[open],
html body main#top .hc-how-faq details[open]{
 background:var(--fc74-black)!important;
 border:1px solid var(--fc74-gold)!important;
 box-shadow:0 8px 23px rgba(11,11,11,.12)!important;
}
html body main#top .faq-list details[open] summary,
html body main#top .hc-how-faq details[open] summary,
html body main#top .faq-list details[open] summary span,
html body main#top .hc-how-faq details[open] summary::after{
 color:var(--fc74-gold)!important;
 -webkit-text-fill-color:var(--fc74-gold)!important;
}
html body main#top .faq-list details[open] p,
html body main#top .faq-list details[open] p strong,
html body main#top .faq-list details[open] p a,
html body main#top .hc-how-faq details[open] p,
html body main#top .hc-how-faq details[open] li{
 color:var(--fc74-gold)!important;
 -webkit-text-fill-color:var(--fc74-gold)!important;
 text-align:left!important;text-align-last:left!important;
 word-spacing:normal!important;hyphens:none!important;
}
html body main#top .faq-list details[open] summary{border-bottom-color:rgba(214,172,43,.43)!important;}

/* The approved two service cards retain their exact wording and links.
   Reverse ONLY desktop homepage card colors, including all nested text and icons. */
@media(min-width:801px){
 html body main#top #services .fc-v4-service-card.fc-v4-service-bookkeeping{
  background:#171715!important;border-color:var(--fc74-gold)!important;
 }
 html body main#top #services .fc-v4-service-bookkeeping .fc-v4-service-top span,
 html body main#top #services .fc-v4-service-bookkeeping .fc-v4-service-top svg,
 html body main#top #services .fc-v4-service-bookkeeping a,
 html body main#top #services .fc-v4-service-bookkeeping a .fc-link-arrow{
  color:var(--fc74-gold)!important;stroke:var(--fc74-gold)!important;
 }
 html body main#top #services .fc-v4-service-bookkeeping h3{color:var(--fc74-cream)!important;}
 html body main#top #services .fc-v4-service-bookkeeping p{color:#E2D6C0!important;}
 html body main#top #services .fc-v4-service-card.fc-v4-service-payroll{
  background:var(--fc74-cream)!important;border-color:var(--fc74-gold)!important;
 }
 html body main#top #services .fc-v4-service-payroll .fc-v4-service-top span{color:var(--fc74-brown)!important;}
 html body main#top #services .fc-v4-service-payroll .fc-v4-service-top svg{stroke:#9D7418!important;}
 html body main#top #services .fc-v4-service-payroll h3{color:var(--fc74-black)!important;}
 html body main#top #services .fc-v4-service-payroll p{color:var(--fc74-brown)!important;}
 html body main#top #services .fc-v4-service-payroll a{color:var(--fc74-black)!important;}
 html body main#top #services .fc-v4-service-payroll a .fc-link-arrow{color:#9D7418!important;}
}

/* Phone: the photo itself pins below the fixed header while the short, intentional
   slideshow-control band scrolls; once the band passes, the image releases BEFORE
   the readable headline appears. The frame is never allowed over body copy. */
@media(max-width:760px){
 html body main#top section.hero{
   display:flex!important;flex-direction:column!important;overflow:visible!important;
   padding-bottom:0!important;
 }
 html body main#top section.hero .fc-v74-photo-stage{
  display:block!important;flex:none!important;align-self:stretch!important;order:0!important;
  width:100%!important;
  height:calc(100vw * 9 / 16 + 108px)!important;
  padding:0!important;margin:0!important;position:relative!important;
  background:var(--fc74-black)!important;
 }
 html body main#top section.hero .fc-v74-photo-stage .fc-hero-slides{
  position:sticky!important;top:64px!important;left:auto!important;
  display:block!important;width:100%!important;height:calc(100vw * 9 / 16)!important;
  aspect-ratio:auto!important;
  z-index:1!important;overflow:hidden!important;
  border-bottom:2px solid var(--fc74-gold)!important;
 }
 html body main#top section.hero .fc-slide-controls{
  top:calc(100vw * 9 / 16 + 19px)!important;
  bottom:auto!important;z-index:5!important;
  left:50%!important;transform:translateX(-50%)!important;
 }
 html body main#top section.hero .hero-copy{
  position:relative!important;z-index:2!important;order:2!important;
  padding-top:21px!important;background:var(--fc74-black)!important;
 }
 html body main#top section.hero .fc-v74-photo-stage:after{
  content:'';position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:48px;height:1px;background:rgba(214,172,43,.36);
 }
}
@media(prefers-reduced-motion:reduce){
 html body main#top section.hero .fc-v74-photo-stage .fc-hero-slides{
  position:relative!important;top:auto!important;
 }
}

/* Match the desktop black-and-gold How It Works section on phones, but keep
   the approachable and accessible V7.2 VERTICAL numbered timeline layout. */
@media(max-width:800px){
 html body main#top section.fc-v4-how{
  background:var(--fc74-black)!important;color:var(--fc74-cream)!important;
  border-top:2px solid var(--fc74-gold)!important;
  border-bottom:2px solid var(--fc74-gold)!important;
 }
 html body main#top .fc-v4-how .fc-v4-how-header h2{color:var(--fc74-cream)!important;}
 html body main#top .fc-v4-how .fc-v4-how-header em,
 html body main#top .fc-v4-how .fc-v4-eyebrow{color:var(--fc74-gold)!important;}
 html body main#top .fc-v4-how .fc-v4-how-header>p:not(.fc-v4-eyebrow){color:#E2D6C0!important;}
 html body main#top .fc-v4-how .fc-v4-steps:before{border-color:var(--fc74-gold)!important;}
 html body main#top .fc-v4-how .fc-v4-step,
 html body main#top .fc-v4-how .fc-v4-step:nth-child(n){background:transparent!important;color:var(--fc74-cream)!important;}
 html body main#top .fc-v4-how .fc-v5-home-step-toggle{color:var(--fc74-cream)!important;}
 html body main#top .fc-v4-how .fc-v4-step h3{color:var(--fc74-cream)!important;}
 html body main#top .fc-v4-how .fc-v4-step-top b{
  background:var(--fc74-black)!important;border-color:var(--fc74-gold)!important;
  color:var(--fc74-gold)!important;box-shadow:0 0 0 5px var(--fc74-black)!important;
 }
 html body main#top .fc-v4-how .fc-v4-step-top>span{color:#DCCCB3!important;}
 html body main#top .fc-v4-how .fc-v5-step-chevron{color:var(--fc74-gold)!important;}
 html body main#top .fc-v4-how .fc-v4-how-link{color:var(--fc74-cream)!important;border-color:var(--fc74-gold)!important;}
 html body main#top .fc-v4-how .fc-v4-how-link .fc-link-arrow{color:var(--fc74-gold)!important;}
 /* An expanded step is one GOLD surface with BLACK text, never white/beige. */
 html body main#top .fc-v4-how .fc-v4-step.is-open,
 html body main#top .fc-v4-how .fc-v4-step.is-open:nth-child(n),
 html body main#top .fc-v4-how .fc-v4-step.is-open:hover{
   background:var(--fc74-gold)!important;color:var(--fc74-black)!important;
   border-radius:4px!important;margin:0 0 10px!important;
   padding:13px 12px 18px!important;
 }
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-toggle,
 html body main#top .fc-v4-how .fc-v4-step.is-open h3,
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v4-step-top>span,
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-step-chevron{color:var(--fc74-black)!important;}
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v4-step-top b{
  color:var(--fc74-gold)!important;background:var(--fc74-black)!important;
  box-shadow:0 0 0 4px var(--fc74-gold)!important;
 }
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-detail{
  background:var(--fc74-gold)!important;color:var(--fc74-black)!important;
  border-top:1px solid rgba(11,11,11,.32)!important;
 }
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-detail p,
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-detail a,
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-detail span,
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v4-step-note{
  color:var(--fc74-black)!important;
 }
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v4-step-note{border-color:rgba(11,11,11,.35)!important;}
 /* Don't let a long label run into the +/- tap target at narrow phone widths. */
 html body main#top .fc-v4-how .fc-v5-home-step-toggle{
  padding-right:28px!important;
 }
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-step-chevron{right:5px!important;}
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v4-step-top b{left:10px!important;top:13px!important;}
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-toggle{padding-left:67px!important;}
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-detail{margin:10px 0 0 67px!important;}
}
@media(max-width:360px){
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-toggle{padding-left:60px!important;}
 html body main#top .fc-v4-how .fc-v4-step.is-open .fc-v5-home-step-detail{margin-left:60px!important;}
}