/* ═══════════════════════════════════════════════════════════════
   ONESTO LIGHT DESIGN LAYER (2026)
   Loaded on every page, after style.css and onesto-unified.css.

   1. Tokens and shared buttons
   2. Header and mega menu
   3. Inner-page heroes (template-parts/hero-photo.php and .u-hero-section)
   4. Inner-page sections, cards and photo bands
   5. Closing call to action (template-parts/page-cta.php)
   6. Sitemap page
   7. Footer
   8. Scroll reveals
   ═══════════════════════════════════════════════════════════════ */

/* 1. TOKENS ─────────────────────────────────────────────────── */
:root {
	--o-navy: #042C53;
	--o-bg: #F0F5FA;
	--o-pale: #D3E1EE;
	--o-amber: #FAC775;
	--o-amber-deep: #F5B955;
	--o-text: rgba(4, 44, 83, .74);
	--o-dim: rgba(4, 44, 83, .55);
	--o-line: rgba(4, 44, 83, .12);
	--o-shadow: 0 1px 2px rgba(4, 44, 83, .05), 0 18px 40px -22px rgba(4, 44, 83, .28);
	--o-shadow-up: 0 2px 4px rgba(4, 44, 83, .06), 0 30px 60px -24px rgba(4, 44, 83, .38);
	--o-ease: cubic-bezier(.16, 1, .3, 1);
	--o-r: 18px;
}
html body { background: var(--o-bg); }

