/* Group home (template-home-main.php): generated from vet2.css on 2026-10-18 with the group palette (evergreen #0F2E22, Maizer green
   #2D5A40, logo leaf #6AAE35, sage #EFF5EA), then the home sections at the end. */
/* Veterinary v2 (template-vet-v2.php). HERO = a scroll story: text left; right a rounded pentagon (the "shape") cut by the screen's
   top-right corner, with one product and its three props per scene: 1 = Maizer (3D brand mark), 2 = Bioguard VX, 3 = P-S Maizer.
   Motion: assets/js/vet2-hero.js. How to change products, props, colours or timing: README-vet2-hero.md in the theme folder.
   All hero geometry is in --u (set on .mh-stage): .83% of the hero width on desktop (at most 10.3px), 1% on phones (at most 4.5px),
   so shape, products and props stay aligned at every width. Sections further down: Figma 530:7850 on COLORS-AND-FONTS.md; their
   scroll effects in assets/js/vet2-fx.js. */
.mh { --red: #2D5A40; --red-hover: #234733; --wine: #0F2E22; --blush: #EFF5EA; --navy: #1C2A50; --ink: #111114; --grey: #5B606B;
  position: relative; background: #fff; color: var(--ink); font: 400 16px/26px Inter, system-ui, sans-serif; }
.mh *, .mh *::before, .mh *::after { box-sizing: border-box; }
.mh :where(h1, h2, p, ul) { margin: 0; padding: 0; }
:where(.mh) :where(a) { color: inherit; text-decoration: none; }
.mh a:focus-visible, .mh button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
/* the hero box; it is also the size container for --u. --mh-tint: a light wash per product, set by the JS */
.mh-pinbox { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; height: clamp(640px, calc(100svh - 108px), 880px); background: var(--mh-tint, #fff); }

/* without GSAP or with reduced motion only scene 1 shows; GSAP takes over visibility with autoAlpha */
.mh [data-s]:not([data-s="1"]) { visibility: hidden; opacity: 0; }

/* soft coloured glow behind the shape (--glow follows the product, set by the JS); own layer so its blur is not redrawn by the CPU */
.mh-glow { --glow: rgba(106,174,53,.2); position: absolute; z-index: 0; right: -74.4px; top: 4%; width: 570.4px; height: 70%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), rgba(106,174,53,0)); filter: blur(24px); will-change: transform; }
.mh-in { position: relative; z-index: 2; height: 100%; max-width: 1200px; margin: 0 auto; } /* same grid as the header (.sh-inner: 1200px, 32px padding) */

/* ---- picture (right) ---- */
.mh-stage { --u: min(.83cqw, 10.3px); position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* the shape: a square 600 x 600 box (viewBox) whose centre sits 14.17u from the right and 19.49u from the top; three of its
   rounded corners are on screen. Fitted to the organic panel the user approved (2026-10-17); never change its outline */
.mh-shape { position: absolute; z-index: 1; right: calc(-28.46 * var(--u)); top: calc(-23.14 * var(--u)); width: calc(85.27 * var(--u)); height: calc(85.27 * var(--u)); }
.mh-shape > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
/* layers the JS only turns (transform: rotate), each on its own GPU layer, so turning them redraws nothing:
   the soft shadow (contact + ambient), placed as low as the slab's thickness edge reaches (.35% left, 1.4% down) and then
   offset straight down, so it always falls downward whatever the turn; and the echo outline, 7% bigger */
.mh-shape__shadow { fill: rgba(8,30,20,.2); translate: -.35% calc(1.4% + 10px); filter: blur(7px); will-change: transform; }
.mh-shape__shadow--far { translate: -.35% calc(1.4% + 34px); filter: blur(30px); }
.mh-shape__echo { scale: 1.07; will-change: transform; }

/* big title high in the shape's corner, with a margin from the two cut edges; the product may pass in front of its lower line */
.mh-titles { position: absolute; z-index: 3; right: calc(9 * var(--u)); top: 18%; width: calc(44 * var(--u)); display: grid; text-align: right; overflow: hidden; padding: .1em 0; }
.mh-title { grid-area: 1 / 1; color: #fff; font: 800 clamp(56px, 6vw, 90px)/.9 Montserrat, sans-serif; letter-spacing: -.035em; }
.mh-title--sm { font-size: clamp(52px, 5.3vw, 80px); }
.mh-title span { display: block; }

/* a wheel carries one product and its props: a zero-size hub 26u from the right and 27u from the top; its children are placed by
   offsets (--x, --y: top-left corner; --w: width), all in --u. The JS moves whole wheels along the shape's edge (own GPU layer) */
.mh-wheel { position: absolute; z-index: 4; right: calc(26 * var(--u)); top: calc(27 * var(--u)); width: 0; height: 0; will-change: transform; }
.mh-wheel > * { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.mh-obj { z-index: 3; pointer-events: auto; will-change: transform; } /* leans with the edge while it rides */
.mh-float, .mh-tilt { position: relative; }
.mh-contact { position: absolute; z-index: -1; left: 10%; right: 0; bottom: -4%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8,30,20,.3), rgba(8,30,20,0)); filter: blur(6px); }

/* products: on the shape's inner edge at mid-height, half in, half out; their tops meet the title's lower line */
.mh-logo { --x: -38; --y: -7; --w: 29; aspect-ratio: 870 / 1050; perspective: 1000px; }
.mh-tilt { transform: rotateY(-18deg) rotateX(6deg) rotateZ(-6deg); transform-style: preserve-3d; } /* the mark's fixed 3D angle */
.mh-logo__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(26px 38px 32px rgba(28,42,80,.28)); }
.mh-bottle { --x: -30.2; --y: -15.7; --w: 16.4; aspect-ratio: 346 / 1000; }
.mh-bottle img { display: block; width: 100%; height: 100%; transform: rotate(-7deg); filter: drop-shadow(18px 34px 30px rgba(15,46,34,.28)); }
.mh-ps { --x: -38.8; --y: -5.8; --w: 33.7; aspect-ratio: 934 / 761; }
.mh-ps img { display: block; width: 100%; height: 100%; transform: rotate(-4deg); filter: drop-shadow(18px 34px 30px rgba(28,42,80,.28)); }

/* props (photo cut-outs, assets/vet2/props), the same three spots for every product:
   a = large, blurred, at the top cut edge; b = small, sharp, inside near the lower-right corner;
   c = near, softly blurred, straddling the bottom-left edge in front of the product */
.mh-prop { z-index: 4; pointer-events: none; }
.mh-prop img { display: block; width: 100%; height: auto; filter: drop-shadow(8px 14px 16px rgba(8,30,20,.24)); }
.mh-prop.is-far { z-index: 1; filter: blur(3px); opacity: .92; }
.mh-prop.is-near { z-index: 5; filter: blur(1.4px); }
.mh .mh-prop--syringe.is-near { filter: none; }            /* the syringe stays sharp (user, 2026-10-18) */
.mh .mh-prop--ear-tag.is-far { filter: blur(1px); opacity: 1; } /* easier to read (user, 2026-10-17) */
.mh-prop--a { --x: -24; --y: -28.5; --w: 12; }
.mh-prop--b { --x: 9; --y: 9; --w: 7; }
.mh-prop--c { --x: -17.5; --y: 13.5; --w: 11; }
.mh-prop--ear-tag { --x: -26; --y: -20; }          /* lower than spot a, so the whole tag, stud included, is on screen */
.mh-prop--straw { --x: 6; --y: 7; --w: 12; }       /* bigger (user, 2026-10-17) */

/* scroll cue (user, 2026-10-17): 01 / 03, one bar per product, and a scroll hint; on the text column's line, at the bottom */
.mh-cue { position: absolute; z-index: 4; left: calc(max(0px, (100% - 1200px) / 2) + 32px); bottom: 28px; display: flex; align-items: center; gap: 18px;
  font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--grey); pointer-events: none; }
