@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-italic-400.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Condensed display face, per brief section 5 which permits a complementary
   typeface alongside Montserrat. The primary reference sets 120px headings in a
   condensed face; at that scale Montserrat's width is what fractured headings
   into ragged multi-line blocks. Montserrat still owns body copy, labels,
   navigation and the wordmark, so the brand voice is unchanged. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --wines-navy: #0c2942;
  --wines-navy-deep: #071c2d;
  --wines-gold: #c4933f;
  --wines-gold-bright: #d5a651;
  --wines-white: #fff;
  --wines-grey: #f2f2f2;
  --wines-mid-grey: #d9dde0;
  --wines-text: #172630;
  --wines-muted: #5e6970;
  --wines-shell: min(100% - 2rem, 82.5rem);
  --wines-section-space: clamp(4.25rem, 8vw, 7.5rem);
  --wines-header-height: 4.75rem;
  /* Distance from the shell edge to the viewport edge. Derived from the
     viewport rather than a percentage, because a percentage margin resolves
     against the element's own containing block — which inside a grid is the
     track, not the shell. */
  --wines-bleed: max(1rem, (100vw - 82.5rem) / 2);

  /* Display type is condensed, uppercase and genuinely oversized — the
     industrial register the brief asks to retain from the primary reference
     (120px hero, 52px sections). Sizes live here only, so component rules never
     re-invent one. */
  --wines-display-font: "Barlow Condensed", "Montserrat", Arial, sans-serif;
  --wines-display: clamp(3.1rem, 7.5vw, 6.25rem);
  --wines-hero-title: clamp(3.1rem, min(7.5vw, 13vh), 6.25rem);
  /* Inner page titles: oversized, but plainly subordinate to the homepage hero.
     Matching the hero here would flatten the difference between the front door
     and a service page. */
  --wines-page-title: clamp(2.5rem, 5.2vw, 4.25rem);
  --wines-h2: clamp(2.3rem, 4.4vw, 3.5rem);
  --wines-h3: clamp(1.4rem, 2vw, 1.85rem);
  --wines-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --wines-statement: clamp(1.35rem, 2vw, 1.75rem);
  --wines-numeral: clamp(1.75rem, 2.6vw, 2.35rem);
  /* Desktop navigation labels. Montserrat, not the condensed display face — at
     label sizes the condensed face loses about a fifth of its width and reads as
     a smaller type size than it is. The floor keeps six items plus the brand and
     the standing action on one line at the 900px breakpoint, where the header has
     no room to spare. */
  --wines-nav-label: clamp(0.68rem, 0.85vw, 0.78rem);
  --wines-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--wines-text);
  background: var(--wines-white);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--wines-navy);
  font-family: var(--wines-display-font);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.04;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: var(--wines-display);
}

h2 {
  font-size: var(--wines-h2);
}

h3 {
  font-size: var(--wines-h3);
}

::selection {
  color: var(--wines-navy-deep);
  background: var(--wines-gold-bright);
}

:focus-visible {
  outline: 3px solid var(--wines-gold);
  outline-offset: 4px;
}

.wines-shell {
  width: var(--wines-shell);
  margin-inline: auto;
}

/* One measure for the whole site.
   Elementor boxes its own containers and pads them, so a `.wines-shell` inside
   one was inset twice: page content sat 24px inside the header logo and the
   footer above it, and the bleeding intro image stopped 24px short of the
   viewport edge it is meant to reach. The shell is the only thing that should
   set the measure, on Elementor pages and Twig templates alike. */
.wines-site .elementor .wines-shell.e-con,
.wines-site .elementor .e-con:has(> .e-con-inner > .wines-shell),
.wines-site .elementor .e-con > .e-con-inner:has(> .wines-shell) {
  padding-inline: 0;
}

.wines-site .elementor .e-con > .e-con-inner:has(> .wines-shell) {
  max-width: none;
}

.wines-skip-link {
  position: fixed;
  z-index: 99999;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--wines-navy);
  background: var(--wines-gold);
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
  transform: translateY(-180%);
}

.wines-skip-link:focus {
  transform: translateY(0);
}

.wines-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  color: var(--wines-navy);
  background: var(--wines-white);
  border-bottom: 1px solid rgba(12, 41, 66, 0.12);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.admin-bar .wines-header {
  top: 46px;
}

.wines-header.is-scrolled {
  box-shadow: 0 4px 16px rgba(7, 28, 45, 0.045);
}

.wines-header__inner {
  display: flex;
  height: calc(var(--wines-header-height) - 1px);
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
}

.wines-header__brand {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(10.5rem, 45vw, 12.75rem);
}

.wines-header__brand img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 3rem;
}

.wines-menu-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  color: var(--wines-navy);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wines-menu-toggle__label {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wines-menu-toggle__icon {
  position: relative;
  display: block;
  width: 1.7rem;
  height: 1rem;
}

.wines-menu-toggle__icon span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: top 180ms ease, transform 180ms ease;
}

.wines-menu-toggle__icon span:first-child { top: 0.2rem; }
.wines-menu-toggle__icon span:last-child { top: 0.75rem; width: 70%; }
.wines-menu-toggle[aria-expanded="true"] .wines-menu-toggle__icon span:first-child { top: 0.5rem; transform: rotate(45deg); }
.wines-menu-toggle[aria-expanded="true"] .wines-menu-toggle__icon span:last-child { top: 0.5rem; width: 100%; transform: rotate(-45deg); }

.wines-nav {
  position: fixed;
  inset: var(--wines-header-height) 0 0;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  overscroll-behavior: contain;
  padding:
    clamp(2rem, 7vh, 4rem)
    max(1rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  color: var(--wines-white);
  background: var(--wines-navy-deep);
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition:
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 360ms;
}

.admin-bar .wines-nav {
  top: calc(var(--wines-header-height) + 46px);
}

.wines-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s;
}

