/* =========================================================
   OneClickPackaging – CORE styles (shared by every view)
   Design tokens, reset, layout, type, buttons and every reusable block.
   View-specific styles live in their own file (home.css, category.css …).
   Everything is scoped to .ocp (the wrapper printed by ocp_open()).
   ========================================================= */

.ocp {
	--ocp-teal: #00a79d;          /* brand teal (logo / top bar) */
	--ocp-teal-ink: #007a73;      /* teal dark enough for text & buttons */
	--ocp-teal-deep: #045a55;
	--ocp-navy: #113852;          /* brand heading navy */
	--ocp-night: #0b2a3d;
	--ocp-ink: #1d2b33;
	--ocp-muted: #53646e;
	--ocp-line: #dfe7e8;
	--ocp-tint: #eef7f6;
	--ocp-kraft: #c8a27a;
	--ocp-kraft-bg: #f6efe6;
	--ocp-white: #ffffff;
	--ocp-radius: 14px;
	--ocp-shadow: 0 1px 2px rgba(17, 56, 82, .06), 0 8px 24px rgba(17, 56, 82, .08);
	--ocp-gutter: clamp(20px, 5vw, 72px);   /* left/right page padding */
	--ocp-space: clamp(64px, 8vw, 112px);   /* vertical section spacing */
	--ocp-gap: clamp(16px, 2vw, 28px);      /* gap between cards */
	--ocp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	font-family: var(--ocp-font);
	color: var(--ocp-ink);
	background: var(--ocp-white);
	font-size: 16px;
	line-height: 1.65;
	padding: 0 !important;
	overflow-x: clip;
}

/* ---------- local reset (theme styles bleed otherwise) ---------- */
.ocp *, .ocp *::before, .ocp *::after { box-sizing: border-box; }
.ocp h1, .ocp h2, .ocp h3, .ocp p, .ocp ul, .ocp ol, .ocp figure { margin: 0; padding: 0; }
.ocp ul, .ocp ol { list-style: none; }
.ocp h1, .ocp h2, .ocp h3 { font-family: var(--ocp-font); color: var(--ocp-navy); letter-spacing: -.01em; text-wrap: balance; }
.ocp img { max-width: 100%; height: auto; display: block; }
.ocp a { color: var(--ocp-teal-ink); text-decoration: none; }
.ocp a:hover { color: var(--ocp-teal-deep); }
.ocp a:focus-visible, .ocp button:focus-visible, .ocp summary:focus-visible { outline: 3px solid var(--ocp-teal); outline-offset: 3px; border-radius: 6px; }
.ocp-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ocp .ocp-wrap { width: 100%; max-width: calc(1180px + (var(--ocp-gutter) * 2)); margin-inline: auto !important; padding-inline: var(--ocp-gutter) !important; }
.ocp-center { text-align: center; margin-top: clamp(32px, 4vw, 48px) !important; }

