/* Services opening only. Shared header, buttons and footer keep their own styling. */
.services-page{position:relative;isolation:isolate;overflow:clip;background:var(--ashal-surface)}
#main.services-page>.sv-hero{background:transparent}
.services-page:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/services-confluence.svg') center top/1600px 1100px no-repeat;opacity:.065}
html[lang=en] .services-page:before{transform:scaleX(-1)}
@media(max-width:767px){.services-page:before{background-size:auto 850px;background-position:62% 0;opacity:.05}}
.sv-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(36px,5vw,88px);padding-block:170px 100px;min-height:820px}
.sv-hero-copy{padding-block:30px;max-width:530px}
.sv-label{color:#8b7349;font-size:16px;font-weight:700;margin-bottom:22px}
.sv-title{font-size:clamp(42px,4.1vw,64px);font-weight:800;line-height:1.5;letter-spacing:-1.8px;text-wrap:balance;margin:0}
.sv-intro{font-size:16px;line-height:2.15;color:var(--navy);margin-block:24px 30px;max-width:480px}
.sv-action{font-size:14px;min-height:52px;padding-inline:28px}
.sv-hero-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px;direction:ltr;padding-bottom:36px}
.sv-photo{margin:0;overflow:hidden;border-radius:24px;isolation:isolate}
.sv-photo-madinah{margin-top:44px}
.sv-photo img{display:block;width:100%;height:auto;aspect-ratio:1/2;object-fit:cover;border-radius:inherit}
.sv-hero-copy,.sv-photo{animation:sv-arrive .9s var(--ease) both}
.sv-photo-makkah{animation-delay:.09s}.sv-photo-madinah{animation-delay:.18s}
@keyframes sv-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
html[lang=en] .sv-title{font-size:clamp(38px,3.15vw,62px);line-height:1.22;letter-spacing:-1.5px}
html[lang=en] .sv-intro{font-size:16px;line-height:1.9}
@media(min-width:1600px){.sv-hero{padding-block:180px 110px;min-height:880px}}
@media(max-width:1099px){.sv-hero{gap:32px;min-height:720px;padding-block:150px 72px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.sv-title{font-size:42px}.sv-intro{font-size:15px;line-height:2}.sv-hero-gallery{gap:14px}.sv-photo{border-radius:20px}.sv-photo-madinah{margin-top:32px}html[lang=en] .sv-title{font-size:38px}html[lang=en] .sv-intro{font-size:15px}}
@media(max-width:767px){.sv-hero{display:flex;flex-direction:column;align-items:stretch;gap:34px;padding-block:132px 66px;min-height:0}.sv-hero-copy{padding:0;max-width:none}.sv-label{font-size:14px;margin-bottom:14px}.sv-title{font-size:clamp(34px,8.7vw,48px);line-height:1.55;letter-spacing:-1px;max-width:540px}.sv-intro{font-size:15px;line-height:2.05;margin-block:18px 24px;max-width:540px}.sv-action{min-height:50px;font-size:13px;padding-inline:24px}.sv-hero-gallery{gap:13px;padding-bottom:24px}.sv-photo{border-radius:18px}.sv-photo-madinah{margin-top:26px}html[lang=en] .sv-title{font-size:clamp(34px,10vw,44px);line-height:1.25}html[lang=en] .sv-intro{font-size:15px;line-height:1.9}}
@media(prefers-reduced-motion:reduce){.sv-hero-copy,.sv-photo{animation:none}}

/* Fit the complete portrait pair inside the opening viewport without flattening it. */
@media(min-width:768px){
 .sv-hero{--sv-hero-top:clamp(140px,18svh,170px);--sv-hero-bottom:48px;--sv-photo-offset:32px;--sv-photo-gap:20px;--sv-photo-height:clamp(300px,calc(100svh - var(--sv-hero-top) - var(--sv-hero-bottom) - var(--sv-photo-offset)),690px);padding-block:var(--sv-hero-top) var(--sv-hero-bottom);min-height:min(100svh,980px)}
 .sv-hero-gallery{width:min(100%,calc(var(--sv-photo-height) + var(--sv-photo-gap)));justify-self:end;gap:var(--sv-photo-gap);padding-bottom:0}
 .sv-photo-madinah{margin-top:var(--sv-photo-offset)}
}
@media(min-width:768px) and (max-width:1099px){.sv-hero{--sv-photo-gap:14px;--sv-photo-offset:26px;min-height:min(100svh,720px)}}

/* Use the same outer grid as the following service section. */
.sv-hero .sv-photo{border-radius:10px}
.sv-hero .sv-title{white-space:pre-line}
.sv-hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.sv-hero-browse{display:inline-flex;align-items:center;min-height:44px;color:var(--teal);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.sv-hero-browse:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
@media(min-width:1100px){
 .sv-hero{--sv-column-gap:clamp(36px,4vw,56px);width:min(1320px,88%);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sv-column-gap)}
 .sv-hero-copy{max-width:none}
 .sv-hero-gallery{width:100%}
 .sv-hero .sv-photo img{height:var(--sv-photo-height);aspect-ratio:auto}
}
@media(max-width:767px){.sv-hero-actions{gap:10px 20px}.sv-hero-browse{font-size:12px}}