.mh:not(.is-gsap) .mh-cue { display: none; }   /* no story without the script (or with reduced motion) */
.mh-cue__num { font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; } .mh-cue__num b { color: var(--ink); font-weight: 700; }
.mh-cue__bars { display: flex; gap: 6px; }
.mh-cue__bars i { display: block; width: 18px; height: 3px; border-radius: 2px; background: rgba(17,17,20,.16); transition: width .5s cubic-bezier(.2,.7,.2,1), background .5s; }
.mh-cue__bars i.is-on { width: 40px; background: var(--ink); }
.mh-cue__hint { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.mh-cue__mouse { position: relative; width: 16px; height: 24px; border: 1.5px solid currentColor; border-radius: 9px; }
.mh-cue__mouse::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: currentColor; animation: mh-wheel 1.6s ease-in-out infinite; }
@keyframes mh-wheel { 0% { opacity: 0; transform: translateY(-2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }

/* ---- text column (left) ---- */
.mh-side { position: absolute; z-index: 3; left: 32px; width: calc(44% - 32px); top: 50%; transform: translateY(-50%); display: grid; } /* on the header's grid line */
.mh-panel { grid-area: 1 / 1; }
.mh-h { font: 800 clamp(40px, 4.3vw, 64px)/1.06 Montserrat, sans-serif; letter-spacing: -.02em; max-width: 16ch; } /* two lines for the English headlines */
.mh-lead { margin-top: 20px !important; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--grey); max-width: 36ch; }
.mh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mh-btn { display: inline-flex; align-items: center; padding: 16px 30px; border-radius: 999px; font: 600 16px/20px Inter, sans-serif; white-space: nowrap; transition: background .2s, box-shadow .2s; }
.mh-btn--primary { background: var(--red); color: #fff; } .mh-btn--primary:hover { background: var(--red-hover); box-shadow: 0 8px 24px rgba(45,90,64,.3); }
.mh-btn--secondary { border: 1.5px solid var(--ink); color: var(--ink); } .mh-btn--secondary:hover { background: var(--blush); }

/* ---- tablet + phone: compact text on top, the picture as a band below that fills the rest of the screen ---- */
@media (max-width: 900px) {
  /* the hero fills the screen below the header (--mh-top, set by the JS) so the products are fully visible during the story;
     the product band takes the rest (at least 300px) */
  .mh-pinbox { height: auto; min-height: calc(100svh - var(--mh-top, 114px)); padding: 0 20px; display: flex; flex-direction: column; }
  .mh-in { order: -1; height: auto; }
  .mh-side { position: relative; left: auto; top: auto; width: auto; transform: none; padding-top: 20px; }
  .mh-h { max-width: none; font-size: clamp(30px, 8vw, 52px); }
  .mh-lead { font-size: 15px; line-height: 1.5; margin-top: 10px !important; }
  .mh-ctas { margin-top: 16px; gap: 10px; }
  .mh-btn { padding: 12px 20px; font-size: 14px; }
  /* the band runs edge to edge (cancels the hero padding) and clips, so the shape is cut by its top edge like on desktop */
  .mh-stage { --u: min(1cqw, 4.5px); position: relative; inset: auto; overflow: hidden; flex: 1 1 auto; height: auto; min-height: 300px; margin: 16px -20px 0; }
  .mh-glow { right: -10%; top: auto; bottom: 10%; width: 90%; height: 50%; }
  /* the shape fitted to the phone layout the same way: centre 26.13u from the right, 36.38u from the top, 157.52u box */
  .mh-shape { right: calc(-52.63 * var(--u)); top: calc(-42.38 * var(--u)); width: calc(157.52 * var(--u)); height: calc(157.52 * var(--u)); }
  .mh-titles { right: 20px; top: calc(6 * var(--u)); width: calc(100% - 40px); }
  .mh-title { font-size: clamp(52px, 15vw, 92px); } .mh-title--sm { font-size: clamp(44px, 12vw, 80px); }
  .mh-wheel { right: calc(44 * var(--u)); top: calc(44 * var(--u)); }
  .mh-logo { --x: -66; --y: -18; --w: 40; }
  .mh-bottle { --x: -53.5; --y: -15.7; --w: 15; }
  .mh-ps { --x: -69; --y: -12.7; --w: 46; }
  .mh-prop--a { --x: -45; --y: -47; --w: 18; }
  .mh-prop--b { --x: 25.5; --y: 23.5; --w: 9; }
  .mh-prop--c { --x: -26; --y: 30; --w: 16; }
  .mh-prop--ear-tag { --x: -46; --y: -26; }
  .mh-prop--straw { --x: 20; --y: 21; --w: 15; }
  .mh-cue { left: 20px; bottom: 14px; gap: 12px; font-size: 12px; }
  .mh-cue__bars i { width: 12px; } .mh-cue__bars i.is-on { width: 28px; }
  .mh-cue__hint { gap: 6px; font-size: 10px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .mh *, .mh *::before, .mh *::after { transition-duration: .01ms !important; animation: none !important; } }

/* ---------- Sections (COLORS-AND-FONTS.md: near-white backgrounds, red only for CTAs, wine for dark accents, navy footer) ---------- */
.v2 { --red: #2D5A40; --red-hover: #234733; --wine: #0F2E22; --coral: #6AAE35; --blush: #EFF5EA; --navy: #1C2A50; --ink: #111114; --grey: #5B606B; --off: #F7FAF5;
  --fh: Montserrat, sans-serif; --fb: Inter, system-ui, sans-serif; color: var(--ink); font: 400 16px/26px var(--fb); }
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
.v2 :where(h2, h3, p, ul, figure) { margin: 0; padding: 0; }
:where(.v2) :where(a) { text-decoration: none; color: inherit; }
.v2 a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.v2-sec { padding: 96px 16px; }
.v2-white { background: #fff; } .v2-off { background: var(--off); } .v2-wine { background: var(--wine); color: #fff; }
.v2-in { max-width: 1120px; margin: 0 auto; }

/* type scale */
.v2-head { text-align: center; margin-bottom: 48px; }
.v2-head.is-left { text-align: left; }
.v2-eyebrow, .v2-kicker { display: block; font: 600 12px/16px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.v2-wine .v2-kicker { color: var(--blush); }
.v2-head h2, .v2-band h2, .v2-reach h2, .v2-cta h2 { font: 700 40px/48px var(--fh); letter-spacing: -.01em; color: var(--ink); }
.v2-wine h2 { color: #fff !important; }
.v2-lead { max-width: 760px; margin: 16px auto 0; font-size: 20px; line-height: 32px; color: var(--grey); }

/* buttons: pills, 16 x 30 */
.v2-btn { display: inline-flex; align-items: center; gap: 6px; padding: 16px 30px; border-radius: 999px; font: 600 16px/20px var(--fb); white-space: nowrap; transition: background .2s, box-shadow .2s, color .2s; }
.v2-btn--primary { background: var(--red); color: #fff; } .v2-btn--primary:hover { background: var(--red-hover); box-shadow: 0 8px 24px rgba(45,90,64,.3); }
.v2-btn--secondary { border: 1.5px solid var(--ink); color: var(--ink); } .v2-btn--secondary:hover { background: var(--blush); }
.v2-btn--ondark { background: #fff; color: var(--red); } .v2-btn--ondark:hover { background: var(--blush); }
.v2-btn--outline-light { border: 1.5px solid rgba(255,255,255,.8); color: #fff; } .v2-btn--outline-light:hover { background: rgba(255,255,255,.1); }

/* portfolio rows: wine / blush cards */
.v2-rows { display: grid; gap: 24px; }
.v2-row { display: grid; grid-template-columns: 1fr 425px; border-radius: 24px; overflow: hidden; min-height: 360px; }
.v2-row.is-wine { background: var(--wine); color: #fff; } .v2-row.is-blush { background: var(--blush); color: var(--ink); }
.v2-row__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
/* card label (user, 2026-10-18: same style as the page's labels): the number in a small pill, then MAIZER VET as a coloured label */
.v2-row__meta { display: flex; align-items: center; gap: 12px; font: 600 12px/16px var(--fb); letter-spacing: .12em; text-transform: uppercase; }
.v2-row__meta span:first-child { display: inline-grid; place-items: center; min-width: 40px; padding: 6px 10px; border-radius: 999px; letter-spacing: .06em; background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.v2-row__meta span:last-child { color: var(--blush); }
.v2-row.is-blush .v2-row__meta span:first-child { background: var(--wine); color: #fff; box-shadow: none; }
.v2-row.is-blush .v2-row__meta span:last-child { color: var(--red); }
.v2-row.is-wine h3 a { color: #fff; }
.v2-row h3 { font: 700 40px/48px var(--fh); letter-spacing: -.01em; }
.v2-row.is-blush h3 { color: var(--wine); }
.v2-row h3 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.v2-row p { font-size: 16px; line-height: 26px; max-width: 600px; }
.v2-row.is-blush p { color: var(--grey); }
.v2-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.v2-tags li { padding: 8px 14px; border-radius: 999px; font: 600 12px/16px var(--fb); letter-spacing: .12em; text-transform: uppercase; background: #fff; color: var(--wine); }
.v2-row.is-blush .v2-tags li { background: #fff; color: var(--wine); box-shadow: inset 0 0 0 1px rgba(15,46,34,.12); }
.v2-row__img { overflow: hidden; }
.v2-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-row__btn { align-self: flex-start; margin-top: 4px; padding: 13px 24px; font-size: 15px; }
/* stacking cards (user, 2026-10-18): each card sticks under the top of the screen, 18px lower than the one before so their edges
   stay visible, and the next card slides over it; vet2-fx.js shrinks and dims the covered one (--dim) and turns the stack off
   (.is-flat) when a card is too tall to fit on the screen */
.v2-row { position: sticky; top: calc(96px + var(--i, 0) * 18px); transform-origin: 50% 0; }
.v2-row::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #111114; opacity: var(--dim, 0); pointer-events: none; }
.v2-rows.is-flat .v2-row { position: relative; top: auto; transform: none !important; }
.v2-rows.is-flat .v2-row::after { opacity: 0; }
/* the photo comes a little closer on hover */
.v2-row__img img { transition: scale .6s cubic-bezier(.2,.7,.2,1); }
.v2-row:hover .v2-row__img img { scale: 1.06; }
.v2.is-fx .v2-row:hover [data-plx] img { scale: 1.22; }

/* injectables band */
.v2-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.v2-band__img { display: block; border-radius: 24px; overflow: hidden; }
.v2-band img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.v2-band h2 { margin-bottom: 20px; }
.v2-band p { font-size: 16px; line-height: 26px; color: var(--grey); margin-bottom: 32px; }

.v2-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* animal care cards */
.v2-care-grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; }
.v2-care { display: grid; grid-template-columns: 40% 1fr; background: #fff; border: 1px solid var(--blush); border-radius: 24px; overflow: hidden; transition: box-shadow .25s; }
.v2-care:hover { box-shadow: 0 12px 32px rgba(15,46,34,.08); }
.v2-care__img { position: relative; display: block; overflow: hidden; min-height: 220px; }
.v2-care__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2,.7,.2,1); } /* fills the frame; the text sets the card's height */
.v2-care:hover .v2-care__img img { scale: 1.06; }
.v2-care__body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px; }
.v2-care h3 { font: 700 22px/28px var(--fh); color: var(--ink); }
.v2-care p { font-size: 15px; line-height: 24px; color: var(--grey); }
/* the feature card: spans both rows, photo on top filling the spare height, bigger title */
.v2-care.is-feature { grid-row: span 2; grid-template-columns: 1fr; grid-template-rows: minmax(340px, 1fr) auto; }
.v2-care.is-feature .v2-care__body { padding: 32px 36px 36px; gap: 14px; }
/* the One Health photo is a tall real photo (Pexels 4909824, Maizer mark added on the sleeve): keep the cow's eyes, the hand and the logo in the wide frame */
.v2-care.is-feature .v2-care__img img { object-position: 50% 50%; }
.v2-care.is-feature h3 { font-size: 30px; line-height: 36px; letter-spacing: -.01em; }
.v2-care.is-feature p { font-size: 17px; line-height: 28px; max-width: 52ch; }

/* why maizer */
.v2-why { background: var(--off); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.v2-why__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; margin-bottom: 6px; }
.v2-why__ico img { width: 44px; height: 44px; mix-blend-mode: multiply; }
.v2-why h3 { font: 700 22px/28px var(--fh); color: var(--ink); }
.v2-why p { font-size: 16px; line-height: 26px; color: var(--grey); }
/* pinned variant: heading + step list stay while the steps scroll past */
.v2-why-pin { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.v2-why-pin__side { position: sticky; top: 112px; }
.v2-why-pin .v2-head { margin-bottom: 28px; }
.v2-why-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v2-why-nav a { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; border-radius: 14px; font: 600 16px/22px var(--fb); color: var(--grey); transition: background .25s, color .25s; }
.v2-why-nav i { font: 600 12px/16px var(--fb); font-style: normal; letter-spacing: .08em; color: var(--red); }
.v2-why-nav a:hover { color: var(--ink); }
.v2-why-nav a.is-active { background: var(--blush); color: var(--ink); }
.v2-why-pin__list { display: grid; gap: 24px; }
.v2-why-pin .v2-why { min-height: 52vh; padding: 48px; justify-content: center; }
.v2-why-pin .v2-why__ico { width: 72px; height: 72px; } .v2-why-pin .v2-why__ico img { width: 52px; height: 52px; }
.v2-why-pin .v2-why h3 { font-size: 28px; line-height: 36px; }
.v2-why-pin .v2-why p { font-size: 18px; line-height: 30px; max-width: 48ch; }

/* products */
.v2-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.v2-prod { --tile: #EFF5EA; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--blush); border-radius: 24px; overflow: hidden; transition: box-shadow .25s; }
.v2-prod.is-oral { --tile: #EEF2F9; } .v2-prod.is-nutri { --tile: #F3F1EA; } /* blush = injectables, ice blue = oral, sand = nutrition */
.v2-prod:hover { box-shadow: 0 12px 32px rgba(15,46,34,.08); }
.v2-prod__stage { position: relative; display: grid; place-items: center; height: 260px; background: radial-gradient(60% 55% at 50% 55%, rgba(255,255,255,.8), rgba(255,255,255,0)), var(--tile); }
.v2-prod__stage::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 26px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,30,20,.22), rgba(10,30,20,0)); }
.v2-prod__stage img { position: relative; z-index: 1; display: block; width: auto; height: 196px; max-width: 64%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(10,30,20,.14)); transition: translate .5s cubic-bezier(.2,.7,.2,1), rotate .5s cubic-bezier(.2,.7,.2,1); }
.v2-prod:hover .v2-prod__stage img { translate: 0 -8px; rotate: -2deg; } /* the product lifts a little */
.v2-prod__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 26px; }
.v2-prod__chip { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--tile); color: var(--wine); font: 600 11px/14px var(--fb); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.v2-prod strong { font: 700 18px/24px var(--fh); color: var(--ink); letter-spacing: .01em; }
.v2-prod em { font: 400 15px/24px var(--fb); font-style: normal; color: var(--grey); }
.v2-prod u { margin-top: auto; padding-top: 6px; font: 600 14px/22px var(--fb); text-decoration: none; color: var(--red); }

/* reach: two columns (text + region chips left, dotted map right), figures row below (map-led, refined 2026-10-18) */
.v2-reach h2 span { color: var(--red); }
/* rows: heading, chips, button, then the country list across both columns; the map spans the first three and sits centred on them.
   Spacing by margins, not row-gap, so the empty list row costs nothing */
.v2-reach__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 72px; align-items: center; }
.v2-reach__head { grid-column: 1; grid-row: 1; margin: 0 0 24px; align-self: end; }
.v2-reach__head .v2-lead { margin-left: 0; }
.v2-reach__regions { grid-column: 1; grid-row: 2; margin: 0 0 28px; }
.v2-reach__more { grid-column: 1; grid-row: 3; margin: 0; align-self: start; }
.v2-reach__lists { grid-column: 1 / 3; grid-row: 4; }
.v2-map { grid-column: 2; grid-row: 1 / 4; }
.v2-map__frame { position: relative; aspect-ratio: 1000 / 513; }
/* the dots fade towards the edges so the empty corners (Siberia, the Indian Ocean) step back; lines and pins stay full */
.v2-map__dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: radial-gradient(ellipse 72% 82% at 48% 46%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 72% 82% at 48% 46%, #000 58%, transparent 100%); }
.v2-map__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.v2-map__arcs path { fill: none; stroke: var(--red); stroke-width: 1; stroke-linecap: round; opacity: .2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity .25s; }
.v2-ship { opacity: 0; } .v2-ship circle { fill: var(--red); } .v2-ship__tail { opacity: .35; } .v2-ship__dot { stroke: #fff; stroke-width: 1.5; }
.v2-pin, .v2-cluster { position: absolute; left: var(--x); top: var(--y); padding: 0; border: 0; background: none; display: grid; place-items: center; transition: opacity .25s; }
.v2-pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; cursor: pointer; }
.v2-pin > span:not(.v2-pin__tip) { grid-area: 1 / 1; } /* dot and ring stack */
.v2-pin__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 2px #fff; }
.v2-pin__ring { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--red); opacity: 0; pointer-events: none; }
.v2-pin.is-hq { cursor: default; z-index: 2; }
.v2-pin.is-hq .v2-pin__dot { width: 13px; height: 13px; background: var(--red); box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(45,90,64,.18); }
.v2.is-fx .v2-pin.is-hq .v2-pin__ring { animation: v2-pulse 2.8s ease-out infinite; }
@keyframes v2-pulse { 0% { transform: scale(.6); opacity: .8; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.v2-pin.is-hq b { position: absolute; right: calc(100% + 4px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: var(--wine); color: #fff; font: 700 12px/16px var(--fh); letter-spacing: .02em; }
.v2-pin__tip { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translate(-50%, 6px); white-space: nowrap; padding: 8px 14px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(17,17,20,.14); font: 700 14px/18px var(--fh); color: var(--ink); text-align: left; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3; }
.v2-pin__tip small { display: block; font: 500 12px/16px var(--fb); color: var(--grey); }
.v2-pin:hover, .v2-pin:focus-visible { z-index: 4; }
.v2-pin:hover .v2-pin__tip, .v2-pin:focus-visible .v2-pin__tip { opacity: 1; transform: translate(-50%, 0); }
.v2-pin:focus-visible { outline: none; } .v2-pin:focus-visible .v2-pin__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--red); }
/* phone clusters: one numbered pin per region (shown under 600px, see below) */
.v2-cluster { display: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--wine); color: #fff; font: 700 13px/1 var(--fh); box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(15,46,34,.3); cursor: pointer; z-index: 2; }
/* region chips: hover previews, click or tap selects (aria-pressed) and lists the region's countries */
.v2-map__regions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.v2-map__regions button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 0; border-radius: 999px; background: var(--blush); font: 600 14px/20px var(--fb); color: var(--wine); cursor: pointer; transition: background .2s, color .2s; }
.v2-map__regions em { font-style: normal; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #fff; display: grid; place-items: center; font: 700 12px/1 var(--fh); color: var(--red); }
.v2-map__regions button:hover, .v2-map__regions button:focus-visible, .v2-map__regions button[aria-pressed="true"] { background: var(--wine); color: #fff; outline: none; }
.v2-map__list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 15px/24px var(--fb); color: var(--ink); }
.v2-map__list strong { color: var(--wine); }
.v2-map__list[hidden] { display: none; }
.v2-map__list li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--red); }
/* a hovered or selected region dims the pins and lines of the others */
.v2-reach__grid[data-active="me"] :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="me"]),
.v2-reach__grid:has(.v2-map__regions button[data-r="me"]:hover) :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="me"]) { opacity: .12; }
.v2-reach__grid[data-active="na"] :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="na"]),
.v2-reach__grid:has(.v2-map__regions button[data-r="na"]:hover) :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="na"]) { opacity: .12; }
.v2-reach__grid[data-active="asia"] :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="asia"]),
.v2-reach__grid:has(.v2-map__regions button[data-r="asia"]:hover) :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="asia"]) { opacity: .12; }
.v2-reach__grid[data-active="sea"] :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="sea"]),
.v2-reach__grid:has(.v2-map__regions button[data-r="sea"]:hover) :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="sea"]) { opacity: .12; }
.v2-reach__grid[data-active="eu"] :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="eu"]),
.v2-reach__grid:has(.v2-map__regions button[data-r="eu"]:hover) :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="eu"]) { opacity: .12; }
/* globe (French page): a square stage; the canvas is blended (lighten) over a coral disc the size of the sphere, so cobe's dark land
   dots come out coral while the pale sphere stays pale. The stage is clipped to the sphere's circle so a zoomed-in globe stays
   round; --zoom (set by vet2-globe.js) scales the disc with the sphere */