/* ---------- type ---------- */
.ocp-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ocp-teal-ink); margin-bottom: 10px !important; }
.ocp-eyebrow--light { color: #7fe0d8; }
.ocp-h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; font-weight: 700; }
.ocp-head { max-width: 680px; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.ocp-head__lead { margin-top: 14px !important; color: var(--ocp-muted); font-size: 17px; }
.ocp-head--left { text-align: left; margin-inline: 0; }
.ocp-head--row { max-width: none; text-align: left; display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ocp-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ---------- buttons ---------- */
.ocp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1.2; border: 2px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s; cursor: pointer; }
.ocp-btn:hover { transform: translateY(-1px); }
.ocp .ocp-btn--primary { background: var(--ocp-teal-ink); color: #fff; box-shadow: 0 6px 18px rgba(0, 122, 115, .28); }
.ocp .ocp-btn--primary:hover { background: var(--ocp-teal-deep); color: #fff; }
.ocp .ocp-btn--ghost { background: #fff; color: var(--ocp-navy); border-color: var(--ocp-line); }
.ocp .ocp-btn--ghost:hover { border-color: var(--ocp-teal); color: var(--ocp-navy); }
.ocp .ocp-btn--outline { background: transparent; color: var(--ocp-teal-ink); border-color: var(--ocp-teal-ink); }
.ocp .ocp-btn--outline:hover { background: var(--ocp-teal-ink); color: #fff; }
.ocp .ocp-btn--light { background: #fff; color: var(--ocp-navy); }
.ocp .ocp-btn--light:hover { background: var(--ocp-kraft-bg); color: var(--ocp-navy); }
.ocp .ocp-btn--line { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.ocp .ocp-btn--line:hover { border-color: #fff; color: #fff; }


/* =========================================================
   TRUST STRIP + MARQUEE
   ========================================================= */
.ocp-trust { background: #fff; border-bottom: 1px solid var(--ocp-line); }
.ocp-trust__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: 28px; flex-wrap: wrap; }
.ocp .ocp-trust__title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; color: var(--ocp-navy); letter-spacing: -.01em; }
.ocp-trust__title strong { color: var(--ocp-teal-ink); font-weight: 700; }
.ocp-trust__widget { flex: 1 1 320px; max-width: 520px; min-height: 52px; }
.ocp-marquee { overflow: hidden; background: var(--ocp-navy); color: #dbe7ee; padding-block: 16px; }
.ocp-marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.ocp-marquee__track i { width: 8px; height: 8px; border-radius: 2px; background: var(--ocp-teal); transform: rotate(45deg); flex: none; }
html:not(.ocp-motion) .ocp-marquee__track { animation: ocp-mq 40s linear infinite; }
@keyframes ocp-mq { to { transform: translateX(-50%); } }

/* =========================================================
   PARTNER + FEATURES
   ========================================================= */
.ocp .ocp-h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.12; font-weight: 700; color: var(--ocp-navy); }
.ocp-h1 .ocp-hl { color: var(--ocp-teal-ink); }
.ocp-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ocp-gap); }
.ocp-feature { position: relative; text-align: center; background: #fff; border: 1px solid var(--ocp-line); border-radius: 20px; padding: 36px 24px 30px; transition: box-shadow .3s, border-color .3s; transform-style: preserve-3d; }
.ocp-feature:hover { box-shadow: var(--ocp-shadow); border-color: transparent; }
.ocp-feature__icon { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 26px; background: var(--ocp-tint); }
.ocp-feature__icon img { width: 52px; height: 52px; object-fit: contain; }
.ocp-feature__icon .ocp-ico { width: 40px; height: 40px; color: var(--ocp-teal-ink); stroke-width: 1.5; }
.ocp-feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px !important; }
.ocp-feature p { font-size: 15px; color: var(--ocp-muted); line-height: 1.55; }

/* =========================================================
   QUOTE SECTION
   ========================================================= */
.ocp-quote-sec { background: linear-gradient(180deg, #fff 0%, var(--ocp-tint) 100%); scroll-margin-top: 90px; }
.ocp-quote-sec__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.ocp-quote-sec__copy .ocp-head__lead { max-width: 480px; }
.ocp-quote-sec .ocp-checks { margin-top: 28px !important; display: grid; gap: 14px; }
.ocp-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.ocp-checks .ocp-ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--ocp-teal-ink); color: #fff; stroke-width: 3; }
.ocp-checks strong { color: var(--ocp-navy); }
.ocp-quote-sec__contact { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.ocp-quote-sec__contact a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ocp-navy); }
.ocp-quote-sec__contact .ocp-ico { color: var(--ocp-teal-ink); width: 20px; height: 20px; }
.ocp-quote { position: relative; background: #fff; border-radius: 22px; box-shadow: 0 2px 4px rgba(17,56,82,.05), 0 24px 60px rgba(17,56,82,.14); padding: clamp(24px, 3vw, 40px); }

/* Fluent Forms inside the card */
.ocp-quote .fluentform .ff-el-group { margin-bottom: 14px; }
.ocp-quote .fluentform .ff-el-input--label label { font-size: 14px; font-weight: 600; color: var(--ocp-navy); }
.ocp-quote .fluentform .ff-el-form-control { width: 100%; max-width: 100%; border: 1.5px solid var(--ocp-line); border-radius: 10px; min-height: 48px; padding: 10px 14px; font-size: 15px; font-family: var(--ocp-font); color: var(--ocp-ink); background-color: #fbfdfd; transition: border-color .2s, box-shadow .2s; }
.ocp-quote .fluentform textarea.ff-el-form-control { min-height: 100px; }
.ocp-quote .fluentform .ff-el-form-control:focus { border-color: var(--ocp-teal); box-shadow: 0 0 0 3px rgba(0,167,157,.18); outline: none; background-color: #fff; }
.ocp-quote .fluentform .ff-el-form-check label { font-size: 14px; }
.ocp-quote .fluentform .ff-btn-submit,
.ocp-quote .fluentform button[type="submit"] { width: 100%; min-height: 56px; border-radius: 999px !important; background: var(--ocp-teal-ink) !important; border: 0 !important; color: #fff !important; font-weight: 600; font-size: 17px; font-family: var(--ocp-font); box-shadow: 0 6px 18px rgba(0,122,115,.28); transition: background .2s, transform .2s; }
.ocp-quote .fluentform .ff-btn-submit:hover { background: var(--ocp-teal-deep) !important; transform: translateY(-1px); }


/* =========================================================
   PAGE HERO (category, product and content pages)
   ========================================================= */
.ocp-phero {
	position: relative;
	padding-block: calc(var(--ocp-head-offset, 0px) + clamp(28px, 4vw, 56px)) clamp(48px, 6vw, 88px);
	background:
		linear-gradient(180deg, rgba(238,247,246,0) 0%, #fff 100%),
		repeating-linear-gradient(90deg, rgba(0,167,157,.07) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(0deg, rgba(0,167,157,.07) 0 1px, transparent 1px 48px),
		var(--ocp-tint);
	overflow: hidden;
}
.ocp-phero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.ocp-phero__grid--solo { grid-template-columns: minmax(0, 760px); }
.ocp .ocp-phero__title { margin-top: 6px !important; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; font-weight: 800; }
.ocp-phero__text { margin-top: 18px; max-width: 580px; color: var(--ocp-muted); font-size: 17px; line-height: 1.7; }
.ocp-phero__text p { margin-bottom: 12px !important; }
.ocp-phero__text p:last-child { margin-bottom: 0 !important; }
.ocp-phero__text a { text-decoration: underline; text-underline-offset: 3px; }
.ocp-phero__text strong, .ocp-phero__text b { color: var(--ocp-navy); font-weight: 600; }
.ocp-phero__more { overflow: hidden; margin-top: 12px; }
.ocp-phero__more.is-collapsed { max-height: 0; margin-top: 0; }
.ocp-phero__more h2, .ocp-phero__more h3 { font-size: 18px; margin: 14px 0 6px !important; }
.ocp-phero__more ul { list-style: disc; padding-left: 20px !important; margin-bottom: 12px !important; }
.ocp .ocp-more--left { margin: 8px 0 0; padding: 4px 0; }
.ocp-phero__chips { margin-top: 24px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.ocp-phero__chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--ocp-line); font-size: 13.5px; font-weight: 500; color: var(--ocp-navy); }
.ocp-phero__chips .ocp-ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ocp-teal-ink); color: #fff; stroke-width: 3.2; }
.ocp-phero__ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.ocp-phero__media { position: relative; }
.ocp-phero__media::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1.5px dashed rgba(0,122,115,.35); border-radius: 32px; pointer-events: none; }
.ocp-phero__frame { position: relative; border-radius: 28px; overflow: hidden; background: #fff; border: 8px solid #fff; box-shadow: 0 2px 4px rgba(17,56,82,.05), 0 30px 70px rgba(17,56,82,.18); aspect-ratio: 5 / 4; }
.ocp-phero__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.ocp-phero__badge { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(17,56,82,.16); font-size: 14px; font-weight: 600; color: var(--ocp-navy); white-space: nowrap; }
.ocp-phero__badge .ocp-ico { width: 20px; height: 20px; color: var(--ocp-teal-ink); }
.ocp-phero__badge--a { top: 22px; left: -22px; }
.ocp-phero__badge--b { bottom: 26px; right: -18px; }

/* breadcrumb */
.ocp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 18px; font-size: 13.5px; color: var(--ocp-muted); }
.ocp-crumbs a { color: var(--ocp-muted); font-weight: 500; }
.ocp-crumbs a:hover { color: var(--ocp-teal-ink); }
.ocp-crumbs__sep { color: #a6b4bb; }

/* =========================================================
   PRODUCT LISTING TOOLBAR, SORTING, PAGINATION (categories + shop)
   ========================================================= */
.ocp-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 44px); }
.ocp-toolbar__count .woocommerce-result-count { margin: 8px 0 0 !important; float: none !important; font-size: 14.5px; color: var(--ocp-muted); }
.ocp .woocommerce-ordering { margin: 0 !important; float: none !important; }
.ocp .woocommerce-ordering select { -webkit-appearance: none; appearance: none; min-height: 48px; min-width: 230px; padding: 10px 44px 10px 18px; border: 1.5px solid var(--ocp-line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23113852' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px; font: 500 14.5px var(--ocp-font); color: var(--ocp-navy); cursor: pointer; }
.ocp .woocommerce-ordering select:focus { outline: none; border-color: var(--ocp-teal); box-shadow: 0 0 0 3px rgba(0,167,157,.18); }
.ocp-pager { margin-top: clamp(32px, 4vw, 48px); }
.ocp .ocp-pager .woocommerce-pagination { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; border: 0 !important; }
.ocp .ocp-pager ul.page-numbers { display: contents !important; }
.ocp .ocp-pager ul.page-numbers li { display: contents !important; }
.ocp .ocp-pager a.page-numbers, .ocp .ocp-pager span.page-numbers { display: inline-grid !important; place-items: center; min-width: 46px; height: 46px; margin: 0 !important; padding: 0 12px !important; border-radius: 12px !important; border: 1.5px solid var(--ocp-line) !important; background: #fff !important; font: 600 15px var(--ocp-font); color: var(--ocp-navy) !important; line-height: 1 !important; box-shadow: none !important; transition: border-color .2s, color .2s; }
.ocp .ocp-pager a.page-numbers:hover { border-color: var(--ocp-teal) !important; color: var(--ocp-teal-ink) !important; }
.ocp .ocp-pager span.page-numbers.current { background: var(--ocp-teal-ink) !important; border-color: var(--ocp-teal-ink) !important; color: #fff !important; }
.ocp .ocp-pager a.page-numbers span { display: contents !important; }
.ocp-empty { padding: 32px; border-radius: var(--ocp-radius); background: var(--ocp-tint); text-align: center; color: var(--ocp-muted); }

/* word-mask reveal for split headings */
.ocp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.ocp-wi { display: inline-block; will-change: transform; }
.ocp-cta { background-size: 200% 200% !important; background-image: linear-gradient(120deg, #007a73, #045a55 45%, #0b6f86 70%, #007a73) !important; }

/* =========================================================
   MOTION STATES (only when JS + motion allowed; failsafe reveals after 3s)
   ========================================================= */
html.ocp-motion:not(.ocp-motion-done) .ocp-slide.is-active [data-anim],
html.ocp-motion:not(.ocp-motion-done) [data-reveal],
html.ocp-motion:not(.ocp-motion-done) [data-hero-anim],
html.ocp-motion:not(.ocp-motion-done) [data-hero-media],
html.ocp-motion:not(.ocp-motion-done) .ocp-phero .ocp-crumbs,
html.ocp-motion:not(.ocp-motion-done) .ocp-phero__title,
html.ocp-motion:not(.ocp-motion-done) .ocp [data-stagger] > * { opacity: 0; }
.ocp-cursor-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0,167,157,.14), rgba(0,167,157,0) 65%); transform: translate(-50%, -50%); z-index: 0; opacity: 0; transition: opacity .4s; }
.ocp-section:hover > .ocp-cursor-glow { opacity: 1; }
.ocp-section { position: relative; }
.ocp-section > .ocp-wrap { position: relative; z-index: 1; }

/* =========================================================
   SECTIONS
   ========================================================= */
.ocp-section { padding-block: var(--ocp-space); }
.ocp-section--tint { background: var(--ocp-tint); }
.ocp-section--kraft { background: var(--ocp-kraft-bg); }
.ocp-section--dark { background: var(--ocp-night); color: #c9d8e1; }
.ocp-section--dark .ocp-h2, .ocp-section--dark h3 { color: #fff; }

/* industry cards */
.ocp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ocp-gap); }
.ocp-card__link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ocp-line); border-radius: var(--ocp-radius); overflow: hidden; color: var(--ocp-ink); transition: box-shadow .25s, transform .25s, border-color .25s; }
.ocp-card__link:hover { box-shadow: var(--ocp-shadow); transform: translateY(-3px); border-color: transparent; color: var(--ocp-ink); }
.ocp-card__media { aspect-ratio: 4 / 3; background: var(--ocp-tint); overflow: hidden; }
.ocp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ocp-card__link:hover .ocp-card__media img { transform: scale(1.05); }
.ocp-card__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ocp-teal); }
.ocp-card__ph .ocp-ico { width: 48px; height: 48px; stroke-width: 1.2; }
.ocp-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.ocp-card__title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ocp-card__text { font-size: 14px; color: var(--ocp-muted); line-height: 1.55; flex: 1; }
.ocp-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ocp-teal-ink); }
.ocp-card__link:hover .ocp-card__more .ocp-ico { transform: translateX(3px); }
.ocp-card__more .ocp-ico { transition: transform .2s; }

/* steps (real sequence → numbered) */
.ocp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ocp-gap); position: relative; }
.ocp-step { position: relative; background: #fff; border-radius: var(--ocp-radius); padding: 28px 24px; box-shadow: 0 1px 2px rgba(17,56,82,.05); }
.ocp-step:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: calc(var(--ocp-gap) * -1); width: var(--ocp-gap); border-top: 2px dashed var(--ocp-teal); opacity: .5; }
.ocp-step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ocp-teal-ink); color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.ocp-step__title { font-size: 18px; font-weight: 700; margin-bottom: 6px !important; }
.ocp-step p { font-size: 15px; color: var(--ocp-muted); }

/* style tiles + pills */
.ocp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px !important; }
.ocp-pills a { display: inline-block; padding: 9px 16px; border: 1px solid var(--ocp-line); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ocp-navy); background: #fff; transition: border-color .2s, color .2s; }
.ocp-pills a:hover { border-color: var(--ocp-teal); color: var(--ocp-teal-ink); }

