/* page styles: cairo.html */
/* floatCta — a persistent "Packages" pill, fixed to the bottom
center of the viewport once the reader has scrolled past the
opening band. Styled ink-on-gold-outline rather than the site's
usual gold-on-ink .btn, so it reads as its own floating control
instead of competing with the inline CTAs already on the page. */
.floatCta{
position:fixed;left:50%;bottom:clamp(16px,3vh,28px);
transform:translate(-50%,20px);z-index:60;
opacity:0;pointer-events:none;
transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.floatCta.is-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.floatCta__btn{
display:inline-flex;align-items:center;gap:9px;
background:var(--ink);color:var(--gold);
padding:15px 26px 15px 20px;border-radius:999px;
font-family:var(--f);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
text-decoration:none;white-space:nowrap;
border:1px solid rgb(var(--gold-rgb) / .4);
box-shadow:0 14px 34px rgb(var(--ink-rgb) / .3),0 2px 6px rgb(var(--ink-rgb) / .14);
transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);
}
.floatCta__btn:hover{transform:translateY(-3px);background:#0C2323;box-shadow:0 20px 44px rgb(var(--ink-rgb) / .36),0 2px 6px rgb(var(--ink-rgb) / .14)}
.floatCta__icon{width:16px;height:16px;flex:none}
@media (max-width:520px){
.floatCta__btn{padding:13px 20px 13px 16px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
.floatCta{transition:opacity .2s linear}
.floatCta__btn{transition:none}
}
.head--center{flex-direction:column;align-items:center;text-align:center;gap:14px}
.head--center .head__side{max-width:56ch}
/* removes the shared .head divider rule under this one heading only —
the "Discover your next journey" heading above keeps it. */
.head--noline{border-bottom:0;padding-bottom:0}
/* groupHead--chapter — page-scoped "chapter divider" treatment:
drops the reel-icon mark, flanks a centered title with a rule on
each side, and sets the "the ancient plateau"/"the living city"
line as a small italic serif eyebrow above the title instead of
a trailing muted label. */
.groupHead--chapter{flex-direction:column;align-items:center;gap:8px}
.groupHead--chapter .groupHead__eyebrow{
display:block;font-family:var(--f-serif);
font-style:italic;font-size:13px;color:var(--accent);
}
.groupHead--chapter .groupHead__row{display:flex;align-items:center;justify-content:center;gap:18px;width:100%}
.groupHead--chapter .groupHead__rule{flex:1 1 0;max-width:120px}
.groupHead--chapter h3{font-size:clamp(22px,2.6vw,28px)}
/* siteCards--center — centers the reel strip when it fits the row;
if it still overflows (East Cairo's 7 cards on a narrower screen),
it scrolls exactly as before. */
@media (min-width:640px){.siteCards--center{justify-content:center}}
/* page-scoped: tighten the gap between sections on this page only —
the shared .sec/.sec--tight padding is left alone for every other
page that uses it. */
#main .sec{padding-top:clamp(40px,5.5vh,72px);padding-bottom:clamp(40px,5.5vh,72px)}
#main .sec--tight{padding-top:clamp(28px,3.6vh,48px)}
/* pkgCard/pkgGrid — same card pattern used on hot-deals-for-locals.html,
reused here for the "Pair it with the rest of Egypt" sample. */
.pkgGrid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:0 auto}
@media (max-width:820px){.pkgGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.pkgGrid{grid-template-columns:1fr}}
.pkgCard{
position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
background:var(--ink-lift);border-radius:16px;overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,.16),0 14px 30px rgba(0,0,0,.22);
transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pkgCard:hover{transform:translateY(-3px)}
.pkgCard--featured{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgba(0,0,0,.26)}
.pkgCard__badge{
position:absolute;top:14px;right:14px;z-index:2;
background:var(--gold);color:var(--ink);font-size:10px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
}
.pkgCard__photo{height:128px;background-size:cover;background-position:center;flex:none}
.pkgCard__body{padding:15px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pkgCard__tag{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.pkgCard__name{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--paper)}
.pkgCard__meta{
display:flex;gap:10px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--haze-dim);
}
.pkgCard__desc{font-size:12px;line-height:1.5;color:var(--haze);flex:1;margin:1px 0 0}
.pkgCard__price{margin:2px 0 0;font-size:11px;color:var(--haze-dim)}
.pkgCard__price strong{display:block;margin-top:1px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--paper)}
.pkgCard__cta{
margin-top:8px;display:block;text-align:center;padding:9px;border-radius:9px;
background:var(--deep);color:#fff;font-size:11.5px;font-weight:700;
transition:opacity .3s var(--ease);
}
.pkgCard--featured .pkgCard__cta{background:var(--gold);color:var(--ink)}
.pkgCard:hover .pkgCard__cta{opacity:.9}
body.theme-light .pkgCard{background:#fff;box-shadow:0 1px 2px rgb(var(--deep-rgb) / .05),0 14px 30px rgb(var(--deep-rgb) / .08)}
body.theme-light .pkgCard--featured{box-shadow:0 0 0 2px var(--gold),0 18px 36px rgb(var(--deep-rgb) / .13)}
body.theme-light .pkgCard__name{color:var(--ink)}
body.theme-light .pkgCard__meta{color:var(--muted)}
body.theme-light .pkgCard__desc{color:var(--muted-2)}
body.theme-light .pkgCard__price strong{color:var(--ink)}
/* top hero only: lighter veil so the photo shows through; the text
carries its own shadow to stay readable */
#main > .band--hero:first-child .band__veil{
background:
linear-gradient(to bottom,rgb(var(--ink-rgb) / .5),rgb(var(--ink-rgb) / 0) 26%),
radial-gradient(ellipse 60% 45% at 50% 46%,rgb(var(--ink-rgb) / .3),rgb(var(--ink-rgb) / 0) 72%),
linear-gradient(to top,rgb(var(--ink-rgb) / .4),rgb(var(--ink-rgb) / .06) 30%,rgb(var(--ink-rgb) / .2));
}
#main > .band--hero:first-child .band__dsp{text-shadow:0 2px 24px rgb(var(--ink-rgb) / .45)}
#main > .band--hero:first-child .band__sub{color:#fff;font-weight:600;text-shadow:0 1px 3px rgb(var(--ink-rgb) / .85),0 0 22px rgb(var(--ink-rgb) / .75)}
/* city switcher — the homepage's gold pill (same offerTabs__ classes,
so it looks identical) sitting on the hero's bottom edge. Each city's
own hero band is hidden inside its panel: its photo, title and line
move up into the page hero instead, so nothing is lost. */
.citySwitch{position:relative;z-index:3;margin-top:calc(-1 * clamp(76px,9vh,104px));margin-bottom:clamp(30px,4vh,48px);padding:0 var(--pad)}
body.theme-light .citySwitch .offerTabs__btn:not(.is-active){color:var(--mint)}
.citySwitch .offerTabs__nav{margin-bottom:0;box-shadow:0 10px 30px rgb(var(--ink-rgb) / .25)}
.cityPanel > .band--hero{display:none}
#main > .band--hero:first-child .band__figure img{transition:opacity .35s ease}
#main > .band--hero:first-child.is-swapping .band__figure img{opacity:0}
/* Cairo timeline photo slots, until the real photos arrive */
.nfPh{width:100%;aspect-ratio:16/10;border-radius:16px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#27474a,#0f2224);box-shadow:0 2px 4px rgba(58,49,40,.06),0 22px 44px rgba(58,49,40,.13)}
.nfPh span{font-size:clamp(15px,1.8vw,22px);font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.35)}