.v2-globe { position: relative; }
.v2-reach { overflow-x: clip; }
.v2-white + .v2-reach.v2-white { padding-top: 24px; } /* straight after the white injectables band: no double white gap */ /* the France label or a tooltip may reach past the edge while the globe turns */
.v2-globe__stage { --zoom: 1; position: relative; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; isolation: isolate; touch-action: pan-y; }
.v2-globe__stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(239,245,234,.9) 55%, rgba(239,245,234,0) 70%); z-index: -1; }
.v2-globe__lens { position: absolute; inset: 0; isolation: isolate; clip-path: circle(var(--r, 39.6%) at 50% 50%); opacity: 0; transition: opacity 1s; cursor: grab; }
.v2-globe__lens > div { position: absolute !important; inset: 0; } /* cobe wraps the canvas in its own div */
.v2-globe__disc { position: absolute; left: 50%; top: 50%; width: calc(var(--r, 39.6%) * 2 * var(--zoom)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #6AAE35; }
.v2-globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: lighten; }
.v2-globe.is-ready .v2-globe__lens { opacity: 1; } .v2-globe.is-dragging :is(.v2-globe__lens, .v2-pin) { cursor: grabbing; } .v2-globe.is-dragging .v2-pin__tip { opacity: 0 !important; }
.v2-globe__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1s; }
.v2-globe.is-ready .v2-globe__lines { opacity: 1; }
.v2-globe__pins { position: absolute; inset: 0; pointer-events: none; }
.v2-globe__pins .v2-pin { pointer-events: auto; left: 50%; top: 50%; opacity: 0; transition: opacity .3s; }
.v2-globe.is-ready .v2-globe__pins .v2-pin.is-front { opacity: 1; }
.v2-globe .v2-pin.is-hq b { right: calc(100% + 4px); }
.v2-globe__flat { display: none; }
.v2-globe.no-gl .v2-globe__stage { aspect-ratio: 1000 / 513; width: 100%; } .v2-globe.no-gl .v2-globe__flat { display: block; width: 100%; height: auto; }
.v2-globe.no-gl :is(.v2-globe__lens, .v2-globe__pins), .v2-globe.no-gl .v2-globe__stage::before { display: none; }
.v2-reach__grid[data-active] .v2-globe .v2-pin[data-r]:not(.is-front) { opacity: 0; }