/* build your box */

/* products */
.ocp-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ocp-gap); }
.ocp-product a { display: flex; flex-direction: column; gap: 8px; color: var(--ocp-navy); }
.ocp-product__media { display: block; border-radius: var(--ocp-radius); overflow: hidden; background: #f4f6f7; aspect-ratio: 1; }
.ocp-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ocp-product a:hover img { transform: scale(1.05); }
.ocp-product__name { font-weight: 600; font-size: 16px; line-height: 1.35; }
.ocp-product__cta { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; color: var(--ocp-teal-ink); }

/* why */
.ocp-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.ocp-why__intro p { margin: 16px 0 28px !important; font-size: 17px; }
.ocp-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ocp-why__grid li { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--ocp-radius); padding: 24px 22px; }
.ocp-why__grid .ocp-ico { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: rgba(0,167,157,.2); color: #6fe3da; margin-bottom: 12px; }
.ocp-why__grid h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px !important; }
.ocp-why__grid p { font-size: 14px; line-height: 1.55; color: #b5c7d2; }

/* prose / SEO text */
.ocp .ocp-prose-wrap { max-width: calc(780px + (var(--ocp-gutter) * 2)); }
.ocp-prose-wrap .ocp-h2 { text-align: center; margin-bottom: 28px !important; }
.ocp-prose { position: relative; color: var(--ocp-ink); font-size: 16px; }
.ocp-prose p { margin-bottom: 16px !important; max-width: 72ch; }
.ocp-prose h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; margin: 0 0 18px !important; text-align: left; }
.ocp-prose h3 { font-size: 20px; font-weight: 700; margin: 26px 0 8px !important; }
.ocp-prose a { text-decoration: underline; text-underline-offset: 3px; }
.ocp-prose.is-collapsed { max-height: 220px; overflow: hidden; }
.ocp-prose.is-collapsed::after { content: ""; position: absolute; inset: auto 0 0 0; height: 110px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.ocp-more { display: block; margin: 18px auto 0; background: none; border: 0; font: 600 15px var(--ocp-font); color: var(--ocp-teal-ink); cursor: pointer; padding: 8px 14px; }
.ocp-more:hover { text-decoration: underline; }

/* FAQ */
.ocp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.ocp-faq__head { text-align: left; margin: 0; position: sticky; top: 120px; }
.ocp-faq__list { display: grid; gap: 12px; }
.ocp-faq__item { background: #fff; border-radius: 12px; border: 1px solid var(--ocp-line); transition: border-color .2s, box-shadow .2s; }
.ocp-faq__item[open] { border-color: var(--ocp-teal); box-shadow: var(--ocp-shadow); }
.ocp-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; }
.ocp-faq__item summary::-webkit-details-marker { display: none; }
.ocp-faq__item summary h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.ocp-faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ocp-tint); }
.ocp-faq__icon::before, .ocp-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ocp-teal-ink); transform: translate(-50%, -50%); transition: transform .2s; }
.ocp-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ocp-faq__item[open] .ocp-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.ocp-faq__a { padding: 0 20px 20px; color: var(--ocp-muted); font-size: 15px; }

