/* Unified navbar + progressive blur, applied on every page */

/* Dark fallback so the page is never briefly plain white behind the nav while
   hero canvases/backgrounds are still loading (white nav text would be invisible). */
html{ background-color:#0d1f1f; }

/* White text/logo at all times, on every page, regardless of __light/__dark markup or scroll state. */
.main-h-bottom{ color:#fff !important; }

/* .main-h has an opaque white background by theme default, which otherwise completely
   blocks .pg-blur (z-index:3, behind .main-h's z-index:4) from ever showing through on
   pages without a hero. Make it transparent so the progressive blur is visible everywhere. */
.main-h{ background-color:transparent !important; position:absolute !important; width:100%; }

.main-h-bottom .mods_el-ic,
.main-h-bottom .mods_el-tx{ color:#fff !important; }
.main-h-bottom .logo-w.__light{ display:block !important; }
.main-h-bottom .logo-w.__dark{ display:none !important; }

/* Scrolled (.__fixed, toggled by existing scroll JS): keep the same transparent/blur look
   and white text — nav and blur should never disappear or flip to a solid background. */
.main-h .main-h-bottom.__fixed{
	background-color:transparent !important;
	color:#fff !important;
	box-shadow:none !important;
	animation:none !important;
	opacity:1 !important;
}
.main-h-bottom.__fixed .mods_el-ic,
.main-h-bottom.__fixed .mods_el-tx{ color:#fff !important; }
.main-h-bottom.__fixed .logo-w.__light{ display:block !important; }
.main-h-bottom.__fixed .logo-w.__dark{ display:none !important; }

/* Two-state nav: desktop (≥768px) shows the full horizontal menu,
   mobile (<768px) shows the hamburger. The theme's Bootstrap classes
   (hidden-sm/hidden-md on the menu, hidden-lg on the hamburger) create
   a three-state breakpoint at 1200px — override them so there is no
   intermediate "centered logo + hamburger" tablet layout. */
@media (min-width:768px){
	nav.main-menu-w.hidden-sm,
	nav.main-menu-w.hidden-md{ display:block !important; }
	.mods_el.hidden-lg{ display:none !important; }
}

/* Mobile nav has only one visual state (no separate "unscrolled" look).
   The theme's wrapper (.main-h-bottom-w) carries a constant 15px top
   padding meant to sit above the un-fixed bar. Once .__fixed switches
   the bar to position:fixed, it escapes that padding and sits flush at
   top:0 — so pre-scroll, mobile showed a 15px gap above the bar that
   disappeared the instant .__fixed kicked in. Zeroing the top padding
   on mobile makes the un-fixed bar sit flush from the start, matching
   the fixed bar's position exactly. */
@media (max-width:767px){
	.main-h-bottom-w{ padding-top:0 !important; }
}

/* Progressive blur: always visible, whether scrolled or not */
.pg-blur{
	position:fixed;top:0;left:0;right:0;height:160px;pointer-events:none;
	z-index:3;opacity:1;
}
.pg-blur:before{
	content:'';position:absolute;inset:0;background:rgba(0,0,0,.6);
	-webkit-mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.pg-blur > span{position:absolute;inset:0;display:block;}
.pg-blur > span:nth-child(1){-webkit-backdrop-filter:blur(0.625px);backdrop-filter:blur(0.625px);-webkit-mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);}
.pg-blur > span:nth-child(2){-webkit-backdrop-filter:blur(1.25px);backdrop-filter:blur(1.25px);-webkit-mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 87.5%);mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 87.5%);}
.pg-blur > span:nth-child(3){-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);-webkit-mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 62.5%);mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 62.5%);}
.pg-blur > span:nth-child(4){-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 45%);mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 45%);}
.pg-blur > span:nth-child(5){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 30%);mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 30%);}
.pg-blur > span:nth-child(6){-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%);mask:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%);}

/* Nav content (.main-h, z-index:4 by theme default) already stacks above .pg-blur (z-index:3) */

/* The animated line/particle canvas on the home hero (#large-header, data-vc-full-width)
   is supposed to be stretched edge-to-edge by WPBakery's own JS, which measures the row's
   offset and applies a negative margin + explicit width at runtime. That measurement can
   end up stale/short (leaving the lines short of the right edge) depending on load timing
   and layout changes elsewhere on the page. Force the row edge-to-edge with plain CSS so
   it's correct regardless of when/whether that JS runs. */
