/* Theme Name: OMAV Technology Theme URI: https://omavtech.com/ Author: OMAV Technology Description: SAP-first IT consulting theme — six service pillars, 34 sub-services, pillar/cluster content architecture, E-E-A-T insight template, careers with job postings, and a built-in conversion kit (proposal wizard, scoping-call booking, lead magnet, exit offer, live chat). Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: omav Tags: business, consulting, custom-colors, custom-menu, featured-images, block-styles, wide-blocks */ /* ========================================================================== 1. Tokens ========================================================================== */ :root{ --color-bg:#ffffff; --color-surface:#ffffff; --color-text:#1b1b2f; --color-accent:#4f46e5; --color-accent-100:#eef0fe; --color-accent-200:#e0e3fd; --color-accent-300:#c4c8fb; --color-accent-400:#9296f5; --color-accent-500:#4f46e5; --color-accent-600:#453cd8; --color-accent-700:#3a32b6; --color-accent-800:#2e2790; --color-accent-900:#221c6b; --color-divider:#e9e9f2; --color-neutral-100:#f8f8fc; --color-neutral-200:#f2f2f8; --color-neutral-300:#e6e6ef; --color-neutral-400:#cfcfdd; --color-neutral-500:#a3a3b8; --color-neutral-600:#7c7c93; --color-neutral-700:#5b5b74; --color-neutral-800:#3c3c56; --color-neutral-900:#272740; --font-heading:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:ui-monospace,Menlo,Consolas,monospace; --shadow-sm:0 1px 2px rgba(27,27,47,.05); --shadow-md:0 4px 16px rgba(27,27,47,.08); --shadow-lg:0 14px 40px rgba(27,27,47,.14); --gutter:clamp(20px,4vw,56px); --sec-y:clamp(48px,7vw,104px); --sec-y-sm:clamp(36px,4.5vw,64px); --wrap:1340px; --grad:linear-gradient(96deg,#4f46e5 0%,#8b5cf6 46%,#ec4899 100%); } /* Per-pillar accents, set as --hue/--tint on a wrapper */ .omav-p-sap{--hue:#0e9bb5;--tint:#e6f6f9} .omav-p-digital-marketing{--hue:#8b5cf6;--tint:#f3edfe} .omav-p-software{--hue:#f97316;--tint:#fef0e6} .omav-p-web{--hue:#ec4899;--tint:#fdeaf3} .omav-p-cloud{--hue:#0891b2;--tint:#e5f4f8} .omav-p-process{--hue:#10b981;--tint:#e6f7f1} :where([class*="omav-p-"]){--hue:var(--color-accent);--tint:var(--color-accent-100)} /* ========================================================================== 2. Base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0} p{margin:0;text-wrap:pretty} img{max-width:100%;height:auto;display:block} a{color:var(--color-accent);text-decoration:none} a:hover{color:var(--color-accent-700);text-decoration:underline;text-underline-offset:3px} :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} ::selection{background:var(--color-accent-200)} button{font-family:inherit} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link:focus{position:fixed;top:8px;left:8px;z-index:999;background:#fff;padding:10px 14px;width:auto;height:auto;clip:auto} .omav-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} .omav-sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y);border-bottom:1px solid var(--color-divider)} .omav-sec--tight{padding-top:var(--sec-y-sm);padding-bottom:var(--sec-y-sm)} .omav-sec--tint{background:var(--color-neutral-100)} .omav-sec--ink{background:var(--color-text);color:#fff;border-bottom-color:rgba(255,255,255,.16)} .omav-sec--ink h1,.omav-sec--ink h2,.omav-sec--ink h3{color:#fff} .omav-sec--accent{background:var(--color-accent);color:#fff;border-bottom:0} .omav-sec--accent h1,.omav-sec--accent h2{color:#fff} .omav-kicker{display:block;font-family:var(--font-heading);font-weight:800;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:16px} .omav-kicker--hue{color:var(--hue)} .omav-sec--ink .omav-kicker{color:var(--color-accent-400)} .omav-sec--accent .omav-kicker{color:rgba(255,255,255,.75)} .omav-h1{font-size:clamp(30px,4.4vw,58px);letter-spacing:-.035em;line-height:1.03} .omav-h2{font-size:clamp(24px,2.9vw,40px);letter-spacing:-.028em;line-height:1.06} .omav-h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.022em} .omav-lede{font-size:clamp(15px,1.2vw,17.5px);line-height:1.62;color:var(--color-neutral-800);max-width:60ch} .omav-sec--ink .omav-lede,.omav-sec--accent .omav-lede{color:rgba(255,255,255,.82)} .omav-prose p{font-size:16px;line-height:1.72;color:var(--color-neutral-900);margin-bottom:16px;max-width:74ch} .omav-prose h2{font-size:clamp(21px,2.2vw,30px);margin:28px 0 14px;padding-top:18px;border-top:1px solid var(--color-divider)} .omav-prose h3{font-size:19px;margin:22px 0 10px} .omav-prose ul,.omav-prose ol{margin:0 0 18px;padding-left:22px} .omav-prose li{font-size:16px;line-height:1.7;margin-bottom:8px} /* Grids */ .omav-grid{display:grid;gap:16px} .omav-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .omav-grid--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .omav-grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .omav-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(24px,4vw,56px);align-items:start} .omav-split--end{align-items:end} .omav-span2{grid-column:span 2} @media (max-width:900px){.omav-span2{grid-column:auto}} /* ========================================================================== 3. Buttons & tags ========================================================================== */ .omav-btn{ display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:999px; padding:13px 20px;font-family:var(--font-heading);font-weight:800;font-size:14.5px;line-height:1; cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease; text-decoration:none;white-space:nowrap } .omav-btn:hover{text-decoration:none} .omav-btn--primary{background:var(--color-accent);color:#fff} .omav-btn--primary:hover{background:var(--color-accent-600);color:#fff} .omav-btn--primary:active{background:var(--color-accent-700)} .omav-btn--secondary{background:transparent;color:var(--color-text);border-color:var(--color-neutral-300)} .omav-btn--secondary:hover{background:var(--color-accent-100);color:var(--color-accent);border-color:var(--color-accent-200)} .omav-btn--ghost{background:transparent;color:var(--color-accent);padding:10px 12px} .omav-btn--ghost:hover{background:var(--color-accent-100)} .omav-btn--light{background:#fff;color:var(--color-text)} .omav-btn--light:hover{background:var(--color-neutral-200);color:var(--color-text)} .omav-btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .omav-btn--outline-light:hover{background:rgba(255,255,255,.12);color:#fff} .omav-btn--block{display:flex;width:100%;justify-content:space-between} .omav-btn--lg{padding:15px 22px;font-size:15.5px} .omav-btn--icon{width:40px;height:40px;padding:0;justify-content:center} .omav-btn[disabled]{opacity:.45;pointer-events:none} .omav-btn svg{flex:none} .omav-tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 11px; font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.2} .omav-tag--accent{background:var(--color-accent-100);color:var(--color-accent-700)} .omav-tag--hue{background:var(--tint);color:var(--hue)} .omav-tag--neutral{background:var(--color-neutral-200);color:var(--color-neutral-700)} .omav-tag--outline{border:1px solid var(--color-divider);color:var(--color-neutral-700)} .omav-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-600)} .omav-icontile{width:40px;height:40px;border-radius:12px;background:var(--tint); display:grid;place-items:center;flex:none} .omav-icontile svg{stroke:var(--hue)} .omav-icontile--sm{width:26px;height:26px;border-radius:8px} .omav-icontile--lg{width:44px;height:44px;border-radius:14px} .omav-icontile--accent{background:var(--color-accent-100)} .omav-icontile--accent svg{stroke:var(--color-accent)} /* ========================================================================== 4. Header ========================================================================== */ .omav-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--color-divider)} .omav-header__bar{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(10px,1.4vw,22px); max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter)} .omav-brand{display:flex;align-items:center;gap:11px;flex:none;margin-right:auto;color:inherit;text-decoration:none} .omav-brand:hover{text-decoration:none;color:inherit} .omav-brand__mark{width:40px;height:40px;flex:none} .omav-brand__name{display:flex;flex-direction:column;justify-content:center;gap:4px;line-height:1} .omav-brand__name b{font-family:var(--font-heading);font-weight:800;font-size:20px;letter-spacing:-.02em} .omav-brand__name span{font-size:8.5px;letter-spacing:.22em;font-weight:600;color:var(--color-neutral-600)} .omav-nav{display:flex;align-items:center;gap:1px;flex:none;white-space:nowrap; font-size:13.5px;font-weight:600;list-style:none;margin:0;padding:0} .omav-nav li{position:relative} .omav-nav > li > a,.omav-nav > li > button{ display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;background:none; border-radius:999px;color:var(--color-text);cursor:pointer;font:inherit; transition:background .14s ease,color .14s ease } .omav-nav > li > a:hover,.omav-nav > li > button:hover{background:var(--color-accent-100);color:var(--color-accent);text-decoration:none} .omav-nav > li.current-menu-item > a,.omav-nav > li.omav-on > a,.omav-nav > li.omav-on > button{ background:linear-gradient(96deg,#eef0fe,#fbeaf4);color:var(--color-accent)} .omav-nav__ico{width:15px;height:15px;flex:none;opacity:.75} .omav-header__cta{display:flex;align-items:center;gap:8px;flex:none;height:40px;padding-left:clamp(6px,1vw,14px)} .omav-header__cta .omav-btn{height:40px;padding:0 16px} /* Mega menu — 12-column bed, two tidy rows, card treatment. Row 1: SAP (5) + Digital Marketing (7). Row 2: the four shorter areas (3 each). Replaces the old auto-fit grid, which resolved to 5 columns + 1 orphan. */ .omav-mega{display:none;border-top:1px solid var(--color-divider);box-shadow:var(--shadow-md)} .omav-mega.is-open{display:block;animation:omavRise .18s ease-out} .omav-mega__inner{max-width:var(--wrap);margin:0 auto;padding:clamp(24px,2.6vw,36px) var(--gutter)} /* Structural base carried over from the previous block */ .omav-mega__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px; border-bottom:1px solid var(--color-neutral-300)} .omav-mega__cols{display:grid} .omav-mega__col h4{display:flex;align-items:center;font-family:var(--font-heading);font-weight:800} .omav-mega__col h4 a{color:var(--color-text)} .omav-mega__col h4 a:hover{color:var(--hue);text-decoration:none} /* -------------------------------------------------------------------------- 1. PANEL — always fits on screen -------------------------------------------------------------------------- */ .omav-mega { max-height: calc(100dvh - 118px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-neutral-300, #dfe3ec) transparent; background: radial-gradient(120% 140% at 12% -20%, color-mix(in srgb, var(--color-accent, #4f46e5) 7%, transparent) 0%, transparent 58%), var(--color-neutral-100, #f7f8fb); } /* WordPress admin bar eats 32px at the top */ body.admin-bar .omav-mega { max-height: calc(100dvh - 152px); } .omav-mega::-webkit-scrollbar { width: 8px; } .omav-mega::-webkit-scrollbar-thumb { background: var(--color-neutral-300, #dfe3ec); border-radius: 999px; } .omav-mega__inner { padding-top: clamp(16px, 1.5vw, 22px); padding-bottom: clamp(18px, 1.7vw, 24px); } /* -------------------------------------------------------------------------- 2. HEAD ROW — kicker + "All services" pill -------------------------------------------------------------------------- */ .omav-mega__head { align-items: center; margin-bottom: 13px; padding-bottom: 10px; } .omav-mega__head .omav-kicker { letter-spacing: .1em; } .omav-mega__head > a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--color-accent, #4f46e5); background: color-mix(in srgb, var(--color-accent, #4f46e5) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #4f46e5) 20%, transparent); transition: background .16s ease, box-shadow .16s ease, transform .16s ease; } .omav-mega__head > a:hover { background: var(--color-accent, #4f46e5); color: #fff; transform: translateY(-1px); text-decoration: none; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--color-accent, #4f46e5) 60%, transparent); } /* -------------------------------------------------------------------------- 3. GRID — 12-column bed, two tidy rows Row 1: SAP (5) + Digital Marketing (7) = 12 Row 2: Software (3) + Web (3) + Cloud (3) + Process (3) = 12 The two deepest areas get half the width each so their lists can run two-up without a single service name wrapping; the four shorter areas share the second row. Any future area with no rule below takes 3 columns and simply joins the bottom row. -------------------------------------------------------------------------- */ .omav-mega__cols { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .omav-mega__col { grid-column: span 6; } @media (min-width: 1100px) { .omav-mega__cols { gap: 14px; } .omav-mega__col { grid-column: span 3; } .omav-mega__col.omav-p-sap { grid-column: span 5; } .omav-mega__col.omav-p-digital-marketing { grid-column: span 7; } } /* 1100-1279px: the two lead cards even out and type steps down a touch, which keeps every service name on one line at the narrowest desktop width where the horizontal nav is still shown. */ @media (min-width: 1100px) and (max-width: 1279px) { .omav-mega__col.omav-p-sap, .omav-mega__col.omav-p-digital-marketing { grid-column: span 6; } } @media (max-width: 719px) { .omav-mega__col, .omav-mega__col.omav-p-sap, .omav-mega__col.omav-p-digital-marketing { grid-column: span 12; } } /* -------------------------------------------------------------------------- 4. AREA CARDS -------------------------------------------------------------------------- */ .omav-mega__col { position: relative; display: flex; flex-direction: column; padding: 13px 16px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--color-neutral-300, #e6e8ef); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Coloured accent rail, revealed on hover */ .omav-mega__col::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 16px 0 0 16px; background: var(--hue, var(--color-accent, #4f46e5)); opacity: 0; transition: opacity .18s ease; } .omav-mega__col:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hue, var(--color-accent, #4f46e5)) 38%, #fff); box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--hue, var(--color-accent, #4f46e5)) 65%, transparent), 0 2px 6px rgba(16, 24, 40, .05); } .omav-mega__col:hover::before { opacity: 1; } /* -------------------------------------------------------------------------- 5. CARD HEADING + ICON TILE -------------------------------------------------------------------------- */ .omav-mega__col h4 { gap: 9px; margin-bottom: 5px; font-size: 14px; letter-spacing: -.005em; } .omav-mega .omav-icontile--sm { width: 31px; height: 31px; border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue, var(--color-accent, #4f46e5)) 16%, transparent); transition: transform .18s ease, box-shadow .18s ease; } .omav-mega .omav-icontile--sm svg { width: 17px; height: 17px; } .omav-mega__col:hover .omav-icontile--sm { transform: scale(1.06) rotate(-3deg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue, var(--color-accent, #4f46e5)) 38%, transparent); } .omav-mega__col h4 a { transition: color .16s ease; } .omav-mega__col:hover h4 a { color: var(--hue, var(--color-accent, #4f46e5)); } /* Tagline — clamped so one long line can't stretch a whole grid row */ .omav-mega__out { min-height: 2.8em; /* two lines, so the dividers line up across a row */ margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px dashed var(--color-neutral-300, #e6e8ef); font-size: 11.5px; font-weight: 600; color: var(--color-neutral-700, #667085); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* -------------------------------------------------------------------------- 6. LINK LIST — two-up when long, arrow on hover -------------------------------------------------------------------------- */ .omav-mega__list { display: block; /* required for CSS multi-column */ margin: 0; padding: 0; column-gap: 14px; } /* Only the wide, list-heavy areas go two-up — the others stay single so no service name is forced to wrap. */ @media (min-width: 1100px) { .omav-p-sap .omav-mega__list, .omav-p-digital-marketing .omav-mega__list { columns: 2; } } .omav-mega__list li { break-inside: avoid; margin: 0; list-style: none; } .omav-mega__list a { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 7px; margin: 0 -6px; border-radius: 8px; font-size: 12.75px; line-height: 1.3; color: var(--color-neutral-800, #475467); transition: background .14s ease, color .14s ease; } /* Leading marker — a small tinted square that lights up */ .omav-mega__list a::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 2px; background: var(--hue, var(--color-accent, #4f46e5)); opacity: .3; transition: opacity .14s ease, transform .14s ease; } /* Trailing arrow — slides in on hover */ .omav-mega__list a::after { content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-left: auto; background: currentColor; opacity: 0; transform: translateX(-4px); transition: opacity .14s ease, transform .14s ease; -webkit-mask: var(--omav-arrow) center / 13px 13px no-repeat; mask: var(--omav-arrow) center / 13px 13px no-repeat; } .omav-mega { --omav-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .omav-mega__list a:hover { background: color-mix(in srgb, var(--hue, var(--color-accent, #4f46e5)) 8%, transparent); color: var(--hue, var(--color-accent, #4f46e5)); text-decoration: none; } .omav-mega__list a:hover::before { opacity: 1; transform: scale(1.2); } .omav-mega__list a:hover::after { opacity: .85; transform: none; } .omav-mega__list a:focus-visible { outline: 2px solid var(--hue, var(--color-accent, #4f46e5)); outline-offset: 1px; } /* Type steps down a touch on the narrowest desktop widths so no service name wraps. Declared here so it lands after the base link styling. */ @media (min-width: 1100px) and (max-width: 1279px) { .omav-mega__list { column-gap: 10px; } .omav-mega__list a { font-size: 11.9px; padding-left: 5px; padding-right: 6px; } .omav-mega__list a::after { display: none; } /* reclaim the arrow's width */ .omav-mega__out { font-size: 11px; } } /* -------------------------------------------------------------------------- 7. MOTION PREFERENCES -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .omav-mega, .omav-mega *, .omav-mega *::before, .omav-mega *::after { transition: none !important; animation: none !important; } } /* Mobile drawer — right aligned, collapsible sub-services */ .omav-drawer{display:none;border-top:1px solid var(--color-divider);background:#fff; max-height:78vh;overflow:auto;box-shadow:0 14px 40px rgba(27,27,47,.12)} .omav-drawer.is-open{display:flex;justify-content:flex-end} .omav-drawer__inner{width:min(400px,100%);padding:16px var(--gutter) 24px;text-align:right} .omav-drawer__label{font-family:var(--font-heading);font-weight:800;font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--color-neutral-500);padding:6px 0 12px} .omav-acc{border-bottom:1px solid var(--color-divider)} .omav-acc__btn{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:10px; padding:13px 0;background:none;border:0;cursor:pointer;color:var(--color-text); font-family:var(--font-heading);font-weight:800;font-size:15px;text-align:right} .omav-acc__btn .omav-icontile--sm{order:-1} .omav-acc__chev{width:14px;height:14px;flex:none;transition:transform .18s ease;stroke:var(--color-neutral-500)} .omav-acc.is-open .omav-acc__chev{transform:rotate(180deg)} .omav-acc__panel{display:none;flex-direction:column;padding:2px 0 12px;background:var(--color-neutral-100); border-radius:12px;margin-bottom:10px} .omav-acc.is-open .omav-acc__panel{display:flex} .omav-acc__panel a{padding:10px 14px;color:var(--color-neutral-800);font-size:13px;line-height:1.35} .omav-acc__panel a.omav-acc__over{color:var(--hue);font-size:12.5px;font-weight:800;border-bottom:1px solid var(--color-divider)} .omav-drawer__links{display:flex;flex-direction:column} .omav-drawer__links a{padding:13px 0;border-bottom:1px solid var(--color-divider); color:var(--color-text);font-weight:600;font-size:14px} @media (max-width:1179px){ .omav-nav,.omav-header__cta--wide{display:none} .omav-header__cta--compact{display:flex} } @media (min-width:1180px){ .omav-header__cta--compact{display:none} .omav-drawer{display:none!important} } @media (max-width:1319px){.omav-header__cta--wide .omav-btn--secondary{display:none}} /* ========================================================================== 5. Cards ========================================================================== */ .omav-card{background:#fff;border:1px solid var(--color-divider);border-radius:16px; box-shadow:var(--shadow-sm);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px} .omav-card--hue{border-top:3px solid var(--hue)} .omav-card--link{color:var(--color-text);text-decoration:none;transition:box-shadow .16s ease,transform .16s ease} .omav-card--link:hover{box-shadow:var(--shadow-md);text-decoration:none;color:var(--color-text)} .omav-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px} .omav-card h3{font-size:clamp(19px,1.7vw,23px);line-height:1.12} .omav-card p{font-size:13.5px;line-height:1.55;color:var(--color-neutral-800);flex:1} .omav-card__more{display:flex;align-items:center;gap:6px;font-family:var(--font-heading); font-weight:800;font-size:13px;color:var(--hue)} .omav-chips{display:flex;flex-wrap:wrap;gap:5px} /* Stage / method cards — fixed rows so footers align */ .omav-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;align-items:stretch} .omav-stage{display:grid;grid-template-rows:auto auto 1fr auto;gap:13px;align-content:start; background:#fff;border:1px solid var(--color-divider);border-top:3px solid var(--hue); border-radius:14px;padding:22px} .omav-stage h3,.omav-stage h4{font-size:17.5px;line-height:1.2} .omav-stage p{font-size:13px;line-height:1.6;color:var(--color-neutral-800);margin:0} .omav-stage__out{font-size:11.5px;font-weight:700;color:var(--hue); border-top:1px solid var(--color-divider);padding-top:11px;min-height:58px} /* Definition / glance grid */ .omav-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px} .omav-glance__cell{border:1px solid var(--color-divider);border-radius:14px;padding:16px 18px;background:#fff} .omav-glance__k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700; color:var(--color-neutral-600);margin-bottom:7px} .omav-glance__v{font-family:var(--font-heading);font-weight:800;font-size:14.5px;line-height:1.35} /* Scope items — left rule in the pillar colour */ .omav-scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .omav-scope__item{background:#fff;border:1px solid var(--color-divider);border-left:3px solid var(--hue); border-radius:0 14px 14px 0;padding:18px 20px} .omav-scope__item h3{font-size:17px;line-height:1.2;margin-bottom:8px} .omav-scope__item p{font-size:13.5px;line-height:1.6;color:var(--color-neutral-800)} /* Key-point panel */ .omav-keys{background:var(--tint);border-radius:16px;padding:22px 24px;align-self:start} .omav-keys__list{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0} .omav-keys__list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.55; font-weight:600;color:var(--color-neutral-900)} .omav-keys__list li::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--hue); flex:none;margin-top:7px} /* Ruled list (included, responsibilities, requirements) */ .omav-ruled{display:flex;flex-direction:column;border-top:1px solid var(--color-neutral-300); list-style:none;margin:0;padding:0} .omav-ruled li{display:flex;gap:12px;align-items:flex-start;padding:13px 0; border-bottom:1px solid var(--color-divider);font-size:14.5px;line-height:1.55} .omav-ruled li svg{flex:none;margin-top:4px;stroke:var(--hue)} .omav-ruled--bullet li::before{content:'';width:6px;height:6px;border-radius:999px; background:var(--hue);flex:none;margin-top:8px} /* FAQ */ .omav-faqs{display:flex;flex-direction:column;border-top:1px solid var(--color-neutral-300)} .omav-faq{padding:18px 0;border-bottom:1px solid var(--color-divider)} .omav-faq h3{font-size:17px;line-height:1.25;margin-bottom:9px} .omav-faq p{font-size:14.5px;line-height:1.65;color:var(--color-neutral-800);max-width:74ch} .omav-schema-note{margin-top:12px;font-size:11px;color:var(--color-neutral-600); display:flex;align-items:center;gap:7px} /* ========================================================================== 6. Tables ========================================================================== */ .omav-tablewrap{overflow-x:auto;border:1px solid var(--color-neutral-300);border-radius:14px} .omav-table{width:100%;min-width:660px;border-collapse:collapse;font-size:13px} .omav-table th{background:var(--color-neutral-200);text-align:left;padding:13px 16px; font-family:var(--font-heading);font-weight:800;font-size:11.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--color-neutral-700);border-bottom:1px solid var(--color-neutral-300)} .omav-table td{padding:13px 16px;border-bottom:1px solid var(--color-divider); color:var(--color-neutral-800);line-height:1.5;vertical-align:top} .omav-table tbody tr:last-child td{border-bottom:0} .omav-table td:first-child{font-weight:700;color:var(--color-text)} .omav-table--map td:first-child{font-family:var(--font-heading)} .omav-mono{font-family:var(--font-mono);font-size:12px;color:var(--color-neutral-700)} /* "Where to start" rows */ .omav-start{display:flex;flex-direction:column;border-top:1px solid var(--color-neutral-300)} .omav-start__row{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center; padding:15px 0;border-bottom:1px solid var(--color-divider);color:var(--color-text)} .omav-start__row:hover{text-decoration:none;color:var(--color-text)} .omav-start__row:hover .omav-start__svc{text-decoration:underline;text-underline-offset:3px} .omav-start__q{font-size:15px;line-height:1.5;font-weight:600} .omav-start__svc{display:flex;align-items:center;gap:8px;font-family:var(--font-heading); font-weight:800;font-size:13px;color:var(--hue);text-align:right} @media (max-width:640px){.omav-start__row{grid-template-columns:1fr}.omav-start__svc{justify-content:flex-start}} /* Stat strip */ .omav-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .omav-stat{padding:26px 20px;border-right:1px solid rgba(255,255,255,.22)} .omav-stat:last-child{border-right:0} .omav-stat__n{font-family:var(--font-heading);font-weight:800;font-size:clamp(28px,3vw,40px);line-height:1} .omav-stat__l{font-size:12px;opacity:.7;margin-top:6px} .omav-stat--accent .omav-stat__n{color:var(--color-accent-400)} /* ========================================================================== 7. Hero ========================================================================== */ .omav-hero{border-bottom:1px solid var(--color-divider)} .omav-hero__inner{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gutter); display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(28px,4vw,64px);align-items:start} .omav-hero h1{font-size:clamp(34px,5.2vw,72px);line-height:1.02;letter-spacing:-.035em; margin-bottom:clamp(18px,2vw,26px);text-wrap:balance} .omav-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .omav-badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(20px,3vw,30px); background:var(--color-accent-100);color:var(--color-accent-700);border-radius:999px; padding:8px 15px;font-size:12px;font-weight:700} .omav-badge .omav-dot{background:var(--color-accent)} .omav-badge .omav-dot::after{background:var(--color-accent)} .omav-ticks{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:var(--color-neutral-700)} .omav-ticks span{display:flex;align-items:center;gap:6px} .omav-ticks svg{stroke:var(--color-accent);flex:none} .omav-btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px} /* Panel (hero side card, sidebar boxes) */ .omav-panel{border:1px solid var(--color-neutral-300);border-radius:16px;overflow:hidden;background:#fff} .omav-panel__head{background:var(--color-text);color:#fff;padding:13px 18px;display:flex; align-items:center;gap:9px;font-family:var(--font-heading);font-weight:800;font-size:12px; letter-spacing:.12em;text-transform:uppercase} .omav-panel__head--hue{background:var(--hue)} .omav-panel__head--accent{background:var(--color-accent)} .omav-panel__body{padding:20px 18px} .omav-panel__rows{display:flex;flex-direction:column} .omav-panel__row{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:12px; padding:12px 18px;border-bottom:1px solid var(--color-divider)} .omav-panel__row:last-child{border-bottom:0} .omav-panel__k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--color-neutral-600)} .omav-panel__v{font-size:13px;line-height:1.45;font-weight:600} /* Inline CTA block */ .omav-inline-cta{border:1px solid var(--color-accent-200);background:var(--color-accent-100); border-radius:16px;padding:clamp(18px,2vw,26px);display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:center} .omav-inline-cta h3{font-size:clamp(17px,1.7vw,22px);margin-bottom:7px} .omav-inline-cta p{font-size:13px;line-height:1.5;color:var(--color-accent-900)} /* Media */ .omav-media{position:relative;border:1px solid var(--color-neutral-300);border-radius:16px; overflow:hidden;background:var(--color-neutral-200);aspect-ratio:4/3} .omav-media img{width:100%;height:100%;object-fit:cover} .omav-media--wide{aspect-ratio:16/9} .omav-media__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center; padding:20px;font-size:12.5px;color:var(--color-neutral-600);line-height:1.5} .grayscale img{filter:grayscale(1)} /* ========================================================================== 8. Sidebar layout (service / article / job) ========================================================================== */ .omav-layout{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(280px,1fr); gap:clamp(24px,4vw,52px);align-items:start} @media (max-width:1000px){.omav-layout{grid-template-columns:1fr}} .omav-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px} @media (max-width:1000px){.omav-side{position:static}} .omav-side__list{display:flex;flex-direction:column} .omav-side__list a{padding:12px 16px;border-bottom:1px solid var(--color-divider); color:var(--color-text);font-family:var(--font-heading);font-weight:700;font-size:13.5px; display:flex;justify-content:space-between;gap:10px;align-items:center} .omav-side__list a:hover{background:var(--color-neutral-100);color:var(--hue);text-decoration:none} .omav-side__list a[aria-current="page"]{background:var(--tint);color:var(--hue)} .omav-side__list a svg{flex:none;stroke:var(--hue)} .omav-side__foot{display:block;padding:12px 16px;font-size:12.5px;font-weight:700} .omav-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11.5px; color:var(--color-neutral-600);margin-bottom:clamp(20px,3vw,32px)} .omav-crumbs a{color:var(--color-neutral-700)} .omav-crumbs span[aria-current]{color:var(--color-text);font-weight:600} .omav-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 12px; border-radius:999px;background:var(--tint);font-family:var(--font-heading);font-weight:800; font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--hue)} .omav-back:hover{text-decoration:none;color:var(--hue);filter:brightness(.96)} /* ========================================================================== 9. Insights / E-E-A-T article ========================================================================== */ .omav-postcard{background:#fff;border:1px solid var(--color-divider);border-top:3px solid var(--hue); border-radius:16px;overflow:hidden;display:flex;flex-direction:column;color:var(--color-text); min-height:265px;box-shadow:var(--shadow-sm);transition:box-shadow .16s ease} .omav-postcard:hover{box-shadow:var(--shadow-md);text-decoration:none;color:var(--color-text)} .omav-postcard__media{position:relative;aspect-ratio:16/9;background:var(--color-neutral-200); border-bottom:1px solid var(--color-divider)} .omav-postcard__media img{width:100%;height:100%;object-fit:cover} .omav-postcard__body{padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:11px;flex:1} .omav-postcard h3{font-size:19px;line-height:1.18} .omav-postcard p{font-size:12.5px;line-height:1.55;color:var(--color-neutral-700);flex:1} .omav-postcard__meta{border-top:1px solid var(--color-divider);padding-top:11px; display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--color-neutral-600)} .omav-postcard__meta b{font-family:var(--font-heading);color:var(--color-text)} .omav-filters{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--color-divider);padding-top:18px} .omav-filters a{background:transparent;color:var(--color-text);border:1px solid var(--color-divider); border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700} .omav-filters a:hover{background:var(--color-accent-100);color:var(--color-accent);text-decoration:none} .omav-filters a.is-on{background:var(--color-accent);color:#fff;border-color:var(--color-accent)} .omav-author{border:1px solid var(--color-neutral-300);border-radius:16px; display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:28px;overflow:hidden} .omav-author__cell{padding:16px;border-right:1px solid var(--color-divider); display:flex;flex-direction:column;gap:7px;justify-content:center} .omav-author__cell:last-child{border-right:0} .omav-author__id{flex-direction:row;gap:12px} .omav-author__pic{width:52px;height:52px;flex:none;border-radius:12px;overflow:hidden; background:var(--color-neutral-200);border:1px solid var(--color-divider)} .omav-author__pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .omav-author__name{font-family:var(--font-heading);font-weight:800;font-size:14px;line-height:1.2} .omav-author__role{font-size:11.5px;color:var(--color-neutral-700);line-height:1.35} .omav-author__eng{font-size:11px;color:var(--color-accent-700);font-weight:700;line-height:1.35} .omav-author__kv{display:flex;justify-content:space-between;gap:10px;font-size:11.5px} .omav-author__kv span:first-child{color:var(--color-neutral-600)} .omav-author__kv span:last-child{font-weight:700} .omav-takeaways{border:1px solid var(--color-accent-200);background:var(--color-accent-100); border-radius:16px;padding:clamp(16px,2vw,24px);margin-bottom:30px} .omav-takeaways ul{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0} .omav-takeaways li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55; font-weight:600;color:var(--color-accent-900)} .omav-takeaways li::before{content:'';width:7px;height:7px;border-radius:999px; background:var(--color-accent);flex:none;margin-top:7px} .omav-firsthand{border-left:4px solid var(--color-accent);background:var(--color-neutral-100); border-radius:0 14px 14px 0;padding:clamp(16px,2vw,22px);margin-bottom:30px} .omav-firsthand__label{display:flex;align-items:center;gap:9px;margin-bottom:12px; font-family:var(--font-heading);font-weight:800;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--color-accent-700)} .omav-firsthand p{font-size:15px;line-height:1.68;color:var(--color-neutral-900)} .omav-sources{border:1px solid var(--color-neutral-300);border-radius:14px;margin-bottom:30px;overflow:hidden} .omav-sources__row{padding:12px 16px;border-bottom:1px solid var(--color-divider); display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline} .omav-sources__row:last-child{border-bottom:0} .omav-sources__t{font-size:13.5px;font-weight:600;line-height:1.45} .omav-sources__s{font-size:11.5px;color:var(--color-neutral-600)} /* ========================================================================== 10. Careers ========================================================================== */ .omav-joblist{display:flex;flex-direction:column} .omav-job{display:grid;grid-template-columns:minmax(0,2fr) minmax(150px,.8fr) auto; gap:12px 24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--color-divider); color:var(--color-text)} .omav-job:hover{text-decoration:none;color:var(--color-text);background:var(--color-neutral-100)} .omav-job h3{font-size:clamp(17px,1.7vw,21px);line-height:1.2;margin:6px 0} .omav-job__sum{font-size:13px;line-height:1.5;color:var(--color-neutral-700);max-width:60ch} .omav-job__facts{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--color-neutral-700)} .omav-job__facts span{display:flex;align-items:center;gap:6px} .omav-job__facts svg{flex:none;stroke:currentColor} @media (max-width:860px){ .omav-job{grid-template-columns:1fr} .omav-job__go{justify-self:start} } .omav-apply .omav-field{margin-bottom:11px} .omav-drop{border:1px dashed var(--color-neutral-400);border-radius:12px;background:#fff; padding:18px;text-align:center;cursor:pointer} .omav-drop:hover{border-color:var(--color-accent);background:var(--color-accent-100)} .omav-drop svg{margin:0 auto 8px;stroke:var(--color-accent)} .omav-drop b{display:block;font-size:13px;margin-bottom:3px} .omav-drop small{font-size:11px;color:var(--color-neutral-600)} /* ========================================================================== 11. Forms ========================================================================== */ .omav-field{display:flex;flex-direction:column;gap:6px} .omav-field label{font-size:12px;font-weight:700;color:var(--color-neutral-800)} .omav-field small{font-size:11px;color:var(--color-neutral-600)} .omav-input,input.omav-input,select.omav-input,textarea.omav-input{ width:100%;min-height:44px;padding:11px 14px;border:1px solid var(--color-neutral-300); border-radius:10px;background:#fff;color:var(--color-text);font-family:var(--font-body); font-size:14px;line-height:1.4;transition:border-color .14s ease,box-shadow .14s ease } .omav-input:hover{border-color:var(--color-neutral-400)} .omav-input:focus{outline:0;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-100)} textarea.omav-input{min-height:120px;resize:vertical} .omav-formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .omav-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;cursor:pointer} .omav-consent input{margin-top:2px;accent-color:var(--color-accent);width:16px;height:16px;flex:none} .omav-seg{display:flex;flex-wrap:wrap;gap:6px} .omav-seg label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--color-divider); border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer} .omav-seg label:hover{border-color:var(--color-accent-300);background:var(--color-accent-100)} .omav-seg input{accent-color:var(--color-accent)} .omav-seg input:checked + span{color:var(--color-accent)} .omav-formnote{font-size:11.5px;color:var(--color-neutral-600)} /* Contact quick-action tiles */ .omav-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .omav-action{border:1px solid var(--color-divider);border-radius:14px;background:#fff; padding:18px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer; color:var(--color-text);text-align:left;font-family:var(--font-body)} .omav-action:hover{border-color:var(--color-accent-300);background:var(--color-accent-100); text-decoration:none;color:var(--color-text)} .omav-action b{font-family:var(--font-heading);font-size:13.5px} .omav-action small{font-size:11.5px;color:var(--color-neutral-700)} .omav-action svg{stroke:var(--color-accent)} /* ========================================================================== 12. Footer ========================================================================== */ .omav-footer{background:var(--color-text);color:#fff} .omav-footer__inner{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gutter) 0} .omav-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(24px,3vw,44px);padding-bottom:clamp(28px,3.5vw,48px);border-bottom:1px solid rgba(255,255,255,.22)} .omav-footer h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.55);margin-bottom:16px} .omav-footer p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.75);max-width:34ch;margin-bottom:16px} .omav-footer a{color:#fff;font-size:13px} .omav-footer a:hover{color:var(--color-accent-400)} .omav-footer__list{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0} .omav-footer__list a{opacity:.85} .omav-footer__contact{display:flex;flex-direction:column;gap:5px;font-size:13px} .omav-footer__contact a{color:var(--color-accent-400);font-weight:600} .omav-footer__addr{color:rgba(255,255,255,.7);margin-top:6px;line-height:1.5} .omav-footer__legal{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center; padding:20px 0 26px;font-size:11.5px;color:rgba(255,255,255,.6)} .omav-footer__legal a{color:rgba(255,255,255,.75);font-size:11.5px} .omav-footer__legal nav{margin-left:auto;display:flex;gap:20px} .omav-brand--footer .omav-brand__name span{color:rgba(255,255,255,.6)} /* ========================================================================== 13. Conversion kit — sticky bar, chat, dialogs ========================================================================== */ .omav-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--color-text); color:#fff;border-top:2px solid var(--color-accent);animation:omavBarUp .22s ease-out;display:none} .omav-stickybar.is-on{display:block} .omav-stickybar__inner{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter); display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px} .omav-stickybar b{font-family:var(--font-heading);font-size:14px} .omav-stickybar small{font-size:12px;color:rgba(255,255,255,.7)} .omav-stickybar__cta{margin-left:auto;display:flex;gap:8px;align-items:center} .omav-x{background:none;border:0;color:currentColor;opacity:.5;cursor:pointer;padding:6px;line-height:0} .omav-x:hover{opacity:1} .omav-launcher{position:fixed;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);z-index:80; display:flex;flex-direction:column;align-items:flex-end;gap:10px} .omav-launcher.is-lifted{bottom:76px} .omav-launcher.is-hidden{display:none} /* Icon-only floating action button; swaps to a close glyph while the panel is open */ .omav-launcher__btn{position:relative;display:grid;place-items:center;width:58px;height:58px; background:var(--grad);background-size:150% 150%;color:#fff;border:0;border-radius:50%;padding:0; cursor:pointer;box-shadow:0 10px 26px -8px rgba(79,70,229,.55),0 2px 6px rgba(27,27,47,.12); transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background-position .4s ease} .omav-launcher__btn:hover{transform:translateY(-2px) scale(1.04);background-position:100% 50%; box-shadow:0 16px 34px -10px rgba(79,70,229,.62),0 3px 8px rgba(27,27,47,.14)} .omav-launcher__btn:active{transform:translateY(0) scale(.97)} .omav-launcher__ico{grid-area:1/1;display:grid;place-items:center;line-height:0; transition:opacity .18s ease,transform .22s ease} .omav-launcher__ico svg{stroke:#fff;stroke-width:2.1} .omav-launcher__ico--close{opacity:0;transform:rotate(-90deg) scale(.6)} .omav-launcher__btn[aria-expanded="true"] .omav-launcher__ico--chat{opacity:0;transform:rotate(90deg) scale(.6)} .omav-launcher__btn[aria-expanded="true"] .omav-launcher__ico--close{opacity:1;transform:none} /* One quiet ping on load so the button is noticed without nagging */ .omav-launcher__pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--color-accent); opacity:0;animation:omavPing 2.8s ease-out 1.2s 3} .omav-launcher__btn[aria-expanded="true"] .omav-launcher__pulse{display:none} @keyframes omavPing{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.45);opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .omav-launcher__pulse{animation:none} .omav-launcher__btn,.omav-launcher__ico{transition:none} } .omav-chat{display:none;width:min(360px,calc(100vw - 24px));border:1px solid var(--color-neutral-300); border-radius:18px;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden; max-height:min(560px,72vh);flex-direction:column} .omav-chat.is-open{display:flex;animation:omavRise .2s ease-out} .omav-chat__head{background:var(--color-text);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px} .omav-chat__head b{font-family:var(--font-heading);font-size:13px;display:block} .omav-chat__head small{font-size:10.5px;color:rgba(255,255,255,.65)} .omav-chat__body{padding:16px;overflow:auto;flex:1} .omav-chat__log{display:flex;flex-direction:column;gap:10px} .omav-msg{max-width:88%;padding:10px 12px;font-size:13px;line-height:1.5;border-radius:14px} .omav-msg--bot{align-self:flex-start;background:var(--color-neutral-100); border:1px solid var(--color-divider);border-bottom-left-radius:4px} .omav-msg--me{align-self:flex-end;background:var(--color-accent);color:#fff;border-bottom-right-radius:4px} .omav-chat__opts{display:flex;flex-direction:column;gap:6px;margin-top:14px} .omav-chat__opt{text-align:left;background:#fff;border:1px solid var(--color-divider);border-radius:12px; padding:10px 12px;font:600 13px/1.35 var(--font-body);cursor:pointer;display:flex;gap:8px;align-items:center} .omav-chat__opt:hover{border-color:var(--color-accent);background:var(--color-accent-100)} .omav-chat__opt::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--color-accent);flex:none} .omav-chat__hand{margin-top:14px;border-top:1px solid var(--color-divider);padding-top:14px; display:none;flex-direction:column;gap:8px} .omav-chat__hand.is-on{display:flex} .omav-chat__foot{border-top:1px solid var(--color-divider);display:grid;grid-template-columns:1fr 1fr} .omav-chat__foot > *{padding:12px 10px;display:flex;align-items:center;justify-content:center;gap:7px; font-size:12px;font-weight:700;color:var(--color-text);background:#fff;border:0;cursor:pointer; font-family:var(--font-body)} .omav-chat__foot > * + *{border-left:1px solid var(--color-divider)} .omav-chat__foot > *:hover{background:var(--color-accent-100);color:var(--color-accent);text-decoration:none} .omav-dialog{position:fixed;inset:0;z-index:200;display:none;background:rgba(27,27,47,.55); overflow:auto;padding:clamp(12px,4vh,60px) 16px} .omav-dialog.is-open{display:flex;align-items:flex-start;justify-content:center} .omav-dialog--center.is-open{align-items:center} .omav-dialog__panel{width:min(680px,100%);background:#fff;border-radius:18px;overflow:hidden; box-shadow:var(--shadow-lg);animation:omavRise .2s ease-out} .omav-dialog__panel--sm{width:min(560px,100%)} .omav-dialog__head{background:var(--color-text);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:14px} .omav-dialog__head--accent{background:var(--color-accent)} .omav-dialog__head b{display:block;font-family:var(--font-heading);font-size:16px} .omav-dialog__head small{font-size:11.5px;color:rgba(255,255,255,.68)} .omav-dialog__head .omav-x{margin-left:auto;color:#fff} .omav-dialog__body{padding:clamp(18px,2.4vw,28px)} .omav-progress{height:4px;background:var(--color-neutral-300)} .omav-progress span{display:block;height:4px;background:var(--color-accent);transition:width .25s ease} .omav-step{display:none} .omav-step.is-on{display:block} .omav-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px} .omav-pick button{text-align:left;background:#fff;border:1px solid var(--color-divider);border-radius:12px; padding:14px 15px;font:700 13.5px/1.3 var(--font-body);cursor:pointer;display:flex;align-items:center;gap:10px} .omav-pick button::before{content:'';width:9px;height:9px;border-radius:999px;background:var(--color-accent);flex:none} .omav-pick button:hover,.omav-pick button.is-on{border-color:var(--color-accent);background:var(--color-accent-100)} .omav-chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px} .omav-chiprow button{background:#fff;border:1px solid var(--color-divider);border-radius:999px; padding:8px 12px;font:700 12.5px/1 var(--font-body);cursor:pointer} .omav-chiprow button:hover,.omav-chiprow button.is-on{border-color:var(--color-accent); background:var(--color-accent-100);color:var(--color-accent)} .omav-navrow{display:flex;gap:10px;margin-top:18px} .omav-navrow .omav-btn--primary{margin-left:auto} .omav-slotday{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px; align-items:center;padding:14px 16px;border-bottom:1px solid var(--color-divider)} .omav-slotday:last-child{border-bottom:0} .omav-slotday b{font-family:var(--font-heading);font-size:14px} .omav-slots{display:flex;flex-wrap:wrap;gap:6px} .omav-slots button{background:#fff;border:1px solid var(--color-divider);border-radius:999px; padding:9px 14px;font:700 13px/1 var(--font-body);cursor:pointer} .omav-slots button:hover,.omav-slots button.is-on{background:var(--color-accent);color:#fff;border-color:var(--color-accent)} .omav-done{display:flex;align-items:center;gap:12px;margin-bottom:16px} .omav-done__tick{width:34px;height:34px;border-radius:999px;display:grid;place-items:center; background:var(--color-accent);flex:none} .omav-done__tick svg{stroke:#fff} .omav-steps{display:flex;flex-direction:column;border-top:1px solid var(--color-neutral-300);margin-bottom:20px} .omav-steps__row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--color-divider); font-size:14px;line-height:1.55} .omav-steps__row .omav-icontile--sm{margin-top:1px} .omav-exit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .omav-exit__ink{background:var(--color-text);color:#fff;padding:clamp(20px,2.4vw,28px); display:flex;flex-direction:column;justify-content:center;gap:10px} .omav-exit__ink b{font-family:var(--font-heading);font-size:clamp(20px,2.2vw,27px);line-height:1.1} .omav-exit__ink small{font-size:13px;line-height:1.55;color:rgba(255,255,255,.75)} .omav-exit__act{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:12px;justify-content:center} /* ========================================================================== 14. Pagination, print, misc ========================================================================== */ .omav-pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:32px} .omav-pager .page-numbers{border:1px solid var(--color-divider);border-radius:999px;padding:9px 14px; font-size:13px;font-weight:700;color:var(--color-text)} .omav-pager .page-numbers:hover{background:var(--color-accent-100);color:var(--color-accent);text-decoration:none} .omav-pager .page-numbers.current{background:var(--color-accent);color:#fff;border-color:var(--color-accent)} .omav-empty{padding:40px 0;font-size:15px;color:var(--color-neutral-700)} @media print{ .omav-header,.omav-footer,.omav-launcher,.omav-stickybar,.omav-dialog{display:none!important} body{background:#fff} .omav-sec{border-bottom:1px solid #ddd;padding:18px 0} } /* ========================================================================== 14. Fixes — mobile sticky bar, brand lockup, application form ========================================================================== */ /* The sticky CTA bar covered content and the apply button on phones. Desktop only. */ @media (max-width:900px){ .omav-stickybar,.omav-stickybar.is-on{display:none!important} } /* Brand lockup: a real logo image replaces the placeholder mark + text wordmark. */ .omav-brand__logo{display:block;height:38px;width:auto;max-width:220px;flex:none} .omav-brand--footer .omav-brand__logo{filter:brightness(0) invert(1)} @media (max-width:600px){.omav-brand__logo{height:32px;max-width:172px}} /* Upload control was an inline