.hm-btn, .o-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	padding: 15px 28px 13px; border-radius: 100px; border: 1.5px solid transparent;
	font-size: .86rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform .5s var(--o-ease), box-shadow .5s var(--o-ease), background .35s, color .35s, border-color .35s;
}
.hm-btn svg, .o-btn svg { width: 16px; height: 16px; margin-top: -2px; transition: transform .5s var(--o-ease); }
.hm-btn:hover svg, .o-btn:hover svg { transform: translateX(5px); }
.hm-btn--amber, .o-btn--amber { background: var(--o-amber); color: var(--o-navy); box-shadow: 0 12px 26px -12px rgba(245, 185, 85, .9); }
.hm-btn--amber:hover, .o-btn--amber:hover { transform: translateY(-3px); background: var(--o-amber-deep); color: var(--o-navy); box-shadow: 0 18px 34px -12px rgba(245, 185, 85, 1); }
.hm-btn--line, .o-btn--line { border-color: var(--o-navy); color: var(--o-navy); background: transparent; }
.hm-btn--line:hover, .o-btn--line:hover { background: var(--o-navy); color: #fff; transform: translateY(-3px); }
:focus-visible { outline: 2px solid var(--o-navy); outline-offset: 3px; }

/* 2. HEADER AND MEGA MENU ───────────────────────────────────── */
html body .fnav-bar { border: 1px solid var(--o-line); box-shadow: 0 10px 34px -14px rgba(4, 44, 83, .28); padding: 10px 14px 10px 24px; }
html body .fnav.is-scrolled .fnav-bar { padding-top: 7px; padding-bottom: 7px; background: rgba(255, 255, 255, .96); }
html body .fnav-logo { display: flex; align-items: center; line-height: 0; }
html body .fnav-logo img { height: 50px; width: auto; display: block; transition: height .4s var(--o-ease); }
html body .fnav.is-scrolled .fnav-logo img { height: 42px; }
html body .fnav-link { font-size: .95rem; font-weight: 500; color: var(--o-navy); padding: 9px 14px 7px; }
html body .fnav-link:hover, html body .fnav-item--panel[data-open="true"] .fnav-link { background: rgba(250, 199, 117, .3); }
html body .fnav-cta { font-weight: 600; padding: 13px 24px 11px; transition: background .3s, color .3s, transform .4s var(--o-ease); }
html body .fnav-cta:hover { transform: translateY(-2px); }
html body .fnav-panel { border: 1px solid var(--o-line); box-shadow: 0 30px 70px -30px rgba(4, 44, 83, .45); transition: opacity .25s ease, transform .35s var(--o-ease), visibility .25s; }
html body .fnav-panel-heading { font-size: 1.02rem; font-weight: 600; color: var(--o-navy); padding-bottom: 10px; border-bottom: 2px solid var(--o-amber); display: inline-block; }
html body .fnav-panel-col a { font-size: .93rem; opacity: .9; transition: color .2s, padding .3s var(--o-ease); }
html body .fnav-panel-col a:hover, html body .fnav-panel-col a:focus-visible { color: var(--o-navy); opacity: 1; padding-left: 4px; text-decoration: underline; text-decoration-color: var(--o-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
html body .fnav-panel--simple { width: 290px; }
.fnav-group-link { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--o-line); }
.fnav-group-link a { font-weight: 600; }
@media (max-width: 1023px) {
	html body .fnav { top: 10px; width: calc(100% - 24px); }
	html body .fnav-bar { padding: 8px 10px 8px 16px; }
	html body .fnav-logo img, html body .fnav.is-scrolled .fnav-logo img { height: 40px; }
}

/* 3. INNER-PAGE HEROES ──────────────────────────────────────── */
html body .oh-hero,
html body.onesto-skin .u-hero-section {
	background: radial-gradient(55% 60% at 95% 0%, rgba(250, 199, 117, .24), transparent 70%),
		radial-gradient(60% 70% at 0% 100%, var(--o-pale), transparent 72%),
		linear-gradient(180deg, #fff 0%, var(--o-bg) 85%) !important;
	color: var(--o-navy) !important;
}
html body .oh-hero::before,
html body.onesto-skin .u-hero-section::before {
	top: 0; right: 0; bottom: 0; left: 0; width: auto; aspect-ratio: auto; border-radius: 0; filter: none;
	background: url("../textures/jali.svg") 0 0 / 64px 64px; opacity: .06;
	-webkit-mask-image: radial-gradient(60% 90% at 95% 30%, #000, transparent 70%); mask-image: radial-gradient(60% 90% at 95% 30%, #000, transparent 70%);
}
html body .oh-hero::after,
html body.onesto-skin .u-hero-section::after { display: none; }
html body .oh-hero .oh-title,
html body.onesto-skin .u-hero-section h1 { color: var(--o-navy) !important; }
html body .oh-hero .oh-title em,
html body.onesto-skin .u-hero-section h1 em { color: inherit !important; background: linear-gradient(var(--o-amber), var(--o-amber)) left 90% / 100% .14em no-repeat; }
html body .oh-hero .oh-divider { width: 84px; height: 3px; border-radius: 3px; }
html body .oh-hero .oh-lede,
html body.onesto-skin .u-hero-section p { color: var(--o-text) !important; }
html body.onesto-skin .u-hero-section strong { color: var(--o-navy) !important; }
html body .oh-hero .oh-note { color: var(--o-dim); }
html body .oh-hero .oh-back { color: var(--o-dim); }
html body .oh-hero .oh-back:hover { color: var(--o-navy); }
html body.onesto-skin .u-hero-section [class*="hero-cols"] { border-top-color: var(--o-line) !important; }
html body.onesto-skin .u-hero-section [class*="label"],
html body.onesto-skin .u-hero-section [class*="eyebrow"],
html body.onesto-skin .u-hero-section [class*="crumb"],
html body.onesto-skin .u-hero-section [class*="crumb"] a,
html body.onesto-skin .u-hero-section [class*="meta"] { color: var(--o-dim) !important; }
html body.onesto-skin .u-hero-section [class*="-btn"],
html body .oh-hero .oh-btn { border-radius: 100px !important; letter-spacing: .08em !important; }
html body .oh-hero .oh-btn--solid,
html body.onesto-skin .u-hero-section [class*="-btn-solid"] { box-shadow: 0 12px 26px -12px rgba(245, 185, 85, .9); }
html body .oh-hero .oh-btn--line,
html body.onesto-skin .u-hero-section [class*="-btn-line"] { border-color: var(--o-navy) !important; color: var(--o-navy) !important; }
html body .oh-hero .oh-btn--line:hover,
html body.onesto-skin .u-hero-section [class*="-btn-line"]:hover { background: var(--o-navy) !important; color: #fff !important; border-color: var(--o-navy) !important; }
html body .oh-hero .oh-media,
html body .u-hero-figure { border-radius: var(--o-r); box-shadow: var(--o-shadow-up); }
html body .oh-hero .oh-media::after,
html body .u-hero-figure::after { background: linear-gradient(180deg, rgba(4, 44, 83, 0) 60%, rgba(4, 44, 83, .18) 100%); }
html body .oh-hero .oh-media > img,
html body .u-hero-figure > img { transition: transform 1.6s var(--o-ease); }
html body .oh-hero .oh-media:hover > img,
html body .u-hero-figure:hover > img { transform: scale(1.05); }
html body .oh-hero .oh-media--logo > img { filter: saturate(.9) brightness(.95); }
html body .oh-hero .oh-logo { border-radius: 14px; box-shadow: var(--o-shadow-up); }
/* A second, smaller photo tucked under the hero photo (added by onesto-ui.js) */
.oh-media-wrap { position: relative; }
.o-hero-accent { position: absolute; left: -36px; bottom: -36px; width: 42%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--o-shadow-up); z-index: 2; }
.o-hero-accent img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .o-hero-accent { display: none; } }

/* 4. INNER-PAGE SECTIONS AND CARDS ─────────────────────────── */
body.onesto-skin section [class$="-card"],
body.onesto-skin section [class*="-card "] { border-radius: 14px; transition: transform .6s var(--o-ease), box-shadow .6s var(--o-ease); }
body.onesto-skin section [class$="-card"]:hover,
body.onesto-skin section [class*="-card "]:hover { transform: translateY(-4px); box-shadow: var(--o-shadow-up); }
body.onesto-skin { --u-band-shade: linear-gradient(160deg, rgba(4, 44, 83, .9) 0%, rgba(4, 44, 83, .84) 55%, rgba(3, 30, 58, .9) 100%); }
body.onesto-skin .u-photo-strip img { border-radius: var(--o-r); box-shadow: var(--o-shadow); }
/* Photo strip added before the closing section on pages that have none (onesto-ui.js) */
.o-gallery { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px) clamp(56px, 6vw, 88px); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.o-gallery--end { padding-top: clamp(40px, 5vw, 72px); }
.o-gallery figure { margin: 0; height: 260px; border-radius: var(--o-r); overflow: hidden; box-shadow: var(--o-shadow); background: var(--o-pale); }
.o-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s var(--o-ease); }
.o-gallery figure:hover img { transform: scale(1.06); }
@media (max-width: 760px) {
	.o-gallery { grid-template-columns: 1fr 1fr; }
	.o-gallery figure { height: 180px; }
	.o-gallery figure:first-child { grid-column: 1 / -1; }
}

/* 5. CLOSING CALL TO ACTION ─────────────────────────────────── */
html body .pg-cta.o-cta { background: var(--o-bg); color: var(--o-navy); padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 44px); }
.o-cta__card { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr .75fr; overflow: hidden; background: #fff; border: 1px solid var(--o-line); border-radius: var(--o-r); box-shadow: var(--o-shadow-up); }
.o-cta__txt { padding: clamp(32px, 5vw, 60px) clamp(24px, 4.5vw, 56px); }
html body .pg-cta.o-cta h2 { color: var(--o-navy); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.16; font-weight: 500; letter-spacing: -.012em; }
html body .pg-cta.o-cta h2 em { font-style: normal; font-weight: inherit; text-decoration: none; background: linear-gradient(var(--o-amber), var(--o-amber)) left 90% / 100% .14em no-repeat; }
html body .pg-cta.o-cta p { color: var(--o-text); margin: 16px 0 0; max-width: 52ch; font-size: 1.08rem; }
.o-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
html body .pg-cta.o-cta .pg-cta-mail { margin: 0; font-size: .98rem; color: var(--o-text); }
html body .pg-cta.o-cta .pg-cta-mail a { color: var(--o-navy); font-weight: 600; border-bottom: 2px solid var(--o-amber); text-decoration: none; }
.o-cta__img { position: relative; min-height: 300px; overflow: hidden; }
.o-cta__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--o-ease); }
.o-cta__card:hover .o-cta__img img { transform: scale(1.06); }
@media (max-width: 900px) {
	.o-cta__card { grid-template-columns: 1fr; }
	.o-cta__img { min-height: 220px; order: -1; }
}