#large-header{
	width:100vw !important;
	max-width:100vw !important;
	margin-left:calc(50% - 50vw) !important;
	margin-right:calc(50% - 50vw) !important;
	left:0 !important; right:0 !important;
}
#demo-canvas{ width:100% !important; }

/* ============================================================
   Constellation canvas visibility fix
   ------------------------------------------------------------
   The theme's own style.css forces `#large-header{position:absolute
   !important}` (a built-in Avenue-theme feature, not something we
   added) and takes it out of normal flow. The greeting row that
   visually overlaps it (`.vc_custom_1582412933892`) was previously
   given `position:relative;z-index:1` as a click-swallowing fix —
   but a numbered z-index on a positioned element bundles ALL of its
   descendants (its opaque sky-image background AND its text) into
   ONE atomic stacking unit that competes against #large-header
   (z-index:0) as a whole. Since 1 > 0, that whole opaque unit wins
   and paints entirely above the canvas — completely burying the
   constellation lines/dots behind the sky photo, invisible even
   though the canvas is still actively drawing (verified via
   getImageData pixel readback).

   Fix: stop treating the row as one opaque unit. Remove its own
   z-index (back to auto) so its children's z-index values escape
   into the shared ancestor stacking context and compete directly
   against #large-header, in four explicit tiers:
     1 — sky-image background (bottom)
     2 — #large-header / canvas (visible ON TOP of sky)
     3 — text column: greeting, description, CTA (unobscured, and
         canvas remains pointer-events:none so it still can't swallow
         clicks meant for the CTA underneath it)
     4 — .ult-vc-seperator, the V-chevron slant (top).
   Ultimate_VC_Addons' own CSS hardcodes `.ult-vc-seperator{z-index:1}`,
   which tied with the sky-image's z:1 and lost the DOM-order tiebreak
   (sky-bg comes second in markup, so it painted over the slant).
   Corrected here with !important. */
.vc_custom_1582412933892{ z-index:auto !important; }
.vc_custom_1582412933892 .upb_row_bg{ z-index:1 !important; }
#large-header{ z-index:2 !important; }
.vc_custom_1582412933892 .wpb_column{ position:relative !important; z-index:3 !important; }
.vc_custom_1582412933892 .ult-vc-seperator{ z-index:5 !important; }

/* Every WPBakery scroll fade-in element inside the hero (.wpb_animate_when_almost_visible,
   default opacity:0 — this covers both the greeting column and the "GenAI visual
   designer" subheading text block) never settles at opacity:1 here — its `animated`
   class keeps getting re-applied (tied to the same mousemove loop that drives the
   constellation parallax), restarting the CSS animation before it finishes. The text
   is left stuck around 4-5% opacity, nearly invisible against the fully-opaque
   constellation dots drawn behind it, which reads as the dots "cropping" into the
   greeting. Force every such element in the hero fully visible and skip the
   animation outright. */
.vc_custom_1582412933892 .wpb_animate_when_almost_visible{ opacity:1 !important; animation:none !important; }
.vc_custom_1582412933892 .wpb_column{ position:relative !important; z-index:3 !important; }

/* Project image grids (Facebook/WHO/ICMR/MoHFW/Hindustan Times) are populated with
   static markup instead of WPBakery's AJAX+Isotope masonry, since there's no live
   backend to serve that AJAX call.
   A first pass used a CSS multi-column layout to avoid gaps under shorter images —
   but multi-column balances items by cumulative *height* per column, not by a fixed
   count per row. Whenever the item count isn't an exact multiple of the column count
   (e.g. 18 images / 4 columns), that height-balancing can leave one column short,
   producing a ragged tail row (e.g. 3 + 3 instead of 4 + 2).
   A real CSS grid with a fixed square aspect ratio per cell fixes both problems at
   once: grid-auto-flow always fills exactly N cells per row (so the last, partial
   row is a clean remainder — 2 for an 18-item/4-column grid), and forcing every
   cell to the same aspect ratio means every cell in a row has the same height, so
   there's never empty space left over under a shorter neighbour. The crop is a
   deliberate choice, matching a standard thumbnail-grid treatment — every grid item
   already links to the full, uncropped image via its lightbox anchor. */