.v2-reach__grid[data-active="latam"] :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="latam"]),
.v2-reach__grid:has(.v2-map__regions button[data-r="latam"]:hover) :is(.v2-pin, .v2-cluster, .v2-map__arcs path)[data-r]:not([data-r="latam"]) { opacity: .12; }
/* figures: one row split by thin lines, no boxes */
.v2-stats { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #E2EADC; }
.v2-stat { padding: 32px 32px 8px; display: flex; flex-direction: column; border-left: 1px solid #E2EADC; }
.v2-stat:first-child { border-left: 0; padding-left: 0; }
.v2-stat b { font: 800 56px/62px var(--fh); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.v2-stat sup { font-size: 32px; color: var(--red); vertical-align: top; position: relative; top: .1em; margin-left: 2px; }
.v2-stat p { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--grey); }

/* partner CTA: wine band with two soft red glows drifting slowly (.v2-cta--glow) */
.v2-cta { position: relative; overflow: hidden; }
.v2-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.v2-cta__glow { position: absolute; border-radius: 50%; filter: blur(40px); }
.v2-cta__glow.is-a { right: -8%; top: -35%; width: 58%; height: 170%; background: radial-gradient(closest-side, rgba(106,174,53,.45), rgba(45,90,64,.24) 55%, rgba(45,90,64,0)); animation: v2-drift-a 18s ease-in-out infinite alternate; }
.v2-cta__glow.is-b { left: -12%; bottom: -60%; width: 46%; height: 140%; background: radial-gradient(closest-side, rgba(45,90,64,.4), rgba(45,90,64,0)); animation: v2-drift-b 22s ease-in-out infinite alternate; }
@keyframes v2-drift-a { to { transform: translate(-9%, 12%) scale(1.08); } }
@keyframes v2-drift-b { to { transform: translate(14%, -10%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .v2-cta__glow { animation: none; } }
.v2-cta__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.v2-cta__card { background: rgba(255,255,255,.08); border: 1px solid rgba(239,245,234,.2); border-radius: 24px; padding: 40px; }
.v2-cta__card p { font-size: 20px; line-height: 32px; color: var(--blush); }
.v2-cta__btns { display: flex; gap: 12px; flex-wrap: nowrap; margin-top: 32px; } /* side by side (user, 2026-10-18) */
.v2-cta__btns .v2-btn { padding-left: 24px; padding-right: 24px; white-space: nowrap; }

/* resources */
.v2-res { background: #fff; border: 1px solid var(--blush); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s; }
.v2-res:hover { box-shadow: 0 12px 32px rgba(15,46,34,.08); }
.v2-res__img { position: relative; display: block; aspect-ratio: 340 / 220; max-height: 280px; width: 100%; overflow: hidden; }
.v2-res__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-res__img em { position: absolute; top: 16px; left: 16px; background: var(--blush); color: var(--wine); font: 600 12px/16px var(--fb); letter-spacing: .12em; text-transform: uppercase; font-style: normal; padding: 6px 12px; border-radius: 999px; }
.v2-res__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.v2-res strong { font: 700 22px/28px var(--fh); color: var(--ink); }
.v2-res__body > span { font-size: 16px; line-height: 26px; color: var(--grey); flex: 1; }
.v2-res u { font: 600 14px/22px var(--fb); text-decoration: none; color: var(--red); }
.v2-more { text-align: center; margin-top: 48px !important; }

/* scroll effects (vet2-fx.js adds .is-fx when motion is allowed): parallax images are scaled a little so the frame never shows a gap */
.v2.is-fx [data-plx] img { scale: 1.16; }

@media (max-width: 900px) {
	.v2-sec { padding: 64px 16px; }
	.v2-head h2, .v2-band h2, .v2-reach h2, .v2-cta h2, .v2-row h3 { font-size: 28px; line-height: 34px; }
	.v2-lead, .v2-cta__card p { font-size: 18px; line-height: 28px; }
	.v2-row { grid-template-columns: 1fr; top: calc(16px + var(--i, 0) * 12px); } .v2-row__img { order: -1; height: 200px; }
	.v2-row__body { padding: 24px; gap: 16px; }
	.v2-row__btn { padding: 12px 20px; font-size: 14px; }
	.v2-band, .v2-cta__in, .v2-grid3 { grid-template-columns: 1fr; gap: 32px; }
	.v2-cta__btns { flex-wrap: wrap; } .v2-cta__card { padding: 28px 24px; }
	.v2-reach__grid { grid-template-columns: 1fr; } .v2-reach__head, .v2-map, .v2-reach__regions, .v2-reach__lists, .v2-reach__more { grid-column: 1; grid-row: auto; }
	.v2-reach__more { order: 1; } /* phones read: heading, map, chips, the opened list, button */
	.v2-reach__head { margin-bottom: 32px; } .v2-map { margin-bottom: 32px; } .v2-reach__regions { margin-bottom: 24px; } .v2-map__list { margin: 0 0 24px; }
	.v2-map__frame { margin: 0 -8px; } .v2-stats { margin-top: 48px; grid-template-columns: 1fr 1fr; } .v2-stat { padding: 24px 16px 20px; } .v2-stat:nth-child(odd) { border-left: 0; padding-left: 0; } .v2-stat:nth-child(n+3) { border-top: 1px solid #E2EADC; }
	.v2-stat b { font-size: 40px; line-height: 44px; } .v2-stat p { font-size: 14px; line-height: 22px; }
	.v2-care h3, .v2-why h3, .v2-res strong { font-size: 20px; line-height: 26px; }
	/* the product shelf becomes a row you swipe sideways too */
	.v2-shelf { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
	.v2-shelf::-webkit-scrollbar { display: none; }
	.v2-prod { flex: 0 0 min(78%, 340px); scroll-snap-align: start; }
	.v2-prod__stage { height: 220px; } .v2-prod__stage img { height: 164px; }
	/* the care cards become a row you swipe sideways; the next card peeks in */
	.v2-care-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
	.v2-care-grid::-webkit-scrollbar { display: none; }
	.v2-care, .v2-care.is-feature { flex: 0 0 min(82%, 400px); scroll-snap-align: start; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.v2-care__img { aspect-ratio: 16 / 10; min-height: 0; }
	.v2-care__body, .v2-care.is-feature .v2-care__body { justify-content: flex-start; padding: 22px 22px 26px; }
	.v2-care.is-feature h3 { font-size: 20px; line-height: 26px; } .v2-care.is-feature p { font-size: 15px; line-height: 24px; }
	.v2-why-pin { grid-template-columns: 1fr; gap: 24px; }
	.v2-why-pin__side { position: static; }
	.v2-why-pin .v2-why { min-height: 0; padding: 28px; }
	.v2-why-pin .v2-why h3 { font-size: 22px; line-height: 28px; } .v2-why-pin .v2-why p { font-size: 16px; line-height: 26px; }
}


/* ---------- Header + footer on this page. Footer: Maizer navy. Header (user, 2026-10-18: look like a big company's site): white bar,
   navy logo (assets/vet/logo-head-dark.png), red "Get in touch", a red line under the hovered / current link, a large "Veterinary"
   menu (template-parts/vet2-mega.php), and it hides while scrolling down and comes back, slimmer, on scrolling up
   (assets/js/vet2-header.js: .is-stuck, .is-hidden). Only the top bar (40px) scrolls away. ---------- */
.mz-group { --hd: #fff; --pri: #1C2A50; --dark: #111114; --ft: #1C2A50; }
.sh-header--v2 { position: sticky; top: -40px; z-index: 60; box-shadow: none; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.sh-header--v2.is-stuck { box-shadow: 0 1px 0 #E4ECDF, 0 10px 30px rgba(17,17,20,.07); }
.sh-header--v2.is-hidden { transform: translateY(-100%); }
.sh-header--v2 .sh-top { background: #0F2E22; } /* wine strip (user, 2026-10-18): light text, white switch knob, inline icons */
.sh-header--v2 .sh-top a, .sh-header--v2 .sh-top span { color: rgba(239,245,234,.85); }
.sh-header--v2 .sh-top a:hover { color: #fff; }
.sh-header--v2 .sh-lang a.is-current { color: #fff; }
.sh-header--v2 .sh-lang a:not(.is-current) { color: rgba(239,245,234,.6); }
.sh-header--v2 .sh-lang .sep { color: rgba(239,245,234,.4); }
.sh-header--v2 .sh-switch { background: rgba(255,255,255,.22); }
.sh-header--v2 .sh-switch i { background: #fff; box-shadow: none; }
.sh-header--v2 .sh-top .v2-ic { display: block; color: rgba(239,245,234,.85); }
.sh-header--v2 .sh-toplinks a[aria-label] { display: inline-flex; align-items: center; } /* the search icon link */
@media (max-width: 720px) { .sh-header--v2 .sh-toplinks a:not(:first-child) { display: none; } } /* as the shared header: only the language switch on phones */
.sh-header--v2 .sh-toplinks a:hover .v2-ic { color: #fff; }
.sh-header--v2 .sh-main { border-bottom: 1px solid #E4ECDF; }
.sh-header--v2 .sh-main { position: relative; background: #fff; }
.sh-header--v2 .sh-main .sh-inner { padding-top: 18px; padding-bottom: 18px; transition: padding .3s; }
.sh-header--v2.is-stuck .sh-main .sh-inner { padding-top: 12px; padding-bottom: 12px; }
.sh-header--v2 .sh-logo img { height: 38px; }
.sh-header--v2 .sh-nav > ul { gap: 32px; }
.sh-header--v2 .sh-nav > ul > li > a { position: relative; display: inline-block; padding: 10px 0; color: #111114; font: 500 15px/20px Inter, sans-serif; text-decoration: none; transition: color .2s; }
.sh-header--v2 .sh-nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: #2D5A40; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.sh-header--v2 .sh-nav > ul > li:is(:hover, :focus-within, .is-current) > a { color: #0F2E22; }
.sh-header--v2 .sh-nav > ul > li:is(:hover, :focus-within, .is-current) > a::after { transform: scaleX(1); }
.sh-header--v2 .has-mega > a { padding-right: 16px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E1023' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 10px 6px; }
.mz-group .sh-cta { height: auto; padding: 11px 24px; border: 0; border-radius: 999px; background: #2D5A40; color: #fff; text-transform: none; letter-spacing: 0; font: 600 15px/20px Inter, sans-serif; transition: background .2s, box-shadow .2s; }
.mz-group .sh-cta:hover { background: #234733; box-shadow: 0 8px 20px rgba(45,90,64,.25); }
.sh-header--v2 .sh-burger span { background: #111114; }
/* the large "Veterinary" menu: full width under the bar; opens on hover or keyboard focus */
.sh-header--v2 .sh-nav .has-mega { position: static; }
.sh-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: #fff; border-top: 1px solid #E4ECDF; box-shadow: 0 30px 60px rgba(17,17,20,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s .3s; }
.has-mega:is(:hover, :focus-within) > .sh-mega { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }
.sh-mega__in { max-width: var(--wrap-hd); margin: 0 auto; padding: 32px; display: grid; grid-template-columns: 1fr 290px; gap: 40px; }
.sh-mega__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sh-mega__col { display: flex; flex-direction: column; }
.sh-header--v2 .sh-mega a { text-decoration: none; }
.sh-mega__img { display: block; aspect-ratio: 16 / 10; margin-bottom: 14px; border-radius: 14px; overflow: hidden; background: #EFF5EA; }
.sh-mega__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.2,.7,.2,1); }
.sh-mega__col:hover .sh-mega__img img { scale: 1.06; }
.sh-header--v2 .sh-mega .sh-mega__name { font: 700 17px/22px Montserrat, sans-serif; color: #0F2E22; }
.sh-header--v2 .sh-mega .sh-mega__name:hover { color: #2D5A40; }
.sh-mega__col p { margin: 4px 0 12px; font: 400 13px/19px Inter, sans-serif; color: #5B606B; }
.sh-mega__types { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #E4ECDF; display: grid; gap: 8px; }
.sh-header--v2 .sh-mega__types a { display: inline-flex; gap: 8px; font: 500 13px/18px Inter, sans-serif; color: #111114; transition: color .2s, gap .2s; }
.sh-header--v2 .sh-mega__types a::before { content: "\2192"; color: #2D5A40; }
.sh-header--v2 .sh-mega__types a:hover { color: #2D5A40; gap: 11px; }
.sh-mega__aside { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(106,174,53,.35), rgba(106,174,53,0) 60%), #0F2E22; }
.sh-mega__kicker { font: 600 12px/16px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #EFF5EA; }
.sh-mega__aside p { margin: 0 0 8px; font: 700 18px/25px Montserrat, sans-serif; }
.sh-header--v2 .sh-mega .sh-mega__all { align-self: flex-start; margin-top: auto; padding: 11px 20px; border-radius: 999px; background: #fff; color: #2D5A40; font: 600 14px/18px Inter, sans-serif; transition: background .2s; }
.sh-header--v2 .sh-mega .sh-mega__all:hover { background: #EFF5EA; }
.sh-header--v2 .sh-mega .sh-mega__link { padding-top: 10px; border-top: 1px solid rgba(239,245,234,.2); color: #fff; font: 500 14px/18px Inter, sans-serif; }
.sh-header--v2 .sh-mega .sh-mega__link:hover { color: #EFF5EA; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) { /* burger menu: white panel; the large menu becomes a short list of the four species */
  .sh-header--v2 .sh-nav { background: #fff; box-shadow: 0 20px 40px rgba(17,17,20,.1); }
  .sh-header--v2 .sh-nav > ul > li > a::after { display: none; }
  .sh-mega, .has-mega:is(:hover, :focus-within) > .sh-mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; transition: none; }
  .sh-mega__in { display: block; }
  .sh-mega__cols { display: grid; gap: 6px; }
  .sh-mega__img, .sh-mega__col p, .sh-mega__types, .sh-mega__aside { display: none; }
  .sh-header--v2 .sh-mega .sh-mega__name { font: 500 14px/20px Inter, sans-serif; color: #5B606B; }
  .sh-header--v2 .sh-nav { max-height: calc(100svh - 120px); overflow-y: auto; }
  .sh-header--v2 .sh-mega__cols { grid-template-columns: 1fr; gap: 0; }
  .sh-header--v2 .sh-nav li { padding: 0; margin: 0; }
  .sh-header--v2 .sh-nav > ul > li > a { display: block; padding: 13px 0; border-bottom: 1px solid #E4ECDF; }
  .sh-header--v2 .sh-nav > ul > li:last-child > a { border-bottom: 0; }
  .sh-header--v2 .sh-sub, .sh-header--v2 .sh-mega__in { padding: 6px 0 10px 14px; }
  .sh-header--v2 .sh-nav :is(.sh-sub, .sh-mega) a { display: block; padding: 6px 0; color: #5B606B; font: 500 14px/20px Inter, sans-serif; }
  .sh-header--v2 .sh-nav .sh-mega .sh-mega__img { display: none; }
}

/* ---------- Footer on the v2 pages (user, 2026-10-18: wine like the partner section, four columns, the company's social
   accounts from maizer.fr, inline icons). Markup: template-parts/vet2-footer.php. ---------- */
.v2f { background: #0F2E22; color: #EFF5EA; padding: 72px 32px 28px; font-family: Inter, system-ui, sans-serif; }
.v2f *, .v2f *::before, .v2f *::after { box-sizing: border-box; }
.v2f__in { max-width: 1200px; margin: 0 auto; display: grid; gap: 44px; }
.v2f__top { display: flex; align-items: center; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(239,245,234,.18); }
.v2f__logo img { display: block; height: 52px; width: auto; }
.v2f__top p { margin: 0; max-width: 480px; font: 400 15px/24px Inter, sans-serif; color: rgba(239,245,234,.8); }
.v2f__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.v2f h5 { margin: 0 0 16px; font: 700 15px/20px Montserrat, sans-serif; color: #fff; }
.v2f ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v2f a { color: rgba(239,245,234,.82); text-decoration: none; font: 400 14px/20px Inter, sans-serif; transition: color .2s; }
.v2f a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(239,245,234,.5); }
.v2f .v2f__all { display: inline-block; margin-top: 18px; font-weight: 700; color: #fff; } /* bold white (user, 2026-10-18) */
.v2f .v2f__all:hover { color: #EFF5EA; text-decoration: none; }
.v2f__nw { white-space: nowrap; }
.v2f__all .v2-ic { vertical-align: -2px; margin-left: 6px; transition: translate .2s; } .v2f__all:hover .v2-ic { translate: 4px 0; }
.v2f__row { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font: 400 14px/20px Inter, sans-serif; font-style: normal; color: rgba(239,245,234,.82); }
.v2f__row .v2-ic { flex: none; margin-top: 2px; color: #EFF5EA; } /* same light tone as the social icons (user, 2026-10-18) */
.v2f__follow { display: block; margin: 24px 0 12px; font: 600 12px/16px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(239,245,234,.6); }
.v2f ul.v2f__social { display: flex; gap: 10px; }
.v2f__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(239,245,234,.3); color: #EFF5EA; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.v2f__social a:hover { background: #2D5A40; border-color: #2D5A40; color: #fff; text-decoration: none; transform: translateY(-2px); }
.v2f__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(239,245,234,.18); font: 400 13px/18px Inter, sans-serif; color: rgba(239,245,234,.65); }
.v2f__lang { display: flex; align-items: center; gap: 8px; }
.v2f__lang .v2-ic { color: rgba(239,245,234,.65); }
.v2f__lang a { font-size: 13px; color: rgba(239,245,234,.55); }
.v2f__lang a.is-current { color: #fff; font-weight: 600; }
.v2f__lang .sep { color: rgba(239,245,234,.35); }
.v2f__links { display: flex; gap: 20px; } .v2f__links a { font-size: 13px; }
@media (max-width: 900px) {
  .v2f__cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .v2f__top { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 560px) {
  .v2f { padding: 56px 20px 24px; }
  .v2f__contact { grid-column: 1 / -1; }
  .v2f__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* phones: smaller pins, the France label under its pin, and one cluster pin per region in place of the single pins; the selected
   region (chip or cluster tapped) opens into its pins */
@media (max-width: 600px) {
	.v2-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; } .v2-pin__dot { width: 7px; height: 7px; box-shadow: 0 0 0 1.5px #fff; } .v2-pin__ring { width: 16px; height: 16px; }
	.v2-pin.is-hq .v2-pin__dot { width: 10px; height: 10px; } .v2-pin.is-hq b { right: auto; left: 50%; top: calc(100% - 2px); transform: translateX(-50%); font-size: 10px; line-height: 14px; padding: 3px 8px; }
	.v2-map__regions button { font-size: 13px; padding: 6px 6px 6px 12px; } .v2-map__list { font-size: 14px; line-height: 22px; }
	.v2-cluster { display: grid; } .v2-pin:not(.is-hq):not(.is-solo) { display: none; }
	.v2-reach__grid[data-active="me"] .v2-pin[data-r="me"] { display: grid; } .v2-reach__grid[data-active="me"] .v2-cluster[data-r="me"] { display: none; }
	.v2-reach__grid[data-active="na"] .v2-pin[data-r="na"] { display: grid; } .v2-reach__grid[data-active="na"] .v2-cluster[data-r="na"] { display: none; }
	.v2-reach__grid[data-active="asia"] .v2-pin[data-r="asia"] { display: grid; } .v2-reach__grid[data-active="asia"] .v2-cluster[data-r="asia"] { display: none; }
	.v2-reach__grid[data-active="sea"] .v2-pin[data-r="sea"] { display: grid; } .v2-reach__grid[data-active="sea"] .v2-cluster[data-r="sea"] { display: none; }
	.v2-reach__grid[data-active="eu"] .v2-pin[data-r="eu"] { display: grid; } .v2-reach__grid[data-active="eu"] .v2-cluster[data-r="eu"] { display: none; }
	.v2-globe__stage { margin: -6% auto -4%; } .v2-globe .v2-pin:not(.is-hq):not(.is-solo) { display: grid; } .v2-globe .v2-pin.is-hq b { right: calc(100% + 2px); left: auto; top: 50%; transform: translateY(-50%); }
}

/* ======================= Group home additions (2026-10-18) ======================= */
.h3 { --leaf: #6AAE35; --ever: #0F2E22; }
.h3 .v2-sec { padding-block: 120px; }
/* 1. hero (2026-10-18, after the user's reference; fourth version: full width, no frame): a dark panel filling the whole screen,
   the see-through header lying over its top (header styles at the end of this file) */
.h3-hero { background: #0B241A; }
.h3-hero__panel { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; display: flex; color: #fff;
  background: linear-gradient(115deg, #0B241A 0%, #0F2E22 45%, #1E3B2A 100%); }
.h3-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; opacity: .28; mix-blend-mode: luminosity; transform-origin: 50% 60%; }
.h3-hero__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 20%, rgba(106,174,53,.28), rgba(106,174,53,0) 60%), linear-gradient(90deg, rgba(11,36,26,.92) 0%, rgba(11,36,26,.55) 60%, rgba(11,36,26,.35) 100%); }
.h3-hero__in { width: 100%; max-width: 1200px; margin: 0 auto; padding: 168px 40px 40px; display: flex; flex-direction: column; }
.h3-hero__main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 56px; align-content: center; padding-bottom: 72px; }
/* as in the reference: the headline runs the full width; the statement sits on the right beside its two short last lines; the buttons
   under the headline, the round button under the statement */
.h3-hero__title { grid-column: 1 / -1; grid-row: 1; }
.h3-hero__main.is-beside { position: relative; }
.h3-hero__main.is-beside .h3-hero__more { position: absolute; grid-column: auto; grid-row: auto; max-width: none; margin: 0 !important; } /* right after the last word (home3.js) */
.h3-hero__more { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .55em !important; } /* level with the last line */
.h3-hero__down { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 48px; }
.h3-hero .v2-eyebrow { color: var(--leaf); }
.h3-hero h1 { margin: 0; font: 800 clamp(44px, 5.8vw, 84px)/1.02 var(--fh); letter-spacing: -.035em; color: #fff; }
.h3-hero h1 span { display: block; white-space: nowrap; } /* one line each, as written in the copy */
.h3-hero h1 em { font-style: normal; color: var(--leaf); } /* the name in leaf green */
.h3[lang="fr"] .h3-hero h1 { font-size: clamp(40px, 4.9vw, 70px); } /* French lines are longer */
.h3-hero__more { margin: 0; max-width: 400px; font: 500 14px/23px var(--fb); letter-spacing: .06em; text-transform: uppercase; color: rgba(239,245,234,.82); }
.h3-hero .v2-btn--primary { background: var(--leaf); color: #0B241A; } .h3-hero .v2-btn--primary:hover { background: #8BC756; }
.h3-hero__down { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); color: #fff; transition: background .25s, color .25s, border-color .25s; }
.h3-hero__down .v2-ic { rotate: 90deg; }
.h3-hero__down:hover { background: #fff; color: #0F2E22; border-color: #fff; }
.h3-hero__down:hover .v2-ic { animation: h3-bob 1s ease-in-out infinite; }
@keyframes h3-bob { 50% { translate: 0 4px; } }
.h3-hero__partners { display: flex; align-items: center; gap: 40px; padding-top: 28px; border-top: 1px solid rgba(239,245,234,.18); }
.h3-hero__partners > span { flex: none; font: 600 12px/16px var(--fb); letter-spacing: .14em; text-transform: uppercase; color: rgba(239,245,234,.6); }
.h3-hero__partners ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.h3-hero__partners img { display: block; height: 52px; width: auto; opacity: .75; transition: opacity .25s; }
.h3-hero__partners a:hover img { opacity: 1; }
/* 2. purpose: big type that fills in word by word */
.h3-purpose .v2-in { max-width: 1040px; }
.h3-purpose__text { margin: 18px 0 0; font: 700 clamp(30px, 3.6vw, 52px)/1.22 var(--fh); letter-spacing: -.02em; color: #111114; }
.h3-purpose__text .w { color: #C9D3C4; } .h3-purpose__text .w.is-on { color: #111114; } /* opacity fades in on scroll (home3.js) */
.h3-purpose__text .w.is-key.is-on { color: var(--red); }
.h3-purpose .v2-stats { margin-top: 72px; }
/* 3. divisions: two photo panels, the hovered one widens */
.h3-divs__row { display: flex; gap: 20px; height: 560px; }
.h3-div { position: relative; flex: 1; overflow: hidden; border-radius: 28px; color: #fff; text-decoration: none; transition: flex .7s cubic-bezier(.2,.7,.2,1); isolation: isolate; }
.h3-divs__row:hover .h3-div { flex: .8; } .h3-divs__row .h3-div:hover { flex: 1.35; }
.h3-div__img { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.h3-div__img img { display: block; position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; transition: scale 1s cubic-bezier(.2,.7,.2,1); }
.v2.is-fx .h3-div:hover .h3-div__img img { scale: 1.22; }
.h3-div::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,20,14,0) 30%, rgba(8,20,14,.82) 100%); }
.h3-div.is-vet::before, .h3-div.is-agri::before { content: ""; position: absolute; left: 40px; top: 40px; width: 44px; height: 4px; border-radius: 4px; background: #BD3432; }
.h3-div.is-agri::before { background: #0BC728; }
.h3-div__body { position: absolute; left: 40px; right: 40px; bottom: 40px; display: grid; gap: 10px; }
.h3-div__body i { font: 600 12px/16px var(--fb); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: rgba(255,255,255,.8); }
.h3-div__body strong { font: 800 48px/1 var(--fh); letter-spacing: -.02em; }
.h3-div__body em { max-width: 460px; font: 400 16px/25px var(--fb); font-style: normal; color: rgba(255,255,255,.85); }
.h3-div__body u { justify-self: start; margin-top: 8px; padding: 12px 22px; border-radius: 999px; background: #fff; color: #111114; font: 600 15px/20px var(--fb); text-decoration: none; transition: background .2s; }
.h3-div:hover .h3-div__body u { background: var(--blush); }
/* 4. product strip: an endless row */
.h3-shelf { overflow: hidden; }
.h3-strip { margin-top: 8px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.h3-strip__track { display: flex; gap: 20px; width: max-content; animation: h3-marquee 60s linear infinite; }
.h3-strip:hover .h3-strip__track { animation-play-state: paused; }
@keyframes h3-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .h3-strip__track { animation: none; } .h3-strip { overflow-x: auto; } }
.h3-prod { flex: none; width: 240px; display: grid; gap: 6px; padding: 18px 18px 22px; border-radius: 22px; background: #F7FAF5; color: #111114; text-decoration: none; transition: background .25s, transform .25s, box-shadow .25s; }
.h3-prod:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17,17,20,.08); }
.h3-prod__img { display: grid; place-items: center; height: 200px; margin-bottom: 8px; }
.h3-prod__img img { max-width: 80%; max-height: 190px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(17,17,20,.12)); }
.h3-prod i { justify-self: start; padding: 4px 10px; border-radius: 999px; font: 600 11px/14px var(--fb); letter-spacing: .1em; text-transform: uppercase; font-style: normal; background: #FCECEA; color: #6E1023; }
.h3-prod.is-agri i { background: #F2FADF; color: #074310; }
.h3-prod strong { font: 700 16px/22px var(--fh); }
/* products in slight 3D (user, 2026-10-19: "images as 3D, a bit", light): the real pack photo turns a little as it crosses the
   screen (--ry, home3.js), a soft light sweeps over it in the shape of the pack (mask = the same image), a faint reflection and a
   floor shadow that narrows as it turns. CSS transforms only; nothing redrawn, nothing heavy. */
.h3-prod__img { position: relative; perspective: 900px; }
.h3-prod__img::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 62%; height: 16px; translate: -50% 0; scale: var(--sh, 1) 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(17,17,20,.22), rgba(17,17,20,0)); filter: blur(2px); }
.p3d { position: relative; display: inline-block; max-width: 80%; transform: rotateY(var(--ry, 0deg)) rotateX(3deg); transform-style: preserve-3d; will-change: transform; }
.h3-prod__img .p3d img { display: block; max-width: 100%; filter: drop-shadow(calc(var(--ry, 0deg) / 1deg * -.4px) 16px 16px rgba(17,17,20,.16));
  -webkit-box-reflect: below 2px linear-gradient(transparent 78%, rgba(255,255,255,.18)); }
.p3d__shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .85;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 65%) var(--sx, 50%) 0 / 260% 100% no-repeat;
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: reduce) { .p3d { transform: none; } .p3d__shine { display: none; } }
/* 5. for professionals (after boehringer-ingelheim.com's healthcare-professional band): one full-width evergreen band, no photo */
.h3-pro.v2-sec { padding-block: 96px; color: #fff; background: radial-gradient(50% 120% at 100% 0%, rgba(106,174,53,.24), rgba(106,174,53,0) 60%), #0F2E22; }
.h3-pro .v2-eyebrow { color: var(--leaf); }
.h3-pro h2 { margin: 0; font: 800 clamp(30px, 3.2vw, 46px)/1.15 var(--fh); letter-spacing: -.025em; color: #fff; }
.h3-pro__row { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(239,245,234,.16); }
.h3-pro__row > p:first-child { max-width: 640px; margin: 0; color: rgba(239,245,234,.78); font-size: 17px; line-height: 28px; }
.h3-pro__btns { flex: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.h3-pro .v2-btn { display: inline-flex; align-items: center; gap: 8px; }
.h3-pro__main { background: var(--leaf); border-color: var(--leaf); color: #0B241A; }
.h3-pro__main:hover { background: #8BC756; border-color: #8BC756; color: #0B241A; }
.h3-pro__alt { background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.h3-pro__alt:hover { background: #fff; border-color: #fff; color: #0F2E22; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
/* 6. stories */
.h3-stories__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; text-align: left; }
.h3-stories__head .v2-eyebrow { text-align: left; }
.h3-stories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; } /* three even cards, no gaps */
.h3-story { display: flex; flex-direction: column; gap: 22px; color: #111114; text-decoration: none; }
.h3-story__img { position: relative; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; background: #EFF5EA; }
.h3-story__img img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; transition: scale .6s cubic-bezier(.2,.7,.2,1); }
.h3-story:hover .h3-story__img img { scale: 1.05; }
.h3-story__body { display: grid; gap: 10px; }
.h3-story__body i { font: 600 12px/16px var(--fb); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--red); }
.h3-story__body strong { font: 700 22px/29px var(--fh); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.h3-story:hover .h3-story__body strong { color: #2D5A40; }
.h3-story__body u { margin-top: 4px; color: var(--red); font-weight: 600; text-decoration: none; font-size: 15px; }
/* 7. join */
.h3-join.v2-sec { position: relative; overflow: clip; padding-block: 96px; background: #F7FAF5; color: #111114; } /* light band, so it doesn't merge with the footer */
.h3-join__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.h3-join__card { --mx: 70%; --my: 30%; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 320px; padding: 44px; border-radius: 28px; background: #0F2E22; color: #fff; text-decoration: none; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.h3-join__card:hover { box-shadow: 0 30px 60px rgba(15,46,34,.28); }
/* soft light following the pointer + a glow drifting on its own */
.h3-join__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(106,174,53,.32), rgba(106,174,53,0) 60%); opacity: 0; transition: opacity .4s; }
.h3-join__card:hover::before { opacity: 1; }
.h3-join__glow { position: absolute; z-index: -1; width: 360px; height: 360px; left: -120px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(106,174,53,.35), rgba(106,174,53,0) 65%); animation: h3-drift 14s ease-in-out infinite alternate; pointer-events: none; }
.h3-join__card:nth-child(2) .h3-join__glow { animation-delay: -7s; }
@keyframes h3-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(140px, -60px) scale(1.2); } 100% { transform: translate(60px, -140px) scale(.9); } }
.h3-join__card strong { margin-top: auto; font: 800 36px/42px var(--fh); letter-spacing: -.015em; }
.h3-join__text { min-height: 78px; max-width: 330px; color: rgba(239,245,234,.8); font-size: 16px; line-height: 26px; }
.h3-join__go { display: inline-flex; align-items: center; gap: 14px; margin-top: 10px; font-weight: 700; color: #fff; }
.h3-join__go u { text-decoration: none; }
.h3-join__go b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); transition: background .3s, border-color .3s, color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.h3-join__card:hover .h3-join__go b { background: var(--leaf); border-color: var(--leaf); color: #0B241A; transform: rotate(-45deg); }
/* scroll motion (user's choice, 2026-10-19): two rows of huge outlined words slide in opposite directions behind the cards; the cards' green deepens
   from Maizer green to the footer's evergreen as the page goes down (home3.js) */
.h3-join__words { display: flex; position: absolute; inset: 0; z-index: 0; flex-direction: column; justify-content: center; gap: 8px; pointer-events: none; }
.h3-join__words span { white-space: nowrap; font: 800 clamp(64px, 11vw, 168px)/1 var(--fh); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(45,90,64,.22); }
.h3-join__words span:nth-child(2) { margin-left: -40%; }
.h3-join .h3-join__grid { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .h3-join__glow { animation: none; } .h3-join__card { transition: none; } }
@media (max-width: 1000px) {
  .h3 .v2-sec { padding-block: 80px; }
  .h3-hero__main { grid-template-columns: 1fr; gap: 28px; } .h3-hero__down { display: none; } .h3-hero__title, .h3-hero__more { grid-column: 1; grid-row: auto; } .h3-hero__more { margin: 0 !important; }
  .h3-pro__row { flex-direction: column; align-items: flex-start; gap: 28px; } .h3-hero__main { padding-bottom: 56px; }
  .h3-divs__row { flex-direction: column; height: auto; } .h3-div { min-height: 380px; } .h3-divs__row:hover .h3-div, .h3-divs__row .h3-div:hover { flex: 1; }
  .h3-join__grid { grid-template-columns: 1fr; gap: 24px; }
  .h3-stories__grid { gap: 20px; } .h3-story__body strong { font-size: 18px; line-height: 24px; }
}
@media (max-width: 600px) {
  .h3 .v2-sec { padding-block: 64px; } 
  .h3-div { min-height: 340px; border-radius: 22px; } .h3-div__body { left: 24px; right: 24px; bottom: 24px; } .h3-div::before { left: 24px !important; top: 24px !important; }
  .h3-div__body strong { font-size: 36px; }
  .h3-prod { width: 190px; } .h3-prod__img { height: 160px; } .h3-prod__img img { max-height: 150px; }
  .h3-join__card { min-height: 340px; padding: 28px 22px; border-radius: 22px; } .h3-join__card strong { font-size: 28px; line-height: 34px; } .h3-pro.v2-sec { padding-block: 64px; } .h3-pro__row > p:first-child { font-size: 16px; line-height: 26px; } .h3-hero__panel { min-height: 0; } .h3-hero__in { padding: 140px 20px 28px; } .h3-hero__main { padding-bottom: 36px; } .h3-hero__partners { flex-direction: column; align-items: flex-start; gap: 16px; } .h3-hero__partners img { height: 40px; } .h3-hero__more { font-size: 13px; line-height: 21px; } .h3-hero h1 { font-size: min(40px, 10.5vw); } .h3[lang="fr"] .h3-hero h1 { font-size: min(36px, 9.2vw); } /* each line stays whole */
  .h3-stories__grid { grid-template-columns: 1fr; gap: 28px; } .h3-story { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; } .h3-story__img { border-radius: 14px; }
  .h3-stories__head { flex-direction: column; align-items: flex-start; }
}

/* ======================= About in the home style (template-about-v3.php, 2026-10-19: previous structure, home style) ======================= */
/* hero: the home page's dark green under the see-through header; text left, photo right */
.ab3-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(60% 80% at 85% 20%, rgba(106,174,53,.24), rgba(106,174,53,0) 60%), linear-gradient(115deg, #0B241A 0%, #0F2E22 45%, #1E3B2A 100%); }
.ab3-hero__in { max-width: 1200px; min-height: 92svh; margin: 0 auto; padding: 160px 40px 88px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.ab3-hero h1 { margin: 0; font: 800 clamp(40px, 4.2vw, 60px)/1.04 var(--fh); letter-spacing: -.035em; }
.ab3-hero h1 span { display: block; white-space: nowrap; } /* one line each, as written in the copy */
.ab3-hero h1 em { font-style: normal; color: var(--leaf); }
.ab3-hero__text > p:not(.ab3-hero__btns) { max-width: 560px; margin: 28px 0 0; font: 500 14px/24px var(--fb); letter-spacing: .05em; text-transform: uppercase; color: rgba(239,245,234,.8); }
.ab3-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }
.ab3 .v2-btn { display: inline-flex; align-items: center; gap: 8px; }
.ab3-hero__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; box-shadow: 0 40px 80px rgba(0,0,0,.35); }
.ab3-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab3[lang="fr"] .ab3-hero h1 { font-size: clamp(34px, 3.8vw, 54px); }
/* intro: the big sentence + two columns */
.ab3-intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; padding-top: 36px; border-top: 1px solid #E2EADC; }
.ab3-intro__cols p { margin: 0; color: #5B606B; font-size: 17px; line-height: 28px; }
/* who we are: text column + two photo cards (the home division panels, smaller) */
.ab3-who__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.ab3-who__text { align-self: center; padding-right: 24px; }
.ab3 h2 { margin: 0; font: 800 clamp(30px, 3.2vw, 44px)/1.12 var(--fh); letter-spacing: -.025em; color: #111114; }
.ab3-who__text h2 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.18; }
.ab3-who__text p { margin: 18px 0 0; color: #5B606B; font-size: 16px; line-height: 26px; }
.ab3-who__card.h3-div { min-height: 460px; flex: none; }
/* how Maizer works: the numbered columns, three of them */
.ab3-works__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.ab3-works__head p { margin: 0; max-width: 380px; color: #5B606B; font-size: 17px; line-height: 27px; }
.ab3-values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #E2EADC; }
.ab3-values__list.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab3-values__list li { display: grid; align-content: start; gap: 14px; padding: 36px 32px 12px; border-left: 1px solid #E2EADC; }
.ab3-values__list li:first-child { border-left: 0; padding-left: 0; }
.ab3-values__list i { font: 800 64px/1 var(--fh); font-style: normal; letter-spacing: -.04em; color: #DCE6D5; transition: color .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.ab3-values__list li:hover i { color: var(--leaf); transform: translateY(-6px); }
.ab3-values__list strong { font: 800 24px/30px var(--fh); color: #0F2E22; }
.ab3-values__list p { margin: 0; color: #5B606B; font-size: 16px; line-height: 26px; }
/* operating model: photo + the five steps as rows */
.ab3-ops__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ab3-ops__photo { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 28px; }
.ab3-ops__photo img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.ab3-ops__steps { list-style: none; margin: 32px 0 0; padding: 0; }
.ab3-ops__steps li { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid #DCE6D5; font: 700 19px/26px var(--fh); color: #0F2E22; transition: padding .3s, color .3s; }
.ab3-ops__steps li:last-child { border-bottom: 1px solid #DCE6D5; }
.ab3-ops__steps b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #2D5A40; font: 800 15px/1 var(--fh); transition: background .3s, color .3s; }
.ab3-ops__steps li:hover { padding-left: 8px; }
.ab3-ops__steps li:hover b { background: var(--leaf); color: #0B241A; }
/* partner band: heading and button on one row */
.ab3-cta { margin-top: 18px; }
.ab3-cta h2 { max-width: 760px; color: #fff; }
@media (max-width: 1000px) {
  .ab3-hero__in { grid-template-columns: 1fr; min-height: 0; padding: 140px 32px 64px; }
  .ab3-hero__photo { aspect-ratio: 16 / 10; } .ab3-hero h1 span { white-space: normal; }
  .ab3-who__grid { grid-template-columns: 1fr 1fr; } .ab3-who__text { grid-column: 1 / -1; padding: 0 0 8px; }
  .ab3-values__list, .ab3-values__list.is-3 { grid-template-columns: 1fr; } .ab3-values__list li { border-left: 0; padding: 28px 0 8px; border-top: 1px solid #E2EADC; } .ab3-values__list li:first-child { border-top: 0; }
  .ab3-ops__grid { grid-template-columns: 1fr; gap: 40px; } .ab3-ops__photo { aspect-ratio: 16 / 10; }
  .ab3-works__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .ab3-hero__in { padding: 128px 20px 48px; gap: 36px; }
  .ab3-hero h1 { font-size: min(36px, 9.4vw); } .ab3[lang="fr"] .ab3-hero h1 { font-size: min(32px, 8.4vw); }
  .ab3-hero__text > p:not(.ab3-hero__btns) { font-size: 13px; line-height: 21px; }
  .ab3-intro__cols { grid-template-columns: 1fr; gap: 20px; }
  .ab3-who__grid { grid-template-columns: 1fr; } .ab3-who__card.h3-div { min-height: 340px; }
}

/* three cards on sage (Contact's support cards) */
.ab3-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ab3-why__card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 36px; border-radius: 24px; background: #fff; transition: box-shadow .4s; }
.ab3-why__card:hover { box-shadow: 0 24px 50px rgba(15,46,34,.1); }
.ab3-why__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; background: #EFF5EA; color: #2D5A40; }
.ab3-why__card h3 { margin: 0; font: 800 22px/28px var(--fh); color: #0F2E22; }
.ab3-why__card p { margin: 0; color: #5B606B; font-size: 16px; line-height: 26px; }
@media (max-width: 1000px) { .ab3-why__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ab3-why__card { padding: 28px 22px; } }

/* ======================= Contact in the home style (template-contact-v3.php, 2026-10-19) ======================= */
.ct3 .ab3-hero h1 { font-size: clamp(48px, 6vw, 88px); } /* two short lines: bigger */
.ct3-hero__card { aspect-ratio: 4 / 4.4; }
.ct3-steps { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct3-steps li { display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px; background: rgba(11,36,26,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.ct3-steps small { font: 700 12px/16px var(--fb); letter-spacing: .12em; color: var(--leaf); }
.ct3-steps b { font: 700 16px/22px var(--fh); }
.ct3-form__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.ct3-form__side p { margin: 16px 0 28px; color: #5B606B; font-size: 17px; line-height: 28px; }
.ct3-form__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; }
.ct3-form__photo img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.ct3-form__box { display: grid; gap: 18px; padding: 40px; border-radius: 28px; background: #F7FAF5; border: 1px solid #E2EADC; }
.ct3-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct3-form__box label { display: grid; gap: 8px; }
.ct3-form__box label > span { font: 600 13px/18px var(--fb); color: #0F2E22; }
.ct3-form__box :is(input, select, textarea) { width: 100%; min-width: 0; padding: 14px 16px; border: 1.5px solid #D6E2CF; border-radius: 14px; background: #fff; font: 500 16px/22px var(--fb); color: #111114; transition: border-color .2s, box-shadow .2s; }
.ct3-form__box :is(input, select, textarea):focus { outline: 0; border-color: #2D5A40; box-shadow: 0 0 0 4px rgba(45,90,64,.14); }
.ct3-form__box textarea { resize: vertical; }
.ct3-send { justify-self: start; border: 0; cursor: pointer; }
.ct3-note { margin: 0; padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.ct3-note.is-ok { background: #EAF8EE; color: #11632A; } .ct3-note.is-err { background: #FDECEC; color: #A1201E; }
.mz-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct3-lines { list-style: none; margin: 4px 0 0; padding: 12px 0 0; display: grid; gap: 8px; width: 100%; border-top: 1px solid #E2EADC; }
.ct3-lines li { display: flex; align-items: center; gap: 10px; color: #0F2E22; font-weight: 600; font-size: 15px; }
.ct3-lines .v2-ic { flex: none; color: #2D5A40; }
.ct3-lines a { color: inherit; text-decoration: none; } .ct3-lines a:hover { color: #2D5A40; text-decoration: underline; text-underline-offset: 3px; }
.ct3-forge { position: relative; overflow: hidden; isolation: isolate; padding: 140px 16px; }
.ct3-forge__img { position: absolute; inset: 0; z-index: -1; }
.ct3-forge__img img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.ct3-forge__card { max-width: 520px; padding: 44px; border-radius: 28px; background: rgba(15,46,34,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; }
.ct3-forge__card .v2-eyebrow { color: var(--leaf); }
.ct3-forge__card h2 { color: #fff; }
.ct3-forge__card p { margin: 16px 0 28px; color: rgba(239,245,234,.8); font-size: 17px; line-height: 28px; }
@media (max-width: 1000px) { .ct3-form__grid { grid-template-columns: 1fr; gap: 40px; } .ct3-hero__card { aspect-ratio: 16 / 10; } }
@media (max-width: 600px) {
  .ct3 .ab3-hero h1 { font-size: min(44px, 11vw); }
  .ct3-grid2 { grid-template-columns: 1fr; } .ct3-form__box { padding: 24px 18px; border-radius: 22px; }
  .ct3-steps { grid-template-columns: 1fr 1fr; } .ct3-steps li { padding: 10px 12px; } .ct3-steps b { font-size: 14px; line-height: 18px; }
  .ct3-forge { padding: 72px 16px; } .ct3-forge__card { padding: 28px 22px; border-radius: 22px; }
}

/* ======================= News in the home style (home.php, 2026-10-19) ======================= */
.nw3-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.nw3-hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nw3-hcard { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.05; border-radius: 22px; color: #fff; text-decoration: none; isolation: isolate; }
.nw3-hcard.is-wide { grid-column: 1 / -1; aspect-ratio: 2.2 / 1; }
.nw3-hcard__img, .nw3-hcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.nw3-hcard:hover .nw3-hcard__img img { scale: 1.06; }
.nw3-hcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,36,26,0) 35%, rgba(11,36,26,.9) 100%); }
.nw3-hcard__txt { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 6px; }
.nw3-hcard__txt i { font: 600 11px/14px var(--fb); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--leaf); }
.nw3-hcard__txt b { font: 700 16px/21px var(--fh); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw3 .ab3-hero h1 { font-size: clamp(36px, 3.5vw, 52px); }
.nw3 .ab3-hero h1 span { white-space: normal; }
.nw3-filters { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.nw3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nw3-chips a { padding: 10px 20px; border-radius: 999px; border: 1.5px solid #D6E2CF; color: #0F2E22; font: 600 14px/18px var(--fb); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.nw3-chips a:hover { border-color: #2D5A40; }
.nw3-chips a.is-on { background: #0F2E22; border-color: #0F2E22; color: #fff; }
.nw3-search { display: flex; align-items: center; gap: 10px; width: min(100%, 340px); padding: 0 18px; border: 1.5px solid #D6E2CF; border-radius: 999px; color: #5B606B; transition: border-color .2s, box-shadow .2s; }
.nw3-search:focus-within { border-color: #2D5A40; box-shadow: 0 0 0 4px rgba(45,90,64,.14); }
.nw3-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: none; font: 500 15px/20px var(--fb); color: #111114; }
.nw3-rows { border-top: 1px solid #E2EADC; }
.nw3-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 56px; gap: 32px; align-items: center; padding: 28px 0; border-bottom: 1px solid #E2EADC; color: #111114; text-decoration: none; }
.nw3-row__img { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 16px; background: #EFF5EA; }
.nw3-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2,.7,.2,1); }
.nw3-row:hover .nw3-row__img img { scale: 1.06; }
.nw3-row__body { display: grid; gap: 8px; }
.nw3-row__body i { font: 600 12px/16px var(--fb); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #2D5A40; }
.nw3-row__body b { font: 700 24px/31px var(--fh); transition: color .2s; }
.nw3-row:hover .nw3-row__body b { color: #2D5A40; }
.nw3-row__body span { color: #5B606B; font-size: 16px; line-height: 26px; }
.nw3-row__go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #D6E2CF; color: #0F2E22; transition: background .3s, border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.nw3-row:hover .nw3-row__go { background: var(--leaf); border-color: var(--leaf); transform: rotate(-45deg); }
.nw3-empty { padding: 48px 0; color: #5B606B; }
.nw3-points { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 28px 0 0; padding: 0; }
.nw3-points li { display: flex; align-items: center; gap: 10px; color: rgba(239,245,234,.85); font-weight: 600; }
.nw3-points .v2-ic { color: var(--leaf); }
@media (max-width: 1000px) { .nw3-hero__in { grid-template-columns: 1fr; } .nw3-row { grid-template-columns: 160px minmax(0, 1fr); } .nw3-row__go { display: none; } .nw3-filters { flex-direction: column; align-items: stretch; } .nw3-search { width: 100%; } }
@media (max-width: 600px) {
  .nw3 .ab3-hero h1 { font-size: min(34px, 9vw); }
  .nw3-row { grid-template-columns: 1fr; gap: 14px; } .nw3-row__body b { font-size: 19px; line-height: 25px; }
  .nw3-hcard__txt b { font-size: 14px; line-height: 18px; }
}

/* ======================= Catalogue + category pages in the home style (template-parts/product-list.php, 2026-10-19) ======================= */
.pl3-hero { color: #fff; padding: 176px 16px 72px; background: radial-gradient(60% 120% at 90% 0%, rgba(106,174,53,.24), rgba(106,174,53,0) 60%), linear-gradient(115deg, #0B241A 0%, #0F2E22 55%, #1E3B2A 100%); }
.pl3-hero .v2-eyebrow { color: var(--leaf); }
.pl3-hero h1 { margin: 14px 0 0; font: 800 clamp(44px, 6vw, 88px)/1.02 var(--fh); letter-spacing: -.035em; color: #fff; }
.pl3-body.v2-sec { padding-block: 64px 96px; }
.pl3-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.pl3-side { position: sticky; top: 96px; display: grid; gap: 18px; }
.pl3-select { display: grid; gap: 8px; }
.pl3-select > span { font: 600 13px/18px var(--fb); color: #0F2E22; }
.pl3-select select { width: 100%; padding: 13px 40px 13px 16px; border: 1.5px solid #D6E2CF; border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232D5A40' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 10px 6px; -webkit-appearance: none; appearance: none; font: 500 15px/20px var(--fb); color: #111114; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.pl3-select select:focus { outline: 0; border-color: #2D5A40; box-shadow: 0 0 0 4px rgba(45,90,64,.14); }
.pl3-search { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.pl3-search .nw3-search { width: min(100%, 520px); }
.pl3-count { flex: none; color: #5B606B; } .pl3-count b { color: #0F2E22; }
.pl3-table { border-top: 1px solid #E2EADC; }
.pl3-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.2fr) 36px; gap: 20px; align-items: center; padding: 18px 12px; border-bottom: 1px solid #E2EADC; color: #111114; text-decoration: none; transition: background .2s; }
a.pl3-row:hover { background: #F7FAF5; }
.pl3-row--head { padding-block: 14px; font: 600 12px/16px var(--fb); letter-spacing: .1em; text-transform: uppercase; color: #5B606B; }
.pl3-row .n { font: 700 16px/22px var(--fh); color: #0F2E22; }
.pl3-row .c, .pl3-row .p { color: #5B606B; font-size: 14px; line-height: 20px; }
.pl3-row .s { display: flex; flex-wrap: wrap; gap: 6px; }
.pl3-row .s i { padding: 3px 10px; border-radius: 999px; background: #EFF5EA; color: #2D5A40; font: 600 12px/18px var(--fb); font-style: normal; }
.pl3-row .go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #2D5A40; transition: background .25s, transform .3s; }
a.pl3-row:hover .go { background: var(--leaf); color: #0B241A; transform: rotate(-45deg); }
.pl3-empty { padding: 48px 12px; color: #5B606B; }
.pl3-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; color: #5B606B; font-size: 14px; }
.pl3-pager { display: flex; gap: 10px; }
.pl3-pager a, .pl3-pager span { padding: 11px 22px; border-radius: 999px; border: 1.5px solid #D6E2CF; font-weight: 600; color: #0F2E22; text-decoration: none; }
.pl3-pager a.on { background: #0F2E22; border-color: #0F2E22; color: #fff; } .pl3-pager a:hover { border-color: #2D5A40; }
.pl3-pager .off { opacity: .4; }
.pl3-cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pl3-ccard { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 22px; border-radius: 24px; background: #fff; color: #111114; text-decoration: none; transition: box-shadow .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.pl3-ccard:hover { box-shadow: 0 24px 50px rgba(15,46,34,.12); transform: translateY(-4px); }
.pl3-ccard__img { display: block; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 16px; background: #EFF5EA; }
.pl3-ccard__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2,.7,.2,1); }
.pl3-ccard:hover .pl3-ccard__img img { scale: 1.05; }
.pl3-ccard strong { padding: 0 8px; font: 800 19px/25px var(--fh); color: #0F2E22; }
.pl3-ccard > span:not(.pl3-ccard__img) { padding: 0 8px; color: #5B606B; font-size: 15px; line-height: 23px; }
.pl3-ccard u { margin-top: auto; padding: 8px 8px 0; color: #2D5A40; font-weight: 700; text-decoration: none; }
@media (max-width: 1000px) {
  .pl3-wrap { grid-template-columns: 1fr; gap: 24px; } .pl3-side { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pl3-side > .v2-eyebrow { grid-column: 1 / -1; }
  .pl3-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } .pl3-row .s, .pl3-row .go { display: none; }
  .pl3-cgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pl3-hero { padding: 140px 16px 48px; } .pl3-hero h1 { font-size: min(44px, 11vw); }
  .pl3-side { grid-template-columns: 1fr; }
  .pl3-search { flex-direction: column; align-items: stretch; }
  .pl3-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 4px; } .pl3-row--head { display: none; }
  .pl3-row .c { grid-column: 1; } .pl3-row .p { grid-column: 2; grid-row: 1; text-align: right; }
  .pl3-foot { flex-direction: column; align-items: flex-start; }
  .pl3-cgrid { grid-template-columns: 1fr; }
}

/* ======================= Partners + Careers in the home style (template-partners-v3.php, template-careers-v3.php, 2026-10-19) ======================= */
.h3-pro h2.pt3-cta__h, .h3-pro .ab3-cta h2 { color: #fff; }
.pt3 .ab3-hero h1 { font-size: clamp(34px, 3.3vw, 48px); }
.pt3 .ab3-hero h1 span { white-space: normal; } /* long lines: let them wrap rather than run under the photo */
.pt3 .ab3-hero .v2-eyebrow { margin-bottom: 18px; color: var(--leaf); }
.pt3-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pt3-hero__photo { aspect-ratio: 5 / 4; }
.pt3-belief__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.pt3-belief__big { margin-top: 0; font-size: clamp(26px, 2.6vw, 38px); }
.pt3-belief__small { margin: 24px 0 0; color: #2D5A40; font: 700 20px/28px var(--fh); }
.pt3-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pt3-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 28px; border-radius: 24px; background: #fff; transition: box-shadow .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.pt3-card:hover { box-shadow: 0 24px 50px rgba(15,46,34,.1); transform: translateY(-4px); }
.pt3-card__img { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 10px; border-radius: 16px; background: #EFF5EA; }
.pt3-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2,.7,.2,1); }
.pt3-card:hover .pt3-card__img img { scale: 1.05; }
.pt3-card small { padding: 0 10px; font: 700 11px/16px var(--fb); letter-spacing: .12em; color: #2D5A40; }
.pt3-card h3 { margin: 0; padding: 0 10px; font: 800 21px/27px var(--fh); color: #0F2E22; }
.pt3-card p { margin: 0; padding: 0 10px; color: #5B606B; font-size: 15px; line-height: 24px; }
.pt3-why.v2-sec { padding-block: 72px; }
.cr3-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cr3-tiles span { display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 22px; }
.cr3-tiles span:nth-child(2) { translate: 0 28px; } .cr3-tiles span:nth-child(4) { translate: 0 28px; }
.cr3-tiles img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.cr3-tiles span:hover img { scale: 1.06; }
.cr3 .ab3-hero h1 { font-size: clamp(48px, 6vw, 88px); }
.cr3-team__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 18px; }
.cr3-team__cols h2 { margin-bottom: 18px; }
.cr3-team__cols p { margin: 0 0 16px; color: #5B606B; font-size: 17px; line-height: 28px; }
.cr3-link { color: #2D5A40; font-weight: 700; text-decoration: none; } .cr3-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.nw3-row[hidden] { display: none; }
@media (max-width: 1000px) {
  .pt3-hero__in { grid-template-columns: 1fr; } .pt3-belief__grid { grid-template-columns: 1fr; gap: 36px; } .pt3-cards__grid { grid-template-columns: 1fr 1fr; }
  .cr3-team__cols { grid-template-columns: 1fr; gap: 32px; } .cr3-tiles span:nth-child(even) { translate: none; }
}
@media (max-width: 600px) {
  .pt3 .ab3-hero h1 { font-size: min(32px, 8.4vw); } .cr3 .ab3-hero h1 { font-size: min(44px, 11vw); }
  .pt3-cards__grid { grid-template-columns: 1fr; }
}

/* ======================= Financial highlights (template-figures-v3.php, 2026-10-19): highlights with a "wow" effect ======================= */
.fg3 h2 { margin: 0; font: 800 clamp(30px, 3.2vw, 44px)/1.12 var(--fh); letter-spacing: -.025em; color: #111114; }
/* 1. hero: a giant outlined year drifting behind the headline (home3.js) */
.fg3-hero__year { position: absolute; right: -2vw; bottom: -6vw; z-index: -1; font: 800 clamp(220px, 34vw, 560px)/.8 var(--fh); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(106,174,53,.28); pointer-events: none; user-select: none; }
/* 2. highlights: stacked blocks by default; a held full screen with one giant number at a time on wide screens (.is-scene) */
.fg3-hl { --bg: #0F2E22; color: #fff; background: var(--bg); transition: background-color .6s; }
.fg3-hl:not(.is-scene) .fg3-hl__slide { margin: 0 -40px; padding: 56px 40px; background: var(--sbg); border: 0; } /* stacked: each highlight on its own colour */
.fg3-hl:not(.is-scene) .fg3-hl__stage { padding-bottom: 0; }
.fg3-hl.is-light .fg3-hl__eyebrow { color: #2D5A40; }
.fg3-hl.is-light .fg3-hl__dots li { background: rgba(15,46,34,.2); } .fg3-hl.is-light .fg3-hl__dots li.is-on { background: #2D5A40; }
.fg3-hl__stage { position: relative; max-width: 1200px; margin: 0 auto; padding: 88px 40px; }
.fg3-hl__eyebrow { color: var(--leaf); }
.fg3-hl__slide { padding: 48px 0; border-bottom: 1px solid rgba(239,245,234,.14); }
.fg3-hl__slide b { display: block; font: 800 clamp(96px, 16vw, 260px)/.85 var(--fh); letter-spacing: -.06em; color: var(--sfg, #fff); font-variant-numeric: tabular-nums; }
.fg3-hl__slide strong { display: block; margin-top: 12px; font: 800 clamp(28px, 3.6vw, 56px)/1.05 var(--fh); letter-spacing: -.02em; color: var(--sac, var(--leaf)); }
.fg3-hl__slide p { max-width: 520px; margin: 16px 0 0; color: var(--sfg, #fff); opacity: .78; font-size: 18px; line-height: 28px; }
.fg3-hl__dots { display: none; }
.fg3-hl.is-scene .fg3-hl__stage { height: 100svh; padding-top: 0; padding-bottom: 0; display: grid; align-items: center; }
.fg3-hl.is-scene .fg3-hl__eyebrow { position: absolute; top: 132px; left: 40px; }
.fg3-hl.is-scene .fg3-hl__slide { position: absolute; left: 40px; right: 40px; top: 50%; translate: 0 -46%; padding: 0; border: 0; }
.fg3-hl.is-scene .fg3-hl__dots { display: grid; gap: 12px; position: absolute; right: 40px; top: 50%; translate: 0 -50%; margin: 0; padding: 0; list-style: none; }
.fg3-hl__dots li { width: 10px; height: 10px; border-radius: 50%; background: rgba(239,245,234,.25); transition: background .3s, transform .3s; }
.fg3-hl__dots li.is-on { background: var(--leaf); transform: scale(1.4); }
/* 3. the management's word (colours in word by word) */
.fg3-message blockquote { margin: 18px 0 0; }
.fg3-who { margin: 28px 0 0; font: 700 16px/22px var(--fb); color: #2D5A40; }
/* 4. 2025: a horizontal track of quarters; on wide screens it slides sideways while the screen holds (.is-scene) */
.fg3-year { background: #F7FAF5; overflow: hidden; }
.fg3-year__stage { max-width: 1200px; margin: 0 auto; padding: 96px 40px; }
.fg3-year__head { margin-bottom: 40px; }
.fg3-year__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.fg3-year__track li { position: relative; display: grid; align-content: start; gap: 12px; padding: 36px; border-radius: 28px; background: #fff; box-shadow: 0 1px 0 rgba(15,46,34,.04); }
.fg3-year__track i { font: 800 64px/1 var(--fh); font-style: normal; letter-spacing: -.04em; color: var(--leaf); }
.fg3-year__track strong { font: 800 26px/32px var(--fh); color: #0F2E22; }
.fg3-year__track p { margin: 0; color: #5B606B; font-size: 17px; line-height: 27px; }
.fg3-year.is-scene .fg3-year__stage { height: 100svh; padding-block: 0; display: flex; flex-direction: column; justify-content: center; }
.fg3-year.is-scene .fg3-year__track { display: flex; gap: 28px; width: max-content; }
.fg3-year.is-scene .fg3-year__track li { width: min(560px, 42vw); min-height: 360px; }
/* 5. divisions */
.fg3-split { display: flex; height: 72px; overflow: hidden; border-radius: 999px; background: #E2EADC; margin-bottom: 24px; }
.fg3-split span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 26px; width: var(--w); color: #fff; font: 700 16px/1 var(--fb); white-space: nowrap; overflow: hidden; }
.fg3-split b { font: 800 26px/1 var(--fh); }
.fg3-split i { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.fg3-split .is-vet { background: linear-gradient(90deg, #6E1023, #BD3432); } .fg3-split .is-agri { background: linear-gradient(90deg, #0A7A1E, #6AAE35); }
.fg3-divs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fg3-div { padding: 36px; border-radius: 24px; background: #fff; border-top: 6px solid; }
.fg3-div.is-vet { border-color: #BD3432; } .fg3-div.is-agri { border-color: #0A7A1E; }
.fg3-div > strong { font: 800 28px/34px var(--fh); color: #0F2E22; }
.fg3-div dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
.fg3-div dt { color: #5B606B; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.fg3-div dd { margin: 6px 0 0; font: 800 44px/1 var(--fh); letter-spacing: -.02em; color: #0F2E22; }
.fg3-div > p { margin: 0; color: #5B606B; }
/* 6. regions */
.fg3-regions__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.fg3-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.fg3-bars li { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.fg3-bars span { font-weight: 600; color: #0F2E22; } .fg3-bars b { font: 800 22px/1 var(--fh); color: #0F2E22; }
.fg3-bars i { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #2D5A40, var(--leaf)) 0 0 / var(--w) 100% no-repeat, #E2EADC; }
/* 7. quality */
.fg3-quality.v2-sec { color: #fff; background: radial-gradient(60% 120% at 100% 0%, rgba(106,174,53,.22), rgba(106,174,53,0) 60%), #0F2E22; }
.fg3-quality .v2-eyebrow { color: var(--leaf); } .fg3-quality h2 { color: #fff; }
.fg3-quality__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fg3-quality__grid div { padding-top: 24px; border-top: 1px solid rgba(239,245,234,.2); }
.fg3-quality__grid b { font: 800 clamp(40px, 4vw, 60px)/1 var(--fh); letter-spacing: -.02em; }
.fg3-quality__grid p { margin: 12px 0 0; color: rgba(239,245,234,.75); }
@media (max-width: 1000px) {
  .fg3-regions__grid { grid-template-columns: 1fr; gap: 28px; }
  .fg3-divs__grid, .fg3-quality__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fg3-hl__stage, .fg3-year__stage { padding: 64px 20px; } .fg3-hl:not(.is-scene) .fg3-hl__slide { margin: 0 -20px; padding: 48px 20px; }
  .fg3-year__track li { padding: 26px 22px; } .fg3-year__track i { font-size: 48px; }
  .fg3-split { height: 60px; } .fg3-split span { padding: 0 16px; font-size: 13px; justify-content: center; } .fg3-split b { font-size: 20px; } .fg3-split i { display: none; } /* phones: the percentages only (the cards below name the divisions) */
  .fg3-div { padding: 26px 22px; } .fg3-div dd { font-size: 34px; }
}

/* phone menu on the home-style pages: the category lists under Veterinary / Agriculture are left out so every item fits on screen
   (QA, 2026-10-19); the categories stay one tap away on the division pages and the catalogue */
@media (max-width: 1100px) { .mz-group .sh-nav .sh-sub { display: none !important; } }

/* ======================= Product page in the home style (single-mz_product.php, 2026-10-19) ======================= */
.pd3-hero__in { min-height: 0; padding-top: 168px; padding-bottom: 80px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pd3 .ab3-hero h1 { font-size: clamp(40px, 5vw, 76px); }
.pd3 .ab3-hero .v2-eyebrow { display: block; margin-bottom: 16px; color: var(--leaf); }
.pd3 .ab3-hero__text > p.pd3-sub { max-width: none; margin: 14px 0 0; font: 700 clamp(20px, 2vw, 26px)/1.3 var(--fh); letter-spacing: 0; text-transform: none; color: var(--leaf); }
.pd3 .ab3-hero__text > p.pd3-desc { max-width: 560px; margin: 18px 0 0; font: 400 17px/28px var(--fb); letter-spacing: 0; text-transform: none; color: rgba(239,245,234,.82); }
.pd3-hero__media { display: grid; place-items: center; aspect-ratio: 1 / 1; max-height: 520px; border-radius: 28px; background: radial-gradient(70% 70% at 50% 40%, #fff, #EEF4EA); box-shadow: 0 40px 80px rgba(0,0,0,.3); overflow: hidden; }
.pd3-hero__media img { max-width: 78%; max-height: 82%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(15,46,34,.22)); }
.pd3-ph { display: grid; justify-items: center; gap: 22px; padding: 24px; text-align: center; }
.pd3-hero__media .pd3-ph img { width: 220px; max-width: 70%; filter: none; opacity: .9; }
.pd3-ph b { font: 800 clamp(22px, 2.4vw, 32px)/1.15 var(--fh); letter-spacing: -.02em; color: #0F2E22; }
.pd3-crumbs { padding: 16px; border-bottom: 1px solid #E2EADC; font-size: 14px; color: #5B606B; }
.pd3-crumbs a { color: #2D5A40; text-decoration: none; } .pd3-crumbs a:hover { text-decoration: underline; } .pd3-crumbs strong { color: #0F2E22; }
.pd3-body.v2-sec { padding-block: 64px 96px; }
.pd3-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.pd3-block { padding: 28px 0; border-top: 1px solid #E2EADC; }
.pd3-block:first-child { border-top: 0; padding-top: 0; }
.pd3-block h2 { margin: 0 0 6px; font: 800 30px/36px var(--fh); letter-spacing: -.02em; color: #0F2E22; }
.pd3-block h3 { margin: 0 0 10px; font: 800 21px/28px var(--fh); color: #0F2E22; }
.pd3-block p { margin: 0; color: #4A4F59; font-size: 17px; line-height: 28px; }
.pd3-note { margin: 0 0 16px !important; color: #5B606B !important; font-size: 15px !important; }
.pd3-table { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid #E2EADC; }
.pd3-table div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; background: #fff; }
.pd3-table div:nth-child(even) { background: #F7FAF5; }
.pd3-table dt { color: #0F2E22; font-weight: 600; } .pd3-table dd { margin: 0; font: 800 16px/22px var(--fh); color: #2D5A40; white-space: nowrap; }
.pd3-side { position: sticky; top: 96px; display: grid; gap: 16px; }
.pd3-card { padding: 26px; border-radius: 22px; border: 1px solid #E2EADC; background: #fff; }
.pd3-card.is-soft { background: #F7FAF5; }
.pd3-card h3 { margin: 0 0 12px; font: 700 13px/18px var(--fb); letter-spacing: .1em; text-transform: uppercase; color: #2D5A40; }
.pd3-code { margin: 0 0 16px; font: 800 22px/28px var(--fh); color: #0F2E22; }
.pd3-block-btn { width: 100%; justify-content: center; }
.pd3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd3-chips span { padding: 7px 14px; border-radius: 999px; background: #EFF5EA; color: #2D5A40; font: 600 14px/18px var(--fb); }
.pd3-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pd3-trust li { display: flex; align-items: center; gap: 10px; color: #0F2E22; font-weight: 600; }
.pd3-trust .v2-ic { color: #6AAE35; }
.pd3-verify h2 { margin: 0; font: 800 clamp(26px, 2.6vw, 36px)/1.15 var(--fh); color: #fff; }
.pd3-verify .h3-pro__row { margin-top: 0; padding-top: 0; border-top: 0; }
.pd3-verify .h3-pro__row p { margin: 10px 0 0; color: rgba(239,245,234,.78); }
.pd3-verify__form { flex: none; display: flex; width: min(100%, 480px); padding: 6px; border-radius: 999px; background: #fff; }
.pd3-verify__form input { flex: 1; min-width: 0; padding: 12px 18px; border: 0; outline: 0; background: none; font: 500 16px/22px var(--fb); color: #111114; }
.pd3-verify__form button { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 13px 22px; border: 0; border-radius: 999px; background: #6AAE35; color: #0B241A; font: 700 15px/20px var(--fb); cursor: pointer; transition: background .2s; }
.pd3-verify__form button:hover { background: #8BC756; }
.pd3-res .ab3-why__grid { margin-top: 20px; }
.pd3-res__card { text-decoration: none; color: inherit; }
.pd3-res__card u { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; color: #2D5A40; font-weight: 700; text-decoration: none; }
.pd3-res__card:hover u .v2-ic { translate: 4px 0; } .pd3-res__card u .v2-ic { transition: translate .25s; }
@media (max-width: 1000px) {
  .pd3-hero__in { grid-template-columns: 1fr; padding-top: 140px; } .pd3-hero__media { max-height: 380px; aspect-ratio: 4 / 3; }
  .pd3-grid { grid-template-columns: 1fr; } .pd3-side { position: static; }
}
@media (max-width: 600px) {
  .pd3 .ab3-hero h1 { font-size: min(40px, 10vw); }
  .pd3-verify__form { width: 100%; } .pd3-verify__form button { padding: 12px 16px; }
  .pd3-table div { flex-direction: column; gap: 2px; } .pd3-table dd { white-space: normal; }
}

/* smooth scrolling (Lenis, assets/vendor/lenis-1.1.13.min.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* see-through header on the home page (user, 2026-10-18: the hero fills the screen and runs under the header). Fixed over the hero,
   white text and logo while at the top; back to the white bar once the page scrolls (.is-stuck), on hover or focus (so the menus read
   well) and while the phone menu is open. Hides on scroll down and returns on scroll up as on the other v2 pages (vet2-header.js). */
.sh-header--over { position: fixed; top: 0; left: 0; right: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background-color .3s; }
.sh-header--over.is-stuck { transform: translateY(-40px); }
.sh-header--over.is-hidden { transform: translateY(-100%); }
.sh-header--over .sh-top, .sh-header--over .sh-main { transition: background-color .3s, border-color .3s; }
.sh-header--over .sh-nav > ul > li > a, .sh-header--over .sh-burger span { transition: color .3s, background-color .3s; }
.sh-header--over .sh-main .sh-inner { padding-top: 14px; padding-bottom: 14px; }
.sh-header--over .sh-logo { position: relative; }
.sh-header--over .sh-logo__light { position: absolute; left: 0; top: 0; height: 38px; opacity: 0; transition: opacity .3s; }
.sh-header--over .sh-logo img:first-child { transition: opacity .3s; }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) { background: transparent; box-shadow: none; }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) .sh-top { background: transparent; border-bottom: 1px solid rgba(239,245,234,.12); }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) .sh-main { background: transparent; border-bottom-color: rgba(239,245,234,.12); }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) .sh-logo img:first-child { opacity: 0; }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) .sh-logo__light { opacity: 1; }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) .sh-nav > ul > li > a { color: #fff; }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) .sh-burger span { background: #fff; }
.sh-header--over:not(.is-stuck):not(:hover):not(:focus-within):not(:has(.sh-nav.is-open)) .sh-cta { background: #6AAE35; color: #0B241A; }
@media (min-width: 783px) { body.admin-bar .sh-header--over { top: 32px; } }
@media (max-width: 782px) { body.admin-bar .sh-header--over { top: 46px; } }