/*
Theme Name: Ozi Meat
Theme URI: https://ozimeat.uk
Author: setwp
Description: Block theme for ozimeat.uk, transformed from the sealed Claude Design export under Phase B. Structure is the export's; nothing from the export executes.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ozimeat
*/

/* ---- the export's own base, carried verbatim ---- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #E9EBEA; color: #141514;
       font-family: Archivo, system-ui, sans-serif;
       container-type: inline-size; }
* { box-sizing: border-box; }
a { color: #7E1416; text-decoration: none; }
a:hover { color: #A8332B; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #7E1416; outline-offset: 3px; }
::selection { background: #7E1416; color: #F6F4F0; }

/* ---- the export's scroll-driven motion, carried verbatim ---- */
@keyframes oziBandA { to { transform: translate3d(0, 63px, 0); } }
@keyframes oziBandB { to { transform: translate3d(0, 96px, 0); } }
@keyframes oziBandC { to { transform: translate3d(0, 180px, 0); } }
@keyframes oziHead  { to { transform: translate3d(0, -36px, 0); } }
@keyframes oziStamps{ to { transform: translate3d(0, -46px, 0); } }
/* MEASURED 2026-09-12: with view(block) the hero's first band was already
   translated 31.08px DOWN at scrollY 0, exposing a strip of section background
   between the header and the photograph — the "gap" the Operator saw. It was
   never a layout gap (header bottom, content top and section top all measured
   105px). All five data-layers live in the hero, at the top of the document,
   where a view() timeline is inherently part-way at rest; a scroll() timeline
   starts at zero there, which is what the design looks like at rest. */
[data-layer] { animation-timeline: scroll(root block); animation-range: 0 720px;
               animation-fill-mode: both; animation-timing-function: linear;
               animation-duration: auto; animation-iteration-count: 1; }
[data-layer="a"] { animation-name: oziBandA; }
[data-layer="b"] { animation-name: oziBandB; }
[data-layer="c"] { animation-name: oziBandC; }
[data-layer="head"] { animation-name: oziHead; }
[data-layer="stamps"] { animation-name: oziStamps; }

/* ---- the reveal-on-scroll the export marks but leaves to its runtime ---- */
@supports (animation-timeline: view()) {
  [data-reveal] { animation: oziReveal both linear;
                  animation-timeline: view(block);
                  animation-range: entry 0% entry 62%; }
  @keyframes oziReveal { from { opacity: 0; transform: translate3d(0, 22px, 0); }
                         to   { opacity: 1; transform: none; } }
}

/* ---- REDUCED MOTION: one guard over every moving part ---- */
@media (prefers-reduced-motion: reduce) {
  [data-layer], [data-reveal] { animation: none !important; transform: none !important;
                                opacity: 1 !important; }
}

/* ---- the real <form> must not disturb the design's own grid/flex ----
   It is wrapped AROUND an element the design may have positioned as a grid or
   flex item; a normal block box there would break that relationship, so the
   form participates in layout not at all. */
.ozi-form { display: contents; }

/* ---- submission confirmation, in the design's own voice ---- */
.ozi-sent { max-width: 1240px; margin: 0 auto;
            padding: 16px clamp(16px,4cqw,48px);
            background: #7E1416; color: #F6F4F0;
            font-size: 15px; line-height: 1.5; }

/* ---- mobile navigation: the export's sheet, without its runtime ---- */
.ozi-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.ozi-menu-btn { display: none; }