.pg-masonry{
	display:grid !important;
	grid-template-columns:repeat(4, 1fr);
	gap:30px;
}
/* The grid container also carries WPBakery's ".vc_clearfix" class, which gives it a
   ::before and ::after with content:" " (float-clearing, needed by the old
   float/column layout but irrelevant to grid). In CSS Grid, a pseudo-element that
   generates a box counts as a real grid item — so that invisible ::before was
   silently occupying row 1's first cell (pushing every real image over by one) and
   the ::after was occupying the last cell of the final row, which is exactly what
   produced a lopsided tail (e.g. 3 + 3 instead of 4 + 2 for an 18-item grid).
   Removing their generated content drops them from grid layout entirely. */
.pg-masonry::before,
.pg-masonry::after{
	content:none !important;
	display:none !important;
}
.pg-masonry .vc_grid-item{
	float:none !important;
	position:static !important;
	width:100% !important;
	padding:0 !important;
	margin:0 !important;
}
.pg-masonry .vc_gitem-zone-a{
	aspect-ratio:1/1;
}
.pg-masonry .vc_gitem-zone-img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	display:block !important;
	visibility:visible !important;
}
@media (max-width:991px){ .pg-masonry{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:767px){ .pg-masonry{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .pg-masonry{ grid-template-columns:repeat(1, 1fr); } }

/* Lazy-image skeleton loader (see site-nav.js). The skeleton is an inline SVG
   overlay that fills the image's host box while the image loads, then fades out
   and is removed. Light grey, no border/outline. */
.pg-skel-host{ position:relative; }
.pg-skel{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	border:0;              /* not outlined */
	outline:0;
	pointer-events:none;   /* never block lightbox links underneath */
	z-index:2;
	opacity:1;
	transition:opacity .35s ease;
}
.pg-skel.is-done{ opacity:0; }

/* WPBakery injects a three-dot loading spinner (.vc_grid-loading) into every
   masonry grid because the grid is configured to fetch its items over AJAX from
   the original WordPress backend. That backend doesn't exist in this static
   export, so the AJAX never resolves and the dots spin forever. Our grids are
   already populated with static markup, so this loader is never needed — hide
   it everywhere. */
.vc_grid-loading{ display:none !important; }

/* Individual project pages (project-*.html) all have a white page background,
   unlike the rest of the site. The white-text nav + dark blur overlay above is
   tuned for dark/image hero backgrounds and is unreadable/wrong here, so these
   pages carry a "pg-proj-light" body class to flip the nav to a dark/black
   treatment and swap the blur's dark tint for a white one (same .6 alpha as
   the dark pages, just inverted) so the on-scroll overlay reads correctly
   against a white page background. */
body.pg-proj-light .main-h-bottom,
body.pg-proj-light .main-h-bottom .mods_el-ic,
body.pg-proj-light .main-h-bottom .mods_el-tx{ color:#000 !important; }
body.pg-proj-light .main-h-bottom .logo-w.__light{ display:none !important; }
body.pg-proj-light .main-h-bottom .logo-w.__dark{ display:block !important; }
body.pg-proj-light .main-h-bottom.__fixed,
body.pg-proj-light .main-h-bottom.__fixed .mods_el-ic,
body.pg-proj-light .main-h-bottom.__fixed .mods_el-tx{ color:#000 !important; }
body.pg-proj-light .main-h-bottom.__fixed .logo-w.__light{ display:none !important; }
body.pg-proj-light .main-h-bottom.__fixed .logo-w.__dark{ display:block !important; }
body.pg-proj-light .pg-blur:before{ background:rgba(255,255,255,.6) !important; }

/* Theme resets b/strong to font-weight:400 site-wide (style.css), which silently
   strips bold from any <strong> used to call out stats in project-page body copy.
   Restore real weight only inside project-page narration text so data points
   actually stand out, without touching <strong> anywhere else on the site. */
body.pg-proj-light .wpb_text_column strong{ font-weight:700; }

/* Go-to-top floating button, sitewide: the theme default has no border/fill
   worth seeing (just a faint rgba(0,0,0,.15) disc). Give it the same glass
   treatment as the case-study section-menu FAB (blurred dark disc + hairline
   border) so the two floating buttons read as a matching family, while the
   arrow-up icon plus a plain white border (vs. the FAB's page-accent border)
   keeps them visually distinct. */
.go_to_top{
	background-color: rgba(0,0,0,.35) !important;
	border: 1px solid rgba(255,255,255,.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
	bottom: 30px !important;
}
@media (max-width: 860px){
	.has-rail-fab .go_to_top{
		bottom: 90px !important;
	}
}
.go_to_top:hover, .go_to_top:focus-visible{
	background-color: rgba(0,0,0,.5) !important;
	border-color: rgba(255,255,255,.4) !important;
	transform: scale(1.05);
}
.go_to_top:active{ transform: scale(0.96); }

/* Footer separator: theme default is too thick (double-border = 3px visible).
   Collapse to a single 1px line. */
.vc_separator .vc_sep_line{
	border-top-width: 1px !important;
	border-bottom: none !important;
	height: auto !important;
}

/* Footer social icons: remove the square tile/background on hover, strip the
   2em×2em box sizing so icons sit flush left-aligned with the separator line,
   and turn yellow on hover instead of showing a filled square. */
.uavc-icons .aio-icon{
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
	padding: 0 !important;
	background: none !important;
	transition: color .2s ease;
}
.uavc-icons .aio-icon:hover,
.vc_row .uavc-icons .aio-icon:hover{
	background: none !important;
	color: #FFD300 !important;
}
.uavc-icons .aio-tooltip{
	margin-right: 16px;
}

/* Footer email hover: yellow on hover, smooth transition. */
.wpb_wrapper h5 a[href^="mailto"]{
	transition: color .2s ease, opacity .2s ease;
}
.wpb_wrapper h5 a[href^="mailto"]:hover{
	color: #FFD300 !important;
	opacity: 1 !important;
}

/* Footer: override the WPBakery inline 60px-all-round padding to match
   the homepage fold rhythm (shorter top, longer bottom). */
.vc_custom_1582463548330{
	padding: 50px 60px 120px !important;
}
.vc_custom_1582463548330 > .vc_column_container > .vc_column-inner{
	padding-bottom: 0;
}
@media (max-width:760px){
	.vc_custom_1582463548330{
		padding: 36px 24px 64px !important;
	}
}

/* Push content below the progressive-blur nav overlay on pages whose
   content starts at the very top (project pages, case-study pages).
   All these pages share body.single-project. */
body.single-project .main-cnts-w{ padding-top:100px !important; }

/* ── Footer spacing fix ──
   The purple CTA/footer row (.vc_custom_1582463548330) gets unequal top/bottom
   padding from theme/responsive overrides. Force equal padding and zero out
   bottom margins on the last children so top and bottom spacing match. */
.vc_custom_1582463548330{
	padding-top:60px !important;
	padding-bottom:60px !important;
}
.vc_custom_1582463548330 .wpb_wrapper > *:last-child,
.vc_custom_1582463548330 .wpb_wrapper > *:last-child p,
.vc_custom_1582463548330 .wpb_wrapper > *:last-child h5,
.vc_custom_1582463548330 .uavc-icons{
	margin-bottom:0 !important;
}

/* ── Footer redesign (rolled out sitewide 2026-07-08) ──
   Centered single-column footer at every viewport width: bold/thin two-line
   CTA heading, email, divider, then icons above the copyright line — same
   layout on mobile and desktop rather than a two-column split. Applied via
   the .pg-footer-redesign class on the footer's .vc_row, plus wrapper divs
   (.pg-footer-row1/-row1-left/-row1-right, .pg-footer-row2/-row2-left/
   -row2-right) added around the existing heading/email/copyright/icons
   markup on every page that has this footer. */
.pg-footer-redesign .pg-footer-line--bold{ font-weight:700; }
.pg-footer-redesign .pg-footer-line--thin{ font-weight:300; }

/* This row's grid is an 8/4 column split (the 4-col is empty). At mobile
   widths Bootstrap collapses both to 100% automatically, which is why
   centering already looked page-centered there — on desktop the 8-col box
   is only ~66% of the row, so centering inside it alone would sit
   left-of-center. Stretch it to the full row and drop the empty column so
   "centered" means the same thing (the true row center) at every size. */
.pg-footer-redesign > .vc_col-sm-8{ width:100% !important; float:none !important; }
.pg-footer-redesign > .vc_col-sm-4{ display:none !important; }

/* .uavc-icons .aio-tooltip above puts a 16px margin-right on every icon,
   including the last one — that trailing 16px is invisible whitespace past
   the last icon, so centering the box (which includes it) leaves the
   visible icon row sitting ~8px left of true center. Drop it only on the
   last icon so the visible glyphs, not the icon plus stray whitespace, are
   what gets centered. */
.pg-footer-redesign .uavc-icons a:last-child{ margin-right:0 !important; }

/* Centered, stacked layout at every size — desktop intentionally matches
   mobile here rather than switching to a left/right two-column split. */
.pg-footer-redesign .pg-footer-row1{
	display:flex; flex-direction:column; align-items:center; text-align:center;
	gap:20px;
}
.pg-footer-redesign .pg-footer-row2{
	display:flex; flex-direction:column-reverse; align-items:center; text-align:center;
	gap:28px; margin-top:26px;
}

/* ============================================================
   Nav centering fix
   ------------------------------------------------------------
   The theme wraps the mobile hamburger button (`.mods-w`) and
   the desktop menu (`.main-menu-w`) inside one flex-parent
   `.main-h-bottom_menu-and-mods` that's centered as a whole.
   On desktop, .mods-w's inner .mods_el is hidden-lg (display:none),
   but .mods-w itself still consumes ~60px of horizontal layout
   space (30px margin-left + 30px margin-right in the theme),
   pushing the visible desktop menu ~30px LEFT of true center.
   Collapse .mods-w wherever the full horizontal menu is shown
   (≥768px, per the two-state nav rule above) so the desktop menu
   sits precisely under the centered logo at every width, including
   the 768-991px tablet range this previously missed.
   ============================================================ */
@media (min-width: 768px){
	.main-h-bottom_menu-and-mods > .mods-w{ display:none !important; }
}

/* ============================================================
   Mobile top-padding reduction for hero sections
   ------------------------------------------------------------
   Homepage rows (Visual Composer generated `vc_custom_*` classes)
   ship with desktop-sized padding-top/bottom that reads as "roomy
   breathing space" on 1440px screens but eats a quarter of a
   844px-tall phone. Shrink them on ≤767px only. Purple contact
   footer (vc_custom_1582463548330) is intentionally left alone —
   it has 60px which is fine on mobile.
   ============================================================ */
/* Hero/greeting row — "नमस्ते, I'm Parth Garg!" typed greeting — is forced
   to exactly one viewport height on ALL screen sizes, not just mobile.
   This one rule solves two things at once:
   1. The row's own background image + V-chevron slant separator (both
      painted via the Ultimate_VC_Addons "Row Background" attached to
      this same row) now always end exactly at the viewport's bottom
      edge, regardless of how much text the greeting/description/CTA
      happen to need.
   2. The constellation canvas (#demo-canvas, clamped in the inline
      header script via clampToStarrySection() to this row's own
      offsetHeight) inherits that same full-viewport height for free —
      so the animated dots-and-lines effect now covers the whole fold
      without ever spilling past the slant into the black section below.
   `align-items:flex-start` overrides the theme's `vc_row-o-content-middle`
   (vertical-center) so the greeting sits near the top of the now-taller
   row instead of floating in the middle of a mostly-empty viewport. */
.vc_custom_1582412933892,
.vc_custom_1582412933892 > .vc-row-translate-wrapper,
.vc-row-translate-wrapper.vc_custom_1582412933892{
	min-height:100vh !important;
	align-items:flex-start !important;
}

@media (max-width:767px){
	/* Desktop keeps the theme's native 200px/260px padding; mobile
	   needs less so the greeting doesn't sit too far down a shorter,
	   narrower viewport. */
	.vc_custom_1582412933892{
		padding-top:175px !important;
		padding-bottom:60px !important;
	}
	/* Other heavy homepage row paddings — halve them on mobile. */
	.vc_custom_1683534828013{ padding-top:50px !important; }
	.vc_custom_1582000616786{ padding-top:40px !important; }
}

/* Fixed nav is ~60px tall on mobile / ~130 on desktop. Give the
   Top Projects target a scroll-margin so the h3 isn't clipped under
   the fixed bar when jumped to via #top-projects. (The "View Top
   Projects" CTA itself reuses the existing site-wide .pg-cta-btn
   class defined in index.html — no dedicated CSS needed here.) */
#top-projects{ scroll-margin-top:80px; }

/* Native smooth scroll fallback — the theme also loads a jQuery
   smooth-scroll plugin, but CSS smooth-behavior covers pages/browsers
   where JS anchor handling doesn't kick in. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
	html{ scroll-behavior:auto; }
}

/* ============================================================
   Hero background stays put (no parallax movement)
   ------------------------------------------------------------
   The greeting row's sky/field background is normally scrolled
   with the page (attachment:scroll) and additionally animated by
   the Ultimate_VC_Addons parallax JS which applies a transform
   per scroll frame. Result: the sky visibly drifts while
   scrolling and lifts off the fold together with the row.
   
   Fix: pin the background to the viewport (attachment:fixed) so
   the sky stays visually in place while the next section
   (Top Projects, opaque #000000) slides UP over it. Neutralise
   the plugin's transform/animation on this element so the pin
   isn't fought by inline styles per frame.
   
   Note: iOS Safari silently degrades attachment:fixed to scroll,
   so iOS users get the old behaviour. Everyone else gets the
   fixed effect. Acceptable graceful degradation.

   background-position:bottom is load-bearing (keeps the field/arch
   flush with the first-fold edge) and has already been silently
   overridden once by a same-selector rule loaded later in the
   cascade. Pinned here via the stable `.pg-hero-row` hook (added
   directly on the row, immune to WPBakery renumbering its
   auto-generated `.vc_custom_*` class) plus an `html body` prefix
   for extra specificity, so no later same-specificity !important
   rule can out-rank it by load order alone — a new rule would need
   to be MORE specific than this to win. Keep this the last word on
   this element's background-position; add overrides above it, not
   rules elsewhere that might load after it. */
html body .pg-hero-row .upb_row_bg,
.vc_custom_1582412933892 .upb_row_bg{
	background-attachment:fixed !important;
	background-position:center bottom !important;
	background-size:cover !important;
	background-repeat:no-repeat !important;
	transform:none !important;
	will-change:auto !important;
	transition:none !important;
	animation:none !important;
}
/* On mobile, background-attachment:fixed on this non-body element (inside the
   row's own stacking/transform context) doesn't gracefully degrade like it
   does on iOS Safari — it just fails to paint, leaving the hero background
   invisible. Revert to attachment:scroll below 768px so the image renders;
   losing the pinned-background effect there is an acceptable trade-off. */
@media (max-width:767px){
	html body .pg-hero-row .upb_row_bg,
	.vc_custom_1582412933892 .upb_row_bg{
		background-attachment:scroll !important;
	}
}

/* ============================================================
   Exhibitions page (mobile only): center the copy, purple eyebrow
   ------------------------------------------------------------
   Scoped to #page-13147 (exhibitions.html's unique article id) so it
   doesn't touch the same .tvda-subtitle/heading markup reused on other
   pages. The bottom image grid ("cards") keeps its left-aligned title/
   excerpt/date — the second block re-asserts left align there with
   higher specificity (extra .vc_grid-container-wrapper ancestor) so it
   wins over the broader centering rule regardless of source order.
   Eyebrow purple (#485cc7) matches the site-wide footer background
   (.pg-footer-redesign / vc_custom_1582463548330). */
@media (max-width:767px){
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) h3,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) h4,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) h5,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) h6,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) p{
		text-align:center !important;
	}
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) .vc_grid-container-wrapper h3,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) .vc_grid-container-wrapper h4,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) .vc_grid-container-wrapper h5,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) .vc_grid-container-wrapper h6,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) .vc_grid-container-wrapper p,
	#page-13147 .wpb-content-wrapper > .vc_row:not(.pg-footer-redesign) .vc_grid-container-wrapper div{
		text-align:left !important;
	}
	#page-13147 .tvda-subtitle{
		color:#485cc7 !important;
	}
}