/* 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:1200px;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:var(--tx2,#b6bdc9);transition:color 0.2s;letter-spacing:0.04em}
.nl a:not(.ncta):hover{color:#fff}
.ncta{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:1200px;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:var(--tx2);transition:color 0.2s;letter-spacing:0.04em}
.nl a:not(.ncta):hover{color:#fff}
.ncta{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}