/* 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); will-change: transform; }
.mh-shape__shadow--far { translate: -.35% calc(1.4% + 34px); } /* blurs: inside the SVGs (drawn once, then only turned) */
.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 (user, 2026-10-20: the moving picture first, then the text): the picture as a band at the top, the text
   below it. The hero is exactly one screen below the header (--mh-top, set by the JS) and the text block keeps the height of its
   tallest scene (the panels share one grid cell), so the band never moves or resizes during the story ---- */
@media (max-width: 900px) {
  .mh-pinbox { height: calc(100svh - var(--mh-top, 114px)); min-height: 560px; max-height: 920px; padding: 0 20px; display: flex; flex-direction: column; }
  .mh-in { flex: 0 0 auto; height: auto; padding-bottom: 42px; } /* room for the scroll cue under the buttons */
  .mh-side { position: relative; left: auto; top: auto; width: auto; transform: none; padding-top: 16px; }
  .mh-h { max-width: none; font-size: clamp(24px, 6.6vw, 42px); line-height: 1.1; }
  .mh-lead { font-size: 14px; line-height: 1.45; margin-top: 6px !important; }
  /* the two buttons share one row, half each; a long label wraps inside its button instead of pushing the other off screen */
  .mh-ctas { margin-top: 12px; gap: 8px; flex-wrap: nowrap; }
  .mh-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: normal; padding: 10px 12px; font-size: 13.5px; line-height: 18px; }
  /* 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: 280px; margin: 0 -20px; }
  .mh-glow { right: -10%; top: 0; bottom: auto; width: 100%; height: 55%; filter: none; } /* behind the band; no blur on phones (the gradient is soft already) */
  /* the shape fitted to the phone layout the same way: 157.52u box, 59.63u past the right edge (2026-10-20: 7u further right than
     before, wheels too, so the products clear the left edge and sit more in the middle) */
  .mh-shape { right: calc(-59.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(37 * var(--u)); top: calc(44 * var(--u)); }
  .mh-logo { --x: -67; --y: -19; --w: 42; }
  .mh-bottle { --x: -54; --y: -17; --w: 16; }
  .mh-ps { --x: -70; --y: -13.5; --w: 48; }
  .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: 12px; 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%); }
}

/* REACH layout (user, 2026-10-20: "arrange text and gaps"): the text block sits centred beside the globe with the button straight under
   the paragraph (the empty middle row of the old grid left a big hole above the button); a wider text column so the headline takes
   three lines, not four. Phones: heading, button, then the globe, with tighter gaps. */
@media (min-width: 901px) {
  .v2-reach__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 56px; }
  .v2-reach__head { grid-row: 2; align-self: auto; margin: 0 0 32px; }
  .v2-reach__head h2 { max-width: 15ch; }
  .v2-reach__head .v2-lead { max-width: 34em; margin-top: 20px; }
  .v2-reach__more { grid-row: 3; }
  .v2-map { grid-row: 1 / 5; }
  .v2-stats { margin-top: 40px; }
}
@media (max-width: 900px) {
  .v2-reach__head { order: 0; margin-bottom: 24px; }
  .v2-reach__more { order: 0; margin: 0 0 4px; }
  .v2-map { order: 1; margin-bottom: 0; }
  .v2-reach .v2-globe__stage { margin: -4% auto -8%; }
  .v2-stats { margin-top: 24px; }
}