@media (max-width: 860px) {
  .ozi-menu-btn { display: inline-flex; flex-direction: column; justify-content: center;
                  gap: 5px; width: 44px; height: 44px; padding: 10px;
                  margin-inline-start: auto; cursor: pointer; }
  .ozi-menu-btn span { display: block; height: 2px; background: #141514; border-radius: 2px; }
  header nav { display: none !important; }
  .ozi-menu-toggle:checked ~ nav { display: flex !important; flex-direction: column;
                                   align-items: flex-start; gap: 4px;
                                   position: absolute; inset-inline: 0; top: 100%;
                                   background: #EFF0F1; z-index: 30;
                                   border-top: 1px solid #B4B9B8;
                                   padding: 12px clamp(16px,4cqw,48px) 20px; }
  .ozi-menu-toggle:checked ~ nav > a { width: 100%; padding-block: 12px;
                                       border-bottom: 1px solid rgba(180,185,184,0.45); }
  header > div { position: relative; flex-wrap: wrap; }
  .ozi-menu-toggle:focus-visible + .ozi-menu-btn { outline: 3px solid #7E1416;
                                                   outline-offset: 3px; }
}

/* ---- WordPress chrome the design does not use ---- */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-block-post-content > * { margin-block: 0; }

/* ---- the export's own section rules, lifted from its inline styles ---- */
.ozi-00c460c0{display: flex; align-items: center; justify-content: center; padding: clamp(16px,3cqw,44px);}
.ozi-01702319{display: grid; gap: 14px;}
.ozi-0194ab81{font-family: Archivo; font-stretch: 68%; font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;}
.ozi-01f85cac{width: 100%; background: rgba(233,235,234,0.06); border: 1px solid rgba(180,185,184,0.42); color: #E9EBEA; font-family: Archivo; font-size: 16px; padding: 14px; border-radius: 2px; resize: vertical;}
.ozi-02419cff{margin: 0;}
.ozi-024aa529{margin: 0; padding-inline-start: 18px; font-size: 15.5px; line-height: 1.7; color: rgba(233,235,234,0.82);}
.ozi-0411713e{border-top: 1px solid #B4B9B8;}
.ozi-04eac057{background: #F6F4F0; padding: clamp(22px,3cqw,44px);}
.ozi-051af70b{height: 58px; width: auto;}
.ozi-059ba7fa{width: 100%; height: 100%; object-fit: cover;}
.ozi-06e35361{max-width: 1240px; margin: 0 auto; padding: clamp(24px,4cqw,56px) clamp(16px,4cqw,48px) clamp(48px,7cqw,104px);}
.ozi-072e364c{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 72, 'wght' 620, 'WONK' 1; font-size: clamp(24px,2.8cqw,34px); margin: 0 0 6px;}
.ozi-0768ec88{width: 100%; background: #E9EBEA; border: 1px solid #B4B9B8; color: #141514; font-family: Archivo; font-size: 16px; padding: 14px; border-radius: 2px; resize: vertical;}
.ozi-0863c015{display: inline-flex; align-items: center; background: #7E1416; color: #F6F4F0; border-radius: 2px; font-size: 15px; font-weight: 600; padding-inline: 26px; height: 54px;}
.ozi-09ba2dac{aspect-ratio: 4/5; overflow: hidden; background: #E4E6E5;}
.ozi-0a6f59b9{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: clamp(20px,3cqw,36px);}
.ozi-0a9ff070{color: #52564F;}
.ozi-0cf8c6e5{max-width: 1240px; margin: 0 auto; padding: clamp(48px,7cqw,104px) clamp(16px,4cqw,48px);}
.ozi-13267f8a{margin: 0; font-size: 17px; line-height: 1.55;}
.ozi-14df728c{display: block; margin-top: 14px;}
.ozi-16317a81{position: absolute; inset: 0; will-change: transform; -webkit-mask-image: linear-gradient(to bottom, transparent 66%, #000 78% 100%); mask-image: linear-gradient(to bottom, transparent 66%, #000 78% 100%);}
.ozi-175c36ab{background-image: linear-gradient(rgba(246,244,240,0.93), rgba(246,244,240,0.93)), url('https://cloudmigration.dev/wp-content/uploads/2026/09/00000560-PHOTO-2026-08-05-22-24-26.jpg'); background-size: cover; background-position: center;}
.ozi-192f32d3{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 120, 'wght' 640, 'WONK' 1; font-size: clamp(28px,4.4cqw,58px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; max-width: 17ch;}
.ozi-1bcc7665{font-size:15px; line-height:1.55; color:#6B6B6B; margin:10px 0 0; max-width:42ch;}
.ozi-1e98e48a{max-width: 1240px; margin: 0 auto; padding: clamp(48px,7cqw,110px) clamp(16px,4cqw,48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(26px,4cqw,72px); align-items: center;}
.ozi-1f0ca21d{display: flex; align-items: flex-start; justify-content: center; will-change: transform;}
.ozi-22347a32{margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: rgba(246,244,240,0.86);}
.ozi-247e95c7{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px,3cqw,44px); margin-top: clamp(44px,6cqw,88px);}
.ozi-24df2a6b{padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1;}
.ozi-2587a06f{border-top: 1px solid rgba(180,185,184,0.45); padding-top: 18px;}
.ozi-28a26a10{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 96, 'wght' 660, 'WONK' 1; font-size: clamp(32px,4.6cqw,58px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 26px;}
.ozi-2c916a43{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(22px,3cqw,38px);}
.ozi-2cebe09e{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 120, 'wght' 660, 'WONK' 1; font-size: clamp(34px,5.4cqw,72px); line-height: 0.98; letter-spacing: -0.022em; margin: 0; max-width: 16ch;}
.ozi-2d074cdd{font-size: 16.5px; line-height: 1.65; margin: 0 0 16px; max-width: 58ch; color: #3A3D39; text-wrap: pretty;}
.ozi-2d7249de{display: inline-flex; align-items: center; color: #141514; font-size: 15px; font-weight: 500; height: 54px; border-bottom: 1px solid #141514;}
.ozi-34817845{background: #7E1416; color: #F6F4F0; padding: clamp(24px,3cqw,38px);}
.ozi-3b226355{max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px,4cqw,48px) clamp(50px,8cqw,120px);}
.ozi-3eb7ca3b{display: inline-flex; align-items: center; background: #7E1416; color: #F6F4F0; border: none; border-radius: 2px; font-family: Archivo; font-size: 15px; font-weight: 600; padding-inline: 22px; height: 52px; cursor: pointer;}
.ozi-414eaf3c{border-top: 1px solid rgba(180,185,184,0.45); padding-top: 20px;}
.ozi-42bd83ad{margin: 0 0 26px; font-size: 14.5px; color: rgba(233,235,234,0.62);}
.ozi-4590b772{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 40, 'wght' 460; font-size: clamp(18px,1.8cqw,24px); line-height: 1.5; margin: 0 0 20px; max-width: 46ch; text-wrap: pretty;}
.ozi-4729f7a1{aspect-ratio: 1; overflow: hidden; background: #141514;}
.ozi-4a5f0e81{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(45%, 150px), 1fr)); gap: clamp(8px,1.4cqw,18px);}
.ozi-4a6bb01d{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 700px), 1fr)); gap: 28px;}
.ozi-4add043d{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 60, 'wght' 620; font-size: clamp(22px,2.4cqw,30px); margin: 0 0 22px;}
.ozi-4e747b86{display: block; width: 100%; height: auto; margin-top: -22%; filter: brightness(0.99) contrast(0.97);}
.ozi-4ed335e7{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 40, 'wght' 600; font-size: 22px; margin: 0 0 12px;}
.ozi-4fc4bf3d{margin: 0; font-variant-numeric: tabular-nums;}
.ozi-516922aa{font-family: Archivo; font-stretch: 76%; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #52564F;}
.ozi-52a7e6bd{max-width: 820px; margin: 0 auto; padding: clamp(26px,4cqw,52px) clamp(16px,4cqw,48px) clamp(70px,9cqw,120px);}
.ozi-5613ae12{display: flex; align-items: center; gap: clamp(12px,2cqw,30px);}
.ozi-562be095{margin: 0 0 22px; font-size: 13px; font-stretch: 82%; letter-spacing: 0.12em; text-transform: uppercase; color: #52564F;}
.ozi-56dcdaa8{position: absolute; inset: 0; background-image: linear-gradient(rgba(180,185,184,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(180,185,184,0.4) 1px, transparent 1px); background-size: 46px 46px;}
.ozi-57cf2920{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px;}
.ozi-597ef526{max-width: 1240px; margin: 0 auto; padding: clamp(26px,4cqw,52px) clamp(16px,4cqw,48px) clamp(50px,8cqw,110px);}
.ozi-59bc6f22{position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0 40%, transparent 50%); mask-image: linear-gradient(to bottom, #000 0 40%, transparent 50%);}
.ozi-5a68fba0{display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px,3.4cqw,44px); will-change: transform;}
.ozi-63f24f6f{width: 100%; height: 52px; background: #E9EBEA; border: 1px solid #B4B9B8; color: #141514; font-family: Archivo; font-size: 16px; padding-inline: 14px; border-radius: 2px;}
.ozi-655fc761{max-width: 1240px; margin: 0 auto; padding: clamp(30px,5cqw,72px) clamp(16px,4cqw,48px) clamp(56px,8cqw,120px);}
.ozi-697ec379{margin: 0 0 4px; font-size: 11.5px; font-stretch: 76%; letter-spacing: 0.15em; text-transform: uppercase; color: #52564F;}
.ozi-6b3a7d20{max-width: 1240px; margin: 0 auto; padding: clamp(26px,4cqw,52px) clamp(16px,4cqw,48px); display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between;}
.ozi-6b9c90b9{height: 1px; background: rgba(246,244,240,0.28); margin: 28px 0 20px;}
.ozi-6bb731c2{background: #F6F4F0; padding: clamp(24px,3cqw,38px);}
.ozi-6ce03186{position: absolute; left: 34%; top: 0; bottom: 0; width: 10px; background: #F6F4F0; border-left: 1px solid #B4B9B8; border-right: 1px solid #B4B9B8;}
.ozi-6d468ebd{margin: 0 0 4px; font-size: 15.5px; line-height: 1.6;}
.ozi-6eeb7446{position: relative; min-height: 300px; background: #E4E6E5; border: 1px solid #B4B9B8; display: block; overflow: hidden;}
.ozi-6f9a4c2e{margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: #52564F; flex: 1;}
.ozi-708c58c1{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 60, 'wght' 620; font-size: clamp(22px,2.4cqw,30px); margin: 0 0 10px;}
.ozi-70be7658{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;}
.ozi-727c6ee7{justify-self: start; background: #7E1416; color: #F6F4F0; border: none; border-radius: 2px; font-family: Archivo; font-size: 15px; font-weight: 600; padding-inline: 28px; height: 54px; cursor: pointer;}
.ozi-72ac2ea1{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(14px,2cqw,28px);}
.ozi-75935b22{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(20px,3cqw,48px); margin-top: clamp(32px,4.6cqw,68px);}
.ozi-76148ee3{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(20px,3cqw,44px);}
.ozi-7b5192cd{margin: 0 0 10px; font-size: 15.5px; line-height: 1.7; color: rgba(233,235,234,0.82);}
.ozi-7ea349f0{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: clamp(24px,3.4cqw,44px);}
.ozi-800e01c9{background: #F6F4F0; display: flex; flex-direction: column;}
.ozi-827b51f1{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 96, 'wght' 620, 'WONK' 1; font-size: clamp(28px,3.8cqw,48px); line-height: 1; letter-spacing: -0.018em; margin: 0;}
.ozi-835f4e06{margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; font-size: 15px;}
.ozi-84aa7266{display: block; font-size: 11.5px; font-stretch: 76%; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: #7E1416; margin-bottom: 18px;}
.ozi-8579db34{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; margin-top: clamp(28px,3cqw,44px);}
.ozi-8778c167{background: none; border: 1px solid rgba(233,235,234,0.5); color: #E9EBEA; border-radius: 2px; font-family: Archivo; font-size: 15px; padding-inline: 24px; height: 54px; cursor: pointer;}
.ozi-8a2216ba{font-size: 16.5px; line-height: 1.65; margin: 0; max-width: 58ch; color: #3A3D39; text-wrap: pretty;}
.ozi-8ce8c6f5{color: #141514; font-size: 14.5px; padding-block: 12px;}
.ozi-91268ec9{width: 100%; height: 52px; background: rgba(233,235,234,0.06); border: 1px solid rgba(180,185,184,0.42); color: #E9EBEA; font-family: Archivo; font-size: 16px; padding-inline: 14px; border-radius: 2px;}
.ozi-91871389{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 40, 'wght' 600; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 8px; color: #141514;}
.ozi-91ce69ad{display: inline-flex; align-items: center; gap: 10px; background: #7E1416; color: #F6F4F0; border: none; border-radius: 2px; font-family: Archivo; font-size: 15px; font-weight: 600; padding-inline: 24px; height: 54px; cursor: pointer;}
.ozi-920fbf8a{display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #7E1416; color: #7E1416; border-radius: 2px; font-size: 14px; font-weight: 600; height: 46px;}
.ozi-96302af7{margin: 0; font-size: 13px; color: #52564F;}
.ozi-9745d799{max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px,4cqw,48px) clamp(48px,7cqw,104px);}
.ozi-9812d2ae{margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(233,235,234,0.82);}
.ozi-9b9bfd70{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 120, 'wght' 680, 'WONK' 1; font-size: clamp(36px,6.6cqw,86px); line-height: 0.94; letter-spacing: -0.022em; margin: 0; max-width: 15ch; text-wrap: balance;}
.ozi-9d697a0e{background: #7E1416; color: #F6F4F0; border: none; border-radius: 2px; font-family: Archivo; font-size: 15px; font-weight: 600; padding-inline: 28px; height: 54px; cursor: pointer;}
.ozi-9e159796{color: #F6F4F0; border-bottom: 1px solid rgba(246,244,240,0.5);}
.ozi-9f3dd31c{border-top: 1px solid #B4B9B8; padding-top: 16px;}
.ozi-a18a1387{margin: 0; font-size: clamp(16px,1.5cqw,19px); line-height: 1.45;}
.ozi-a22c26fe{display: inline-flex; align-items: center; border: 1px solid rgba(233,235,234,0.55); border-radius: 999px; color: #E9EBEA; font-size: 11.5px; font-stretch: 76%; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; padding: 9px 18px;}
.ozi-a273930f{position: sticky; top: 0; z-index: 60; background: rgba(239,240,241,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(180,185,184,0.55);}
.ozi-a51d7803{font-size: 14.5px; border-bottom: 1px solid currentColor; padding-bottom: 2px;}
.ozi-a6a3caa6{display: flex; flex-wrap: wrap; gap: 22px; font-size: 13px;}
.ozi-a78a3a85{display: inline-flex; align-items: center; background: #F6F4F0; color: #7E1416; border: none; border-radius: 2px; font-family: Archivo; font-size: 15px; font-weight: 600; padding-inline: 24px; height: 52px; cursor: pointer;}
.ozi-a9e5af3d{flex: 0 0 auto; border-radius: 999px; font-size: 13px; font-stretch: 82%; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding-inline: 18px; height: 44px; cursor: pointer; border: 1px solid ; background: ; color: ; font-family: Archivo;}
.ozi-aa756441{display: block;}
.ozi-ad4d7705{position: absolute; left: 0; right: 0; top: 46%; height: 16px; background: #F6F4F0; border-top: 1px solid #B4B9B8; border-bottom: 1px solid #B4B9B8; transform: rotate(-4deg);}
.ozi-afc308d6{display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px;}
.ozi-b135c59d{background: #141514; color: #E9EBEA;}
.ozi-b493affe{padding-block: 0 clamp(36px,6cqw,76px); background: #EFF0F1;}
.ozi-ba822515{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 48, 'wght' 600; font-size: clamp(19px,1.8cqw,25px); margin: 15px 0 5px; letter-spacing: -0.01em; color: #141514;}
.ozi-c1447dab{display: block; aspect-ratio: 4/5; overflow: hidden; background: #E4E6E5; position: relative;}
.ozi-c36452cd{font-size: clamp(17px,1.7cqw,21px); line-height: 1.55; margin: 24px 0 0; max-width: 52ch; color: rgba(233,235,234,0.78);}
.ozi-c4c12149{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr)); gap: clamp(14px,2cqw,26px);}
.ozi-c548e179{width: 100%; height: auto;}
.ozi-c5547f73{margin: 0 0 30px; font-size: 15.5px; color: #52564F;}
.ozi-c58dd349{display: inline-flex; align-items: center; color: #141514; border: 1px solid #B4B9B8; border-radius: 2px; font-size: 15px; padding-inline: 22px; height: 52px;}
.ozi-c75d7655{margin: 0; font-size: 17px; font-variant-numeric: tabular-nums;}
.ozi-c8752680{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 96, 'wght' 660, 'WONK' 1; font-size: clamp(32px,4.6cqw,54px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 8px;}
.ozi-c9088948{margin: 0; font-size: 13.5px; line-height: 1.5; color: #52564F;}
.ozi-caa0ca41{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 96, 'wght' 620, 'WONK' 1; font-size: clamp(26px,3.4cqw,44px); line-height: 1; letter-spacing: -0.018em; margin: 0;}
.ozi-cbe14cfc{flex: 1 1 auto; width: 100%; height: clamp(300px, 46cqw, 700px); overflow: hidden; position: relative; background: #EFF0F1;}
.ozi-ce4a9146{position: absolute; left: 50%; top: 46%; transform: translate(-50%,-100%); width: 14px; height: 14px; border-radius: 999px; background: #7E1416; box-shadow: 0 0 0 6px rgba(126,20,22,0.16);}
.ozi-d089b782{transform: translateY(-56px); width: 56px; height: 56px; border-radius: 999px; background: #25D366; color: #FFFFFF; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 22px rgba(20,21,20,0.22);}
.ozi-d42ef587{display: block; font-size: 11.5px; font-stretch: 76%; letter-spacing: 0.15em; text-transform: uppercase; color: #52564F; margin-bottom: 7px;}
.ozi-d494af89{display: flex; align-items: center; min-height: 44px;}
.ozi-d6cde674{background: rgba(233,235,234,0.05); border: 1px solid rgba(180,185,184,0.3); padding: clamp(24px,3cqw,44px); margin-top: clamp(44px,6cqw,80px); max-width: 720px;}
.ozi-d76d527d{display: flex; align-items: center; gap: 10px; border: 1px solid #B4B9B8; background: #F6F4F0; height: 54px; padding-inline: 16px; max-width: 460px;}
.ozi-dba7cc0c{position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(239,240,241,0) 34%, rgba(239,240,241,0.86) 58%, #EFF0F1 72%);}
.ozi-df375b75{display: block; font-size: 11.5px; font-stretch: 76%; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(233,235,234,0.6); margin-bottom: 7px;}
.ozi-e0035932{display: flex; gap: 10px; overflow-x: auto; padding-block: 22px 6px; margin-bottom: 12px; scrollbar-width: thin;}
.ozi-e0a2696f{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px,3cqw,40px); align-items: start;}
.ozi-e6e05f8e{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 72, 'wght' 620, 'WONK' 1; font-size: clamp(24px,3cqw,38px); line-height: 1; letter-spacing: -0.018em; margin: 0 0 24px;}
.ozi-e8418291{max-width: 1240px; margin: clamp(-118px,-9cqw,-52px) auto 0; padding-inline: clamp(16px,4cqw,48px); position: relative; z-index: 2; will-change: transform;}
.ozi-ea39d2f7{display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 22px;}
.ozi-eb2c519d{display: inline-flex; align-items: center; border: 1px solid #7E1416; background: rgba(126,20,22,0.12); border-radius: 999px; color: #7E1416; font-size: 11.5px; font-stretch: 76%; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; padding: 9px 18px;}
.ozi-ebdd3306{font-stretch: 76%; letter-spacing: 0.13em; text-transform: uppercase; font-size: 11.5px; color: #52564F; align-self: center;}
.ozi-ec19b491{margin: 0; font-size: 17px;}
.ozi-ed6ddb69{flex: 1; border: none; background: none; font-family: Archivo; font-size: 16px; color: #141514; outline: none; min-width: 0;}
.ozi-eff87844{position: absolute; inset: 0; will-change: transform; -webkit-mask-image: linear-gradient(to bottom, transparent 36%, #000 48% 70%, transparent 80%); mask-image: linear-gradient(to bottom, transparent 36%, #000 48% 70%, transparent 80%);}
.ozi-f896b42d{margin: 12px 0 0; font-size: 15.5px;}
.ozi-fa1f5bc2{max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px,4cqw,48px); height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 14px;}
.ozi-fa724e1d{position: absolute; left: 50%; top: calc(46% + 18px); transform: translateX(-50%); background: #141514; color: #E9EBEA; font-size: 11.5px; font-stretch: 76%; letter-spacing: 0.15em; text-transform: uppercase; padding: 7px 12px; white-space: nowrap;}
.ozi-fbc08a2b{display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(30px,4cqw,58px);}
.ozi-fc264785{font-family: Fraunces, Georgia, serif; font-variation-settings: 'opsz' 96, 'wght' 660, 'WONK' 1; font-size: clamp(32px,4.6cqw,58px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 34px;}
.ozi-01f85cac:hover{color: #E9EBEA}
.ozi-024aa529:hover{color: rgba(233,235,234,0.82)}
.ozi-0768ec88:hover{color: #141514}
.ozi-0863c015:hover{background: #A8332B; color: #F6F4F0;}
.ozi-0a9ff070:hover{color: #52564F}
.ozi-1bcc7665:hover{color: #6B6B6B}
.ozi-22347a32:hover{color: rgba(246,244,240,0.86)}
.ozi-2d074cdd:hover{color: #3A3D39}
.ozi-2d7249de:hover{color: #141514}
.ozi-34817845:hover{color: #F6F4F0}
.ozi-3eb7ca3b:hover{background: #A8332B; color: #F6F4F0}
.ozi-42bd83ad:hover{color: rgba(233,235,234,0.62)}
.ozi-516922aa:hover{color: #52564F}
.ozi-562be095:hover{color: #52564F}
.ozi-63f24f6f:hover{color: #141514}
.ozi-697ec379:hover{color: #52564F}
.ozi-6f9a4c2e:hover{color: #52564F}
.ozi-727c6ee7:hover{background: #A8332B; color: #F6F4F0}
.ozi-7b5192cd:hover{color: rgba(233,235,234,0.82)}
.ozi-84aa7266:hover{color: #7E1416}
.ozi-8778c167:hover{color: #E9EBEA}
.ozi-8a2216ba:hover{color: #3A3D39}
.ozi-8ce8c6f5:hover{color: #141514}
.ozi-91268ec9:hover{color: #E9EBEA}
.ozi-91871389:hover{color: #141514}
.ozi-91ce69ad:hover{background: #A8332B; color: #F6F4F0}
.ozi-920fbf8a:hover{background: #7E1416; color: #F6F4F0;}
.ozi-96302af7:hover{color: #52564F}
.ozi-9812d2ae:hover{color: rgba(233,235,234,0.82)}
.ozi-9d697a0e:hover{background: #A8332B; color: #F6F4F0}
.ozi-9e159796:hover{color: #F6F4F0}
.ozi-a22c26fe:hover{color: #E9EBEA}
.ozi-a78a3a85:hover{color: #7E1416}
.ozi-a9e5af3d:hover{color: }
.ozi-b135c59d:hover{color: #E9EBEA}
.ozi-ba822515:hover{color: #141514}
.ozi-c36452cd:hover{color: rgba(233,235,234,0.78)}
.ozi-c5547f73:hover{color: #52564F}
.ozi-c58dd349:hover{border-color: #141514; color: #141514;}
.ozi-c9088948:hover{color: #52564F}
.ozi-d089b782:hover{background: #1EBE5B; color: #FFFFFF}
.ozi-d42ef587:hover{color: #52564F}
.ozi-df375b75:hover{color: rgba(233,235,234,0.6)}
.ozi-eb2c519d:hover{color: #7E1416}
.ozi-ebdd3306:hover{color: #52564F}
.ozi-ed6ddb69:hover{color: #141514}
.ozi-fa724e1d:hover{color: #E9EBEA}

/* ---- counter filtering: CSS does it, the script only sharpens it ---- */
.ozi-cat-t { display: block; height: 0; overflow: hidden; }
a[data-on] { background: #7E1416 !important; color: #F6F4F0 !important; border-color: #7E1416 !important; }
html:not(.ozi-js) #all:target ~ div a[href$="#all"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #beef:target ~ div article[data-cat]:not([data-cat="beef"]) { display: none; }
html:not(.ozi-js) #beef:target ~ div a[href$="#beef"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #lamb:target ~ div article[data-cat]:not([data-cat="lamb"]) { display: none; }
html:not(.ozi-js) #lamb:target ~ div a[href$="#lamb"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #poultry:target ~ div article[data-cat]:not([data-cat="poultry"]) { display: none; }
html:not(.ozi-js) #poultry:target ~ div a[href$="#poultry"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #mince:target ~ div article[data-cat]:not([data-cat="mince"]) { display: none; }
html:not(.ozi-js) #mince:target ~ div a[href$="#mince"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #offal:target ~ div article[data-cat]:not([data-cat="offal"]) { display: none; }
html:not(.ozi-js) #offal:target ~ div a[href$="#offal"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #bbq:target ~ div article[data-cat]:not([data-cat="bbq"]) { display: none; }
html:not(.ozi-js) #bbq:target ~ div a[href$="#bbq"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #sausages:target ~ div article[data-cat]:not([data-cat="sausages"]) { display: none; }
html:not(.ozi-js) #sausages:target ~ div a[href$="#sausages"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }
html:not(.ozi-js) #marinated:target ~ div article[data-cat]:not([data-cat="marinated"]) { display: none; }
html:not(.ozi-js) #marinated:target ~ div a[href$="#marinated"] { background: #7E1416; color: #F6F4F0; border-color: #7E1416; }


/* ---- OVERRIDES: after the ported rules on purpose, so they win ---- */

/* THE SEAM BETWEEN SECTIONS WHILE SCROLLING (Operator, 2026-09-12).
   Measured: no hairline ELEMENT exists there. The hero's image container paints
   its own #EFF0F1 box INSIDE a transformed, composited layer, so at fractional
   scroll offsets its edge lands mid-pixel and the compositor blends it into a
   faint full-width line. The section behind already paints the same colour, so
   the container's background is redundant — removing the paint removes the
   boundary that can seam. */
[data-layer="a"] > div { background: transparent !important; }

/* THE PAGE BOTTOM ON SHORT PAGES (Operator: contact page colour "seems cut").
   Two causes, both fixed: <html> had no background and body's did not reach the
   canvas (body carries container-type, which contains it), and a short page left
   the footer floating 215px above the fold. */
html { background: #E9EBEA; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > .wp-block-post-content,
.wp-site-blocks > .entry-content { flex: 1 0 auto; }

/* STICKY HEADER (Operator: "the header could be sticky, when scrolling begins").
   Scroll-driven CSS, no JavaScript: the shadow arrives and the logo settles as
   the first 140px go by, and both sit at rest at the top of the page. */
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@supports (animation-timeline: scroll()) {
  header.wp-block-template-part {
    animation: oziHeaderLift both linear;
    animation-timeline: scroll(root block);
    animation-range: 0 140px;
  }
  @keyframes oziHeaderLift {
    from { box-shadow: 0 0 0 rgba(20, 21, 20, 0); }
    to   { box-shadow: 0 6px 24px rgba(20, 21, 20, 0.11); }
  }
  header header a img {
    animation: oziLogoSettle both linear;
    animation-timeline: scroll(root block);
    animation-range: 0 140px;
  }
  @keyframes oziLogoSettle { from { height: 96px; } to { height: 62px; } }
}

/* THE FLOATING WHATSAPP CONTROL — fixed on every page (Operator). The design
   makes it sticky inside the flow; fixed is what was asked for and it survives
   short pages, which sticky does not. */
.ozi-wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; }
.ozi-wa-fab > a, .ozi-wa-fab > button { transform: none !important; }
@media (max-width: 860px) { .ozi-wa-fab { right: 14px; bottom: 14px; } }

/* ---- the counter's category grid: room to read on a phone ----
   (Operator: "I can't distinguish which text belongs to which image") */
@media (max-width: 860px) {
  .ozi-cat-grid { row-gap: 44px !important; column-gap: 18px !important; }
  .ozi-cat-grid > a { padding-bottom: 6px; }
}

/* ---- the chip row sits off its own scrollbar ----
   (Operator: "the category selection slider is too close to the buttons") */
.ozi-chiprow { padding-bottom: 14px; margin-bottom: 10px; scrollbar-gutter: stable; }

/* ---- the counter's cut grid ----
   Client asked for photographed cuts laid out three (or six) to a row so the
   rows fill evenly; the photo counts per category land at 6 / 6 / 3 / 3, which
   is exactly what that asks for. */
.ozi-cutgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 860px) {
  .ozi-cutgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                 row-gap: 34px !important; }
}
@media (max-width: 520px) {
  .ozi-cutgrid { grid-template-columns: 1fr !important; }
}

/* A cut with no photograph is a card with NO image area — not a grey box
   (client: "No image placeholder"). It keeps every other card feature. */
.ozi-cutgrid article:not(:has(img)) { align-self: start; }

/* ---- consent notice: the design's own voice, not a stock banner ---- */
/* `display: flex` below beats the browser's own `[hidden] { display: none }`,
   because author styles outrank the user-agent stylesheet. Without this rule the
   banner stayed on screen after Allow or No thanks: the attribute was set, the
   choice was saved, and nothing moved. Any element this stylesheet gives a
   display to must restate hidden, or `hidden` is decoration. */
.ozi-consent[hidden] { display: none !important; }
.ozi-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
               background: #141514; color: #E9EBEA;
               padding: clamp(14px,2cqw,20px) clamp(16px,4cqw,48px);
               display: flex; flex-wrap: wrap; align-items: center;
               justify-content: space-between; gap: 12px 28px;
               box-shadow: 0 -6px 28px rgba(20,21,20,0.22); }
.ozi-consent-text { margin: 0; font-size: 14px; line-height: 1.5; max-width: 68ch; }
.ozi-consent-text a { color: #E9EBEA; border-bottom: 1px solid rgba(233,235,234,0.5); }
.ozi-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.ozi-consent button { font-family: Archivo, system-ui, sans-serif; font-size: 14px;
                      font-weight: 600; border-radius: 2px; cursor: pointer;
                      padding-inline: 20px; height: 44px;
                      background: none; color: #E9EBEA;
                      border: 1px solid rgba(233,235,234,0.5); }
.ozi-consent button:hover { border-color: #E9EBEA; }
.ozi-consent .ozi-consent-yes { background: #7E1416; border-color: #7E1416; color: #F6F4F0; }
.ozi-consent .ozi-consent-yes:hover { background: #A8332B; border-color: #A8332B; }
@media (max-width: 620px) {
  .ozi-consent { flex-direction: column; align-items: stretch; }
  .ozi-consent-actions { justify-content: stretch; }
  .ozi-consent-actions button { flex: 1; }
}

/* the floating WhatsApp control must not sit under the notice */
.ozi-consent:not([hidden]) ~ * .ozi-wa-fab { bottom: 96px; }

/* ---- spam protection widget ---- */
.ozi-turnstile[hidden] { display: none !important; }
.ozi-turnstile { margin: 18px 0 4px; min-height: 65px; }
.ozi-failed { background: #141514 !important; }

/* ---- legal pages: the site's own typography, no plugin markup ---- */
.ozi-legal { background: #E9EBEA; }
.ozi-legal-inner { max-width: 760px; margin: 0 auto;
                   padding: clamp(40px,6cqw,88px) clamp(16px,4cqw,48px) clamp(56px,8cqw,120px); }
.ozi-legal h1 { font-family: Fraunces, Georgia, serif;
                font-variation-settings: 'opsz' 120, 'wght' 660, 'WONK' 1;
                font-size: clamp(34px,5cqw,62px); line-height: 1.02;
                letter-spacing: -0.02em; margin: 0 0 18px; }
.ozi-legal-lede { font-size: clamp(17px,1.7cqw,20px); line-height: 1.5;
                  color: #52564F; margin: 0 0 40px; max-width: 60ch; }
.ozi-legal h2 { font-family: Fraunces, Georgia, serif;
                font-variation-settings: 'opsz' 48, 'wght' 600;
                font-size: clamp(21px,2cqw,27px); line-height: 1.15;
                margin: 42px 0 12px; padding-top: 22px;
                border-top: 1px solid rgba(180,185,184,0.55); }
.ozi-legal p { font-size: 16px; line-height: 1.62; color: #2C2F2B;
               margin: 0 0 20px; max-width: 68ch; }
.ozi-legal p + p { margin-top: -2px; }
.ozi-legal p strong { display: inline-block; margin-top: 4px; }
.ozi-legal a { color: #7E1416; border-bottom: 1px solid rgba(126,20,22,0.35); }
.ozi-legal a:hover { color: #A8332B; }
.ozi-legal-updated { margin-top: 46px; font-size: 13.5px; color: #52564F; }

/* ---- THE HERO ACTUALLY SHOWS ITS PHOTOGRAPH ----
   MEASURED: the band is 570px tall over a 1552px image, so only 37% of the photo
   was ever on screen — and the design's fade began washing that at 34% of the
   band. For the hanging-carcass shot that works, because the subject repeats
   across the frame. For a photograph with ONE subject (hands at a block, a bird
   on a spit) it left a sliver. Two changes: a taller band, and a fade that
   starts far later so the visible part is genuinely visible. */
[data-layer="a"] > div { height: clamp(340px, 54cqw, 760px) !important; }
[data-layer="a"] > div > div:last-child {
  background: linear-gradient(to bottom,
              rgba(239,240,241,0) 0%,
              rgba(239,240,241,0) 56%,
              rgba(239,240,241,0.82) 78%,
              #EFF0F1 93%) !important;
}

/* The headline must sit on FLAT colour, never on the fading photograph. With the
   later fade the design's own negative margin pulled it up into the wash, so it
   is reduced to keep the text clear of the image. */
[data-layer="head"] { margin-top: clamp(-54px, -3.2cqw, -18px) !important; }

/* ---- hero slide indicators ----
   MEASURED: in flow they landed at y=675 while the h1 spans 581-735, so they
   rendered BEHIND the headline — the "line on the text" the Operator saw. The
   hero's headline block carries a large negative top margin, so anything placed
   after the image band is pulled under it. Pinned to the section's own bottom
   instead, centred, where nothing overlaps them. */
.ozi-hero-sec { position: relative; }
.ozi-hero-dots[hidden] { display: none !important; }
.ozi-hero-dots { position: absolute; z-index: 4;
                 left: 0; right: 0; bottom: clamp(14px,2cqw,26px);
                 display: flex; gap: 9px; justify-content: center; }
.ozi-hero-dots button {
  width: 28px; height: 3px; padding: 0; border: none; border-radius: 2px;
  background: rgba(20,21,20,0.22); cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.ozi-hero-dots button:hover { background: rgba(20,21,20,0.42); }
.ozi-hero-dots button[data-on] { background: #7E1416; width: 44px; }
.ozi-hero-dots button:focus-visible { outline: 3px solid #7E1416; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ozi-hero-dots button { transition: none; }
}

/* Reduced motion covers the header too. */
@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part, header header a img { animation: none !important; }
}

/* Header menu typography (Operator, 2026-09-12: "Better font selection for
   header menu"). The export gave the nav only colour, size and padding, so it
   inherited the body face at its default weight and read as flat browser text.
   Archivo is variable on wdth and wght and the theme already self-hosts it, so
   this asks the face for what it can actually do rather than adding a font. */
header nav a[data-t] {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
/* Menu hover (Operator, 2026-09-12: "beautiful and lean ... dark red").
   The colour moves to the brand red and a rule grows out from the left under the
   word — lean, and it uses space the nav already reserves, so nothing shifts. */
header nav a[data-t] { position: relative; transition: color .18s ease; }
header nav a[data-t]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
  background: #7E1416; transform: scaleX(0); transform-origin: left center;
  transition: transform .24s cubic-bezier(.22,.61,.36,1);
}
header nav a[data-t]:hover { color: #7E1416; }
header nav a[data-t]:hover::after { transform: scaleX(1); }
header nav a[data-t]:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  header nav a[data-t], header nav a[data-t]::after { transition: none; }
}

/* A <button> the port turned into an <a> keeps a button's vertical centring.
   Without this a converted control with a fixed height hangs its label at the
   top — measured on the wholesale form's WhatsApp link. */
a.ozi-btn { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 860px) {
  header nav a[data-t] { font-size: 15px; letter-spacing: 0.04em; }
}