/* EDU Imagery — shared site chrome (nav + footer).
   Lifted from index.html so every page wears the same header and footer.
   Edit here once instead of in each file. */
.ni{width:100%;max-width:1340px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:0.7rem}
.logo-img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(46,127,255,0.4))}
.logo-wrap{display:flex;flex-direction:column;line-height:1}
.logo-txt{font-family:var(--fb,'Inter',system-ui,sans-serif);font-size:1.18rem;font-weight:600;letter-spacing:0.18em;color:#fff}
.logo-txt b{font-weight:400}
.logo-sub{font-size:0.42rem;letter-spacing:0.42em;color:var(--blue2,#4d94ff);font-weight:500;margin-top:3px}
.nl{display:flex;align-items:center;gap:2.2rem}
.nl a:not(.ncta){font-size:0.82rem;font-weight:400;color:#b6bdc9;transition:color 0.2s;letter-spacing:0.04em}
.nl a:not(.ncta):hover{color:#fff}
.ncta{white-space:nowrap;padding:0.6rem 1.4rem;border-radius:9px;font-weight:600;font-size:0.8rem;letter-spacing:0.03em;background:linear-gradient(135deg,var(--blue,#2e7fff) 0%,var(--blue3,#1e5fd8) 100%);color:#fff !important;box-shadow:var(--shadow-blue,0 10px 40px rgba(46,127,255,0.25));transition:all 0.25s;border:1px solid rgba(255,255,255,0.12)}
.ncta:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(46,127,255,0.45)}
.burg{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burg span{display:block;width:24px;height:2px;border-radius:2px;background:#fff;transition:all 0.25s}
/* FOOTER */
footer{position:relative;border-top:1px solid var(--bord,rgba(255,255,255,0.08));background:linear-gradient(180deg,transparent,rgba(46,127,255,0.04))}
.foot-top{max-width:1200px;margin:0 auto;padding:4rem 2rem 2.5rem;display:grid;grid-template-columns:2.4fr 1fr 1fr 1.2fr;gap:3rem}
.flogo{display:flex;align-items:center;gap:0.7rem;margin-bottom:1.1rem}
.flogo img{width:40px;height:40px;object-fit:contain}
.flogo-txt{font-size:1.1rem;font-weight:600;letter-spacing:0.16em;color:#fff}
.fdesc{font-size:0.85rem;color:var(--tx3,#828b9d);line-height:1.8;font-weight:400;max-width:250px}
.fcol h5{font-size:0.68rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--tx2,#b6bdc9);margin-bottom:1.1rem}
.fcol ul{list-style:none}
.fcol li{margin-bottom:0.6rem}
.fcol a{font-size:0.85rem;color:var(--tx3,#828b9d);transition:color 0.2s;font-weight:400}
.fcol a:hover{color:var(--blue2,#4d94ff)}
.foot-bot{max-width:1200px;margin:0 auto;padding:1.5rem 2rem;border-top:1px solid var(--bord,rgba(255,255,255,0.08));display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;font-size:0.8rem;color:var(--tx3,#828b9d);font-weight:400}
/* ============ 4. NAV RESCUE (fixes both known site-wide nav bugs) ============ */
/* bug (b): subtitle never wraps again, and becomes legible */
.logo{flex-shrink:0}
.logo-sub{white-space:nowrap;font-size:0.5rem;letter-spacing:0.34em}
/* living nav: deepen on scroll + page-progress hairline (element injected by ui-shared.js) */
#nav.scrolled{background:rgba(6,12,36,0.92)}
main.card .logo{animation:floaty 6s ease-in-out infinite}
@media(max-width:980px){.foot-top{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:640px){.nl{display:none}.burg{display:flex}.foot-top{grid-template-columns:1fr 1fr;text-align:center}.foot-top>div:first-child{grid-column:1/-1;display:flex;flex-direction:column;align-items:center}.foot-top>.fcol:last-child{grid-column:1/-1;text-align:center}}
@media(max-width:640px){/* Footer */
  .foot-top{padding:2.5rem 1.25rem 1.5rem}.foot-bot{padding:1rem 1.25rem;flex-direction:column;gap:0.4rem;text-align:center}}
@media(max-width:1080px){.logo-sub{display:none}.nl{gap:1.3rem}.nl a:not(.ncta){font-size:0.78rem}.ncta{padding:0.55rem 1.1rem}}
@media(max-width:880px){.nl,.ncta{display:none}.burg{display:flex}}
@media (prefers-reduced-motion: reduce){.phero-glow,.hbadge-dot,.pcard-badge .d,.skel-card::after,
  main.card > *,main.card .logo,.thanks,#rate span.pop,
  .modal.open .mfr,.qmodal.open .qmodal-box,.dlm.open .dlm-card,
  #gx-lbimg.lb-in,.tick{animation:none !important}}


/* ── Base header ───────────────────────────────────────────────────────────
   These lived inline on index.html and a handful of others, so any page built
   without that block got a nav at the right height with no background — the
   page scrolled visibly underneath it. edu-quote, the shop and both galleries
   were all in that state. Defining them here means a new page only needs the
   nav markup and this stylesheet.

   Taken verbatim from index.html, so pages that still carry their own copy
   render identically whichever order the two land in. The scale-up further
   down this file then applies on top, exactly as before. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:74px;display:flex;align-items:center;background:rgba(6,12,36,0.72);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--bord);transition:background 0.3s}
.ni{width:100%;max-width:1340px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:0.7rem}
.logo-img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(46,127,255,0.4))}
.logo-wrap{display:flex;flex-direction:column;line-height:1}
.logo-txt{font-family:var(--fb);font-size:1.18rem;font-weight:600;letter-spacing:0.18em;color:#fff}
.logo-txt b{font-weight:400}
.logo-sub{font-size:0.42rem;letter-spacing:0.42em;color:var(--blue2);font-weight:500;margin-top:3px}
.nl{display:flex;align-items:center;gap:2.2rem}
.nl a:not(.ncta){font-size:0.82rem;font-weight:400;color:#b6bdc9;transition:color 0.2s;letter-spacing:0.04em}
.nl a:not(.ncta):hover{color:#fff}
.ncta{white-space:nowrap;padding:0.6rem 1.4rem;border-radius:9px;font-weight:600;font-size:0.8rem;letter-spacing:0.03em;background:linear-gradient(135deg,var(--blue) 0%,var(--blue3) 100%);color:#fff !important;box-shadow:var(--shadow-blue);transition:all 0.25s;border:1px solid rgba(255,255,255,0.12)}
.ncta:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(46,127,255,0.45)}
.burg{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burg span{display:block;width:24px;height:2px;border-radius:2px;background:#fff;transition:all 0.25s}
@media(max-width:880px){.nl,.ncta{display:none}.burg{display:flex}}

/* ── Header scale ──────────────────────────────────────────────────────────
   The nav was drawn small: a 42px mark, a 1.18rem wordmark, 0.8rem links.
   Height lives in --navh so the bar and everything pinned below it (the mobile
   sheet, the scroll-spy offsets) can never drift apart. This file loads last
   in <head>, so these govern every page. Change the header once, here. */
:root{--navh:84px}
nav#nav{height:var(--navh)}
.ni{padding:0 2.25rem}
.logo{gap:0.85rem}
.logo-img{width:54px;height:54px}
.logo-txt{font-size:1.46rem;letter-spacing:0.16em}
.logo-sub{font-size:0.6rem;letter-spacing:0.2em}
.nl{gap:2.1rem}
.nl a:not(.ncta){font-size:0.95rem}
.ncta{padding:0.72rem 1.65rem;font-size:0.9rem}
.mnav{top:var(--navh)}

@media(max-width:1080px){
  :root{--navh:80px}
  .logo-img{width:46px;height:46px}
  .logo-txt{font-size:1.26rem}
  .nl{gap:1.5rem}
  .nl a:not(.ncta){font-size:0.88rem}
}
@media(max-width:640px){
  :root{--navh:74px}
  .ni{padding:0 1.15rem}
  .logo-img{width:40px;height:40px}
  .logo-txt{font-size:1.1rem;letter-spacing:0.14em}
}

/* ── Gradient text descenders ──────────────────────────────────────────────
   `background-clip:text` paints the gradient only inside the element's box, so
   any glyph that hangs below the line box gets sliced — the tails of g, p, y, j
   and q. It showed on "Videography" and "Photography" in the services headings,
   where the line-height was 1.08.

   A little breathing room under the baseline and the descenders sit inside the
   painted area. Applied to every clipped element rather than the two that were
   reported, since the same rule governs the hero headings on nine other pages
   and would fail the moment one of them gained a descender. */
[style*="background-clip"],.grad,.gg,.gb,.ga,.gr,
.srv-row-head h3,.pkg-price,.rev-amount,.prop-amount{
  padding-bottom:0.08em;
  line-height:1.28;
}
.srv-row-head h3{line-height:1.3}

/* Wide monitors: the nav was running at 100% of its usable width (1268px of
   content in 1276px), which is why it read as cramped. Give it more room and
   more air between links — but only above 1500px, or narrower screens overflow. */
@media(min-width:1500px){
  .ni{max-width:1500px}
  .nl{gap:2.6rem}
}
@media(min-width:1800px){
  .ni{max-width:1620px}
  .nl{gap:3rem}
}

/* ── Nav breathing room ────────────────────────────────────────────────────
   The logo and the links met exactly at 1200px: the links fill the bar from
   about 1250px down, but the tighter nav did not start until 1080px, so there
   was a band of common laptop widths where the two blocks touched. A gap on
   the container guarantees they never do, whatever the link text becomes. */
.ni{gap:3rem}
@media(max-width:1500px){
  .nl{gap:1.4rem}
  .nl a:not(.ncta){font-size:0.82rem}
  .ncta{padding:0.55rem 1.05rem}
}
/* Same reason as the desktop links: those three pages set --tx to #ffffff for
   their own body copy, which bled into the menu. The header owns its colour. */
.mnav a{color:#eaf1ff}

/* Nine links plus the logo stop fitting at about 1250px: below that the gap
   collapsed onto its 3rem floor and the bar read as cramped all the way down
   to the old 640px burger breakpoint. The menu takes over there instead. */
@media(max-width:1250px){
  .nl{display:none}
  .burg{display:flex}
}