/* hawaagri build 124 */
/* ---------- Mriya Grotesk (live's display face) ----------
   Licensed, self-hosted on hawaagri.com. Drop the woff2 files into
   assets/fonts/ — see the README there. Falls back to DM Sans 900 until then. */

@font-face {
	font-family: "Mriya Grotesk";
	src: url("../fonts/MriyaGrotesk-Heavy.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Mriya Grotesk";
	src: url("../fonts/MriyaGrotesk-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/**
 * Our Story / Sustainability / Our Team.
 *
 * Values measured from the live pages: content container 1010px, headings in
 * DM Sans 900, body copy 18px/30px #9AA1A9, hero 45px/900 white over a
 * background photo.
 *
 * @package HawaAgri
 */

/* ---------- Shell ---------- */

.ha-page .ha-wrap {
	width: 100%;
	max-width: 1010px;
	margin-inline: auto;
	padding-inline: 15px;
}

.ha-page .ha-h2 {
	margin: 0 0 10px;
	font-family: "DM Sans", sans-serif;
	font-size: 40px;
	font-weight: 900;
	line-height: 52px;
	color: #000;
}

.ha-page .ha-h2--light { color: #fff; }

.ha-page p {
	margin: 0 0 18px;
	font-family: Ubuntu, sans-serif;
	font-size: 18px;
	line-height: 30px;
	color: #9AA1A9;
}

.ha-page p:last-child { margin-bottom: 0; }
.ha-page .ha-p--light { color: rgba(255, 255, 255, .88); }

/* ---------- Hero ---------- */

.ha-hero {
	position: relative;
	padding-block: 100px 105px;
	background-color: var(--wp--preset--color--brand-green-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Darken the banner photo to match live — text sits on top via z-index. */
.ha-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .38);
}

.ha-hero__title,
.ha-hero__inner,
.ha-crumbs {
	position: relative;
	z-index: 1;
}



.ha-hero__title {
	margin: 0;
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	font-size: 45px;
	font-weight: 900;
	line-height: 1.15;
	color: #fff;
	text-align: center;
}

.ha-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	color: rgba(255, 255, 255, .85);
}

.ha-crumbs a { color: #fff; text-decoration: none; }
.ha-crumbs a:hover { text-decoration: underline; }

.ha-crumbs i {
	width: 14px;
	height: 8px;
	border-top: 2px solid rgba(255, 255, 255, .8);
	border-right: 2px solid rgba(255, 255, 255, .8);
	transform: skewX(45deg) scaleY(.55);
}

/* ---------- Split rows ---------- */

.ha-sec {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.ha-split {
	display: grid;
	align-items: center;
}

/* Ratios and gutters taken straight from the live layout. */
.ha-split--roots     { grid-template-columns: 366fr 506fr; gap: 109px; }
.ha-split--mission   { grid-template-columns: 479fr 419fr; gap: 78px;  }
.ha-split--expertise { grid-template-columns: 409fr 501fr; gap: 66px;  }
.ha-split--mission2  { grid-template-columns: 514fr 307fr; gap: 155px; }
.ha-split--rev       { grid-template-columns: 531fr 396fr; gap: 78px;  }
.ha-split:not([class*="ha-split--"]) { grid-template-columns: 396fr 531fr; gap: 78px; }

.ha-fig { margin: 0; min-width: 0; }

/* Grid children must be allowed to shrink below their content size, or a
   large image forces the column wider than its track. */
.ha-split > * { min-width: 0; }

.ha-fig img,
.ha-split__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	object-fit: cover;
}

/* Aspect ratios taken from live so the crops match. */
.ha-split--roots     .ha-fig img { aspect-ratio: 506 / 338; }
.ha-split--mission   .ha-fig img { aspect-ratio: 479 / 342; }
.ha-split--expertise .ha-fig img { aspect-ratio: 501 / 358; }
.ha-split--mission2  .ha-fig img { aspect-ratio: 514 / 319; }

.ha-split--rev .ha-split__media { order: -1; }

.ha-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	object-fit: cover;
}

.ha-icon {
	display: block;
	width: 54px;
	height: auto;
	margin-bottom: 16px;
}

/* ---------- Full-width band ---------- */

.ha-band { text-align: center; }

/* Build 111: `> img`, not `img`.

   Unscoped, this rule reached EVERY image inside any element carrying
   `.ha-band` — and on the homepage that is the wrapper around Featured
   Products (`.ha-band--products`), Our Categories, Our Team, Featured Blog,
   the Google reviews and Our Clients. One class plus one element type (0,1,1)
   ties with `.ha-product__media img` in shop.css, and pages.css is enqueued
   after shop.css, so this rule won: every product photograph on the homepage
   was painted at 99% width, forced to the band's 1253/383 (3.27:1) ratio and
   cropped to it by `object-fit: cover`. Measured before this change, at
   454px: image box 299x91 with `object-fit: cover` on a 298x134 file — the
   top and bottom of every product sliced off. The client logos in
   `.ha-band--clients` were being given the same 3.27:1 box, which is what
   made those marks small and marooned in white space.

   The two real band photographs — page-ourstory and
   page-agriculture-engineering — are both direct children of their
   `<section class="ha-band">`, so the child combinator hits exactly them and
   nothing else. Same declarations, same look, no leak.

   (Build 110 patched the review avatars out of this rule one at a time, at
   three classes. That was the symptom; this is the cause.) */
.ha-band > img {
	display: block;
	width: 99%;
	max-width: 1253px;
	aspect-ratio: 1253 / 383;
	height: auto;
	margin-inline: auto;
	border-radius: 10px;
	object-fit: cover;
}

/* ---------- Tick list ---------- */

.ha-ticks { margin: 4px 0 0; padding: 0; list-style: none; }

.ha-ticks li {
	position: relative;
	margin: 0 0 14px;
	padding-left: 32px;
	font-family: Ubuntu, sans-serif;
	font-size: 18px;
	line-height: 30px;
	color: #9AA1A9;
}

.ha-ticks li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-green);
}

/* ---------- Stats ---------- */
/* Live has a parchment/paper-texture band behind the counters (Our Story). */

.ha-stats {
	position: relative;
	/* Live uses a real aged-paper photo here, not a CSS gradient. */
	background-color: #164333;
	background-image: url('/wp-content/uploads/2024/08/049aa3fd47d409e4c79bc463a70caf2a.jpg');
	background-position: 0 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.ha-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ha-stats__grid li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.ha-stat__num {
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	font-size: 45px;
	font-weight: 700;
	line-height: 1.35;
	color: #164333;
}

/* Live styles the first counter differently from the other three. */
.ha-stat__num--first {
	font-size: 48px;
	font-weight: 900;
	color: #333;
}

.ha-stat__label {
	font-family: Ubuntu, sans-serif;
	font-size: 18px;
	color: #333;
}

/* ---------- Vision ---------- */

.ha-vision,
.ha-sec--vision {
	background-color: var(--wp--preset--color--brand-green-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.ha-vision__inner { text-align: center; }

.ha-vision__inner .ha-h2 { text-align: center; }

.ha-vision__inner p {
	max-width: 672px;
	margin-inline: auto;
	color: rgba(255, 255, 255, .92);
	text-align: center;
}

/* ---------- Closing ---------- */

.ha-closing {
	/* Same aged-paper photo as the stats band, tiled at natural size.
	   Vertical padding only - on live the 246px side gutters sit on an
	   inner wrapper, so putting them on the full-bleed section here
	   overflowed the viewport and shoved the text right. */
	padding-block: 25px 37px;
	background-color: #E9DCC2;
	background-image: url('/wp-content/uploads/2024/08/049aa3fd47d409e4c79bc463a70caf2a.jpg');
	background-position: 0 0;
	background-size: auto;
	background-repeat: repeat;
}

.ha-closing p {
	max-width: 738px;
	margin-inline: auto;
	text-align: center;
	color: #000;
	font-size: 18px;
	line-height: 30px;
}

/* ---------- Sustainability: Greeneries band ---------- */
/* Dedicated olive treatment — was incorrectly reusing .ha-sec--vision's
   dark Vision.png background, which belongs to the Our Story page. */

.ha-sec--olive {
	/* Live DOES use Vision.png for this band - verified against
	   hawaagri.com/sustainability. The colour is only a fallback. */
	background-color: #8A9873;
	background-image: url('/wp-content/uploads/2024/08/Vision.png');
	background-position: 0 0;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Live sets this band's copy at 16px/30px, narrower than body default. */
.ha-sec--olive .ha-split__text p {
	font-size: 16px;
	line-height: 30px;
}

/* ---------- Team ---------- */

.ha-team {
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

.ha-team__head { max-width: 572px; margin-bottom: 42px; }

.ha-rule {
	display: block;
	width: 64px;
	height: 3px;
	margin-bottom: 16px;
	background: var(--wp--preset--color--brand-green);
	border-radius: 2px;
}

.ha-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ha-team__card {
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(154, 161, 169, .2);
	border-radius: 10px;
	transition: transform .25s ease, box-shadow .25s ease;
}

.ha-team__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 14, 40, .1);
}

.ha-team__photo { background: transparent; }

.ha-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
}

.ha-team__info { padding: 16px 14px 20px; text-align: center; }

.ha-team__name {
	margin: 0 0 4px;
	font-family: Ubuntu, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: #164333;
}

.ha-team__role {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #9AA1A9;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.ha-page .ha-h2 { font-size: 32px; line-height: 42px; }
	.ha-hero__title { font-size: 38px; }
	.ha-team__grid { grid-template-columns: repeat(3, 1fr); }
	.ha-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.ha-team__name { font-size: 20px; }
}

@media (max-width: 781px) {
	.ha-hero { padding-block: 56px 60px; }
	.ha-hero__title { font-size: 30px; }
	.ha-page .ha-h2 { font-size: 26px; line-height: 34px; }
	.ha-page p, .ha-ticks li { font-size: 16px; line-height: 27px; }

	.ha-split,
	.ha-split--rev,
	.ha-split--roots,
	.ha-split--mission,
	.ha-split--expertise,
	.ha-split--mission2,
	.ha-split:not([class*="ha-split--"]) { grid-template-columns: 1fr; gap: 26px; }

	.ha-split .ha-fig { order: -1; }
	.ha-split__media, .ha-split--rev .ha-split__media { order: -1; }

	.ha-sec { padding-block: 44px !important; }
	.ha-team { padding-block: 40px 56px !important; }

	.ha-team__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.ha-team__name { font-size: 17px; }
	.ha-team__role { font-size: 13px; }
	.ha-team__head { margin-bottom: 26px; }

	.ha-stat__num { font-size: 34px; }
	.ha-closing p { text-align: left; }
}

@media (max-width: 460px) {
	.ha-team__grid { grid-template-columns: 1fr; }
	.ha-stats__grid { grid-template-columns: 1fr; }
}


/* Safety net: nothing inside a content page may exceed its container. */
.ha-page img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Services pages (Maintenance / Agriculture Engineering / Sales)
   ========================================================================== */

/* Full-width intro above the first split. Live: h3 31.2px/700 #164333,
   body 16px #797F7D. */
.ha-lead {
	max-width: 976px;
	margin-inline: auto;
	margin-bottom: 44px;
}

.ha-lead h3 {
	margin: 0 0 16px;
	font-family: Ubuntu, sans-serif;
	font-size: 31.2px;
	font-weight: 700;
	line-height: 40.56px;
	color: #333;
}

.ha-lead p {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-size: 16px;
	line-height: 30.4px;
	color: #797F7D;
}

/* Service splits sit closer to even than the Our Story rows. */
.ha-split--svc     { grid-template-columns: 442fr 482fr; gap: 61px; }
.ha-split--svc-rev { grid-template-columns: 482fr 442fr; gap: 61px; }

/* No forced ratio here - live lets each service image keep its own
   proportions (4:3, 16:9 and 3:2 all appear across these pages). */
.ha-split--svc .ha-fig img,
.ha-split--svc-rev .ha-fig img { aspect-ratio: auto; }

.ha-ticks strong {
	color: #164333;
	font-weight: 700;
}

.ha-ticks--light li { color: rgba(255, 255, 255, .9); }
.ha-ticks--light strong { color: #fff; }

.ha-ticks--light li::before {
	background: #fff;
}

.ha-outro {
	margin-top: 20px;
	font-weight: 500;
	color: #164333;
}

/* ---------- Mobile: one clean column everywhere ---------- */

@media (max-width: 781px) {
	.ha-split--svc,
	.ha-split--svc-rev {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ha-lead { margin-bottom: 28px; }
	.ha-lead h3 { font-size: 22px; line-height: 1.35; }
	.ha-lead p { font-size: 15px; line-height: 26px; }

	.ha-ticks li { margin-bottom: 12px; padding-left: 28px; }

	/* Scoped to the inner pages.

	   Unscoped, this also matched every homepage section: `.ha-band` is the
	   class on the front page's bands as well as on the service pages' full-bleed
	   rows, and `!important` beat all six of the homepage's own mobile paddings in
	   `home.css`. Below 781px every homepage section therefore rendered with zero
	   padding top and bottom and the sections butted straight into one another.
	   Measured at 390px before this change: every gap between sections was 0px.

	   `.ha-page` is carried by page-ourstory and page-agriculture-engineering,
	   the two templates this rule was written for. The front page is `.ha-main`
	   without `.ha-page`, so it now keeps its own spacing. */
	.ha-page .ha-band { padding-block: 0 !important; }
	.ha-band > img { width: 100%; border-radius: 8px; }

	.ha-hero { padding-block: 48px 52px !important; }
}

/* ==========================================================================
   FIX: sections were not running full width
   --------------------------------------------------------------------------
   <main> is a block group, so core applied
     .is-layout-constrained > :where(...) { max-width: <content-size>; margin-inline: auto }
   plus root padding from :where(.wp-block-group.has-background). Every section
   therefore sat inside ~48px gutters. Sections are full-bleed; only .ha-wrap
   constrains the content inside them.
   ========================================================================== */

main.ha-page {
	max-width: none !important;
	width: 100%;
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}

main.ha-page > section,
main.ha-page > .ha-hero,
main.ha-page > .ha-band,
main.ha-page > .ha-stats,
main.ha-page > .ha-vision,
main.ha-page > .ha-team,
main.ha-page > .ha-closing {
	max-width: none !important;
	width: 100%;
	margin-inline: 0 !important;
}

/* The band image is the one element that is meant to sit just inside the
   viewport edge, matching live's 1265px at a 1265px content width. */
main.ha-page > .ha-band {
	padding-inline: 0;
}

/* ---------- Our Brands: logo wall ---------- */
/* .ha-logo-grid on the home page gets flex/gap from a Gutenberg flex Group
   block; used as a plain <ul> here it needs its own display + wrap. */

.ha-logo-grid--brands {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-width: 1243px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.ha-logo-grid--brands .ha-logo-grid__item {
	width: 260px;
	height: 100px;
	padding: 24px 13px;
	margin: 0 12px 12px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid rgba(154, 161, 169, 0.24);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 14, 40, 0.05);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ha-logo-grid--brands .ha-logo-grid__item:hover {
	box-shadow: 0 16px 34px rgba(0, 14, 40, 0.1);
	transform: translateY(-4px);
}

/* Logos may now carry an optional link, so the anchor has to behave like the
   image it wraps rather than an inline box. */
.ha-logo-grid--brands .ha-logo-grid__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.ha-logo-grid--brands .ha-logo-grid__item img {
	width: 96px;
	max-width: 100%;
	max-height: none;
	height: auto;
	filter: none;
	opacity: 1;
}

@media (max-width: 1024px) {
	.ha-logo-grid--brands .ha-logo-grid__item { width: calc(33.333% - 12px); }
}

@media (max-width: 600px) {
	.ha-logo-grid--brands .ha-logo-grid__item { width: calc(50% - 12px); }
}


/* ===================================================================
   LIVE PARITY OVERRIDES  —  append to the END of
   /wp-content/themes/hawaagri/assets/css/pages.css

   Matches hawaagri.com. Each block notes what it corrects and why.
   Selectors are intentionally specific enough to beat the existing
   .ha-page rules above, without using !important.
   =================================================================== */


/* -------------------------------------------------------------------
   1. SECTION HEADINGS
   Live wraps every section heading in a .title-part1 span, which
   switches the face to Mriya Grotesk with 1:1 leading and #333.
   The theme was rendering DM Sans / 52px leading / #000.
   ------------------------------------------------------------------- */

.ha-page .ha-h2 {
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	line-height: 1;
	letter-spacing: normal;
}

/* Dark-background sections keep their light heading (e.g. Our Team) */
.ha-page .ha-h2:not(.ha-h2--light) {
	color: #333;
}


/* -------------------------------------------------------------------
   2. HERO
   Live renders the title at 45px with 1.05 leading, and pads the
   title container 15px top/bottom, producing a 282px hero band.
   The theme produced 1.15 leading and a 252px band.
   ------------------------------------------------------------------- */

.ha-page .ha-hero__title {
	line-height: 1.05;
}

.ha-page .ha-hero__inner,
.ha-page .ha-hero > .ha-wrap {
	padding-block: 15px;
}


/* -------------------------------------------------------------------
   3. BODY COPY
   Live renders Ubuntu 18px/30px with 0.18px tracking.
   ------------------------------------------------------------------- */

.ha-main .ha-sec p {
	letter-spacing: 0.01em;
}


/* -------------------------------------------------------------------
   4. CONTENT WIDTH
   Live's container is 1230px (1200px content band after 15px
   gutters). The theme shipped 1010px, which made every split
   column proportionally narrow.
   .ha-wrap is only used inside <main>, never the header or footer.
   ------------------------------------------------------------------- */

.ha-page .ha-wrap {
	max-width: 1230px;
}


/* -------------------------------------------------------------------
   5. BRAND GRID (Our Brands)
   The shared .ha-logo-grid base sets gap:40px, which overflowed the
   row and collapsed the brand grid from 4 columns to 3.
   border-box keeps the 260px card width matching live exactly.
   ------------------------------------------------------------------- */

.ha-logo-grid--brands {
	gap: 0;
}

.ha-logo-grid--brands .ha-logo-grid__item {
	box-sizing: border-box;
}


/* -------------------------------------------------------------------
   6. SPLIT SECTIONS (Sustainability)
   Live uses a fixed 560x400 (7:5) image that does NOT fill its
   column: image-left sections sit flush to the content edge,
   image-right sections align to the far edge.
   Confined to >=1025px so the theme's stacked mobile rules still win.
   ------------------------------------------------------------------- */

@media (min-width: 1025px) {

	.ha-page .ha-split__media img {
		max-width: 560px;
		aspect-ratio: 7 / 5;
		object-fit: cover;
	}

	/* Image-right sections push the image to the far content edge.
	   Aligned on the <img> itself — shrinking the wrapper would
	   collapse it, since the image is width:100% of that wrapper. */
	.ha-page .ha-split:not([class*="ha-split--"]) .ha-split__media img {
		margin-inline-start: auto;
	}
}


/* -------------------------------------------------------------------
   7. TEAM SECTION
   The team grid sits on a dark olive photo; live renders the intro
   copy white to match the (light) headings.
   ------------------------------------------------------------------- */

.ha-team .ha-team__head p {
	color: #fff;
}

/* Stats band leading matches live: figures use normal leading (57px box
   at 48px Mriya), labels 25px. The theme's 1.35/1.6 made the band short. */
.ha-stats .ha-stat__num { line-height: normal; }
.ha-stats .ha-stat__label { line-height: 25px; }

/* Team intro copy is 16px/25px on live, not the 18px/30px body default. */
.ha-team .ha-team__head p {
	font-size: 16px;
	line-height: 25px;
}

/* ==========================================================================
   Global container correction.

   `.ha-page .ha-wrap` was `width:100%` + `padding-inline:15px` with no
   border-box, so its outer width was always viewport + 30px. On desktop the
   overflow fell outside the visible area and went unnoticed; on mobile it
   produced 16px of horizontal scroll on every page built from a .ha-page
   template (Our Story, Sustainability, Our Team, Our Brands, Maintenance,
   Agriculture Engineering, After Sales).

   max-width is raised to 1270px so that 1270 - (20 + 20) leaves the content
   column at exactly 1230px — identical to before. Desktop is unchanged;
   verified at 1600px.

   The gutter also moves 15px -> 20px to match the root padding used by the
   block templates, so every page now has the same mobile margin.
   ========================================================================== */

.ha-page .ha-wrap {
	box-sizing: border-box;
	max-width: 1270px;
	padding-inline: 20px;
}

/* ==========================================================================
   Mobile typography consistency.

   Measured across staging at 390px, the page templates had drifted apart:

     Our Story / Sustainability / Our Team   h1 30   h2 26   body 16
     Our Brands                              h1 30   h2 38   body 16
     Contact Us / Careers                    h1 32   h2 26

   The defect is Our Brands: its intro heading carries an inline
   font-size:38px, which never scales down, so a 38px heading rendered on a
   390px screen. The h1 spread of 30 vs 32 is levelled at the same time.

   Everything here is inside a mobile media query, so the desktop design is
   untouched.
   ========================================================================== */

@media (max-width: 767.98px) {

	main.ha-main h1 {
		font-size: 30px;
		line-height: 34px;
	}

	/* The inline style on the Our Brands intro heading can only be beaten
	   with !important; the attribute selector limits this to headings that
	   actually carry one. */
	main.ha-main .ha-h2[style] {
		font-size: 26px !important;
		line-height: 32px !important;
	}

	/* Body copy floor for plain template prose. Component text keeps its own
	   sizing — the guards skip anything carrying a theme component class, so
	   card, product and footer text are untouched. */
	main.ha-main :is(p, li):not([class*="ha-"]):not([class*="hax-"]):not([class*="wp-block-post"]) {
		font-size: 16px;
		line-height: 26px;
	}
}


/* ==========================================================================
   OUR TEAM — data-driven rebuild.

   The member cards used to be hand-written markup inside
   templates/page-our-team.html; they now come from the `ha_member` post type
   via [hawaagri_team_page], the same source the homepage carousel reads. The
   rules below cover what the old inline styles and hard-coded markup were
   doing, plus four mismatches against the live design.
   ========================================================================== */

/* 1. Band background.

   Each group renders its own <section class="ha-team">. Only the first one
   used to carry the background photo, so "Staff Members" — a white heading —
   sat on the page's white background and read as missing text entirely.

   The olive is now a background-COLOR on every band, with the photo layered
   on top. The colour is the same #909F7C the homepage team strip uses, and it
   averages within three points of the photo itself, so the two bands read as
   one continuous field even though the texture restarts between them. It also
   means a band is never white, whatever happens to the image. */

.ha-team {
	padding-block: 28px 126px;
	background-color: #909F7C;
}

/* 2. Section heading.

   Live sets 40px/52px with -1.2px tracking; the theme's 40px/40px ran tight
   and lost the tracking. Scoped to .ha-team so other .ha-h2 headings are
   untouched. */

.ha-page .ha-team .ha-h2 {
	line-height: 52px;
	letter-spacing: -1.2px;
	margin-bottom: 10px;
}

/* 3. Portraits were being cropped.

   `aspect-ratio:1/1` + `object-fit:cover` forced every photo into a square
   and cut foreheads and chins off — the portraits are ~802x818 with the
   subject filling the frame, so there was nothing to spare. Live never crops:
   it drops the image into a fixed 200px box, padded, and lets it size to its
   own aspect ratio. That is what this reproduces.

   The card background carries through instead of the old #F6F7F5 tint, which
   only existed to hide the letterboxing that cover was avoiding. */

/* Same masked portrait as the homepage strip: square-sided at the top, a true
   semicircle at the bottom cutting the shoulders away on an arc. The page was
   still showing raw cut-outs in a padded 200px box, which is why the two
   sections did not read as the same design.

   With aspect-ratio locked at 112/170 a 33% vertical radius always equals half
   the width, so the arc stays circular at every column count. */

.ha-team__photo {
	box-sizing: border-box;
	width: 150px;
	max-width: 56%;
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 24px auto 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border-radius: 0 0 50% 50% / 0 0 50% 50%;
}

.ha-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
	transform-origin: 50% 100%;
	transition: transform .22s cubic-bezier(.4, 0, .6, 1);
}

.ha-team__card:hover .ha-team__photo img,
.ha-team__card:focus-within .ha-team__photo img {
	transform: scale(1.045);
	transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}

/* 4. Card resting state.

   Live carries a permanent lift; the theme only applied one on hover, so the
   cards sat flat against the olive. */

.ha-team__card {
	box-shadow: 0 10px 30px rgba(0, 14, 40, .05);
}

/* 5. Name and role.

   `.ha-team__role` (0,1,0) was being beaten by `.ha-page p` (0,1,1), so the
   role never got its own styling and inherited 18px/30px grey body copy.
   Live renders it 16px/24px in the brand light green. The extra class raises
   specificity above the element selector without needing !important. */

.ha-team__info {
	padding: 0 14px 20px;
}

.ha-page .ha-team__name {
	margin: 12px 0 8px;
}

.ha-page .ha-team__role {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #8BC53F;
}

/* 6. Responsive.

   The photo box shrinks with the card so portraits never overflow or leave a
   deep empty well under them on narrow screens. */

@media (max-width: 1024px) {
	.ha-team__photo { width: 138px; }
}

@media (max-width: 781px) {
	.ha-team { padding-block: 40px 56px; }
	.ha-team__photo { width: 122px; margin-top: 18px; }
	.ha-page .ha-team .ha-h2 { line-height: 34px; letter-spacing: -.6px; }
	.ha-page .ha-team__name { margin: 10px 0 6px; }
	.ha-page .ha-team__role { font-size: 14px; line-height: 21px; }
	.ha-team__info { padding: 0 10px 16px; }
}

@media (max-width: 460px) {
	.ha-team__photo { width: 150px; }
}


/* ==========================================================================
   SERVICE PAGES — Maintenance / Agriculture Engineering / Sales — build 83
   --------------------------------------------------------------------------
   The three service templates each carried their own hand-written
   `padding-block` on every section (90/80, 54/50, 25/25, 25/60 …), so the
   vertical rhythm changed from one service to the next and, within a page,
   from one row to the next. Those inline values are gone from the templates
   and the rhythm lives here, on `.ha-page--service`, which the three
   templates now carry on <main>.
   ========================================================================== */

/* --- 1. Intro: headline and subtext centred ------------------------------ */

.ha-page--service .ha-lead {
	text-align: center;
	max-width: 860px;
	margin-bottom: 40px;
}

/* The headline and its subtext are one unit: 12px apart, not 16, and the
   paragraph is narrower than the headline so it centres as a block rather
   than running the full column width. */
.ha-page--service .ha-lead h3 {
	margin: 0 0 12px;
	line-height: 1.3;
}

.ha-page--service .ha-lead p {
	margin: 0 auto;
	max-width: 720px;
}

/* --- 2. Section titles are subtitles ------------------------------------- */

/* The intro headline is 31.2px and the section headings under it were 40px at
   weight 900, so every title outranked the headline it was supposed to sit
   beneath. They are now a clear step below it, and the tracking-normalising
   rule further up this file no longer has a 52px line-height to fight. */

.ha-page--service .ha-h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

/* The intro pair gets the same treatment: the headline and its paragraph were
   12px apart, which is tight for a 31px headline. */
.ha-page--service .ha-lead h3 { margin-bottom: 18px; }

/* SUPERSEDED — build 91.

   Build 83 read "no unnecessary spacing between the title and subtitle" as
   "close the gap entirely": the title carried an 8px bottom margin and
   whatever followed it was pulled flush with `margin-top: 0`. That is the
   crowding now being reported, and it was my over-correction rather than a
   value taken from live.

   Live's own hierarchy, from its heading structure: the intro headline and
   every section heading are the SAME level (all H2). The intro reads as a
   headline only because it is centred and full-width. So the three levels on
   these pages are heading -> body copy -> tick list, and each needs a gap
   proportional to its type size rather than a flush join.

   The gaps below are set from the type: the heading is 26px, so 18px beneath
   it is about 0.7 of its size; body copy is 18px/30px, so 20px beneath a
   paragraph is two thirds of a line. That gives a clear three-step hierarchy
   without inventing spacing that live does not have. */

.ha-page--service .ha-h2 + p,
.ha-page--service .ha-h2 + ul,
.ha-page--service .ha-h2 + .ha-ticks {
	margin-top: 18px;
}

.ha-page--service .ha-ticks { margin-top: 18px; }

/* A paragraph introducing a tick list still belongs to that list, but not
   flush against it. */
.ha-page--service .ha-sec p + .ha-ticks { margin-top: 20px; }

/* The tick items themselves were the other half of the crowding: three
   bullets of two lines each, 12-16px apart, read as one block of text. */
.ha-page--service .ha-ticks li { margin-bottom: 18px; }
.ha-page--service .ha-ticks li:last-child { margin-bottom: 0; }

/* The closing line under a list is a separate thought. */
.ha-page--service .ha-outro { margin-top: 26px; }

/* --- 3. Split alignment --------------------------------------------------

   This is the alignment fault. `.ha-split` centres its two columns against
   each other, and the service images are the one place in the theme with no
   forced aspect ratio — each photo keeps its own proportions. So the text
   column floated to the middle of whatever height its photo happened to be,
   and because the rows alternate sides, consecutive titles started at
   different heights down the page with no edge shared between them.

   Top alignment gives every title the same starting line as the top of its
   image. The 4px nudge accounts for the cap-height gap above a 26px heading,
   so the title's first stroke lines up with the image edge rather than its
   line box. */

.ha-page--service .ha-split--svc,
.ha-page--service .ha-split--svc-rev {
	align-items: start;
}

.ha-page--service .ha-split--svc > div:not(.ha-fig),
.ha-page--service .ha-split--svc-rev > div:not(.ha-fig) {
	padding-top: 4px;
}

/* --- 4. Section rhythm ---------------------------------------------------- */

.ha-page--service .ha-sec { padding-block: 56px; }

/* The first section carries the intro, so it opens wider under the hero and
   closes tight against the row below it. */
.ha-page--service .ha-hero + .ha-sec { padding-block: 72px 44px; }

/* The last row before the footer needs its own breathing room. */
.ha-page--service .ha-sec:last-child { padding-bottom: 88px; }

/* The full-bleed photo band is a divider between two rows, not a section. */
.ha-page--service .ha-band { padding-block: 10px; }

/* The vision band paints its own background, so its padding is the band's
   inner margin rather than a gap between sections. */
.ha-page--service .ha-sec--vision { padding-block: 64px; }

/* --- 5. Mobile ----------------------------------------------------------- */

@media (max-width: 781px) {
	.ha-page--service .ha-lead { margin-bottom: 26px; }
	.ha-page--service .ha-h2 { font-size: 21px; line-height: 1.3; }

	/* One column: the image is above the text, so the top nudge would read as
	   a gap under the photo. */
	.ha-page--service .ha-split--svc > div:not(.ha-fig),
	.ha-page--service .ha-split--svc-rev > div:not(.ha-fig) {
		padding-top: 0;
	}
}


/* ==========================================================================
   BLOG ARCHIVE (/blog-grid/) — build 87
   --------------------------------------------------------------------------
   Reproduces the live page rather than the block-theme default the staging
   copy had been carrying.

   Live shows ONE large feature card on the left and THREE compact items
   stacked on the right, each with a Read More link, no dates, no categories,
   no author line and no pagination. The staging template was rendering a
   uniform nine-post, three-column core query grid with dates and excerpts on
   every card — a different component entirely.

   The layout live uses is one this theme already builds, for the homepage
   "Featured Blog" band: `[hawaagri_blog]`, i.e. `.hax-blog` in `home.css`.
   Measured against the live screenshot at 1:1, its proportions were already
   right — feature and list columns 705px and 704px inside a 1439px content
   band, a 31px gutter, and a 218px thumbnail. Scaled to live's 1200px
   container that is 587 / 26 / 182 against the component's 580 / 30 / 180.
   So the archive now renders that component instead of a second, divergent
   blog layout, and no card styling is duplicated here.

   Everything below is scoped to `.ha-page--blog`, which only this template
   carries. The homepage band, the single post, the header and the footer are
   untouched.
   ========================================================================== */

/* The title band. Live puts a breadcrumb under a centred "Blog" heading, and
   carries no banner photograph — the only images on the page are the header
   logos and the four post thumbnails — so `.ha-hero` shows its own brand-green
   background here rather than a picture. */
.ha-page--blog .ha-crumbs {
	justify-content: center;
	margin-top: 14px;
}

/* The archive band. The feature card and the list items carry their own white
   panels and shadows, so this section only owns the space around them. */
.ha-blogarchive {
	padding-block: 64px 88px;
}

/* `.hax-blog` is a grid in its own right; inside `.ha-wrap` it inherits the
   1230px content column the rest of the site uses. */
.ha-page--blog .hax-blog {
	margin-inline: auto;
}

@media (max-width: 781px) {
	.ha-blogarchive { padding-block: 40px 56px; }
}



/* ==========================================================================
   BLOG ARCHIVE — feature card, measured off the live screenshot — build 89
   --------------------------------------------------------------------------
   The screenshot supplied for this page is unscaled at its top edge: rows 0-29
   are pure white and the feature photograph starts at row 30, so the card's
   own top edge is in frame and every distance below is measured, not inferred.

   Absolute pixel values still cannot be read off a screenshot of unknown
   scale — but RATIOS inside one image are scale-free. So every value here was
   taken as a proportion of the live feature card's width (706px in the image)
   and re-expressed against ours (600px at a 1230px container), a factor of
   0.8499. Type sizes come from the ratio of each string's inked width to the
   card width, which is likewise independent of capture scale.

   live (of 706px card)          ->  ours (of 600px card)
     photo aspect  706/381 = 1.853   1.853   (component ships 2.283)
     body side padding        46     39
     photo bottom -> title    59     50
     title ink -> excerpt ink 97     82
     excerpt line pitch       38     32
     excerpt ink -> link ink  39     33
     title ink width      0.7096     -> 35px  (component ships 26px)
     excerpt line pitch   0.0538     -> 20px/32px
     link ink width       0.1898     -> 23px  (component ships 15px)

   MOVED IN BUILD 91. These values now live on the component itself, in
   `home.css`, because the client reports the homepage blog band as crowded too
   and live uses the same card design in both places. Keeping one copy means
   the two pages cannot drift apart again. Only genuinely archive-specific
   rules remain in this file.
   ========================================================================== */



/* --- BLOG ARCHIVE — list cards, measured the same way -------------------- */

/* live list card is 704px wide in the screenshot; ours is 600 (k = 0.8523).
   The thumbnail does NOT stretch to the card's height on live — it is 218x171
   inside a card about 202 tall, so a strip of white sits below it and the
   Read More drops past its bottom edge. The shared component stretches the
   thumbnail instead, which is what makes these cards read as short and
   letterbox-shaped next to live's.

     live (of a 704px card)          ->  ours (of a 600px card)
       thumbnail            218x171     186x146, top-aligned
       card height              232     198
       body left padding         22     19
       card top -> title ink     59     50
       title ink -> link ink     96     82
       link ink -> card bottom   31     26
       title ink width       0.6165     -> 24px  (component ships 20px)
       link ink width        0.1861     -> 23px  (component ships 15px) */

/* Read More.

   Sampled from the glyph cores in the live screenshot, the link is #8BC53F —
   the light brand green — in both the feature and the list cards. The
   component ships #4C8C2B, which is why the staging links read darker. The
   title (#333333) and the excerpt (#9AA1A9) already match live exactly. */




/* ==========================================================================
   SINGLE BLOG POST — matched to the live article. Build 104.
   --------------------------------------------------------------------------
   Reference: https://www.hawaagri.com/2026/05/16/agricultural-consultant/

   Everything below is scoped under `.ha-post`, the class the single-post
   template puts on <main>. No other template carries it, so nothing else on
   the site can pick these rules up.

   Measured on the reference at a 1280px viewport (1265px of page inside the
   scrollbar):

     hero section     1265 x 706, padding 256 / 288
     hero background  featured image, cover, 50% 100%, on black
     hero overlay     rgba(0,0,0,.5) at opacity .73  ->  rgba(0,0,0,.365)
     title            Ubuntu 60.8 / 79.04, 700, #fff, centred
     date             Ubuntu 16 / 27, #9AA1A9, centred, 28px below the title
     content column   1146 wide, starting 50px below the hero
     paragraph        Ubuntu 18 / 33, #9AA1A9, margin 0 0 28px
     h2               30 / 34, 700, #1D1D1B, margin 30px 0 16px
     h3               22 / 28.6, 700, #333, margin 30px 0 16px
     list item        Ubuntu 18 / 33, #9AA1A9, margin 0 0 10px, indent 10px
     related heading  40, 900, #333, margin 12px 0 50px
     related title    20 / 28, 900, #333
     related meta     Ubuntu 14 / 26.6, #797F7D

   The reference sets its headings in Mriya Grotesk. This theme already names
   that face first with DM Sans behind it (see `.ha-hero__title` above), so the
   same stack is used here: identical where the font is installed, and falling
   back to the site's own heading face where it is not.
   ========================================================================== */

/* ---------- Hero ---------- */

.ha-post .ha-posthero {
	position: relative;
	padding: 256px 20px 288px;
	background-color: #000;
	background-position: 50% 100%;
	background-size: cover;
	background-repeat: no-repeat;
}

/* The two stacked alphas of the reference (a .5 black painted at .73 opacity)
   multiply out to this one value. */
.ha-post .ha-posthero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .365);
}

/* No featured image set: the brand green stands in, so the white title never
   lands on a white page. */
.ha-post .ha-posthero--plain {
	background-color: var(--wp--preset--color--brand-green-dark, #164333);
}

.ha-post .ha-posthero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 1146px;
	/* The reference's hero is 706px tall against the 678px that the padding
	   and the two lines of type add up to on their own. The 28px difference is
	   leading its builder puts around the block; stating it here lands the
	   title 271px below the top of the hero, which is where it sits on the
	   reference. */
	padding: 15px 0 13px;
	margin: 0 auto;
	text-align: center;
}

.ha-post .ha-posthero__title {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-size: 60.8px;
	font-weight: 700;
	line-height: 79.04px;
	color: #fff;
	text-align: center;
}

.ha-post .ha-posthero__date {
	display: block;
	margin-top: 28px;
	font-family: Ubuntu, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 27px;
	color: #9AA1A9;
	text-align: center;
}

/* ---------- Article body ---------- */

.ha-post .ha-post__body {
	padding: 50px 0 90px;
	background: #fff;
}

/* 1170 of box with 12px gutters is a 1146px column, which is the reference's
   measured content width. `box-sizing` is stated because this element inherits
   `content-box` from the block editor's layout styles, and without it the
   column comes out 1170 wide and starts 12px to the left. */
.ha-post .ha-post__wrap {
	box-sizing: border-box;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 12px;
}

/* The column is set here, so neither the post-content wrapper nor the block
   editor's constrained layout may narrow it again or re-add the root padding.
   `theme.json` declares a 1200px content size and root-padding-aware
   alignments, both of which would otherwise apply inside this wrapper. */
.ha-post .ha-post__wrap > *,
.ha-post .ha-post__wrap .entry-content,
.ha-post .ha-post__wrap .entry-content > * {
	max-width: none;
}

.ha-post .ha-post__wrap .entry-content {
	padding-left: 0;
	padding-right: 0;
}

.ha-post .ha-post__wrap p {
	margin: 0 0 28px;
	font-family: Ubuntu, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 33px;
	color: #9AA1A9;
}

.ha-post .ha-post__wrap p:last-child { margin-bottom: 0; }

.ha-post .ha-post__wrap h2 {
	margin: 30px 0 16px;
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 34px;
	color: #1D1D1B;
}

.ha-post .ha-post__wrap h3 {
	margin: 30px 0 16px;
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 28.6px;
	color: #333;
}

.ha-post .ha-post__wrap h4,
.ha-post .ha-post__wrap h5,
.ha-post .ha-post__wrap h6 {
	margin: 30px 0 16px;
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: #333;
}

/* The reference indents list text by 10px from the column edge and hangs the
   markers outside it. */
.ha-post .ha-post__wrap ul,
.ha-post .ha-post__wrap ol {
	margin: 0 0 28px;
	padding-left: 10px;
}

.ha-post .ha-post__wrap li {
	margin: 0 0 10px;
	font-family: Ubuntu, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 33px;
	color: #9AA1A9;
}

/* The reference sets the inline lead-ins solid dark against the grey run of
   body copy; without this they would only differ in weight. */
.ha-post .ha-post__wrap strong,
.ha-post .ha-post__wrap b { color: #1D1D1B; }

.ha-post .ha-post__wrap a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ha-post .ha-post__wrap a:hover { color: #8BC53F; }

/* Content images sit at their natural size, centred, with square corners —
   as on the reference, where a 600x403 file draws at 600x404. */
.ha-post .ha-post__wrap img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

.ha-post .ha-post__wrap figure {
	margin: 0 0 28px;
	text-align: center;
}

.ha-post .ha-post__wrap figure img { display: inline-block; }

.ha-post .ha-post__wrap figcaption {
	margin-top: 10px;
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	line-height: 26.6px;
	color: #797F7D;
	text-align: center;
}

.ha-post .ha-post__wrap blockquote {
	margin: 0 0 28px;
	padding-left: 20px;
	border-left: 3px solid #8BC53F;
}

/* ---------- Related posts ---------- */

.ha-related {
	margin-top: 60px;
}

.ha-related__title {
	margin: 12px 0 50px;
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	font-size: 40px;
	font-weight: 900;
	line-height: 1.2;
	color: #333;
}

.ha-related__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ha-related__item { min-width: 0; }

.ha-related__thumb {
	display: block;
	margin-bottom: 16px;
	overflow: hidden;
}

.ha-related__thumb img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}

.ha-related__name {
	margin: 0 0 6px;
	font-family: "Mriya Grotesk", "DM Sans", sans-serif;
	font-size: 20px;
	font-weight: 900;
	line-height: 28px;
	color: #333;
}

.ha-related__name a {
	color: inherit;
	text-decoration: none;
}

.ha-related__name a:hover { color: #8BC53F; }

.ha-related__meta {
	margin: 0;
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 26.6px;
	color: #797F7D;
}

/* ---------- Responsive ----------
   The theme's existing breakpoints, so the article behaves like the rest of
   the site rather than introducing a third set of widths. */

@media (max-width: 1024px) {
	.ha-post .ha-posthero { padding: 180px 20px 200px; }
	.ha-post .ha-posthero__title { font-size: 46px; line-height: 58px; }
	.ha-related__title { font-size: 32px; }
}

@media (max-width: 781px) {
	.ha-post .ha-posthero { padding: 130px 20px 140px; }
	.ha-post .ha-posthero__title { font-size: 32px; line-height: 42px; }
	.ha-post .ha-posthero__date { margin-top: 20px; font-size: 15px; }
	.ha-post .ha-post__body { padding: 34px 0 60px; }
	.ha-post .ha-post__wrap { padding: 0 20px; }
	.ha-post .ha-post__wrap p,
	.ha-post .ha-post__wrap li { font-size: 16px; line-height: 29px; }
	.ha-post .ha-post__wrap h2 { font-size: 24px; line-height: 30px; }
	.ha-post .ha-post__wrap h3 { font-size: 20px; line-height: 27px; }
	.ha-related { margin-top: 40px; }
	.ha-related__title { font-size: 26px; margin-bottom: 28px; }
	.ha-related__list { grid-template-columns: 1fr; gap: 28px; }
	.ha-related__thumb img { height: 200px; }
}


/* ==========================================================================
   BUILD 109 — "OUR BRANDS" GRID: NO HOVER, NOTHING THAT READS AS CLICKABLE
   --------------------------------------------------------------------------
   Client: "can we remove please the hovering option in our brands so that
   they don't look clickable".

   Two things were producing that read. The card lifts 4px and deepens its
   shadow on hover, which is the same affordance the product cards use for
   things that ARE links; and the transition on the base rule is what makes it
   feel like a control rather than a picture.

   Both go. The resting card — white, 1px border, 10px radius, its soft
   resting shadow — is exactly as it was; the pointer simply gets no response.
   The `transition` is cleared as well, so nothing animates back either.

   The cards are still anchors when a brand carries a URL in Dashboard >
   Logos. The client asked for the hover to go, not the links, so the links
   stay and only the feedback is removed; `cursor:default` covers the pointer
   half of "don't look clickable" for the ones that have no URL and for the
   ones that do.
   ========================================================================== */

.ha-logo-grid--brands .ha-logo-grid__item {
	transition: none;
}

.ha-logo-grid--brands .ha-logo-grid__item:hover {
	box-shadow: 0 10px 30px rgba(0, 14, 40, 0.05);
	transform: none;
}

.ha-logo-grid--brands .ha-logo-grid__item,
.ha-logo-grid--brands .ha-logo-grid__item a,
.ha-logo-grid--brands .ha-logo-grid__item img {
	cursor: default;
}

/* ==========================================================================
   Build 121 — Our Story, MOBILE ONLY (<=767px, Elementor's mobile breakpoint
   on www.hawaagri.com). Client feedback: band image, stats background, and
   the image order around Our Expertise. Values measured on production at
   390px. Desktop/tablet (>=768px) untouched.
   ========================================================================== */
@media (max-width: 767px) {
	/* Stats band: production anchors the paper texture to the RIGHT
	   (background-position 100% 50%). Staging's 0 0 showed the left edge of
	   the photo, including the stray "8" mark. */
	main.ha-page > .ha-stats { background-position: 100% 50%; }

	/* Full-width photo band: production renders it at 155% width, height
	   auto (616x188 at 390px), left-aligned, square corners, clipped by the
	   row. Staging squeezed the whole 3.27:1 file into a 119px strip. */
	main.ha-page > .ha-band--story { overflow: hidden; }
	main.ha-page > .ha-band--story > img {
		width: 155%;
		max-width: 155%;
		height: auto;
		aspect-ratio: auto;
		margin-inline: 0;
		border-radius: 0;
		object-fit: fill;
	}

	/* Our Expertise: production keeps source order on mobile (text, then
	   image). The generic `.ha-split .ha-fig { order: -1 }` put the tractor
	   photo directly under the band instead. */
	.ha-split--expertise .ha-fig { order: 0; }
}