/* blog */
.ocp-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.ocp-post a { display: flex; flex-direction: column; gap: 8px; color: var(--ocp-ink); }
.ocp-post__media { display: block; aspect-ratio: 16 / 9; border-radius: var(--ocp-radius); overflow: hidden; background: var(--ocp-tint); margin-bottom: 6px; }
.ocp-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ocp-post a:hover img { transform: scale(1.04); }
.ocp-post time { font-size: 13px; color: var(--ocp-muted); font-weight: 500; }
.ocp-post__title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.ocp-post a:hover .ocp-post__title { color: var(--ocp-teal-ink); }
.ocp-post p { font-size: 15px; color: var(--ocp-muted); }

/* final CTA */
.ocp-cta { background: linear-gradient(120deg, var(--ocp-teal-ink), var(--ocp-teal-deep)); color: #e3f6f4; padding-block: clamp(56px, 7vw, 88px); }
.ocp-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.ocp-cta .ocp-h2 { color: #fff; }
.ocp-cta p { margin-top: 8px !important; font-size: 17px; }
.ocp-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* mobile quick bar */
.ocp-mbar { display: none; }

/* =========================================================
   RESPONSIVE
   Desktop ≥1100 · Laptop/tablet 768–1099 · Phone <768 · Small phone <420
   ========================================================= */
@media (max-width: 1099px) {
	.ocp-why { grid-template-columns: 1fr; }
	.ocp-why__intro { max-width: 640px; }
	.ocp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ocp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ocp-step::after { display: none; }
}
@media (max-width: 991px) {
	.ocp-phero__grid { grid-template-columns: 1fr; }
	.ocp-phero__media { max-width: 560px; }
	.ocp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ocp-quote-sec__grid { grid-template-columns: 1fr; }
	.ocp-quote-sec__copy { max-width: 640px; }
	.ocp-faq { grid-template-columns: 1fr; }
	.ocp-faq__head { position: static; text-align: center; margin-inline: auto; max-width: 640px; }
	.ocp-posts { grid-template-columns: 1fr 1fr; }
	.ocp-products { grid-template-columns: 1fr 1fr; }
	.ocp-cta__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
	.ocp .ocp-phero__title { font-size: clamp(30px, 8.4vw, 40px); }
	.ocp-phero__text { font-size: 16px; }
	.ocp-phero__ctas .ocp-btn { flex: 1 1 100%; }
	.ocp-phero__chips li { font-size: 12.5px; padding: 6px 12px 6px 8px; }
	.ocp-phero__media::before { inset: -10px 10px 10px -10px; }
	.ocp-phero__badge { font-size: 12.5px; padding: 8px 12px; }
	.ocp-phero__badge--a { left: 10px; top: 12px; }
	.ocp-phero__badge--b { right: 10px; bottom: 12px; }
	.ocp-toolbar { align-items: stretch; }
	.ocp-toolbar__sort, .ocp .woocommerce-ordering, .ocp .woocommerce-ordering select { width: 100%; }
	.ocp { font-size: 15.5px; }
	/* hero: image on top, glass card below (overlapping) */

	.ocp-trust__inner { flex-direction: column; text-align: center; gap: 16px; padding-block: 28px 24px; }
	.ocp-trust__widget { width: 100%; flex: none; }
	.ocp-marquee { padding-block: 13px; }
	.ocp-marquee__track { font-size: 14px; gap: 22px; }

	.ocp-features { gap: 12px; }
	.ocp-feature { padding: 24px 14px 20px; border-radius: 16px; }
	.ocp-feature__icon { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 12px; }
	.ocp-feature__icon img { width: 38px; height: 38px; }
	.ocp-feature h3 { font-size: 15px; }
	.ocp-feature p { font-size: 13px; }

	.ocp-checks li { font-size: 15px; }
	.ocp-quote { padding: 24px 20px; border-radius: 18px; }
	.ocp-quote-sec__contact { flex-direction: column; }

	.ocp-head { text-align: left; margin-inline: 0; }
	.ocp-head__lead { font-size: 16px; }

	/* industry cards: one clean row per industry (image left, text right) */
	.ocp-cards { grid-template-columns: 1fr; gap: 14px; }
	.ocp-card__link { flex-direction: row; align-items: stretch; }
	.ocp-card__media { flex: 0 0 112px; aspect-ratio: auto; min-height: 112px; }
	.ocp-card__body { padding: 16px 18px; gap: 4px; justify-content: center; }
	.ocp-card__title { font-size: 16px; }
	.ocp-card__text { font-size: 13.5px; flex: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.ocp-card__more { margin-top: 4px; }

	/* steps: number left, text right */
	.ocp-steps { grid-template-columns: 1fr; gap: 14px; }
	.ocp-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 22px 20px; }
	.ocp-step__n { grid-row: span 2; margin: 0; }
	.ocp-step__title { font-size: 17px; margin: 8px 0 4px !important; }

	.ocp-pills { justify-content: flex-start; gap: 8px; margin-top: 32px !important; }
	.ocp-pills a { padding: 8px 14px; font-size: 13.5px; }


	.ocp-products { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
	.ocp-product__name { font-size: 14.5px; }

	/* why: icon left, text right */
	.ocp-why__grid { grid-template-columns: 1fr; gap: 12px; }
	.ocp-why__grid li { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 20px; }
	.ocp-why__grid .ocp-ico, .ocp-why__grid .ocp-why__ico { grid-row: span 2; margin: 0; }

	.ocp-prose-wrap .ocp-h2 { text-align: left; }
	.ocp-faq__head { text-align: left; margin-inline: 0; }
	.ocp-faq__item summary { padding: 16px 18px; }
	.ocp-faq__item summary h3 { font-size: 15.5px; }
	.ocp-faq__a { padding: 0 18px 18px; }

	.ocp-posts { grid-template-columns: 1fr; gap: 32px; }
	.ocp-cta__actions { width: 100%; }
	.ocp-cta__actions .ocp-btn { flex: 1 1 100%; }

	/* sticky quote / call bar; right side left free for the chat bubble */
	.ocp-mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px; background: rgba(255,255,255,.97); box-shadow: 0 -4px 18px rgba(17,56,82,.12); transform: translateY(110%); transition: transform .25s; }
	.ocp-mbar.is-visible { transform: none; }
	.ocp-mbar a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; }
	.ocp-mbar__quote { flex: 1; background: #007a73; color: #fff !important; }
	.ocp-mbar__call { width: 48px; flex: none; border: 2px solid #007a73; color: #007a73 !important; }
	.ocp-mbar .ocp-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
	body.ocp-page { padding-bottom: 70px; }
}
@media (max-width: 419px) {
	.ocp-card__media { flex-basis: 96px; min-height: 104px; }
	.ocp-products { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ocp *, .ocp-mbar { transition: none !important; }
	html:has(.ocp) { scroll-behavior: auto; }
}

/* =========================================================
   ANIMATED ICONS (inc/anim-icons.php)
   ========================================================= */
.ocp-ai { width: 100%; height: 100%; overflow: visible; color: var(--ocp-teal-ink); --ai-a: #d6f1ee; --ai-b: #9fe0d9; --ai-accent: var(--ocp-kraft); }
.ocp-ai * { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.ocp-ai .ai-line, .ocp-ai path:not([class]), .ocp-ai g:not([class]) path, .ocp-ai .ai-ticks path, .ocp-ai .ai-speed path, .ocp-ai .ai-wheel path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ocp-ai .ai-accent { stroke: var(--ai-accent) !important; }
.ocp-ai .ai-fill-a { fill: var(--ai-a); } .ocp-ai .ai-fill-b { fill: var(--ai-b); } .ocp-ai .ai-fill-c { fill: #fff; }
.ocp-ai .ai-dot, .ocp-ai .ai-pupil { fill: currentColor; }
/* cube */
.ai-orbit { fill: none; stroke: var(--ai-accent); stroke-width: 2; stroke-dasharray: 6 5; animation: aiDash 3s linear infinite; }
.ocp-ai--cube .ai-float { animation: aiFloat 3s ease-in-out infinite; }
@keyframes aiDash { to { stroke-dashoffset: -44; } }
@keyframes aiFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-4deg); } }
/* clock */
.ai-face { fill: #fff; stroke: currentColor; stroke-width: 2.4; }
.ai-hand-m, .ai-hand-h { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transform-box: view-box; transform-origin: 24px 24px; }
.ai-hand-m { stroke: var(--ai-accent); animation: aiSpin 4s linear infinite; }
.ai-hand-h { animation: aiSpin 48s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
/* ruler */
.ocp-ai--ruler .ai-measure { transform-origin: left center; animation: aiMeasure 2.6s cubic-bezier(.6,0,.2,1) infinite; }
.ai-tape { stroke: var(--ai-accent); stroke-width: 3; stroke-linecap: round; fill: none; animation: aiTape 2.6s ease-in-out infinite; }
@keyframes aiMeasure { 0% { transform: scaleX(.25); opacity: .4; } 45%, 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.25); opacity: .4; } }
@keyframes aiTape { 0%, 100% { stroke-dasharray: 0 20; } 50% { stroke-dasharray: 14 20; } }
/* headset */
.ai-pulse { fill: none; stroke: var(--ai-accent); stroke-width: 2; opacity: 0; animation: aiPulse 2.4s ease-out infinite; }
.ai-pulse--2 { animation-delay: 1.2s; }
@keyframes aiPulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
/* pen */
.ai-draw { fill: none; stroke: var(--ai-accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 60; animation: aiDraw 3s ease-in-out infinite; }
.ocp-ai--pen .ai-write { animation: aiWrite 3s ease-in-out infinite; }
@keyframes aiDraw { 0% { stroke-dashoffset: 60; } 60%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
@keyframes aiWrite { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(-3px, 3px) rotate(-6deg); } 60% { transform: translate(2px, 1px) rotate(4deg); } }
/* tag */
.ocp-ai--tag .ai-swing { transform-box: view-box; transform-origin: 32px 14px; animation: aiSwing 2.8s ease-in-out infinite; }
@keyframes aiSwing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
/* eye */
.ocp-ai--eye .ai-blink { animation: aiBlink 4.5s ease-in-out infinite; }
.ocp-ai--eye .ai-look { animation: aiLook 4.5s ease-in-out infinite; }
@keyframes aiBlink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes aiLook { 0%, 20% { transform: translateX(0); } 30%, 40% { transform: translateX(-4px); } 60%, 70% { transform: translateX(4px); } 85%, 100% { transform: translateX(0); } }
/* box */
.ocp-ai--box .ai-bounce { animation: aiBounce 1.8s cubic-bezier(.5,0,.5,1) infinite; }
.ai-shadow { fill: rgba(17,56,82,.18); animation: aiShadow 1.8s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes aiBounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .94); } 50% { transform: translateY(-6px) scale(.98, 1.03); } }
@keyframes aiShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.7); opacity: .5; } }
/* truck */
.ocp-ai--truck .ai-drive { animation: aiRumble .5s ease-in-out infinite; }
.ocp-ai--truck .ai-wheel { animation: aiSpin .8s linear infinite; }
.ai-tyre { fill: #fff; stroke: currentColor; stroke-width: 2; }
.ocp-ai--truck .ai-speed path { stroke: var(--ai-accent); animation: aiSpeed 1s linear infinite; }
.ocp-ai--truck .ai-speed path:nth-child(2) { animation-delay: .3s; } .ocp-ai--truck .ai-speed path:nth-child(3) { animation-delay: .6s; }
@keyframes aiRumble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes aiSpeed { 0% { transform: translateX(6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(-6px); opacity: 0; } }
/* send */
.ocp-ai--send .ai-glide { animation: aiGlide 3.2s ease-in-out infinite; }
.ai-trail { fill: none; stroke: var(--ai-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 4; animation: aiDash 2s linear infinite; }
@keyframes aiGlide { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3px, -4px) rotate(-5deg); } }
/* check */
.ai-ring { fill: var(--ai-a); stroke: none; }
.ai-ring-fill { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-dasharray: 107; stroke-linecap: round; transform: rotate(-90deg); animation: aiRing 3.4s ease-in-out infinite; }
.ai-tick { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; animation: aiTick 3.4s ease-in-out infinite; }
@keyframes aiRing { 0% { stroke-dashoffset: 107; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 107; } }
@keyframes aiTick { 0%, 35% { stroke-dashoffset: 26; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 26; } }
/* on dark sections */
.ocp-section--dark .ocp-ai { color: #7fe8df; --ai-a: rgba(0,167,157,.22); --ai-b: rgba(0,167,157,.45); }
.ocp-section--dark .ai-face, .ocp-section--dark .ai-tyre { fill: #0f3346; }
.ocp-section--dark .ai-fill-c { fill: rgba(255,255,255,.85); }
@media (prefers-reduced-motion: reduce) { .ocp-ai, .ocp-ai * { animation: none !important; } }

.ocp .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.ocp-section--soft { background: linear-gradient(180deg, #fff 0%, #f7fbfb 100%); }

/* ---------- feature cards with animated icons ---------- */
.ocp-feature--ai { overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }
.ocp-feature--ai::before { content: ""; position: absolute; left: 50%; top: -60px; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(0,167,157,.14), transparent 70%); transition: transform .6s; pointer-events: none; }
.ocp-feature--ai:hover { transform: translateY(-8px); }
.ocp-feature--ai:hover::before { transform: scale(1.4); }
.ocp-feature--ai .ocp-feature__icon { position: relative; width: 96px; height: 96px; padding: 18px; background: linear-gradient(145deg, #fff, var(--ocp-tint)); box-shadow: inset 0 0 0 1px rgba(0,122,115,.12), 0 12px 26px rgba(0,122,115,.14); }

/* ---------- why us: animated icon tiles ---------- */
.ocp-why__ico { display: grid; place-items: center; width: 54px; height: 54px; padding: 9px; margin-bottom: 14px; border-radius: 16px; background: rgba(0,167,157,.14); box-shadow: inset 0 0 0 1px rgba(127,232,223,.18); }
.ocp-why__grid li { position: relative; overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s, border-color .4s; }
.ocp-why__grid li::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(0,167,157,.25), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.ocp-why__grid li:hover { transform: translateY(-6px); background: rgba(255,255,255,.08); border-color: rgba(127,232,223,.35); }
.ocp-why__grid li:hover::after { opacity: 1; }

/* ---------- image category tiles (homepage) ---------- */
.ocp-ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ocp-gap); }
.ocp-ctile a { position: relative; display: block; aspect-ratio: 4 / 3.3; border-radius: 24px; overflow: hidden; background: var(--ocp-tint); box-shadow: 0 14px 34px rgba(17,56,82,.12); isolation: isolate; }
.ocp-ctile__media, .ocp-ctile__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ocp-ctile__media img { object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.ocp-ctile a:hover .ocp-ctile__media img { transform: scale(1.08); }
.ocp-ctile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,61,0) 40%, rgba(11,42,61,.82) 100%); transition: background .4s; }
.ocp-ctile a:hover .ocp-ctile__shade { background: linear-gradient(180deg, rgba(0,122,115,.05) 20%, rgba(4,90,85,.9) 100%); }
.ocp-ctile__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 12px; padding: 22px; color: #fff; }
.ocp-ctile__count { grid-column: 1; justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.ocp-ctile__title { grid-column: 1; font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; line-height: 1.25; }
.ocp-ctile__go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ocp-teal-ink); transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s, color .3s; }
.ocp-ctile__go .ocp-ico { width: 20px; height: 20px; }
.ocp-ctile a:hover .ocp-ctile__go { transform: rotate(-45deg); background: var(--ocp-teal); color: #fff; }

/* ---------- how it works: animated timeline ---------- */
.ocp-flow-sec { position: relative; overflow: hidden; background: #fff; }
.ocp-flow-sec__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,122,115,.14) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); pointer-events: none; }
.ocp-flow-sec .ocp-wrap { position: relative; }
.ocp-flow { position: relative; margin-top: 12px; }
.ocp-flow__track { position: absolute; left: 12.5%; right: 12.5%; top: 52px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(0,122,115,.25) 0 10px, transparent 10px 18px); }
.ocp-flow__fill { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--ocp-teal), var(--ocp-teal-ink)); transform: scaleX(0); transform-origin: left center; }
.ocp-flow__runner { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 10px; background: var(--ocp-kraft); color: #fff; box-shadow: 0 8px 18px rgba(200,162,122,.5); opacity: 0; }
.ocp-flow__runner .ocp-ico { width: 18px; height: 18px; }
.ocp-flow__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ocp-gap); counter-reset: none; }
.ocp-flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ocp-flow__node { position: relative; z-index: 1; width: 108px; height: 108px; padding: 22px; border-radius: 32px; background: #fff; border: 2px solid var(--ocp-line); box-shadow: 0 14px 32px rgba(17,56,82,.1); transition: border-color .5s, box-shadow .5s, transform .5s cubic-bezier(.2,.8,.2,1), background .5s; }
.ocp-flow__icon { display: block; width: 100%; height: 100%; }
.ocp-flow__n { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ocp-line); color: var(--ocp-muted); font-size: 14px; font-weight: 800; box-shadow: 0 0 0 4px #fff; transition: background .5s, color .5s, transform .5s; }
.ocp-flow__card { position: relative; overflow: hidden; margin-top: 22px; width: 100%; flex: 1; padding: 24px 22px 22px; border-radius: 22px; background: rgba(255,255,255,.9); border: 1px solid var(--ocp-line); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s; }
.ocp-flow__meta { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: var(--ocp-tint); color: var(--ocp-teal-deep); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.ocp .ocp-flow__title { font-size: 18px; font-weight: 700; margin-bottom: 6px !important; }
.ocp-flow__card p { position: relative; z-index: 1; font-size: 15px; color: var(--ocp-muted); line-height: 1.6; }
.ocp-flow__big { position: absolute; right: 12px; bottom: -14px; font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: rgba(0,122,115,.06); pointer-events: none; transition: color .5s; }
/* active step */
.ocp-flow__step.is-on .ocp-flow__node { border-color: var(--ocp-teal); box-shadow: 0 18px 40px rgba(0,122,115,.25); transform: translateY(-4px); background: linear-gradient(145deg, #fff, #e8f7f5); }
.ocp-flow__step.is-on .ocp-flow__n { background: var(--ocp-teal-ink); color: #fff; transform: scale(1.08); }
.ocp-flow__step.is-on .ocp-flow__card { border-color: rgba(0,122,115,.3); box-shadow: 0 22px 50px rgba(17,56,82,.1); }
.ocp-flow__step.is-on .ocp-flow__big { color: rgba(0,122,115,.12); }
.ocp-flow__step:hover .ocp-flow__card { transform: translateY(-6px); }
.ocp-flow__cta { margin-top: 40px !important; }
html:not(.ocp-motion) .ocp-flow__fill { transform: none; }
html:not(.ocp-motion) .ocp-flow__step .ocp-flow__n { background: var(--ocp-teal-ink); color: #fff; }

/* ---------- why custom packaging (homepage SEO cards) ---------- */
.ocp-seo__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ocp-seo__intro { position: sticky; top: calc(var(--ocp-head-offset, 0px) + 96px); }
.ocp-seo__lead { margin: 18px 0 28px !important; font-size: 17px; line-height: 1.75; color: var(--ocp-muted); }
.ocp-seo__lead a, .ocp-seo__card a { color: var(--ocp-teal-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,122,115,.35); }
.ocp-seo__lead strong { color: var(--ocp-navy); }
.ocp-seo__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ocp-seo__card { position: relative; padding: 26px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--ocp-line); box-shadow: 0 10px 30px rgba(17,56,82,.06); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }
.ocp-seo__card:nth-child(even) { margin-top: 36px; margin-bottom: -36px; }
.ocp-seo__card:hover { border-color: rgba(0,122,115,.35); box-shadow: 0 24px 50px rgba(17,56,82,.12); }
.ocp-seo__ico { display: block; width: 58px; height: 58px; padding: 10px; margin-bottom: 16px; border-radius: 18px; background: var(--ocp-tint); }
.ocp .ocp-seo__card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px !important; }
.ocp-seo__card p { font-size: 15px; line-height: 1.7; color: var(--ocp-muted); }

@media (max-width: 991px) {
	.ocp-ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ocp-flow__track { left: 41px; right: auto; top: 54px; bottom: 54px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, rgba(0,122,115,.25) 0 10px, transparent 10px 18px); }
	.ocp-flow__fill { transform: scaleY(0); transform-origin: center top; }
	.ocp-flow__runner { left: 50%; top: 0; margin: -17px 0 0 -17px; }
	.ocp-flow__steps { grid-template-columns: 1fr; gap: 22px; }
	.ocp-flow__step { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; }
	.ocp-flow__node { flex: none; width: 86px; height: 86px; padding: 17px; border-radius: 26px; }
	.ocp-flow__card { margin-top: 0; }
	.ocp-seo__grid { grid-template-columns: 1fr; }
	.ocp-seo__intro { position: static; }
	.ocp-seo__card:nth-child(even) { margin: 0; }
}
@media (max-width: 767px) {
	.ocp-ctiles { gap: 12px; }
	.ocp-ctile a { aspect-ratio: 4 / 4.6; border-radius: 18px; }
	.ocp-ctile__body { padding: 14px; grid-template-columns: 1fr; }
	.ocp-ctile__go { display: none; }
	.ocp-ctile__title { font-size: 15.5px; }
	.ocp-ctile__count { font-size: 11px; padding: 3px 8px; }
	.ocp-flow__track { left: 35px; }
	.ocp-flow__node { width: 72px; height: 72px; padding: 14px; border-radius: 22px; }
	.ocp-flow__n { width: 26px; height: 26px; font-size: 12px; top: -8px; right: -8px; }
	.ocp-flow__card { padding: 18px 16px; }
	.ocp-flow__big { font-size: 56px; }
	.ocp-seo__cards { grid-template-columns: 1fr; gap: 12px; }
	.ocp-seo__card { padding: 22px 20px; }
	.ocp-feature--ai .ocp-feature__icon { width: 72px; height: 72px; padding: 13px; }
	.ocp-why__ico { width: 46px; height: 46px; padding: 8px; margin-bottom: 0; }
}

/* =========================================================
   QUOTE SECTION v2 (ocp_quote_section) – animated, inviting form
   ========================================================= */
.ocp-qs { position: relative; overflow: hidden; scroll-margin-top: 90px; background: linear-gradient(160deg, #f4fbfa 0%, #e9f6f4 45%, #f7efe5 100%); }
.ocp-qs__bg { position: absolute; inset: 0; pointer-events: none; }
.ocp-qs__bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .6; }
.ocp-qs__bg span:nth-child(1) { width: 420px; height: 420px; left: -120px; top: -100px; background: radial-gradient(circle, rgba(0,167,157,.35), transparent 70%); animation: ocpQsB1 16s ease-in-out infinite alternate; }
.ocp-qs__bg span:nth-child(2) { width: 380px; height: 380px; right: 10%; bottom: -160px; background: radial-gradient(circle, rgba(200,162,122,.4), transparent 70%); animation: ocpQsB2 20s ease-in-out infinite alternate; }
.ocp-qs__bg span:nth-child(3) { width: 300px; height: 300px; right: -80px; top: 10%; background: radial-gradient(circle, rgba(17,56,82,.18), transparent 70%); animation: ocpQsB1 18s ease-in-out infinite alternate-reverse; }
@keyframes ocpQsB1 { to { transform: translate(120px, 60px) scale(1.15); } }
@keyframes ocpQsB2 { to { transform: translate(-100px, -60px) scale(1.2); } }
.ocp-qs__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ocp-qs__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,122,115,.18); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ocp-teal-ink); box-shadow: 0 8px 20px rgba(0,122,115,.08); }
.ocp-qs__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #16b364; }
.ocp-qs__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #16b364; animation: ocpQsPing 2s ease-out infinite; }
@keyframes ocpQsPing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.ocp .ocp-qs__title { margin-top: 16px !important; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.ocp-qs__lead { margin-top: 14px !important; max-width: 500px; font-size: 17px; line-height: 1.7; color: #3e5560; }
.ocp-qs__perks { margin-top: 26px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; }
.ocp-qs__perks li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.85); border: 1px solid rgba(17,56,82,.07); box-shadow: 0 10px 26px rgba(17,56,82,.06); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ocp-qs__perks li:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(17,56,82,.12); }
.ocp-qs__perk-ico { flex: none; width: 46px; height: 46px; padding: 8px; border-radius: 14px; background: var(--ocp-tint); }
.ocp-qs__perks strong { display: block; font-size: 15px; color: var(--ocp-navy); line-height: 1.25; }
.ocp-qs__perks small { display: block; font-size: 13px; color: #4b5d67; }
.ocp-qs__trust { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #3e5560; }
.ocp-qs__trust strong { color: var(--ocp-navy); }
.ocp-qs__trust a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ocp-qs__seal { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #16b364; color: #fff; }
.ocp-qs__seal .ocp-ico { width: 15px; height: 15px; stroke-width: 3; }
.ocp-qs__contact { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ocp-qs__contact a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ocp-navy) !important; }
.ocp-qs__contact span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ocp-teal-ink); box-shadow: 0 6px 16px rgba(17,56,82,.08); transition: background .25s, color .25s; }
.ocp-qs__contact a:hover span { background: var(--ocp-teal-ink); color: #fff; }
.ocp-qs__contact .ocp-ico { width: 17px; height: 17px; }

/* the card: animated gradient border + gentle float */
.ocp-qs__card { position: relative; padding: clamp(22px, 2.6vw, 34px); border-radius: 28px; background: #fff; box-shadow: 0 2px 4px rgba(17,56,82,.04), 0 34px 90px rgba(17,56,82,.18); isolation: isolate; }
.ocp-qs__card::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 30px; background: conic-gradient(from var(--qs-a, 0deg), #00a79d, #c8a27a, #113852, #00a79d); animation: ocpQsSpin 6s linear infinite; }
.ocp-qs__card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px; background: #fff; }
@property --qs-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ocpQsSpin { to { --qs-a: 360deg; } }
.ocp-qs__card.is-focus { box-shadow: 0 2px 4px rgba(17,56,82,.04), 0 40px 100px rgba(0,122,115,.28); }
.ocp-qs__card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ocp-qs__card-title { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; color: var(--ocp-navy); line-height: 1.25; }
.ocp-qs__card-sub { margin-top: 4px !important; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #4b5d67; }
.ocp-qs__card-sub .ocp-ico { width: 15px; height: 15px; color: var(--ocp-teal-ink); }
.ocp-qs__meter { position: relative; flex: none; width: 56px; height: 56px; }
.ocp-qs__meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ocp-qs__meter circle { fill: none; stroke-width: 4; }
.ocp-qs__meter-bg { stroke: var(--ocp-tint); }
.ocp-qs__meter-fg { stroke: var(--ocp-teal-ink); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.ocp-qs__meter span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--ocp-navy); }
.ocp-qs__meter.is-done .ocp-qs__meter-fg { stroke: #16b364; }
.ocp-qs__bar { position: relative; margin: 18px 0 8px; height: 1px; background: var(--ocp-line); }
.ocp-qs__bar span { position: absolute; left: 0; top: -1px; height: 3px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--ocp-teal), var(--ocp-teal-ink)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ocp-qs__privacy { margin-top: 14px !important; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #4b5d67; text-align: center; }
.ocp-qs__privacy .ocp-ico { width: 15px; height: 15px; color: var(--ocp-teal-ink); }

/* form inside the card */
.ocp .ocp-qs__form { padding: 12px 0 0; box-shadow: none; border-radius: 0; background: transparent; }
.ocp-qs__form .fluentform .ff-el-group { margin-bottom: 14px; }
.ocp-qs__form .fluentform .ff-t-container { display: flex; gap: 10px; }
.ocp-qs__form .fluentform .ff-t-cell { padding: 0 !important; min-width: 0; flex: 1 1 0 !important; }
.ocp-qs__form .fluentform .ff-el-input--label label { font-size: 14px; font-weight: 600; color: var(--ocp-navy); }
.ocp-qs__form .fluentform .ff-el-form-control { background-color: #f8fbfb; border: 1.5px solid #d3e0e2; transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s; }
.ocp-qs__form .fluentform .ff-el-form-control::placeholder { color: #6b7d86; opacity: 1; }
.ocp-qs__form .fluentform .ff-el-form-control:hover { border-color: #b4cdd0; }
.ocp-qs__form .fluentform .ff-el-form-control:focus { background-color: #fff; border-color: var(--ocp-teal); box-shadow: 0 0 0 4px rgba(0,167,157,.16); transform: translateY(-1px); }
.ocp-qs__form .fluentform .ff-el-group.is-filled .ff-el-form-control { border-color: rgba(0,122,115,.5); background-color: #fff; }
.ocp-qs__form .fluentform input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ocp-qs__form .fluentform input[type="number"]::-webkit-outer-spin-button, .ocp-qs__form .fluentform input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ocp-qs__form .fluentform .ff_list_inline .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 8px; }
.ocp-qs__form .fluentform .ff_list_inline .ff-el-form-check { margin: 0 !important; }
.ocp-qs__form .fluentform .ff-el-form-check-label { display: inline-flex !important; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1.5px solid #d3e0e2; background: #f8fbfb; font-size: 14px !important; font-weight: 500; color: var(--ocp-navy); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.ocp-qs__form .fluentform .ff-el-form-check-label:hover { border-color: var(--ocp-teal); transform: translateY(-1px); }
.ocp-qs__form .fluentform .ff-el-form-check-input { accent-color: var(--ocp-teal-ink); width: 16px; height: 16px; margin: 0 !important; }
.ocp-qs__form .fluentform .ff-el-form-check-label:has(input:checked), .ocp-qs__form .fluentform .ff_item_selected .ff-el-form-check-label { border-color: var(--ocp-teal-ink); background: var(--ocp-tint); color: var(--ocp-teal-deep); }
.ocp-qs__form .fluentform .ff-btn-submit { position: relative; overflow: hidden; }
.ocp-qs__form .fluentform .ff-btn-submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: ocpQsShine 4.5s ease-in-out infinite 2s; }
@keyframes ocpQsShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.ocp-qs__form .fluentform .ff_columns_total_1:empty, .ocp-qs__form .fluentform .ff-t-cell:empty { display: none; }

@media (max-width: 991px) {
	.ocp-qs__grid { grid-template-columns: 1fr; }
	.ocp-qs__copy { max-width: 640px; }
}
@media (max-width: 767px) {
	.ocp-qs__perks { grid-template-columns: 1fr 1fr; gap: 8px; }
	.ocp-qs__perks li { padding: 10px; gap: 8px; border-radius: 14px; }
	.ocp-qs__perk-ico { width: 38px; height: 38px; padding: 6px; border-radius: 11px; }
	.ocp-qs__perks strong { font-size: 13.5px; } .ocp-qs__perks small { font-size: 12px; }
	.ocp-qs__card { padding: 20px 16px; border-radius: 22px; } .ocp-qs__card::before { border-radius: 24px; } .ocp-qs__card::after { border-radius: 22px; }
	.ocp-qs__form .fluentform .ff-t-container { flex-wrap: wrap; gap: 8px; }
	.ocp-qs__form .fluentform .ff-t-cell { flex: 1 1 calc(50% - 4px) !important; }
	.ocp-qs__form .fluentform .ff_columns_total_3 > .ff-t-cell:first-child { flex-basis: 100% !important; }
	.ocp-qs__contact { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.ocp-qs__bg span, .ocp-qs__dot::after, .ocp-qs__card::before, .ocp-qs__form .fluentform .ff-btn-submit::after { animation: none; }
}

/* ---------- readability on dark backgrounds ---------- */
.ocp-section--dark { color: #dbe7ee; }
.ocp-why__intro p { color: #dbe7ee; }
.ocp-why__grid p { color: #cddde6; }
.ocp-flow__big { display: none; }