.wines-nav__list,
.wines-submenu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wines-nav__list {
  width: min(100%, 32rem);
  margin-inline: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.wines-nav__item {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.wines-nav__item > a {
  display: block;
  padding: clamp(0.85rem, 2.7vh, 1.15rem) 3.4rem clamp(0.85rem, 2.7vh, 1.15rem) 0;
  font-family: var(--wines-display-font);
  font-size: clamp(1.9rem, 9vw, 2.7rem);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 0.95;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wines-nav__item.is-current > a,
.wines-nav__item.is-ancestor > a,
.wines-nav a:hover,
.wines-nav a:focus-visible {
  color: var(--wines-gold-bright);
}

.wines-submenu-toggle {
  position: absolute;
  top: 0.55rem;
  right: -0.25rem;
  width: 3rem;
  height: 3rem;
  color: var(--wines-white);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wines-submenu-toggle span::before,
.wines-submenu-toggle span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.wines-submenu-toggle span::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 180ms ease;
}

.wines-submenu-toggle[aria-expanded="true"] span::after {
  transform: translate(-50%, -50%) rotate(0);
}

.wines-submenu {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 0 0 1rem;
  opacity: 0;
  transition:
    grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease,
    padding 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wines-submenu.is-open {
  grid-template-rows: 1fr;
  padding-bottom: 1rem;
  opacity: 1;
}

.wines-submenu a {
  display: block;
  padding: 0.6rem 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.065em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Mobile: the mega menu collapses to a plain stacked list inside the dark nav
   panel. The image and the two-column grid are desktop-only affordances. */
.wines-mega__inner {
  display: block;
  width: auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.wines-mega__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wines-mega__title {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: inherit;
}

.wines-mega__desc,
.wines-mega__media {
  display: none;
}

.wines-header__cta,
.wines-button .elementor-button,
a.wines-button,
button.wines-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  color: var(--wines-navy-deep);
  background: var(--wines-gold);
  border: 1px solid var(--wines-gold);
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms var(--wines-ease);
}

/* Direction belongs to the action, not to the entire label sliding sideways.
   CSS decoration leaves the client's Elementor button text editable. */
.wines-button .elementor-button::after,
a.wines-button::after {
  content: "\2197" / "";
  flex: 0 0 auto;
  font-size: 1.15em;
  font-weight: 500;
  transition: transform 300ms var(--wines-ease);
}

.wines-button .elementor-button:is(:hover, :focus-visible)::after,
a.wines-button:is(:hover, :focus-visible)::after,
.wines-header__cta:is(:hover, :focus-visible) > span {
  transform: translate(2px, -2px);
}

.wines-header__cta > span {
  transition: transform 300ms var(--wines-ease);
}

.wines-button .elementor-button:active,
a.wines-button:active,
button.wines-button:active {
  transform: translateY(1px);
}

.wines-header__cta {
  width: min(100%, 32rem);
  min-height: 3.75rem;
  justify-content: space-between;
  margin: clamp(2rem, 6vh, 3.25rem) auto 0;
  padding-inline: 1.25rem;
}

.wines-header__cta:hover,
.wines-button .elementor-button:hover,
a.wines-button:hover,
button.wines-button:hover {
  color: var(--wines-white);
  background: var(--wines-navy);
  border-color: var(--wines-navy);
}

.wines-button--outline-light .elementor-button {
  color: var(--wines-white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
}

/* Navigation weight, on white. Gold is reserved for the two "Discuss Your
   Project" conversion actions — the hero and the closing band — so a band that
   sends the visitor further into the site gets the same square plate with a navy
   edge instead. It keeps the two intents separable while still being a button:
   the About band's action was a 27px underlined text link, the quietest element
   in the emptiest band on the page. Fills gold on hover so the interaction still
   lands on the brand colour. */
.wines-button--outline-navy .elementor-button,
a.wines-button--outline-navy {
  color: var(--wines-navy);
  background: transparent;
  border-color: var(--wines-navy);
}

.wines-button--outline-navy .elementor-button:hover,
a.wines-button--outline-navy:hover {
  color: var(--wines-navy-deep);
  background: var(--wines-gold);
  border-color: var(--wines-gold);
}

.wines-main {
  overflow: clip;
}

.elementor-page .wines-main > .elementor {
  width: 100%;
}

.wines-main .e-con-boxed > .e-con-inner {
  --container-max-width: 82.5rem;
  max-width: 82.5rem;
}

.wines-hero > .e-con-inner,
.wines-hero__inner > .e-con-inner {
  height: 100%;
}

.wines-hero__inner > .e-con-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.wines-intro__grid > .e-con-inner,
.wines-services-layout > .e-con-inner,
.wines-products-layout > .e-con-inner,
.wines-experience-layout > .e-con-inner,
.wines-cta-layout > .e-con-inner {
  display: grid;
  width: 100%;
}

.wines-intro__grid > .e-con-inner { gap: 2rem; }
.wines-services-layout > .e-con-inner { gap: 2.5rem; }
.wines-products-layout > .e-con-inner { gap: clamp(2.5rem, 8vw, 7rem); }
.wines-experience-layout > .e-con-inner { gap: 3rem; }
/* Both selectors: Elementor wraps the row in `.e-con-inner`, the Twig archives
   and singles lay the same markup out directly. */
.wines-cta-layout > .e-con-inner,
.wines-cta-layout:not(.e-con) { --align-items: end; display: grid; gap: 2.25rem; align-items: end; }

.wines-capability-row > .e-con-inner,
.wines-service-row > .e-con-inner,
.wines-process-item > .e-con-inner {
  display: grid;
  width: 100%;
  gap: 0.75rem;
}

/* Numerals belong to the process only, because the process is the one list on
   the page that is a sequence. The capability areas and the services are sets,
   not steps — numbering them would imply an order that does not exist.
   Generated rather than authored so rows can be reordered in Elementor. */
.wines-process-grid {
  counter-reset: wines-index;
}

.wines-process-item {
  counter-increment: wines-index;
}

.wines-process-item > .e-con-inner::before {
  color: var(--wines-gold);
  content: counter(wines-index, decimal-leading-zero);
  font-family: var(--wines-display-font);
  font-size: var(--wines-numeral);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Heading + "view all" link sit on a shared baseline. Elementor drives its own
   flow off custom properties, so setting `display: flex` alone leaves the inner
   container in its default column direction — the row props below are required.
   The bare `.wines-section-heading` selector covers the shortcode markup, which
   has no `.e-con-inner` wrapper at all. */
.wines-section-heading > .e-con-inner,
.wines-section-heading:not(.e-con) {
  --flex-direction: row;
  --align-items: flex-end;
  --justify-content: space-between;
  --gap: 1.5rem;
  --padding-inline: 0;
  display: flex;
  width: 100%;
  padding-inline: 0;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.wines-section {
  padding-block: var(--wines-section-space);
}

.wines-section--flush {
  padding-block: 0 var(--wines-section-space);
}

.wines-section__heading {
  max-width: 22ch;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.wines-section__lead {
  max-width: 44rem;
  color: var(--wines-muted);
  font-size: var(--wines-lead);
  line-height: 1.6;
}

.wines-copy {
  color: var(--wines-muted);
}

.wines-copy > :last-child,
.wines-section__lead > :last-child {
  margin-bottom: 0;
}

/* Section label: a solid gold square followed by a letterspaced Montserrat
   label. The square is the primary reference's marker and reads as a drawing
   annotation, which suits the industrial register better than a rule. */
.wines-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--wines-navy);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.wines-eyebrow p {
  margin: 0;
}

.wines-eyebrow::before {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  background: var(--wines-gold);
  content: "";
}

.wines-capability-section .wines-eyebrow,
.wines-products-section .wines-eyebrow,
.wines-cta-section .wines-eyebrow {
  color: var(--wines-white);
}

/* Mobile first: the hero grows with its content so the overview panel can sit
   in normal flow. Locking it to a viewport height made the panel overlap the
   second call to action on narrow screens. The overlap treatment is reinstated
   at the desktop breakpoint, where there is room for it. */
.wines-hero {
  position: relative;
  z-index: 2;
  height: auto;
  min-height: calc(100svh - var(--wines-header-height));
  justify-content: flex-end;
  color: var(--wines-white);
  background-color: var(--wines-navy-deep);
  background-position: 58% center !important;
  overflow: visible;
}

.wines-hero.e-con,
.wines-hero__inner.e-con {
  --min-height: 0;
}

.wines-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 20, 33, 0.76) 0%, rgba(5, 20, 33, 0.4) 52%, rgba(5, 20, 33, 0.08) 100%);
  content: "";
}

.wines-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 3rem 4rem;
}

.wines-hero__video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wines-hero__copy {
  max-width: 70rem;
}

.wines-hero__heading {
  max-width: 14ch;
  margin-bottom: 1.25rem;
  color: var(--wines-white);
  font-family: var(--wines-display-font);
  font-size: var(--wines-hero-title);
}

.wines-hero__heading .elementor-heading-title,
.wines-capability-section .wines-section__heading .elementor-heading-title,
.wines-products-section .wines-section__heading .elementor-heading-title,
.wines-cta-section .wines-section__heading .elementor-heading-title {
  color: var(--wines-white);
}

.wines-hero__heading .elementor-heading-title {
  font-size: inherit;
}

.wines-hero__lead {
  max-width: 36rem;
  font-size: var(--wines-lead);
}

.wines-button-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.wines-button-row > .e-con-inner {
  --flex-direction: row;
  --flex-wrap: wrap;
  --align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.wines-button-row > .e-con-inner > .elementor-element {
  --width: auto;
  width: auto !important;
  max-width: none;
  flex: 0 0 auto;
}

/* Hero overview panel. No shadow and no float — it is a solid plane cut into
   the image, held by a gold edge. */
.wines-hero__overview {
  position: static;
  width: 100%;
  max-width: none;
  margin: 2.5rem 0 0;
  color: var(--wines-navy);
  background: var(--wines-white);
  border-top: 3px solid var(--wines-gold);
  font-size: 0.9rem;
}

.wines-hero__overview > .e-con-inner {
  width: 100%;
  padding: 1.75rem;
}

.wines-hero__overview-copy p {
  margin-bottom: 1.25rem;
}

.wines-intro {
  position: relative;
  z-index: 1;
  background: var(--wines-white);
}

.wines-intro__copy {
  max-width: 43rem;
  font-size: 1.05rem;
}

/* Three-statement band. The statements are the panel's entire content, so the
   panel is padded, never margined: the `margin-top` that used to sit here dated
   from when the statements were a bare band under the copy, and once they gained
   a navy background it became 72px of empty colour above "Quality
   construction." — the panel read as top-heavy and half-empty. */
.wines-intro__pillars > .e-con-inner {
  display: grid;
  width: 100%;
  gap: 0;
}

/* Image with the statements carried on a navy panel overlapping it. Without the
   photograph this was the only band on the page with no imagery, and the
   statements sat marooned under the copy with a dead column beside them. */
.wines-intro__showcase > .e-con-inner {
  display: grid;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.wines-intro__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.wines-intro__pillars {
  position: relative;
  z-index: 2;
  color: var(--wines-white);
  background: var(--wines-navy);
}

.wines-intro__pillars > .e-con-inner {
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Marked with the brand square, not a numeral: these are three simultaneous
   commitments, not three steps. */
.wines-intro__pillar + .wines-intro__pillar {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.wines-intro__pillar > .e-con-inner {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 1rem;
}

.wines-intro__pillar > .e-con-inner::before {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  background: var(--wines-gold);
  content: "";
  transform: translateY(-0.15em);
}

/* Targets the heading element itself, not the Elementor wrapper: the base
   `h1–h4 { color: navy }` rule beats an inherited colour set on the wrapper,
   which left these navy on a navy panel. */
.wines-intro__pillar-title,
.wines-intro__pillars h3 {
  margin: 0;
  color: var(--wines-white);
  font-size: var(--wines-h3);
}

.wines-capability-section {
  color: var(--wines-white);
  background: var(--wines-navy);
}

.wines-capability-section .wines-section__heading,
.wines-capability-section h3 {
  color: var(--wines-white);
}

.wines-capability-section .wines-section__lead {
  color: rgba(255, 255, 255, 0.72);
}

.wines-capability-list {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.wines-capability-row {
  padding-block: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.wines-capability-row__title {
  margin: 0;
  font-size: var(--wines-h3);
}

.wines-capability-row__text,
.wines-capability-row__text p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.68);
}

.wines-capability-section__closing {
  max-width: 44rem;
  margin-top: 2.5rem;
  font-size: var(--wines-statement);
  line-height: 1.45;
}

.wines-services-section {
  background: var(--wines-grey);
}

.wines-products-image img,
.wines-experience-image img {
  width: 100%;
  height: clamp(20rem, 70vw, 44rem);
  object-fit: cover;
}

/* Six photographic service areas. Brief section 8 asks for photography here
   rather than icon tiles, so the image leads each card. */
.wines-services-grid > .e-con-inner {
  display: grid;
  width: 100%;
  gap: clamp(2rem, 4vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.wines-service-card > .e-con-inner {
  width: 100%;
  padding: 0;
}

.wines-service-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wines-service-card__title {
  margin: 1.25rem 0 0.6rem;
}

.wines-service-card__copy {
  color: var(--wines-muted);
  font-size: 0.92rem;
}

.wines-service-card__copy p {
  margin-bottom: 1rem;
}

.wines-service-card .wines-text-link {
  margin-top: auto;
}

/* Design & Construct proposition. The capability list is deliberately shown in
   full — its length is the argument that Wines delivers the whole facility. */
.wines-delivery-section {
  background: var(--wines-white);
}

.wines-delivery-layout > .e-con-inner {
  display: grid;
  width: 100%;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.wines-delivery__intro {
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

.wines-delivery__capability > .e-con-inner {
  width: 100%;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--wines-grey);
  border-top: 3px solid var(--wines-gold);
}

.wines-delivery__capability-title {
  margin-bottom: 1.5rem;
  font-size: var(--wines-h3);
}

.wines-delivery__list ul {
  display: grid;
  gap: 0.1rem 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.wines-delivery__list li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--wines-text);
  font-size: 0.88rem;
  line-height: 1.9;
}

.wines-delivery__list li::before {
  position: absolute;
  top: 0.82em;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  background: var(--wines-gold);
  content: "";
}

.wines-text-link .elementor-button,
a.wines-text-link {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0 0.35rem;
  color: var(--wines-navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.wines-text-link .elementor-button::after,
a.wines-text-link::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--wines-gold);
  content: "";
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 350ms var(--wines-ease);
}

.wines-text-link .elementor-button:is(:hover, :focus-visible)::after,
a.wines-text-link:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}

.wines-text-link .elementor-button:hover,
a.wines-text-link:hover {
  color: var(--wines-navy);
  background: transparent;
}

.wines-section-heading h2,
.wines-section-heading .wines-section__heading {
  margin-bottom: 0;
}

.wines-projects-showcase {
  padding-top: var(--wines-section-space);
  background: var(--wines-white);
}

.wines-projects-showcase .wines-section-heading h2 {
  font-size: var(--wines-page-title);
}

/* Margin rather than padding: every grid sits inside a section that already
   pads its own block edges, so padding here added a second section's worth of
   empty space under each listing. As a margin the top edge collapses against
   whatever precedes the grid — the filter row, a lead paragraph — instead of
   stacking on top of it. */
.wines-projects-grid,
.wines-project-archive-grid,
.wines-insights-grid {
  display: grid;
  margin-top: 3rem;
  gap: 2rem;
}

.wines-project-card,
.wines-insight-card {
  min-width: 0;
}

/* 3:2, not 4:3. Facility photography is shot wide — long production halls,
   loading aprons, cladding elevations — and a near-square crop cuts the length
   out of the subject, which is the part that shows the scale of the work. It
   also reads as a generic thumbnail; the wider frame is what makes a grid of
   photographs look like a portfolio. */
.wines-project-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--wines-navy);
}

/* Crosshair marker tucked into the corner of the image, the affordance the
   reference uses in place of a hover overlay. */
.wines-project-card__media::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  display: grid;
  width: 3rem;
  height: 3rem;
  align-content: center;
  justify-content: center;
  color: var(--wines-navy);
  background: var(--wines-white);
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: color 200ms ease, background 200ms ease;
}

.wines-project-card:is(:hover, :focus-within) .wines-project-card__media::after {
  color: var(--wines-navy);
  background: var(--wines-gold);
}

/* Absolute rather than `height: 100%`: a percentage height does not resolve
   reliably against an `aspect-ratio` box, which left the navy media background
   showing through below the photograph. */
/* Selector is deliberately two classes deep. Elementor ships `.elementor img
   { height: auto }` at specificity (0,1,1), which beats a single class and
   makes the image fall back to its intrinsic ratio — the navy media background
   then shows below short images and tall ones overflow. (0,2,0) wins cleanly
   without needing !important. */
.wines-project-card__media .wines-project-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The link is a block with its own margin: as an inline element it sat on the
   text baseline, which put the article's category and date hard against the
   bottom edge of the photograph with no separation at all. */
.wines-insight-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 1.4rem;
}

/* The same corner marker the project cards carry, so the two indexes read as
   one system rather than two designs. */
.wines-insight-card__media::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  align-content: center;
  justify-content: center;
  color: var(--wines-navy);
  background: var(--wines-white);
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  transition: color 200ms ease, background 200ms ease;
}

.wines-insight-card:is(:hover, :focus-within) .wines-insight-card__media::after {
  color: var(--wines-navy);
  background: var(--wines-gold);
}

/* Clamped so the row of cards ends on one line rather than three ragged ones —
   an index reads as designed when the blocks align and as a template when the
   copy decides where each card stops. */
.wines-insight-card > p:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Lead article. An index of identical cards has no point of entry, which is the
   flat, templated read the client called out. The newest article takes the full
   width of the viewport instead: a grey slab running off the left edge carrying
   the copy, the photograph running off the right. It is the same bleeding
   composition the inner pages use for their intro band. */
.wines-insight-feature {
  display: grid;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.wines-insight-feature__panel {
  order: 2;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background: var(--wines-grey);
  border-top: 3px solid var(--wines-gold);
}

.wines-insight-feature__media {
  position: relative;
  display: block;
  order: 1;
  overflow: hidden;
}

.wines-insight-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wines-insight-feature:hover .wines-insight-feature__media img {
  transform: scale(1.03);
}

.wines-insight-feature__title {
  margin-bottom: 1rem;
  font-size: var(--wines-h2);
  line-height: 1;
}

.wines-insight-feature__title a {
  color: inherit;
  text-decoration: none;
}

.wines-insight-feature__title a:hover {
  color: var(--wines-gold);
}

.wines-insight-feature__excerpt {
  max-width: 40rem;
  margin-bottom: 1.75rem;
  color: var(--wines-muted);
  font-size: var(--wines-lead);
  line-height: 1.65;
}

.wines-insight-feature .wines-eyebrow {
  margin-bottom: 1rem;
}

/* Matches the project cards: see the note there on why the frame is wide. */
.wines-insight-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wines-project-card:is(:hover, :focus-within) .wines-project-card__image,
.wines-insight-card:is(:hover, :focus-within) img {
  transform: scale(1.035);
}

.wines-project-card__content {
  padding-top: 1.2rem;
}

.wines-project-card__sector,
.wines-insight-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  color: var(--wines-navy);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The date is supporting information next to the category, not a peer of it. */
.wines-insight-card__date {
  color: var(--wines-muted);
  font-weight: 650;
}

.wines-insight-card__category + .wines-insight-card__date::before {
  margin-right: 0.6rem;
  color: var(--wines-mid-grey);
  content: "/";
}

.wines-project-card h2,
.wines-project-card h3,
.wines-insight-card h2,
.wines-insight-card h3 {
  margin-bottom: 0.5rem;
  font-size: var(--wines-h3);
}

.wines-project-card a,
.wines-insight-card a {
  text-decoration: none;
}

.wines-project-card__location,
.wines-insight-card > p:last-child {
  color: var(--wines-muted);
}

.wines-process-section {
  background: var(--wines-white);
}

.wines-process-grid {
  margin-top: 3.5rem;
  border-top: 1px solid var(--wines-mid-grey);
}

.wines-process-item {
  padding-block: 1.65rem;
  border-bottom: 1px solid var(--wines-mid-grey);
}

.wines-process-item__title,
.wines-process-item__text p {
  margin: 0;
}

.wines-process-item__text {
  color: var(--wines-muted);
  font-size: 0.9rem;
}

.wines-products-section {
  color: var(--wines-white);
  background: var(--wines-navy-deep);
}

.wines-products-section .wines-section__heading,
.wines-products-section h3 {
  color: var(--wines-white);
}

.wines-products-section .wines-section__lead,
.wines-product-row__copy {
  color: rgba(255, 255, 255, 0.68);
}

.wines-product-row {
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.wines-product-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.wines-product-row__title {
  margin-bottom: 0.75rem;
}

.wines-products-section .wines-text-link .elementor-button {
  color: var(--wines-white);
}

.wines-experience-section {
  background: var(--wines-grey);
}

.wines-home-insights {
  background: var(--wines-white);
}

/* Homepage Insights: a title rail with two large articles beside it, the
   secondary reference's news composition. A heading row with a three-across
   card grid under it is the default article teaser every generated site ships;
   held in a rail, the band reads as designed rather than assembled. The rail
   stacks above the cards until the desktop breakpoint gives it a column. */
.wines-insights-split > .e-con-inner {
  display: grid;
  width: 100%;
  gap: 2.25rem;
}

.wines-insights-rail .wines-section__lead {
  margin-bottom: 1.75rem;
}

/* The band's own gap owns the spacing; the grids' index margin would stack on
   top of it. */
.wines-home-insights .wines-insights-grid,
.wines-home-insights .wines-insights-categories {
  margin-top: 0;
}

/* Category filter. A rule with labels sitting on it, not a row of pills —
   pills would be the fourth rounded, floating element on a site whose whole
   register is square. The current item is marked by weight and a gold rule
   directly beneath it, which is the same device the navigation uses. */
.wines-filter {
  display: flex;
  overflow-x: auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--wines-mid-grey);
  scrollbar-width: none;
}

.wines-filter::-webkit-scrollbar {
  display: none;
}

.wines-filter__item {
  position: relative;
  padding-block: 0 0.9rem;
  color: var(--wines-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.wines-filter__item::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--wines-gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wines-filter__item:hover,
.wines-filter__item.is-current {
  color: var(--wines-navy);
}

.wines-filter__item:hover::after,
.wines-filter__item:focus-visible::after,
.wines-filter__item.is-current::after {
  transform: scaleX(1);
}

/* Pagination. Numbers on a rule, matching the filter row above the grid — the
   two are the same control in different positions, so they carry the same
   register rather than one being links and the other buttons. */
.wines-pagination {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--wines-mid-grey);
}

.wines-pagination__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.4rem;
  list-style: none;
}

.wines-pagination .page-numbers {
  display: block;
  min-width: 2.75rem;
  padding: 0.7rem 0.9rem;
  color: var(--wines-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease, background 200ms ease;
}

.wines-pagination a.page-numbers:hover,
.wines-pagination a.page-numbers:focus-visible {
  color: var(--wines-white);
  background: var(--wines-navy);
}

.wines-pagination .page-numbers.current {
  color: var(--wines-navy-deep);
  background: var(--wines-gold);
}

.wines-pagination .page-numbers.dots {
  min-width: 0;
  padding-inline: 0.3rem;
}

.wines-pagination .prev,
.wines-pagination .next {
  color: var(--wines-navy);
}

.wines-page-head .wines-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.wines-page-head .wines-eyebrow a:hover {
  text-decoration: underline;
}

/* Full-width rows, not a two-column grid: there are five categories, so a
   two-up grid always leaves an empty cell with its borders still drawn. */
.wines-insights-categories {
  display: grid;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--wines-mid-grey);
}

.wines-insights-category {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--wines-mid-grey);
}

.wines-insights-category h3 {
  margin-bottom: 0.6rem;
}

.wines-insights-category p {
  max-width: 44rem;
  margin-bottom: 0;
  color: var(--wines-muted);
}

.wines-cta-section {
  color: var(--wines-white);
  background: var(--wines-navy);
}

.wines-cta-section .wines-section__heading {
  color: var(--wines-white);
}

.wines-cta-section .wines-copy {
  color: rgba(255, 255, 255, 0.72);
}

.wines-cta-section--compact .wines-section__heading {
  margin-bottom: 0;
}

/* The full closing band is the site's last statement, so its heading takes the
   inner-page title scale — one step below the hero, well above a section
   heading — and the band gets extra depth. The compact band on archives and
   singles keeps section scale: there it is a sign-off, not a destination. */
.wines-cta-section:not(.wines-cta-section--compact) {
  padding-block: calc(var(--wines-section-space) * 1.3);
}

.wines-cta-section:not(.wines-cta-section--compact) .wines-section__heading {
  max-width: 14ch;
  font-size: var(--wines-page-title);
  line-height: 0.94;
}

/* Next to a title-scale heading the standing action needs weight of its own. */
.wines-cta-layout .wines-button {
  min-height: 3.75rem;
  padding-inline: 1.9rem;
}

/* The case study's photograph, full width and at full strength.
   It used to sit behind the title as a background under an 88%-opaque gradient,
   which is a hero in the sense the client rejected: a viewport of near-black
   with the building it was meant to show barely legible through it, and the
   project name at homepage scale wrapping to four lines. As its own band the
   photograph is the subject rather than a texture, and the title above it is set
   like every other inner page. */
.wines-project-single__media img {
  display: block;
  width: 100%;
  height: clamp(15rem, 45vw, 34rem);
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Inner pages
   ---------------------------------------------------------------------------
   A full-bleed photographic banner carrying nothing but the navigation label is
   the treatment that made every inner page read as a stock template with a thin
   column of text under it. The banner belongs to the homepage and to project
   case studies, where the photograph is the subject.

   Everywhere else the page opens on white and is carried by type alone. A navy
   plate under every inner page's title was a second hero in all but name: it
   put a heavy block of colour between the header and the content on pages whose
   subject is the content, and it had to be filled, which is why short client
   statements ended up floating in an empty half-screen of navy. White has no
   volume to fill, so a two-line opening statement reads as deliberate rather
   than as a page that ran out of copy. Navy stays the accent — the footer, the
   closing call to action, statement panels — rather than the ceiling of every
   page.

   The head carries three things: a breadcrumb eyebrow holding the page's
   position in the navigation, the client's own headline as the h1, and the
   opening paragraph. The page title moving to the eyebrow is what frees the h1
   to describe the page rather than repeat the menu item.

   The hairline is load-bearing: with the head white and the first band usually
   white too, it is the only thing separating the title from the content, and
   without it the header floats over an undivided sheet. */
.wines-page-head {
  color: var(--wines-text);
  background: var(--wines-white);
  border-bottom: 1px solid var(--wines-mid-grey);
}

.wines-page-head__inner {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.75rem);
}

.wines-page-head .wines-eyebrow {
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

.wines-page-head__title {
  max-width: 20ch;
  margin-bottom: 0;
  color: var(--wines-navy);
  font-size: var(--wines-page-title);
  line-height: 0.94;
}

/* Elementor's heading widget puts the class on its wrapper, so everything set
   there has to be handed down explicitly — the `h1`/`h2` element rules would
   otherwise win on the inner element and the heading would take neither the
   size nor the colour of the block it belongs to. Colour is inherited rather
   than named, so the head can change background without the title being missed:
   it was set to white for the navy plate, and stayed white when the plate went,
   which left the h1 invisible on the page it titles. */
.wines-page-head__title .elementor-heading-title,
.wines-band__heading .elementor-heading-title,
.wines-facet__title .elementor-heading-title {
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* Full-strength ink, not grey. This is the client's opening statement and the
   only prose on the page above the fold; set in muted grey under a display-size
   title it read as a caption apologising for the heading. */
.wines-page-head__lead,
.wines-page-head__lead p {
  max-width: 38rem;
  color: var(--wines-text);
  font-size: var(--wines-lead);
  line-height: 1.65;
}

/* Listing pages keep their whole opening statement on the plate, so the lead
   can run to more than one paragraph. */
.wines-page-head__lead p {
  margin-bottom: 1.1rem;
}

.wines-page-head__lead p:last-child,
.wines-page-head__lead {
  margin-bottom: 0;
}

.wines-page-head__lead {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Masthead. A listing page is a front door of its own, so its title takes hero
   size — the one place an inner page competes with the homepage.

   Stacked, not split. Holding the statement against the right was a fix for the
   navy plate, which had a large empty half that needed filling; on white the
   left column and open space to its right is the composition, and it holds at
   every width without a breakpoint. */
.wines-page-head--masthead .wines-page-head__inner {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}

.wines-page-head--masthead .wines-page-head__title {
  max-width: 14ch;
  font-size: var(--wines-display);
  line-height: 0.9;
}

.wines-page-head--masthead .wines-page-head__lead,
.wines-page-head--masthead .wines-page-head__lead p {
  max-width: 34rem;
}

/* The lead article reads as part of the masthead, so the usual section space
   between them would break the composition in two. */
.wines-page-head--masthead + .wines-section {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* Article head. Title, meta and photograph share one row — the article's own
   subject is the only image the page needs above the fold, and stacking a
   full-width banner under the title is what pushed the opening paragraph off
   the screen entirely. */
.wines-page-head--article .wines-page-head__inner {
  padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
}

.wines-page-head--article .wines-page-head__title {
  max-width: 18ch;
  font-size: var(--wines-h2);
}

/* WordPress pages that have not been built with Elementor still receive the
   same typographic head and readable measure. This is the safe client fallback:
   a newly published page cannot lose its visible title or document h1. */
.wines-standard-page__layout {
  padding-block: clamp(2.75rem, 6vw, 5rem) var(--wines-section-space);
}

.wines-standard-page__layout .wines-article-copy {
  max-width: 48rem;
}

.wines-standard-page__layout .wines-article-copy > :last-child {
  margin-bottom: 0;
}

/* Stacked below the date until there is a second column to sit in; without the
   margin the photograph butts straight onto the date's baseline. */
.wines-article-head__media {
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
}

/* 3:2, the same frame as the cards — see the note on the project card media.
   Left at 4:3 this read as a square tile beside the title rather than as the
   article's photograph. */
.wines-article-head__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Intro band. The remainder of the opening statement is set above body copy and
   in full-strength ink so the page has a voice before it starts listing
   capabilities — but not at statement size, which turned five short paragraphs
   into a wall of headline-weight text. */
.wines-page-intro__copy,
.wines-page-intro__copy p {
  max-width: 36rem;
  color: var(--wines-text);
  font-size: var(--wines-lead);
  line-height: 1.7;
}

.wines-page-intro__copy p:last-child {
  margin-bottom: 0;
}

.wines-page-intro__image img {
  width: 100%;
  height: clamp(18rem, 60vw, 26rem);
  object-fit: cover;
}

.wines-page-intro__layout > .e-con-inner {
  display: grid;
  width: 100%;
  gap: clamp(2.5rem, 5vw, 4rem);
}

/* Pages whose opening statement is a single sentence contribute no copy to this
   band, leaving the photograph to hold the row on its own. */
.wines-page-intro__layout > .e-con-inner > .wines-page-intro__image:only-child {
  grid-column: 1 / -1;
}

/* Content bands. Heading pinned in its own column, body beside it — the device
   that gives the reference sites their structure. Backgrounds alternate so a
   long technical page reads as a sequence of subjects rather than one scroll. */
.wines-band--grey {
  background: var(--wines-grey);
}

.wines-band__layout > .e-con-inner {
  --align-items: start;
  display: grid;
  width: 100%;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.wines-band__heading {
  margin-bottom: 0;
  font-size: var(--wines-h3);
}

.wines-band__body > .e-con-inner {
  width: 100%;
  padding: 0;
}

.wines-band .wines-article-copy p:last-child,
.wines-band .wines-article-copy ul:last-child {
  margin-bottom: 0;
}

/* The DOCX conversion wraps every list item's text in its own paragraph, which
   is why the source lists rendered with a blank line between each bullet. */
.wines-article-copy li > p,
.wines-facet__copy li > p {
  margin-bottom: 0;
}

/* Capability lists are the technical proof on these pages and there are often
   sixteen of them. Set as a marked multi-column index they read as a
   specification; set as default bullets they read as an afterthought. */
.wines-article-copy ul {
  display: grid;
  margin: 0 0 1.75rem;
  padding: 0;
  gap: 0.1rem 2.5rem;
  list-style: none;
}

.wines-article-copy ul li {
  display: flex;
  gap: 0.7rem;
  padding-block: 0.5rem;
  border-top: 1px solid rgba(12, 41, 66, 0.14);
  color: var(--wines-text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.wines-article-copy ul li::before {
  width: 0.35rem;
  height: 0.35rem;
  flex: 0 0 auto;
  margin-top: 0.5rem;
  background: var(--wines-gold);
  content: "";
}

/* Named sets — values, product ranges, article categories. */
.wines-facet-grid > .e-con-inner {
  display: grid;
  width: 100%;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.wines-facet > .e-con-inner {
  width: 100%;
  padding: 1.4rem 0 0;
  border-top: 2px solid var(--wines-navy);
}

.wines-facet__title {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.wines-facet__copy,
.wines-facet__copy p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.wines-facet-band__intro {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.wines-band--grey .wines-facet > .e-con-inner {
  border-top-color: rgba(12, 41, 66, 0.35);
}

.wines-page-cards .wines-section__heading {
  margin-bottom: 0;
}

.wines-page-cards__closing,
.wines-page-cards__closing p {
  max-width: 44rem;
  margin-bottom: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--wines-text);
  font-size: var(--wines-lead);
}

/* `em` here resolves against the heading's own size, so 2em at display scale was
   over a hundred pixels of air before every sub-heading. */
.wines-single__content h2,
.wines-project-single__body h2 {
  margin-top: 1.25em;
  font-size: var(--wines-h2);
}

.wines-single__content h3,
.wines-project-single__body h3 {
  margin-top: 2em;
}

/* The first heading has nothing above it to be separated from, so its top margin
   only stacks onto the block's own padding. */
.wines-single__content > :first-child,
.wines-project-single__body > :first-child,
.wines-project-single__body > section:first-child > :first-child {
  margin-top: 0;
}

/* A wider column wants looser setting. The line is long by design — it is the
   width of the article rather than a column inside it — and the leading is what
   keeps the eye from losing its place returning to the left edge. */
.wines-single__content p,
.wines-single__content li,
.wines-project-single__body p,
.wines-project-single__body li {
  font-size: 1.0625rem;
  line-height: 1.8;
}

.wines-article-copy a {
  color: var(--wines-navy);
  font-weight: 650;
}

.wines-single__date {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  color: var(--wines-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* An article runs in its own, narrower measure. The site shell is sized for
   bands and card grids; a single column of prose set inside it left more than
   half the page white on the right, which read as a column that had fallen out
   of its layout rather than as a considered measure. Narrowing the shell for
   the whole article — head, photograph and body together — keeps the column
   left-aligned with everything above it and puts the remaining space in the
   margin where it belongs. */
.wines-single,
.wines-project-single {
  --wines-shell: min(100% - 2rem, 60rem);
}

/* Still capped inside the narrowed shell. The shell sets the composition of the
   head — title against photograph — and the cap sets the measure of the prose;
   letting the prose run the full shell put well over a hundred characters on a
   line, which is unreadable however good the page looks. */
.wines-single__content {
  max-width: 44rem;
  margin-inline: 0;
}

/* Left-aligned inside the narrowed shell, not centred in it. `.wines-shell`
   centres what it holds, so a `max-width` on the body alone floated the prose
   in the middle of the page while the meta strip directly above it started at
   the shell's left edge — two columns on one page, at different edges. */
.wines-project-single__body {
  max-width: 44rem;
  margin-inline: 0;
}

/* Less above than below. Section space is sized to separate two bands that each
   have their own weight; here it sat between a head and the prose that continues
   it, and stacked on top of the head's own bottom padding it opened a gap large
   enough to read as a missing block. The space below still closes the article
   off against the footer. */
.wines-single__content {
  padding-block: clamp(2.25rem, 4vw, 3.25rem) var(--wines-section-space);
}

/* The case study body's block padding lives on the shell wrapper, not the
   prose blocks: the scope panel sits between two prose blocks inside the same
   shell, and per-block padding would open a double gap around it. */
.wines-project-single__content {
  padding-block: clamp(2.25rem, 4vw, 3.25rem) var(--wines-section-space);
}

/* Project facts as a plate, not a hairlined strip. Grey with the 3px gold top
   edge — the same plane the hero overview, the delivery capability panel and
   the insight feature slab are built from. On desktop it cuts into the bottom
   of the photograph (the site's plane-on-image device); in mobile flow the
   grey keeps it a plate rather than four labels floating on white. */
.wines-project-single__meta {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wines-grey);
  border-top: 3px solid var(--wines-gold);
}

.wines-project-single__meta div {
  display: grid;
  gap: 0.2rem;
  padding-block: 1rem;
}

.wines-project-single__meta span {
  color: var(--wines-gold);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Scope as a specification, not prose bullets. Full shell width inside the
   reading column's shell — a set of named items takes the whole measure, the
   same rule the facet bands follow — on the grey gold-edged plate the
   capability panel established. */
.wines-project-single__scope {
  margin-block: clamp(2.25rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--wines-grey);
  border-top: 3px solid var(--wines-gold);
}

.wines-project-single__scope:first-child {
  margin-top: 0;
}

.wines-project-single__scope h2 {
  margin: 0 0 1.5rem;
  font-size: var(--wines-h3);
}

.wines-project-single__scope ul {
  display: grid;
  gap: 0.1rem 2.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.wines-project-single__scope li {
  display: flex;
  gap: 0.7rem;
  padding-block: 0.5rem;
  border-top: 1px solid rgba(12, 41, 66, 0.14);
  color: var(--wines-text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.wines-project-single__scope li::before {
  width: 0.35rem;
  height: 0.35rem;
  flex: 0 0 auto;
  margin-top: 0.5rem;
  background: var(--wines-gold);
  content: "";
}

.wines-project-gallery {
  display: grid;
  gap: 0.5rem;
}

.wines-project-gallery__item {
  margin: 0;
  overflow: hidden;
}

.wines-project-gallery img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

/* Related services close the case study by pointing back into the site — the
   cross-linking the brief asks the template to carry. */
.wines-project-single__related {
  padding-block: clamp(2rem, 4vw, 3rem) var(--wines-section-space);
}

.wines-project-single__related h2 {
  margin-bottom: 1.25rem;
  font-size: var(--wines-h3);
}

.wines-project-single__related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.wines-content-notice {
  width: 100%;
  padding: 1.5rem;
  color: var(--wines-muted);
  background: var(--wines-grey);
  border-left: 4px solid var(--wines-gold);
}

.wines-enquiry-form-wrap {
  margin-top: 3rem;
}

.wines-form-grid {
  display: grid;
  gap: 1.4rem;
  margin-bottom: 2rem;
}

.wines-field {
  display: grid;
  gap: 0.5rem;
}

.wines-field label {
  color: var(--wines-navy);
  font-size: 0.74rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wines-field input,
.wines-field select,
.wines-field textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.8rem 0;
  color: var(--wines-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(12, 41, 66, 0.45);
  border-radius: 0;
}

.wines-field textarea {
  resize: vertical;
}

.wines-field input:focus,
.wines-field select:focus,
.wines-field textarea:focus {
  border-color: var(--wines-gold);
  outline: 0;
  box-shadow: 0 1px 0 var(--wines-gold);
}

.wines-field__help {
  color: var(--wines-muted);
  font-size: 0.75rem;
}

.wines-honeypot {
  position: absolute !important;
  left: -9999px !important;
}

.wines-form-message {
  padding: 1rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--wines-gold);
}

.wines-form-message--success { background: #edf6ed; }
.wines-form-message--error { background: #fff0ef; border-color: #b3362d; }

/* The gold rule across the top is the full-width brand device the brief allows
   (section 5) set at viewport scale — the secondary reference runs the same bar
   between its closing band and footer. 3px matches every other gold edge on the
   site (hero overview, capability panel, feature slab), so it reads as the one
   device recurring rather than a new line weight. */
.wines-footer {
  color: rgba(255, 255, 255, 0.7);
  background: var(--wines-navy-deep);
  border-top: 3px solid var(--wines-gold);
}

.wines-footer__top {
  display: grid;
  gap: 3rem;
  padding-block: clamp(4rem, 10vw, 7rem);
}

.wines-footer__brand {
  max-width: 28rem;
}

.wines-footer__brand img {
  width: min(15rem, 100%);
  height: auto;
  margin-bottom: 2rem;
}

.wines-footer__proposition {
  color: var(--wines-white);
  font-size: var(--wines-statement);
  font-weight: 600;
  line-height: 1.3;
}

.wines-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

/* Small utility headings stay in Montserrat. Condensed display type loses its
   authority below about 1rem and reads as cramped. */
.wines-footer__column h2 {
  margin-bottom: 0.75rem;
  color: var(--wines-gold);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wines-footer__column a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  text-decoration: none;
}

.wines-footer__column a:hover {
  color: var(--wines-white);
}

.wines-footer__bottom {
  display: grid;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.7rem;
}

.wines-footer__bottom p {
  margin-bottom: 0.2rem;
}

.wines-error-page {
  display: flex;
  min-height: 65vh;
  align-items: center;
  padding-block: var(--wines-section-space);
}

.wines-error-page h1 {
  margin-bottom: 2rem;
}

/* Motion.
   --wines-reveal-delay is set per element by site.js so siblings cascade rather
   than arriving together. Everything is transform/opacity only, so nothing here
   triggers layout during scroll. */
.js .wines-reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--wines-reveal-delay, 0ms),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--wines-reveal-delay, 0ms);
}

.js .wines-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Images arrive as a wipe from the bottom edge with the photograph easing out
   of a slight over-scale — the "image transition" the brief asks for, driven by
   clip-path so it stays on the compositor.

   The clip is applied to the image, never to the observed element. Chrome folds
   an element's own clip-path into its IntersectionObserver rect, so clipping the
   observed box to zero height makes it permanently un-intersectable: it would
   never receive `is-visible` and would stay invisible for good. Verified with a
   live observer probe — ratio 0 while clipped, 1 while not. */
.js .wines-wipe img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--wines-reveal-delay, 0ms);
}

.js .wines-wipe.is-visible img {
  clip-path: inset(0 0 0 0);
}

/* Project card images are left out of the over-scale so it does not fight their
   hover zoom. */
.js .wines-wipe:not(.wines-project-card__media) img {
  transform: scale(1.08);
  transition:
    clip-path 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--wines-reveal-delay, 0ms),
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1) var(--wines-reveal-delay, 0ms);
}

.js .wines-wipe.is-visible:not(.wines-project-card__media) img {
  transform: scale(1);
}

/* Hero foreground drifts up as the section scrolls, at a fraction of scroll
   speed. Amount is written by site.js as a single custom property. */
.wines-hero__inner {
  will-change: transform;
}

.js .wines-hero__inner {
  transform: translate3d(0, var(--wines-hero-shift, 0px), 0);
}

.wines-text-link .elementor-button .elementor-button-icon,
a.wines-text-link > span {
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wines-text-link .elementor-button:hover .elementor-button-icon,
a.wines-text-link:hover > span {
  transform: translateX(0.35rem);
}

@media (min-width: 640px) {
  :root { --wines-shell: min(100% - 3rem, 82.5rem); }
  .wines-header__inner { padding-inline: 1.5rem; }
  .wines-nav {
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-left: max(1.5rem, env(safe-area-inset-left));
  }
  .wines-projects-grid,
  .wines-project-archive-grid,
  .wines-insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-services-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-facet-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-article-copy ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-field--wide { grid-column: 1 / -1; }
  .wines-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-footer__brand { grid-column: 1 / -1; }
  .wines-project-single__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-hero__overview { width: min(100%, 34rem); margin-left: auto; }
}

@media (min-width: 782px) {
  .admin-bar .wines-header { top: 32px; }
  .admin-bar .wines-nav { top: calc(var(--wines-header-height) + 32px); }
}

@media (min-width: 900px) {
  :root { --wines-header-height: 5rem; }
  body.menu-open { overflow: visible; }
  .wines-header__inner { padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
  /* The floor is what the 900px breakpoint can afford, not what looks best in
     isolation: brand, six labels and the standing action have to hold one line
     there, and with Montserrat labels the row needed 923px of a 900px header. */
  .wines-header__brand { width: clamp(10rem, 16vw, 13.5rem); }
  .wines-header__brand img { max-height: 3.15rem; }
  .wines-menu-toggle { display: none; }
  .wines-nav {
    position: static;
    display: flex;
    overflow: visible;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    color: var(--wines-navy);
    background: transparent;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  /* Third property the overlay lends the header and the header has to give back.
     The menu's list is a centred 32rem column with a hairline above it; on the
     desktop row that width became a cage — six Montserrat labels need 556px, so
     they overflowed their own container by 44px while `margin-inline: auto` held
     183px of empty space on either side of them. A row of labels is as wide as
     its labels. */
  .wines-nav__list { display: flex; width: auto; align-items: center; margin-inline: 0; border-top: 0; }
  .wines-nav__item { border: 0; }
  /* The family reset is load-bearing. The overlay nav above sets the condensed
     display face for its 2.7rem items, and this block only overrode the size —
     so the desktop labels inherited Barlow Condensed at 10.88px and shrank to
     about four fifths of their width. Navigation is Montserrat; `inherit` takes
     it from the body so there is one place that decides. */
  .wines-nav__item > a {
    /* One gutter, three consumers: the padding here and the left edge and width
       of the hover rule below. They have to agree or the gold rule sits off its
       own label, so they read the same property rather than three copies of the
       same clamp. */
    --wines-nav-gutter: clamp(0.4rem, 1vw, 0.9rem);
    padding: 1rem var(--wines-nav-gutter);
    font-family: inherit;
    font-size: var(--wines-nav-label);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }
  .wines-nav__item.is-current > a,
  .wines-nav a:hover { color: var(--wines-gold); }
  .wines-submenu-toggle { display: none; }

  /* Top-level items carry a gold rule that draws out from the left on hover and
     stays put for the current section. */
  .wines-nav__item > a { position: relative; }
  .wines-nav__item > a::after {
    position: absolute;
    bottom: 0.55rem;
    left: var(--wines-nav-gutter);
    width: calc(100% - 2 * var(--wines-nav-gutter));
    height: 2px;
    background: var(--wines-gold);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wines-nav__item:hover > a::after,
  .wines-nav__item:focus-within > a::after,
  .wines-nav__item.is-current > a::after { transform: scaleX(1); }

  /* Mega menu: a full-width square white plane held by a gold edge, opening as
     a wipe. Each item is a titled entry with a supporting line, paired with a
     large image — a menu that sells the section rather than just listing it.
     No shadow and no radius; a soft drop shadow is the detail that makes a
     dropdown look generic. */
  .wines-nav__item--parent { position: static; }
  .wines-submenu {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    left: 0;
    display: block;
    padding: 0;
    color: var(--wines-navy);
    background: var(--wines-white);
    border-top: 3px solid var(--wines-gold);
    border-bottom: 1px solid rgba(12, 41, 66, 0.12);
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition:
      opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 380ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 380ms;
  }
  .wines-nav__item:hover > .wines-submenu,
  .wines-nav__item:focus-within > .wines-submenu {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  .wines-mega__inner {
    display: grid;
    width: var(--wines-shell);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4rem);
    margin-inline: auto;
    padding-block: clamp(2rem, 3vw, 2.75rem);
  }
  .wines-mega__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem clamp(1.5rem, 3vw, 3rem);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .wines-mega__list a {
    display: block;
    padding: 0.9rem 0;
    text-decoration: none;
  }
  .wines-mega__title {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--wines-navy);
    font-family: var(--wines-display-font);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 200ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wines-mega__desc {
    display: block;
    max-width: 26rem;
    color: var(--wines-muted);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.55;
    text-transform: none;
  }
  .wines-mega__list a:hover .wines-mega__title,
  .wines-mega__list a:focus-visible .wines-mega__title {
    color: var(--wines-gold);
    transform: translateX(0.35rem);
  }
  /* Absolutely positioned so the panel height is driven by the menu list, not
     by the photograph. With `height: 100%` on a box of indeterminate height the
     image inflates the whole dropdown — very visible on a short menu. */
  .wines-mega__media {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 11rem;
  }
  .wines-mega__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Reset the width and the distribution as well as the colours. In the overlay
     the action is a 32rem plate spread `space-between` across the foot of the
     menu; inherited into the header that made a 512px box holding 220px of
     content, which parked the arrow against the far edge of the viewport with a
     void between it and its own label. Here it is a label-width action sitting
     against a divider. */
  .wines-header__cta {
    width: auto;
    min-height: 3rem;
    justify-content: center;
    margin: 0 0 0 clamp(0.6rem, 1.5vw, 1.4rem);
    padding: 1rem 0 1rem clamp(1rem, 2vw, 2rem);
    color: var(--wines-navy);
    background: var(--wines-white);
    border: 0;
    border-left: 1px solid rgba(12, 41, 66, 0.2);
    white-space: nowrap;
  }
  .wines-header__cta span { color: var(--wines-gold); }
  .wines-header__cta:hover { color: var(--wines-navy); background: var(--wines-white); border-color: rgba(12, 41, 66, 0.2); }
  .wines-hero { height: calc(100svh - var(--wines-header-height)); min-height: 0; max-height: none; background-position: center center !important; }
  .wines-hero__inner { padding-block: 5rem 6.5rem; }
  /* The heading wrapper is not the rendered h1. Give the actual display face
     enough measure for both phrases; Montserrat's ch on the wrapper and the
     inherited balanced wrap previously split the headline into three lines. */
  .wines-hero__heading { max-width: 100%; }
  .wines-hero__heading .elementor-heading-title { max-width: 24ch; text-wrap: balance; }
  .wines-hero__lead { width: 32rem; max-width: 100%; }
  /* Bleeds past the shell to the viewport edge so the panel reads as cut into
     the image rather than floated on top of it. */
  .wines-hero__overview {
    position: absolute;
    right: calc(50% - 50vw);
    bottom: -3.5rem;
    width: clamp(20rem, 38vw, 33rem);
    min-height: 0;
    margin: 0;
    font-size: 0.85rem;
  }
  .wines-hero__overview > .e-con-inner { padding: clamp(1.5rem, 2.75vw, 2.5rem); }
  .wines-intro { padding-top: calc(var(--wines-section-space) + 3.5rem); }
  .wines-intro__grid > .e-con-inner { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.95fr); gap: clamp(3rem, 7vw, 6rem); align-items: start; }
  /* The panel sits low and cuts back across the image; the image runs off the
     left edge of the viewport.

     The margin is deliberately tight. The copy row above ends on "our focus
     remains the same:" and the panel carries the three statements that colon
     introduces, so a full section's worth of air between them broke the band
     into two stacked rows and left the colon with no visible payoff — 104px of
     dead white across the full width, 186px of it under the "About Wines
     Constructions" action where the heading column simply stopped. One
     composition, not two rows. */
  .wines-intro__showcase > .e-con-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; margin-top: clamp(1rem, 2vw, 1.75rem); }
  .wines-intro-showcase-image-bleed,
  .wines-intro__image {
    width: calc(100% + var(--wines-bleed));
    max-width: none !important;
    margin-left: calc(var(--wines-bleed) * -1);
  }
  .wines-intro__image img { aspect-ratio: auto; height: min(34rem, 44vw); }
  /* The pull has to be deep enough to read as one plane cut into another. At
     -5vw the panel crossed the photograph by 57px of its own 488 — 12%, which
     reads as two boxes standing next to each other rather than an overlap.

     A negative margin alone only *shifts* the panel: Elementor's `.e-con` has a
     definite `width: 100%`, so the box slid left off its grid track and left the
     same void behind it on the right. Same trap as the image bleed below, and
     the same fix — widen by the pull and pull back by it, so the right edge
     stays pinned to the shell and the plane gains weight as it gains depth. */
  .wines-intro__pillars {
    --wines-panel-pull: clamp(5rem, 10vw, 12rem);
    width: calc(100% + var(--wines-panel-pull));
    max-width: none !important;
    margin: 0 0 clamp(2rem, 4vw, 3.5rem) calc(var(--wines-panel-pull) * -1);
  }
  .wines-capability-row > .e-con-inner { grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1fr); align-items: baseline; gap: 2.5rem; }
  /* Inner pages: heading column, body column. Pinning the heading was tried and
     removed — on a short band it outlives its own copy and ends up floating
     alone in an empty section, which reads as a bug rather than as structure. */
  .wines-band__layout > .e-con-inner { grid-template-columns: minmax(14rem, 0.62fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); }
  /* A set of named items wants the full measure, not the two-thirds a prose
     column leaves it — the heading takes its own row and the grid runs wide. */
  .wines-band--facets .wines-band__layout > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 3.5rem); }
  .wines-band--facets .wines-band__heading { font-size: var(--wines-h2); }
  .wines-band--facets .wines-facet-grid > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wines-page-head__inner { padding-block: clamp(4rem, 9vw, 7rem) clamp(3.5rem, 7vw, 5.5rem); }
  /* Intro copy and the page's photograph share a row; the image runs off the
     right edge of the viewport so the band is a composition rather than a
     picture in a box. Width is set as well as the negative margin because an
     Elementor image widget does not stretch to its grid track, and `max-width`
     is forced because Elementor's own `max-width: 100%` re-clamps it. */
  .wines-page-intro__layout > .e-con-inner { --align-items: center; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 7vw, 6rem); }
  .wines-page-intro__layout > .e-con-inner > .wines-page-intro__image {
    width: calc(100% + var(--wines-bleed));
    max-width: none !important;
    margin-right: calc(var(--wines-bleed) * -1);
  }
  .wines-page-intro__image img { height: min(32rem, 40vw); }
  /* Article head: title and meta left, the article's photograph right, both
     sitting on the same top edge. */
  .wines-article-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .wines-article-head__media { margin-top: 0; }
  /* The lead article spans the viewport: grey slab off the left edge, photograph
     off the right, copy still starting on the shell line. */
  .wines-insight-feature {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    align-items: stretch;
    margin-left: calc(var(--wines-bleed) * -1);
    gap: 0;
  }
  .wines-insight-feature__panel {
    display: flex;
    order: 1;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(24rem, 34vw, 32rem);
    padding: clamp(3rem, 5vw, 4.5rem) clamp(3rem, 5vw, 4.5rem) clamp(3rem, 5vw, 4.5rem) var(--wines-bleed);
  }
  .wines-insight-feature__media {
    order: 2;
    width: calc(100% + var(--wines-bleed));
    margin-right: calc(var(--wines-bleed) * -1);
  }
  .wines-insight-feature__media img { aspect-ratio: auto; }
  .wines-services-grid > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  /* Staggered columns. The reference sites never sit every block on the same
     baseline — the drop is what stops the grid reading as a spreadsheet. */
  .wines-services-grid > .e-con-inner > .wines-service-card:nth-child(3n + 2) { margin-top: clamp(2rem, 4vw, 4rem); }
  .wines-services-grid > .e-con-inner > .wines-service-card:nth-child(3n + 3) { margin-top: clamp(4rem, 8vw, 8rem); }
  .wines-delivery-layout > .e-con-inner { grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.85fr); align-items: start; }
  .wines-delivery__capability { margin-top: clamp(2rem, 5vw, 5rem); }
  .wines-delivery__list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Featured project media bleeds to the viewport edge on the outer columns. */
  .wines-projects-grid > .wines-project-card:nth-child(2) { margin-top: clamp(3rem, 6vw, 6rem); }
  /* Row gap well over the column gap. With both equal the cards ran together
     into one field of images and the index read as a contact sheet; the deeper
     horizontal channel is what makes each row land as a row. */
  .wines-projects-grid,
  .wines-project-archive-grid,
  .wines-insights-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2.5rem);
    row-gap: clamp(3rem, 5.5vw, 5rem);
  }
  /* Homepage Insights band: rail left, two articles at scale right. The
     three-across grid above is the index's; in the band's two-thirds column
     two-up is what lets the photographs carry the composition. */
  .wines-insights-split > .e-con-inner {
    grid-template-columns: minmax(15rem, 0.52fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .wines-home-insights .wines-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wines-process-item > .e-con-inner { grid-template-columns: 4.5rem minmax(12rem, 0.62fr) minmax(0, 1fr); align-items: baseline; gap: clamp(2rem, 4vw, 4rem); }
  /* Alternating full-bleed image edges: products runs off the left of the
     viewport, experience off the right. Asymmetry is the point — a contained
     image on both sides reads as a template. */
  .wines-products-layout > .e-con-inner { grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1fr); align-items: center; }
  /* Width is set explicitly as well as the negative margin: an Elementor image
     widget does not stretch to its grid track, so a negative margin alone only
     shifts the block instead of extending it to the viewport edge. */
  /* `max-width: none` is forced: Elementor applies `max-width: 100%` to image
     widgets, which silently clamps the widened box back to its grid track and
     cancels the bleed. Verified as the sole blocker before overriding. */
  .wines-products-layout > .e-con-inner > .wines-products-image {
    width: calc(100% + var(--wines-bleed));
    max-width: none !important;
    margin-left: calc(var(--wines-bleed) * -1);
  }
  .wines-products-image img { width: 100%; height: min(40rem, 52vw); }
  .wines-experience-layout > .e-con-inner { grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1fr); align-items: center; gap: clamp(4rem, 10vw, 10rem); }
  .wines-experience-layout > .e-con-inner > .wines-experience-image {
    order: 2;
    width: calc(100% + var(--wines-bleed));
    max-width: none !important;
    margin-right: calc(var(--wines-bleed) * -1);
  }
  .wines-experience-image img { width: 100%; }
  .wines-insights-category {
    display: grid;
    grid-template-columns: minmax(16rem, 0.62fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
    padding-block: 1.65rem;
  }
  .wines-insights-category h3 { margin-bottom: 0; }
  .wines-cta-layout > .e-con-inner,
  .wines-cta-layout:not(.e-con) { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; }
  .wines-footer__top { grid-template-columns: minmax(22rem, 1.4fr) repeat(3, minmax(8rem, 0.55fr)); gap: clamp(2rem, 5vw, 5rem); }
  .wines-footer__brand { grid-column: auto; }
  .wines-footer__bottom { grid-template-columns: 1fr auto; align-items: end; }
  .wines-footer__bottom > p { text-align: right; }
  .wines-project-single__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The plate cuts into the photograph's bottom edge, the way the hero
     overview panel cuts into the hero. Only when there is a photograph —
     without one the pull would drag the plate over the page head's hairline. */
  .wines-project-single__meta--overlap { margin-top: calc(clamp(2.5rem, 5vw, 4rem) * -1); }
  .wines-project-single__scope ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 1-2 rhythm: the first of every three photographs runs the full width and
     deeper, so the gallery reads as an edit rather than a contact sheet. */
  .wines-project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wines-project-gallery img { height: clamp(18rem, 28vw, 30rem); }
  .wines-project-gallery__item:nth-child(3n + 1) { grid-column: 1 / -1; }
  .wines-project-gallery__item:nth-child(3n + 1) img { height: clamp(26rem, 44vw, 44rem); }
}

@media (min-width: 1200px) {
  .wines-header__brand { width: 14.75rem; }
  .wines-nav__item > a { --wines-nav-gutter: 0.9rem; }
  .wines-header__cta { margin-left: 1.5rem; padding-inline: 1.45rem; }
  .wines-hero__inner { padding-bottom: 6.5rem; }
}

/* A short laptop viewport still has to hold the statement, its actions and the
   overview. This is desktop-only; the mobile panel remains in normal flow. */
@media (min-width: 900px) and (max-height: 740px) {
  .wines-hero__inner { padding-block: 2.5rem 4rem; }
  .wines-hero__overview { bottom: -1.5rem; }
  .wines-hero__overview > .e-con-inner { padding-block: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js .wines-reveal { opacity: 1; transform: none; }
  .js .wines-wipe img { clip-path: none; transform: none; }
  .js .wines-hero__inner { transform: none; }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .wines-nav__item:hover > .wines-submenu,
  .wines-nav__item:focus-within > .wines-submenu { clip-path: none; }
}