/* 6. SITEMAP PAGE ───────────────────────────────────────────── */
.o-sitemap { padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 44px) clamp(64px, 7vw, 100px); }
.o-sitemap__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.o-sitemap__group { background: #fff; border: 1px solid var(--o-line); border-radius: var(--o-r); box-shadow: var(--o-shadow); padding: 26px 26px 18px; }
.o-sitemap__group h2 { margin: 0 0 14px; padding-bottom: 10px; font-size: 1.15rem; font-weight: 600; color: var(--o-navy); border-bottom: 2px solid var(--o-amber); display: inline-block; }
.o-sitemap__group ul { list-style: none; margin: 0; padding: 0; }
.o-sitemap__group li { margin: 0 0 9px; }
.o-sitemap__group a { color: var(--o-text); text-decoration: none; font-size: .98rem; transition: color .2s, padding .3s var(--o-ease); }
.o-sitemap__group a:hover { color: var(--o-navy); padding-left: 4px; }

/* 7. FOOTER ─────────────────────────────────────────────────── */
html body footer.of {
	display: block; position: relative; overflow: hidden; isolation: isolate;
	padding: clamp(56px, 6vw, 84px) 0 0; margin: 0; border: 0; text-align: left;
	background: radial-gradient(60% 50% at 100% 0%, rgba(250, 199, 117, .1), transparent 70%), linear-gradient(180deg, #05305A, #021D38);
	color: rgba(240, 245, 250, .8);
}
footer.of::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .05; background: url("../textures/jali.svg") 0 0 / 64px 64px; filter: invert(1); -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%); }
.of a { text-decoration: none; }
.of-wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.of-top { display: grid; grid-template-columns: 1.45fr .85fr .95fr .9fr 1.45fr; gap: 40px; }
.of-brand__logo img { height: 64px; width: auto; display: block; margin-bottom: 18px; }
.of-brand__txt { font-size: .98rem; line-height: 1.65; max-width: 32ch; margin: 0; color: rgba(240, 245, 250, .75); }
.of-brand__txt a { color: #fff; border-bottom: 1px solid var(--o-amber); }
.of-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.of-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background .3s, color .3s, transform .4s var(--o-ease), border-color .3s; }
.of-social a:hover { background: var(--o-amber); border-color: var(--o-amber); color: var(--o-navy); transform: translateY(-3px); }
.of-social svg { width: 18px; height: 18px; }
.of-col__lbl { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--o-amber); margin: 0 0 18px; }
.of-col__lbl--sp { margin-top: 28px; }
a.of-col__lbl:hover { color: #fff; }
.of-col a { display: block; width: fit-content; margin-bottom: 10px; font-size: .97rem; color: rgba(240, 245, 250, .8); transition: color .25s, transform .4s var(--o-ease); }
.of-col a:hover { color: #fff; transform: translateX(4px); }
.of-ext { color: var(--o-amber); font-size: .85em; }
.of-mail { display: inline-block; font-size: 1.02rem; font-weight: 500; color: #fff; border-bottom: 1px solid var(--o-amber); overflow-wrap: anywhere; }
.of-news__form { display: flex; gap: 6px; padding: 5px; border-radius: 100px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.of-news__form input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: .95rem; padding: 10px 14px 8px; }
.of-news__form input::placeholder { color: rgba(240, 245, 250, .5); }
.of-news__form button { flex: none; background: var(--o-amber); color: var(--o-navy); border: 0; border-radius: 100px; padding: 10px 20px 8px; font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .3s; }
.of-news__form button:hover { background: #fff; }
.of-news__consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .8rem; line-height: 1.5; color: rgba(240, 245, 250, .55); cursor: pointer; }
.of-news__consent input { margin-top: 3px; flex: none; accent-color: var(--o-amber); }

.of-group { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(240, 245, 250, .14); }
.of-group__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.of-group__head .of-col__lbl { margin: 0; }
.of-group__all { font-size: .9rem; color: rgba(240, 245, 250, .75); transition: color .25s; }
.of-group__all:hover { color: var(--o-amber); }
.of-group__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.of-brand-tile { height: 86px; padding: 14px 16px; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; transition: transform .5s var(--o-ease), box-shadow .5s; }
.of-brand-tile img { max-width: 100%; max-height: 54px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .62; transition: filter .45s, opacity .45s, transform .6s var(--o-ease); }
a.of-brand-tile:hover, span.of-brand-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }
.of-brand-tile:hover img { filter: none; opacity: 1; transform: scale(1.05); }
.of-brand-tile--group { box-shadow: 0 0 0 2px var(--o-amber); }
.of-wordmark { display: flex; flex-direction: column; align-items: flex-start; line-height: .95; font-family: Georgia, "Times New Roman", serif !important; font-size: 1.3rem; color: #7d8790; transition: color .45s; }
.of-wordmark span { font-family: inherit !important; }
.of-wordmark span + span { padding-left: .9em; font-style: italic; }
.of-brand-tile:hover .of-wordmark { color: #111; }

.of-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 34px; padding: 22px 0; border-top: 1px solid rgba(240, 245, 250, .14); font-size: .88rem; color: rgba(240, 245, 250, .6); }
.of-bottom__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.of-bottom__links a { color: rgba(240, 245, 250, .75); transition: color .25s; }
.of-bottom__links a:hover { color: var(--o-amber); }
.of-deusto { display: block; padding: 8px 14px; background: #fff; border-radius: 10px; line-height: 0; }
.of-deusto img { height: 34px; width: auto; }

/* Giant wordmark: a faint outline that lights up in the brand colours on hover */
.of-giant { position: relative; display: block; max-width: 1280px; margin: 10px auto 0; padding: 0 28px; aspect-ratio: 1423 / 249; margin-top: 28px; margin-bottom: 8px; }
html body footer.of { padding-bottom: 36px; }
.of-giant__ghost, .of-giant__color { position: absolute; inset: 0 28px; width: calc(100% - 56px); height: 100%; transition: opacity .8s var(--o-ease), filter .8s var(--o-ease), transform 1s var(--o-ease); }
.of-giant__ghost { background: rgba(240, 245, 250, .07); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.of-giant__color { object-fit: contain; opacity: 0; filter: brightness(1.9) saturate(1.3) drop-shadow(0 0 28px rgba(80, 160, 255, .35)); transform: translateY(8px); }
.of-giant:hover .of-giant__color, .of-giant:focus-visible .of-giant__color { opacity: 1; transform: none; }
.of-giant:hover .of-giant__ghost { opacity: 0; }
@media (hover: none) {
	.of-giant__color { opacity: .9; transform: none; }
	.of-giant__ghost { opacity: 0; }
}

@media (max-width: 1100px) {
	.of-top { grid-template-columns: 1fr 1fr 1fr; }
	.of-brand, .of-news { grid-column: 1 / -1; }
	.of-news { max-width: 560px; }
	.of-group__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
	.of-wrap { padding: 0 20px; }
	.of-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
	.of-top > .of-col:nth-child(4) { grid-column: 1 / -1; }
	.of-group__grid { grid-template-columns: repeat(2, 1fr); }
	.of-group__head { flex-direction: column; align-items: flex-start; }
	.of-bottom { flex-direction: column; align-items: flex-start; padding-bottom: 28px; }
	.of-giant { padding: 0 20px; }
	.of-giant__ghost, .of-giant__color { inset: 0 20px; width: calc(100% - 40px); }
}

/* Own-design pages brought into the light look ────────────── */
/* Our Team (page-our-team.php): the page is built on variables, so swap them */
html body .ot-team-page {
	--ot-bg: var(--o-bg);
	--ot-ink: var(--o-navy);
	--ot-white: var(--o-navy);
	--ot-muted-onbg: var(--o-text);
	--ot-glass-bg: #fff;
	--ot-glass-border: var(--o-line);
	--ot-amber-deep: #A86A12;
	background: radial-gradient(50% 40% at 100% 0%, rgba(250, 199, 117, .22), transparent 70%), linear-gradient(180deg, #fff 0, var(--o-bg) 520px);
}
html body .ot-team-page .ot-hero { padding-top: 170px; }
@media (max-width: 768px) { html body .ot-team-page .ot-hero { padding-top: 120px; } }
html body .ot-team-page .ot-eyebrow { background: #fff; color: var(--o-navy); }
html body .ot-team-page .ot-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--o-shadow); }
html body .ot-team-page .ot-card:hover { border-color: var(--o-amber); box-shadow: var(--o-shadow-up); }
html body .ot-team-page .ot-cta { background: linear-gradient(135deg, var(--o-navy), #0a3d70); border: 0; }
html body .ot-team-page .ot-cta h2 { color: #fff; }
html body .ot-team-page .ot-photo-placeholder { border-color: var(--o-amber); }

/* Associations and Partners (page-associations-and-partners.php): light hero */
html body .aap-hero {
	background: radial-gradient(55% 60% at 95% 0%, rgba(250, 199, 117, .26), transparent 70%), radial-gradient(60% 70% at 0% 100%, var(--o-pale), transparent 72%), linear-gradient(180deg, #fff, var(--o-bg));
	color: var(--o-navy); min-height: 0; padding-bottom: 80px;
}
html body .aap-hero h1 { color: var(--o-navy); font-weight: 500; }
html body .aap-hero .aap-eyebrow { color: var(--o-dim); }
html body .aap-hero-ring { border-color: rgba(4, 44, 83, .08); }

/* 8. SCROLL REVEALS (inner pages) ───────────────────────────── */
.js .o-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--o-ease), transform .9s var(--o-ease); }
.js .o-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .o-rv { opacity: 1; transform: none; transition: none; }
	.of-giant__color, .of-giant__ghost { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ROUND 2 (website audit and feedback, November 2026)
   9.  Header: earlier switch to the mobile menu, real language buttons,
       menu icon turns into an X, mobile menu starts below the header
   10. Bigger, editorial type on every inner page
   11. Textures behind light sections, photo band, hero accent photo
   12. Footer (Appagentix-style layout)
   13. Contact page photos
   14. Partner pages (Shree Sita Ram Industries, Raro Bags)
   15. Spare Partner: a single header
   ═══════════════════════════════════════════════════════════════ */

/* 9. HEADER ─────────────────────────────────────────────────── */
html body .lang-switch .lang-btn { background: none; border: 0; padding: 2px 2px; margin: 0; font: inherit; letter-spacing: inherit; color: rgba(240, 245, 250, .55); cursor: pointer; line-height: 1; }
html body .lang-switch .lang-btn.active { color: var(--o-amber); }
html body .lang-switch .lang-btn:focus-visible { outline: 2px solid var(--o-amber); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 1199px) {
	html body .fnav-links, html body .fnav-utility, html body .fnav-panel { display: none !important; }
	html body .fnav-burger { display: block !important; }
	html body .fnav { top: 10px; width: calc(100% - 24px); }
	html body .fnav-logo img, html body .fnav.is-scrolled .fnav-logo img { height: 42px; }
}
html body .fnav-burger { width: 44px; height: 44px; border-radius: 50%; background: var(--o-bg); }
html body .fnav-burger span { left: 12px; right: 12px; transition: transform .4s var(--o-ease), top .4s var(--o-ease), bottom .4s var(--o-ease); }
html body .fnav-burger span:first-child { top: 17px; }
html body .fnav-burger span:last-child { bottom: 17px; }
body.fnav-mobile-open .fnav-burger span:first-child { top: 21px; transform: rotate(45deg); }
body.fnav-mobile-open .fnav-burger span:last-child { bottom: 21px; transform: rotate(-45deg); }
html body .fnav-mobile { top: 84px; height: calc(100% - 84px); padding: 18px 28px 32px; width: min(400px, 100%); border-top-left-radius: 18px; box-shadow: -20px 0 50px rgba(0, 0, 0, .25); }
html body .fnav-mobile-links > li > a, html body .fnav-mobile-details summary { font-size: 1.08rem; }

/* 10. TYPE ON INNER PAGES ──────────────────────────────────── */
html body:not(.home) section p:not([class*="label"]):not([class*="tag"]):not([class*="meta"]):not([class*="eyebrow"]):not([class*="num"]):not([class*="caption"]):not([class*="note"]):not([class*="kicker"]):not([class*="quote"]),
html body:not(.home) section li:not([class*="tag"]):not([class*="chip"]) {
	font-size: max(1.06rem, 1em) !important;
	line-height: 1.72;
}
html body .oh-hero .oh-title,
html body.onesto-skin .u-hero-section h1 { font-size: clamp(2.6rem, 5vw, 4.6rem) !important; line-height: 1.06 !important; letter-spacing: -.02em !important; font-weight: 600 !important; max-width: 16ch !important; }
html body .oh-hero .oh-lede,
html body.onesto-skin .u-hero-section p { font-size: clamp(1.1rem, 1.3vw, 1.28rem) !important; }
html body.onesto-skin section:not(.oh-hero):not(.u-hero-section) h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem) !important; line-height: 1.1 !important; letter-spacing: -.018em !important; font-weight: 600 !important; }
html body.onesto-skin section:not(.oh-hero):not(.u-hero-section) h3 { font-size: max(1.3rem, 1em) !important; line-height: 1.25 !important; }
html body:not(.home) section h2 em { font-style: normal !important; }

/* 11. TEXTURES, PHOTO BAND, HERO ACCENT ───────────────────── */
.o-tex { position: relative; isolation: isolate; }
.o-tex::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; background: url("../textures/dots.svg") 0 0 / 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.o-tex--jali::before { opacity: .06; background: url("../textures/jali.svg") 0 0 / 64px 64px; -webkit-mask-image: radial-gradient(60% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(60% 80% at 100% 0%, #000, transparent 70%); }
.o-tex--contour::before { opacity: .07; background: url("../textures/contours.svg") center / 900px auto repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }

.o-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 44px); background: #021D38; color: #fff; }
.o-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--band-tex) center / cover; opacity: .55; }
.o-band__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr .9fr .75fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.o-band figure { margin: 0; overflow: hidden; border-radius: var(--o-r); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7); }
.o-band__a { height: clamp(300px, 34vw, 480px); }
.o-band__b { height: clamp(220px, 24vw, 340px); align-self: end; transform: translateY(40px); }
.o-band figure img { width: 100%; height: 118%; object-fit: cover; display: block; will-change: transform; }
.o-band__txt { padding: 10px 0; }
.o-band__rule { display: block; width: 64px; height: 3px; border-radius: 3px; background: var(--o-amber); margin-bottom: 22px; }
html body .o-band__quote { margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.5rem) !important; line-height: 1.2 !important; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.o-band__by { display: block; margin-top: 18px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--o-amber); font-weight: 600; }
@media (max-width: 900px) {
	.o-band__inner { grid-template-columns: 1fr 1fr; }
	.o-band__txt { grid-column: 1 / -1; grid-row: 1; }
	.o-band__a, .o-band__b { height: 240px; transform: none; }
}

.o-media-wrap { position: relative; }
.o-hero-accent { position: absolute; left: -40px; bottom: -40px; width: 40%; aspect-ratio: 1; margin: 0; border-radius: 16px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--o-shadow-up); z-index: 3; animation: oFloat 7s ease-in-out infinite; }
.o-hero-accent img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes oFloat { 50% { transform: translateY(-10px); } }
html body .oh-hero { padding-bottom: clamp(80px, 9vw, 120px); }

/* 12. FOOTER ────────────────────────────────────────────────── */
.of-top { grid-template-columns: 1.5fr .8fr .95fr .85fr 1.4fr; gap: 36px; }
.of-deusto { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 0; background: none; line-height: 1.2; }
.of-deusto__lbl { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(240, 245, 250, .6); }
.of-deusto__logo { display: block; padding: 14px 20px; background: #fff; border-radius: 14px; line-height: 0; }
.of-deusto__logo img { height: 62px; width: auto; }
.of-col a { font-size: 1.02rem; margin-bottom: 11px; }
.of-mail { font-size: 1.1rem; }
.of-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.of-news__form { display: block; padding: 0; border: 0; background: none; border-radius: 0; }
.of-news__row { display: flex; gap: 6px; padding: 5px; border-radius: 100px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.of-news__msg { margin: 10px 0 0; min-height: 1.2em; font-size: .9rem; color: var(--o-amber); }
.of-group__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.of-brand-tile { height: 96px; }
.of-brand-tile img { max-height: 58px; }
.of-brand-tile--dark { background: #111; }
.of-brand-tile--dark img { mix-blend-mode: normal; filter: none; opacity: .75; }
.of-brand-tile--dark:hover img { opacity: 1; }
.of-bottom { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 32px; align-items: center; }
.of-bottom .of-social { margin: 0; }
.of-bottom__links { justify-content: center; }
.of-bottom__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.of-credit { color: rgba(240, 245, 250, .78); }
.of-credit a { color: var(--o-amber); font-weight: 600; border-bottom: 1px solid rgba(250, 199, 117, .5); }
.of-credit a:hover { color: #fff; }
@media (max-width: 1100px) {
	.of-top { grid-template-columns: 1fr 1fr 1fr; }
	.of-group__grid { grid-template-columns: repeat(5, 1fr); }
	.of-bottom { grid-template-columns: 1fr; justify-items: start; }
	.of-bottom__links { justify-content: flex-start; }
	.of-bottom__right { align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
	.of-group__grid { grid-template-columns: repeat(2, 1fr); }
	.of-group__grid > :last-child { grid-column: 1 / -1; }
	.of-deusto__logo img { height: 52px; }
}

/* 13. CONTACT PAGE ──────────────────────────────────────────── */
.ctp-hero__photos { position: relative; margin-top: 28px; height: clamp(240px, 24vw, 330px); }
.ctp-hero__photo { position: absolute; margin: 0; overflow: hidden; border-radius: var(--o-r); box-shadow: var(--o-shadow-up); }
.ctp-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--o-ease); }
.ctp-hero__photo:hover img { transform: scale(1.06); }
.ctp-hero__photo--a { left: 0; top: 0; width: 64%; height: 86%; }
.ctp-hero__photo--b { right: 0; bottom: 0; width: 46%; height: 62%; border: 6px solid #fff; }
.ctp-hero__photo figcaption { position: absolute; left: 12px; bottom: 10px; padding: 5px 12px 3px; border-radius: 100px; background: var(--o-amber); color: var(--o-navy); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
html body .ctp-office { display: flex !important; gap: 18px; align-items: stretch; }
.ctp-office__photo { flex: none; width: 120px; border-radius: 14px; overflow: hidden; }
.ctp-office__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .ctp-hero__photos { height: 260px; } }
@media (max-width: 520px) { .ctp-office__photo { width: 84px; } }

/* 14. PARTNER PAGES ─────────────────────────────────────────── */
.pp2-section { padding: clamp(64px, 8vw, 112px) 0; background: #fff; }
.pp2-section:nth-of-type(odd) { background: var(--o-bg); }
.pp2-section--navy { background: linear-gradient(160deg, #05305A, #021D38) !important; color: #fff; }
.pp2-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }
.pp2-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pp2-split--rev > figure { order: -1; }
.pp2-h2 { margin: 0 0 22px; color: inherit; }
.pp2-section:not(.pp2-section--navy) .pp2-h2 { color: var(--o-navy); }
.pp2-h2 em { font-style: normal; background: linear-gradient(var(--o-amber), var(--o-amber)) left 90% / 100% .12em no-repeat; }
.pp2-body { color: var(--o-text); margin: 0 0 16px; }
.pp2-photo { margin: 0; height: clamp(300px, 34vw, 460px); border-radius: var(--o-r); overflow: hidden; box-shadow: var(--o-shadow-up); }
.pp2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--o-ease); }
.pp2-photo:hover img { transform: scale(1.05); }
.pp2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.pp2-card { padding: 28px 26px; border-radius: var(--o-r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); transition: transform .6s var(--o-ease), background .4s; }
.pp2-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .12); }
.pp2-card h3 { margin: 0 0 10px; color: #fff; }
.pp2-card p { margin: 0; color: rgba(240, 245, 250, .8); }
.pp2-section .o-btn { margin-top: 12px; }
@media (max-width: 900px) {
	.pp2-split, .pp2-grid { grid-template-columns: 1fr; }
	.pp2-split--rev > figure { order: 0; }
}

/* 15. SPARE PARTNER ─────────────────────────────────────────── */
html body .sp-subnav, html body #sp-langSwitch { display: none !important; }
.js .o-rv-item { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--o-ease), transform .8s var(--o-ease), box-shadow .6s var(--o-ease); transition-delay: calc(var(--o-i, 0) * 90ms); }
.js .o-rv-item.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .o-rv-item { opacity: 1; transform: none; transition: none; } }

/* 16. LAYOUT HELPERS (added by js/onesto-ui.js) ─────────────── */
/* A picture filling the empty space under a short column */
.o-fill { margin: 28px 0 0; border-radius: var(--o-r); overflow: hidden; box-shadow: var(--o-shadow-up); position: sticky; top: 110px; }
.o-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Long rows become a two-column grid of cards */
html body .o-grid2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; border: 0 !important; }
html body .o-grid2 > * { display: block !important; margin: 0 !important; padding: 28px 28px 24px !important; background: #fff; border: 1px solid var(--o-line) !important; border-radius: var(--o-r) !important; box-shadow: var(--o-shadow); transition: transform .6s var(--o-ease), box-shadow .6s var(--o-ease); }
html body .o-grid2 > *:hover { transform: translateY(-4px); box-shadow: var(--o-shadow-up); }
html body .o-grid2 > * > * { max-width: none !important; }
html body .o-grid2 > * ul, html body .o-grid2 > * ol { columns: 1; margin-top: 12px !important; }
html body .o-grid2--dark > * { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16) !important; box-shadow: none; }
/* A narrow text column with a picture beside it */
html body .o-side { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(32px, 5vw, 64px); max-width: 1200px !important; align-items: start; }
html body .o-side > *:not(.o-side__fig) { grid-column: 1; }
.o-side__fig { grid-column: 2; grid-row: 1 / span 30; margin: 0; align-self: start; position: sticky; top: 110px; height: clamp(320px, 34vw, 480px); border-radius: var(--o-r); overflow: hidden; box-shadow: var(--o-shadow-up); }
.o-side__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Moving strip of service names */
.o-marquee { overflow: hidden; background: var(--o-navy); color: #fff; padding: 20px 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.o-marquee__track { display: flex; width: max-content; animation: oMarq 50s linear infinite; }
.o-marquee span { white-space: nowrap; font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; padding: 0 26px; }
.o-marquee span::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--o-amber); margin: 0 0 4px 52px; vertical-align: middle; }
@keyframes oMarq { to { transform: translateX(-50%); } }
/* Headings rise in word by word */
.o-words .o-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.o-words .o-w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--o-ease); transition-delay: calc(var(--wi, 0) * 45ms); }
.o-words.is-in .o-w > span { transform: none; }
/* Pictures unveil from a smaller frame */
.o-anim .o-clip { clip-path: inset(10% 8% 10% 8% round 18px); transition: clip-path 1.2s var(--o-ease); }
.o-anim .o-clip img { transform: scale(1.18); transition: transform 1.6s var(--o-ease); }
.o-anim .o-clip.is-in { clip-path: inset(0 0 0 0 round 18px); }
.o-anim .o-clip.is-in img { transform: none; }
@media (max-width: 999px) {
	html body .o-grid2 { grid-template-columns: 1fr !important; }
	html body .o-side { display: block !important; }
	.o-side__fig, .o-fill { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	.o-marquee__track { animation: none; }
	.o-words .o-w > span { transform: none; transition: none; }
}

/* ── 17. Magazine split: text beside a tall photo ───────────────── */
.o-split { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 36%); column-gap: clamp(36px, 4vw, 64px); align-items: stretch; }
.o-split--rev { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); }
.o-split--rev > .o-split__fig { order: -1; }
.o-split__body { min-width: 0; }
.o-split--widen { max-width: 1240px !important; width: min(1240px, calc(100% - 64px)) !important; margin-left: auto !important; margin-right: auto !important; }
.o-split__fig { margin: 0; position: relative; min-height: 340px; }
.o-split__fig img { position: sticky; top: 110px; display: block; width: 100%; height: min(78vh, 100%); min-height: 340px; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 60px -30px rgba(4, 44, 83, .45); }
.o-split__fig::after { content: ""; position: absolute; left: 20px; top: 20px; width: 54px; height: 6px; border-radius: 6px; background: #FAC775; z-index: 2; }
.o-split__body p { max-width: none !important; }
@media (max-width: 999px) {
	.o-split, .o-split--rev { display: flex !important; flex-direction: column; }
	.o-split__fig { min-height: 0; margin: 0 0 28px; order: -1; }
	.o-split--rev > .o-split__fig { margin: 0 0 28px; }
	.o-split__fig img { position: static; height: 230px; min-height: 0; }
}

/* ── 18. Photo tiles in card grids, photo pairs between long text ─ */
.o-tile { margin: 0; min-height: 220px; border-radius: 18px; overflow: hidden; position: relative; }
.o-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o-grid2 > .o-tile { min-height: 280px; }
.o-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 18px 0; }
.o-duo:nth-of-type(even) { grid-template-columns: 1fr 1.35fr; }
.o-duo__fig { margin: 0; height: clamp(200px, 22vw, 310px); border-radius: 22px; overflow: hidden; }
.o-duo__fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.o-duo__fig:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .o-duo { grid-template-columns: 1fr; width: calc(100% - 32px); } .o-duo__fig { height: 220px; } }