/* Shared section styles for Company, Industries, Services and Downloads pages. */

/* ---------- Scroll reveal (script adds .ug-js; elements already on screen are never hidden) ---------- */
[data-ug-reveal] { transition: opacity 0.7s var(--ug-ease) var(--ug-d, 0ms), translate 0.7s var(--ug-ease) var(--ug-d, 0ms); }
.ug-js [data-ug-reveal]:not(.is-in) { opacity: 0; translate: 0 28px; }
[data-ug-reveal].is-instant { transition: none; }

/* ---------- Header band with art ---------- */
.ug-bandhead__copy { display: grid; gap: 1.25rem; align-content: start; }
.ug-bandhead__art { display: none; }
.ug-bandhead__art svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.35)); }
.ug-art--static .ug-anim { animation: none; }
@media (min-width: 62em) {
	.ug-bandhead--art .ug-bandhead__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 3rem; }
	.ug-bandhead--art .ug-bandhead__art { display: block; }
	.ug-bandhead--art { padding-bottom: 4rem; }
}
.ug-bandhead--industry, .ug-bandhead--service, .ug-bandhead--downloads {
	background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), var(--wp--preset--gradient--deep);
	background-size: 36px 36px, 36px 36px, auto;
}
.ug-bandhead--sustainability { background: linear-gradient(160deg, #0e1033 0%, #123f68 55%, #2f5f1c 130%); }
.ug-bandhead--quality { background: linear-gradient(160deg, #0e1033 0%, #1c1f5c 50%, #025e9d 140%); }
.ug-bandhead--why, .ug-bandhead--mission { background: radial-gradient(ellipse 60% 80% at 85% 20%, rgba(232, 162, 29, 0.22), transparent 70%), var(--wp--preset--gradient--deep); }

/* ---------- Sections ---------- */
.ug-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.ug-section--tint { background: var(--wp--preset--color--mist); }
.ug-section--dark { position: relative; background: var(--wp--preset--gradient--deep); color: rgba(255, 255, 255, 0.86); }
.ug-section__head { display: grid; gap: 0.9rem; max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.ug-section__head h2 { margin: 0; font-size: var(--wp--preset--font-size--heading-2); }
.ug-section--dark .ug-section__head h2 { color: #fff; }
.ug-lead { margin: 0; font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--slate); }
.ug-section--dark .ug-lead { color: rgba(255, 255, 255, 0.8); }

/* ---------- Icon tile with depth ---------- */
.ug-tile {
	display: grid; place-items: center; flex: none; width: 4rem; height: 4rem; border-radius: 18px; color: var(--wp--preset--color--indigo);
	background: linear-gradient(150deg, #fff 0%, var(--wp--preset--color--mist) 100%); border: 1px solid var(--wp--preset--color--rule);
	box-shadow: 0 1px 0 #fff inset, 0 10px 18px -8px rgba(14, 16, 51, 0.28);
	transition: background var(--ug-t-base) linear, color var(--ug-t-fast) linear, transform var(--ug-t-slow) var(--ug-ease);
}
.ug-tile .ug-icon { width: 2.3rem; height: 2.3rem; }
.ug-tile--lg { width: 5rem; height: 5rem; border-radius: 22px; }
.ug-tile--lg .ug-icon { width: 2.9rem; height: 2.9rem; }

/* ---------- Card with 3D hover ---------- */
.ug-card3d {
	position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.5rem; height: 100%;
	border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--radius--lg); background: #fff; box-shadow: var(--wp--preset--shadow--soft);
	transform: perspective(900px) rotateX(var(--ug-rx, 0deg)) rotateY(var(--ug-ry, 0deg)) translateY(var(--ug-lift, 0));
	transition: transform var(--ug-t-base) var(--ug-ease), box-shadow var(--ug-t-base) var(--ug-ease), border-color var(--ug-t-fast) linear;
}
.ug-card3d:hover, .ug-card3d:focus-within { --ug-lift: -6px; box-shadow: var(--wp--preset--shadow--deep); border-color: transparent; }
.ug-card3d:hover .ug-tile { background: var(--wp--preset--gradient--brand); color: #fff; border-color: transparent; transform: translateY(-3px) scale(1.05); }
.ug-card3d h2, .ug-card3d h3 { margin: 0; font-size: 1.625rem; line-height: 1.05; }
.ug-card3d p { margin: 0; color: var(--wp--preset--color--slate); }

/* ---------- Closing call to action ---------- */
.ug-ctaband { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--wp--preset--gradient--brand); color: #fff; }
.ug-ctaband::before { content: ""; position: absolute; z-index: -1; right: -4rem; bottom: -6rem; width: 22rem; height: 22rem; opacity: 0.1; background: #fff; -webkit-mask: var(--ug-mark) center / contain no-repeat; mask: var(--ug-mark) center / contain no-repeat; }
.ug-ctaband__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.ug-ctaband h2 { margin: 0 0 0.4rem; color: #fff; font-size: var(--wp--preset--font-size--heading-3); }
.ug-ctaband p { margin: 0; max-width: 36rem; font-size: var(--wp--preset--font-size--large); color: rgba(255, 255, 255, 0.9); }

/* ---------- Empty state ---------- */
.ug-emptybox { display: grid; justify-items: center; gap: 0.75rem; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; border: 1.5px dashed #b9bfd4; border-radius: var(--wp--custom--radius--lg); background: #fff; text-align: center; }
.ug-emptybox .ug-tile { margin-bottom: 0.25rem; }
.ug-emptybox :is(h2, h3) { margin: 0; font-size: 1.75rem; }
.ug-emptybox p { margin: 0; max-width: 34rem; color: var(--wp--preset--color--slate); }

/* ---------- Industries ---------- */
.ug-igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.ug-igrid > li { margin: 0; }
.ug-icard { padding: 0; overflow: hidden; gap: 0; }
.ug-icard__top {
	position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; color: rgba(255, 255, 255, 0.92);
	background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px), var(--wp--preset--gradient--deep);
	background-size: 28px 28px, 28px 28px, auto;
}
.ug-icard__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; mix-blend-mode: luminosity; }
.ug-icard__top .ug-icon { position: relative; width: 4.5rem; height: 4.5rem; color: var(--wp--preset--color--amber); transition: transform var(--ug-t-slow) var(--ug-ease); }
.ug-icard:hover .ug-icard__top .ug-icon { transform: scale(1.12) translateY(-3px); }
.ug-icard__body { display: flex; flex: 1; flex-direction: column; gap: 0.7rem; padding: 1.25rem 1.4rem 1.4rem; }
.ug-icard__link { color: var(--wp--preset--color--navy); text-decoration: none; }
.ug-icard__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ug-icard__link:focus-visible { outline: none; }
.ug-icard__link:focus-visible::after { outline: 3px solid var(--ug-focus); outline-offset: -3px; border-radius: var(--wp--custom--radius--lg); }
.ug-icard__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.4rem; color: var(--wp--preset--color--indigo); font-weight: 600; }
.ug-icard__more .ug-icon { width: 1.1rem; height: 1.1rem; transition: transform var(--ug-t-base) var(--ug-ease); }
.ug-icard:hover .ug-icard__more .ug-icon { transform: translateX(5px); }

.ug-ind-hero-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; mix-blend-mode: luminosity; }
.ug-challenges { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.ug-challenges li { margin: 0; padding: 1.4rem 1.5rem; border: 1px solid var(--wp--preset--color--rule); border-left: 5px solid var(--wp--preset--color--amber); border-radius: 4px var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 4px; background: #fff; box-shadow: var(--wp--preset--shadow--soft); }
.ug-challenges h3 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.ug-challenges p { margin: 0; color: var(--wp--preset--color--slate); }
.ug-catlinks { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.ug-catlinks li { margin: 0; }
.ug-catlinks a { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem 0.8rem 0.8rem; border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--radius--md); background: #fff; color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: none; box-shadow: var(--wp--preset--shadow--soft); transition: transform var(--ug-t-base) var(--ug-ease), box-shadow var(--ug-t-base) var(--ug-ease); }
.ug-catlinks a:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lift); }
.ug-catlinks .ug-tile { width: 3rem; height: 3rem; border-radius: 12px; }
.ug-catlinks .ug-tile .ug-icon { width: 1.8rem; height: 1.8rem; }
.ug-prose-wrap { max-width: 50rem; }
.ug-prose-wrap h2 { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--heading-3); }
.ug-prose-wrap > * + * { margin-top: 1rem; }

/* ---------- Services ---------- */
.ug-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.ug-sgrid > li { margin: 0; }
.ug-scard { overflow: hidden; }
.ug-scard::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--wp--preset--gradient--brand); transform: scaleX(0.28); transform-origin: left; transition: transform var(--ug-t-slow) var(--ug-ease); }
.ug-scard:hover::before, .ug-scard:focus-within::before { transform: scaleX(1); }
.ug-scard__link { color: var(--wp--preset--color--navy); text-decoration: none; }
.ug-scard__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ug-scard__link:focus-visible { outline: none; }
.ug-scard__link:focus-visible::after { outline: 3px solid var(--ug-focus); outline-offset: -3px; border-radius: var(--wp--custom--radius--lg); }
.ug-split { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.ug-aside { display: grid; gap: 1.25rem; align-content: start; }
.ug-aside__box { padding: 1.5rem; border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--radius--lg); background: #fff; box-shadow: var(--wp--preset--shadow--soft); }
.ug-aside__box h2 { margin: 0 0 0.75rem; font-size: 1.5rem; }
.ug-aside__box ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.ug-aside__box li { margin: 0; }
.ug-aside__box ul a { display: block; padding: 0.4rem 0; color: var(--wp--preset--color--navy); font-weight: 500; text-decoration: none; }
.ug-aside__box ul a:hover, .ug-aside__box ul a[aria-current] { color: var(--wp--preset--color--royal); }
.ug-aside__box--dark { background: var(--wp--preset--gradient--brand); border-color: transparent; color: #fff; }
.ug-aside__box--dark h2 { color: #fff; }
.ug-aside__box--dark p { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.9); }
@media (min-width: 62em) {
	.ug-split { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3.5rem; }
	.ug-aside { position: sticky; top: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ug-card3d { transform: none; }
}

/* ---------- Industry and form helpers ---------- */
.ug-ind-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--preset--shadow--deep); }
.ug-formsec .ug-form-wrap { max-width: 52rem; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--radius--lg); background: #fff; box-shadow: var(--wp--preset--shadow--lift); scroll-margin-top: 8rem; }
.ug-more { margin: 1.75rem 0 0; }
.ug-more .ug-btn { display: inline-flex; }

/* ---------- Card grids (Company, Contact) ---------- */
.ug-pillars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ug-pillars > li { margin: 0; }
.ug-pillars--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ug-pillar__link { color: inherit; text-decoration: none; }
.ug-pillar__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ug-pillar__link:focus-visible { outline: none; }
.ug-pillar__link:focus-visible::after { outline: 3px solid var(--ug-focus); outline-offset: -3px; border-radius: var(--wp--custom--radius--lg); }

/* ======================================================================
   Phase 7: photo bands, industry scenes, graded photo figures
   ====================================================================== */

/* Header band with a graded photograph behind the copy. */
.ug-bandhead__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; mix-blend-mode: luminosity; }
.ug-bandhead--photo { background-color: #0e1033; }
.ug-bandhead--photo::before {
	inset: 0; right: auto; top: auto; width: auto; height: auto; opacity: 1; -webkit-mask: none; mask: none; z-index: -1;
	background: linear-gradient(90deg, rgba(14, 16, 51, 0.95) 0%, rgba(14, 16, 51, 0.88) 52%, rgba(28, 31, 92, 0.5) 100%), radial-gradient(ellipse 60% 80% at 90% 10%, rgba(232, 162, 29, 0.2), transparent 70%);
}
.ug-bandhead--photo .ug-bandhead__text { color: #fff; text-shadow: 0 1px 14px rgba(14, 16, 51, 0.7); }
.ug-bandhead--photo .ug-bandhead__art { display: none; }
.ug-bandhead--photo.ug-bandhead--art .ug-bandhead__inner { grid-template-columns: minmax(0, 1fr); }
.ug-bandhead--photo { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.ug-bandhead--industry .ug-bandhead__icon { color: var(--ug-ind-a, var(--wp--preset--color--amber)); }
.ug-indart--hero { color: rgba(255, 255, 255, 0.9); }

/* Industry cards: a graded photograph, or this industry's own scene and accent colour. */
.ug-icard__top {
	aspect-ratio: 16 / 10; isolation: isolate;
	background: radial-gradient(ellipse 70% 90% at 78% 12%, color-mix(in srgb, var(--ug-ind-a, #e8a21d) 42%, transparent), transparent 72%), linear-gradient(160deg, #0e1033 0%, var(--ug-ind-b, #1c1f5c) 150%);
	background-size: auto;
}
.ug-icard__scene { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4% 6% 2%; color: rgba(255, 255, 255, 0.9); transition: transform var(--ug-t-slow) var(--ug-ease); }
.ug-icard:hover .ug-icard__scene, .ug-icard:focus-within .ug-icard__scene { transform: scale(1.05) translateY(-2px); }
.ug-icard__top img { opacity: 1; mix-blend-mode: normal; transition: transform var(--ug-t-slow) var(--ug-ease); }
.ug-icard__top.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, var(--ug-ind-b, #1c1f5c), transparent 70%); mix-blend-mode: multiply; opacity: 0.55; }
.ug-icard__top.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(14, 16, 51, 0.72)); }
.ug-icard:hover .ug-icard__top img { transform: scale(1.06); }
.ug-icard__icon { position: absolute; z-index: 2; left: 1rem; bottom: 0.9rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; color: #fff; background: rgba(14, 16, 51, 0.55); border: 1px solid rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ug-icard__top .ug-icard__icon .ug-icon { position: static; width: 1.7rem; height: 1.7rem; color: var(--ug-ind-a, var(--wp--preset--color--amber)); }
.ug-icard:hover .ug-icard__top .ug-icard__icon .ug-icon { transform: none; }
.ug-ind-accent .ug-challenges li { border-left-color: var(--ug-ind-a, var(--wp--preset--color--amber)); }

/* Graded photo figure. Temporary stock images carry an "Illustrative image" tag. */
.ug-photo { position: relative; margin: 0; overflow: hidden; isolation: isolate; border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--navy); box-shadow: var(--wp--preset--shadow--lift); }
.ug-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ug-ease); }
.ug-photo.wide img { aspect-ratio: 16 / 7; }
.ug-photo.tall img { aspect-ratio: 3 / 4; }
.ug-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(155deg, rgba(28, 31, 92, 0.3), rgba(14, 16, 51, 0) 55%, rgba(232, 162, 29, 0.14)); }
.ug-photo:hover img { transform: scale(1.04); }
.ug-photo__tag { position: absolute; z-index: 3; top: 0.75rem; right: 0.75rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(14, 16, 51, 0.74); color: #fff; font-size: 0.75rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ug-photo figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 0.9rem; color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(14, 16, 51, 0.86)); }
.ug-photostrip { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; list-style: none; }
.ug-photostrip > li { margin: 0; }
/* Text beside a photograph. */
.ug-feature { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62em) { .ug-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .ug-feature--flip > :first-child { order: 2; } }
@media (prefers-reduced-motion: reduce) { .ug-photo img, .ug-icard__top img { transition: none; } .ug-photo:hover img, .ug-icard:hover .ug-icard__top img { transform: none; } }
.ug-motion-off .ug-photo img, .ug-motion-off .ug-icard__top img { transition: none; }
.ug-bandhead__tag { top: auto; right: 1rem; bottom: 1.1rem; z-index: 2; }
.ug-photo--spaced { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ug-photoband { padding-top: clamp(2rem, 4vw, 3rem); }
/* Consistent GP grading for every body photograph. */
.ug-photo img { filter: saturate(0.82) contrast(1.04); }
.ug-photo::after { background: linear-gradient(155deg, rgba(28, 31, 92, 0.42), rgba(14, 16, 51, 0.08) 55%, rgba(232, 162, 29, 0.16)); }
.ug-photo.wide img { aspect-ratio: 16 / 6; }
@media (max-width: 40em) { .ug-photo.wide img { aspect-ratio: 4 / 3; } }
.ug-bandhead__photo { opacity: 0.4; }