:root {
  --opa-navy: #101827;
  --opa-navy-2: #0a1220;
  --opa-aqua: #7fe7f2;
  --opa-aqua-dark: #42c8d8;
  --opa-periwinkle: #6257e8;
  --opa-ice: #f2f4f7;
  --opa-white: #ffffff;
  --opa-ink: #182131;
  --opa-muted: #6d7685;
  --opa-line: rgba(16, 24, 39, 0.12);
  --opa-radius: 24px;
  --opa-shadow: 0 30px 80px rgba(16, 24, 39, 0.12);
  --opa-container: min(1240px, calc(100% - 48px));
  --opa-font: Inter, "Helvetica Neue", Arial, sans-serif;
  --opa-display: "Arial Nova", Inter, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--opa-white); color: var(--opa-ink); font-family: var(--opa-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.opa-lock { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--opa-aqua); color: var(--opa-navy); }
.opa-container { width: var(--opa-container); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); white-space: nowrap; border: 0; overflow: hidden; }
.opa-skip-link { position: fixed; left: 16px; top: -60px; z-index: 99999; background: var(--opa-aqua); color: var(--opa-navy); padding: 10px 16px; border-radius: 8px; font-weight: 800; }
.opa-skip-link:focus { top: 16px; }
.opa-main { overflow: clip; }
.opa-dark-section { position: relative; overflow: hidden; background: var(--opa-navy); color: var(--opa-white); }
.opa-ice-section { background: var(--opa-ice); }
.opa-section { padding: clamp(84px, 10vw, 150px) 0; }
.opa-grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(127,231,242,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(127,231,242,.08) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 94%); }
.opa-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--opa-aqua-dark); font-size: 12px; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.opa-dark-section .opa-eyebrow { color: var(--opa-aqua); }
.opa-eyebrow > span:empty { width: 22px; height: 1px; background: currentColor; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--opa-display); letter-spacing: -.035em; line-height: 1.04; }
h1 { font-size: clamp(52px, 7.2vw, 104px); }
h2 { font-size: clamp(40px, 5.2vw, 72px); }
h3 { font-size: clamp(22px, 2.3vw, 32px); }
.opa-section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 52px; }
.opa-section-head h2 { max-width: 820px; margin: 12px 0 0; }
.opa-section-head > p { max-width: 390px; margin: 0; color: var(--opa-muted); font-size: 18px; }
.opa-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 56px; padding: 0 25px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .02em; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.opa-button i { display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 18px; transition: transform .25s ease; }
.opa-button:hover { transform: translateY(-2px); }
.opa-button:hover i { transform: translate(3px, -2px); }
.opa-button-primary { background: var(--opa-aqua); color: var(--opa-navy); box-shadow: 0 12px 34px rgba(127,231,242,.18); }
.opa-button-primary:hover { background: var(--opa-white); }
.opa-button-ghost { background: rgba(255,255,255,.04); color: var(--opa-white); border-color: rgba(255,255,255,.22); backdrop-filter: blur(14px); }
.opa-button-ghost:hover { border-color: var(--opa-aqua); background: rgba(127,231,242,.08); }
.opa-button-dark { background: var(--opa-navy); color: var(--opa-white); }
.opa-button-dark:hover { background: var(--opa-periwinkle); }
.opa-text-link { appearance: none; display: inline-flex; align-items: center; gap: 14px; padding: 0 0 6px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--opa-ink); font-weight: 750; }
.opa-text-link span { transition: transform .25s ease; }
.opa-text-link:hover span { transform: translate(3px, -2px); }
.opa-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: var(--opa-delay, 0ms); }
.opa-reveal.opa-visible { opacity: 1; transform: translateY(0); }

