@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #16337d;
  --navy-deep: #0b2058;
  --steel: #0081ca;
  --sky: #6bcef3;
  --green: #157f1f;
  --pumpkin: #f96900;
  --grey: #706c61;
  --beige: #eaf0ce;
  --paper: #f7f8f4;
  --white: #fff;
  --ink: #11234e;
  --muted: #647089;
  --line: rgba(22, 51, 125, .14);
  --max: 1240px;
  --radius-xl: 42px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow: 0 30px 80px rgba(11, 32, 88, .18);
  --sans: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Calisto MT", "Bookman Old Style", Georgia, serif;
}

* { box-sizing: border-box; }
em { letter-spacing: normal; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
main [id] { scroll-margin-top: 92px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { color: var(--white); background: var(--steel); }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 12px 18px; border-radius: 999px; color: white; background: var(--navy); }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; padding: 16px 24px; transition: padding .25s ease, background .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { padding-block: 9px; background: rgba(247,248,244,.93); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(18px); }
.site-header:not(.is-scrolled) { color: white; }
.site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.site-header:not(.is-scrolled) .nav-cta { color: var(--navy-deep); background: var(--sky); }
.nav-shell { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand img { width: 142px; height: 56px; object-fit: contain; object-position: left center; }
.main-nav { display: flex; align-items: center; gap: 23px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.main-nav > a:not(.nav-cta) { position: relative; padding: 10px 0; }
.main-nav > a:not(.nav-cta)::after { content: ""; position: absolute; right: 100%; bottom: 5px; left: 0; height: 2px; background: var(--steel); transition: right .22s ease; }
.main-nav > a:hover::after, .main-nav > a[aria-current="page"]::after { right: 0; }
.nav-cta { padding: 13px 19px; color: white; border-radius: 999px; background: var(--navy); }
.nav-cta span { margin-left: 8px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--navy); cursor: pointer; }
.menu-toggle span:not(.sr-only) { display: block; width: 18px; height: 1.5px; margin: 5px auto; background: white; transition: transform .2s ease; }

.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--steel); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow-light { color: var(--sky); }
.display { margin: 0; font-size: clamp(3.1rem, 6.2vw, 6.7rem); line-height: .9; letter-spacing: -.055em; font-weight: 800; }
.display em { color: var(--sky); font-family: var(--serif); font-weight: 700; }
.section-title { margin: 0; font-size: clamp(2.6rem, 4.7vw, 5.2rem); line-height: .96; letter-spacing: -.05em; font-weight: 800; }
.section-title em { color: var(--steel); font-family: var(--serif); font-weight: 700; }
.section-title-light { color: white; }
.section-copy { color: var(--muted); font-size: 1.03rem; line-height: 1.75; }

.button { display: inline-flex; min-height: 54px; padding: 0 24px; align-items: center; justify-content: center; gap: 20px; border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-steel { color: white; background: var(--steel); box-shadow: 0 14px 30px rgba(0,129,202,.28); }
.button-steel:hover { background: var(--navy); }
.button-sky { color: var(--navy-deep); background: var(--sky); }
.text-link { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 800; }

.pattern-field { position: absolute; overflow: hidden; pointer-events: none; user-select: none; }
.pattern-field span { display: block; width: 100%; color: currentColor; font-size: 1.2rem; line-height: 1.15; font-weight: 800; letter-spacing: 1.1em; word-spacing: 1.1em; text-transform: lowercase; opacity: .58; transform: rotate(-7deg) scale(1.15); }

/* Home hero */
.home-hero { position: relative; min-height: 930px; padding: 148px max(5vw, 32px) 78px; color: white; background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, #1c4fa0 100%); overflow: hidden; }
.home-hero::after { content: ""; position: absolute; right: -11%; bottom: -22%; width: 55vw; height: 55vw; border: 2px solid rgba(107,206,243,.3); border-radius: 50%; box-shadow: 0 0 0 70px rgba(107,206,243,.05), 0 0 0 140px rgba(107,206,243,.035); }
.hero-grid { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(45px, 7vw, 105px); align-items: center; }
.hero-copy { position: relative; z-index: 3; }
.hero-copy .display { max-width: 730px; }
.hero-lede { max-width: 620px; margin: 31px 0 0; color: #c8d7ee; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 38px; }
.hero-proof { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-proof div { min-width: 0; padding-right: 20px; }
.hero-proof div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.18); }
.hero-proof strong { display: block; color: white; font-size: 2rem; letter-spacing: -.04em; }
.hero-proof span { display: block; margin-top: 4px; color: #aabddd; font-size: .72rem; line-height: 1.35; }

.brand-manifesto { position: relative; padding: 42px max(5vw, 30px); overflow: hidden; color: var(--navy); background: var(--beige); }
.manifesto-track { width: max-content; display: flex; gap: 40px; align-items: center; animation: marquee 28s linear infinite; }
.manifesto-track span { font-size: clamp(1.45rem, 2.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; }
.manifesto-track em { color: var(--steel); font-family: var(--serif); }
.manifesto-track i { width: 10px; height: 10px; border-radius: 50%; background: var(--pumpkin); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: 120px max(5vw, 28px); }
.section-shell { max-width: var(--max); margin: 0 auto; }
.section-heading { display: grid; grid-template-columns: 1.2fr .55fr; gap: 70px; align-items: end; margin-bottom: 64px; }
.section-heading .section-copy { margin: 0 0 8px; }

.home-services { position: relative; background: white; }
.home-services::before { content: ""; position: absolute; right: 0; top: 0; width: 30%; height: 45%; background: linear-gradient(135deg, transparent 46%, rgba(107,206,243,.14) 46%); }
.service-stack { position: relative; display: grid; gap: 20px; }
.service-row { position: relative; min-height: 240px; display: grid; grid-template-columns: 125px 1fr .9fr 48px; gap: 30px; align-items: center; padding: 34px 40px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 12px 40px rgba(22,51,125,.06); transition: transform .3s ease, box-shadow .3s ease; overflow: hidden; }
.service-row:nth-child(2) { margin-left: 5%; color: white; background: var(--steel); }
.service-row:nth-child(3) { margin-left: 10%; background: var(--beige); }
.service-row:hover { transform: translateX(8px); box-shadow: var(--shadow); }
.service-row .number { align-self: start; color: var(--steel); font-size: .75rem; font-weight: 800; }
.service-row:nth-child(2) .number { color: var(--sky); }
.service-icon { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 22px; color: var(--navy); background: white; box-shadow: 0 10px 25px rgba(11,32,88,.12); }
.service-icon svg { width: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.service-row h3 { margin: 0; font-size: clamp(1.7rem, 2.7vw, 2.8rem); letter-spacing: -.04em; }
.service-row p { margin: 0; color: var(--muted); line-height: 1.65; }
.service-arrow { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); }

.proof-system { position: relative; padding: clamp(88px, 9vw, 140px) max(5vw, 28px); color: white; background: var(--navy-deep); overflow: hidden; }
.proof-system-pattern { top: -120px; right: -90px; width: 540px; height: 420px; color: var(--sky); opacity: .055; transform: rotate(8deg); }
.proof-system-copy > p:not(.eyebrow) { max-width: 620px; margin-top: 24px; color: #bdcbe0; font-size: 1.02rem; line-height: 1.75; }
.proof-system-link { margin-top: 30px; color: var(--sky); }

.home-portfolio { position: relative; color: white; background: var(--navy-deep); }
.portfolio-pattern { inset: 0 0 auto auto; width: 44%; height: 100%; color: white; opacity: .06; }
.portfolio-preview { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: repeat(2, 300px); gap: 18px; }
.portfolio-tile { position: relative; min-height: 0; overflow: hidden; border-radius: var(--radius-lg); }
.portfolio-tile:first-child { grid-row: 1 / -1; }
.portfolio-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,32,88,.85)); }
.portfolio-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.portfolio-tile:hover img { transform: scale(1.05); }
.tile-copy { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; }
.tile-copy span { color: var(--sky); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.tile-copy h3 { margin: 8px 0 0; font-size: clamp(1.4rem, 2.3vw, 2.3rem); line-height: 1.05; letter-spacing: -.04em; }
.portfolio-cta { margin-top: 34px; display: flex; justify-content: flex-end; }

.coverage { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: 55px; align-items: center; background: linear-gradient(145deg, #edf4ff 0%, white 60%); overflow: hidden; }
.coverage-map { position: relative; }
.coverage-map img { width: 100%; filter: drop-shadow(0 26px 35px rgba(11,32,88,.18)); }
.map-pill { position: absolute; right: 8%; bottom: 16%; padding: 12px 17px; border-radius: 999px; color: white; background: var(--pumpkin); box-shadow: 0 13px 30px rgba(249,105,0,.25); font-size: .78rem; font-weight: 800; }
.coverage-list { margin-top: 33px; padding-top: 26px; display: grid; gap: 15px; border-top: 1px solid var(--line); }
.coverage-list div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.coverage-list strong { color: var(--steel); font-size: .78rem; }
.coverage-list span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.about-stat { position: absolute; right: -15px; bottom: 42px; z-index: 2; padding: 22px 25px; display: flex; align-items: center; gap: 13px; color: white; border-radius: 20px; background: var(--navy); box-shadow: var(--shadow); }
.about-stat strong { font-size: 2.2rem; }
.about-stat span { font-size: .73rem; line-height: 1.35; }

/* About editorial */
.about-editorial { position: relative; padding: clamp(105px, 11vw, 160px) max(5vw, 28px); background: linear-gradient(145deg, #f7f8f4 0%, #fff 55%, #edf5ff 100%); scroll-margin-top: 72px; overflow: hidden; }
.about-editorial::before { content: "W"; position: absolute; right: -45px; top: -95px; color: rgba(107,206,243,.1); font-family: var(--serif); font-size: 31rem; font-weight: 700; line-height: 1; }
.about-editorial-card .text-link { align-self: flex-start; border-color: rgba(255,255,255,.22); }

/* Clients and certifications */
.clients-section { position: relative; padding: clamp(72px, 7vw, 105px) 0 clamp(62px, 6vw, 90px); background: linear-gradient(145deg, #fff 0%, #f5f9ff 58%, #e8f5fb 100%); overflow: hidden; }
.clients-shell, .certifications-shell { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; }
.clients-orbit { position: absolute; top: -260px; right: -210px; width: 620px; height: 620px; border: 80px solid rgba(107,206,243,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(0,129,202,.035); }
.clients-heading { margin-bottom: 44px; padding: 0 max(5vw, 28px); display: grid; grid-template-columns: 1.35fr .65fr; gap: 75px; align-items: end; }
.clients-heading .section-title { font-size: clamp(2.6rem, 4.2vw, 4.7rem); }
.clients-intro { padding: 0 0 10px 30px; border-left: 2px solid var(--sky); }
.clients-intro p { margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.7; }
@keyframes clientLoop { to { transform: translateX(calc(-50% - 6px)); } }

.certifications-section { position: relative; padding: clamp(76px, 8vw, 110px) max(5vw, 28px); color: white; background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 62%, #214b9a 100%); overflow: hidden; }
.certifications-section::after { content: "C"; position: absolute; right: -45px; bottom: -110px; color: rgba(107,206,243,.09); font-family: var(--serif); font-size: 31rem; font-weight: 700; line-height: 1; }
.certifications-header { position: relative; z-index: 2; margin-bottom: 48px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }
.certifications-copy > p { max-width: 480px; margin: 0; color: #bdcae0; font-size: 1rem; line-height: 1.7; }
.certification-note { margin-top: 23px; display: flex; gap: 12px; align-items: center; color: var(--sky); font-size: .74rem; letter-spacing: .035em; }
.certification-note span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--navy); background: var(--sky); font-size: 1rem; }
.certification-board { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.certification-card, .certification-card-wide { position: relative; min-width: 0; height: 178px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.16); border-radius: 21px; color: var(--navy); background: rgba(255,255,255,.96); box-shadow: 0 20px 46px rgba(4,17,50,.2); overflow: hidden; transition: transform .28s ease; }
.certification-card.certification-card-clone { display: none; }
.certification-card:hover { transform: translateY(-6px); }
.certification-card img, .certification-card-seal img { width: 100%; height: 105px; object-fit: contain; }
.certification-card span { padding-top: 11px; color: var(--muted); border-top: 1px solid var(--line); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
@keyframes certificationLoop { to { transform: translateX(calc(-50% - 6px)); } }

.contact-panel { padding: 30px; background: var(--paper); }
.contact-shell { position: relative; max-width: 1380px; margin: 0 auto; padding: clamp(55px, 8vw, 110px); display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(55px, 8vw, 120px); color: white; border-radius: var(--radius-xl); background: var(--navy); overflow: hidden; }
.contact-pattern { inset: auto auto -70px -50px; width: 420px; height: 300px; color: white; opacity: .08; }
.contact-copy, .contact-form { position: relative; z-index: 2; }
.contact-kicker { display: inline-block; margin-top: 25px; padding-bottom: 6px; color: var(--sky); border-bottom: 1px solid rgba(107,206,243,.4); font-weight: 800; }
.contact-form { padding: 36px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-form label { display: block; margin-bottom: 22px; color: #dce6f4; font-size: .76rem; font-weight: 800; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin-top: 8px; padding: 14px 0; color: white; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); border-radius: 0; outline: 0; background: transparent; resize: vertical; }
.contact-form select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--sky) 50%), linear-gradient(135deg, var(--sky) 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.contact-form select option { color: var(--navy-deep); background: white; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--sky); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #7f91b2; }
.form-note, .form-status { margin: 13px 0 0; color: #8ea1c1; font-size: .68rem; line-height: 1.5; }
.form-note a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.form-status { min-height: 18px; color: var(--sky); }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-form button[disabled] { opacity: .62; cursor: wait; transform: none; }
.error-page { min-height: 100svh; padding: 10vh max(7vw,28px); display: flex; align-items: flex-start; justify-content: center; flex-direction: column; color: white; background: radial-gradient(circle at 78% 24%,rgba(107,206,243,.24),transparent 29%),linear-gradient(145deg,#061435,#16337d); }
.error-page > img { width: min(210px,48vw); margin-bottom: 12vh; filter: brightness(0) invert(1); }
.error-page h1 { max-width: 850px; margin: 0; font-size: clamp(3.2rem,8vw,8rem); line-height: .88; letter-spacing: -.06em; }
.error-page > p:not(.eyebrow) { max-width: 560px; margin: 26px 0 34px; color: rgba(255,255,255,.72); font-size: clamp(1rem,1.6vw,1.25rem); line-height: 1.65; }
.mobile-quick-cta { display: none; }

/* Legal / prose pages */
.legal-page { padding: 150px max(5vw, 28px) 110px; background: var(--paper); }
.legal-page-shell { max-width: 760px; margin: 0 auto; }
.legal-page-shell h1 { margin: 18px 0 8px; font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; color: var(--ink); }
.legal-page-shell .legal-updated { margin: 0 0 48px; color: var(--muted); font-size: .82rem; }
.legal-page-shell h2 { margin: 46px 0 14px; font-size: 1.4rem; letter-spacing: -.01em; color: var(--navy); }
.legal-page-shell p, .legal-page-shell li { color: var(--ink); font-size: 1rem; line-height: 1.75; }
.legal-page-shell ul { padding-left: 22px; margin: 0 0 18px; }
.legal-page-shell li { margin-bottom: 8px; }
.legal-page-shell a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.legal-page-shell strong { color: var(--navy); }

/* Internal page heroes */
.page-hero { position: relative; min-height: 690px; padding: 150px max(5vw, 28px) 80px; color: white; background: var(--navy); overflow: hidden; }
.page-hero-grid { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.page-hero-copy p:not(.eyebrow) { max-width: 580px; color: #c2d0e8; line-height: 1.7; }
.page-hero-visual { position: relative; min-height: 470px; }
.page-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 200px 28px 28px 28px; box-shadow: var(--shadow); }
.page-hero-visual::after { content: ""; position: absolute; inset: 0; border-radius: 200px 28px 28px 28px; background: linear-gradient(180deg, transparent 50%, rgba(11,32,88,.55)); }
.page-hero-badge { position: absolute; z-index: 2; left: -36px; bottom: 35px; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--sky); box-shadow: var(--shadow); text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.page-pattern { inset: 50px auto auto -50px; width: 430px; height: 390px; color: white; opacity: .06; }
.services-hero-copy .display { font-size: clamp(4rem, 6.7vw, 7rem); }
.services-hero-copy > p:not(.eyebrow) { max-width: 570px; margin: 30px 0 0; color: #c6d3e8; font-size: 1.06rem; line-height: 1.75; }
.services-hero-actions .text-link { border-color: rgba(255,255,255,.25); }

.service-world { position: relative; padding: clamp(105px, 11vw, 160px) max(5vw, 28px); overflow: hidden; }
.world-photo { position: relative; margin: 0; grid-column: span 3; overflow: hidden; border-radius: 24px; box-shadow: 0 20px 55px rgba(11,32,88,.15); }
.world-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(11,32,88,.25)); }
.world-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.world-photo:hover img { transform: scale(1.045); }

.execution-rhythm { padding: 70px max(5vw, 28px); color: var(--navy); background: var(--sky); overflow: hidden; }
.execution-rhythm-shell { max-width: var(--max); margin: 0 auto; }
.execution-rhythm-shell > p { margin: 0 0 34px; font-family: var(--serif); font-size: clamp(1.55rem, 2.8vw, 2.7rem); font-weight: 700; text-align: center; }
.execution-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; }
.execution-steps div { text-align: center; }
.execution-steps span { display: block; color: var(--steel); font-size: .68rem; font-weight: 800; }
.execution-steps strong { display: block; margin-top: 5px; font-size: .92rem; }
.execution-steps i { height: 1px; margin-inline: 18px; background: rgba(22,51,125,.26); }

/* Portfolio page */
.portfolio-intro { padding-bottom: 40px; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.filter-button { padding: 11px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); background: white; font-weight: 800; cursor: pointer; }
.filter-button.is-active { color: white; border-color: var(--navy); background: var(--navy); }
.portfolio-confidentiality { margin-top: 34px; padding: 28px 32px; display: grid; grid-template-columns: .55fr 1fr 1.25fr; gap: 32px; align-items: center; color: white; border-radius: 22px; background: var(--navy-deep); }
.portfolio-confidentiality span { color: var(--sky); font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-confidentiality strong { font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.15; }
.portfolio-confidentiality p { margin: 0; color: #b9c7dc; font-size: .83rem; line-height: 1.65; }
.case-studies { padding: 100px max(5vw, 28px) 115px; background: linear-gradient(145deg, #edf4ff, var(--paper) 62%); }
.case-studies-shell { max-width: var(--max); margin: 0 auto; }
.case-studies-heading { margin-bottom: 48px; display: grid; grid-template-columns: 1.25fr .55fr; gap: 70px; align-items: end; }
.case-studies-heading > p { margin: 0 0 8px; color: var(--muted); line-height: 1.75; }
.case-study { min-height: 365px; padding: 34px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 30px; background: white; box-shadow: 0 18px 50px rgba(22,51,125,.07); }
.case-study-featured { grid-row: 1 / span 2; min-height: 748px; padding: clamp(38px, 5vw, 65px); color: white; border: 0; background: linear-gradient(150deg, var(--navy-deep), var(--navy)); box-shadow: var(--shadow); }
.case-study-index { display: flex; justify-content: space-between; gap: 25px; align-items: center; }
.case-study-index span { color: var(--steel); font-family: var(--serif); font-size: 3.2rem; font-weight: 700; line-height: 1; }
.case-study-featured .case-study-index span { color: var(--sky); }
.case-study-index p { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.case-study-featured .case-study-index p { color: #bdcbe0; }
.case-study h3 { max-width: 680px; margin: 36px 0 18px; font-size: clamp(1.75rem, 2.8vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; }
.case-study:not(.case-study-featured) h3 { margin-top: 26px; font-size: clamp(1.5rem, 2vw, 2.2rem); }
.case-study-summary { margin: 0; color: var(--muted); line-height: 1.72; }
.case-study-featured .case-study-summary { max-width: 650px; color: #bdcbe0; font-size: 1rem; }
.case-study-metrics { margin-top: auto; padding-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.case-study-metrics div { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(237,244,255,.55); }
.case-study-featured .case-study-metrics div { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }
.case-study-metrics strong { display: block; color: var(--steel); font-size: clamp(1.45rem, 2.3vw, 2.4rem); letter-spacing: -.04em; }
.case-study-featured .case-study-metrics strong { color: var(--sky); }
.case-study-metrics span { display: block; margin-top: 4px; color: var(--muted); font-size: .66rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.case-study-featured .case-study-metrics span { color: #9fb2cf; }
.case-study-coverage { margin-top: 16px; padding: 22px; border-left: 3px solid var(--sky); background: rgba(255,255,255,.055); }
.case-study-coverage span { color: var(--sky); font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.case-study-coverage p { margin: 8px 0 0; color: #bdcbe0; font-size: .83rem; line-height: 1.65; }
.portfolio-gallery-toolbar { max-width: var(--max); margin: 0 auto; padding: 90px max(5vw, 28px) 36px; display: flex; justify-content: space-between; gap: 45px; align-items: end; }
.portfolio-gallery-toolbar h2 { margin: 0; font-size: clamp(2rem, 3vw, 3.4rem); line-height: 1; letter-spacing: -.045em; }
.portfolio-gallery-toolbar h2 em { color: var(--steel); font-family: var(--serif); }
.portfolio-gallery-toolbar .filter-bar { margin-top: 0; justify-content: flex-end; }
.project-card { position: relative; margin: 0 0 18px; break-inside: avoid; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); }
.project-card.is-hidden { display: none; }
.project-card img { width: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.project-card:hover img { transform: scale(1.045); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(11,32,88,.86)); }

/* Intranet page */
.intranet-hero { background: linear-gradient(135deg, #0b2058, #16337d 55%, #0081ca); }
.access-section { position: relative; padding: 110px max(5vw, 28px) 130px; background: white; overflow: hidden; }
.access-grid { max-width: var(--max); margin: 60px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.access-card { position: relative; min-height: 350px; padding: 34px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 15px 45px rgba(22,51,125,.08); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.access-card:nth-child(2) { background: var(--beige); }
.access-card:nth-child(3) { color: white; background: var(--steel); }
.access-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.access-icon { width: 78px; height: 78px; padding: 13px; border-radius: 20px; background: white; box-shadow: 0 10px 25px rgba(11,32,88,.12); }
.access-icon img { width: 100%; height: 100%; object-fit: contain; }
.access-card h2 { margin: 50px 0 10px; font-size: 1.8rem; letter-spacing: -.04em; }
.access-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.access-card:nth-child(3) p { color: #d8edf8; }
.access-go { margin-top: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); }
.security-note { max-width: var(--max); margin: 30px auto 0; padding: 22px 26px; display: flex; gap: 15px; align-items: center; border-radius: 16px; color: var(--navy); background: rgba(107,206,243,.18); font-size: .82rem; }
.security-note strong { white-space: nowrap; }

/* Distinct footer */
.wm-footer { position: relative; color: white; background: var(--navy-deep); overflow: hidden; }
.footer-pattern .pattern-field { inset: -70px -40px -70px; }
.footer-pattern .pattern-field span { opacity: .38; }
.footer-main { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 78px max(3vw, 20px) 58px; display: grid; grid-template-columns: 1.2fr .9fr .7fr .7fr; gap: 55px; }
.footer-brand img { width: 170px; height: 80px; object-fit: contain; object-position: left; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 290px; margin: 20px 0 0; color: #aebed8; font-size: .88rem; line-height: 1.6; }
.footer-column h2 { margin: 0 0 18px; color: var(--sky); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-column p, .footer-column address { margin: 0; color: #d6e0ef; font-size: .84rem; font-style: normal; line-height: 1.7; }
.footer-column nav { display: grid; gap: 12px; color: #d6e0ef; font-size: .84rem; }
.social-links { display: flex; gap: 10px; }
.social-link { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-size: .72rem; font-weight: 800; transition: background .2s ease, color .2s ease; }
.social-link:hover { color: var(--navy); background: var(--sky); }
.footer-bottom { max-width: var(--max); margin: 0 auto; padding: 24px max(3vw, 20px) 30px; display: flex; justify-content: space-between; gap: 25px; color: #8295b5; border-top: 1px solid rgba(255,255,255,.12); font-size: .7rem; }
.footer-accent { position: absolute; right: -80px; bottom: -130px; width: 300px; height: 300px; border: 42px solid rgba(107,206,243,.08); border-radius: 50%; }

.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.motion-ready .reveal[data-delay="1"] { transition-delay: .1s; }
.motion-ready .reveal[data-delay="2"] { transition-delay: .2s; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.motion-ready .home-hero .reveal, .motion-ready .page-hero .reveal, .motion-ready .services-hero-x .reveal { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero-grid, .page-hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-proof { grid-template-columns: repeat(2, 1fr); }
  .hero-proof div:last-child { display: none; }
  .service-row { grid-template-columns: 90px 1fr 1fr 45px; padding: 28px; }
  .section-heading { grid-template-columns: 1fr .6fr; gap: 40px; }
  .certification-card, .certification-card-wide { height: 165px; padding: 14px; }
  .footer-main { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-column:last-child { grid-column: 3; }
}

@media (max-width: 800px) {
  body.has-mobile-cta { padding-bottom: 78px; }
  .site-header { padding: 11px 18px; background: rgba(247,248,244,.97); backdrop-filter: none; }
  .site-header.is-scrolled { backdrop-filter: none; }
  .site-header:not(.is-scrolled) { color: var(--ink); }
  .brand img { width: 118px; height: 49px; }
  .menu-toggle { position: relative; z-index: 3; display: block; }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.25px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 0; padding: 108px 28px 38px; flex-direction: column; align-items: flex-start; gap: 18px; color: white; background: var(--navy-deep); transform: translateX(100%); transition: transform .3s ease; }
  .main-nav.is-open { transform: none; }
  .main-nav > a { font-size: 1.75rem; }
  .main-nav .nav-cta { margin-top: auto; color: var(--navy); background: var(--sky); font-size: 1rem; }
  .mobile-quick-cta { position: fixed; z-index: 18; right: 16px; bottom: 16px; left: auto; min-height: 52px; padding: 13px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--navy-deep); border: 1px solid rgba(255,255,255,.58); border-radius: 999px; background: var(--sky); box-shadow: 0 16px 36px rgba(11,32,88,.28); font-size: .72rem; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
  .show-mobile-cta .mobile-quick-cta { opacity: 1; transform: none; pointer-events: auto; }
  .menu-open .mobile-quick-cta { opacity: 0; transform: translateY(18px); pointer-events: none; }
  .home-hero { min-height: auto; padding: 120px 22px 65px; }
  .services-hero-copy .display { font-size: clamp(3.5rem, 13vw, 5.5rem); }
  .service-world { padding: 95px 22px; }
  .execution-steps { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .execution-steps i { display: none; }
  .hero-grid, .page-hero-grid { grid-template-columns: 1fr; }
  .hero-proof { margin-top: 42px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .section { padding: 86px 22px; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; }
  .service-row, .service-row:nth-child(2), .service-row:nth-child(3) { min-height: 320px; margin-left: 0; grid-template-columns: 72px minmax(0, 1fr) 45px; grid-template-rows: auto 1fr; gap: 22px; }
  .service-row .number { grid-column: 1; grid-row: 1; }
  .service-row .service-icon { grid-column: 1; grid-row: 2; align-self: start; }
  .service-row > div { min-width: 0; grid-column: 2; grid-row: 1 / 3; }
  .service-row .service-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .service-row p { grid-column: auto; }
  .portfolio-preview { grid-template-columns: 1fr; grid-template-rows: repeat(3, 390px); }
  .portfolio-tile:first-child { grid-row: auto; }
  .coverage { grid-template-columns: 1fr; }
  .about-editorial { padding: 95px 22px; }
  .clients-heading, .certifications-header { grid-template-columns: 1fr; gap: 30px; }
  .clients-intro { max-width: 650px; }
  .certification-board { display: block; width: calc(100vw - 36px); padding: 10px 0 18px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .certification-track { width: max-content; display: flex; gap: 12px; animation: certificationLoop 28s linear infinite; will-change: transform; }
  .certification-card.certification-card-clone { display: flex; }
  .certification-card, .certification-card-wide { width: min(66vw, 270px); height: 180px; flex: 0 0 auto; }
  .contact-shell { grid-template-columns: 1fr; }
  .page-hero { min-height: auto; padding: 125px 22px 75px; }
  .page-hero-visual { min-height: 470px; }
  .case-studies-heading { grid-template-columns: 1fr; gap: 24px; }
  .case-study-featured { grid-row: auto; min-height: 650px; }
  .portfolio-gallery-toolbar { align-items: flex-start; flex-direction: column; }
  .portfolio-gallery-toolbar .filter-bar { justify-content: flex-start; }
  .access-grid { grid-template-columns: 1fr; }
  .access-card { min-height: 310px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-column:last-child { grid-column: auto; }
}

@media (max-width: 520px) {
  .display { font-size: clamp(3rem, 15vw, 4.6rem); }
  .section-title { font-size: clamp(2.5rem, 12vw, 3.7rem); }
  .service-world { padding: 82px 18px; }
  .world-photo, .world-photo-main { grid-column: span 1; border-radius: 18px; }
  .execution-rhythm { padding: 58px 18px; }
  .execution-steps { margin-inline: -8px; }
  .execution-steps strong { font-size: .68rem; }
  .hero-proof strong { font-size: 1.7rem; }
  .service-row, .service-row:nth-child(2), .service-row:nth-child(3) { padding: 26px 22px; grid-template-columns: 58px minmax(0, 1fr) 40px; gap: 16px; }
  .proof-system { padding: 82px 18px; }
  .service-icon { width: 58px; height: 58px; border-radius: 16px; }
  .service-icon svg { width: 28px; }
  .coverage-list div { grid-template-columns: 1fr; gap: 6px; }
  .about-editorial { padding: 82px 18px; }
  .clients-section { padding-inline: 0; }
  .certifications-section { padding-inline: 18px; }
  .clients-heading { margin-bottom: 42px; }
  .clients-intro { padding-left: 18px; }
  .certification-board { gap: 10px; }
  .certification-card { padding: 15px; border-radius: 18px; }
  .certification-card img, .certification-card-seal img { height: 100px; }
  .contact-panel { padding: 12px; }
  .contact-shell { padding: 58px 22px; border-radius: 28px; }
  .contact-form { padding: 24px 19px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .page-hero-visual { min-height: 380px; }
  .page-hero-badge { left: -8px; width: 115px; height: 115px; }
  .case-studies { padding: 82px 18px; }
  .case-study, .case-study-featured { min-height: auto; padding: 28px 23px; border-radius: 24px; }
  .case-study h3, .case-study:not(.case-study-featured) h3 { margin-top: 28px; }
  .case-study-metrics { margin-top: 32px; }
  .case-study-metrics div { padding: 17px 14px; }
  .portfolio-confidentiality { padding: 25px 22px; grid-template-columns: 1fr; gap: 16px; }
  .portfolio-confidentiality p { grid-column: auto; }
  .security-note { align-items: flex-start; flex-direction: column; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .certification-board { overflow-x: auto; mask-image: none; }
  .certification-track { animation: none; }
}

/* ================================================================
   Immersive direction v1
   Native adaptation of 21st.dev Hero Page + Resizable Navbar.
   ================================================================ */

:root {
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --hero-x: 0px;
  --hero-y: 0px;
}

/* Resizable Navbar adaptation */
.site-header {
  padding: 20px 24px;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
}

.site-header .nav-shell {
  width: min(100%, 1320px);
  max-width: 1320px;
  min-height: 68px;
  padding: 6px 10px 6px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  pointer-events: auto;
  transition:
    width .7s var(--ease-premium),
    min-height .7s var(--ease-premium),
    padding .7s var(--ease-premium),
    background .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    transform .7s var(--ease-premium);
}

.site-header.is-scrolled {
  padding: 9px 24px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.site-header.is-scrolled .nav-shell {
  width: min(940px, calc(100vw - 48px));
  min-height: 58px;
  padding: 4px 6px 4px 15px;
  border-color: rgba(255,255,255,.58);
  background: rgba(247,248,244,.82);
  box-shadow: 0 18px 55px rgba(11,32,88,.18), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  transform: translateY(5px);
}

.site-header .brand img { transition: width .55s var(--ease-premium), filter .35s ease; }
.site-header.is-scrolled .brand img { width: 116px; height: 46px; }
.site-header .main-nav { gap: clamp(12px, 1.6vw, 23px); }
.site-header .main-nav > a:not(.nav-cta) { border-radius: 999px; transition: color .2s ease, background .2s ease, padding .45s var(--ease-premium); }
.site-header .main-nav > a:not(.nav-cta)::after { display: none; }
.site-header .main-nav > a:not(.nav-cta):hover,
.site-header .main-nav > a:not(.nav-cta)[aria-current="page"] { padding-inline: 13px; background: rgba(107,206,243,.16); }
.site-header.is-scrolled .nav-cta { padding-block: 11px; }

/* Hero Page adaptation */
.immersive-hero {
  min-height: 1120px;
  padding: 150px max(5vw, 32px) 56px;
  isolation: isolate;
  background: #07183f;
}

.immersive-hero::after { display: none; }
.immersive-backdrop,
.immersive-backdrop::after,
.immersive-wash,
.immersive-grid { position: absolute; inset: 0; }
.immersive-backdrop { z-index: -2; overflow: hidden; }
.immersive-backdrop > img {
  width: calc(100% + 90px);
  height: calc(100% + 90px);
  margin: -45px;
  object-fit: cover;
  object-position: 55% 36%;
  filter: saturate(.82) contrast(1.08);
  transform: translate3d(calc(var(--hero-x) * -.22), calc(var(--hero-y) * -.22), 0) scale(1.06);
  transition: transform .3s ease-out;
}
.immersive-backdrop::after {
  content: "";
  background:
    linear-gradient(180deg, rgba(4,15,45,.62) 0%, rgba(4,15,45,.3) 33%, rgba(4,15,45,.76) 75%, #07183f 100%),
    linear-gradient(90deg, rgba(5,18,53,.86) 0%, rgba(5,18,53,.38) 55%, rgba(5,18,53,.6) 100%);
}
.immersive-wash {
  background: radial-gradient(circle at 51% 23%, rgba(107,206,243,.2), transparent 25%), radial-gradient(circle at 83% 45%, rgba(0,129,202,.2), transparent 27%);
  mix-blend-mode: screen;
}
.immersive-grid {
  opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 68%);
}
.immersive-orb { position: absolute; border: 1px solid rgba(107,206,243,.28); border-radius: 50%; box-shadow: 0 0 0 60px rgba(107,206,243,.035), 0 0 0 120px rgba(107,206,243,.02); }
.immersive-orb-a { width: 520px; height: 520px; right: -180px; top: 100px; transform: translate3d(calc(var(--hero-x) * .32), calc(var(--hero-y) * .32), 0); }
.immersive-orb-b { width: 250px; height: 250px; left: 10%; bottom: 190px; transform: translate3d(calc(var(--hero-x) * -.15), calc(var(--hero-y) * -.15), 0); }

.immersive-hero-shell { position: relative; z-index: 2; width: min(1320px, 100%); margin: 0 auto; }
.immersive-copy { max-width: 1090px; margin-inline: auto; text-align: center; }
.hero-badge {
  width: max-content;
  margin: 0 auto 26px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.85);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-badge span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 6px rgba(107,206,243,.12); }
.immersive-title {
  max-width: 1080px;
  margin: 0 auto;
  color: white;
  font-size: clamp(4.2rem, 7.35vw, 7.7rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.067em;
  text-wrap: balance;
}
.inline-visual img.is-active,
.experience-media img.is-active { opacity: 1; transform: scale(1); filter: blur(0); }
.immersive-copy .hero-lede { max-width: 760px; margin: 30px auto 0; color: rgba(222,233,248,.84); font-size: clamp(1rem, 1.45vw, 1.23rem); }
.immersive-copy .hero-actions { justify-content: center; margin-top: 34px; }
.hero-secondary { display: inline-flex; min-height: 54px; padding: 0 23px; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); font-weight: 800; transition: background .25s ease, transform .25s ease; }
.hero-secondary:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
.immersive-hero .hero-proof { width: min(700px, 78%); margin: 53px auto 0; }
.immersive-hero .hero-proof div { text-align: center; }
.hero-scroll { width: max-content; margin: 34px auto 0; display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-scroll span { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; }
.hero-scroll span::after { content: ""; display: block; width: 4px; height: 4px; margin: 8px auto 0; border-radius: 50%; background: var(--sky); animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot { 50% { transform: translateY(7px); } }

@media (max-width: 1080px) {
  .site-header .main-nav { gap: 11px; font-size: .74rem; }
  .site-header .main-nav > a:not(.nav-cta) { padding-inline: 4px; }
  .site-header.is-scrolled .nav-shell { width: min(900px, calc(100vw - 36px)); }
  .immersive-hero { min-height: 1030px; }
}

@media (max-width: 800px) {
  .site-header,
  .site-header.is-scrolled { padding: 10px 14px; }
  .site-header .nav-shell,
  .site-header.is-scrolled .nav-shell {
    width: 100%;
    min-height: 58px;
    padding: 4px 5px 4px 14px;
    border-color: rgba(255,255,255,.42);
    background: rgba(247,248,244,.9);
    box-shadow: 0 14px 42px rgba(11,32,88,.16);
    backdrop-filter: blur(20px) saturate(145%);
    transform: none;
  }
  .site-header:not(.is-scrolled) .brand img { filter: none; }
  .site-header .brand img,
  .site-header.is-scrolled .brand img { width: 112px; height: 44px; }
  .site-header .menu-toggle { display: block; }
  .site-header .main-nav {
    top: 75px;
    right: 14px;
    left: 14px;
    width: auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 24px;
    background: rgba(247,248,244,.96);
    box-shadow: 0 25px 60px rgba(11,32,88,.2);
    backdrop-filter: blur(24px);
  }
  .site-header .main-nav > a:not(.nav-cta),
  .site-header .main-nav > a:not(.nav-cta):hover,
  .site-header .main-nav > a:not(.nav-cta)[aria-current="page"] { width: 100%; padding: 13px 14px; }
  .immersive-hero { min-height: 970px; padding: 122px 18px 44px; }
  .immersive-title { font-size: clamp(3.35rem, 14vw, 5.8rem); line-height: .9; }
  .immersive-copy .hero-lede { max-width: 580px; }
  .immersive-hero .hero-proof { width: 95%; }
}

@media (max-width: 560px) {
  .immersive-hero { min-height: 920px; padding-inline: 16px; }
  .hero-badge { margin-bottom: 20px; padding: 9px 12px; font-size: .58rem; letter-spacing: .1em; }
  .immersive-title { font-size: clamp(3.05rem, 15vw, 4.5rem); }
  .immersive-copy .hero-lede { margin-top: 23px; font-size: .98rem; line-height: 1.58; }
  .immersive-copy .hero-actions { width: 100%; margin-top: 27px; flex-direction: column; gap: 10px; }
  .immersive-copy .button,
  .hero-secondary { width: 100%; }
  .immersive-hero .hero-proof { margin-top: 48px; width: 100%; gap: 0; }
  .immersive-hero .hero-proof div { padding-inline: 8px; }
  .immersive-hero .hero-proof div + div { padding-left: 8px; }
  .immersive-hero .hero-proof strong { font-size: 1.55rem; }
  .immersive-hero .hero-proof span { font-size: .6rem; }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-backdrop > img,
  .immersive-orb,
  .hero-experience { transform: none !important; }
  .hero-scroll span::after { animation: none; }
}

/* ================================================================
   Scroll-directed experience v2
   Functional navigation remains available while the home page unfolds.
   ================================================================ */

.scene-rail {
  position: fixed;
  z-index: 90;
  right: 18px;
  top: 50%;
  width: 52px;
  padding: 10px 8px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 24px;
  background: rgba(247,248,244,.78);
  box-shadow: 0 18px 48px rgba(11,32,88,.15), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(18px) saturate(145%);
  transform: translateY(-50%);
}
.scene-rail > a {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: .58rem;
  font-weight: 900;
  transition: color .25s ease, background .25s ease, transform .25s var(--ease-premium);
}
.scene-rail > a:hover,
.scene-rail > a.is-active { color: white; background: var(--navy); transform: scale(1.08); }
.scene-rail > a strong {
  position: absolute;
  right: 45px;
  padding: 8px 11px;
  border-radius: 999px;
  color: white;
  background: rgba(7,24,63,.88);
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.scene-rail > a:hover strong,
.scene-rail > a:focus-visible strong { opacity: 1; transform: none; }
.scene-rail > i { position: absolute; top: 17px; right: -5px; width: 2px; height: calc(100% - 34px); overflow: hidden; border-radius: 99px; background: rgba(22,51,125,.13); }
.scene-rail > i b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--steel); transform: scaleY(var(--page-progress, 0)); transform-origin: top; }

.scroll-scene { --scene-progress: 0; }
.scroll-bridge .manifesto-track { transform: translate3d(var(--bridge-shift, 0px), 0, 0) rotate(var(--bridge-rotate, 0deg)); animation: none; will-change: transform; }

@media (min-width: 801px) {
  .immersive-hero.scroll-scene {
    height: 145vh;
    min-height: 1040px;
    padding: 0 max(5vw, 32px);
  }
  .immersive-hero .immersive-hero-shell {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 720px;
    padding: clamp(98px, 11vh, 128px) 0 22px;
    overflow: hidden;
  }
  .immersive-title { max-width: 980px; font-size: clamp(3.9rem, 6.25vw, 6.45rem); }
  .immersive-copy {
    transform: translate3d(0, var(--hero-copy-y, 0px), 0) scale(var(--hero-copy-scale, 1));
    opacity: var(--hero-copy-opacity, 1);
    transform-origin: center top;
    will-change: transform, opacity;
  }
  .hero-badge { margin-bottom: 17px; }
  .immersive-copy .hero-lede { margin-top: 19px; }
  .immersive-copy .hero-actions { margin-top: 21px; }
  .immersive-hero .hero-proof {
    margin-top: clamp(21px, 3vh, 32px);
    opacity: var(--hero-proof-opacity, 1);
    transform: translateY(var(--hero-proof-y, 0px));
    will-change: transform, opacity;
  }
  .hero-scroll { position: absolute; right: 0; bottom: 25px; margin: 0; opacity: var(--hero-scroll-opacity, 1); }
  .immersive-backdrop > img {
    transform: translate3d(calc(var(--hero-x) * -.22), calc(var(--hero-y) * -.22), 0) scale(var(--hero-bg-scale, 1.06));
    will-change: transform;
  }

  .scroll-bridge {
    position: relative;
    z-index: 8;
    margin-top: -30px;
    padding-block: clamp(34px, 5vh, 54px);
    border-radius: 30px 30px 0 0;
    box-shadow: 0 -24px 65px rgba(7,24,63,.18);
  }

  .home-services[data-card-stack] { padding-top: 105px; padding-bottom: 18vh; }
  .home-services[data-card-stack] .section-heading { margin-bottom: 8vh; }
  .home-services[data-card-stack] .service-stack { gap: 15vh; padding-bottom: 12vh; }
  .home-services[data-card-stack] .service-row {
    position: sticky;
    top: 126px;
    z-index: 1;
    min-height: 260px;
    border-color: rgba(22,51,125,.12);
    box-shadow: 0 28px 80px rgba(11,32,88,.13);
    transform: translateY(var(--stack-y, 0px)) scale(var(--stack-scale, 1));
    transform-origin: center top;
    will-change: transform;
  }
  .home-services[data-card-stack] .service-row:nth-child(2) { top: 148px; z-index: 2; }
  .home-services[data-card-stack] .service-row:nth-child(3) { top: 170px; z-index: 3; }
  .home-services[data-card-stack] .service-row::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.24), transparent 64%);
    transform: translateX(var(--card-light, -120%));
    pointer-events: none;
  }

  .proof-system[data-proof-scene] { min-height: 132vh; padding: 0 max(5vw, 28px); }
  .proof-system[data-proof-scene] .proof-system-shell {
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding-block: clamp(78px, 9vh, 105px) 35px;
  }
  .proof-system[data-proof-scene] .proof-system-visual {
    height: min(62vh, 600px);
    min-height: 440px;
    transform: translate3d(0, var(--proof-visual-y, 0px), 0) scale(var(--proof-visual-scale, .94));
    opacity: var(--proof-visual-opacity, .9);
    will-change: transform, opacity;
  }
  .proof-system[data-proof-scene] .proof-system-copy { transform: translateY(var(--proof-copy-y, 18px)); opacity: var(--proof-copy-opacity, .82); will-change: transform, opacity; }
  .proof-system[data-proof-scene] .proof-system-grid article { transition: opacity .35s ease, transform .5s var(--ease-premium); }

  .home-portfolio[data-horizontal-scene] {
    height: 180vh;
    padding: 0 max(5vw, 28px);
    overflow: clip;
  }
  .home-portfolio[data-horizontal-scene] > .section-shell {
    position: sticky;
    top: 0;
    height: 100vh;
    max-width: none;
    padding-top: clamp(105px, 13vh, 145px);
    overflow: hidden;
  }
  .home-portfolio[data-horizontal-scene] .section-heading { width: min(var(--max), 100%); margin: 0 auto 40px; }
  .home-portfolio[data-horizontal-scene] .portfolio-preview {
    width: max-content;
    height: min(54vh, 540px);
    display: flex;
    gap: 22px;
    transform: translate3d(var(--portfolio-shift, 0px), 0, 0);
    will-change: transform;
  }
  .home-portfolio[data-horizontal-scene] .portfolio-tile { width: min(64vw, 860px); flex: 0 0 auto; }
  .home-portfolio[data-horizontal-scene] .portfolio-tile:not(:first-child) { width: min(43vw, 610px); }
  .home-portfolio[data-horizontal-scene] .portfolio-tile img { transform: scale(var(--portfolio-image-scale, 1.08)); }
  .home-portfolio[data-horizontal-scene] .portfolio-cta { position: absolute; right: 0; bottom: 35px; margin: 0; }

  .coverage[data-parallax-scene] .coverage-copy { transform: translate3d(0, var(--coverage-copy-y, 45px), 0); opacity: var(--coverage-copy-opacity, .55); will-change: transform, opacity; }
  .coverage[data-parallax-scene] .coverage-map { transform: translate3d(0, var(--coverage-map-y, -35px), 0) scale(var(--coverage-map-scale, .94)); will-change: transform; }
  .about-editorial[data-parallax-scene] .about-editorial-image { transform: translate3d(0, var(--about-image-y, 45px), 0); will-change: transform; }
  .about-editorial[data-parallax-scene] .about-editorial-card { transform: translate3d(0, var(--about-card-y, -45px), 0); will-change: transform; }
}

@media (max-width: 1100px) {
  .scene-rail { display: none; }
}

@media (max-width: 800px) {
  .scroll-bridge .manifesto-track { animation: marquee 28s linear infinite; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-rail { display: none; }
  .immersive-hero.scroll-scene,
  .proof-system[data-proof-scene],
  .home-portfolio[data-horizontal-scene] { height: auto; min-height: 0; }
  .immersive-hero .immersive-hero-shell,
  .proof-system[data-proof-scene] .proof-system-shell,
  .home-portfolio[data-horizontal-scene] > .section-shell,
  .home-services[data-card-stack] .service-row { position: relative; top: auto; height: auto; min-height: 0; }
  .home-portfolio[data-horizontal-scene] .portfolio-preview { width: auto; height: auto; display: grid; transform: none; }
  .home-portfolio[data-horizontal-scene] .portfolio-tile,
  .home-portfolio[data-horizontal-scene] .portfolio-tile:not(:first-child) { width: auto; }
}

/* ================================================================
   Immersive continuity v3: atmosphere, transition scene and ScanMark HUD.
   ================================================================ */

.page-atmosphere { position: fixed; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; opacity: .18; transition: opacity .8s ease; }
.atmosphere-glow { position: absolute; border-radius: 50%; filter: blur(75px); opacity: .48; transition: background 1s ease, transform 1.4s var(--ease-premium), opacity 1s ease; }
.atmosphere-glow-a { width: 38vw; height: 38vw; left: -16vw; top: 12vh; background: rgba(107,206,243,.42); transform: translate3d(0, var(--atmosphere-y, 0px), 0); }
.atmosphere-glow-b { width: 31vw; height: 31vw; right: -12vw; bottom: 7vh; background: rgba(0,129,202,.32); transform: translate3d(0, var(--atmosphere-y-reverse, 0px), 0); }
.cursor-aura { position: fixed; left: 0; top: 0; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(107,206,243,.18), rgba(107,206,243,.045) 38%, transparent 69%); opacity: var(--cursor-opacity, 0); transform: translate3d(var(--cursor-x, -500px), var(--cursor-y, -500px), 0) translate(-50%, -50%); transition: opacity .35s ease; will-change: transform; }
body[data-page-tone="paper"] .page-atmosphere { opacity: .095; }
body[data-page-tone="paper"] .atmosphere-glow-a { background: rgba(0,129,202,.3); }
body[data-page-tone="paper"] .atmosphere-glow-b { background: rgba(249,105,0,.14); }
body[data-page-tone="sky"] .page-atmosphere { opacity: .14; }
body[data-page-tone="sky"] .atmosphere-glow-a { background: rgba(107,206,243,.62); transform: translate3d(28vw, var(--atmosphere-y, 0px), 0); }
body[data-page-tone="sky"] .atmosphere-glow-b { background: rgba(22,51,125,.22); }
body[data-page-tone="electric"] .page-atmosphere { opacity: .22; }
body[data-page-tone="electric"] .atmosphere-glow-a { background: rgba(0,129,202,.58); transform: translate3d(16vw, var(--atmosphere-y, 0px), 0); }
body[data-page-tone="electric"] .atmosphere-glow-b { background: rgba(107,206,243,.4); }
body[data-page-tone="midnight"] .page-atmosphere { opacity: .2; }
body[data-page-tone="midnight"] .atmosphere-glow-a { background: rgba(107,206,243,.4); }
body[data-page-tone="midnight"] .atmosphere-glow-b { background: rgba(0,129,202,.38); }

.is-magnetic { transform: translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0); transition: transform .35s var(--ease-premium), background .2s ease, box-shadow .2s ease; will-change: transform; }

.execution-bridge {
  position: relative;
  z-index: 3;
  height: 148vh;
  min-height: 1050px;
  color: white;
  background: #07183f;
  overflow: clip;
}
.execution-bridge-stage { position: sticky; top: 0; height: 100vh; min-height: 700px; overflow: hidden; isolation: isolate; }
.execution-bridge-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at center, rgba(0,129,202,.24), transparent 42%), linear-gradient(135deg, #07183f, #0b2c6c 62%, #07183f); }
.execution-bridge-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #07183f 0%, transparent 19%, transparent 78%, #07183f 100%); }
.execution-bridge-media { position: absolute; top: 14vh; width: 42vw; height: 68vh; min-height: 460px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); box-shadow: 0 36px 90px rgba(0,0,0,.35); will-change: transform, clip-path, opacity; }
.execution-bridge-media img { width: 100%; height: 100%; object-fit: cover; }
.execution-bridge-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,24,63,.03), rgba(7,24,63,.65)); }
.execution-bridge-media > span { position: absolute; z-index: 2; left: 24px; bottom: 22px; color: rgba(255,255,255,.78); font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.execution-bridge-field { left: 5vw; border-radius: 220px 28px 28px 28px; opacity: var(--bridge-field-opacity, 1); transform: translate3d(var(--bridge-field-x, 0px), var(--bridge-field-y, 0px), 0) scale(var(--bridge-field-scale, 1)); clip-path: inset(0 var(--bridge-field-clip, 0%) 0 0 round 28px); }
.execution-bridge-data { right: 5vw; border-radius: 28px 220px 28px 28px; opacity: var(--bridge-data-opacity, .7); transform: translate3d(var(--bridge-data-x, 0px), var(--bridge-data-y, 0px), 0) scale(var(--bridge-data-scale, .88)); clip-path: inset(0 0 0 var(--bridge-data-clip, 16%) round 28px); }
.execution-bridge-copy { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(930px, 86vw); text-align: center; transform: translate3d(-50%, calc(-50% + var(--bridge-copy-y, 36px)), 0) scale(var(--bridge-copy-scale, .92)); opacity: var(--bridge-copy-opacity, .25); will-change: transform, opacity; }
.execution-bridge-copy p { margin: 0 0 20px; color: var(--sky); font-size: .7rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.execution-bridge-copy h2 { margin: 0; font-size: clamp(3.8rem, 7.1vw, 7.7rem); line-height: .88; letter-spacing: -.065em; }
.execution-bridge-copy em { color: var(--sky); font-family: var(--serif); font-weight: 700; }
.execution-bridge-line { position: absolute; z-index: 4; left: 50%; bottom: 7vh; width: min(520px, 58vw); height: 1px; background: rgba(255,255,255,.18); transform: translateX(-50%); }
.execution-bridge-line i { display: block; width: var(--bridge-line, 0%); height: 100%; background: var(--sky); box-shadow: 0 0 18px rgba(107,206,243,.8); }
.execution-bridge-line b { position: absolute; top: 50%; left: var(--bridge-line, 0%); width: 10px; height: 10px; border: 2px solid var(--sky); border-radius: 50%; background: #07183f; box-shadow: 0 0 0 7px rgba(107,206,243,.12); transform: translate(-50%, -50%); }

@media (max-width: 800px) {
  .page-atmosphere { opacity: .08 !important; }
  .cursor-aura { display: none; }
  .execution-bridge { height: auto; min-height: 0; padding: 90px 18px; }
  .execution-bridge-stage { position: relative; height: auto; min-height: 760px; overflow: visible; }
  .execution-bridge-media { top: auto; width: 78%; height: 360px; min-height: 0; }
  .execution-bridge-field { left: 0; top: 0; border-radius: 130px 20px 20px 20px; transform: none; clip-path: none; }
  .execution-bridge-data { right: 0; top: 250px; border-radius: 20px 100px 20px 20px; transform: none; clip-path: none; }
  .execution-bridge-copy { top: auto; bottom: 0; width: 100%; transform: translateX(-50%); opacity: 1; }
  .execution-bridge-copy h2 { font-size: clamp(3rem, 12vw, 5rem); }
  .execution-bridge-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-atmosphere,
  .cursor-aura { display: none; }
  .execution-bridge { height: auto; min-height: 0; padding: 100px 5vw; }
  .execution-bridge-stage { position: relative; height: 780px; }
  .execution-bridge-field,
  .execution-bridge-data,
  .execution-bridge-copy { opacity: 1; transform: none; clip-path: none; }
  .execution-bridge-copy { transform: translate(-50%, -50%); }
}

/* ================================================================
   Chromatic art direction v4
   Each commercial chapter owns a distinct visual world while the
   navigation, content hierarchy and conversion paths stay unchanged.
   ================================================================ */

:root {
  --sage-mist: #dce7d5;
  --sage-deep: #244a42;
  --sand: #ead7bc;
  --coral: #df624b;
  --coral-deep: #7b2f32;
  --sun: #f0c85a;
  --plum: #35213f;
  --plum-light: #72516e;
  --teal-night: #071f28;
  --mint-light: #aee5d5;
  --wine: #481f37;
  --charcoal: #151820;
}

body { transition: background-color .8s ease; }

/* The atmosphere now follows the chapter palette instead of returning
   to the same blue glow throughout the page. */

/* Services: a light editorial chapter with three image-led worlds. */
.home-services {
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 12%, rgba(223,98,75,.2), transparent 22%),
    linear-gradient(145deg, #f4eadb 0%, var(--sage-mist) 52%, #edf0dd 100%);
}
.home-services::before {
  inset: 0;
  width: auto;
  height: auto;
  z-index: -2;
  opacity: .35;
  background-image:
    linear-gradient(rgba(36,74,66,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,74,66,.08) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, #000, transparent 58%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 58%);
}
.home-services::after {
  content: "RETAIL · BTL · DATA";
  position: absolute;
  z-index: -1;
  right: -3vw;
  top: 4.5rem;
  color: rgba(36,74,66,.07);
  font-family: var(--serif);
  font-size: clamp(5rem, 11vw, 10.5rem);
  font-weight: 700;
  letter-spacing: -.06em;
  white-space: nowrap;
  opacity: var(--services-art-opacity, .32);
  transform: translate3d(0, var(--services-art-y, 40px), 0) scale(var(--services-art-scale, .94));
  transform-origin: right top;
  will-change: transform, opacity;
}
.home-services .section-shell { position: relative; z-index: 2; }

.service-row {
  isolation: isolate;
  border-color: rgba(43,63,53,.15);
  box-shadow: 0 30px 75px rgba(55,64,49,.14);
}
.service-row > * { position: relative; z-index: 2; }
.service-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 48%;
  background-position: center;
  background-size: cover;
  opacity: .38;
  mask-image: linear-gradient(90deg, transparent, #000 38%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.04);
  transition: transform .75s var(--ease-premium), opacity .45s ease;
}
.service-row:hover::before { opacity: .5; transform: scale(1.1); }
.service-row:nth-child(1)::before { background-image: url("assets/services-retail-detail.webp"); }
.service-row:nth-child(2)::before { background-image: url("assets/services-btl.webp"); }
.service-row:nth-child(3)::before { background-image: url("assets/services-scanmark.webp"); opacity: .32; }

/* Execution: warm field energy crossing into a technological night. */
.execution-bridge { background: #311d29; }

/* ScanMark: green-blue technology, deliberately distinct from the hero. */
.proof-system {
  background:
    radial-gradient(circle at 16% 32%, rgba(64,174,162,.2), transparent 27%),
    linear-gradient(142deg, #04171e 0%, var(--teal-night) 55%, #0d3e42 100%);
}

/* Portfolio: a gallery room rather than another corporate-blue section. */
.home-portfolio {
  background:
    radial-gradient(circle at 88% 18%, rgba(223,98,75,.26), transparent 25%),
    linear-gradient(138deg, #21162c 0%, var(--plum) 54%, #4d2945 100%);
}
.home-portfolio .eyebrow-light { color: #f3a985; }
.home-portfolio .section-title em,
.home-portfolio .tile-copy span { color: #ffad7f; }
.portfolio-tile { border: 1px solid rgba(255,222,204,.2); box-shadow: 0 35px 80px rgba(22,10,27,.35); }

/* Coverage: bright confidence and geographical scale. */
.coverage {
  isolation: isolate;
  color: #342c22;
  background:
    radial-gradient(circle at 76% 35%, rgba(255,255,255,.58), transparent 24%),
    linear-gradient(135deg, #f5df92 0%, var(--sun) 45%, #e9a75d 100%);
}
.coverage::before {
  content: "MÉXICO";
  position: absolute;
  z-index: -1;
  left: -2vw;
  bottom: -4vw;
  color: rgba(92,58,24,.09);
  font-family: var(--serif);
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 700;
  line-height: .7;
  letter-spacing: -.08em;
}

/* About: warm human territory with the photograph crossing into a deep card. */
.about-editorial {
  background:
    radial-gradient(circle at 12% 80%, rgba(255,235,199,.64), transparent 25%),
    linear-gradient(140deg, #efc5a0 0%, #e98769 45%, #d86152 100%);
}
.about-editorial::before { content: "WM"; right: -4vw; top: -4rem; color: rgba(109,42,48,.09); font-size: clamp(15rem, 34vw, 32rem); }

/* Trust and governance settle the experience without returning to white. */
.clients-section {
  background:
    radial-gradient(circle at 88% 16%, rgba(240,200,90,.34), transparent 23%),
    linear-gradient(145deg, #eff0cf 0%, #dce7c9 52%, #c8d9b7 100%);
}
.clients-section .eyebrow { color: #5b723f; }
.clients-section .section-title em { color: #a94e37; }
.certification-note { border-color: rgba(191,231,191,.24); background: rgba(191,231,191,.08); }

/* Conversion closes in a richer wine/coral environment. */
.contact-panel { background: linear-gradient(180deg, #e5d7bb, #d9c4aa); }
.footer-accent { border-color: rgba(242,163,111,.09); }

@media (max-width: 800px) {
  .home-services::after { top: 6rem; right: -16vw; font-size: 6rem; }
  .service-row::before { left: 34%; opacity: .25; }
  .coverage::before { bottom: 2rem; font-size: 9rem; }
  .about-editorial::before { top: 2rem; font-size: 14rem; }
}

@media (max-width: 560px) {
  .home-services::after { display: none; }
  .service-row::before { inset: 0; opacity: .17; mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000); }
  .coverage::before { left: -8vw; font-size: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-services::after { opacity: .3; transform: none; }
  .service-row::before { transform: none; }
}

/* ================================================================
   WaveMark brand calibration v5
   Keeps the editorial compositions and motion from v4, but limits the
   visible palette to the core WaveMark colors and neutral tints.
   ================================================================ */

.home-services .eyebrow { color: var(--steel); }
.home-services .section-title em { color: var(--steel); }
.service-row:nth-child(1) .service-icon { color: var(--navy); background: white; }
.service-row:nth-child(2) .service-icon { color: var(--navy); background: #fff2e8; }
.service-row:nth-child(2) p { color: rgba(255,245,236,.9); }
.service-row:nth-child(3) .number { color: var(--sky); }
.service-row:nth-child(3) .service-icon { color: var(--navy); background: var(--sky); }
.service-row:nth-child(3) p { color: #d4e2f3; }
.execution-bridge-line i { background: var(--sky); box-shadow: 0 0 22px rgba(107,206,243,.85); }
.execution-bridge-line b { border-color: var(--sky); background: var(--navy-deep); box-shadow: 0 0 0 7px rgba(107,206,243,.15); }

.proof-system {
  background:
    radial-gradient(circle at 16% 32%, rgba(0,129,202,.22), transparent 28%),
    linear-gradient(142deg, #07183f 0%, var(--navy-deep) 56%, #123a78 100%);
}
.proof-system-pattern { color: var(--sky); opacity: .06; }
.proof-system .eyebrow-light,
.proof-system .section-title em,
.proof-system-grid span,
.proof-system-link { color: var(--sky); }
.proof-system-copy > p:not(.eyebrow) { color: #bdcbe0; }
.portfolio-tile { border-color: rgba(255,255,255,.18); box-shadow: 0 35px 80px rgba(4,15,45,.35); }
.portfolio-tile::after { background: linear-gradient(180deg, transparent 37%, rgba(7,24,63,.9)); }

.coverage {
  color: var(--ink);
  background:
    radial-gradient(circle at 76% 35%, rgba(255,255,255,.75), transparent 25%),
    linear-gradient(135deg, #f7f8f4 0%, #dff3fb 48%, var(--sky) 100%);
}
.coverage::before { color: rgba(22,51,125,.07); }
.coverage .eyebrow,
.coverage .coverage-list strong { color: var(--steel); }
.coverage .section-title em { color: var(--steel); }
.coverage .section-copy,
.coverage .coverage-list span { color: var(--muted); }
.coverage-list { border-color: var(--line); }
.coverage-map img { filter: drop-shadow(0 28px 36px rgba(11,32,88,.2)); }
.map-pill { color: white; background: var(--pumpkin); box-shadow: 0 16px 34px rgba(249,105,0,.25); }

.about-editorial {
  background:
    radial-gradient(circle at 12% 80%, rgba(107,206,243,.18), transparent 26%),
    linear-gradient(140deg, var(--paper) 0%, white 50%, var(--beige) 100%);
}
.about-editorial::before { color: rgba(107,206,243,.11); }
.about-editorial .eyebrow { color: var(--steel); }
.about-editorial .section-title em { color: var(--steel); }

.clients-section {
  background:
    radial-gradient(circle at 88% 16%, rgba(249,105,0,.1), transparent 23%),
    linear-gradient(145deg, white 0%, #f1f8fb 55%, var(--beige) 100%);
}
.clients-orbit { border-color: rgba(107,206,243,.13); }
.clients-section .eyebrow,
.clients-section .section-title em { color: var(--steel); }

.certifications-section {
  background:
    radial-gradient(circle at 78% 18%, rgba(21,127,31,.16), transparent 24%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 65%, #214b9a 100%);
}
.certifications-section::after { color: rgba(107,206,243,.09); }
.certifications-section .eyebrow-light,
.certifications-section .section-title em { color: var(--sky); }
.certification-note { border-color: rgba(107,206,243,.24); background: rgba(107,206,243,.08); }
.certification-card { border-color: rgba(255,255,255,.55); background: white; box-shadow: 0 18px 48px rgba(3,18,55,.24); }

.contact-panel { background: var(--paper); }
.contact-shell {
  background:
    radial-gradient(circle at 15% 20%, rgba(107,206,243,.22), transparent 27%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 60%, #07183f 100%);
  box-shadow: 0 35px 90px rgba(11,32,88,.22);
}
.contact-copy .eyebrow-light,
.contact-kicker { color: var(--sky); }
.contact-copy .section-copy { color: #c2d0e8; }
.contact-form { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--sky); }
.contact-form .button-sky { color: var(--navy-deep); background: var(--sky); }
.footer-column h2 { color: var(--sky); }
.footer-accent { border-color: rgba(107,206,243,.08); }

/* ================================================================
   Rhythm calibration v6
   Shorter pinned scenes, earlier readability and a clear light exit
   from ScanMark prevent motion from becoming waiting time.
   ================================================================ */

@media (min-width: 801px) {
  .immersive-hero .immersive-copy { padding-top: clamp(28px, 5vh, 58px); }
  .immersive-hero .hero-proof { margin-top: clamp(42px, 6vh, 66px); }

  .proof-system[data-proof-scene] .proof-system-copy,
  .proof-system[data-proof-scene] .proof-system-visual { transition: opacity .18s linear; }

  .home-portfolio[data-horizontal-scene] {
    position: relative;
    z-index: 5;
    margin-top: -38px;
    border-radius: 38px 38px 0 0;
    box-shadow: 0 -30px 75px rgba(4,15,45,.22);
  }
}
.home-portfolio .portfolio-tile { border-color: rgba(22,51,125,.13); box-shadow: 0 30px 70px rgba(11,32,88,.16); }
.home-portfolio .portfolio-tile::after { background: linear-gradient(180deg, transparent 35%, rgba(7,24,63,.9)); }
.home-portfolio .tile-copy { color: white; }
.home-portfolio .tile-copy span { color: var(--sky); }
.home-portfolio .button-sky { color: white; background: var(--navy); }

@media (max-width: 800px) {
  .scroll-bridge { margin-top: -20px; border-radius: 20px 20px 0 0; }
  .home-portfolio { border-radius: 26px 26px 0 0; }
}

/* ================================================================
   21st.dev prompt adaptations v7
   ScanMark choreography + bounded infinite portfolio loop.
   ================================================================ */

.proof-choreography {
  isolation: isolate;
  background:
    radial-gradient(circle at 24% 48%, rgba(107,206,243,.16), transparent 28%),
    radial-gradient(circle at 72% 15%, rgba(0,129,202,.14), transparent 25%),
    linear-gradient(145deg, #061735 0%, var(--navy-deep) 52%, #0b2b64 100%);
}
.proof-choreography::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -12vw -32vw auto;
  width: 54vw;
  height: 54vw;
  border: 1px solid rgba(107,206,243,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 7vw rgba(107,206,243,.025), 0 0 0 15vw rgba(107,206,243,.018);
  pointer-events: none;
}
.proof-choreography-sticky {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  gap: clamp(48px, 6vw, 94px);
  align-items: center;
}
.proof-choreography-stage {
  position: relative;
  height: min(72vh, 700px);
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 34px 150px 34px 34px;
  background:
    linear-gradient(rgba(107,206,243,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,206,243,.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(0,129,202,.2), transparent 55%),
    rgba(4,18,48,.58);
  background-size: 54px 54px, 54px 54px, auto, auto;
  box-shadow: inset 0 0 70px rgba(2,10,31,.45), 0 36px 90px rgba(0,0,0,.25);
  overflow: hidden;
}
.proof-choreography-stage::before {
  content: "CAMPO  →  EVIDENCIA  →  DECISIÓN";
  position: absolute;
  z-index: 70;
  top: 22px;
  left: 26px;
  color: rgba(255,255,255,.64);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .15em;
}
.proof-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 43%;
  height: 30%;
  margin: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  background: #0b2058;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden;
  will-change: transform, opacity, width, height;
}
.proof-frame-a { z-index: 12; }
.proof-frame-b { z-index: 14; }
.proof-frame-c { z-index: 16; }
.proof-frame img { width: 100%; height: 100%; object-fit: cover; }
.proof-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(4,18,48,.88));
  pointer-events: none;
}
.proof-frame figcaption {
  position: absolute;
  z-index: 3;
  left: 16px;
  right: 16px;
  bottom: 13px;
  color: white;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .04em;
}
.proof-frame figcaption span { margin-right: 8px; color: var(--sky); }
.proof-frame-scanmark {
  z-index: 50;
  width: 34%;
  height: 42%;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.proof-frame-scanmark::after { display: none; }
.proof-frame-scanmark img {
  position: relative;
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 28px 32px rgba(0,0,0,.48));
}
.proof-frame-scanmark figcaption {
  left: 50%;
  right: auto;
  bottom: -2px;
  width: max-content;
  max-width: 90%;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(4,18,48,.82);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.proof-phone-glow {
  position: absolute;
  inset: 10% 5%;
  border-radius: 50%;
  background: rgba(107,206,243,.3);
  filter: blur(42px);
  animation: proofGlow 2.8s ease-in-out infinite;
}
.proof-scan-line {
  position: absolute;
  z-index: 60;
  top: 50%;
  left: 22%;
  right: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(107,206,243,.95), white, rgba(107,206,243,.95), transparent);
  box-shadow: 0 0 22px rgba(107,206,243,.85);
  opacity: var(--proof-scan-progress, 0);
  pointer-events: none;
}
.proof-live-status { position: absolute; z-index: 65; inset: 0; pointer-events: none; }
.proof-status {
  position: absolute;
  padding: 10px 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #dcecff;
  border: 1px solid rgba(107,206,243,.34);
  border-radius: 999px;
  background: rgba(5,24,61,.86);
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .055em;
  opacity: var(--proof-status-progress, 0);
  transform: translateY(calc((1 - var(--proof-status-progress, 0)) * 14px));
}
.proof-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 5px rgba(107,206,243,.12); animation: proofPulse 1.7s ease-in-out infinite; }
.proof-status-a { top: 24%; left: 8%; }
.proof-status-b { top: 48%; right: 6%; transition-delay: .08s; }
.proof-status-c { left: 11%; bottom: 18%; transition-delay: .16s; }
.proof-choreography[data-proof-scene] .proof-system-copy { position: relative; z-index: 4; opacity: 1; transform: none; }
.proof-choreography .proof-system-copy > p:not(.eyebrow) { max-width: 580px; margin-top: 22px; }
.proof-flow { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.15); }
.proof-flow article {
  position: relative;
  min-height: 92px;
  padding: 18px 15px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid rgba(255,255,255,.12);
  opacity: .42;
  transition: opacity .28s ease, background .28s ease, transform .4s var(--ease-premium);
}
.proof-flow article::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 2px;
  background: var(--sky);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--ease-premium);
}
.proof-flow article.is-active { opacity: 1; background: rgba(107,206,243,.07); transform: translateX(7px); }
.proof-flow article.is-active::before { transform: scaleY(1); }
.proof-flow article > span { color: var(--sky); font-family: var(--serif); font-size: 1.45rem; line-height: 1; }
.proof-flow strong { display: block; font-size: .92rem; }
.proof-flow p { margin: 6px 0 0; color: #9fb2cf; font-size: .72rem; line-height: 1.5; }
.proof-choreography .proof-system-link { margin-top: 24px; }

@keyframes proofGlow { 50% { opacity: .62; transform: scale(1.08); } }
@keyframes proofPulse { 50% { box-shadow: 0 0 0 9px rgba(107,206,243,0); } }

.portfolio-loop {
  max-width: var(--max);
  min-height: 720px;
  margin: 0 auto 120px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 14px;
  color: white;
  border-radius: 38px;
  outline: none;
  background:
    radial-gradient(circle at 12% 12%, rgba(107,206,243,.18), transparent 25%),
    var(--navy-deep);
  box-shadow: 0 36px 95px rgba(11,32,88,.25);
}
.portfolio-loop:focus-visible { box-shadow: 0 0 0 4px rgba(107,206,243,.42), 0 36px 95px rgba(11,32,88,.25); }
.portfolio-loop-viewport {
  position: relative;
  min-height: 688px;
  border-radius: 26px;
  background: #07183f;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.portfolio-loop-viewport.is-dragging { cursor: grabbing; }
.portfolio-loop-track, .loop-project { position: absolute; inset: 0; }
.loop-project {
  opacity: 0;
  transform: translateY(9%) scale(.94);
  pointer-events: none;
  transition: opacity .5s ease, transform .72s var(--ease-premium);
}
.loop-project.is-before { transform: translateY(-9%) scale(.94); }
.loop-project.is-active { z-index: 3; opacity: 1; transform: none; pointer-events: auto; }
.loop-project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--loop-x, 0px), var(--loop-y, 0px), 0) scale(1.075);
  transition: transform .8s var(--ease-premium);
}
.loop-project::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,15,45,.1) 26%, rgba(4,15,45,.9) 88%), linear-gradient(90deg, rgba(4,15,45,.45), transparent 60%);
}
.loop-project-copy {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 5vw, 68px);
  right: clamp(24px, 8vw, 100px);
  bottom: clamp(60px, 10vh, 92px);
  max-width: 710px;
  text-shadow: 0 3px 24px rgba(0,0,0,.32);
}
.loop-project-copy span { color: var(--sky); font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.loop-project-copy h2 { margin: 12px 0 14px; font-size: clamp(2.5rem, 4.8vw, 5rem); line-height: .94; letter-spacing: -.055em; }
.loop-project-copy p { max-width: 570px; margin: 0; color: #d6e0ef; line-height: 1.65; }
.portfolio-loop-topline {
  position: absolute;
  z-index: 6;
  top: 24px;
  left: 26px;
  right: 26px;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.75);
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.portfolio-loop-controls { position: absolute; z-index: 7; right: 25px; bottom: 24px; display: flex; gap: 8px; }
.portfolio-loop-controls button {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--navy-deep);
  border: 0;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  cursor: pointer;
  font-size: 1.15rem;
  transition: transform .2s ease, background .2s ease;
}
.portfolio-loop-controls button:hover { background: white; transform: translateY(-3px); }
.portfolio-loop-hint { position: absolute; z-index: 6; left: 26px; bottom: 24px; margin: 0; color: rgba(255,255,255,.62); font-size: .62rem; letter-spacing: .06em; }
.portfolio-loop-minimap {
  height: 688px;
  padding: 8px 5px 8px 8px;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(107,206,243,.45) transparent;
}
.portfolio-loop-minimap button {
  min-height: 88px;
  padding: 8px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 11px;
  align-items: center;
  color: #aebed8;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.portfolio-loop-minimap button:hover { color: white; background: rgba(255,255,255,.05); }
.portfolio-loop-minimap button.is-active { color: white; border-color: rgba(107,206,243,.34); background: rgba(107,206,243,.1); transform: translateX(-5px); }
.portfolio-loop-minimap img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; filter: saturate(.72); }
.portfolio-loop-minimap button.is-active img { filter: none; }
.portfolio-loop-minimap span { font-size: .66rem; font-weight: 800; line-height: 1.35; }
.portfolio-loop-minimap b { display: block; margin-bottom: 5px; color: var(--sky); font-family: var(--serif); font-size: 1rem; }

@media (min-width: 801px) {
  .proof-choreography[data-proof-scene] { min-height: 158vh; padding: 0 max(5vw, 28px); }
  .proof-choreography[data-proof-scene] .proof-choreography-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding-block: clamp(76px, 8vh, 96px) 34px;
  }
}

@media (max-width: 1100px) {
  .proof-choreography-sticky { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 38px; }
  .proof-choreography-stage { min-height: 520px; }
  .proof-status { font-size: .54rem; }
  .portfolio-loop { margin-inline: 22px; }
}

@media (max-width: 800px) {
  .proof-choreography { min-height: 0 !important; padding: 88px 22px !important; }
  .proof-choreography-sticky { grid-template-columns: 1fr; gap: 48px; }
  .proof-system-copy { grid-row: 1; }
  .proof-choreography-stage {
    grid-row: 2;
    height: auto;
    min-height: 0;
    padding: 64px 14px 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    border-radius: 26px 90px 26px 26px;
  }
  .proof-frame,
  .proof-frame-scanmark {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: 190px;
    opacity: 1;
    transform: none;
    border-radius: 16px;
  }
  .proof-frame-c { display: none; }
  .proof-frame-scanmark { height: 430px; grid-column: 1 / -1; }
  .proof-frame-scanmark figcaption { bottom: 8px; }
  .proof-scan-line, .proof-live-status { display: none; }
  .portfolio-gallery-toolbar { padding-inline: 22px; }
  .portfolio-loop { min-height: 0; margin: 0 18px 90px; grid-template-columns: 1fr; border-radius: 28px; }
  .portfolio-loop-minimap {
    width: 100%;
    height: auto;
    padding: 4px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .portfolio-loop-minimap button { width: 190px; min-width: 190px; scroll-snap-align: start; }
  .portfolio-loop-minimap button.is-active { transform: translateY(-3px); }
  .loop-project-copy { bottom: 105px; }
  .portfolio-loop-hint { bottom: 80px; }
}

@media (max-width: 520px) {
  .proof-choreography { padding-inline: 18px !important; }
  .proof-choreography-stage { grid-template-columns: 1fr; }
  .proof-frame, .proof-frame-scanmark { height: 170px; }
  .proof-frame-b { display: none; }
  .proof-frame-scanmark { height: 390px; }
  .proof-flow article { min-height: 88px; padding-inline: 10px; }
  .portfolio-gallery-toolbar { padding-inline: 18px; }
  .portfolio-loop { margin-inline: 10px; padding: 9px; border-radius: 23px; }
  .portfolio-loop-viewport { min-height: 540px; border-radius: 18px; }
  .loop-project-copy { left: 21px; right: 21px; bottom: 115px; }
  .loop-project-copy h2 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .loop-project-copy p { font-size: .82rem; }
  .portfolio-loop-topline { top: 18px; left: 18px; right: 18px; }
  .portfolio-loop-controls { right: 18px; bottom: 20px; }
  .portfolio-loop-hint { left: 20px; bottom: 82px; max-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .proof-choreography { min-height: 0 !important; padding: 90px max(5vw, 28px) !important; }
  .proof-choreography-sticky { position: relative !important; min-height: 0 !important; grid-template-columns: 1fr; }
  .proof-choreography-stage {
    height: auto;
    min-height: 0;
    padding: 64px 14px 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .proof-frame,
  .proof-frame-scanmark {
    position: relative;
    top: auto;
    left: auto;
    width: auto !important;
    height: 210px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .proof-frame-scanmark { height: 440px !important; grid-column: 1 / -1; }
  .proof-scan-line, .proof-live-status { display: none; }
  .proof-frame { will-change: auto; }
  .proof-phone-glow, .proof-status i { animation: none; }
  .portfolio-loop-viewport { cursor: default; }
  .loop-project, .loop-project img { transition: none; }
  .loop-project img { transform: scale(1.03); }
}

/* ================================================================
   Immersive depth v8
   Full-viewport choreography and rising layered sections.
   ================================================================ */

.proof-frame-hero { z-index: 45; }
.proof-frame-hero img { object-position: center; }
.proof-frame-hero::after {
  background: linear-gradient(90deg, rgba(3,13,38,.9) 0%, rgba(4,18,48,.64) 52%, rgba(4,18,48,.22) 100%), linear-gradient(180deg, rgba(3,13,38,.08), rgba(3,13,38,.55));
  opacity: var(--proof-hero-shade, 0);
}

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .proof-choreography[data-proof-scene] {
    min-height: 242vh;
    padding: 0;
  }
  .proof-choreography[data-proof-scene] .proof-choreography-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 680px;
    padding: 0;
    display: block;
    overflow: hidden;
  }
  .proof-choreography-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(rgba(107,206,243,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107,206,243,.055) 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, rgba(0,129,202,.22), transparent 52%),
      #061735;
    background-size: 64px 64px, 64px 64px, auto, auto;
    box-shadow: none;
  }
  .proof-choreography-stage::before {
    top: 88px;
    left: 5vw;
    opacity: var(--proof-montage-label, 1);
    transition: opacity .16s linear;
  }
  .proof-frame {
    border-radius: 22px;
    box-shadow: 0 35px 90px rgba(0,0,0,.42);
  }
  .proof-frame figcaption { transition: opacity .18s linear; }
  .proof-frame-hero { overflow: hidden; }
  .proof-frame-hero figcaption { opacity: var(--proof-montage-label, 1); }
  .proof-frame-scanmark { z-index: 62; }
  .proof-frame-scanmark figcaption { bottom: 2%; }
  .proof-scan-line { left: 0; right: 0; }
  .proof-live-status { z-index: 68; }
  .proof-status-a { top: 20%; right: 22%; left: auto; }
  .proof-status-b { top: 48%; right: 4%; }
  .proof-status-c { right: 23%; bottom: 14%; left: auto; }
  .proof-choreography[data-proof-scene] .proof-system-copy {
    position: absolute;
    z-index: 74;
    top: 50%;
    left: clamp(34px, 6.5vw, 112px);
    width: min(61vw, 800px);
    padding: 24px 0;
    opacity: 0;
    transform-origin: left center;
    pointer-events: none;
    text-shadow: 0 4px 28px rgba(0,0,0,.42);
    will-change: opacity, transform;
  }
  .proof-choreography .proof-system-copy .section-title {
    max-width: 790px;
    font-size: clamp(3.6rem, 5.8vw, 7rem);
    line-height: .88;
  }
  .proof-choreography .proof-system-copy > p:not(.eyebrow) {
    max-width: 590px;
    color: #d7e4f5;
    font-size: clamp(.9rem, 1.1vw, 1.08rem);
  }
  .proof-flow {
    width: min(720px, 57vw);
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid rgba(255,255,255,.14);
  }
  .proof-flow article {
    min-height: 132px;
    padding: 18px 16px;
    grid-template-columns: 34px 1fr;
    border-right: 1px solid rgba(255,255,255,.14);
  }
  .proof-flow article::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
  .proof-flow article.is-active { transform: translateY(-6px); }
  .proof-flow article.is-active::before { transform: scaleX(1); }
  .proof-flow p { color: #c4d2e6; }

  [data-arrival-scene] {
    position: relative;
    z-index: 8;
    margin-top: -42px;
    border-radius: 46px 46px 0 0;
    box-shadow: 0 -32px 80px rgba(4,15,45,.18);
    opacity: var(--arrival-opacity, .62);
    transform: translate3d(0, var(--arrival-y, 150px), 0) scale(var(--arrival-scale, .958));
    transform-origin: center top;
    will-change: transform, opacity;
    overflow: clip;
  }
  [data-arrival-scene] + [data-arrival-scene] { margin-top: -54px; }
  [data-arrival-scene] .about-editorial-shell,
  [data-arrival-scene] .clients-shell,
  [data-arrival-scene] .certifications-shell,
  [data-arrival-scene] .contact-shell {
    transform: translate3d(0, var(--arrival-content-y, 74px), 0);
    will-change: transform;
  }
  [data-arrival-scene] .client-marquee,
  [data-arrival-scene] .certification-board,
  [data-arrival-scene] .contact-form {
    transform: translate3d(0, var(--arrival-media-y, 42px), 0);
    will-change: transform;
  }
  [data-arrival-scene] .coverage-map img,
  [data-arrival-scene] .about-editorial-image img {
    transform: translate3d(0, var(--arrival-media-y, 42px), 0) scale(1.06);
    will-change: transform;
  }
}

/* ================================================================
   Internal pages immersive system v71
   Servicios · Portafolio · Intranet
   ================================================================ */

body:has(.services-hero-x),
body:has(.portfolio-hero-immersive),
body:has(.intranet-hero) { background: #eef7fb; }

body:has(.services-hero-x) .brand img,
body:has(.portfolio-hero-immersive) .brand img,
body:has(.intranet-hero) .brand img { width: 148px; height: 58px; object-fit: contain; }
.services-manifesto[data-reading-manifesto] .section-title{opacity:calc(.34 + var(--manifesto-progress,0) * .66);transform:translateY(calc((1 - var(--manifesto-progress,0)) * 9px))}
.services-manifesto[data-reading-manifesto] .section-title em{position:relative;color:var(--steel)}
.services-manifesto[data-reading-manifesto] .section-title em::after{content:"";position:absolute;right:0;bottom:-8px;left:0;height:5px;border-radius:99px;background:var(--sky);transform:scaleX(var(--manifesto-progress,0));transform-origin:left}.world-phase-nav button.is-active{color:white;background:var(--navy)}.world-phase-nav-light button.is-active{color:var(--navy);background:var(--sky)}
.service-world[data-service-world]{--world-progress:0;--world-active:0;padding-block:0;min-height:150svh}
.service-world[data-service-world] .service-world-shell{position:sticky;top:0;min-height:100svh;padding-block:clamp(76px,8vh,105px) 35px;display:flex;flex-direction:column;justify-content:center}
.service-world[data-service-world] .world-heading{margin-bottom:24px}.service-world[data-service-world] .world-layout{gap:clamp(35px,5vw,72px);align-items:center}.service-world[data-service-world] .world-copy{position:relative;top:auto;padding-top:0}.service-world[data-service-world] .world-copy h3{font-size:clamp(2.2rem,3.3vw,3.75rem)}.service-world[data-service-world] .world-gallery{min-height:500px;display:block;perspective:1000px}.service-world[data-service-world] .world-photo{position:absolute;inset:0;margin:0;border-radius:28px;opacity:0;transform:translate3d(0,42px,-50px) scale(.92);transition:opacity .48s ease,transform .68s var(--ease-premium),filter .4s ease}.service-world[data-service-world] .world-photo img{transform:scale(1.065)}.service-world[data-service-world] .world-photo.is-active{z-index:3;opacity:1;transform:none}.service-world[data-service-world] .world-photo.is-before{z-index:2;opacity:.32;transform:translate3d(-7%,-5%,-80px) scale(.88);filter:saturate(.55)}.btl-world[data-service-world] .world-photo.is-before{transform:translate3d(7%,-5%,-80px) scale(.88)}.service-world[data-service-world] .world-gallery-card{top:auto;right:-16px;bottom:-17px}.service-world[data-service-world] .capability-cloud{margin-block:22px 25px}.service-world[data-service-world] .capability-cloud span{padding:8px 11px}

.execution-rhythm[data-execution-wave]{min-height:410px;padding-block:66px;background:linear-gradient(150deg,#dff4fb,#f7fbfd);border-block:1px solid rgba(0,129,202,.12)}
.execution-wave-map{position:relative;max-width:1120px;height:190px;margin:auto}.execution-wave-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.execution-wave-base,.execution-wave-draw{fill:none;stroke-linecap:round;stroke-width:4}.execution-wave-base{stroke:rgba(22,51,125,.13)}.execution-wave-draw{stroke:var(--navy);stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.2s var(--ease-premium)}.execution-rhythm.is-wave-active .execution-wave-draw{stroke-dashoffset:0}.execution-wave-map .execution-steps{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}.execution-wave-map .execution-steps div{position:relative;padding-top:70px}.execution-wave-map .execution-steps div::before{content:"";position:absolute;top:70px;left:50%;width:15px;height:15px;border:4px solid white;border-radius:50%;background:var(--steel);box-shadow:0 0 0 8px rgba(107,206,243,.25);transform:translate(-50%,-50%) scale(.6);opacity:.35;transition:transform .35s ease,opacity .35s ease}.execution-rhythm.is-wave-active .execution-steps div::before{transform:translate(-50%,-50%) scale(1);opacity:1}.execution-rhythm.is-wave-active .execution-steps div:nth-child(2)::before{transition-delay:.45s}.execution-rhythm.is-wave-active .execution-steps div:nth-child(3)::before{transition-delay:.9s}.execution-rhythm.is-wave-active .execution-steps div:nth-child(4)::before{transition-delay:1.35s}.execution-pulse{position:absolute;z-index:3;top:50%;left:3.5%;width:14px;height:14px;border-radius:50%;background:white;box-shadow:0 0 18px 7px var(--sky);opacity:0}.execution-rhythm.is-wave-active .execution-pulse{animation:executionPulseTravel 2.2s var(--ease-premium) .12s both}@keyframes executionPulseTravel{0%{opacity:0;transform:translate(0,18px)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translate(calc(min(93vw,1040px)), -20px)}}
.services-closing{position:relative;z-index:4;margin-top:-8svh;padding:clamp(65px,8vw,105px) max(5vw,28px);display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;color:white;border-radius:42px 42px 0 0;background:linear-gradient(135deg,#0c3c82,#071a47);box-shadow:0 -28px 75px rgba(2,12,38,.34)}.services-closing>div:first-child{max-width:850px}.services-closing h2{margin:0;font-size:clamp(2.7rem,5vw,5.7rem);line-height:.92;letter-spacing:-.055em}.services-closing h2 em{color:var(--sky);font-family:var(--serif)}.services-closing p:not(.eyebrow){color:#c3d3e9}.services-closing-actions{display:flex;gap:22px;align-items:center}.services-closing .text-link{color:white}.portfolio-hero-immersive .page-hero-grid{min-height:calc(100svh - 110px)}.portfolio-hero-actions{display:flex;gap:22px;align-items:center}.portfolio-hero-immersive .page-hero-copy{z-index:7;transform:translateY(calc(var(--portfolio-hero-progress) * -18px))}.portfolio-hero-immersive .page-hero-visual{overflow:visible;transform:scale(calc(1 - var(--portfolio-hero-progress) * .035))}
.portfolio-intro{position:relative;z-index:3;margin-top:-6svh;padding-top:95px;border-radius:42px 42px 0 0;background:#f7fbfd;box-shadow:0 -28px 70px rgba(4,15,45,.22)}.portfolio-confidentiality{position:relative;padding:30px 0;border-radius:0;border-block:1px solid rgba(22,51,125,.16);color:var(--navy);background:transparent}.portfolio-confidentiality::before{content:"CONFIDENCIALIDAD";position:absolute;right:0;bottom:-7px;color:rgba(0,129,202,.055);font-size:clamp(3rem,8vw,8rem);font-weight:950;letter-spacing:-.06em;pointer-events:none}.portfolio-confidentiality span{color:var(--steel)}.portfolio-confidentiality p{color:var(--muted)}
.case-studies[data-case-stories]{padding-bottom:70px;background:linear-gradient(160deg,#edf6fb,#fff)}.case-story-rail{position:sticky;z-index:8;top:92px;margin:0 0 25px auto;width:fit-content;display:flex;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);overflow:hidden}.case-story-rail button{padding:12px 17px;color:var(--muted);border:0;border-right:1px solid var(--line);background:transparent;cursor:pointer;font:inherit;font-size:.7rem;font-weight:850}.case-story-rail button:last-child{border-right:0}.case-story-rail span{margin-right:6px;color:var(--steel);font-family:var(--serif)}.case-story-rail button.is-active{color:white;background:var(--navy)}.case-story-layout{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(400px,.97fr);gap:clamp(30px,5vw,75px);align-items:start}.case-story-media{position:sticky;top:130px;height:calc(100svh - 170px);min-height:570px;overflow:hidden;border-radius:34px 145px 34px 34px;background:var(--navy);box-shadow:0 28px 80px rgba(4,20,57,.2)}.case-story-media figure{position:absolute;inset:0;margin:0;opacity:0;clip-path:inset(12% 10% 12% 10% round 28px);transform:scale(1.1);transition:opacity .55s ease,clip-path .75s var(--ease-premium),transform 1s var(--ease-premium)}.case-story-media figure.is-active{opacity:1;clip-path:inset(0 round 0);transform:scale(1)}.case-story-media figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,15,45,.82))}.case-story-media img{width:100%;height:100%;object-fit:cover}.case-media-caption{position:absolute;z-index:4;right:28px;bottom:26px;left:28px;display:flex;justify-content:space-between;align-items:center;color:white}.case-media-caption span{color:var(--sky);font-family:var(--serif);font-size:1.25rem}.case-media-caption strong{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}.case-story-steps{display:grid}.case-story-steps .case-study{min-height:72svh;margin:0;padding:clamp(30px,4vw,52px) 0;justify-content:center;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;opacity:.35;transform:translateY(25px);transition:opacity .42s ease,transform .55s var(--ease-premium)}.case-story-steps .case-study.is-active{opacity:1;transform:none}.case-story-steps .case-study-featured{color:var(--navy)}.case-story-steps .case-study-featured .case-study-index p,.case-story-steps .case-study-featured .case-study-summary{color:var(--muted)}.case-story-steps .case-study-featured .case-study-index span,.case-story-steps .case-study-featured .case-study-metrics strong{color:var(--steel)}.case-story-steps .case-study-featured .case-study-metrics div{border-color:var(--line);background:rgba(237,244,255,.7)}.case-story-steps .case-study-featured .case-study-metrics span{color:var(--muted)}
.portfolio-gallery-toolbar{padding-top:80px}.portfolio-loop{position:relative;min-height:780px;grid-template-columns:1fr;padding:0;overflow:hidden}.portfolio-loop-viewport{min-height:780px;border-radius:38px;touch-action:none}.portfolio-field{position:absolute;z-index:4;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(107,206,243,.14),transparent 48%),#061435}.portfolio-field-tile{position:absolute;width:clamp(190px,20vw,310px);height:clamp(145px,16vw,240px);padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:#102b66;box-shadow:0 20px 45px rgba(0,0,0,.25);cursor:pointer;will-change:transform;transition:filter .3s ease,opacity .3s ease,box-shadow .3s ease}.portfolio-field-tile:hover,.portfolio-field-tile:focus-visible{z-index:8;filter:saturate(1.15);box-shadow:0 26px 65px rgba(0,0,0,.42),0 0 0 3px rgba(107,206,243,.45);outline:0}.portfolio-field-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-premium)}.portfolio-field-tile:hover img{transform:scale(1.055)}.portfolio-field-tile span{position:absolute;right:12px;bottom:11px;left:12px;color:white;font-size:.64rem;font-weight:850;text-shadow:0 2px 10px rgba(0,0,0,.7)}.portfolio-loop-track{z-index:10;opacity:0;pointer-events:none;transition:opacity .42s ease}.portfolio-loop.is-field-focus .portfolio-loop-track{opacity:1;pointer-events:auto}.portfolio-loop.is-field-focus .portfolio-field{opacity:0;pointer-events:none}.portfolio-loop-minimap{display:none}.portfolio-loop-controls{z-index:14}.portfolio-field-close{display:none!important}.portfolio-loop.is-field-focus .portfolio-field-close{display:grid!important}.portfolio-loop:not(.is-field-focus) [data-loop-prev],.portfolio-loop:not(.is-field-focus) [data-loop-next]{display:none}.portfolio-loop-topline,.portfolio-loop-hint{z-index:13}.portfolio-loop.is-field-focus .portfolio-loop-hint{opacity:0}.portfolio-loop[data-field-ready] .portfolio-loop-topline span:first-child::after{content:" · Lienzo infinito"}

/* Intranet — fast access, bento hierarchy and contextual dock. */
.intranet-hero[data-intranet-hero]{min-height:78svh;padding-block:125px 65px;background:radial-gradient(circle at 78% 28%,rgba(107,206,243,.28),transparent 30%),linear-gradient(145deg,#061435,#153b83 65%,#0a5b97)}.intranet-hero[data-intranet-hero] .page-hero-grid{min-height:calc(78svh - 190px)}.intranet-quick-links{margin-top:28px;display:flex;gap:10px}.intranet-quick-links a{min-width:94px;padding:9px 12px;display:flex;gap:8px;align-items:center;color:white;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);font-size:.68rem;font-weight:850;backdrop-filter:blur(10px);transition:background .2s ease,transform .2s ease}.intranet-quick-links a:hover{background:rgba(107,206,243,.2);transform:translateY(-3px)}.intranet-quick-links img{width:27px;height:27px;object-fit:contain;border-radius:8px;background:white}.intranet-hero .page-hero-visual{transform:translate3d(var(--intranet-pointer-x,0px),var(--intranet-pointer-y,0px),0);transition:transform .2s ease-out}
.access-section[data-access-section]{position:relative;z-index:3;margin-top:-6svh;padding-top:100px;border-radius:42px 42px 0 0;background:linear-gradient(160deg,#f4fbfd,#fff);box-shadow:0 -25px 70px rgba(4,15,45,.2)}.access-section[data-access-section] .access-grid{grid-template-columns:1.25fr .75fr;grid-template-rows:repeat(2,minmax(250px,1fr));perspective:1100px}.access-section[data-access-section] .access-card{--card-rx:0deg;--card-ry:0deg;--glare-x:50%;--glare-y:50%;min-height:0;transform:perspective(1000px) rotateX(var(--card-rx)) rotateY(var(--card-ry));transform-style:preserve-3d;transition:transform .18s ease,box-shadow .28s ease}.access-section[data-access-section] .access-card::before{content:"";position:absolute;inset:-1px;z-index:0;background:radial-gradient(circle at var(--glare-x) var(--glare-y),rgba(255,255,255,.48),transparent 28%);opacity:0;transition:opacity .25s ease;pointer-events:none}.access-section[data-access-section] .access-card:hover::before,.access-section[data-access-section] .access-card:focus-visible::before{opacity:.8}.access-card-primary{grid-row:1 / span 2;color:white!important;background:radial-gradient(circle at 25% 22%,rgba(107,206,243,.22),transparent 32%),linear-gradient(145deg,#061435,#153b83)!important}.access-card-primary p{color:#c4d4e9!important}.access-card-primary .access-go{color:var(--navy);background:var(--sky)}.access-card-primary .access-icon{width:105px;height:105px}.access-card-primary h2{font-size:clamp(2.5rem,4vw,4.6rem)}.access-meta{position:relative;z-index:2;color:var(--steel);font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.access-card-primary .access-meta{color:var(--sky)}.access-card>*{position:relative;z-index:2}.access-card .access-go{transition:transform .22s ease}.access-card:hover .access-go,.access-card:focus-visible .access-go{transform:translate(6px,-4px)}.intranet-dock{position:fixed;z-index:25;right:50%;bottom:24px;padding:8px;display:flex;gap:5px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:rgba(247,251,253,.88);box-shadow:0 20px 55px rgba(4,15,45,.24);backdrop-filter:blur(18px);opacity:0;transform:translate(50%,24px);pointer-events:none;transition:opacity .25s ease,transform .4s var(--ease-premium)}.intranet-dock.is-visible{opacity:1;transform:translate(50%,0);pointer-events:auto}.intranet-dock a{min-width:88px;padding:8px 13px;display:flex;gap:8px;align-items:center;border-radius:999px;color:var(--navy);font-size:.68rem;font-weight:850;transition:background .2s ease,transform .2s ease}.intranet-dock a:hover,.intranet-dock a:focus-visible{background:rgba(107,206,243,.22);transform:translateY(-4px)}.intranet-dock img{width:28px;height:28px;object-fit:contain;border-radius:8px;background:white}

@media (max-width: 1100px){.service-world[data-service-world] .world-heading{grid-template-columns:80px 1fr}.service-world[data-service-world] .world-heading>p{display:none}.service-world[data-service-world] .world-gallery{min-height:450px}.case-story-layout{grid-template-columns:.9fr 1.1fr}.case-story-media{height:70svh}.services-closing{grid-template-columns:1fr}.services-closing-actions{justify-content:flex-start}}

@media (max-width: 800px){
  body:has(.services-hero-x) .brand img,body:has(.portfolio-hero-immersive) .brand img,body:has(.intranet-hero) .brand img{width:118px;height:49px}.service-world[data-service-world]{min-height:0;padding:88px 22px}.service-world[data-service-world] .service-world-shell{position:relative;min-height:0;padding:0;display:block}.service-world[data-service-world] .world-heading{margin-bottom:35px}.service-world[data-service-world] .world-layout{display:grid}.service-world[data-service-world] .world-gallery{min-height:590px}.service-world[data-service-world] .world-photo{position:relative;inset:auto;height:180px;margin-bottom:10px;opacity:1;transform:none!important;filter:none!important}.service-world[data-service-world] .world-photo:first-child{height:330px}.service-world[data-service-world] .world-gallery-card{right:12px;bottom:12px}.execution-wave-map{height:auto}.execution-wave-map svg,.execution-pulse{display:none}.execution-wave-map .execution-steps{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}.execution-wave-map .execution-steps div{padding:20px;border:1px solid rgba(22,51,125,.12);border-radius:18px;background:white}.execution-wave-map .execution-steps div::before{display:none}.services-closing{margin-top:-24px;padding:70px 22px;border-radius:28px 28px 0 0}.services-closing-actions{align-items:flex-start;flex-direction:column}.portfolio-hero-immersive .page-hero-grid{min-height:0}.portfolio-hero-actions{align-items:flex-start;flex-direction:column}.portfolio-intro{margin-top:-28px;padding-top:80px;border-radius:28px 28px 0 0}.portfolio-confidentiality{grid-template-columns:1fr}.portfolio-confidentiality p{grid-column:auto}.case-story-rail{position:relative;top:auto;width:100%;overflow-x:auto;border-radius:18px}.case-story-rail button{min-width:150px}.case-story-layout{grid-template-columns:1fr}.case-story-media{position:relative;top:auto;height:58svh;min-height:440px}.case-story-steps .case-study{min-height:0;padding:55px 0;opacity:1;transform:none}.portfolio-loop{min-height:0;margin-inline:18px;padding:14px}.portfolio-loop-viewport{min-height:620px;touch-action:pan-y}.portfolio-field{display:none}.portfolio-loop-track{opacity:1;pointer-events:auto}.portfolio-loop-minimap{display:flex}.portfolio-loop:not(.is-field-focus) [data-loop-prev],.portfolio-loop:not(.is-field-focus) [data-loop-next]{display:grid}.portfolio-field-close{display:none!important}
  .intranet-hero[data-intranet-hero]{min-height:auto;padding-bottom:80px}.intranet-hero[data-intranet-hero] .page-hero-grid{min-height:0}.intranet-quick-links{flex-wrap:wrap}.access-section[data-access-section]{margin-top:-28px;padding-top:82px;border-radius:28px 28px 0 0}.access-section[data-access-section] .access-grid{grid-template-columns:1fr;grid-template-rows:auto}.access-card-primary{grid-row:auto}.access-section[data-access-section] .access-card{min-height:310px;transform:none!important}.intranet-dock{right:12px;bottom:12px;left:12px;justify-content:center;transform:translateY(24px)}.intranet-dock.is-visible{transform:none}.intranet-dock a{min-width:0;flex:1;justify-content:center}.intranet-dock span{display:none}
}

@media (max-width:520px){.service-world[data-service-world]{padding-inline:18px}.service-world[data-service-world] .world-gallery{min-height:540px}.portfolio-loop{margin-inline:10px}.case-story-media{min-height:390px}.intranet-quick-links a{min-width:0;flex:1}.access-card-primary .access-icon{width:82px;height:82px}}

@media (prefers-reduced-motion:reduce){.services-hero-x[data-services-hero] .services-hero-copy,.services-hero-x[data-services-hero] .services-hero-collage,.services-hero-x[data-services-hero] .services-hero-main,.services-hero-x[data-services-hero] .services-hero-secondary,.services-hero-x[data-services-hero] .services-hero-tertiary,.services-manifesto[data-reading-manifesto] .section-title,.service-world[data-service-world] .world-photo,.scanmark-band[data-scanmark-scene] .scanmark-visual,.scanmark-band[data-scanmark-scene] .metric-card,.scanmark-chip,.portfolio-hero-immersive .page-hero-copy,.case-story-steps .case-study,.access-section[data-access-section] .access-card{transform:none!important;opacity:1!important}.service-world[data-service-world],.scanmark-band[data-scanmark-scene]{min-height:0}.service-world[data-service-world] .service-world-shell,.scanmark-band[data-scanmark-scene] .scanmark-grid{position:relative;min-height:0}.execution-wave-draw{stroke-dashoffset:0}.execution-pulse{display:none}.portfolio-field-tile,.portfolio-orbit{transition:none!important}.intranet-dock{transition:none}}

/* ================================================================
   Pinned choreography correction v9
   The scene now remains in the viewport until its message is readable.
   ================================================================ */

.proof-choreography-stage::before { content: "ASÍ COMPROBAMOS LA EJECUCIÓN · SCANMARK"; }
.proof-choreography-stage::after {
  content: "DESLIZA PARA CONVERTIR EVIDENCIA EN DECISIONES";
  position: absolute;
  z-index: 70;
  right: 5vw;
  bottom: 28px;
  color: rgba(255,255,255,.58);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .14em;
  opacity: var(--proof-montage-label, 1);
  transition: opacity .16s linear;
  pointer-events: none;
}

.proof-choreography[data-proof-scene] { overflow: visible; }

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .proof-choreography[data-proof-scene] { min-height: 280vh; }
}

@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .proof-choreography[data-proof-scene] {
    height: 340svh !important;
    min-height: 2380px !important;
    padding: 0 !important;
  }
  .proof-choreography[data-proof-scene] .proof-choreography-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    min-height: 620px;
    padding: 0;
    display: block;
    overflow: hidden;
  }
  .proof-choreography-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: block;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(rgba(107,206,243,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107,206,243,.055) 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, rgba(0,129,202,.22), transparent 54%),
      #061735;
    background-size: 46px 46px, 46px 46px, auto, auto;
    overflow: hidden;
  }
  .proof-choreography-stage::before { top: 76px; left: 18px; right: 18px; font-size: .52rem; line-height: 1.5; }
  .proof-choreography-stage::after { right: 18px; bottom: 22px; left: 18px; font-size: .49rem; line-height: 1.5; text-align: right; }
  .proof-frame,
  .proof-frame-scanmark {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: 0;
    border-radius: 15px;
    will-change: width, height, transform, opacity;
  }
  .proof-frame-a,
  .proof-frame-b,
  .proof-frame-c,
  .proof-frame-hero,
  .proof-frame-scanmark { display: block; }
  .proof-frame figcaption { right: 10px; bottom: 9px; left: 10px; font-size: .53rem; }
  .proof-frame-hero { z-index: 45; }
  .proof-frame-scanmark { z-index: 62; grid-column: auto; }
  .proof-frame-scanmark figcaption { display: none; }
  .proof-scan-line { z-index: 64; right: 0; left: 0; display: block; }
  .proof-live-status { display: none; }
  .proof-choreography[data-proof-scene] .proof-system-copy {
    position: absolute;
    z-index: 74;
    top: 50%;
    right: 18px;
    left: 18px;
    width: auto;
    max-height: calc(100svh - 112px);
    padding: 0;
    opacity: 0;
    text-shadow: 0 3px 22px rgba(0,0,0,.48);
    transform-origin: center;
    pointer-events: none;
    overflow: visible;
  }
  .proof-choreography .proof-system-copy .eyebrow { margin-bottom: 10px; font-size: .58rem; }
  .proof-choreography .proof-system-copy .section-title {
    max-width: 100%;
    font-size: clamp(2.55rem, 12vw, 4rem);
    line-height: .9;
  }
  .proof-choreography .proof-system-copy > p:not(.eyebrow) {
    max-width: 92%;
    margin-top: 15px;
    color: #d7e4f5;
    font-size: .76rem;
    line-height: 1.55;
  }
  .proof-flow {
    width: 100%;
    margin-top: 17px;
    display: grid;
    grid-template-columns: 1fr;
    border-left: 1px solid rgba(255,255,255,.15);
  }
  .proof-flow article {
    min-height: 61px;
    padding: 9px 10px;
    grid-template-columns: 28px 1fr;
    gap: 7px;
  }
  .proof-flow article > span { font-size: 1.02rem; }
  .proof-flow strong { font-size: .72rem; }
  .proof-flow p { margin-top: 3px; color: #c4d2e6; font-size: .6rem; line-height: 1.35; }
  .proof-flow article.is-active { transform: translateX(4px); }
  .proof-choreography .proof-system-link { margin-top: 15px; font-size: .72rem; }
}

@media (max-width: 800px) and (max-height: 680px) and (prefers-reduced-motion: no-preference) {
  .proof-choreography[data-proof-scene] .proof-choreography-sticky { min-height: 100svh; }
  .proof-choreography .proof-system-copy .section-title { font-size: clamp(2.25rem, 10.5vw, 3.25rem); }
  .proof-choreography .proof-system-copy > p:not(.eyebrow) { font-size: .7rem; }
  .proof-flow article { min-height: 50px; padding-block: 6px; }
  .proof-flow p { display: none; }
}

/* ================================================================
   Hero cover transition v10
   The opening stays pinned while the complete Services surface rises.
   ================================================================ */

.hero-cover-panel {
  position: relative;
  z-index: 8;
  background: white;
}

@media (prefers-reduced-motion: no-preference) {
  .immersive-hero.scroll-scene {
    height: 200svh;
    min-height: 1240px;
    padding-block: 0;
    overflow: visible;
  }

  .immersive-hero .immersive-backdrop {
    position: sticky;
    top: 0;
    z-index: 0;
    width: 100vw;
    height: 100svh;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: -100svh;
    overflow: hidden;
  }

  .immersive-hero .immersive-hero-shell {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 100svh;
    overflow: hidden;
  }

  .hero-cover-panel {
    margin-top: -100svh;
    border-radius: clamp(26px, 3.2vw, 48px) clamp(26px, 3.2vw, 48px) 0 0;
    box-shadow: 0 -38px 95px rgba(4,15,45,.28);
    overflow: clip;
  }

  .hero-cover-panel .scroll-bridge {
    margin-top: 0;
    border-radius: inherit;
  }

  .hero-cover-panel .home-services { margin-top: 0; }
}

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .immersive-hero.scroll-scene { min-height: 1440px; }
}

@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .immersive-hero.scroll-scene {
    min-height: 1240px;
    padding-inline: 18px;
  }

  .immersive-hero .immersive-hero-shell {
    min-height: 620px;
    padding: clamp(88px, 13svh, 108px) 0 26px;
  }

  .hero-cover-panel { box-shadow: 0 -24px 68px rgba(4,15,45,.26); }
  .hero-cover-panel .scroll-bridge { margin-top: 0; }
}

@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .immersive-hero.scroll-scene { padding-inline: 16px; }
  .immersive-hero .immersive-title { font-size: clamp(2.85rem, 13.5vw, 4.15rem); }
  .immersive-hero .hero-proof { margin-top: clamp(28px, 5svh, 42px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cover-panel {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
}

/* ================================================================
   Services pinned composition v11
   The chapter heading stays in frame while the cards build underneath.
   ================================================================ */

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .home-services[data-card-stack] { padding-top: clamp(74px, 9vh, 96px); }

  .home-services[data-card-stack] .section-heading {
    position: sticky;
    top: clamp(78px, 9vh, 94px);
    z-index: 10;
    margin: 0 0 clamp(44px, 7vh, 68px);
    isolation: isolate;
  }

  .home-services[data-card-stack] .section-heading::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -34px -100vw -72px;
    background: linear-gradient(180deg, rgba(249,250,247,.99) 0%, rgba(249,250,247,.97) 68%, rgba(249,250,247,0) 100%);
    pointer-events: none;
  }

  .home-services[data-card-stack] .service-stack { isolation: isolate; }

  .home-services[data-card-stack] .service-row { top: clamp(286px, 35vh, 330px); }
  .home-services[data-card-stack] .service-row:nth-child(2) { top: calc(clamp(286px, 35vh, 330px) + 22px); }
  .home-services[data-card-stack] .service-row:nth-child(3) { top: calc(clamp(286px, 35vh, 330px) + 44px); }
}

/* ================================================================
   Coverage autoplay stage v15
   A short sticky brake introduces the cinematic chapter without trapping scroll.
   ================================================================ */

.coverage-stage { display: contents; }

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .coverage[data-coverage-pin] {
    height: 135vh;
    min-height: 980px;
    padding: 0;
    display: block;
    overflow: visible;
  }

  .coverage[data-coverage-pin]::before { display: none; }

  .coverage[data-coverage-pin] .coverage-stage {
    position: sticky;
    top: 0;
    isolation: isolate;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    padding: clamp(100px, 12vh, 132px) max(5vw, 28px) clamp(48px, 7vh, 76px);
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 55px;
    align-items: center;
    overflow: hidden;
  }

  .coverage[data-coverage-pin] .coverage-stage::before {
    content: "MÉXICO";
    position: absolute;
    z-index: -1;
    left: -2vw;
    bottom: -4vw;
    color: rgba(22,51,125,.07);
    font-family: var(--serif);
    font-size: clamp(8rem, 22vw, 22rem);
    font-weight: 700;
    line-height: .7;
    letter-spacing: -.08em;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coverage[data-coverage-pin] { height: auto; min-height: 0; }
  .coverage[data-coverage-pin] .coverage-stage { position: static; height: auto; min-height: 0; }
}

/* ================================================================
   Coverage routes v13
   Native adaptation of the supplied animated-map concept.
   ================================================================ */

.coverage-map-visual { position: relative; }
.coverage-map-visual > img { position: relative; z-index: 1; display: block; }
.coverage-route-layer { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.coverage-route {
  fill: none;
  stroke: var(--navy-deep);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--route-progress, 0));
  opacity: .14;
  filter: url(#coverage-route-glow);
  vector-effect: non-scaling-stroke;
}
.coverage-tracer {
  fill: white;
  stroke: var(--navy-deep);
  stroke-width: 5;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(11,32,88,.92));
  vector-effect: non-scaling-stroke;
}
.coverage-network-pulse {
  fill: white;
  stroke: var(--sky);
  stroke-width: 5;
  visibility: hidden;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.98)) drop-shadow(0 0 13px rgba(11,32,88,.88));
  vector-effect: non-scaling-stroke;
}
.coverage-arrival-flash {
  fill: rgba(107,206,243,.08);
  stroke: var(--navy-deep);
  stroke-width: 4;
  visibility: hidden;
  filter: drop-shadow(0 0 10px rgba(107,206,243,.82));
  vector-effect: non-scaling-stroke;
}
.coverage.is-pulse-phase .coverage-network-pulse,
.coverage.is-pulse-phase .coverage-arrival-flash { visibility: visible; }
.coverage.is-pulse-phase .coverage-origin .coverage-node-wave {
  fill: rgba(107,206,243,.3);
  stroke: rgba(11,32,88,.95);
  animation-duration: .9s;
}
.coverage-origin,
.coverage-node { opacity: var(--node-progress, 0); }
.coverage-origin { --node-progress: 1; }
.coverage-node-core { fill: var(--navy); stroke: white; stroke-width: 2; vector-effect: non-scaling-stroke; }
.coverage-origin .coverage-node-core { fill: var(--navy-deep); }
.coverage-node-wave { fill: rgba(107,206,243,.28); stroke: rgba(107,206,243,.9); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: coveragePulse 1.8s ease-out infinite; vector-effect: non-scaling-stroke; }
.coverage-origin .coverage-node-wave { fill: rgba(22,51,125,.2); stroke: rgba(22,51,125,.92); }
.coverage-route-layer text { fill: var(--navy-deep); stroke: rgba(255,255,255,.98); stroke-width: 9px; paint-order: stroke fill; font-size: 34px; font-weight: 900; letter-spacing: .01em; }
.coverage-origin text { fill: var(--navy-deep); font-size: 38px; }
.coverage-map-visual .map-pill { z-index: 5; opacity: var(--coverage-summary-progress, 0); transform: translateY(var(--coverage-summary-y, 18px)) scale(var(--coverage-summary-scale, .86)); transform-origin: center; }
.coverage-route-status { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.coverage-route-status span { padding: 7px 10px; border: 1px solid rgba(22,51,125,.13); border-radius: 999px; color: rgba(11,32,88,.46); background: rgba(255,255,255,.42); font-size: .62rem; font-weight: 850; transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; }
.coverage-route-status span.is-complete { color: var(--steel); border-color: rgba(0,129,202,.24); background: rgba(255,255,255,.7); }
.coverage-route-status span.is-active { color: white; border-color: var(--navy-deep); background: var(--navy-deep); box-shadow: 0 8px 18px rgba(11,32,88,.22); transform: translateY(-3px); }

.coverage .map-pill { color: white; background: var(--navy-deep); box-shadow: 0 16px 34px rgba(11,32,88,.24); }

.coverage-autoplay-cue {
  width: max-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 8px 9px 8px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(22,51,125,.15);
  border-radius: 999px;
  color: rgba(11,32,88,.62);
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 26px rgba(11,32,88,.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.coverage-autoplay-cue span { color: var(--steel); font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.coverage-autoplay-cue b { color: var(--navy-deep); font-size: .68rem; }
.coverage-autoplay-cue i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--navy-deep);
  font-style: normal;
  animation: coverageContinue 1.25s ease-in-out infinite;
}
.coverage.is-animation-complete .coverage-autoplay-cue { opacity: 1; transform: translateY(0); }

@keyframes coveragePulse {
  0% { opacity: .82; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes coverageContinue {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

@media (max-width: 800px) {
  .coverage-route-layer text { font-size: 42px; }
  .coverage-origin text { font-size: 46px; }
  .coverage-route-status { margin-top: 12px; gap: 5px; }
  .coverage-route-status span { padding: 6px 8px; font-size: .56rem; }
}

@media (prefers-reduced-motion: reduce) {
  .coverage-route { stroke-dashoffset: 0; opacity: .82; filter: none; }
  .coverage-tracer { display: none; }
  .coverage-network-pulse { display: none; }
  .coverage-arrival-flash { display: none; }
  .coverage-node { opacity: 1; }
  .coverage-node-wave { animation: none; opacity: .5; transform: scale(.7); }
  .coverage-map-visual .map-pill { opacity: 1; transform: none; }
  .coverage-route-status span { color: var(--steel); border-color: rgba(0,129,202,.24); background: rgba(255,255,255,.7); }
  .coverage-autoplay-cue { opacity: 1; transform: none; }
  .coverage-autoplay-cue i { animation: none; }
}

/* ================================================================
   Interactive client logo cloud v16
   Native HTML/CSS/JS adaptation of the supplied React icon cloud.
   ================================================================ */

.client-cloud-shell {
  position: relative;
  isolation: isolate;
  width: min(1080px, calc(100% - max(10vw, 56px)));
  margin: 4px auto 0;
  overflow: hidden;
  border: 1px solid rgba(22,51,125,.12);
  border-radius: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(circle at 50% 50%, rgba(107,206,243,.24), transparent 18%),
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.98), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(229,244,253,.78));
  box-shadow: 0 34px 90px rgba(11,32,88,.13), inset 0 1px rgba(255,255,255,.92);
}
.client-cloud-shell::before,
.client-cloud-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(22,51,125,.1);
  border-radius: 50%;
  pointer-events: none;
}
.client-cloud-shell::before { width: 72%; height: 48%; transform: translate(-50%, -50%) rotate(-10deg); }
.client-cloud-shell::after { width: 48%; height: 72%; transform: translate(-50%, -50%) rotate(24deg); }
.client-cloud {
  position: relative;
  z-index: 2;
  min-height: 560px;
  padding: 42px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.client-cloud.is-enhanced {
  height: clamp(540px, 57vw, 690px);
  min-height: 0;
  padding: 0;
  display: block;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.client-cloud.is-enhanced.is-dragging { cursor: grabbing; }
.client-cloud:focus-visible { outline: 3px solid rgba(0,129,202,.5); outline-offset: -7px; }
.client-cloud-node {
  min-width: 0;
  min-height: 72px;
  padding: 10px 13px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22,51,125,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(11,32,88,.08);
}
.client-cloud-node img {
  width: 100%;
  height: 100%;
  max-height: 62px;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.client-cloud.is-enhanced .client-cloud-node {
  --cloud-hover: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(98px, 10vw, 152px);
  height: clamp(58px, 6vw, 88px);
  min-height: 0;
  opacity: var(--cloud-opacity, .5);
  filter: saturate(var(--cloud-saturation, 1)) blur(var(--cloud-blur, 0));
  box-shadow: 0 18px 42px rgba(11,32,88,var(--cloud-shadow-opacity, .1));
  transform: translate(-50%, -50%) translate3d(var(--cloud-x, 0), var(--cloud-y, 0), 0) scale(calc(var(--cloud-scale-base, .8) + var(--cloud-hover)));
  transition: border-color .2s ease, box-shadow .2s ease;
  will-change: transform, opacity, filter;
}
.client-cloud.is-enhanced .client-cloud-node:hover {
  --cloud-hover: .08;
  border-color: rgba(0,129,202,.34);
  box-shadow: 0 22px 48px rgba(11,32,88,.2);
}
.client-cloud-help {
  position: absolute;
  z-index: 120;
  left: 50%;
  bottom: 18px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid rgba(22,51,125,.12);
  border-radius: 999px;
  color: rgba(11,32,88,.64);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px rgba(11,32,88,.08);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
.client-cloud-help span { margin-right: 5px; color: var(--steel); font-size: .8rem; }

@media (max-width: 800px) {
  .client-cloud-shell { width: calc(100% - 24px); border-radius: 28px; }
  .client-cloud { min-height: 0; padding: 26px 18px 64px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .client-cloud.is-enhanced { height: clamp(500px, 128vw, 610px); padding: 0; }
  .client-cloud.is-enhanced .client-cloud-node { width: clamp(84px, 24vw, 112px); height: clamp(52px, 14vw, 68px); padding: 8px 10px; border-radius: 13px; }
  .client-cloud-help { bottom: 14px; max-width: calc(100% - 24px); font-size: .56rem; white-space: normal; }
}

@media (max-width: 520px) {
  .client-cloud:not(.is-enhanced) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .client-cloud-shell::before,
  .client-cloud-shell::after { opacity: .45; }
  .client-cloud-help { display: none; }
}

/* Full-bleed editorial composition for the interactive client cloud. */
.clients-section {
  min-height: clamp(760px, 100svh, 980px);
  padding: 0;
  background:
    radial-gradient(circle at 76% 48%, rgba(107,206,243,.3), transparent 23%),
    radial-gradient(circle at 92% 8%, rgba(22,51,125,.1), transparent 26%),
    linear-gradient(135deg, #fbfdff 0%, #edf7fc 58%, #dfeff8 100%);
}
.clients-section .clients-orbit { display: none; }
.clients-section .clients-shell {
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: inherit;
  margin: 0;
}
.clients-section .clients-shell::before {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0 auto 0 0;
  width: min(63vw, 860px);
  background: linear-gradient(90deg, rgba(250,253,255,.99) 0%, rgba(246,251,254,.94) 48%, rgba(240,249,253,.7) 72%, transparent 100%);
  pointer-events: none;
}
.clients-section .clients-heading {
  position: absolute;
  z-index: 80;
  left: max(5vw, 34px);
  top: 50%;
  width: min(520px, 40vw);
  margin: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  transform: translateY(-50%);
}
.motion-ready .clients-section .clients-heading.reveal { transform: translateY(calc(-50% + 24px)); }
.motion-ready .clients-section .clients-heading.reveal.is-visible { transform: translateY(-50%); }
.clients-section .clients-heading .section-title {
  max-width: 520px;
  margin-top: 14px;
  font-size: clamp(3rem, 5.15vw, 5.8rem);
  line-height: .91;
  text-wrap: balance;
}
.clients-section .clients-intro {
  max-width: 430px;
  margin-top: 30px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--sky);
}
.clients-section .clients-intro p { color: rgba(44,59,83,.78); font-size: clamp(.94rem, 1.15vw, 1.08rem); line-height: 1.65; }
.clients-section .client-cloud-shell {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.clients-section .client-cloud-shell::before,
.clients-section .client-cloud-shell::after { left: 68%; }
.clients-section .client-cloud-shell::before { width: min(58vw, 830px); height: min(43vw, 610px); }
.clients-section .client-cloud-shell::after { width: min(41vw, 590px); height: min(62vw, 760px); }
.clients-section .client-cloud,
.clients-section .client-cloud.is-enhanced { width: 100%; height: 100%; min-height: inherit; }
.clients-section .client-cloud.is-enhanced .client-cloud-node { left: 68%; top: 51%; }
.clients-section .client-cloud-help { left: 68%; bottom: 28px; }

@media (max-width: 800px) {
  .clients-section { min-height: clamp(820px, 190vw, 980px); }
  .clients-section .clients-shell::before {
    inset: 0 0 auto;
    width: 100%;
    height: 48%;
    background: linear-gradient(180deg, rgba(250,253,255,.99) 0%, rgba(244,251,254,.92) 66%, transparent 100%);
  }
  .clients-section .clients-heading {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: clamp(72px, 14vw, 96px) 24px 0;
    transform: none;
  }
  .motion-ready .clients-section .clients-heading.reveal { transform: translateY(24px); }
  .motion-ready .clients-section .clients-heading.reveal.is-visible { transform: none; }
  .clients-section .clients-heading .section-title { max-width: 620px; font-size: clamp(2.8rem, 13vw, 4.8rem); }
  .clients-section .clients-intro { max-width: 520px; margin-top: 22px; }
  .clients-section .client-cloud-shell { width: 100%; border-radius: 0; }
  .clients-section .client-cloud,
  .clients-section .client-cloud.is-enhanced { height: 100%; }
  .clients-section .client-cloud.is-enhanced .client-cloud-node { left: 50%; top: 66%; }
  .clients-section .client-cloud-shell::before,
  .clients-section .client-cloud-shell::after { left: 50%; top: 66%; }
  .clients-section .client-cloud-shell::before { width: 92vw; height: 58vw; }
  .clients-section .client-cloud-shell::after { width: 62vw; height: 92vw; }
  .clients-section .client-cloud-help { left: 50%; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .clients-section { min-height: 0; padding: clamp(72px, 9vw, 105px) 0; }
  .clients-section .clients-shell { min-height: 0; }
  .clients-section .clients-shell::before { display: none; }
  .clients-section .clients-heading {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin-bottom: 40px;
    padding: 0 max(5vw, 28px);
    transform: none;
  }
  .motion-ready .clients-section .clients-heading.reveal,
  .motion-ready .clients-section .clients-heading.reveal.is-visible { transform: none; }
  .clients-section .client-cloud-shell {
    position: relative;
    inset: auto;
    width: min(1080px, calc(100% - max(10vw, 56px)));
    height: auto;
    margin: 0 auto;
    border: 1px solid rgba(22,51,125,.12);
    border-radius: 32px;
    background: rgba(255,255,255,.72);
  }
  .clients-section .client-cloud { min-height: 0; height: auto; }
}

/* ================================================================
   WaveMark continuity v17
   Hero, services, execution and ScanMark now share one deep-blue
   canvas. A persistent wave current carries the brand between scenes.
   ================================================================ */

.brand-wave-current {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  overflow: visible;
  opacity: .34;
  filter: drop-shadow(0 0 18px rgba(107,206,243,.16));
  mix-blend-mode: screen;
  transform: translate3d(0, calc(var(--atmosphere-y, 0px) * .18), 0);
  transition: opacity .8s ease, transform 1.2s var(--ease-premium);
}

.wave-ribbon {
  fill: none;
  stroke: url(#wave-stroke);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.wave-ribbon-a { stroke-width: 1.4; opacity: .58; }
.wave-ribbon-b { stroke-width: 1; opacity: .36; }
.wave-ribbon-pulse {
  stroke-width: 2.2;
  stroke-dasharray: 4 28;
  opacity: .48;
  animation: waveCurrentDash 7s linear infinite;
}

.wave-particle {
  fill: #d8f4ff;
  opacity: .92;
  filter: drop-shadow(0 0 7px #6bcef3) drop-shadow(0 0 14px rgba(0,129,202,.82));
}

.wave-particle-soft { opacity: .54; }

@keyframes waveCurrentDash { to { stroke-dashoffset: -128; } }

body[data-page-tone="midnight"] .brand-wave-current,
body[data-page-tone="electric"] .brand-wave-current { opacity: .42; }
body[data-page-tone="paper"] .brand-wave-current,
body[data-page-tone="sky"] .brand-wave-current { opacity: .075; mix-blend-mode: multiply; }

.hero-cover-panel { background: #07183f; }

.brand-manifesto {
  color: white;
  border-top: 1px solid rgba(107,206,243,.2);
  border-bottom: 1px solid rgba(107,206,243,.16);
  background:
    radial-gradient(circle at 76% 40%, rgba(107,206,243,.17), transparent 25%),
    linear-gradient(100deg, #07183f 0%, #0b2b67 48%, #0b2058 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.manifesto-track span { color: rgba(255,255,255,.92); }
.manifesto-track em { color: var(--sky); }
.manifesto-track i {
  background: var(--sky);
  box-shadow: 0 0 0 6px rgba(107,206,243,.08), 0 0 20px rgba(107,206,243,.42);
}

.home-services {
  color: white;
  background:
    radial-gradient(circle at 84% 9%, rgba(107,206,243,.16), transparent 24%),
    radial-gradient(circle at 10% 72%, rgba(0,129,202,.13), transparent 28%),
    linear-gradient(145deg, #07183f 0%, #0b2058 54%, #0d2c69 100%);
}

.home-services::before {
  opacity: .42;
  background-image:
    linear-gradient(rgba(107,206,243,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,206,243,.07) 1px, transparent 1px);
}

.home-services::after { color: rgba(107,206,243,.055); }
.home-services .eyebrow,
.home-services .section-title em { color: var(--sky); }
.home-services .section-title { color: white; }
.home-services .section-copy { color: #c2d0e8; }

.service-row {
  color: white;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 32px 82px rgba(2,12,38,.34), inset 0 1px rgba(255,255,255,.055);
}

.service-row::before {
  opacity: .25;
  filter: grayscale(.18) saturate(.7) contrast(1.08);
  mix-blend-mode: screen;
}
.service-row:hover::before { opacity: .38; }
.service-row:nth-child(1) { color: white; background: linear-gradient(118deg, #091b49 0%, #123d7a 58%, #0b2058 100%); }
.service-row:nth-child(2) { color: white; background: linear-gradient(120deg, #082a58 0%, #006da9 56%, #0081ca 100%); }
.service-row:nth-child(3) { color: white; background: linear-gradient(120deg, #061631 0%, #0b2058 57%, #16337d 100%); }
.service-row .number,
.service-row:nth-child(2) .number,
.service-row:nth-child(3) .number { color: var(--sky); }
.service-row:nth-child(1) .service-icon,
.service-row:nth-child(2) .service-icon,
.service-row:nth-child(3) .service-icon { color: var(--navy-deep); background: rgba(216,244,255,.94); }
.service-row p,
.service-row:nth-child(2) p,
.service-row:nth-child(3) p { color: #d7e6f5; }
.service-row:nth-child(2) .service-arrow,
.service-row:nth-child(3) .service-arrow { color: var(--navy-deep); background: var(--sky); }

.execution-bridge { background: #061631; }
.execution-bridge-stage::before {
  background:
    radial-gradient(circle at 27% 54%, rgba(0,129,202,.26), transparent 35%),
    radial-gradient(circle at 74% 40%, rgba(107,206,243,.2), transparent 31%),
    linear-gradient(118deg, #07183f 0%, #0b2f72 48%, #07183f 100%);
}
.execution-bridge-stage::after { background: linear-gradient(180deg, #07183f 0%, transparent 20%, transparent 77%, #07183f 100%); }
.execution-bridge-media { border-color: rgba(107,206,243,.24); box-shadow: 0 38px 100px rgba(2,12,38,.48); }
.execution-bridge-media::after { background: linear-gradient(180deg, rgba(7,24,63,.02), rgba(7,24,63,.75)); }
.execution-bridge-copy p,
.execution-bridge-copy em { color: var(--sky); }

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .home-services[data-card-stack] .section-heading::before {
    background: linear-gradient(180deg, rgba(7,24,63,.995) 0%, rgba(7,24,63,.97) 70%, rgba(7,24,63,0) 100%);
  }
}

@media (max-width: 560px) {
  .service-row:nth-child(1) { background: linear-gradient(135deg, #091b49, #123d7a); }
}

@media (max-width: 800px) {
  .site-header .main-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(100% + 32px));
    transition: transform .3s ease, opacity .2s ease, visibility .3s ease;
  }
  .site-header .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-wave-current { opacity: .18; transform: none; }
  .wave-ribbon-pulse { animation: none; }
  .wave-particles { display: none; }
}

/* ================================================================
   Continuity refinements v18
   Cleaner ScanMark canvas, larger montage and a deeper field gallery.
   ================================================================ */

.manifesto-track em { color: white; }

.proof-choreography-stage {
  background:
    radial-gradient(circle at 28% 36%, rgba(0,129,202,.24), transparent 31%),
    radial-gradient(circle at 76% 68%, rgba(107,206,243,.12), transparent 28%),
    linear-gradient(145deg, #04132f 0%, #07183f 48%, #0b2b64 100%);
  background-size: auto;
}

.proof-frame {
  border-color: rgba(107,206,243,.24);
  box-shadow: 0 32px 82px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.025);
}

.home-portfolio {
  isolation: isolate;
  color: white;
  background:
    radial-gradient(ellipse at 12% 28%, rgba(0,129,202,.28), transparent 34%),
    radial-gradient(ellipse at 88% 72%, rgba(107,206,243,.16), transparent 30%),
    linear-gradient(138deg, #04132f 0%, #07183f 42%, #0b2058 70%, #123a78 100%);
}

.home-portfolio::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(107,206,243,.055) 42.2%, transparent 42.5%),
    radial-gradient(ellipse at 50% 112%, rgba(0,129,202,.2), transparent 53%);
  pointer-events: none;
}

.home-portfolio::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -12%;
  right: -12%;
  bottom: -31%;
  height: 58%;
  border: 1px solid rgba(107,206,243,.18);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -52px 110px rgba(0,129,202,.08), 0 0 0 70px rgba(107,206,243,.018);
  transform: rotate(-3deg);
  pointer-events: none;
}

.home-portfolio > .section-shell { position: relative; z-index: 2; }
.home-portfolio .portfolio-pattern { z-index: 1; color: var(--sky); opacity: .075; }
.home-portfolio .eyebrow-light,
.home-portfolio .section-title em,
.home-portfolio .tile-copy span { color: var(--sky); }
.home-portfolio .section-title-light { color: white; }
.home-portfolio .section-copy { color: #c5d5e9 !important; }

.about-expansion-copy .eyebrow { color: var(--sky); }
.about-expansion-copy .section-title {
  margin-top: 20px;
  color: white;
  font-size: clamp(3.5rem, 6.3vw, 7.4rem);
  line-height: .87;
}
.about-expansion-copy .section-title em { color: var(--sky); }

.about-bento-grid .text-link { pointer-events: auto; }
.about-bento-story .text-link { align-self: flex-start; margin-top: 22px; border-color: rgba(255,255,255,.18); }

@media (max-width: 1100px) and (min-width: 801px) {
}

@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .about-expansion-copy .section-title { margin-top: 14px; font-size: clamp(2.55rem, 11vw, 4.1rem); }
}

@media (max-width: 520px) {
}

/* ================================================================
   About WaveMark network v20
   Human portrait, connected method, verified strengths and short pin.
   ================================================================ */

.about-network-v3 {
  --about-heading-opacity: .48;
  --about-heading-y: 34px;
  --about-portrait-opacity: .42;
  --about-portrait-y: 46px;
  --about-portrait-scale: .9;
  --about-stats-opacity: 0;
  --about-stats-y: 42px;
  --about-cta-opacity: 0;
  --about-cta-y: 34px;
  min-height: 188vh;
  padding: 0;
  color: white;
  background:
    radial-gradient(circle at 50% 48%, rgba(0,129,202,.22), transparent 28%),
    linear-gradient(148deg, #03112d 0%, #061a43 52%, #0a2d66 100%);
  overflow: visible;
  isolation: isolate;
}

.about-network-v3::before,
.about-network-v3 .about-pattern { display: none; }

.about-network-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(107,206,243,.1), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, 90px 100%;
}

.about-network-sticky::before,
.about-network-sticky::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -12%;
  width: 124%;
  height: 38%;
  border: 1px solid rgba(107,206,243,.12);
  border-radius: 50%;
  pointer-events: none;
}
.about-network-sticky::before { top: -25%; transform: rotate(-3deg); }
.about-network-sticky::after { bottom: -28%; transform: rotate(4deg); }

.about-network-heading {
  position: absolute;
  z-index: 6;
  top: clamp(86px, 10vh, 108px);
  left: 50%;
  width: min(920px, 78vw);
  text-align: center;
  opacity: var(--about-heading-opacity);
  transform: translate3d(-50%, var(--about-heading-y), 0);
  will-change: opacity, transform;
}
.about-network-heading .eyebrow { justify-content: center; color: var(--sky); }
.about-network-heading .section-title {
  margin-top: 12px;
  color: white;
  font-size: clamp(2.15rem, 4vw, 4.9rem);
  line-height: .92;
}
.about-network-heading .section-title em { color: var(--sky); }
.about-network-heading > p:last-child {
  max-width: 690px;
  margin: 16px auto 0;
  color: #c5d4e8;
  font-size: clamp(.76rem, .9vw, .94rem);
  line-height: 1.55;
}

.about-network-stage {
  position: absolute;
  z-index: 3;
  top: clamp(230px, 29vh, 280px);
  right: clamp(84px, 8.5vw, 124px);
  bottom: clamp(174px, 22vh, 205px);
  left: clamp(84px, 8.5vw, 124px);
}

.about-network-routes { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.about-network-routes path {
  --about-route-progress: 0;
  fill: none;
  stroke: rgba(107,206,243,.78);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--about-route-progress));
  filter: drop-shadow(0 0 7px rgba(107,206,243,.72));
}
.about-network-origin {
  fill: var(--sky);
  filter: drop-shadow(0 0 12px rgba(107,206,243,.9));
  animation: about-origin-pulse 1.9s ease-in-out infinite;
}
@keyframes about-origin-pulse { 50% { r: 11; opacity: .55; } }

.about-network-node {
  --about-node-opacity: 0;
  --about-node-y: 34px;
  --about-node-scale: .94;
  position: absolute;
  z-index: 4;
  width: min(27vw, 350px);
  min-height: 122px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(107,206,243,.22);
  border-radius: 20px;
  background: rgba(4,20,54,.7);
  box-shadow: 0 20px 48px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px) saturate(1.2);
  opacity: var(--about-node-opacity);
  transform: translate3d(0, var(--about-node-y), 0) scale(var(--about-node-scale));
  will-change: opacity, transform;
}
.about-network-node::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 15px rgba(107,206,243,.9);
  transform: translateY(-50%);
}
.about-network-node-lt,
.about-network-node-lb { left: 0; }
.about-network-node-rt,
.about-network-node-rb { right: 0; }
.about-network-node-lt,
.about-network-node-rt { top: 2%; }
.about-network-node-lb,
.about-network-node-rb { bottom: 2%; }
.about-network-node-lt::before,
.about-network-node-lb::before { right: -4px; }
.about-network-node-rt::before,
.about-network-node-rb::before { left: -4px; }
.about-network-node > span { color: var(--sky); font-family: var(--serif); font-size: 1.1rem; font-weight: 700; }
.about-network-node strong { display: block; color: white; font-size: 1rem; }
.about-network-node p { margin: 8px 0 0; color: #c5d3e5; font-size: .76rem; line-height: 1.48; }

.about-network-stats {
  position: absolute;
  z-index: 7;
  right: clamp(84px, 8.5vw, 124px);
  bottom: 92px;
  left: clamp(84px, 8.5vw, 124px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(3,17,46,.8);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
  opacity: var(--about-stats-opacity);
  transform: translate3d(0, var(--about-stats-y), 0);
  will-change: opacity, transform;
}
.about-network-stats article {
  --about-stat-opacity: 0;
  --about-stat-y: 26px;
  min-width: 0;
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,.11);
  opacity: var(--about-stat-opacity);
  transform: translate3d(0, var(--about-stat-y), 0);
}
.about-network-stats article:last-child { border-right: 0; }
.about-network-stats strong { color: white; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 2rem); }
.about-network-stats span { color: #aebfd6; font-size: .64rem; line-height: 1.25; }

.about-network-cta {
  position: absolute;
  z-index: 8;
  right: clamp(84px, 8.5vw, 124px);
  bottom: 22px;
  left: clamp(84px, 8.5vw, 124px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: var(--about-cta-opacity);
  transform: translate3d(0, var(--about-cta-y), 0);
  will-change: opacity, transform;
}
.about-network-cta p { margin: 0; display: flex; gap: 10px; color: #b7c8de; font-size: .72rem; }
.about-network-cta p strong { color: white; }
.about-network-cta .button { min-height: 48px; padding: 0 24px; font-size: .74rem; }

@media (max-width: 1100px) and (min-width: 801px) {
  .about-network-node { width: 27vw; padding: 19px; }
  .about-network-node p { display: none; }
  .about-network-stats article { padding-inline: 12px; }
}

@media (max-height: 760px) and (min-width: 801px) {
  .about-network-heading { top: 82px; }
  .about-network-heading .section-title { font-size: clamp(2rem, 3.5vw, 3.8rem); }
  .about-network-heading > p:last-child { display: none; }
  .about-network-stage { top: 185px; bottom: 166px; }
  .about-network-node { min-height: 110px; padding: 18px 20px; }
}

@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .about-network-v3 {
    min-height: 0;
    padding: 86px 18px;
    overflow: hidden;
  }
  .about-network-sticky { position: relative; height: auto; min-height: 0; overflow: visible; background: none; }
  .about-network-heading { position: relative; top: auto; left: auto; width: auto; text-align: left; opacity: 1; transform: none; }
  .about-network-heading .eyebrow { justify-content: flex-start; }
  .about-network-heading .section-title { font-size: clamp(2.6rem, 11vw, 4.4rem); }
  .about-network-heading > p:last-child { margin-inline: 0; }
  .about-network-stage { position: relative; inset: auto; margin-top: 42px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  .about-network-routes { display: none; }
  .about-network-node { position: relative; inset: auto; width: 100%; min-height: 116px; opacity: 1; transform: none; }
  .about-network-node::before { display: none; }
  .about-network-stats { position: relative; inset: auto; margin-top: 14px; grid-template-columns: 1fr 1fr; opacity: 1; transform: none; }
  .about-network-stats article { min-height: 88px; padding: 18px; display: block; opacity: 1; transform: none; border-bottom: 1px solid rgba(255,255,255,.11); }
  .about-network-stats article:nth-child(2) { border-right: 0; }
  .about-network-stats article:nth-last-child(-n+2) { border-bottom: 0; }
  .about-network-stats span { display: block; margin-top: 5px; }
  .about-network-cta { position: relative; inset: auto; margin-top: 28px; display: grid; gap: 20px; opacity: 1; transform: none; }
  .about-network-cta p { display: grid; gap: 4px; }
  .about-network-cta .button { justify-self: stretch; }
}

@media (max-width: 460px) {
  .about-network-stats { grid-template-columns: 1fr; }
  .about-network-stats article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11) !important; }
  .about-network-stats article:last-child { border-bottom: 0 !important; }
}

/* ================================================================
   About identity nucleus v21
   Corporate team photography in the atmosphere; WaveMark at the core.
   ================================================================ */

.about-network-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.about-network-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: saturate(.84) contrast(1.04);
  transform: scale(1.28);
  transform-origin: right center;
}
.about-network-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,17,45,.98) 0%, rgba(3,17,45,.92) 34%, rgba(3,17,45,.72) 68%, rgba(3,17,45,.55) 100%),
    linear-gradient(180deg, rgba(3,17,45,.5) 0%, rgba(3,17,45,.18) 42%, rgba(3,17,45,.88) 100%);
}

.about-network-core {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: clamp(270px, 25vw, 350px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.99), rgba(231,246,252,.94) 54%, rgba(190,226,244,.88) 100%);
  box-shadow:
    0 34px 90px rgba(0,0,0,.44),
    0 0 0 13px rgba(107,206,243,.055),
    0 0 82px rgba(0,129,202,.34);
  opacity: var(--about-portrait-opacity);
  transform: translate(-50%, -50%) translate3d(0, var(--about-portrait-y), 0) scale(var(--about-portrait-scale));
  will-change: opacity, transform;
}
.about-network-core::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(0,129,202,.18);
  border-radius: inherit;
}
.about-network-core img { width: 72%; height: auto; transform: translateY(-8px); }
.about-network-core > strong {
  position: absolute;
  right: 34px;
  bottom: 45px;
  left: 34px;
  color: var(--navy);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.about-network-core-ring {
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(107,206,243,.28);
  border-radius: 50%;
  pointer-events: none;
}
.about-network-core-ring::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 16px rgba(107,206,243,.9);
}
.about-network-core-ring-a { animation: about-core-orbit 9s linear infinite; }
.about-network-core-ring-b { inset: -34px; opacity: .52; animation: about-core-orbit 14s linear infinite reverse; }
@keyframes about-core-orbit { to { transform: rotate(360deg); } }

@media (max-height: 760px) and (min-width: 801px) {
  .about-network-core { width: 320px; }
}

@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .about-network-sticky { display: flex; flex-direction: column; }
  .about-network-heading { order: 1; }
  .about-network-photo {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: min(62vw, 310px);
    margin-top: 32px;
    border: 1px solid rgba(107,206,243,.2);
    border-radius: 26px;
  }
  .about-network-photo::after {
    background: linear-gradient(180deg, rgba(3,17,45,.08), rgba(3,17,45,.36));
  }
  .about-network-stage { order: 3; margin-top: 28px; }
  .about-network-core {
    position: relative;
    left: auto;
    top: auto;
    order: -1;
    justify-self: center;
    width: min(68vw, 270px);
    margin: 20px auto 34px;
    opacity: 1;
    transform: none;
  }
  .about-network-stats { order: 4; }
  .about-network-cta { order: 5; }
  .about-network-core-ring-a,
  .about-network-core-ring-b,
  .about-network-origin { animation: none; }
}

.about-network-photo img {
  object-position: center 52%;
  transform: scale(1.06);
  transform-origin: center;
}

@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .about-network-photo img {
    object-position: center 45%;
    transform: scale(1.04);
    transform-origin: center;
  }
}

/* ================================================================
   Image bank correction v55
   Full-bleed service imagery while preserving the existing cards.
   ================================================================ */

.service-row::before { display: none; }

.service-row-media {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.service-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) contrast(1.04);
  transform: scale(var(--service-image-scale, 1.035));
  transition: transform .7s var(--ease-premium), filter .45s ease;
  will-change: transform;
}

.service-row-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,17,45,.94) 0%, rgba(3,17,45,.78) 48%, rgba(3,17,45,.42) 100%),
    linear-gradient(180deg, rgba(3,17,45,.08), rgba(3,17,45,.52));
}

.service-row:nth-child(1),
.service-row:nth-child(2),
.service-row:nth-child(3) { background: #07183f; }

@media (hover: hover) {
  .service-row:hover .service-row-media img {
    filter: saturate(1) contrast(1.06);
    transform: scale(1.115);
  }
}

@media (min-width: 801px) {
  .home-portfolio[data-horizontal-scene] .portfolio-tile:last-child {
    width: min(64vw, 860px);
  }
}

@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .service-row-media::after {
    background: linear-gradient(90deg, rgba(3,17,45,.91), rgba(3,17,45,.6));
  }

  .home-portfolio[data-horizontal-scene] .portfolio-preview {
    grid-template-rows: repeat(4, 390px);
  }
}

/* ScanMark choreography: dashboard first, phone after the montage. */
.proof-dashboard-montage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(107,206,243,.28);
  border-radius: 22px;
  background: #07183f;
  box-shadow: 0 32px 82px rgba(0,0,0,.45);
  opacity: var(--dashboard-montage-opacity, 1);
  pointer-events: none;
}

.proof-dashboard-montage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.proof-frame-scanmark .proof-dashboard-phone {
  opacity: var(--dashboard-phone-opacity, 0);
  transition: opacity .12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .proof-dashboard-montage { opacity: 0; }
  .proof-frame-scanmark .proof-dashboard-phone { opacity: 1; }
}

/* ================================================================
   Institutional current v58
   A WaveMark-blue credential field inspired by spotlight, shine-border
   and bento interactions, adapted natively for the static site.
   ================================================================ */

.certifications-section {
  isolation: isolate;
  min-height: clamp(760px, 92svh, 940px);
  margin-top: -1px;
  padding: clamp(88px, 8vw, 124px) max(5vw, 28px) clamp(82px, 7vw, 112px);
  color: white;
  border-radius: 48px 48px 0 0;
  background:
    radial-gradient(circle at 13% 24%, rgba(0,129,202,.2), transparent 30%),
    radial-gradient(circle at 82% 69%, rgba(107,206,243,.13), transparent 29%),
    linear-gradient(145deg, #04132f 0%, #07183f 48%, #0b2b64 100%);
  box-shadow: 0 -32px 84px rgba(4,19,47,.22);
  overflow: clip;
}

.certifications-section + .contact-panel { background: #07183f; }

.certifications-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(107,206,243,.045) 50%, transparent 54%),
    radial-gradient(circle at 50% 0, rgba(255,255,255,.055), transparent 38%);
  pointer-events: none;
}

.certifications-section::after,
.certifications-pattern { display: none; }

.certification-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.certification-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .72;
}

.certification-glow-a {
  top: 4%;
  left: 8%;
  width: 240px;
  height: 240px;
  background: rgba(0,129,202,.13);
}

.certification-glow-b {
  right: 3%;
  bottom: 2%;
  width: 320px;
  height: 320px;
  background: rgba(107,206,243,.09);
}

.certification-wave {
  position: absolute;
  inset: 6% -5% -2%;
  width: 110%;
  height: 96%;
  overflow: visible;
  opacity: .76;
  filter: drop-shadow(0 0 20px rgba(107,206,243,.16));
}

.certification-wave-line {
  fill: none;
  stroke: url(#certification-wave-stroke);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.certification-wave-line-soft { stroke-width: 1.4; opacity: .45; }
.certification-wave-line-pulse {
  stroke-width: 2.1;
  stroke-dasharray: 5 30;
  opacity: .65;
  animation: certificationWaveTravel 7s linear infinite;
}

.certification-wave-particle { fill: #e1f7ff; opacity: .98; }
.certification-wave-particle-soft { opacity: .5; }

@keyframes certificationWaveTravel { to { stroke-dashoffset: -140; } }

.certifications-shell {
  position: relative;
  z-index: 2;
  max-width: min(1380px, 90vw);
}

.certifications-header {
  margin-bottom: clamp(42px, 5vw, 68px);
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .62fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: end;
}

.certifications-header .section-title {
  max-width: 820px;
  font-size: clamp(3.2rem, 5.35vw, 6.3rem);
  line-height: .91;
}

.certifications-copy {
  padding: 4px 0 8px clamp(22px, 3vw, 42px);
  border-left: 1px solid rgba(107,206,243,.5);
}

.certifications-copy > p {
  max-width: 440px;
  color: #cfdbec;
  font-size: clamp(.94rem, 1.05vw, 1.08rem);
  line-height: 1.78;
}

.certification-board {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: visible;
  mask-image: none;
}

.certification-track {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(196px, 1fr));
  gap: clamp(13px, 1.25vw, 19px);
  animation: none;
}

.certification-card,
.certification-card-wide {
  --cert-arrival-y: 0px;
  --cert-hover-y: 0px;
  --cert-rx: 0deg;
  --cert-ry: 0deg;
  --cert-spot-x: 50%;
  --cert-spot-y: 50%;
  position: relative;
  isolation: isolate;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-rows: minmax(116px, 1fr) auto;
  gap: 11px;
  color: white;
  border: 1px solid rgba(107,206,243,.23);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(15,48,105,.82), rgba(5,25,63,.92));
  box-shadow: 0 26px 64px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07);
  overflow: hidden;
  transform: perspective(1000px) translate3d(0, calc(var(--cert-arrival-y) + var(--cert-hover-y)), 0) rotateX(var(--cert-rx)) rotateY(var(--cert-ry));
  transform-style: preserve-3d;
  transition: opacity .7s ease var(--cert-delay, 0s), transform .72s var(--ease-premium) var(--cert-delay, 0s), border-color .3s ease, box-shadow .3s ease;
  will-change: transform;
}

.certification-card:nth-child(1) { grid-column: 1 / 5; grid-row: 1; --cert-delay: .04s; }
.certification-card:nth-child(2) { grid-column: 5 / 8; grid-row: 1; --cert-delay: .13s; }
.certification-card:nth-child(3) { grid-column: 8 / 13; grid-row: 1; --cert-delay: .22s; }
.certification-card:nth-child(4) { grid-column: 2 / 7; grid-row: 2; --cert-delay: .31s; }
.certification-card:nth-child(5) { grid-column: 7 / 12; grid-row: 2; --cert-delay: .4s; }

.certification-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -55%;
  bottom: -55%;
  left: -48%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(189,237,255,.38), rgba(255,255,255,.72), rgba(107,206,243,.28), transparent);
  opacity: 0;
  filter: blur(7px);
  transform: skewX(-16deg) translateX(-180%);
  pointer-events: none;
}

.certification-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(260px circle at var(--cert-spot-x) var(--cert-spot-y), rgba(107,206,243,.2), transparent 66%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}

.certifications-section.is-cert-ready .certification-card {
  --cert-arrival-y: 48px;
  opacity: 0;
}

.certifications-section.is-engaged .certification-card {
  --cert-arrival-y: 0px;
  opacity: 1;
}

@keyframes certificationCardShine {
  0%, 52% { opacity: 0; transform: skewX(-16deg) translateX(-180%); }
  58% { opacity: .72; }
  78% { opacity: 0; transform: skewX(-16deg) translateX(680%); }
  100% { opacity: 0; transform: skewX(-16deg) translateX(680%); }
}

.certification-card > * { position: relative; z-index: 2; }

.certification-logo {
  min-height: 116px;
  padding: 20px clamp(17px, 2vw, 30px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(232,245,251,.94));
  box-shadow: inset 0 1px white, 0 10px 26px rgba(1,12,35,.13);
  transform: translateZ(22px);
}

.certification-card img,
.certification-card-seal img {
  width: 100%;
  height: 100%;
  max-width: 185px;
  max-height: 104px;
  object-fit: contain;
}

.certification-card-seal img { max-width: 125px; }

.certification-note {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-top: clamp(32px, 4vw, 52px);
  padding: 0;
  display: grid;
  grid-template-columns: 42px auto 1fr;
  gap: 14px;
  align-items: center;
  color: #e0eff7;
  border: 0;
  background: transparent;
}

.certification-note span {
  width: 42px;
  height: 42px;
  color: var(--navy-deep);
  background: var(--sky);
  box-shadow: 0 0 0 8px rgba(107,206,243,.08), 0 0 28px rgba(107,206,243,.32);
}

.certification-note strong {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.certification-note i {
  height: 1px;
  background: linear-gradient(90deg, rgba(107,206,243,.58), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-premium) .45s;
}

.certifications-section.is-engaged .certification-note i { transform: scaleX(1); }

@media (hover: hover) {
  .certification-card:hover {
    --cert-hover-y: -8px;
    border-color: rgba(150,226,255,.66);
    box-shadow: 0 34px 76px rgba(0,0,0,.38), 0 0 34px rgba(0,129,202,.16), inset 0 1px rgba(255,255,255,.1);
  }

  .certification-card:hover::after { opacity: 1; }
}

@media (max-width: 980px) {
  .certifications-header { grid-template-columns: 1fr; gap: 28px; }
  .certifications-copy { max-width: 630px; }
  .certifications-header .section-title { max-width: 760px; }
  .certification-track { grid-template-rows: repeat(2, 190px); }
}

@media (max-width: 800px) {
  .certifications-section {
    min-height: 0;
    padding: 88px 18px 76px;
    border-radius: 32px 32px 0 0;
  }

  .certifications-shell { max-width: none; }
  .certifications-header { padding-inline: 6px; }
  .certifications-header .section-title { font-size: clamp(3rem, 13vw, 5rem); }
  .certifications-copy { padding-left: 20px; }
  .certification-wave { inset: 13% -38% 3%; width: 176%; opacity: .48; }
  .certification-board {
    width: calc(100vw - 18px);
    margin-left: 0;
    padding: 6px 18px 18px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }
  .certification-board::-webkit-scrollbar { display: none; }
  .certification-track {
    width: max-content;
    display: flex;
    gap: 13px;
    animation: none;
  }
  .certification-card,
  .certification-card-wide {
    width: min(76vw, 320px);
    height: 238px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .certification-note { padding-inline: 6px; grid-template-columns: 42px 1fr; }
  .certification-note i { display: none; }
}

@media (max-width: 520px) {
  .certification-card,
  .certification-card-wide { width: 82vw; height: 228px; }
  .certification-logo { min-height: 120px; }
  .certification-note strong { font-size: .64rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .certification-wave-line-pulse,
  .certifications-section.is-engaged .certification-card::before { animation: none; }
  .certification-wave-particle { display: none; }
  .certifications-section.is-cert-ready .certification-card,
  .certifications-section.is-engaged .certification-card {
    --cert-arrival-y: 0px;
    opacity: 1;
    transform: none;
  }
  .certification-note i { transform: scaleX(1); transition: none; }
}

/* ================================================================
   Institutional fit v60
   One viewport, one card layer and five equal credentials.
   ================================================================ */

@media (min-width: 801px) {
  .certifications-section {
    width: 100%;
    height: 100svh;
    min-height: 620px;
    padding: clamp(74px, 9vh, 98px) max(5vw, 28px) clamp(30px, 4.5vh, 48px);
  }

  .certifications-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .certifications-header {
    margin-bottom: clamp(24px, 3.7vh, 36px);
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .62fr);
    gap: clamp(44px, 7vw, 104px);
  }

  .certifications-header .section-title {
    max-width: 760px;
    font-size: clamp(3rem, 4.7vw, 5.45rem);
  }

  .certification-track {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: clamp(11px, 1.15vw, 17px);
  }

  .certification-card,
  .certification-card-wide,
  .certification-card:nth-child(1),
  .certification-card:nth-child(2),
  .certification-card:nth-child(3),
  .certification-card:nth-child(4),
  .certification-card:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: clamp(172px, 25vh, 202px);
    padding: clamp(13px, 1.25vw, 18px);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    color: var(--navy-deep);
    border: 1px solid rgba(174,224,244,.82);
    border-radius: 22px;
    background: linear-gradient(150deg, rgba(255,255,255,.99), rgba(233,247,252,.96));
    box-shadow: 0 22px 52px rgba(0,0,0,.25), inset 0 1px white;
  }

  .certification-card::after {
    background: radial-gradient(240px circle at var(--cert-spot-x) var(--cert-spot-y), rgba(0,129,202,.16), transparent 68%);
  }

  .certification-logo {
    min-height: 0;
    padding: 0 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .certification-card img,
  .certification-card-seal img {
    width: 90%;
    height: 86%;
    max-width: 185px;
    max-height: 132px;
    object-position: center;
  }

  .certification-card-seal img { max-width: 185px; }

  .certification-index {
    top: 13px;
    right: 15px;
    padding: 0;
    color: rgba(7,24,63,.36);
    border: 0;
  }

  .certification-card-copy {
    min-height: 37px;
    padding: 10px 4px 1px;
    display: grid;
    place-items: center;
    border-top: 1px solid rgba(22,51,125,.12);
    text-align: center;
  }

  .certification-card-copy strong {
    max-width: none;
    color: var(--navy-deep);
    font-size: clamp(.68rem, .73vw, .8rem);
    line-height: 1.28;
    text-align: center;
  }

  .certification-note {
    margin-top: clamp(20px, 3.3vh, 32px);
  }

  @media (hover: hover) {
    .certification-card:hover {
      border-color: rgba(107,206,243,.96);
      box-shadow: 0 30px 68px rgba(0,0,0,.32), 0 0 30px rgba(0,129,202,.17), inset 0 1px white;
    }
  }
}

@media (max-width: 800px) {
  .certification-card,
  .certification-card-wide {
    padding: 16px;
    color: var(--navy-deep);
    border-color: rgba(174,224,244,.82);
    background: linear-gradient(150deg, rgba(255,255,255,.99), rgba(233,247,252,.96));
  }

  .certification-logo {
    min-height: 0;
    padding: 0 7px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .certification-card img,
  .certification-card-seal img {
    width: 90%;
    height: 86%;
    max-width: 220px;
    max-height: 158px;
    object-fit: contain;
    object-position: center;
  }
}

/* ================================================================
   Credential activation and cover transition v61
   The certificates are the cards; Contact rises over the pinned scene.
   ================================================================ */

.certification-card,
.certification-card-wide {
  --cert-scale: 1;
  --cert-entry-rz: 0deg;
  grid-template-rows: minmax(0, 1fr);
  transform: perspective(1000px) translate3d(0, calc(var(--cert-arrival-y) + var(--cert-hover-y)), 0) rotateX(var(--cert-rx)) rotateY(var(--cert-ry)) rotateZ(var(--cert-entry-rz)) scale(var(--cert-scale));
}

.certification-card:nth-child(1) { --cert-delay: 0s; --cert-start-rz: -2.2deg; }
.certification-card:nth-child(2) { --cert-delay: .18s; --cert-start-rz: 1.6deg; }
.certification-card:nth-child(3) { --cert-delay: .36s; --cert-start-rz: -1.2deg; }
.certification-card:nth-child(4) { --cert-delay: .54s; --cert-start-rz: 1.8deg; }
.certification-card:nth-child(5) { --cert-delay: .72s; --cert-start-rz: -1.6deg; }

.certifications-section.is-cert-ready .certification-card {
  --cert-arrival-y: 64px;
  --cert-scale: .84;
  --cert-entry-rz: var(--cert-start-rz);
}

.certifications-section.is-engaged .certification-card {
  --cert-arrival-y: 0px;
  --cert-scale: 1;
  --cert-entry-rz: 0deg;
  animation: certificationActivation 1.35s ease-out var(--cert-delay) both;
}

@keyframes certificationActivation {
  0%, 36% { box-shadow: 0 18px 42px rgba(0,0,0,.22), 0 0 0 rgba(107,206,243,0), inset 0 1px white; }
  66% { box-shadow: 0 26px 62px rgba(0,0,0,.3), 0 0 34px rgba(107,206,243,.42), 0 0 0 2px rgba(107,206,243,.42), inset 0 1px white; }
  100% { box-shadow: 0 22px 52px rgba(0,0,0,.25), 0 0 18px rgba(0,129,202,.08), inset 0 1px white; }
}

.certification-card::before {
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(0,129,202,.18), rgba(107,206,243,.8), rgba(255,255,255,.88), rgba(0,129,202,.18), transparent);
  filter: blur(5px);
}

.certifications-section.is-engaged .certification-card::before {
  animation: certificationCardShine 4.9s ease-in-out var(--cert-delay) infinite;
}

.certification-logo {
  width: 100%;
  height: 100%;
  transform: translateZ(22px) scale(var(--cert-logo-scale, 1));
  opacity: var(--cert-logo-opacity, 1);
  transition: opacity .58s ease calc(var(--cert-delay) + .12s), transform .72s var(--ease-premium) calc(var(--cert-delay) + .08s), filter .35s ease;
}

.certifications-section.is-cert-ready .certification-card {
  --cert-logo-scale: .78;
  --cert-logo-opacity: .22;
}

.certifications-section.is-engaged .certification-card {
  --cert-logo-scale: 1;
  --cert-logo-opacity: 1;
}

.certifications-section.is-engaged .certification-logo img {
  animation: certificationLogoPulse 4.8s ease-in-out calc(var(--cert-delay) + 1.15s) infinite;
}

@keyframes certificationLogoPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0,129,202,0)); }
  50% { filter: drop-shadow(0 0 9px rgba(0,129,202,.2)); }
}

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .certifications-section {
    position: sticky;
    top: 0;
    z-index: 7;
  }

  .certifications-section + .contact-panel {
    position: relative;
    z-index: 9;
    min-height: 100svh;
    border-radius: 48px 48px 0 0;
    background: linear-gradient(155deg, #123b84 0%, #0b2b64 42%, #07183f 100%);
    box-shadow: 0 -34px 90px rgba(1,10,31,.5), inset 0 1px rgba(255,255,255,.08);
    overflow: clip;
  }

  .certifications-section + .contact-panel .contact-shell {
    min-height: calc(100svh - 60px);
    align-items: center;
  }

  .wm-footer { position: relative; z-index: 10; }
}

@media (prefers-reduced-motion: reduce) {
  .certifications-section.is-cert-ready .certification-card,
  .certifications-section.is-engaged .certification-card {
    --cert-scale: 1;
    --cert-entry-rz: 0deg;
    --cert-logo-scale: 1;
    --cert-logo-opacity: 1;
    animation: none;
  }
  .certifications-section.is-engaged .certification-logo img { animation: none; }
}

/* Certification logo sizing v63 */
.certification-card,
.certification-card-wide {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  align-content: stretch;
}

.certification-logo { position: relative; }
.certification-logo img,
.certification-card-seal .certification-logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 94%;
  height: 90%;
  max-width: 190px;
  max-height: 145px;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
}

@media (max-width: 800px) {
  .certification-logo img,
  .certification-card-seal .certification-logo img {
    max-width: 250px;
    max-height: 180px;
  }
}

/* ================================================================
   Infinite glyph footer v65
   Full-field WaveMark typography with no separator strip.
   ================================================================ */

.contact-panel + .wm-footer { margin-top: 0; }

.wm-footer {
  isolation: isolate;
  width: 100%;
  height: 75svh;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
  background:
    radial-gradient(circle at 14% 18%, rgba(107,206,243,.2), transparent 30%),
    radial-gradient(circle at 84% 74%, rgba(0,129,202,.2), transparent 31%),
    linear-gradient(145deg, #07183f 0%, #16337d 54%, #0b2b64 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.055);
  overflow: hidden;
}

.wm-footer::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,19,47,.06), rgba(4,19,47,.34) 55%, rgba(4,19,47,.76) 100%),
    radial-gradient(ellipse at center, transparent 22%, rgba(4,19,47,.2) 100%);
  pointer-events: none;
}

.footer-pattern {
  position: absolute;
  z-index: 0;
  inset: -7% -5%;
  width: 110%;
  height: 114%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: clamp(8px, 1.4vh, 18px);
  color: white;
  background: transparent;
  overflow: hidden;
  transform: rotate(-1.5deg) scale(1.04);
  pointer-events: none;
}

@keyframes footerGlyphFlow {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.footer-main {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: clamp(58px, 8vh, 86px);
  padding-bottom: clamp(34px, 4.5vh, 52px);
}

.footer-brand p,
.footer-column p,
.footer-column address,
.footer-column nav { color: #e0e9f5; }

.footer-bottom {
  position: relative;
  z-index: 3;
  width: min(100%, var(--max));
  color: #a9bad4;
}

.footer-accent { display: none; }

@media (max-width: 800px) {
  .wm-footer {
    height: auto;
    min-height: 75svh;
  }

  .footer-main { padding-top: 72px; }
  .footer-pattern { inset: -3% -35%; width: 170%; height: 106%; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ================================================================
   Scroll-driven infinite footer v66
   Glyphs recycle vertically and react to wheel/touch instead of autoplay.
   ================================================================ */

.footer-pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: white;
  background: transparent;
  overflow: hidden;
  transform: none;
  pointer-events: none;
}

.footer-glyph-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: var(--footer-layer-opacity, 1);
}

.footer-glyph-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  transform: translate3d(0, var(--footer-loop-y, 0px), 0);
}

.footer-glyph-sheet {
  width: 100%;
  height: 75svh;
  min-height: 520px;
  padding: clamp(22px, 4vh, 46px) clamp(22px, 4vw, 62px);
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}

.footer-glyph-sheet span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(216,244,255,.16);
  font-size: clamp(2.2rem, 4.3vw, 5rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 28px rgba(107,206,243,.12);
  transform: rotate(var(--footer-glyph-rotate, 0deg)) scale(var(--footer-glyph-scale, 1));
}
.footer-glyph-layer-a .footer-glyph-sheet span { color: rgba(107,206,243,.16); font-size: clamp(1.65rem, 3.1vw, 3.5rem); }
.footer-glyph-layer-b .footer-glyph-sheet span { color: rgba(255,255,255,.14); }
.footer-glyph-layer-c .footer-glyph-sheet span { color: rgba(107,206,243,.2); font-size: clamp(2.8rem, 5.2vw, 6rem); }

.footer-glyph-sheet span:nth-child(4n + 1) { --footer-glyph-rotate: -5deg; --footer-glyph-scale: .82; }
.footer-glyph-sheet span:nth-child(5n + 2) { --footer-glyph-rotate: 4deg; --footer-glyph-scale: 1.14; }
.footer-glyph-sheet span:nth-child(7n + 3) { --footer-glyph-rotate: -2deg; --footer-glyph-scale: .68; }
.footer-glyph-sheet span:empty { visibility: hidden; }

.footer-brand,
.footer-column {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.footer-main {
  text-shadow: 0 3px 18px rgba(2,12,38,.58);
}

.footer-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 22% -5vw -10%;
  background: radial-gradient(ellipse at 50% 72%, rgba(4,19,47,.66), transparent 72%);
  pointer-events: none;
}

@media (max-width: 800px) {
  .footer-glyph-sheet {
    height: max(75svh, 760px);
    min-height: 760px;
    padding-inline: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(10, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-glyph-track { transform: translate3d(0, -8%, 0); }
}

/* Keep the browser's elastic overscroll from exposing a light canvas below the footer. */
html,
body {
  background-color: #071a47;
  overscroll-behavior-y: none;
}

/* ================================================================
   Tighter Services → Execution handoff v69
   Preserve the card choreography while removing its long exit tail.
   ================================================================ */

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .home-services[data-card-stack] {
    padding-bottom: 18px;
  }

  .home-services[data-card-stack] .service-stack {
    padding-bottom: 0;
  }

  .execution-bridge {
    height: 118vh;
    min-height: 850px;
    margin-top: -6vh;
    border-radius: clamp(24px, 3vw, 42px) clamp(24px, 3vw, 42px) 0 0;
    box-shadow: 0 -26px 72px rgba(4, 15, 45, .28);
  }
}

/* Final internal-page palette guard. */
.access-section[data-access-section] .access-card:nth-child(2) { background: #f3f8fb; }
.portfolio-loop:not(.is-field-focus) .portfolio-loop-track,
.portfolio-loop:not(.is-field-focus) .loop-project { pointer-events: none !important; }

/* ================================================================
   Shared internal-page atmosphere v72
   The home wave current now crosses Services, Portfolio and Intranet.
   Light and dark acts use the same blue-only WaveMark palette.
   ================================================================ */

.page-atmosphere-internal {
  z-index: 6;
  opacity: .28;
}

.page-atmosphere-internal::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 14% 42%, rgba(107,206,243,.22), transparent 23%),
    radial-gradient(ellipse at 82% 66%, rgba(0,129,202,.18), transparent 25%);
  filter: blur(26px);
  transform: translate3d(0, calc(var(--atmosphere-y-reverse, 0px) * .22), 0);
  transition: transform 1.25s var(--ease-premium), opacity .8s ease;
}

.page-atmosphere-internal .brand-wave-current {
  inset: -12% -9%;
  width: 118%;
  height: 124%;
  opacity: .54;
  filter: drop-shadow(0 0 22px rgba(107,206,243,.22));
}

.page-atmosphere-internal .wave-ribbon-a { stroke-width: 1.8; opacity: .72; }
.page-atmosphere-internal .wave-ribbon-b { stroke-width: 1.25; opacity: .5; }
.page-atmosphere-internal .wave-ribbon-pulse { stroke-width: 2.6; opacity: .64; }
.page-atmosphere-internal .wave-particle { filter: drop-shadow(0 0 8px #d8f4ff) drop-shadow(0 0 18px #0081ca); }

body[data-page-tone="midnight"] .page-atmosphere-internal,
body[data-page-tone="electric"] .page-atmosphere-internal { opacity: .3; }

body[data-page-tone="midnight"] .page-atmosphere-internal .brand-wave-current,
body[data-page-tone="electric"] .page-atmosphere-internal .brand-wave-current {
  opacity: .58;
  mix-blend-mode: screen;
}

body[data-page-tone="paper"] .page-atmosphere-internal,
body[data-page-tone="sky"] .page-atmosphere-internal { opacity: .2; }

body[data-page-tone="paper"] .page-atmosphere-internal .brand-wave-current,
body[data-page-tone="sky"] .page-atmosphere-internal .brand-wave-current {
  opacity: .28;
  mix-blend-mode: multiply;
}

body[data-page-tone="paper"] .page-atmosphere-internal .atmosphere-glow-a,
body[data-page-tone="sky"] .page-atmosphere-internal .atmosphere-glow-a { background: rgba(107,206,243,.54); }
body[data-page-tone="paper"] .page-atmosphere-internal .atmosphere-glow-b,
body[data-page-tone="sky"] .page-atmosphere-internal .atmosphere-glow-b { background: rgba(22,51,125,.28); }

@media (max-width: 800px) {
  .page-atmosphere.page-atmosphere-internal { opacity: .13 !important; }
  .page-atmosphere-internal .brand-wave-current { inset: -4% -48%; width: 196%; height: 108%; opacity: .36; }
  .page-atmosphere-internal::before { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  .page-atmosphere-internal { display: block; opacity: .1 !important; }
  .page-atmosphere-internal .brand-wave-current { transform: none; }
  .page-atmosphere-internal .wave-ribbon-pulse { animation: none; }
  .page-atmosphere-internal .wave-particles,
  .page-atmosphere-internal .cursor-aura { display: none; }
}

/* ================================================================
   Services editorial index v73
   A functional opening index replaces the repeated internal hero.
   ================================================================ */

body:has(.services-index) { background: #eef7fb; }
body:has(.services-index) .brand img { width: 148px; height: 58px; object-fit: contain; }

.services-index {
  --services-index-progress: 0;
  --services-index-pointer-x: 0px;
  --services-index-pointer-y: 0px;
  position: relative;
  z-index: 3;
  padding: clamp(112px, 12vh, 128px) max(5vw, 28px) clamp(44px, 5vh, 58px);
  color: white;
  background:
    radial-gradient(circle at 77% 27%, rgba(107,206,243,.2), transparent 28%),
    radial-gradient(circle at 18% 85%, rgba(0,129,202,.18), transparent 27%),
    linear-gradient(145deg, #061435 0%, #0b2865 62%, #0a4a83 100%);
  overflow: hidden;
  isolation: isolate;
}

.services-index::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -15vw;
  bottom: -34vw;
  width: 64vw;
  height: 64vw;
  border: 1px solid rgba(107,206,243,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(107,206,243,.035), 0 0 0 145px rgba(107,206,243,.018);
  transform: translate3d(0, calc(var(--services-index-progress) * -22px), 0);
}
.services-index-link.is-active { padding-left: 16px; color: white; }
.services-index-link.is-active::before { transform: scaleX(1); }
.services-index-link.is-active .services-index-thumb { opacity: 1; transform: scale(1); }
.services-index-link.is-active i { color: var(--navy); background: var(--sky); transform: rotate(-45deg); }

.services-index-preview {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 34px 150px 34px 34px;
  background: #0a255d;
  box-shadow: 0 32px 80px rgba(2,12,38,.32);
  transform: translate3d(var(--services-index-pointer-x), var(--services-index-pointer-y), 0) translateY(calc(var(--services-index-progress) * -16px));
  transition: transform .3s ease-out;
}
.services-index-preview::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(3,14,42,.82)); pointer-events: none; }
.services-index-preview figure { position: absolute; inset: 0; margin: 0; opacity: 0; clip-path: inset(9% 8% 9% 8% round 28px); transform: scale(1.08); transition: opacity .5s ease, clip-path .72s var(--ease-premium), transform .9s var(--ease-premium); }
.services-index-preview figure.is-active { opacity: 1; clip-path: inset(0 round 0); transform: scale(1); }
.services-index-preview figure img { width: 100%; height: 100%; object-fit: cover; }
.services-index-preview .services-index-preview-scan img { object-fit: contain; padding: 42px 38px 74px; background: radial-gradient(circle at 50% 44%, #17529a, #07183f 70%); }
.services-index-preview figcaption { position: absolute; z-index: 4; right: 30px; bottom: 27px; left: 30px; display: flex; justify-content: space-between; align-items: end; color: white; }
.services-index-preview figcaption span { color: var(--sky); font-family: var(--serif); font-size: 1.1rem; }
.services-index-preview figcaption strong { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.services-index-counter { position: absolute; z-index: 5; right: 24px; top: 25px; color: rgba(255,255,255,.82); font-family: var(--serif); font-size: 1.4rem; }

.services-index + .retail-world {
  z-index: 4;
  margin-top: -28px;
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -24px 65px rgba(3,15,44,.25);
}

@media (max-width: 1100px) {
  .services-index-preview { min-height: 430px; border-radius: 30px 105px 30px 30px; }
}

@media (max-width: 800px) {
  body:has(.services-index) .brand img { width: 118px; height: 49px; }
  .services-index { padding: 118px 22px 58px; }
  .services-index-preview { display: none; }
  .services-index + .retail-world { margin-top: -20px; border-radius: 28px 28px 0 0; }
}

@media (max-width: 520px) {
  .services-index { padding-inline: 18px; }
  .services-index-preview { min-height: 285px; }
  .services-index-preview figcaption { right: 20px; bottom: 20px; left: 20px; }
  .services-index-preview figcaption strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .services-index-preview,
  .services-index-preview figure,
  .services-index-link,
  .services-index-link::before { transition: none; transform: none; }
}

/* ================================================================
   Services scene rhythm v74
   Full-screen opening, pinned acts and short overlapping handoffs.
   ================================================================ */

.services-index {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.services-index + .retail-world,
.btl-world[data-service-world],
.execution-rhythm[data-execution-wave],
.scanmark-band[data-scanmark-scene],
.services-closing {
  margin-top: -26px;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -22px 64px rgba(3,15,44,.22);
}

.services-index { z-index: 1; }
.execution-rhythm[data-execution-wave] { position: relative; z-index: 4; }
.services-closing { z-index: 5; }

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .services-index {
    position: sticky;
    top: 0;
    height: 100svh;
  }

  .service-world[data-service-world] { min-height: 170svh; }
  .service-world[data-service-world] .service-world-shell {
    min-height: 100svh;
    padding-block: clamp(50px,6vh,62px) 18px;
  }

  .service-world[data-service-world] .world-heading {
    margin-bottom: 15px;
    grid-template-columns: 96px 1.25fr .75fr;
    gap: 28px;
  }

  .service-world[data-service-world] .world-heading .world-index { font-size: 6.2rem; }
  .service-world[data-service-world] .world-heading .section-title { font-size: clamp(2.55rem,4.2vw,4.65rem); }
  .service-world[data-service-world] .world-heading > p { line-height: 1.5; }

  .service-world[data-service-world] .world-layout { gap: clamp(28px,4vw,56px); }
  .service-world[data-service-world] .world-copy h3 {
    margin: 15px 0 12px;
    font-size: clamp(2rem,2.75vw,3.1rem);
  }
  .service-world[data-service-world] .world-copy > p { font-size: .94rem; line-height: 1.55; }
  .service-world[data-service-world] .capability-cloud { margin-block: 13px 16px; gap: 7px; }
  .service-world[data-service-world] .capability-cloud span { padding: 6px 9px; font-size: .68rem; }
  .service-world[data-service-world] .world-gallery {
    height: clamp(350px,54vh,430px);
    min-height: 0;
  }
  .service-world[data-service-world] .world-gallery-card { bottom: -9px; padding: 17px 19px; }

  .execution-rhythm[data-execution-wave] {
    min-height: 145svh;
    padding: 0 max(5vw,28px);
    overflow: clip;
  }
  .execution-rhythm[data-execution-wave] .execution-rhythm-shell {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 60px 35px;
  }
  .execution-rhythm-shell > p {
    width: min(100%, 980px);
    margin: 0 auto 26px;
    line-height: 1.08;
  }
  .execution-rhythm[data-execution-wave] .execution-wave-map {
    width: 100%;
    flex: 0 0 190px;
    margin: 0 auto;
  }
  .scanmark-band[data-scanmark-scene] .section-title { font-size: clamp(2.7rem,4.7vw,5.25rem); }

  .services-closing { margin-top: -26px; padding-block: clamp(58px,6vw,78px); }
}

@media (max-width: 800px) {
  .services-index { min-height: 100svh; padding-top: 105px; padding-bottom: 34px; }
  .services-index + .retail-world,
  .btl-world[data-service-world],
  .execution-rhythm[data-execution-wave],
  .scanmark-band[data-scanmark-scene],
  .services-closing { margin-top: -18px; border-radius: 26px 26px 0 0; }
}

/* ================================================================
   Services v75 — three distinct immersive worlds
   Portal / Retail aisles / BTL stage / ScanMark evidence flow.
   ================================================================ */

body:has(.services-portal) { background: #eaf5fa; }

.services-portal,
.retail-journey,
.btl-canvas,
.scanmark-flow,
.execution-rhythm-services,
.services-closing-visual {
  position: relative;
  isolation: isolate;
}

.services-portal {
  z-index: 1;
  min-height: 100svh;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 78% 18%, rgba(107,206,243,.19), transparent 25%),
    linear-gradient(145deg, #04102f 0%, #0a245d 58%, #0b4d86 100%);
}

.services-portal::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18vw;
  top: -34vw;
  width: 70vw;
  height: 70vw;
  border: 1px solid rgba(107,206,243,.19);
  border-radius: 50%;
  box-shadow: 0 0 0 68px rgba(107,206,243,.035), 0 0 0 148px rgba(107,206,243,.018);
}

.services-portal-pattern {
  inset: 30px auto 0 -50px;
  width: 420px;
  height: 100%;
  color: white;
  opacity: .045;
}

.services-portal-intro {
  position: absolute;
  z-index: 4;
  top: clamp(98px,12vh,124px);
  left: max(5vw,28px);
  width: min(920px,72vw);
}

.services-portal-intro h1 {
  max-width: 920px;
  margin: 10px 0 12px;
  font-size: clamp(3rem,5.1vw,5.65rem);
  line-height: .88;
  letter-spacing: -.065em;
}

.services-portal-intro h1 em {
  color: var(--sky);
  font-family: var(--serif);
  font-weight: 650;
}

.services-portal-intro > p:last-child {
  max-width: 610px;
  margin: 0;
  color: #c7d5e9;
  font-size: .98rem;
}

.services-portal-worlds {
  position: absolute;
  z-index: 3;
  right: max(4vw,24px);
  bottom: 34px;
  left: max(4vw,24px);
  height: clamp(300px,46vh,440px);
  display: flex;
  gap: 12px;
}

.services-portal-world {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px 66px 24px 24px;
  background: #0a2357;
  box-shadow: 0 24px 55px rgba(2,12,38,.26);
  transition: flex .7s var(--ease-premium), transform .55s var(--ease-premium), border-color .3s ease;
}

.services-portal-world:nth-child(2) { border-radius: 66px 24px 24px 24px; }
.services-portal-world:nth-child(3) { border-radius: 24px 24px 66px 24px; }
.services-portal-world.is-active { flex: 1.65 1 0; border-color: rgba(107,206,243,.74); transform: translateY(-12px); }

.services-portal-world figure,
.services-portal-world figure::after {
  position: absolute;
  inset: 0;
  margin: 0;
}

.services-portal-world figure::after {
  content: "";
  background: linear-gradient(180deg, rgba(3,12,35,.06) 24%, rgba(3,13,39,.92) 100%);
}

.services-portal-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.68) brightness(.72);
  transform: scale(1.08);
  transition: transform 1s var(--ease-premium), filter .5s ease;
}

.services-portal-world.is-active img { filter: saturate(1) brightness(.88); transform: scale(1); }
.services-portal-world > div { position: absolute; z-index: 2; right: 24px; bottom: 23px; left: 24px; }
.services-portal-world > div span { color: var(--sky); font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.services-portal-world > div strong { display: block; margin-top: 4px; font-size: clamp(2rem,3vw,3.7rem); line-height: .92; letter-spacing: -.045em; }
.services-portal-world > div p { max-width: 330px; margin: 8px 0 0; color: #d8e4f1; font-size: .76rem; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s var(--ease-premium); }
.services-portal-world.is-active > div p { opacity: 1; transform: none; }
.services-portal-number { position: absolute; z-index: 2; top: 20px; left: 22px; color: rgba(255,255,255,.78); font-family: var(--serif); font-size: 1rem; }
.services-portal-world > i { position: absolute; z-index: 3; right: 21px; top: 18px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-style: normal; transition: color .3s ease, background .3s ease, transform .5s var(--ease-premium); }
.services-portal-world.is-active > i { color: var(--navy); background: var(--sky); transform: rotate(-45deg); }
.services-portal-cue { position: absolute; z-index: 5; top: 49%; right: 17px; display: flex; gap: 9px; align-items: center; color: rgba(255,255,255,.68); font-size: .62rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; }
.services-portal-cue i { color: var(--sky); font-style: normal; }

.retail-journey,
.btl-canvas,
.scanmark-flow,
.execution-rhythm-services,
.services-closing-visual {
  margin-top: -24px;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -22px 64px rgba(3,15,44,.22);
}

.retail-journey {
  z-index: 2;
  min-height: 195svh;
  overflow: clip;
  color: var(--navy);
  background:
    linear-gradient(110deg, rgba(255,255,255,.95), rgba(231,246,252,.86)),
    #edf7fb;
}

.retail-journey-shell {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  padding: clamp(96px,11vh,116px) max(5vw,28px) 30px;
}

.retail-ghost {
  position: absolute;
  z-index: -1;
  right: -3vw;
  top: 17%;
  color: rgba(0,129,202,.045);
  font-size: clamp(9rem,23vw,26rem);
  font-weight: 950;
  letter-spacing: -.09em;
  line-height: .8;
}

.retail-journey-heading {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,430px);
  gap: 40px;
  align-items: end;
}

.retail-journey-heading h2 {
  max-width: 790px;
  margin: 7px 0 0;
  font-size: clamp(2.8rem,4.8vw,5.3rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.retail-journey-heading h2 em { color: var(--steel); font-family: var(--serif); }
.retail-journey-heading > p { margin: 0 0 5px; color: var(--muted); line-height: 1.55; }

.retail-aisle {
  position: absolute;
  z-index: 3;
  top: clamp(260px,34vh,325px);
  right: max(4vw,22px);
  bottom: 78px;
  left: 38%;
  display: grid;
  grid-template-columns: 2.2fr .72fr .72fr .72fr;
  gap: 10px;
  transition: grid-template-columns .75s var(--ease-premium);
}

.retail-journey[data-retail-step="1"] .retail-aisle { grid-template-columns: .72fr 2.2fr .72fr .72fr; }
.retail-journey[data-retail-step="2"] .retail-aisle { grid-template-columns: .72fr .72fr 2.2fr .72fr; }
.retail-journey[data-retail-step="3"] .retail-aisle { grid-template-columns: .72fr .72fr .72fr 2.2fr; }

.retail-aisle-frame {
  position: relative;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #b9d5e4;
  box-shadow: 0 18px 45px rgba(7,34,75,.14);
}

.retail-aisle-frame:first-child { border-radius: 120px 18px 18px 18px; }
.retail-aisle-frame:last-child { border-radius: 18px 18px 120px 18px; }
.retail-aisle-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3,19,51,.82)); opacity: .72; transition: opacity .4s ease; }
.retail-aisle-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); transform: scale(1.07); transition: filter .5s ease, transform .8s var(--ease-premium); }
.retail-aisle-frame figcaption { position: absolute; z-index: 2; right: 15px; bottom: 16px; left: 15px; color: white; font-size: .72rem; font-weight: 850; white-space: nowrap; }
.retail-aisle-frame figcaption span { display: block; margin-bottom: 4px; color: var(--sky); font-family: var(--serif); }

.retail-journey[data-retail-step="0"] [data-retail-frame="0"],
.retail-journey[data-retail-step="1"] [data-retail-frame="1"],
.retail-journey[data-retail-step="2"] [data-retail-frame="2"],
.retail-journey[data-retail-step="3"] [data-retail-frame="3"] { z-index: 2; }
.retail-journey[data-retail-step="0"] [data-retail-frame="0"] img,
.retail-journey[data-retail-step="1"] [data-retail-frame="1"] img,
.retail-journey[data-retail-step="2"] [data-retail-frame="2"] img,
.retail-journey[data-retail-step="3"] [data-retail-frame="3"] img { filter: saturate(1); transform: scale(1); }
.retail-journey[data-retail-step="0"] [data-retail-frame="0"]::after,
.retail-journey[data-retail-step="1"] [data-retail-frame="1"]::after,
.retail-journey[data-retail-step="2"] [data-retail-frame="2"]::after,
.retail-journey[data-retail-step="3"] [data-retail-frame="3"]::after { opacity: .38; }

.retail-narratives {
  position: absolute;
  z-index: 5;
  left: max(5vw,28px);
  top: 45%;
  width: min(31%,390px);
}

.retail-narratives article { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .38s ease, transform .55s var(--ease-premium); }
.retail-narratives article.is-active { opacity: 1; transform: none; pointer-events: auto; }
.retail-narratives span { color: var(--steel); font-size: .65rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.retail-narratives h3 { margin: 12px 0 10px; font-size: clamp(1.8rem,2.5vw,3rem); line-height: .96; letter-spacing: -.045em; }
.retail-narratives p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

.retail-journey-footer,
.btl-canvas-footer,
.scanmark-flow-footer {
  position: absolute;
  z-index: 7;
  right: max(5vw,28px);
  bottom: 24px;
  left: max(5vw,28px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.retail-journey-footer > span,
.btl-canvas-footer > span,
.scanmark-flow-footer > span { font-family: var(--serif); font-size: 1rem; }

.btl-canvas {
  z-index: 3;
  min-height: 205svh;
  overflow: clip;
  color: white;
  background:
    radial-gradient(circle at 79% 42%, rgba(0,129,202,.24), transparent 30%),
    linear-gradient(145deg, #04102f, #0a2867 68%, #092154);
}

.btl-canvas-pattern { inset: 0; color: white; opacity: .04; }
.btl-canvas-shell { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: clamp(96px,11vh,116px) max(5vw,28px) 28px; }
.btl-canvas-heading { position: relative; z-index: 8; max-width: 850px; }
.btl-canvas-heading h2 { max-width: 830px; margin: 8px 0 0; font-size: clamp(3rem,5vw,5.65rem); line-height: .89; letter-spacing: -.06em; }
.btl-canvas-heading h2 em { color: var(--sky); font-family: var(--serif); }

.btl-stage { position: absolute; z-index: 2; inset: 0; perspective: 1100px; }
.btl-stage-card { position: absolute; margin: 0; overflow: hidden; border: 4px solid rgba(255,255,255,.88); border-radius: 20px; background: #0a2d6a; box-shadow: 0 28px 70px rgba(2,10,32,.4); opacity: 0; transition: opacity .55s ease, transform .82s var(--ease-premium), filter .45s ease; }
.btl-stage-card img { width: 100%; height: 100%; object-fit: cover; }
.btl-stage-card-a { left: 4%; top: 36%; width: 39%; height: 48%; transform: translate3d(-22vw,12vh,-120px) rotate(-11deg); }
.btl-stage-card-b { left: 39%; top: 28%; width: 31%; height: 34%; transform: translate3d(0,-24vh,-100px) rotate(8deg); }
.btl-stage-card-c { right: 4%; top: 38%; width: 28%; height: 40%; transform: translate3d(24vw,4vh,-100px) rotate(10deg); }
.btl-stage-card-d { left: 38%; bottom: 4%; width: 31%; height: 29%; transform: translate3d(2vw,24vh,-100px) rotate(-8deg); }

.btl-canvas[data-btl-step="0"] .btl-stage-card-a,
.btl-canvas[data-btl-step="1"] .btl-stage-card-a,
.btl-canvas[data-btl-step="2"] .btl-stage-card-a,
.btl-canvas[data-btl-step="3"] .btl-stage-card-a { opacity: 1; transform: translate3d(0,0,0) rotate(-3deg); }
.btl-canvas[data-btl-step="1"] .btl-stage-card-b,
.btl-canvas[data-btl-step="2"] .btl-stage-card-b,
.btl-canvas[data-btl-step="3"] .btl-stage-card-b { opacity: 1; transform: translate3d(0,0,45px) rotate(2deg); }
.btl-canvas[data-btl-step="2"] .btl-stage-card-c,
.btl-canvas[data-btl-step="3"] .btl-stage-card-c { opacity: 1; transform: translate3d(0,0,70px) rotate(3deg); }
.btl-canvas[data-btl-step="3"] .btl-stage-card-d { opacity: 1; transform: translate3d(0,0,95px) rotate(-2deg); }
.btl-canvas[data-btl-step="1"] .btl-stage-card-a,
.btl-canvas[data-btl-step="2"] .btl-stage-card-a,
.btl-canvas[data-btl-step="2"] .btl-stage-card-b,
.btl-canvas[data-btl-step="3"] .btl-stage-card-a,
.btl-canvas[data-btl-step="3"] .btl-stage-card-b,
.btl-canvas[data-btl-step="3"] .btl-stage-card-c { filter: brightness(.68) saturate(.7); }

.btl-stage-orbit { position: absolute; border: 1px solid rgba(107,206,243,.23); border-radius: 50%; pointer-events: none; }
.btl-stage-orbit-a { right: -12vw; top: 12%; width: 48vw; height: 48vw; }
.btl-stage-orbit-b { left: 18%; bottom: -38vw; width: 58vw; height: 58vw; }

.btl-narratives {
  position: absolute;
  z-index: 7;
  left: max(5vw,28px);
  bottom: 78px;
  width: min(34vw,430px);
  min-height: 178px;
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px 52px 22px 22px;
  background: rgba(4,16,47,.78);
  box-shadow: 0 20px 55px rgba(2,10,32,.34);
  backdrop-filter: blur(16px);
}
.btl-narratives article { position: absolute; inset: 22px 24px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .38s ease, transform .55s var(--ease-premium); }
.btl-narratives article.is-active { opacity: 1; transform: none; pointer-events: auto; }
.btl-narratives span { color: var(--sky); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.btl-narratives h3 { margin: 10px 0 8px; font-size: clamp(1.45rem,2.1vw,2.4rem); line-height: .98; letter-spacing: -.04em; }
.btl-narratives p { margin: 0; color: #c8d6e9; font-size: .82rem; line-height: 1.5; }
.btl-canvas-footer { color: white; }

.scanmark-flow {
  z-index: 4;
  min-height: 205svh;
  overflow: clip;
  color: white;
  background:
    radial-gradient(circle at 24% 48%, rgba(0,129,202,.3), transparent 30%),
    linear-gradient(145deg, #030d29, #071b4d 58%, #0a3777);
}

.scanmark-flow-pattern { inset: 0; color: white; opacity: .035; }
.scanmark-flow-shell { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: clamp(94px,10.5vh,112px) max(5vw,28px) 26px; }
.scanmark-flow-heading { position: relative; z-index: 8; width: min(650px,50vw); }
.scanmark-flow-heading h2 { margin: 8px 0 9px; font-size: clamp(2.9rem,4.75vw,5.25rem); line-height: .89; letter-spacing: -.06em; }
.scanmark-flow-heading > p:last-child { max-width: 570px; margin: 0; color: #bfd0e7; font-size: .9rem; line-height: 1.55; }

.scanmark-flow-scene { position: absolute; z-index: 2; inset: 0; }
.scan-flow-field,
.scan-flow-proof,
.scan-flow-dashboard { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); background: #0a2b68; box-shadow: 0 24px 65px rgba(2,10,32,.36); transition: opacity .55s ease, transform .8s var(--ease-premium), width .75s var(--ease-premium), filter .5s ease; }
.scan-flow-field img,
.scan-flow-proof img,
.scan-flow-dashboard img { width: 100%; height: 100%; object-fit: cover; }
.scan-flow-field figcaption,
.scan-flow-proof figcaption,
.scan-flow-dashboard figcaption { position: absolute; z-index: 3; right: 16px; bottom: 14px; left: 16px; color: white; font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.scan-flow-field::after,
.scan-flow-proof::after,
.scan-flow-dashboard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(2,12,38,.82)); }

.scan-flow-field { left: 5%; top: 37%; width: 54%; height: 50%; border-radius: 30px 140px 30px 30px; }
.scan-flow-proof { left: 35%; top: 40%; width: 24%; height: 27%; border-radius: 20px 64px 20px 20px; opacity: 0; transform: translate3d(0,65px,30px) scale(.85); }
.scan-flow-dashboard { right: 4%; top: 30%; width: 39%; height: 48%; border-radius: 120px 26px 26px 26px; opacity: 0; transform: translate3d(18vw,0,-50px) scale(.86); }
.scan-flow-phone { position: absolute; z-index: 6; left: 47%; top: 26%; width: clamp(145px,15vw,235px); height: 59%; object-fit: contain; filter: drop-shadow(0 24px 38px rgba(2,10,32,.46)); opacity: .15; transform: translate3d(13vw,12vh,0) rotate(7deg) scale(.86); transition: opacity .5s ease, transform .85s var(--ease-premium); }
.scan-flow-line { position: absolute; z-index: 5; top: 57%; height: 2px; background: linear-gradient(90deg, transparent, var(--sky), transparent); opacity: 0; transform: scaleX(0); transition: opacity .4s ease, transform .8s var(--ease-premium); }
.scan-flow-line-a { left: 31%; width: 25%; transform-origin: right; }
.scan-flow-line-b { left: 54%; width: 28%; transform-origin: left; }
.scan-flow-pulse { position: absolute; z-index: 7; left: 51%; top: 56%; width: 13px; height: 13px; border-radius: 50%; background: white; box-shadow: 0 0 22px 9px var(--sky); opacity: 0; }

.scanmark-flow[data-scanmark-step="1"] .scan-flow-field,
.scanmark-flow[data-scanmark-step="2"] .scan-flow-field,
.scanmark-flow[data-scanmark-step="3"] .scan-flow-field { width: 31%; filter: brightness(.6) saturate(.65); transform: translateX(-2vw) scale(.92); }
.scanmark-flow[data-scanmark-step="1"] .scan-flow-phone,
.scanmark-flow[data-scanmark-step="2"] .scan-flow-phone,
.scanmark-flow[data-scanmark-step="3"] .scan-flow-phone { opacity: 1; transform: translate3d(-4vw,0,80px) rotate(0) scale(1); }
.scanmark-flow[data-scanmark-step="1"] .scan-flow-proof,
.scanmark-flow[data-scanmark-step="2"] .scan-flow-proof,
.scanmark-flow[data-scanmark-step="3"] .scan-flow-proof { opacity: 1; transform: translate3d(-4vw,0,30px) scale(1); }
.scanmark-flow[data-scanmark-step="2"] .scan-flow-line,
.scanmark-flow[data-scanmark-step="3"] .scan-flow-line { opacity: 1; transform: scaleX(1); }
.scanmark-flow[data-scanmark-step="2"] .scan-flow-pulse { opacity: 1; animation: scanFlowPulse 1.8s ease-in-out infinite; }
.scanmark-flow[data-scanmark-step="2"] .scan-flow-dashboard { opacity: .55; transform: translate3d(0,0,0) scale(.94); }
.scanmark-flow[data-scanmark-step="3"] .scan-flow-dashboard { z-index: 7; opacity: 1; transform: translate3d(0,0,90px) scale(1); }
.scanmark-flow[data-scanmark-step="3"] .scan-flow-phone { opacity: .46; transform: translate3d(-11vw,4vh,0) scale(.82); }
.scanmark-flow[data-scanmark-step="3"] .scan-flow-proof { opacity: .38; transform: translate3d(-8vw,2vh,0) scale(.82); }

@keyframes scanFlowPulse {
  0%,100% { transform: translateX(-10vw) scale(.75); opacity: 0; }
  18%,82% { opacity: 1; }
  50% { transform: translateX(12vw) scale(1); }
}

.scanmark-narratives {
  position: absolute;
  z-index: 9;
  right: max(5vw,28px);
  bottom: 82px;
  width: min(36vw,460px);
  min-height: 104px;
  padding: 18px 21px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px 44px 18px 18px;
  background: rgba(3,13,41,.78);
  backdrop-filter: blur(15px);
}
.scanmark-narratives article { position: absolute; inset: 18px 21px; opacity: 0; transform: translateY(15px); transition: opacity .35s ease, transform .5s var(--ease-premium); }
.scanmark-narratives article.is-active { opacity: 1; transform: none; }
.scanmark-narratives span { display: block; margin-bottom: 6px; color: var(--sky); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.scanmark-narratives strong { display: block; color: white; font-size: 1.05rem; line-height: 1.35; }
.scanmark-flow-footer { color: white; }

.execution-rhythm-services {
  z-index: 5;
  min-height: 130svh !important;
  padding: 0 max(5vw,28px) !important;
  overflow: clip;
  background: linear-gradient(150deg,#dff4fb,#f7fbfd) !important;
}
.execution-rhythm-services .execution-rhythm-shell { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 92px 0 38px; }
.execution-rhythm-services .execution-rhythm-shell > .eyebrow { width: auto; margin: 0 auto 12px; font-family: var(--sans); font-size: .7rem; line-height: 1.2; }
.execution-rhythm-services h2 { max-width: 940px; margin: 0 auto; color: var(--navy); font-size: clamp(2.8rem,5vw,5.4rem); line-height: .9; letter-spacing: -.055em; text-align: center; }
.execution-rhythm-services h2 em { color: var(--steel); font-family: var(--serif); }
.execution-rhythm-services .execution-rhythm-lead { width: auto; max-width: 650px; margin: 18px auto 28px; color: var(--muted); font-family: var(--sans); font-size: .92rem; font-weight: 500; line-height: 1.55; text-align: center; }
.execution-rhythm-services .execution-wave-map { width: 100%; flex: 0 0 190px; margin: 0 auto; }

.services-closing-visual {
  z-index: 6;
  min-height: 76svh;
  margin-top: -24px;
  padding: clamp(85px,10vw,135px) max(5vw,28px) clamp(65px,8vw,95px);
  overflow: hidden;
  background: #06163d;
}
.services-closing-visual::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3,13,40,.96) 0%, rgba(3,13,40,.82) 45%, rgba(3,13,40,.25) 100%); }
.services-closing-visual > figure { position: absolute; z-index: -2; inset: 0; margin: 0; }
.services-closing-visual > figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78); }
.services-closing-visual > div:first-of-type { position: relative; z-index: 2; max-width: 830px; }
.services-closing-visual .services-closing-actions { position: relative; z-index: 2; }

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .services-portal { position: sticky; top: 0; height: 100svh; }
}

@media (max-width: 1050px) {
  .services-portal-intro { width: 82vw; }
  .services-portal-worlds { height: 42vh; }
  .retail-journey-heading { grid-template-columns: 1fr 340px; }
  .retail-aisle { left: 35%; }
  .btl-narratives { width: 38vw; }
}

@media (max-width: 800px) {
  .services-portal,
  .retail-journey,
  .btl-canvas,
  .scanmark-flow,
  .execution-rhythm-services,
  .services-closing-visual { margin-top: -16px; border-radius: 26px 26px 0 0; }

  .services-portal { min-height: 100svh; padding: 104px 18px 34px; }
  .services-portal-intro { position: relative; top: auto; left: auto; width: 100%; }
  .services-portal-intro h1 { font-size: clamp(2.8rem,12vw,4.2rem); line-height: .91; }
  .services-portal-intro > p:last-child { font-size: .88rem; }
  .services-portal-worlds { position: relative; right: auto; bottom: auto; left: auto; height: 330px; margin-top: 25px; display: flex; overflow-x: auto; gap: 12px; padding: 6px 22px 13px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .services-portal-worlds::-webkit-scrollbar { display: none; }
  .services-portal-world { min-width: 80vw; height: 300px; flex: 0 0 80vw; scroll-snap-align: start; transform: none !important; }
  .services-portal-world > div p { opacity: 1; transform: none; }
  .services-portal-cue { display: none; }

  .retail-journey,
  .btl-canvas,
  .scanmark-flow,
  .execution-rhythm-services { min-height: auto !important; }
  .retail-journey-shell,
  .btl-canvas-shell,
  .scanmark-flow-shell,
  .execution-rhythm-services .execution-rhythm-shell { position: relative; top: auto; height: auto; min-height: auto; overflow: visible; padding: 92px 18px 52px; }

  .retail-journey-heading { display: block; }
  .retail-journey-heading h2,
  .btl-canvas-heading h2,
  .scanmark-flow-heading h2,
  .execution-rhythm-services h2 { font-size: clamp(2.7rem,12vw,4rem); }
  .retail-journey-heading > p { margin-top: 16px; }
  .retail-ghost { top: 9%; font-size: 34vw; }
  .retail-aisle { position: relative; top: auto; right: auto; bottom: auto; left: auto; height: 390px; margin-top: 26px; display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .retail-aisle::-webkit-scrollbar { display: none; }
  .retail-aisle-frame { min-width: 79vw; flex: 0 0 79vw; scroll-snap-align: start; border-radius: 20px !important; }
  .retail-narratives { position: relative; left: auto; top: auto; width: 100%; margin-top: 25px; display: grid; gap: 12px; }
  .retail-narratives article { position: relative; inset: auto; padding: 18px 0; border-bottom: 1px solid var(--line); opacity: 1; transform: none; }
  .retail-narratives article:not(.is-active) p { display: none; }
  .retail-journey-footer,
  .btl-canvas-footer,
  .scanmark-flow-footer { position: relative; right: auto; bottom: auto; left: auto; margin-top: 28px; gap: 18px; align-items: flex-end; }
  .retail-journey-footer .button,
  .btl-canvas-footer .button,
  .scanmark-flow-footer .button { width: min(100%,320px); }

  .btl-canvas-shell { overflow: hidden; color: white; }
  .btl-stage { position: relative; inset: auto; height: 530px; margin: 25px 0 0; }
  .btl-stage-card { opacity: 1 !important; filter: none !important; transform: none !important; border-width: 3px; }
  .btl-stage-card-a { left: 0; top: 35px; width: 68%; height: 235px; transform: rotate(-2deg) !important; }
  .btl-stage-card-b { right: 0; left: auto; top: 0; width: 45%; height: 170px; transform: rotate(3deg) !important; }
  .btl-stage-card-c { right: 0; top: 195px; width: 58%; height: 220px; transform: rotate(2deg) !important; }
  .btl-stage-card-d { left: 4%; bottom: 10px; width: 57%; height: 190px; transform: rotate(-3deg) !important; }
  .btl-narratives { position: relative; left: auto; bottom: auto; width: 100%; min-height: 210px; margin-top: -60px; }
  .btl-narratives article:not(.is-active) { display: none; }
  .btl-canvas-footer { color: white; }
  .scanmark-flow-scene { position: relative; inset: auto; height: 590px; margin-top: 24px; }
  .scan-flow-field { left: 0 !important; top: 15px; width: 72% !important; height: 270px; transform: none !important; border-radius: 24px 90px 24px 24px; }
  .scan-flow-proof { left: 4% !important; top: 310px; width: 53%; height: 185px; opacity: 1; transform: rotate(-3deg) !important; }
  .scan-flow-phone { left: 47%; top: 140px; width: 142px; height: 345px; opacity: 1 !important; transform: none !important; }
  .scan-flow-dashboard { right: 0; top: 365px; width: 63%; height: 205px; opacity: 1; transform: rotate(2deg) !important; border-radius: 70px 18px 18px 18px; }
  .scan-flow-line,
  .scan-flow-pulse { display: none; }
  .scanmark-narratives { position: relative; right: auto; bottom: auto; width: 100%; min-height: 112px; margin-top: 10px; }
  .scanmark-narratives article:not(.is-active) { display: none; }

  .execution-rhythm-services .execution-rhythm-shell { padding-bottom: 64px; }
  .execution-rhythm-services .execution-rhythm-lead { margin-bottom: 12px; }
  .execution-rhythm-services .execution-wave-map { height: 330px; flex-basis: 330px; }
  .execution-rhythm-services .execution-wave-map svg { transform: rotate(90deg) scale(.38,1.9); }
  .execution-rhythm-services .execution-wave-map .execution-steps { grid-template-columns: 1fr; grid-template-rows: repeat(4,1fr); }
  .execution-rhythm-services .execution-wave-map .execution-steps div { padding-top: 0; text-align: left; padding-left: 53%; }
  .execution-rhythm-services .execution-wave-map .execution-steps div::before { top: 50%; left: 43%; }

  .services-closing-visual { min-height: 82svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 95px 20px 65px; }
  .services-closing-visual::after { background: linear-gradient(180deg, rgba(3,13,40,.12), rgba(3,13,40,.96) 62%); }
  .services-closing-visual > figure img { object-position: 59% center; }
  .services-closing-visual h2 { font-size: clamp(2.6rem,12vw,4rem); }
  .services-closing-visual .services-closing-actions { align-items: flex-start; }
}

@media (max-width: 480px) {
  .services-portal-world { min-width: 84vw; flex-basis: 84vw; }
  .retail-aisle-frame { min-width: 82vw; flex-basis: 82vw; }
  .retail-journey-footer,
  .btl-canvas-footer,
  .scanmark-flow-footer { flex-direction: column; align-items: flex-start; }
  .services-closing-visual .services-closing-actions { display: grid; gap: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-portal-world,
  .services-portal-world img,
  .retail-aisle,
  .retail-aisle-frame img,
  .btl-stage-card,
  .scan-flow-field,
  .scan-flow-proof,
  .scan-flow-dashboard,
  .scan-flow-phone { transition: none !important; }
  .scan-flow-pulse { animation: none !important; }
}

/* ================================================================
   Services v76 — concise commercial depth and persistent CTAs.
   ================================================================ */

.service-summary { align-self: end; }
.service-summary p { margin: 0; font-size: .86rem; line-height: 1.52; }
.service-summary ul,
.service-summary-pills { margin: 13px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; }
.service-summary li,
.service-summary-pills li { padding: 6px 9px; border-radius: 999px; font-size: .62rem; font-weight: 820; line-height: 1.15; }
.service-summary-light p { color: var(--muted); }
.service-summary-light li { color: var(--navy); border: 1px solid rgba(22,51,125,.13); background: rgba(255,255,255,.72); }
.service-summary-dark p { color: #c7d5e9; }
.service-summary-dark li { color: #dce8f5; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); }

.btl-canvas-heading {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
  gap: clamp(38px,5vw,76px);
  align-items: end;
}
.btl-canvas-heading h2 { max-width: 820px; }
.btl-canvas .service-summary-dark { padding-bottom: 7px; transition: opacity .35s ease, transform .5s var(--ease-premium); }
.btl-canvas[data-btl-step="1"] .service-summary-dark,
.btl-canvas[data-btl-step="2"] .service-summary-dark,
.btl-canvas[data-btl-step="3"] .service-summary-dark { opacity: 0; transform: translateY(-16px); pointer-events: none; }

.scanmark-flow-heading { width: min(690px,54vw); }
.scanmark-flow-heading > p:not(.eyebrow) { max-width: 650px; margin: 0; color: #bfd0e7; font-size: .84rem; line-height: 1.48; }
.service-summary-pills li { color: #dce8f5; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.scan-flow-field { top: 50%; height: 37%; }
.scan-flow-dashboard { top: 35%; height: 45%; }

.service-scene-cta { display: flex; gap: 16px; align-items: center; justify-content: flex-end; }
.service-scene-cta small { max-width: 210px; color: var(--muted); font-size: .68rem; font-weight: 650; line-height: 1.35; text-align: right; }
.btl-canvas .service-scene-cta small,
.scanmark-flow .service-scene-cta small { color: #b8c9df; }
.service-scene-cta .button { flex: 0 0 auto; box-shadow: 0 15px 34px rgba(4,20,57,.2); }
.btl-canvas .service-scene-cta .button,
.scanmark-flow .service-scene-cta .button { box-shadow: 0 16px 38px rgba(2,10,32,.36), 0 0 0 1px rgba(255,255,255,.08); }

@media (max-width: 1050px) and (min-width: 801px) {
  .service-summary p { font-size: .78rem; }
  .service-summary li { font-size: .57rem; }
  .btl-canvas-heading { grid-template-columns: minmax(0,1.25fr) minmax(290px,.75fr); gap: 30px; }
  .service-scene-cta small { display: none; }
}

@media (max-width: 800px) {
  .service-summary { margin-top: 17px; }
  .service-summary p { font-size: .88rem; }
  .service-summary ul { margin-top: 12px; }
  .btl-canvas-heading { display: block; }
  .btl-canvas .service-summary-dark { opacity: 1 !important; transform: none !important; }
  .scanmark-flow-heading { width: 100%; }
  .scanmark-flow-heading > p:not(.eyebrow) { font-size: .88rem; }
  .service-summary-pills { gap: 6px; }
  .service-scene-cta { width: 100%; gap: 9px; flex-direction: column; align-items: flex-end; }
  .service-scene-cta small { max-width: 250px; text-align: right; }
  .retail-journey-footer,
  .btl-canvas-footer,
  .scanmark-flow-footer { align-items: flex-start; }
  .scan-flow-field { top: 15px; height: 270px; }
  .scan-flow-dashboard { top: 365px; height: 205px; }
}

@media (max-width: 480px) {
  .service-scene-cta { align-items: flex-start; }
  .service-scene-cta small { text-align: left; }
.service-scene-cta .button { width: 100%; justify-content: center; }
}

/* ================================================================
   Portafolio v77 — museum entrance and terminal infinite gallery.
   Readymag-inspired editorial wall, adapted to WaveMark's language.
   ================================================================ */

html:has(.portfolio-museum-hero),
body:has(.portfolio-museum-hero) {
  background: #061435;
  overscroll-behavior-y: none;
}

body:has(.portfolio-museum-hero) .page-atmosphere-internal { opacity: .12; }
body:has(.portfolio-museum-hero).has-mobile-cta { padding-bottom: 0; }
body:has(.portfolio-museum-hero) .site-header .nav-shell {
  color: var(--navy);
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(247,251,253,.9);
  box-shadow: 0 16px 42px rgba(4,20,57,.18);
  backdrop-filter: blur(18px);
}
body:has(.portfolio-museum-hero) .site-header .brand img { filter: none; }
body:has(.portfolio-museum-hero) .site-header .main-nav > a:not(.nav-cta) { color: var(--navy); }
body:has(.portfolio-museum-hero) .site-header .main-nav > a[aria-current="page"] { background: rgba(107,206,243,.18); }

.portfolio-museum-hero {
  --portfolio-hero-progress: 0;
  --portfolio-pointer-x: 0px;
  --portfolio-pointer-y: 0px;
  position: relative;
  z-index: 2;
  min-height: 100svh;
  color: var(--navy);
  background: #f4f7f8;
  overflow: hidden;
  isolation: isolate;
}

.portfolio-museum-collage {
  position: relative;
  height: 59svh;
  min-height: 420px;
  overflow: hidden;
  border-bottom: 8px solid #f4f7f8;
  background: #dce8ee;
}

.portfolio-museum-collage::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,15,45,.08), transparent 55%, rgba(4,15,45,.16));
  pointer-events: none;
}

.portfolio-museum-strip {
  position: absolute;
  left: -8vw;
  width: max-content;
  display: flex;
  gap: 8px;
  will-change: transform;
}

.portfolio-museum-strip-a {
  top: 0;
  height: calc(31svh - 4px);
  transform: translate3d(calc(var(--portfolio-pointer-x) * .16 + var(--portfolio-hero-progress) * -88px), calc(var(--portfolio-pointer-y) * .1 + var(--portfolio-hero-progress) * -9px), 0);
}

.portfolio-museum-strip-b {
  top: 31svh;
  height: calc(28svh - 4px);
  transform: translate3d(calc(-7vw + var(--portfolio-pointer-x) * -.13 + var(--portfolio-hero-progress) * 104px), calc(var(--portfolio-pointer-y) * -.08 + var(--portfolio-hero-progress) * -5px), 0);
}

.museum-frame {
  width: clamp(260px,27vw,470px);
  height: 100%;
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  background: #dce7ec;
}
.museum-frame-wide { width: clamp(390px,40vw,680px); }
.museum-frame-portrait { width: clamp(210px,21vw,350px); }
.museum-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(.98);
  transform: scale(calc(1.035 + var(--portfolio-hero-progress) * .025));
}

.portfolio-museum-index {
  position: absolute;
  z-index: 5;
  right: max(2.3vw,22px);
  bottom: 18px;
  left: max(2.3vw,22px);
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-shadow: 0 2px 15px rgba(2,12,38,.55);
}

.portfolio-museum-title-plane {
  min-height: 41svh;
  padding: clamp(34px,4.5vh,52px) max(5vw,32px) clamp(34px,4.5vh,52px);
  display: grid;
  grid-template-columns: minmax(0,1.28fr) minmax(310px,.58fr);
  gap: clamp(42px,6vw,100px);
  align-items: center;
  background:
    radial-gradient(circle at 82% 20%, rgba(107,206,243,.19), transparent 27%),
    #f4f7f8;
}

.portfolio-museum-copy h1 {
  max-width: 930px;
  margin: 8px 0 0;
  font-size: clamp(4.3rem,7.4vw,8.2rem);
  line-height: .82;
  letter-spacing: -.075em;
}
.portfolio-museum-copy h1 em {
  display: block;
  color: var(--steel);
  font-family: var(--serif);
  font-weight: 650;
}
.portfolio-museum-copy .eyebrow { margin-bottom: 14px; }
.portfolio-museum-intro { padding-top: 34px; border-top: 1px solid rgba(22,51,125,.19); }
.portfolio-museum-intro > p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.72; }
.portfolio-museum-intro .portfolio-hero-actions { margin-top: 23px; }
.portfolio-museum-intro .text-link { color: var(--navy); }
.portfolio-museum-cue {
  position: absolute;
  z-index: 6;
  right: 18px;
  top: calc(59svh + 24px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--steel);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.portfolio-museum-cue i { font-style: normal; animation: portfolioMuseumCue 1.8s ease-in-out infinite; }

.portfolio-museum-hero + .portfolio-intro {
  margin-top: 0;
  padding-top: 92px;
  border-radius: 0;
  box-shadow: none;
}

body:has(.portfolio-museum-hero) main { overflow: clip; }
body:has(.portfolio-museum-hero) .case-studies[data-case-stories] { padding-bottom: 92px; }

body:has(.portfolio-museum-hero) .portfolio-loop {
  position: relative;
  z-index: 8;
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 620px;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #061435;
  box-shadow: none;
}

body:has(.portfolio-museum-hero) .portfolio-loop-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  touch-action: none;
}

body:has(.portfolio-museum-hero) .portfolio-field {
  display: block;
  background:
    radial-gradient(circle at 52% 45%, rgba(0,129,202,.2), transparent 38%),
    linear-gradient(145deg,#040e2a,#071943 58%,#08285c);
}

body:has(.portfolio-museum-hero) .portfolio-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(3,12,35,.82), transparent 31%),
    linear-gradient(0deg, rgba(3,12,35,.5), transparent 24%);
  pointer-events: none;
}

body:has(.portfolio-museum-hero) .portfolio-field-tile {
  border: 7px solid rgba(244,247,248,.94);
  border-radius: 4px;
  background: #f4f7f8;
  box-shadow: 0 25px 65px rgba(0,0,0,.38);
}
body:has(.portfolio-museum-hero) .portfolio-field-tile span {
  right: 8px;
  bottom: 8px;
  left: 8px;
  padding: 8px 9px;
  background: rgba(4,15,45,.72);
  backdrop-filter: blur(7px);
}

body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar {
  position: absolute;
  z-index: 15;
  top: 100px;
  right: max(3.2vw,24px);
  left: max(3.2vw,24px);
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 34px;
  align-items: end;
  color: white;
  pointer-events: none;
  transition: opacity .32s ease, transform .5s var(--ease-premium);
}
body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar h2 {
  max-width: 730px;
  margin: 0;
  font-size: clamp(2.45rem,4.5vw,5.2rem);
  line-height: .87;
  letter-spacing: -.06em;
  text-shadow: 0 4px 25px rgba(2,12,38,.38);
}
body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar h2 em { color: var(--sky); font-family: var(--serif); }
body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .eyebrow { margin-bottom: 12px; }
body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .filter-bar {
  max-width: 100%;
  padding: 6px;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(4,15,45,.66);
  box-shadow: 0 18px 45px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .filter-button {
  padding: 10px 15px;
  color: #c5d3e5;
  border: 0;
  background: transparent;
}
body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .filter-button.is-active {
  color: var(--navy);
  background: var(--sky);
}

body:has(.portfolio-museum-hero) .portfolio-gallery-exit {
  position: absolute;
  z-index: 17;
  left: max(3.2vw,24px);
  bottom: 24px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: white;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: rgba(4,15,45,.65);
  backdrop-filter: blur(16px);
  font-size: .68rem;
  font-weight: 850;
  transition: color .2s ease, background .2s ease, transform .25s ease;
}
body:has(.portfolio-museum-hero) .portfolio-gallery-exit:hover { color: var(--navy); background: var(--sky); transform: translateY(-3px); }
body:has(.portfolio-museum-hero) .portfolio-loop-topline { top: auto; right: 50%; bottom: 31px; left: auto; transform: translateX(50%); gap: 12px; }
body:has(.portfolio-museum-hero) .portfolio-loop-hint { bottom: 71px; left: max(3.2vw,24px); }
body:has(.portfolio-museum-hero) .portfolio-loop-controls { right: max(3.2vw,24px); bottom: 24px; }
body:has(.portfolio-museum-hero).portfolio-gallery-active .portfolio-gallery-exit,
body:has(.portfolio-museum-hero).portfolio-gallery-active .portfolio-loop-controls { position: fixed; }
body:has(.portfolio-museum-hero) .portfolio-loop.is-field-focus .portfolio-gallery-toolbar { opacity: 0; transform: translateY(-18px); pointer-events: none; }
body:has(.portfolio-museum-hero) .portfolio-loop.is-field-focus .portfolio-loop-track { background: #061435; }
body:has(.portfolio-museum-hero).portfolio-gallery-active .mobile-quick-cta { opacity: 0 !important; pointer-events: none !important; }

@keyframes portfolioMuseumCue { 50% { transform: translateY(7px); } }

@media (max-width: 1050px) {
  .portfolio-museum-title-plane { grid-template-columns: minmax(0,1.12fr) minmax(280px,.68fr); gap: 38px; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar { grid-template-columns: 1fr; align-items: start; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .filter-bar { width: fit-content; }
}

@media (max-width: 800px) {
  body:has(.portfolio-museum-hero) .site-header .nav-shell { background: rgba(247,251,253,.93); }
  .portfolio-museum-hero { min-height: 100svh; }
  .portfolio-museum-collage { height: 47svh; min-height: 360px; }
  .portfolio-museum-strip { gap: 6px; }
  .portfolio-museum-strip-a { left: -36vw; height: calc(25svh - 3px); }
  .portfolio-museum-strip-b { top: 25svh; left: -63vw; height: calc(22svh - 3px); }
  .museum-frame { width: 58vw; }
  .museum-frame-wide { width: 82vw; }
  .museum-frame-portrait { width: 46vw; }
  .portfolio-museum-index { right: 18px; bottom: 13px; left: 18px; font-size: .52rem; }
  .portfolio-museum-index span:last-child { display: none; }
  .portfolio-museum-title-plane {
    min-height: 53svh;
    padding: 28px 18px 42px;
    display: block;
  }
  .portfolio-museum-copy h1 { font-size: clamp(3.8rem,16.6vw,6rem); line-height: .84; }
  .portfolio-museum-intro { margin-top: 25px; padding-top: 20px; }
  .portfolio-museum-intro > p { font-size: .88rem; }
  .portfolio-museum-intro .portfolio-hero-actions { margin-top: 18px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .portfolio-museum-cue { display: none; }
  .portfolio-museum-hero + .portfolio-intro { padding-top: 76px; }

  body:has(.portfolio-museum-hero) .portfolio-loop { height: 100svh; min-height: 580px; margin: 0; padding: 0; border-radius: 0; }
  body:has(.portfolio-museum-hero) .portfolio-loop-viewport { min-height: 0; border-radius: 0; touch-action: none; }
  body:has(.portfolio-museum-hero) .portfolio-field { display: block; }
  body:has(.portfolio-museum-hero) .portfolio-loop-track { opacity: 0; pointer-events: none; }
  body:has(.portfolio-museum-hero) .portfolio-loop.is-field-focus .portfolio-loop-track { opacity: 1; pointer-events: auto; }
  body:has(.portfolio-museum-hero) .portfolio-loop-minimap { display: none; }
  body:has(.portfolio-museum-hero) .portfolio-loop:not(.is-field-focus) [data-loop-prev],
  body:has(.portfolio-museum-hero) .portfolio-loop:not(.is-field-focus) [data-loop-next] { display: none; }
  body:has(.portfolio-museum-hero) .portfolio-field-close { display: none !important; }
  body:has(.portfolio-museum-hero) .portfolio-loop.is-field-focus .portfolio-field-close { display: grid !important; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar { top: 92px; right: 18px; left: 18px; gap: 17px; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar h2 { max-width: 360px; font-size: clamp(2.35rem,11vw,3.6rem); }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .filter-bar { width: 100%; overflow-x: auto; scrollbar-width: none; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .filter-bar::-webkit-scrollbar { display: none; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .filter-button { flex: 0 0 auto; padding: 9px 13px; }
  body:has(.portfolio-museum-hero) .portfolio-field-tile { width: 62vw; height: 43vw; border-width: 5px; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-exit { left: 18px; bottom: 18px; }
  body:has(.portfolio-museum-hero) .portfolio-loop-controls { right: 18px; bottom: 18px; }
  body:has(.portfolio-museum-hero) .portfolio-loop-topline { display: none; }
  body:has(.portfolio-museum-hero) .portfolio-loop-hint { bottom: 67px; left: 18px; max-width: 240px; }
  body:has(.portfolio-museum-hero) .loop-project-copy { right: 22px; bottom: 105px; left: 22px; }
  body:has(.portfolio-museum-hero) .loop-project-copy h2 { font-size: clamp(2.4rem,11vw,4rem); }
}

@media (max-width: 480px) {
  .portfolio-museum-collage { min-height: 330px; }
  .portfolio-museum-copy h1 { font-size: clamp(3.55rem,16vw,5rem); }
  .portfolio-museum-intro .button { width: auto; }
  .portfolio-museum-intro .text-link { font-size: .76rem; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar .eyebrow { margin-bottom: 8px; }
  body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar h2 { font-size: clamp(2.05rem,10.5vw,3rem); }
  body:has(.portfolio-museum-hero) .portfolio-loop-hint { font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-museum-strip,
  .museum-frame img { transform: none !important; }
  .portfolio-museum-cue i { animation: none; }
}

/* Portafolio v78 — autonomous mosaic and spacious infinite field. */
.portfolio-museum-strip-a {
  animation: portfolioMuseumDriftA 5.8s linear infinite alternate;
}

.portfolio-museum-strip-b {
  animation: portfolioMuseumDriftB 6.8s linear -2s infinite alternate;
}

.museum-frame img {
  animation: portfolioMuseumBreath 13s ease-in-out infinite alternate;
}
.museum-frame:nth-child(2n) img { animation-duration: 16s; animation-delay: -5s; }
.museum-frame:nth-child(3n) img { animation-duration: 19s; animation-delay: -9s; }

body:has(.portfolio-museum-hero) .portfolio-field-tile {
  transition: filter .3s ease, opacity .3s ease, box-shadow .3s ease;
}

body:has(.portfolio-museum-hero) .portfolio-field-tile span {
  display: none;
}

body:has(.portfolio-museum-hero) .portfolio-loop.is-field-focus .portfolio-gallery-exit {
  opacity: 1;
  color: white;
  background: rgba(4,15,45,.72);
  pointer-events: auto;
}

@keyframes portfolioMuseumDriftA {
  from { translate: 0 0; }
  to { translate: -190px 0; }
}

@keyframes portfolioMuseumDriftB {
  from { translate: -120px 0; }
  to { translate: 120px 0; }
}

@keyframes portfolioMuseumBreath {
  from { scale: 1.015; }
  to { scale: 1.075; }
}

@media (max-width: 800px) {
  .portfolio-museum-strip-a { animation-duration: 5.2s; }
  .portfolio-museum-strip-b { animation-duration: 6.2s; }
  @keyframes portfolioMuseumDriftA {
    from { translate: 0 0; }
    to { translate: -110px 0; }
  }
  @keyframes portfolioMuseumDriftB {
    from { translate: -76px 0; }
    to { translate: 82px 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-museum-strip,
  .museum-frame img { animation: none !important; scale: 1; translate: none; }
}

/* Portafolio v79 — continuous WaveMark current and frameless gallery. */
body:has(.portfolio-museum-hero) .page-atmosphere-internal {
  opacity: .22;
}

.portfolio-museum-title-plane,
.portfolio-museum-hero + .portfolio-intro,
body:has(.portfolio-museum-hero) .case-studies[data-case-stories] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.portfolio-museum-title-plane {
  background:
    radial-gradient(ellipse at 86% 8%, rgba(107,206,243,.25), transparent 32%),
    radial-gradient(ellipse at 3% 92%, rgba(0,129,202,.1), transparent 37%),
    linear-gradient(148deg,#f5f9fb 0%,#eef8fc 48%,#f7fbfd 100%);
}

.portfolio-museum-title-plane::after,
.portfolio-museum-hero + .portfolio-intro::after,
body:has(.portfolio-museum-hero) .case-studies[data-case-stories]::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 135%;
  height: clamp(150px,20vw,310px);
  left: -18%;
  border: 1px solid rgba(0,129,202,.16);
  border-radius: 50%;
  box-shadow:
    0 -22px 65px rgba(107,206,243,.1),
    inset 0 22px 70px rgba(0,129,202,.045);
  pointer-events: none;
  animation: portfolioWaveGlide 13s ease-in-out infinite alternate;
}

.portfolio-museum-title-plane::after { bottom: -51%; transform: rotate(-4deg); }

.portfolio-museum-hero + .portfolio-intro {
  background:
    radial-gradient(ellipse at 8% 36%, rgba(107,206,243,.21), transparent 34%),
    radial-gradient(ellipse at 90% 72%, rgba(0,129,202,.1), transparent 32%),
    linear-gradient(154deg,#f7fbfd,#edf7fb 58%,#f8fbfc);
}
.portfolio-museum-hero + .portfolio-intro::after {
  top: 34%;
  transform: rotate(5deg);
  animation-delay: -4s;
}
.portfolio-museum-hero + .portfolio-intro .section-shell { position: relative; z-index: 1; }

body:has(.portfolio-museum-hero) .case-studies[data-case-stories] {
  background:
    radial-gradient(ellipse at 92% 12%, rgba(107,206,243,.22), transparent 29%),
    radial-gradient(ellipse at 10% 78%, rgba(22,51,125,.08), transparent 35%),
    linear-gradient(165deg,#eaf6fb 0%,#f8fbfd 48%,#edf7fb 100%);
}
body:has(.portfolio-museum-hero) .case-studies[data-case-stories]::after {
  top: 42%;
  left: -14%;
  border-color: rgba(22,51,125,.12);
  transform: rotate(-7deg);
  animation-delay: -8s;
}
body:has(.portfolio-museum-hero) .case-studies-shell { position: relative; z-index: 1; }

body:has(.portfolio-museum-hero) .portfolio-field {
  background:
    radial-gradient(ellipse at 13% 24%, rgba(107,206,243,.24), transparent 31%),
    radial-gradient(ellipse at 88% 76%, rgba(0,129,202,.25), transparent 34%),
    radial-gradient(ellipse at 54% 48%, rgba(22,51,125,.44), transparent 43%),
    linear-gradient(138deg,#020a22 0%,#071b46 46%,#052a61 72%,#03112f 100%);
}

body:has(.portfolio-museum-hero) .portfolio-field::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 145%;
  height: 54%;
  left: -23%;
  top: 35%;
  border: 2px solid rgba(107,206,243,.28);
  border-radius: 50%;
  box-shadow:
    0 0 34px rgba(107,206,243,.17),
    0 -54px 110px rgba(0,129,202,.11),
    inset 0 45px 100px rgba(107,206,243,.055);
  transform: rotate(-7deg);
  pointer-events: none;
  animation: portfolioGalleryWave 9s ease-in-out infinite alternate;
}

body:has(.portfolio-museum-hero) .portfolio-field-tile,
body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 2),
body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 4) {
  z-index: 3;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: 0 22px 58px rgba(0,0,0,.34);
}

body:has(.portfolio-museum-hero) .portfolio-field-tile:hover,
body:has(.portfolio-museum-hero) .portfolio-field-tile:focus-visible {
  z-index: 8;
  box-shadow:
    0 30px 72px rgba(0,0,0,.48),
    0 0 0 1px rgba(107,206,243,.54),
    0 0 34px rgba(107,206,243,.18);
}

@keyframes portfolioWaveGlide {
  from { translate: -2.5% 0; scale: .99; opacity: .58; }
  to { translate: 2.5% -8px; scale: 1.02; opacity: 1; }
}

@keyframes portfolioGalleryWave {
  from { translate: -3% 12px; scale: .98; opacity: .58; }
  to { translate: 3% -12px; scale: 1.025; opacity: 1; }
}

@media (max-width: 800px) {
  body:has(.portfolio-museum-hero) .page-atmosphere-internal { opacity: .16 !important; }
  .portfolio-museum-title-plane::after,
  .portfolio-museum-hero + .portfolio-intro::after,
  body:has(.portfolio-museum-hero) .case-studies[data-case-stories]::after { width: 180%; left: -42%; }
  body:has(.portfolio-museum-hero) .portfolio-field::after { width: 210%; left: -56%; top: 38%; }
  body:has(.portfolio-museum-hero) .portfolio-field-tile { border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-museum-title-plane::after,
  .portfolio-museum-hero + .portfolio-intro::after,
  body:has(.portfolio-museum-hero) .case-studies[data-case-stories]::after,
  body:has(.portfolio-museum-hero) .portfolio-field::after { animation: none; }
}

/* Portafolio v82 — Tympanus-inspired per-image parallax current. */
body:has(.portfolio-museum-hero) .portfolio-field-tile {
  opacity: var(--field-reveal,0);
  will-change: transform,opacity;
  transition:
    opacity .42s ease,
    filter .3s ease,
    box-shadow .3s ease;
}

body:has(.portfolio-museum-hero) .portfolio-field-tile.is-in-view {
  pointer-events: auto;
}

body:has(.portfolio-museum-hero) .portfolio-field::before {
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  body:has(.portfolio-museum-hero) .portfolio-field-tile {
    opacity: 1;
    transition: none;
  }
}

/* Portafolio v85 — restored case choreography and denser gallery. */
body:has(.portfolio-museum-hero) .case-story-media {
  transform: translate3d(0,var(--case-media-shift,0),0);
  transition: transform .28s linear;
  will-change: transform;
}

body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal {
  opacity: .22;
  transform: translate3d(0,48px,0) scale(.975);
  filter: saturate(.72);
  transition:
    opacity .48s ease,
    transform .72s var(--ease-premium),
    filter .55s ease;
}

body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal.is-active {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: saturate(1);
}

body:has(.portfolio-museum-hero) .case-story-media figure img {
  transform: scale(1.075);
  transition: transform 1.15s var(--ease-premium),filter .7s ease;
  filter: saturate(.8) brightness(.82);
}

body:has(.portfolio-museum-hero) .case-story-media figure.is-active img {
  transform: scale(1);
  filter: saturate(1) brightness(1);
}

body:has(.portfolio-museum-hero) .portfolio-field::before {
  background:
    linear-gradient(180deg,rgba(2,9,29,.96) 0%,rgba(2,9,29,.78) 21%,transparent 46%),
    linear-gradient(0deg,rgba(2,9,29,.62),transparent 30%),
    radial-gradient(ellipse at 50% 52%,transparent 34%,rgba(1,8,27,.32) 100%);
}

@media (max-width: 800px) {
  body:has(.portfolio-museum-hero) .case-story-media { transform: none; }
  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal,
  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal.is-active {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.portfolio-museum-hero) .case-story-media { transform: none; transition: none; }
  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal,
  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal.is-active,
  body:has(.portfolio-museum-hero) .case-story-media figure img,
  body:has(.portfolio-museum-hero) .case-story-media figure.is-active img {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Portafolio v87 — pinned cases, multi-current gallery and external escape. */
.portfolio-gallery-exit-global {
  position: fixed !important;
  z-index: 80 !important;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(12px);
}

body:has(.portfolio-museum-hero).portfolio-gallery-active .portfolio-gallery-exit-global {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto !important;
  transform: translateY(0);
}

@media (min-width: 801px) {
  body:has(.portfolio-museum-hero) .case-studies[data-case-stories] {
    height: 330svh;
    min-height: 2100px;
    padding: 0 max(5vw,28px);
    overflow: visible;
  }

  body:has(.portfolio-museum-hero) .case-studies[data-case-stories] .case-studies-shell {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: clamp(92px,12vh,108px) 0 20px;
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
    overflow: hidden;
  }

  body:has(.portfolio-museum-hero) .case-studies-heading {
    margin: 0 0 10px;
  }
  body:has(.portfolio-museum-hero) .case-studies-heading .section-title {
    font-size: clamp(2.6rem,4.4vw,5rem);
    line-height: .9;
  }

  body:has(.portfolio-museum-hero) .case-story-rail {
    position: relative;
    top: auto;
    margin: 0 0 12px auto;
  }

  body:has(.portfolio-museum-hero) .case-story-layout {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  body:has(.portfolio-museum-hero) .case-story-media {
    position: relative;
    top: auto;
    height: 100%;
    min-height: 0;
  }

  body:has(.portfolio-museum-hero) .case-story-steps {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: clamp(14px,2vw,26px) 0;
    opacity: 0;
    transform: translate3d(0,70px,0) scale(.95);
    pointer-events: none;
  }

  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal.is-active {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    pointer-events: auto;
  }

  body:has(.portfolio-museum-hero) .case-study h3,
  body:has(.portfolio-museum-hero) .case-study:not(.case-study-featured) h3 {
    margin: 12px 0 9px;
    font-size: clamp(1.65rem,2.25vw,2.55rem);
  }
  body:has(.portfolio-museum-hero) .case-study-summary { font-size: .88rem; line-height: 1.55; }
  body:has(.portfolio-museum-hero) .case-study-metrics { padding-top: 11px; }
  body:has(.portfolio-museum-hero) .case-study-metrics div { padding: 10px 14px; }
  body:has(.portfolio-museum-hero) .case-study-coverage { margin-top: 7px; padding: 10px 14px; }
  body:has(.portfolio-museum-hero) .case-study-coverage p { margin-top: 5px; line-height: 1.4; }
}

@media (max-width: 800px) {
  body:has(.portfolio-museum-hero) .case-studies[data-case-stories] { height: auto; min-height: 0; padding: 82px 18px; overflow: hidden; }
  body:has(.portfolio-museum-hero) .case-studies[data-case-stories] .case-studies-shell { position: relative; height: auto; padding: 0; display: block; overflow: visible; }
  body:has(.portfolio-museum-hero) .case-story-steps { position: relative; height: auto; overflow: visible; }
  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal { position: relative; inset: auto; min-height: 0; padding: 55px 0; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 801px) {
  body:has(.portfolio-museum-hero) .case-studies[data-case-stories] { height: auto; min-height: 0; padding: 90px max(5vw,28px); }
  body:has(.portfolio-museum-hero) .case-studies[data-case-stories] .case-studies-shell { position: relative; height: auto; padding: 0; display: block; overflow: visible; }
  body:has(.portfolio-museum-hero) .case-story-layout { height: auto; }
  body:has(.portfolio-museum-hero) .case-story-media { position: relative; height: 65svh; min-height: 520px; }
  body:has(.portfolio-museum-hero) .case-story-steps { position: relative; height: auto; overflow: visible; }
  body:has(.portfolio-museum-hero) .case-story-steps .case-study.reveal { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
}

/* Home v71 — subtle water refraction behind the primary hero content. */
.immersive-backdrop > .hero-water-canvas {
  position: absolute;
  inset: -45px;
  width: calc(100% + 90px);
  height: calc(100% + 90px);
  display: block;
  opacity: 0;
  filter: saturate(.82) contrast(1.08);
  transform: translate3d(calc(var(--hero-x) * -.22), calc(var(--hero-y) * -.22), 0) scale(1.06);
  transition: opacity .8s ease, transform .3s ease-out;
  pointer-events: none;
  will-change: transform;
}

.immersive-backdrop > img {
  transition: opacity .8s ease, transform .3s ease-out;
}

.immersive-backdrop.is-water-ready > .hero-water-canvas { opacity: 1; }
.immersive-backdrop.is-water-ready > img { opacity: 0; }

@media (min-width: 801px) {
  .immersive-backdrop > .hero-water-canvas {
    transform: translate3d(calc(var(--hero-x) * -.22), calc(var(--hero-y) * -.22), 0) scale(var(--hero-bg-scale, 1.06));
  }
}

@media (max-width: 800px) {
  .immersive-backdrop > .hero-water-canvas {
    filter: saturate(.78) contrast(1.06);
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-backdrop > .hero-water-canvas { display: none; }
  .immersive-backdrop > img { opacity: 1 !important; }
}

/* Portafolio v91 — a single, irregular Tympanus-style infinite current. */
body:has(.portfolio-museum-hero) .portfolio-gallery-toolbar > div:first-child {
  transition: opacity .42s ease, transform .58s var(--ease-premium);
}

body:has(.portfolio-museum-hero) .portfolio-loop.is-field-engaged:not(.is-field-focus) .portfolio-gallery-toolbar > div:first-child {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}

body:has(.portfolio-museum-hero) .portfolio-field-tile {
  width: clamp(160px,17vw,230px);
  height: clamp(116px,12.5vw,166px);
}

body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 2) {
  width: clamp(145px,15vw,205px);
  height: clamp(190px,20vw,265px);
}

body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 4) {
  width: clamp(205px,22vw,282px);
  height: clamp(112px,12.5vw,166px);
}

@media (max-width: 800px) {
  body:has(.portfolio-museum-hero) .portfolio-field-tile { width: 37vw; height: 26vw; }
  body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 2) { width: 28vw; height: 37vw; }
  body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 4) { width: 42vw; height: 23vw; }
}

/* Portafolio v97 — original image proportions, 30% larger and full visual bank. */
body:has(.portfolio-museum-hero) .portfolio-field-tile,
body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 2),
body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 4) {
  width: clamp(208px,22.1vw,299px);
  height: auto;
  aspect-ratio: var(--tile-aspect,4 / 3);
}

body:has(.portfolio-museum-hero) .portfolio-field-tile[data-orientation="portrait"] {
  width: clamp(188px,19.5vw,267px);
}

body:has(.portfolio-museum-hero) .portfolio-field-tile[data-orientation="landscape"] {
  width: clamp(266px,28.6vw,367px);
}

body:has(.portfolio-museum-hero) .portfolio-field-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

@media (max-width: 800px) {
  body:has(.portfolio-museum-hero) .portfolio-field-tile,
  body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 2),
  body:has(.portfolio-museum-hero) .portfolio-field-tile:nth-child(5n + 4) {
    width: clamp(180px,48vw,290px);
    height: auto;
  }
  body:has(.portfolio-museum-hero) .portfolio-field-tile[data-orientation="portrait"] {
    width: clamp(150px,36.4vw,240px);
  }
  body:has(.portfolio-museum-hero) .portfolio-field-tile[data-orientation="landscape"] {
    width: clamp(210px,54.6vw,340px);
  }
}