/* 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: #BD3432; --red-hover: #A12A28; --wine: #6E1023; --blush: #FCECEA; --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(255,107,87,.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(255,107,87,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(60,16,40,.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(60,8,20,.3), rgba(60,8,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(110,16,35,.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(40,10,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(189,52,50,.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: #BD3432; --red-hover: #A12A28; --wine: #6E1023; --coral: #FF6B57; --blush: #FCECEA; --navy: #1C2A50; --ink: #111114; --grey: #5B606B; --off: #FAF8F7;
  --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(189,52,50,.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(110,16,35,.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(110,16,35,.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: #FCECEA; 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(110,16,35,.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(40,20,30,.22), rgba(40,20,30,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(40,20,30,.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(189,52,50,.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(110,16,35,.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(252,236,234,.9) 55%, rgba(252,236,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: #D9706C; }
.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 #EFE3E1; }
.v2-stat { padding: 32px 32px 8px; display: flex; flex-direction: column; border-left: 1px solid #EFE3E1; }
.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(255,107,87,.45), rgba(189,52,50,.24) 55%, rgba(189,52,50,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(189,52,50,.4), rgba(189,52,50,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(252,236,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(110,16,35,.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 #EFE3E1; }
	.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. ---------- */
.page-template-template-vet-v2 { --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 #F1E9E8, 0 10px 30px rgba(17,17,20,.07); }
.sh-header--v2.is-hidden { transform: translateY(-100%); }
.sh-header--v2 .sh-top { background: #6E1023; } /* 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(252,236,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(252,236,234,.6); }
.sh-header--v2 .sh-lang .sep { color: rgba(252,236,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(252,236,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 #F1E9E8; }
.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: #BD3432; 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: #6E1023; }
.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; }
.page-template-template-vet-v2 .sh-cta { height: auto; padding: 11px 24px; border: 0; border-radius: 999px; background: #BD3432; color: #fff; text-transform: none; letter-spacing: 0; font: 600 15px/20px Inter, sans-serif; transition: background .2s, box-shadow .2s; }
.page-template-template-vet-v2 .sh-cta:hover { background: #A12A28; box-shadow: 0 8px 20px rgba(189,52,50,.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 #F1E9E8; 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: #FCECEA; }
.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: #6E1023; }
.sh-header--v2 .sh-mega .sh-mega__name:hover { color: #BD3432; }
.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 #F1E9E8; 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: #BD3432; }
.sh-header--v2 .sh-mega__types a:hover { color: #BD3432; 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(255,107,87,.35), rgba(255,107,87,0) 60%), #6E1023; }
.sh-mega__kicker { font: 600 12px/16px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #FCECEA; }
.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: #BD3432; font: 600 14px/18px Inter, sans-serif; transition: background .2s; }
.sh-header--v2 .sh-mega .sh-mega__all:hover { background: #FCECEA; }
.sh-header--v2 .sh-mega .sh-mega__link { padding-top: 10px; border-top: 1px solid rgba(252,236,234,.2); color: #fff; font: 500 14px/18px Inter, sans-serif; }
.sh-header--v2 .sh-mega .sh-mega__link:hover { color: #FCECEA; 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 #F1E9E8; }
  .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: #6E1023; color: #FCECEA; 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(252,236,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(252,236,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(252,236,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(252,236,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: #FCECEA; 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(252,236,234,.82); }
.v2f__row .v2-ic { flex: none; margin-top: 2px; color: #FCECEA; } /* 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(252,236,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(252,236,234,.3); color: #FCECEA; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.v2f__social a:hover { background: #BD3432; border-color: #BD3432; 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(252,236,234,.18); font: 400 13px/18px Inter, sans-serif; color: rgba(252,236,234,.65); }
.v2f__lang { display: flex; align-items: center; gap: 8px; }
.v2f__lang .v2-ic { color: rgba(252,236,234,.65); }
.v2f__lang a { font-size: 13px; color: rgba(252,236,234,.55); }
.v2f__lang a.is-current { color: #fff; font-weight: 600; }
.v2f__lang .sep { color: rgba(252,236,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%); }
}