/* Header */
.opa-scroll-progress { position: fixed; z-index: 10000; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.opa-scroll-progress span { display: block; width: 0; height: 100%; background: var(--opa-aqua); }
.opa-topbar { position: relative; z-index: 1001; background: var(--opa-aqua); color: var(--opa-navy); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.opa-topbar .opa-container { min-height: 32px; display: flex; align-items: center; justify-content: space-between; }
.opa-topbar div div { display: flex; gap: 22px; }
.opa-header { position: sticky; z-index: 1000; top: 0; background: rgba(16,24,39,.94); color: var(--opa-white); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); transition: box-shadow .25s ease, background .25s ease; }
.opa-header.opa-scrolled { box-shadow: 0 14px 50px rgba(0,0,0,.18); background: rgba(10,18,32,.97); }
.admin-bar .opa-header { top: 32px; }
.opa-header-inner { height: 82px; display: flex; align-items: center; gap: 30px; }
.opa-brand { flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 10px; }
.opa-brand .custom-logo-link { display: block; }
.opa-brand .custom-logo { width: auto; max-width: 132px; max-height: 50px; }
.opa-wordmark { display: inline-flex; align-items: baseline; color: var(--opa-aqua); font-family: var(--opa-display); font-size: 42px; font-weight: 900; letter-spacing: -.09em; line-height: .8; }
.opa-wordmark i { color: var(--opa-periwinkle); font-style: normal; }
.opa-brand small { padding-bottom: 1px; color: rgba(255,255,255,.6); font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.opa-desktop-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; }
.opa-menu { list-style: none; display: flex; align-items: center; gap: 0; padding: 0; margin: 0; }
.opa-menu li { margin: 0; }
.opa-menu a, .opa-products-toggle { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 13px 11px; border: 0; background: transparent; color: rgba(255,255,255,.74); font-size: 12px; font-weight: 800; letter-spacing: .04em; transition: color .2s ease; }
.opa-menu a:hover, .opa-products-toggle:hover, .opa-menu .current-menu-item > a { color: var(--opa-aqua); }
.opa-products-toggle i { position: relative; width: 10px; height: 10px; }
.opa-products-toggle i::before, .opa-products-toggle i::after { content: ""; position: absolute; left: 1px; top: 5px; width: 8px; height: 1px; background: currentColor; transition: transform .2s ease; }
.opa-products-toggle i::after { transform: rotate(90deg); }
.opa-products-toggle[aria-expanded="true"] i::after { transform: rotate(0); }
.opa-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.opa-button-header { min-height: 44px; padding: 0 18px; background: var(--opa-white); color: var(--opa-navy); }
.opa-button-header:hover { background: var(--opa-aqua); }
.opa-cart-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.opa-cart-link svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.opa-cart-count { position: absolute; right: -2px; top: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--opa-aqua); color: var(--opa-navy); font-size: 10px; font-weight: 900; }
.opa-menu-toggle { display: none; width: 44px; height: 44px; padding: 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: transparent; }
.opa-menu-toggle i { display: block; width: 18px; height: 1px; margin: 5px auto; background: var(--opa-white); transition: transform .25s ease; }
.opa-menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
.opa-menu-toggle[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
.opa-mega-menu { position: absolute; top: 100%; left: 0; right: 0; visibility: hidden; opacity: 0; transform: translateY(-10px); background: var(--opa-white); color: var(--opa-ink); border-radius: 0 0 28px 28px; box-shadow: 0 30px 80px rgba(3,10,20,.28); transition: opacity .28s ease, transform .28s ease, visibility .28s; }
.opa-mega-menu.opa-open { visibility: visible; opacity: 1; transform: translateY(0); }
.opa-mega-grid { display: grid; grid-template-columns: 1.05fr 1.6fr .72fr; gap: 50px; padding-top: 52px; padding-bottom: 54px; }
.opa-mega-intro { padding-right: 30px; border-right: 1px solid var(--opa-line); }
.opa-mega-intro h2 { margin: 16px 0 30px; font-size: clamp(30px, 3vw, 45px); }
.opa-mega-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: start; }
.opa-mega-links a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; min-height: 50px; border-bottom: 1px solid var(--opa-line); font-weight: 700; }
.opa-mega-links a span { color: var(--opa-muted); font-size: 10px; letter-spacing: .1em; }
.opa-mega-links a i { font-style: normal; opacity: 0; transform: translateX(-6px); transition: .2s ease; }
.opa-mega-links a:hover { color: var(--opa-periwinkle); }
.opa-mega-links a:hover i { opacity: 1; transform: translateX(0); }
.opa-mega-card { position: relative; overflow: hidden; align-self: stretch; padding: 25px; border-radius: 20px; background: var(--opa-navy); color: var(--opa-white); }
.opa-mini-gift { position: relative; height: 118px; margin: -10px 0 16px; }
.opa-mini-gift::before, .opa-mini-gift::after { content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%) rotate(-9deg); width: 94px; height: 72px; border-radius: 7px; background: linear-gradient(145deg,var(--opa-aqua),#45becd); box-shadow: 18px 18px 38px rgba(0,0,0,.24); }
.opa-mini-gift::after { top: 30%; width: 103px; height: 28px; background: #aef3f8; }
.opa-mini-gift i { position: absolute; z-index: 2; left: 50%; top: 54%; transform: translate(-50%,-50%) rotate(-9deg); color: var(--opa-navy); font-style: normal; font-weight: 900; }
.opa-mega-card h3 { margin-bottom: 8px; font-size: 23px; }
.opa-mega-card p { color: rgba(255,255,255,.65); font-size: 13px; }
.opa-mega-card button { padding: 0; border: 0; background: transparent; color: var(--opa-aqua); font-weight: 800; }
.opa-mobile-panel { display: none; }

/* Hero */
.opa-hero { min-height: calc(100svh - 114px); display: flex; align-items: center; isolation: isolate; background: radial-gradient(circle at 72% 45%, rgba(98,87,232,.15), transparent 34%), linear-gradient(155deg,#07111f 0%,var(--opa-navy) 58%,#101f31 100%); }
.opa-hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 30%; background: linear-gradient(to top, rgba(0,0,0,.22), transparent); }
.opa-hero-glow { position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); opacity: .16; }
.opa-hero-glow-a { top: 0; right: 8%; background: var(--opa-aqua); animation: opaBreathe 7s ease-in-out infinite; }
.opa-hero-glow-b { bottom: -18%; left: 10%; background: var(--opa-periwinkle); animation: opaBreathe 9s ease-in-out infinite reverse; }
.opa-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 30px; padding-top: 70px; padding-bottom: 85px; }
.opa-hero-copy { position: relative; z-index: 3; }
.opa-hero h1 { max-width: 760px; margin: 22px 0 25px; text-wrap: balance; }
.opa-hero-lead { max-width: 620px; color: rgba(255,255,255,.68); font-size: clamp(17px,1.6vw,21px); }
.opa-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }
.opa-hero-proof { display: flex; gap: 34px; margin-top: 55px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.12); }
.opa-hero-proof div { display: grid; }
.opa-hero-proof strong { color: var(--opa-white); font-size: 24px; line-height: 1; }
.opa-hero-proof span { margin-top: 7px; color: rgba(255,255,255,.45); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.opa-hero-visual { position: relative; min-height: 660px; }
.opa-product-scene { position: absolute; inset: 0; perspective: 1100px; transform-style: preserve-3d; }
.opa-product-scene::before { content: ""; position: absolute; left: 11%; right: 0; bottom: 7%; height: 25%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.48), transparent 65%); filter: blur(12px); }
.opa-scene-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(127,231,242,.22); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); }
.opa-scene-orbit::before { content: ""; position: absolute; left: 12%; top: 12%; width: 7px; height: 7px; border-radius: 50%; background: var(--opa-aqua); box-shadow: 0 0 18px var(--opa-aqua); }
.opa-scene-orbit-one { width: 520px; height: 520px; animation: opaOrbit 18s linear infinite; }
.opa-scene-orbit-two { width: 390px; height: 390px; transform: translate(-50%,-50%) rotate(58deg); border-color: rgba(98,87,232,.28); animation: opaOrbitReverse 14s linear infinite; }
.opa-object { position: absolute; transform-style: preserve-3d; will-change: transform; transition: transform .12s linear; }
.opa-gift-box { z-index: 4; left: 20%; top: 43%; width: 305px; height: 240px; transform: rotate(-7deg); filter: drop-shadow(30px 42px 28px rgba(0,0,0,.3)); }
.opa-gift-body { position: absolute; left: 20px; top: 54px; width: 270px; height: 170px; border-radius: 12px; background: linear-gradient(135deg,#91f0f6 0%,#64d4df 55%,#3db3c2 100%); transform: skewY(2deg); box-shadow: inset -24px -15px 38px rgba(16,24,39,.13); }
.opa-gift-lid { position: absolute; z-index: 3; left: 3px; top: 24px; width: 304px; height: 71px; border-radius: 10px; background: linear-gradient(145deg,#b7f5f8,#6cdbe4); transform: skewY(-3deg); box-shadow: 0 12px 24px rgba(16,24,39,.2); }
.opa-gift-ribbon { position: absolute; z-index: 4; left: 130px; top: 21px; width: 42px; height: 207px; background: linear-gradient(90deg,#554bd4,#756bf0,#5148c9); transform: skewY(-2deg); }
.opa-gift-ribbon::before { content: "opa"; position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%) rotate(90deg); color: var(--opa-white); font-weight: 900; letter-spacing: .08em; }
.opa-bottle { z-index: 6; right: 7%; top: 22%; width: 110px; height: 330px; transform: rotate(12deg); filter: drop-shadow(24px 32px 22px rgba(0,0,0,.3)); }
.opa-bottle::before { content: ""; position: absolute; left: 27px; top: 0; width: 54px; height: 38px; border-radius: 9px 9px 4px 4px; background: linear-gradient(90deg,#d7dae1,#8d97a7); }
.opa-bottle span { position: absolute; inset: 28px 0 0; border-radius: 34px 34px 27px 27px; background: linear-gradient(100deg,#eee 0%,#b5bdc8 25%,#fff 46%,#a5aeba 70%,#e5e7eb 100%); box-shadow: inset -12px 0 20px rgba(16,24,39,.12); }
.opa-bottle span::after { content: "opa"; position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%); color: var(--opa-navy); font-size: 22px; font-weight: 900; letter-spacing: -.05em; }
.opa-notebook { z-index: 7; left: 9%; top: 18%; width: 190px; height: 244px; border-radius: 9px 14px 14px 9px; background: linear-gradient(135deg,#786ff1,#5148cd); transform: rotate(-18deg); box-shadow: 25px 38px 35px rgba(0,0,0,.28), inset -14px -8px 24px rgba(16,24,39,.18); }
.opa-notebook::after { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 5px; background: rgba(255,255,255,.18); box-shadow: 6px 0 0 rgba(16,24,39,.12); }
.opa-notebook span { position: absolute; right: 28px; top: 28px; color: var(--opa-white); font-size: 24px; font-weight: 900; letter-spacing: -.07em; }
.opa-trophy { z-index: 5; right: 2%; bottom: 8%; width: 175px; height: 230px; transform: rotate(5deg); filter: drop-shadow(24px 26px 22px rgba(0,0,0,.3)); }
.opa-trophy span { position: absolute; left: 47px; top: 2px; width: 84px; height: 142px; border-radius: 44% 44% 55% 55%; background: linear-gradient(100deg,#aef4f8,#4dc4d3 48%,#2e91a2); clip-path: polygon(0 0,100% 0,82% 70%,58% 87%,58% 100%,42% 100%,42% 87%,18% 70%); }
.opa-trophy::before { content: ""; position: absolute; left: 70px; top: 135px; width: 38px; height: 54px; background: linear-gradient(90deg,#80e1e9,#35abba); }
.opa-trophy::after { content: ""; position: absolute; left: 27px; bottom: 8px; width: 124px; height: 40px; border-radius: 50%; background: linear-gradient(160deg,#756bed,#4139b5); box-shadow: 0 12px 20px rgba(0,0,0,.25); }
.opa-scene-label { position: absolute; z-index: 10; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(9,17,30,.66); color: rgba(255,255,255,.76); backdrop-filter: blur(14px); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.opa-scene-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--opa-aqua); box-shadow: 0 0 10px var(--opa-aqua); }
.opa-label-one { right: 3%; top: 13%; }
.opa-label-two { left: 5%; bottom: 8%; }
.opa-scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; color: rgba(255,255,255,.4); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.opa-scroll-cue span { width: 1px; height: 30px; background: linear-gradient(var(--opa-aqua),transparent); animation: opaScroll 1.8s ease-in-out infinite; }

/* Marquee and introduction */
.opa-client-strip { overflow: hidden; padding: 19px 0; background: var(--opa-aqua); color: var(--opa-navy); }
.opa-marquee-track { display: flex; width: max-content; animation: opaMarquee 26s linear infinite; }
.opa-marquee-track span { display: inline-flex; align-items: center; gap: 42px; padding-right: 42px; font-size: 12px; font-weight: 900; letter-spacing: .11em; }
.opa-marquee-track i { font-size: 12px; font-style: normal; color: var(--opa-periwinkle); }
.opa-intro-grid { display: grid; grid-template-columns: 180px 1fr; gap: 55px; }
.opa-sticky-label { display: flex; align-items: flex-start; gap: 12px; color: var(--opa-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.opa-sticky-label span { color: var(--opa-periwinkle); }
.opa-display { max-width: 1010px; margin-bottom: 48px; font-size: clamp(42px, 6.6vw, 88px); }
.opa-intro-bottom { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-top: 34px; border-top: 1px solid var(--opa-line); }
.opa-intro-bottom p { max-width: 650px; margin: 0; color: var(--opa-muted); font-size: 18px; }

/* Services */
.opa-service-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--opa-line); border-left: 1px solid var(--opa-line); }
.opa-service-card { position: relative; min-height: 470px; padding: 30px; border-right: 1px solid var(--opa-line); border-bottom: 1px solid var(--opa-line); background: rgba(255,255,255,.35); transition: background .3s ease, color .3s ease, transform .3s ease; }
.opa-service-card:hover { z-index: 2; background: var(--opa-navy); color: var(--opa-white); transform: translateY(-8px); box-shadow: var(--opa-shadow); }
.opa-service-number { color: var(--opa-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.opa-service-icon { position: relative; width: 124px; height: 124px; margin: 60px auto 44px; transition: transform .4s ease; }
.opa-service-card:hover .opa-service-icon { transform: rotate(-5deg) scale(1.04); }
.opa-service-icon::before, .opa-service-icon::after, .opa-service-icon i { content: ""; position: absolute; border: 2px solid var(--opa-ink); transition: border-color .3s ease, background .3s ease; }
.opa-service-card:hover .opa-service-icon::before, .opa-service-card:hover .opa-service-icon::after, .opa-service-card:hover .opa-service-icon i { border-color: var(--opa-aqua); }
.opa-icon-gift::before { inset: 30px 14px 12px; border-radius: 8px; }
.opa-icon-gift::after { left: 5px; right: 5px; top: 24px; height: 28px; border-radius: 7px; background: var(--opa-aqua); border-color: var(--opa-aqua); }
.opa-icon-gift i:first-child { left: 56px; top: 23px; width: 12px; height: 90px; background: var(--opa-periwinkle); border: 0; }
.opa-icon-gift i:nth-child(2) { left: 25px; top: 0; width: 36px; height: 28px; border-radius: 50% 50% 0 50%; transform: rotate(10deg); }
.opa-icon-gift i:nth-child(3) { right: 24px; top: 0; width: 36px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-10deg); }
.opa-icon-box::before { inset: 24px 12px 16px; transform: skewY(8deg); border-radius: 7px; }
.opa-icon-box::after { left: 12px; top: 18px; width: 100px; height: 45px; transform: skewY(-9deg); border-radius: 7px; background: var(--opa-aqua); }
.opa-icon-box i:first-child { left: 60px; top: 28px; height: 82px; border-width: 1px; }
.opa-icon-people::before { left: 38px; top: 8px; width: 46px; height: 46px; border-radius: 50%; background: var(--opa-aqua); }
.opa-icon-people::after { left: 23px; right: 23px; bottom: 9px; height: 56px; border-radius: 50% 50% 15px 15px; }
.opa-icon-people i:first-child { left: 0; top: 35px; width: 31px; height: 31px; border-radius: 50%; }
.opa-icon-people i:nth-child(2) { right: 0; top: 35px; width: 31px; height: 31px; border-radius: 50%; }
.opa-icon-event::before { inset: 15px; border-radius: 50%; border-color: var(--opa-periwinkle); }
.opa-icon-event::after { inset: 35px; border-radius: 50%; background: var(--opa-aqua); }
.opa-icon-event i:first-child { left: 60px; top: 0; bottom: 0; width: 2px; background: var(--opa-ink); border: 0; }
.opa-icon-event i:nth-child(2) { left: 0; right: 0; top: 60px; height: 2px; background: var(--opa-ink); border: 0; }
.opa-service-card h3 { margin-bottom: 15px; font-size: 27px; }
.opa-service-card p { margin: 0; color: var(--opa-muted); font-size: 14px; transition: color .3s; }
.opa-service-card:hover p { color: rgba(255,255,255,.62); }
.opa-card-arrow { position: absolute; right: 25px; top: 25px; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: var(--opa-white); color: var(--opa-navy); opacity: 0; transform: translate(-8px,8px); transition: .3s ease; }
.opa-service-card:hover .opa-card-arrow { opacity: 1; transform: translate(0); }

/* Products */
.opa-product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 45px 24px; }
.opa-product-card { min-width: 0; }
.opa-product-image { position: relative; overflow: hidden; display: block; aspect-ratio: 1.18/1; border-radius: var(--opa-radius); background: var(--opa-ice); }
.opa-product-image > img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.opa-product-card:hover .opa-product-image > img { transform: scale(1.045); }
.opa-product-view { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 42px; padding: 0 15px; border-radius: 999px; background: var(--opa-white); color: var(--opa-navy); font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(10px); transition: .25s ease; }
.opa-product-card:hover .opa-product-view { opacity: 1; transform: translateY(0); }
.opa-product-meta { padding: 20px 5px 0; }
.opa-product-meta > div > span { color: var(--opa-periwinkle); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.opa-product-meta h3 { margin: 7px 0 5px; font-size: 24px; }
.opa-product-meta p { margin: 0; color: var(--opa-muted); font-size: 14px; }
.opa-product-placeholder .opa-product-image { display: grid; place-items: center; background: radial-gradient(circle at 50% 20%,#fff,transparent 45%), linear-gradient(145deg,#edf1f5,#dfe7ed); }
.opa-placeholder-object { position: relative; display: grid; place-items: center; width: 45%; height: 53%; border-radius: 10px; background: var(--opa-navy); color: var(--opa-aqua); transform: rotate(-7deg); box-shadow: 28px 32px 45px rgba(16,24,39,.2); transition: transform .45s ease; }
.opa-placeholder-object::before { content: ""; position: absolute; left: -6%; right: -6%; top: -10%; height: 25%; border-radius: 9px; background: var(--opa-aqua); }
.opa-placeholder-object i { font-size: 22px; font-style: normal; font-weight: 900; }
.opa-placeholder-2 { width: 28%; height: 68%; border-radius: 26px; transform: rotate(7deg); background: linear-gradient(90deg,#cbd3dc,#fff,#aeb8c3); color: var(--opa-navy); }
.opa-placeholder-2::before { left: 28%; right: 28%; top: -8%; height: 12%; border-radius: 7px; background: var(--opa-navy); }
.opa-placeholder-3 { width: 42%; height: 60%; border-radius: 7px 15px 15px 7px; background: var(--opa-periwinkle); transform: rotate(-13deg); }
.opa-placeholder-3::before { left: 6%; right: auto; top: 0; bottom: 0; width: 4%; height: auto; border-radius: 0; background: rgba(255,255,255,.3); }
.opa-product-card:hover .opa-placeholder-object { transform: rotate(-2deg) translateY(-8px); }

/* Global globe and stats */
.opa-global { isolation: isolate; background: radial-gradient(circle at 75% 45%,rgba(127,231,242,.1),transparent 32%), var(--opa-navy); }
.opa-global-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 80px; min-height: 650px; }
.opa-global-copy h2 { margin: 18px 0 25px; }
.opa-global-copy > p { max-width: 650px; color: rgba(255,255,255,.62); font-size: 18px; }
.opa-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 48px; }
.opa-stat-grid div { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14); }
.opa-stat-grid strong { display: block; color: var(--opa-aqua); font-size: clamp(32px,4vw,50px); line-height: 1; }
.opa-stat-grid span { display: block; margin-top: 9px; color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.opa-globe-wrap { position: relative; display: grid; place-items: center; min-height: 560px; perspective: 900px; }
.opa-globe { position: relative; width: min(440px,70vw); aspect-ratio: 1; border: 1px solid rgba(127,231,242,.4); border-radius: 50%; background: radial-gradient(circle at 34% 30%,rgba(127,231,242,.16),rgba(16,24,39,.02) 48%,rgba(0,0,0,.24)); box-shadow: inset -40px -20px 80px rgba(0,0,0,.38), 0 0 80px rgba(127,231,242,.08); animation: opaGlobeFloat 6s ease-in-out infinite; }
.opa-globe::after { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(127,231,242,.15); border-radius: 50%; }
.opa-globe-lat, .opa-globe-long { position: absolute; inset: 0; border: 1px solid rgba(127,231,242,.28); border-radius: 50%; }
.lat-1 { transform: rotateX(62deg) scale(.98); }.lat-2 { transform: rotateX(72deg) scale(.78); }.lat-3 { transform: rotateX(78deg) scale(.5); }
.long-1 { transform: rotateY(62deg); }.long-2 { transform: rotateY(72deg) rotateZ(48deg); }.long-3 { transform: rotateY(76deg) rotateZ(-52deg); }
.opa-pin { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; font-style: normal; }
.opa-pin b { position: relative; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--opa-aqua); box-shadow: 0 0 0 7px rgba(127,231,242,.12),0 0 20px var(--opa-aqua); }
.opa-pin b::after { content: ""; position: absolute; inset: -8px; border: 1px solid var(--opa-aqua); border-radius: 50%; animation: opaPing 2.2s ease-out infinite; }
.opa-pin em { padding: 5px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; background: rgba(10,18,32,.74); color: rgba(255,255,255,.7); font-size: 9px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.pin-dubai { right: 17%; top: 50%; }.pin-europe { left: 28%; top: 26%; }.pin-asia { right: 8%; top: 31%; }
.opa-globe-ring { position: absolute; width: 110%; height: 36%; border: 1px solid rgba(98,87,232,.38); border-radius: 50%; transform: rotate(-13deg); animation: opaRingSpin 12s linear infinite; }
.opa-globe-ring::after { content: ""; position: absolute; left: 8%; top: 27%; width: 8px; height: 8px; border-radius: 50%; background: var(--opa-periwinkle); box-shadow: 0 0 18px var(--opa-periwinkle); }

/* Why orbit */
.opa-why .opa-section-head { align-items: start; }
.opa-orbit-map { position: relative; width: min(1060px,100%); height: 700px; margin: 30px auto 0; }
.opa-orbit-core { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 230px; height: 230px; border: 1px solid rgba(98,87,232,.3); border-radius: 50%; background: var(--opa-white); box-shadow: 0 30px 65px rgba(16,24,39,.12), 0 0 0 20px rgba(255,255,255,.46); }
.opa-orbit-core::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(98,87,232,.25); border-radius: 50%; animation: opaOrbit 20s linear infinite; }
.opa-orbit-core span { color: var(--opa-navy); font-size: 65px; font-weight: 900; letter-spacing: -.1em; line-height: .9; }
.opa-orbit-core small { color: var(--opa-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.opa-orbit-line { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(98,87,232,.18); border-radius: 50%; }
.orbit-a { width: 68%; height: 68%; }.orbit-b { width: 98%; height: 48%; }.orbit-c { width: 54%; height: 98%; }
.opa-orbit-node { position: absolute; z-index: 3; display: grid; justify-items: center; width: 190px; text-align: center; }
.opa-orbit-node::before { content: ""; width: 76px; height: 76px; margin-bottom: 12px; border: 1px solid rgba(16,24,39,.14); border-radius: 50%; background: var(--opa-white); box-shadow: 0 16px 28px rgba(16,24,39,.08); transition: background .25s ease, transform .25s ease; }
.opa-orbit-node::after { content: ""; position: absolute; top: 26px; width: 24px; height: 24px; border: 2px solid var(--opa-periwinkle); border-radius: 7px; transform: rotate(45deg); }
.opa-orbit-node:hover::before { background: var(--opa-aqua); transform: scale(1.08); }
.opa-orbit-node i { position: absolute; z-index: 2; top: -4px; right: 51px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--opa-navy); color: var(--opa-white); font-size: 8px; font-style: normal; }
.opa-orbit-node strong { font-size: 18px; }
.opa-orbit-node span { margin-top: 2px; color: var(--opa-muted); font-size: 12px; }
.node-1 { left: 2%; top: 15%; }.node-2 { right: 2%; top: 15%; }.node-3 { left: 0; top: 57%; }.node-4 { right: 0; top: 57%; }.node-5 { left: 28%; bottom: 0; }.node-6 { right: 28%; bottom: 0; }

/* Process */
.opa-process-track { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.opa-process-track::before { content: ""; position: absolute; left: 0; right: 0; top: 57px; height: 1px; background: var(--opa-line); }
.opa-process-step { position: relative; padding-right: 36px; }
.opa-process-step > span { color: var(--opa-periwinkle); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.opa-process-step i { position: relative; z-index: 2; display: block; width: 17px; height: 17px; margin: 29px 0 43px; border: 4px solid var(--opa-white); border-radius: 50%; background: var(--opa-aqua-dark); box-shadow: 0 0 0 1px var(--opa-aqua-dark); }
.opa-process-step h3 { margin-bottom: 13px; }
.opa-process-step p { max-width: 250px; margin: 0; color: var(--opa-muted); font-size: 14px; }

/* CTA and footer */
.opa-cta { isolation: isolate; padding: clamp(95px,12vw,180px) 0; text-align: center; }
.opa-cta::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(127,231,242,.17) 1px,transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle,#000,transparent 78%); }
.opa-cta-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); opacity: .16; }
.opa-cta-orb.orb-a { left: 10%; top: 10%; width: 300px; height: 300px; background: var(--opa-periwinkle); }.opa-cta-orb.orb-b { right: 10%; bottom: 0; width: 370px; height: 370px; background: var(--opa-aqua); }
.opa-cta-inner { position: relative; z-index: 2; }
.opa-cta h2 { max-width: 920px; margin: 22px auto; font-size: clamp(50px,7vw,94px); }
.opa-cta p { color: rgba(255,255,255,.58); font-size: 18px; }
.opa-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.opa-footer { padding: 80px 0 20px; background: #08101d; color: var(--opa-white); border-top: 1px solid rgba(255,255,255,.08); }
.opa-footer-top { display: grid; grid-template-columns: 1.3fr .8fr .9fr 1.1fr; gap: 60px; padding-bottom: 65px; }
.opa-footer .opa-wordmark { font-size: 64px; }
.opa-footer-brand p { margin-top: 24px; color: rgba(255,255,255,.5); }
.opa-footer h3 { margin-bottom: 20px; color: rgba(255,255,255,.42); font-family: var(--opa-font); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.opa-footer ul { list-style: none; padding: 0; margin: 0; }
.opa-footer li, .opa-footer-column > a, .opa-footer-column > span { display: block; margin: 10px 0; color: rgba(255,255,255,.72); font-size: 14px; }
.opa-footer a:hover { color: var(--opa-aqua); }
.opa-footer-contact > a:first-of-type { color: var(--opa-aqua); font-size: 18px; }
.opa-footer-contact button { padding: 0 0 5px; margin-top: 15px; border: 0; border-bottom: 1px solid var(--opa-aqua); background: transparent; color: var(--opa-aqua); font-weight: 800; }
.opa-footer-bottom { display: flex; justify-content: space-between; gap: 25px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.35); font-size: 11px; }
.opa-footer-bottom div { display: flex; gap: 22px; }
.opa-mobile-cta { display: none; }

/* Popup and forms */
.opa-popup { position: fixed; z-index: 20000; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; padding: 22px; transition: visibility .3s, opacity .3s ease; }
.opa-popup.opa-open { visibility: visible; opacity: 1; }
.opa-popup-backdrop { position: absolute; inset: 0; background: rgba(4,10,18,.78); backdrop-filter: blur(12px); }
.opa-popup-dialog { position: relative; z-index: 2; overflow: hidden auto; display: grid; grid-template-columns: .75fr 1.25fr; width: min(1040px,100%); max-height: min(760px,calc(100vh - 44px)); border-radius: 28px; background: var(--opa-white); box-shadow: 0 35px 120px rgba(0,0,0,.35); transform: translateY(24px) scale(.98); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.opa-popup.opa-open .opa-popup-dialog { transform: translateY(0) scale(1); }
.opa-popup-close { position: absolute; z-index: 4; right: 16px; top: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(16,24,39,.12); border-radius: 50%; background: var(--opa-white); color: var(--opa-navy); font-size: 25px; line-height: 1; }
.opa-popup-intro { position: relative; overflow: hidden; padding: 52px 38px; background: var(--opa-navy); color: var(--opa-white); }
.opa-popup-intro::after { content: "opa"; position: absolute; left: -20px; bottom: -60px; color: rgba(127,231,242,.05); font-size: 190px; font-weight: 900; letter-spacing: -.1em; }
.opa-popup-intro h2 { margin: 18px 0; font-size: 43px; }
.opa-popup-intro > p { margin-bottom: 40px; color: rgba(255,255,255,.58); }
.opa-popup-promise { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.11); font-size: 13px; }
.opa-popup-promise span { color: var(--opa-aqua); font-size: 9px; letter-spacing: .1em; }
.opa-popup-form-wrap { padding: 50px 42px 35px; }
.opa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.opa-enquiry-form label { display: grid; gap: 7px; }
.opa-enquiry-form label > span { color: var(--opa-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.opa-enquiry-form input, .opa-enquiry-form select, .opa-enquiry-form textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(16,24,39,.16); border-radius: 10px; outline: none; background: var(--opa-white); color: var(--opa-ink); transition: border-color .2s, box-shadow .2s; }
.opa-enquiry-form textarea { resize: vertical; }
.opa-enquiry-form input:focus, .opa-enquiry-form select:focus, .opa-enquiry-form textarea:focus { border-color: var(--opa-periwinkle); box-shadow: 0 0 0 3px rgba(98,87,232,.1); }
.opa-enquiry-form .opa-invalid { border-color: #c73f56; }
.opa-form-wide { grid-column: 1/-1; }
.opa-form-submit { width: 100%; margin-top: 20px; }
.opa-form-note { margin: 10px 0 0; color: var(--opa-muted); font-size: 10px; text-align: center; }
.opa-form-status { display: none; margin-bottom: 15px; padding: 10px 12px; border-radius: 8px; background: var(--opa-ice); font-size: 13px; }
.opa-form-status.opa-show { display: block; }
.opa-form-status.opa-success { background: #e3f8f1; color: #136047; }
.opa-form-status.opa-error { background: #fbe8eb; color: #8d2638; }
.opa-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }

/* Interior pages and blog */
.opa-page-hero, .opa-shop-hero { padding: clamp(95px,12vw,160px) 0 clamp(70px,9vw,110px); background: radial-gradient(circle at 80% 30%,rgba(98,87,232,.18),transparent 30%),var(--opa-navy); }
.opa-page-hero .opa-container, .opa-shop-hero .opa-container { position: relative; z-index: 2; }
.opa-page-hero h1, .opa-shop-hero h1 { max-width: 1000px; margin: 22px 0; }
.opa-page-hero p, .opa-shop-hero p { max-width: 720px; color: rgba(255,255,255,.6); font-size: 19px; }
.opa-entry-content { max-width: 940px; padding-top: 80px; padding-bottom: 100px; font-size: 18px; }
.opa-entry-content h2 { margin-top: 55px; font-size: 45px; }
.opa-entry-content a { color: var(--opa-periwinkle); text-decoration: underline; text-underline-offset: 3px; }
.opa-entry-content .opa-enquiry-form { margin-top: 30px; padding: 35px; border-radius: var(--opa-radius); background: var(--opa-ice); }
.opa-post-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 54px 28px; padding-top: 90px; padding-bottom: 100px; }
.opa-post-image { overflow: hidden; display: block; aspect-ratio: 1.45/1; border-radius: 20px; background: var(--opa-ice); }
.opa-post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.opa-post-card:hover .opa-post-image img { transform: scale(1.04); }
.opa-post-copy { padding: 22px 6px 0; }
.opa-post-copy > span { color: var(--opa-periwinkle); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.opa-post-copy h2 { margin: 10px 0; font-size: 31px; }
.opa-post-copy p { color: var(--opa-muted); }
.opa-article-head { padding: 130px 0 190px; text-align: center; }
.opa-article-head h1 { max-width: 1050px; margin: 25px auto; font-size: clamp(45px,6.7vw,86px); }
.opa-article-head p { max-width: 690px; margin: 0 auto; color: rgba(255,255,255,.6); font-size: 19px; }
.opa-article-image { position: relative; margin-top: -120px; }
.opa-article-image img { width: 100%; max-height: 680px; object-fit: cover; border-radius: 28px; box-shadow: var(--opa-shadow); }
.opa-article-content { max-width: 820px; padding-top: 80px; padding-bottom: 120px; font-size: 18px; }
.opa-article-content h2 { margin-top: 55px; font-size: 43px; }
.opa-error { display: grid; place-items: center; min-height: 72vh; text-align: center; }
.opa-error span { display: block; color: var(--opa-aqua); font-size: 14px; font-weight: 900; letter-spacing: .2em; }
.opa-error h1 { max-width: 780px; margin: 20px auto; }
.opa-error p { color: rgba(255,255,255,.58); }
.opa-error .opa-button { margin-top: 20px; }
.opa-split { display: grid; grid-template-columns: 1.05fr .7fr; gap: 90px; align-items: start; }
.opa-split h2 { margin: 18px 0 0; }
.opa-split-copy { padding-top: 35px; }
.opa-split-copy p { color: var(--opa-muted); font-size: 18px; }
.opa-split-copy .opa-text-link { margin-top: 18px; }
.opa-value-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--opa-line); border-left: 1px solid var(--opa-line); }
.opa-value-grid article { min-height: 310px; padding: 38px; border-right: 1px solid var(--opa-line); border-bottom: 1px solid var(--opa-line); background: rgba(255,255,255,.38); }
.opa-value-grid article > span { color: var(--opa-periwinkle); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.opa-value-grid h3 { margin: 95px 0 16px; }
.opa-value-grid p { color: var(--opa-muted); }
.opa-capability-list { border-top: 1px solid var(--opa-line); }
.opa-capability { display: grid; grid-template-columns: 70px 1fr 1fr 180px; gap: 35px; align-items: center; padding: 50px 0; border-bottom: 1px solid var(--opa-line); transition: padding .25s ease, background .25s ease; }
.opa-capability:hover { padding-left: 25px; padding-right: 25px; background: var(--opa-ice); }
.opa-capability > span { color: var(--opa-periwinkle); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.opa-capability h2 { margin: 0; font-size: clamp(30px,3.5vw,50px); }
.opa-capability p { margin: 0; color: var(--opa-muted); }
.opa-capability button { justify-self: end; padding: 0 0 5px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--opa-navy); font-size: 12px; font-weight: 800; }
.opa-portfolio-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 70px 28px; }
.opa-work-visual { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 1.3/1; border-radius: 24px; background: var(--opa-ice); }
.opa-work-visual::before { content: ""; width: 42%; height: 48%; border-radius: 10px; background: var(--opa-navy); transform: rotate(-8deg); box-shadow: 30px 34px 50px rgba(16,24,39,.2); }
.opa-work-visual::after { content: ""; position: absolute; width: 46%; height: 13%; top: 24%; border-radius: 8px; background: var(--opa-aqua); transform: rotate(-8deg); }
.opa-work-visual span { position: absolute; z-index: 2; color: var(--opa-aqua); font-size: 27px; font-weight: 900; transform: rotate(-8deg); }
.visual-2 { background: linear-gradient(145deg,#edf0ff,#dfe1fb); }.visual-2::before { width: 28%; height: 62%; border-radius: 28px; background: linear-gradient(90deg,#ccd4dd,#fff,#aeb9c4); transform: rotate(7deg); }.visual-2::after { width: 11%; height: 9%; top: 18%; background: var(--opa-navy); transform: rotate(7deg); }.visual-2 span { color: var(--opa-navy); transform: rotate(7deg); }
.visual-3 { background: linear-gradient(145deg,#e4f9fa,#c8f0f3); }.visual-3::before { width: 44%; height: 56%; background: var(--opa-periwinkle); transform: rotate(-13deg); }.visual-3::after { width: 4px; height: 56%; top: 22%; left: 31%; background: rgba(255,255,255,.35); transform: rotate(-13deg); }.visual-3 span { color: var(--opa-white); transform: rotate(-13deg); }
.opa-work-card > div:last-child { padding: 22px 5px 0; }
.opa-work-card > div:last-child > span { color: var(--opa-periwinkle); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.opa-work-card h2 { margin: 9px 0; font-size: clamp(28px,3.2vw,44px); }
.opa-work-card p { color: var(--opa-muted); }
.opa-contact-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.opa-contact-grid aside h2 { margin: 18px 0 30px; }
.opa-contact-details { display: grid; gap: 8px; padding: 25px 0; border-top: 1px solid var(--opa-line); border-bottom: 1px solid var(--opa-line); }
.opa-contact-details a:first-child { color: var(--opa-periwinkle); font-size: 20px; font-weight: 800; }
.opa-contact-grid aside > p { margin-top: 28px; color: var(--opa-muted); }
.opa-contact-form { padding: 38px; border-radius: 24px; background: var(--opa-ice); }
.opa-category-cards { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--opa-line); border-left: 1px solid var(--opa-line); }
.opa-category-card { position: relative; min-height: 225px; padding: 28px; border-right: 1px solid var(--opa-line); border-bottom: 1px solid var(--opa-line); background: rgba(255,255,255,.45); transition: background .25s, color .25s, transform .25s; }
.opa-category-card:hover { z-index: 2; background: var(--opa-navy); color: var(--opa-white); transform: translateY(-5px); }
.opa-category-card > span { color: var(--opa-periwinkle); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.opa-category-card h2 { max-width: 260px; margin: 70px 0 0; font-size: 30px; }
.opa-category-card i { position: absolute; right: 25px; top: 24px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--opa-white); color: var(--opa-navy); font-style: normal; opacity: 0; transition: opacity .25s; }
.opa-category-card:hover i { opacity: 1; }

/* WooCommerce */
.opa-woo-content { padding-top: 70px; padding-bottom: 110px; }
.woocommerce .woocommerce-breadcrumb { margin-bottom: 30px; color: var(--opa-muted); font-size: 12px; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 35px; }
.woocommerce .woocommerce-ordering select { padding: 12px 38px 12px 14px; border: 1px solid var(--opa-line); border-radius: 99px; background: var(--opa-white); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px 24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce ul.products li.product a img { aspect-ratio: 1.1/1; object-fit: cover; margin: 0 0 18px; border-radius: 20px; background: var(--opa-ice); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; font-size: 23px; }
.woocommerce ul.products li.product .price { color: var(--opa-periwinkle); font-size: 14px; font-weight: 800; }
.woocommerce span.onsale { min-width: auto; min-height: auto; margin: 12px !important; padding: 6px 12px; border-radius: 99px; background: var(--opa-aqua); color: var(--opa-navy); font-size: 10px; line-height: 1.5; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { min-height: 44px; padding: 13px 20px; border-radius: 99px; background: var(--opa-navy); color: var(--opa-white); font-size: 12px; font-weight: 800; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--opa-periwinkle); color: var(--opa-white); }
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: auto; }
.woocommerce div.product div.images img { border-radius: 20px; background: var(--opa-ice); }
.woocommerce div.product .product_title { font-size: clamp(38px,5vw,64px); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--opa-periwinkle); font-size: 24px; }
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related { grid-column: 1/-1; }
.woocommerce div.product form.cart .button { background: var(--opa-aqua); color: var(--opa-navy); }
.woocommerce .quantity .qty { min-height: 44px; border: 1px solid var(--opa-line); border-radius: 10px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container--default .select2-selection--single { min-height: 48px; padding: 10px 12px; border: 1px solid rgba(16,24,39,.16); border-radius: 9px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 27px; }
.woocommerce-checkout #payment { background: var(--opa-ice); border-radius: 16px; }
.woocommerce table.shop_table { border-color: var(--opa-line); border-radius: 14px; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--opa-aqua-dark); background: var(--opa-ice); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--opa-aqua-dark); }

/* Animations */
@keyframes opaBreathe { 0%,100% { transform: scale(.9); opacity: .12; } 50% { transform: scale(1.12); opacity: .2; } }
@keyframes opaOrbit { to { transform: translate(-50%,-50%) rotate(342deg); } }
@keyframes opaOrbitReverse { to { transform: translate(-50%,-50%) rotate(-302deg); } }
@keyframes opaScroll { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes opaMarquee { to { transform: translateX(-50%); } }
@keyframes opaGlobeFloat { 0%,100% { transform: translateY(-8px) rotate(-2deg); } 50% { transform: translateY(8px) rotate(2deg); } }
@keyframes opaRingSpin { to { transform: rotate(347deg); } }
@keyframes opaPing { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

@media (max-width: 1180px) {
  .opa-desktop-nav { display: none; }
  .opa-menu-toggle { display: block; }
  .opa-header-inner { height: 74px; }
  .opa-mobile-panel { position: fixed; top: 106px; right: 0; bottom: 0; width: min(420px,100%); display: block; visibility: hidden; opacity: 0; transform: translateX(30px); background: var(--opa-navy); transition: .28s ease; }
  .admin-bar .opa-mobile-panel { top: 138px; }
  .opa-mobile-panel.opa-open { visibility: visible; opacity: 1; transform: translateX(0); }
  .opa-mobile-menu-inner { overflow-y: auto; height: 100%; padding: 30px 24px 80px; }
  .opa-mobile-menu-inner .opa-menu, .opa-mobile-menu { display: block; }
  .opa-mobile-menu-inner .opa-menu a, .opa-mobile-menu > li > a, .opa-mobile-menu-inner > a { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--opa-white); font-size: 22px; font-weight: 700; }
  .opa-mobile-menu-inner .opa-button { width: 100%; margin-top: 30px; font-size: 13px; }
  .opa-hero-grid { grid-template-columns: .92fr 1.08fr; }
  .opa-gift-box { left: 13%; transform: scale(.9) rotate(-7deg); }
  .opa-notebook { left: 2%; transform: scale(.88) rotate(-18deg); }
  .opa-service-grid { grid-template-columns: repeat(2,1fr); }
  .opa-service-card { min-height: 420px; }
  .opa-footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
  .opa-footer-contact { grid-column: 2/4; }
}

@media (max-width: 900px) {
  :root { --opa-container: min(100% - 34px, 760px); }
  .opa-topbar div div a:last-child { display: none; }
  .opa-hero { min-height: auto; }
  .opa-hero-grid { grid-template-columns: 1fr; padding-top: 80px; }
  .opa-hero-copy { text-align: center; }
  .opa-hero .opa-eyebrow, .opa-hero-actions { justify-content: center; }
  .opa-hero-lead { margin-inline: auto; }
  .opa-hero-proof { justify-content: center; }
  .opa-hero-visual { min-height: 610px; max-width: 650px; width: 100%; margin-inline: auto; }
  .opa-scroll-cue { display: none; }
  .opa-intro-grid { grid-template-columns: 1fr; gap: 30px; }
  .opa-section-head { align-items: start; }
  .opa-product-grid, .woocommerce ul.products { grid-template-columns: repeat(2,1fr); }
  .opa-global-grid { grid-template-columns: 1fr; }
  .opa-global-copy { text-align: center; }
  .opa-global-copy > p { margin-inline: auto; }
  .opa-stat-grid { max-width: 620px; margin-inline: auto; margin-top: 48px; text-align: left; }
  .opa-globe-wrap { min-height: 500px; }
  .opa-orbit-map { height: auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
  .opa-orbit-core, .opa-orbit-line { display: none; }
  .opa-orbit-node { position: relative; inset: auto !important; width: auto; min-height: 180px; padding: 25px; justify-content: center; border-radius: 18px; background: var(--opa-white); box-shadow: 0 10px 28px rgba(16,24,39,.06); }
  .opa-orbit-node::before { width: 60px; height: 60px; }
  .opa-orbit-node::after { top: 42px; }
  .opa-orbit-node i { top: 18px; right: 18px; }
  .opa-process-track { grid-template-columns: repeat(2,1fr); gap: 45px 20px; }
  .opa-process-track::before { display: none; }
  .opa-process-step i { margin: 17px 0 24px; }
  .opa-footer-top { grid-template-columns: 1fr 1fr; }
  .opa-footer-brand { grid-column: 1/-1; }
  .opa-footer-contact { grid-column: auto; }
  .opa-popup-dialog { grid-template-columns: 1fr; }
  .opa-popup-intro { display: none; }
  .woocommerce div.product { grid-template-columns: 1fr; }
  .opa-split { grid-template-columns: 1fr; gap: 30px; }
  .opa-value-grid { grid-template-columns: 1fr; }
  .opa-value-grid article { min-height: 240px; }
  .opa-value-grid h3 { margin-top: 55px; }
  .opa-capability { grid-template-columns: 50px 1fr; gap: 18px 24px; }
  .opa-capability p { grid-column: 2; }
  .opa-capability button { grid-column: 2; justify-self: start; }
  .opa-contact-grid { grid-template-columns: 1fr; }
  .opa-category-cards { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
  :root { --opa-container: calc(100% - 28px); --opa-radius: 18px; }
  body { font-size: 15px; }
  .opa-section { padding: 78px 0; }
  .opa-topbar .opa-container { min-height: 30px; justify-content: center; }
  .opa-topbar div div { display: none; }
  .opa-topbar > .opa-container > span { font-size: 9px; }
  .opa-header-inner { height: 66px; }
  .opa-brand .opa-wordmark { font-size: 36px; }
  .opa-brand small, .opa-button-header, .opa-cart-link { display: none; }
  .opa-mobile-panel { top: 96px; }
  .admin-bar .opa-header { top: 46px; }
  .admin-bar .opa-mobile-panel { top: 142px; }
  .opa-hero-grid { padding-top: 65px; padding-bottom: 40px; }
  .opa-hero h1 { font-size: clamp(46px,14vw,66px); }
  .opa-hero-lead { font-size: 16px; }
  .opa-hero-actions { display: grid; grid-template-columns: 1fr; }
  .opa-hero-actions .opa-button { width: 100%; }
  .opa-hero-proof { gap: 16px; margin-top: 38px; }
  .opa-hero-proof strong { font-size: 19px; }
  .opa-hero-proof span { font-size: 8px; }
  .opa-hero-visual { min-height: 450px; transform: scale(.78); transform-origin: top center; margin-bottom: -90px; }
  .opa-section-head { display: block; margin-bottom: 34px; }
  .opa-section-head > p { margin-top: 20px; }
  .opa-section-head > .opa-text-link, .opa-section-head > .opa-button { margin-top: 24px; }
  .opa-intro-bottom { display: block; }
  .opa-intro-bottom .opa-text-link { margin-top: 25px; }
  .opa-service-grid { grid-template-columns: 1fr; }
  .opa-service-card { min-height: 390px; }
  .opa-product-grid, .woocommerce ul.products { grid-template-columns: 1fr; }
  .opa-product-view { opacity: 1; transform: none; }
  .opa-stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .opa-stat-grid strong { font-size: 31px; }
  .opa-globe-wrap { min-height: 380px; }
  .opa-globe { width: 300px; }
  .opa-orbit-map { grid-template-columns: 1fr; }
  .opa-process-track { grid-template-columns: 1fr; }
  .opa-process-step { padding-right: 0; }
  .opa-process-step p { max-width: none; }
  .opa-footer { padding-bottom: 90px; }
  .opa-footer-top { grid-template-columns: 1fr; gap: 36px; }
  .opa-footer-brand { grid-column: auto; }
  .opa-footer-bottom { display: block; }
  .opa-footer-bottom div { margin-top: 12px; }
  .opa-mobile-cta { position: fixed; z-index: 900; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: .65fr 1.35fr; overflow: hidden; padding: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(10,18,32,.92); box-shadow: 0 12px 35px rgba(0,0,0,.24); backdrop-filter: blur(14px); }
  .opa-mobile-cta a, .opa-mobile-cta button { min-height: 47px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 800; text-align: center; }
  .opa-mobile-cta a { display: grid; place-items: center; color: var(--opa-white); }
  .opa-mobile-cta button { background: var(--opa-aqua); color: var(--opa-navy); }
  .opa-popup { padding: 10px; }
  .opa-popup-dialog { max-height: calc(100vh - 20px); border-radius: 20px; }
  .opa-popup-form-wrap { padding: 60px 20px 24px; }
  .opa-form-grid { grid-template-columns: 1fr; }
  .opa-form-wide { grid-column: auto; }
  .opa-page-hero, .opa-shop-hero { padding: 85px 0 60px; }
  .opa-post-grid { grid-template-columns: 1fr; }
  .opa-portfolio-grid { grid-template-columns: 1fr; }
  .opa-contact-form { padding: 22px; }
  .opa-category-cards { grid-template-columns: 1fr; }
  .opa-entry-content { padding-top: 55px; }
  .opa-entry-content .opa-enquiry-form { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .opa-reveal { opacity: 1; transform: none; }
}

/* OPA Motion Studio — video-led creative homepage */
.opa-film-hero { min-height: auto; padding: clamp(58px,7vw,100px) 0 110px; background: radial-gradient(circle at 78% 8%,rgba(98,87,232,.22),transparent 28%),linear-gradient(145deg,#08111f 0%,#101827 58%,#0b2030 100%); }
.opa-film-hero-inner { position: relative; z-index: 2; }
.opa-hero-noise { position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.opa-film-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 2px 25px; border-bottom: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.56); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.opa-film-title { display: grid; margin: clamp(34px,4vw,58px) 0 32px; font-size: clamp(55px,8.25vw,126px); line-height: .84; letter-spacing: -.073em; text-transform: uppercase; }
.opa-film-line { display: block; white-space: nowrap; will-change: transform; }
.opa-film-line-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(127,231,242,.9); transform: translate3d(var(--opa-hero-left,0),0,0); }
.opa-film-line-solid { color: var(--opa-white); transform: translate3d(var(--opa-hero-right,0),0,0); }
.opa-film-intro { display: grid; grid-template-columns: minmax(260px,620px) auto; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.opa-film-intro > p { margin: 0; color: rgba(255,255,255,.68); font-size: clamp(16px,1.4vw,20px); }
.opa-film-intro .opa-hero-actions { justify-content: flex-end; margin: 0; }
.opa-film-shop-link { align-self: center; border-color: rgba(255,255,255,.4); color: var(--opa-white); font-size: 12px; }
.opa-film-stage { position: relative; overflow: hidden; min-height: 540px; aspect-ratio: 16/8.7; border: 1px solid rgba(255,255,255,.16); border-radius: clamp(22px,3vw,44px); background: #dce2eb; box-shadow: 0 42px 100px rgba(0,0,0,.35); transform: scale(var(--opa-hero-scale,1)); transform-origin: center top; isolation: isolate; }
.opa-hero-video { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; transform: translate3d(0,var(--opa-hero-video-y,0),0) scale(1.025); }
.opa-film-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(8,17,31,.7),transparent 45%),linear-gradient(to top,rgba(8,17,31,.72),transparent 48%); pointer-events: none; }
.opa-film-stage::before { content: ""; position: absolute; z-index: 2; inset: 20px; border: 1px solid rgba(255,255,255,.35); border-radius: calc(clamp(22px,3vw,44px) - 8px); pointer-events: none; }
.opa-film-caption { position: absolute; z-index: 3; left: 48px; right: 48px; bottom: 42px; display: flex; align-items: center; gap: 13px; color: var(--opa-white); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.opa-film-caption i { width: 4px; height: 4px; border-radius: 50%; background: var(--opa-aqua); }
.opa-film-control { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-items: center; width: 138px; height: 138px; padding: 0; border: 7px solid rgba(255,255,255,.92); border-radius: 50%; background: var(--opa-navy); color: var(--opa-white); transform: translate(-50%,-50%); box-shadow: 0 18px 50px rgba(0,0,0,.3); transition: transform .35s cubic-bezier(.2,.8,.2,1),background .25s; }
.opa-film-control:hover { background: var(--opa-periwinkle); transform: translate(-50%,-50%) scale(1.08) rotate(-4deg); }
.opa-film-control-icon { position: relative; width: 24px; height: 24px; }
.opa-film-control-icon::before,.opa-film-control-icon::after { content: ""; position: absolute; top: 1px; width: 5px; height: 22px; border-radius: 2px; background: var(--opa-aqua); }
.opa-film-control-icon::before { left: 5px; }.opa-film-control-icon::after { right: 5px; }
.opa-film-control[aria-pressed="false"] .opa-film-control-icon::before { left: 7px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid var(--opa-aqua); background: transparent; }
.opa-film-control[aria-pressed="false"] .opa-film-control-icon::after { display: none; }
.opa-film-control small { margin-top: 7px; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.opa-film-float { position: absolute; z-index: 4; display: grid; min-width: 150px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; background: rgba(16,24,39,.66); color: var(--opa-white); backdrop-filter: blur(16px); }
.opa-film-float b { color: var(--opa-aqua); font-size: 23px; letter-spacing: -.04em; line-height: 1; }.opa-film-float span { margin-top: 6px; color: rgba(255,255,255,.65); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.opa-film-float-a { left: 4%; top: 12%; animation: opaFilmFloat 6s ease-in-out infinite; }.opa-film-float-b { right: 4%; bottom: 11%; animation: opaFilmFloat 7.5s ease-in-out infinite reverse; }
.opa-film-hero .opa-scroll-cue { bottom: 25px; }

.opa-capabilities { padding: clamp(90px,10vw,150px) 0; }
.opa-capabilities .opa-section-head { position: relative; z-index: 2; }
.opa-capabilities .opa-section-head h2 { color: var(--opa-white); }
.opa-capabilities .opa-section-head .opa-text-link { color: var(--opa-white); }
.opa-capability-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(310px,.72fr) 1.28fr; gap: clamp(45px,7vw,100px); align-items: start; }
.opa-capability-preview { position: sticky; top: 130px; overflow: hidden; display: grid; place-items: center; min-height: 570px; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: radial-gradient(circle at 74% 24%,rgba(127,231,242,.28),transparent 28%),linear-gradient(145deg,#17253a,#0b1321); }
.opa-capability-preview::before { content: ""; position: absolute; width: 480px; height: 480px; border: 1px solid rgba(127,231,242,.15); border-radius: 50%; animation: opaOrbit 20s linear infinite; }
.opa-capability-preview-index { position: absolute; left: 28px; top: 22px; color: rgba(255,255,255,.16); font-size: 78px; font-weight: 900; letter-spacing: -.07em; line-height: 1; transition: transform .45s,opacity .45s; }
.opa-capability-preview-art { position: relative; width: 280px; height: 320px; transform: rotate(-7deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.opa-capability-preview-art::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -15%; height: 16%; border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(22px); }
.opa-preview-box { position: absolute; left: 20px; right: 20px; bottom: 10px; height: 195px; border-radius: 14px; background: linear-gradient(135deg,#8df0f5,#45bdcb); box-shadow: inset -30px -20px 45px rgba(16,24,39,.14),30px 40px 55px rgba(0,0,0,.3); }
.opa-preview-box::before { content: ""; position: absolute; left: -10px; right: -10px; top: -25px; height: 60px; border-radius: 12px; background: linear-gradient(150deg,#bcf7f9,#68dce6); box-shadow: 0 13px 24px rgba(0,0,0,.2); }
.opa-preview-card { position: absolute; z-index: 2; right: -20px; top: 25px; width: 128px; height: 178px; border-radius: 9px; background: linear-gradient(140deg,#766cf0,#4b42c2); transform: rotate(12deg); box-shadow: 18px 24px 30px rgba(0,0,0,.25); }
.opa-preview-ribbon { position: absolute; z-index: 3; left: 120px; bottom: 5px; width: 36px; height: 205px; background: var(--opa-periwinkle); }
.opa-capability-preview-art b { position: absolute; z-index: 4; left: 50%; bottom: 76px; color: var(--opa-navy); font-size: 28px; letter-spacing: -.08em; transform: translateX(-50%); }
.opa-capabilities .opa-capability-list { border-top: 1px solid rgba(255,255,255,.18); }
.opa-capability-row { display: grid; grid-template-columns: 50px minmax(210px,.9fr) 1.1fr 36px; gap: 24px; align-items: center; min-height: 122px; border-bottom: 1px solid rgba(255,255,255,.18); color: var(--opa-white); transition: padding .35s,background .35s,color .35s; }
.opa-capability-row > span { color: var(--opa-aqua); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.opa-capability-row h3 { margin: 0; font-size: clamp(27px,3vw,43px); }
.opa-capability-row p { margin: 0; color: rgba(255,255,255,.52); font-size: 14px; line-height: 1.45; }
.opa-capability-row i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font-style: normal; transition: transform .3s,background .3s,color .3s; }
.opa-capability-row:hover,.opa-capability-row.opa-active { padding-inline: 18px; background: var(--opa-aqua); color: var(--opa-navy); }
.opa-capability-row:hover > span,.opa-capability-row.opa-active > span { color: var(--opa-periwinkle); }
.opa-capability-row:hover p,.opa-capability-row.opa-active p { color: rgba(16,24,39,.68); }
.opa-capability-row:hover i,.opa-capability-row.opa-active i { background: var(--opa-navy); color: var(--opa-white); transform: rotate(12deg); }

.opa-stories { overflow: visible; background: #e9edf2; }
.opa-stories-title { display: grid; margin-bottom: 60px; text-transform: uppercase; font-family: var(--opa-display); font-size: clamp(58px,9.5vw,145px); font-weight: 900; letter-spacing: -.075em; line-height: .78; }
.opa-stories-title span { color: transparent; -webkit-text-stroke: 1.4px var(--opa-navy); }.opa-stories-title strong { color: var(--opa-navy); }
.opa-story-stack { display: grid; gap: 14vh; padding-bottom: 4vh; }
.opa-story-card { position: sticky; top: 112px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; min-height: min(690px,76vh); border: 1px solid rgba(16,24,39,.11); border-radius: 32px; background: var(--opa-white); box-shadow: 0 28px 80px rgba(16,24,39,.13); }
.opa-story-visual { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 520px; background: radial-gradient(circle at 25% 22%,rgba(127,231,242,.48),transparent 26%),linear-gradient(145deg,#121c2d,#253653); }
.opa-story-visual::before,.opa-story-visual::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }.opa-story-visual::before { width: 620px; height: 620px; }.opa-story-visual::after { width: 420px; height: 420px; }
.opa-story-object { position: relative; z-index: 2; width: 270px; height: 330px; transform: rotate(-7deg); filter: drop-shadow(30px 38px 28px rgba(0,0,0,.35)); }
.opa-story-object > span { position: absolute; inset: 70px 15px 10px; border-radius: 13px; background: linear-gradient(135deg,#94f0f5,#48becc); }.opa-story-object > span::before { content: ""; position: absolute; left: -12px; right: -12px; top: -27px; height: 66px; border-radius: 11px; background: #b5f6f8; }
.opa-story-object i { position: absolute; z-index: 2; left: 117px; top: 38px; bottom: 5px; width: 38px; background: var(--opa-periwinkle); }.opa-story-object b { position: absolute; z-index: 3; left: 50%; top: 52%; color: var(--opa-navy); font-size: 29px; letter-spacing: -.08em; transform: translate(-50%,-50%); }
.opa-story-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px,6vw,82px); }
.opa-story-number { color: var(--opa-periwinkle); font-size: 54px; font-weight: 900; letter-spacing: -.06em; -webkit-text-stroke: 1px var(--opa-periwinkle); color: transparent; }
.opa-story-copy h3 { max-width: 530px; margin: 25px 0; font-size: clamp(36px,4.5vw,68px); }.opa-story-copy p { max-width: 560px; color: var(--opa-muted); font-size: 17px; }.opa-story-copy .opa-text-link { align-self: flex-start; margin-top: 30px; }
.opa-story-unbox .opa-story-visual { background: radial-gradient(circle at 75% 30%,rgba(98,87,232,.4),transparent 30%),linear-gradient(145deg,#e8eef5,#bdc8d8); }.opa-story-unbox .opa-story-object { transform: rotate(8deg); }.opa-story-unbox .opa-story-object > span { background: var(--opa-navy); }.opa-story-unbox .opa-story-object > span::before { background: #263752; }.opa-story-unbox .opa-story-object b { color: var(--opa-aqua); }
.opa-story-campaign .opa-story-visual { background: linear-gradient(145deg,#6257e8,#302893); }.opa-story-campaign .opa-story-object { transform: rotate(-13deg) scale(.92); }.opa-story-campaign .opa-story-object > span { background: var(--opa-white); }.opa-story-campaign .opa-story-object > span::before { background: var(--opa-aqua); }
.opa-story-scale .opa-story-visual { background: radial-gradient(circle at center,rgba(127,231,242,.32),transparent 45%),#101827; }.opa-story-scale .opa-story-object { transform: rotate(5deg) scale(1.06); }

@keyframes opaFilmFloat { 0%,100% { transform: translateY(-8px) rotate(-1deg); } 50% { transform: translateY(10px) rotate(1deg); } }

@media (max-width: 1100px) {
  .opa-film-title { font-size: clamp(52px,8.4vw,92px); }
  .opa-film-intro { grid-template-columns: 1fr; }.opa-film-intro .opa-hero-actions { justify-content: flex-start; }
  .opa-capability-stage { grid-template-columns: 1fr; }.opa-capability-preview { position: relative; top: 0; min-height: 440px; }.opa-capability-preview-art { transform: scale(.86) rotate(-7deg); }
  .opa-story-card { min-height: 620px; }
}

@media (max-width: 760px) {
  .opa-film-hero { padding-top: 42px; padding-bottom: 82px; }.opa-film-meta { align-items: flex-start; font-size: 8px; }.opa-film-meta span:last-child { text-align: right; }
  .opa-film-title { margin: 29px 0 25px; font-size: clamp(42px,12.2vw,72px); line-height: .9; }.opa-film-line { white-space: normal; }.opa-film-intro { margin-bottom: 32px; }
  .opa-film-intro .opa-hero-actions { display: flex; justify-content: flex-start; }.opa-film-intro .opa-hero-actions .opa-button { width: auto; }.opa-film-stage { min-height: 460px; aspect-ratio: 4/5; }.opa-film-stage::before { inset: 12px; }
  .opa-hero-video { inset: 0; width: 100%; height: 100%; object-position: 63% center; }.opa-film-control { width: 104px; height: 104px; border-width: 5px; }.opa-film-caption { left: 27px; right: 27px; bottom: 25px; flex-wrap: wrap; }.opa-film-float { min-width: 116px; padding: 12px 14px; }.opa-film-float-a { left: 7%; top: 8%; }.opa-film-float-b { right: 7%; bottom: 18%; }
  .opa-capabilities { padding: 82px 0; }.opa-capability-preview { min-height: 370px; }.opa-capability-row { grid-template-columns: 36px 1fr 34px; gap: 14px; min-height: 112px; }.opa-capability-row p { grid-column: 2/4; padding-bottom: 20px; }.opa-capability-row i { grid-column: 3; grid-row: 1; }.opa-capability-row:hover,.opa-capability-row.opa-active { padding-inline: 12px; }
  .opa-stories-title { margin-bottom: 42px; }.opa-story-stack { gap: 34px; }.opa-story-card { position: relative; top: 0; grid-template-columns: 1fr; min-height: 0; }.opa-story-visual { min-height: 420px; }.opa-story-copy { min-height: 430px; }.opa-story-object { transform: scale(.78) rotate(-7deg); }.opa-story-unbox .opa-story-object { transform: scale(.78) rotate(8deg); }.opa-story-campaign .opa-story-object { transform: scale(.72) rotate(-13deg); }.opa-story-scale .opa-story-object { transform: scale(.82) rotate(5deg); }
}

@media (max-width: 480px) {
  .opa-film-title { font-size: 11.7vw; }.opa-film-intro .opa-hero-actions { display: grid; }.opa-film-intro .opa-hero-actions .opa-button { width: 100%; }.opa-film-shop-link { justify-self: center; }.opa-film-stage { min-height: 420px; }.opa-film-caption span:nth-of-type(3),.opa-film-caption span:nth-of-type(4),.opa-film-caption i:nth-of-type(2),.opa-film-caption i:nth-of-type(3) { display: none; }
  .opa-capability-preview { min-height: 320px; }.opa-capability-preview-art { transform: scale(.68) rotate(-7deg); }.opa-capability-preview-index { font-size: 55px; }
  .opa-story-visual { min-height: 340px; }.opa-story-copy { min-height: 390px; padding: 28px; }.opa-story-number { font-size: 42px; }.opa-story-copy h3 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .opa-film-line-outline,.opa-film-line-solid,.opa-film-stage,.opa-hero-video { transform: none !important; }
}