/* Stage 8B page composition. Components and shared values come from Stage 8A. */
.home-header { position: sticky; z-index: var(--z-header); }
.home-header__inner { min-inline-size: 0; }
.home-brand small { display: block; color: var(--color-text-secondary); font-size: var(--text-caption); font-weight: var(--weight-regular); line-height: var(--leading-control); }
.home-header__actions { flex-wrap: nowrap; gap: var(--space-2); flex: 0 0 auto; }
.home-header-action { padding-inline: var(--space-3); white-space: nowrap; }
.home-drawer .ui-nav-link { inline-size: 100%; }

.home-hero { border-block-end: var(--border-width) solid var(--color-border-soft); }
.home-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; padding-block: var(--space-12); }
.home-hero__copy { max-inline-size: var(--container-reading); }
.home-eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-3); }
.home-hero h1 { max-inline-size: 16ch; }
.home-hero__summary { max-inline-size: 55ch; color: var(--color-text-secondary); }
.home-hero__actions { gap: var(--space-3); }
.home-hero__cta { min-inline-size: 10rem; }
.home-preview-note { max-inline-size: 62ch; padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-primary-line); }

.home-hero__visual { position: relative; isolation: isolate; min-inline-size: 0; aspect-ratio: var(--media-ratio); display: grid; grid-template-rows: auto 1fr auto; padding: var(--space-6); overflow: hidden; background: linear-gradient(145deg, rgb(255 255 255 / .96), rgb(240 241 239 / .88)); border: var(--border-width) solid var(--color-border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevation-2); }
.home-hero__visual::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .75; background-image: linear-gradient(to right, transparent calc(100% - var(--border-width)), rgb(40 40 40 / .08) 0), linear-gradient(to bottom, transparent calc(100% - var(--border-width)), rgb(40 40 40 / .08) 0), linear-gradient(125deg, transparent 0 56%, rgb(255 255 255 / .82) 56% 72%, transparent 72%); background-size: var(--space-8) var(--space-8), var(--space-8) var(--space-8), 100% 100%; }
.home-hero__visual::after { content: ""; position: absolute; z-index: -1; inset-block-start: 12%; inset-inline-end: -18%; inline-size: 78%; aspect-ratio: 1; border: 2px solid var(--color-primary-line); border-radius: 50%; box-shadow: 0 0 0 3rem rgb(200 27 28 / .025), 0 0 0 7rem rgb(255 255 255 / .3); }
.home-visual__axis { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-text-secondary); font: var(--text-caption)/var(--leading-control) var(--font-mono); direction: ltr; }
.home-visual__mark { place-self: center; display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-primary); }
.home-visual__mark span { font-size: clamp(4rem, 13vw, 8rem); font-weight: var(--weight-bold); line-height: 1; }
.home-visual__mark i { inline-size: var(--space-2); block-size: clamp(4rem, 12vw, 7rem); background: var(--color-primary); border-radius: var(--radius-sm); }
.home-hero__visual figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-caption); }

.home-statistics { padding-block: var(--section-gap); border-block-end: var(--border-width) solid var(--color-border-soft); }
.home-section-heading { max-inline-size: var(--container-reading); margin-block-end: var(--space-8); }
.home-section-heading h2 { max-inline-size: 22ch; }
.home-statistics__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-8); }
.home-subsection-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.home-metric-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.home-metric-card { min-block-size: 8.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; column-gap: var(--space-4); padding: var(--space-6); transition: transform var(--motion-normal) var(--ease-emphasized), box-shadow var(--motion-normal) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.home-metric-card[data-preview="true"] { border-style: dashed; }
.home-metric-card__icon { grid-row: 1 / -1; inline-size: var(--control-height); block-size: var(--control-height); display: grid; place-items: center; border-radius: var(--radius-md); background: linear-gradient(145deg, var(--color-primary-soft), rgb(200 27 28 / .12)); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary-line); transition: transform var(--motion-normal) var(--ease-emphasized); }
.home-metric-card__icon::before { content: ""; inline-size: 1.25rem; block-size: 1.25rem; background: linear-gradient(to top, var(--color-primary) 0 38%, transparent 38%) 0 100% / .24rem 100% no-repeat, linear-gradient(to top, var(--color-primary) 0 68%, transparent 68%) 50% 100% / .24rem 100% no-repeat, linear-gradient(to top, var(--color-primary) 0 100%, transparent 100%) 100% 100% / .24rem 100% no-repeat; }
.home-metric-card__value { grid-column: 2; color: var(--color-primary); font-size: var(--text-h2); line-height: var(--leading-heading); }
.home-metric-card__label { font-size: var(--text-body); }
.home-metric-skeleton { block-size: 8.5rem; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); }
.home-map-card { overflow: hidden; background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft)); }
.home-map-card__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-6); border-block-end: var(--border-width) solid var(--color-border-soft); }
.home-map__frame { --map-aspect-ratio: 3 / 2; position: relative; aspect-ratio: var(--map-aspect-ratio); min-inline-size: 0; overflow: hidden; background: radial-gradient(circle at 78% 24%, var(--color-primary-faint), transparent 16rem), linear-gradient(145deg, var(--color-surface-soft), var(--color-surface-muted)); }
.home-map-state { min-block-size: 100%; }
.home-map-state[data-map-loading] { position: absolute; z-index: 1; inset: 0; }
.home-map-state.ui-state { justify-content: center; border: 0; border-radius: 0; background: repeating-linear-gradient(135deg, transparent 0 2rem, rgb(40 40 40 / .025) 2rem 2.08rem), radial-gradient(circle at 84% 18%, var(--color-primary-faint), transparent 15rem); }
.home-map-state > .ui-skeleton { position: absolute; inset: 0; block-size: 100%; border-radius: 0; }
.home-map-ready { block-size: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--color-surface); }
.home-map-ready[aria-hidden="true"] { opacity: 0; }
.home-map-ready img { inline-size: 100%; block-size: 100%; min-block-size: 0; object-fit: contain; background: var(--color-surface); }
.home-map-ready figcaption { padding-block: var(--space-2); padding-inline: var(--space-4); border-block-start: var(--border-width) solid var(--color-border); }

.home-categories { padding-block: var(--section-gap); border-block-end: var(--border-width) solid var(--color-border-soft); }
.home-category-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.home-category-skeleton { block-size: calc(var(--space-16) + var(--space-16) + var(--space-16)); border-radius: var(--radius-lg); }
.home-category-tile { position: relative; isolation: isolate; min-block-size: calc(var(--space-16) + var(--space-16) + var(--space-16)); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-8); padding: var(--space-8); overflow: hidden; border: var(--border-width) solid var(--color-border-soft); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft)); color: var(--color-text-primary); text-decoration: none; box-shadow: var(--shadow-elevation-1); transition: transform var(--motion-normal) var(--ease-emphasized), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-normal) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.home-category-tile::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--space-1); background: var(--color-primary); }
.home-category-tile::after { content: ""; position: absolute; z-index: -1; inline-size: 10rem; aspect-ratio: 1; inset-inline-end: -4rem; inset-block-start: -4rem; border: 1px solid var(--color-primary-line); border-radius: 50%; box-shadow: 0 0 0 2rem rgb(200 27 28 / .025); transition: transform var(--motion-slow) var(--ease-emphasized); }
.home-category-tile__index { inline-size: var(--control-height); block-size: var(--control-height); display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary-line); transition: transform var(--motion-normal) var(--ease-emphasized); }
.home-category-tile__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); max-inline-size: var(--container-reading); }
.home-category-tile__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--control-height); padding-block-start: var(--space-3); border-block-start: var(--border-width) solid var(--color-border); color: var(--color-primary); font-size: var(--text-small); font-weight: var(--weight-bold); }
.home-category-tile:active { transform: translateY(0); border-color: var(--color-primary); background: var(--color-primary-soft); }
@media (hover: hover) { .home-category-tile:hover { transform: translateY(var(--motion-lift-feature)); border-color: var(--color-primary-line); background: var(--color-surface); box-shadow: var(--shadow-elevation-2); } .home-category-tile:hover::after { transform: translate(-.35rem, .35rem); } .home-category-tile:hover .home-category-tile__index { transform: translateY(var(--motion-lift-button)) scale(1.04); } }

.home-brands { padding-block: var(--section-gap); }
.home-brands__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-8); }
.home-brand-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.home-brand-card { min-block-size: var(--control-height-lg); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); border: var(--border-width) solid var(--color-border-soft); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--color-surface), var(--color-surface-soft)); color: inherit; text-decoration: none; box-shadow: var(--shadow-elevation-1); transition: transform var(--motion-normal) var(--ease-emphasized), box-shadow var(--motion-normal) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); }
.home-brand-card__mark { inline-size: var(--space-2); block-size: var(--space-8); flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--color-primary); }
@media (hover: hover) { .home-metric-card:hover, .home-brand-card:hover { transform: translateY(var(--motion-lift-card)); border-color: var(--color-border-strong); box-shadow: var(--shadow-elevation-2); } .home-metric-card:hover .home-metric-card__icon { transform: translateY(var(--motion-lift-button)) scale(1.04); } }

.home-footer { margin-block-start: 0; }

@media (max-width: 39.99rem) {
  .home-action-wide { display: none; }
  .home-hero__actions { align-items: stretch; }
  .home-hero__cta { inline-size: 100%; }
  .home-hero__visual { box-shadow: var(--shadow-elevation-1); }
  .home-category-tile::after { opacity: .7; }
}
@media (min-width: 40rem) {
  .home-hero__layout { padding-block: var(--space-16); }
  .home-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-metric-card { display: flex; min-block-size: 10rem; flex-direction: column; align-items: start; justify-content: center; gap: var(--space-2); }
  .home-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-brand-card { grid-column: span 2; }
  .home-brand-grid > .home-brand-card:nth-child(3):last-child { grid-column: 2 / span 2; }
}
@media (min-width: 64rem) {
  .home-hero__layout { grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr); gap: var(--space-16); min-block-size: calc(100dvb - var(--header-height)); }
  .home-statistics__layout { grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); gap: var(--space-12); }
  .home-metric-grid { grid-template-columns: minmax(0, 1fr); }
  .home-metric-card { min-block-size: 8.5rem; display: grid; }
  .home-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-brands__layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); }
}
@media (forced-colors: active) {
  .home-visual__mark i { background: CanvasText; }
  .home-category-tile::after { display: none; }
}

/* Premium industrial art direction */
.home-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgb(220 21 27 / .08), transparent 23rem),
    linear-gradient(142deg, var(--color-surface) 0 62%, var(--color-surface-soft));
}

.home-hero::before {
  content: "";
  position: absolute;
  inset-inline-end: -10rem;
  inset-block-start: -15rem;
  inline-size: 34rem;
  aspect-ratio: 1;
  border: 1px solid var(--color-primary-line);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(220 21 27 / .025), 0 0 0 9rem rgb(23 25 28 / .018);
  pointer-events: none;
}

.home-hero h1 {
  max-inline-size: 13ch;
  letter-spacing: -.035em;
}

.home-hero__copy {
  max-inline-size: 40rem;
  border-color: rgb(255 255 255 / .9);
  background: linear-gradient(145deg, rgb(255 255 255 / .9), rgb(255 255 255 / .72));
  box-shadow: 0 26px 70px rgb(20 22 25 / .1);
}

.home-hero__summary {
  line-height: 2;
}

.home-hero__visual {
  aspect-ratio: 16 / 10;
  min-block-size: 28rem;
  padding: var(--space-6);
  border-color: rgb(255 255 255 / .82);
  background:
    linear-gradient(to top, rgb(20 22 25 / .62), transparent 36%),
    url("/assets/design-system/hero-barrels-refinery.png") center / cover no-repeat;
  box-shadow: 0 34px 80px rgb(20 22 25 / .18);
}

.home-hero__visual::before {
  opacity: .24;
  background-image:
    linear-gradient(to right, transparent calc(100% - var(--border-width)), rgb(255 255 255 / .22) 0),
    linear-gradient(to bottom, transparent calc(100% - var(--border-width)), rgb(255 255 255 / .18) 0);
  background-size: var(--space-8) var(--space-8);
}

.home-hero__visual::after {
  inset-block-start: -30%;
  inset-inline-end: 42%;
  inline-size: 86%;
  border-color: rgb(255 255 255 / .55);
  box-shadow: 0 0 0 1px var(--color-primary-line), 0 0 35px rgb(220 21 27 / .4);
}

.home-visual__axis { color: rgb(255 255 255 / .84); }
.home-visual__mark {
  place-self: end start;
  inline-size: 4.75rem;
  block-size: 4.75rem;
  border-radius: 50%;
  background: rgb(255 255 255 / .92) url("/assets/design-system/mirabedini-mark.jpg") center / 112% auto no-repeat;
  box-shadow: 0 16px 38px rgb(20 22 25 / .24);
}
.home-visual__mark span,
.home-visual__mark i { display: none; }
.home-hero__visual figcaption { color: rgb(255 255 255 / .8); }

.home-statistics {
  background:
    radial-gradient(circle at 12% 78%, rgb(220 21 27 / .055), transparent 20rem),
    var(--pattern-industrial-lines),
    linear-gradient(145deg, var(--color-surface-soft), var(--color-surface-muted));
}
.home-statistics__layout { align-items: stretch; }
.home-metrics {
  align-self: stretch;
  background: linear-gradient(145deg, rgb(255 255 255 / .96), rgb(255 255 255 / .8));
}
.home-metric-card {
  border-inline-start: 3px solid var(--color-primary);
  background: linear-gradient(135deg, rgb(255 255 255 / .96), rgb(255 255 255 / .78));
}
.home-map-card {
  border-block-start: 3px solid var(--color-primary);
  border-color: var(--border-panel);
  background: rgb(255 255 255 / .9);
}
.home-map-card__heading { background: linear-gradient(145deg, rgb(255 255 255 / .98), rgb(248 248 247 / .92)); }
.home-map__frame {
  margin: var(--space-3);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 64% 35%, var(--color-primary-soft), transparent 14rem), linear-gradient(145deg, var(--color-surface), var(--color-surface-muted));
}

.home-categories {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, rgb(220 21 27 / .065), transparent 21rem),
    var(--pattern-technical-grid),
    linear-gradient(145deg, var(--color-surface), var(--color-surface-soft));
  background-size: auto, var(--space-16) var(--space-16), auto;
}
.home-categories::before {
  content: "";
  position: absolute;
  inset-inline-end: -10rem;
  inset-block-end: -15rem;
  inline-size: 32rem;
  aspect-ratio: 1;
  border: 1px solid var(--color-primary-line);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(220 21 27 / .025);
  pointer-events: none;
}

.home-category-tile {
  min-block-size: 27rem;
  grid-template-rows: 13.5rem minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  border-block-start: 0;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 18px 50px rgb(20 22 25 / .09);
}
.home-category-tile::after { display: none; }
.home-category-tile__index {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  background: rgb(255 255 255 / .9);
  backdrop-filter: blur(12px);
}
.home-category-tile__media {
  position: relative;
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  background: var(--color-surface-muted);
}
.home-category-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(20 22 25 / .18), transparent 55%);
  pointer-events: none;
}
.home-category-tile__media img {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-emphasized), filter var(--motion-normal) var(--ease-standard);
}
.home-category-tile__copy {
  justify-content: start;
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.home-category-tile__copy strong { letter-spacing: -.025em; }
.home-category-tile__cta {
  margin: 0 var(--space-6);
  padding-block: var(--space-4) var(--space-5);
}
@media (hover: hover) {
  .home-category-tile:hover { transform: translateY(-3px); }
  .home-category-tile:hover .home-category-tile__media img { transform: scale(1.035); filter: saturate(1.04) contrast(1.02); }
}

.home-brands {
  position: relative;
  overflow: hidden;
  border-block-start: var(--border-width) solid var(--color-border-soft);
  background:
    linear-gradient(115deg, transparent 0 64%, rgb(255 255 255 / .72) 64% 79%, transparent 79%),
    var(--pattern-industrial-lines),
    linear-gradient(145deg, var(--color-surface-muted), var(--color-surface-soft));
}

.home-brand-card {
  position: relative;
  min-block-size: 6.25rem;
  justify-content: center;
  text-align: center;
  border: 1px solid rgb(255 255 255 / .92);
  border-block-start: 2px solid var(--color-border-strong);
  background: linear-gradient(145deg, rgb(255 255 255 / .94), rgb(255 255 255 / .74));
  backdrop-filter: blur(16px);
}
.home-brand-card h3 { font-size: var(--text-h3); letter-spacing: -.02em; }
@media (hover: hover) {
  .home-brand-card:hover { transform: translateY(-3px); border-block-start-color: var(--color-primary); }
}

.home-footer { margin-block-start: 0; padding-block: var(--space-16) var(--space-6); }
.home-footer .ui-footer__inner { display: block; }
.home-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}
.home-footer__brand { max-inline-size: 28rem; }
.home-footer__brand-link { color: var(--color-surface); }
.home-footer__brand-link small { display: block; margin-block-start: var(--space-1); color: rgb(255 255 255 / .58); font-size: var(--text-caption); font-weight: var(--weight-regular); }
.home-footer__brand p,
.home-footer__contact p { color: rgb(255 255 255 / .66); }
.home-footer__trust {
  inline-size: fit-content;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .06);
  color: rgb(255 255 255 / .72);
}
.home-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.home-footer__column > strong { padding-block-end: var(--space-2); border-block-end: 2px solid var(--color-primary); }
.home-footer__column nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.home-footer__column nav a,
.home-footer__bottom a {
  min-block-size: var(--control-height);
  display: inline-flex;
  align-items: center;
  color: rgb(255 255 255 / .68);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}
.home-footer__column nav a:hover,
.home-footer__bottom a:hover { color: var(--color-surface); }
.home-footer__contact .ui-button { margin-block-start: var(--space-2); color: var(--color-text-primary); }
.home-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgb(255 255 255 / .1);
  color: rgb(255 255 255 / .56);
}
.home-footer__bottom nav { gap: var(--space-4); }

@media (max-width: 39.99rem) {
  .home-hero__visual { min-block-size: 22rem; }
  .home-hero__visual figcaption > span:last-child { display: none; }
  .home-hero__copy { padding: var(--space-6); }
  .home-category-tile { min-block-size: 25rem; }
}

@media (min-width: 40rem) {
  .home-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 64rem) {
  .home-hero__layout {
    grid-template-columns: minmax(24rem, .86fr) minmax(0, 1.14fr);
    gap: clamp(3rem, 6vw, 7rem);
    min-block-size: 46rem;
  }
  .home-hero__visual { min-block-size: 35rem; }
  .home-statistics__layout { grid-template-columns: minmax(18rem, .62fr) minmax(0, 1.38fr); }
  .home-footer__grid { grid-template-columns: minmax(19rem, 1.35fr) repeat(3, minmax(9rem, .65fr)); gap: var(--space-12); }
}

/* Corrective composition: integrated, editorial and closer to the approved reference. */
.home-header .ui-header__inner { min-block-size: 4.5rem; }
.home-header .ui-brand::before { inline-size: 2.65rem; block-size: 2.65rem; }

.home-hero {
  min-block-size: auto;
  background:
    radial-gradient(circle at 86% 18%, rgb(220 21 27 / .085), transparent 22rem),
    linear-gradient(122deg, transparent 0 47%, rgb(23 25 28 / .025) 47% 47.1%, transparent 47.1%),
    linear-gradient(145deg, var(--color-surface) 0 64%, var(--color-surface-soft));
}
.home-hero::before {
  inset-inline-end: -14rem;
  inset-block-start: -21rem;
  inline-size: 40rem;
  box-shadow: 0 0 0 5rem rgb(220 21 27 / .022), 0 0 0 11rem rgb(23 25 28 / .014);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: 40%;
  inset-block: 0;
  inline-size: 22rem;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / .64), transparent);
  transform: skewX(-13deg);
  pointer-events: none;
}
.home-hero__layout {
  position: relative;
  z-index: 1;
  align-items: stretch;
  gap: 0;
  padding-block: var(--space-3) var(--space-6);
}
.home-hero__copy {
  z-index: 3;
  max-inline-size: 37rem;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border: 0;
  border-radius: 0;
  background: linear-gradient(145deg, rgb(255 255 255 / .66), rgb(255 255 255 / .18));
  box-shadow: none;
  backdrop-filter: none;
}
.home-hero h1 { max-inline-size: 16ch; font-size: clamp(2.25rem, 1.5rem + 2.1vw, 3.5rem); line-height: 1.32; }
.home-hero h1 em { color: var(--color-primary); font-style: normal; }
.home-hero__copy.ui-stack { gap: var(--space-5); }
.home-hero__summary { max-inline-size: 48ch; line-height: 1.95; }
.home-preview-note { max-inline-size: 52ch; opacity: .82; }
.home-hero__visual {
  z-index: 1;
  min-block-size: 0;
  block-size: 100%;
  aspect-ratio: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: url("/assets/design-system/hero-barrels-refinery-corrected.png") center / cover no-repeat;
  box-shadow: none;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-composite: intersect;
}
.home-hero__visual::before {
  z-index: 1;
  inset: 0;
  opacity: .17;
  background-image: var(--pattern-technical-grid);
  background-size: var(--space-8) var(--space-8);
  pointer-events: none;
}
.home-hero__visual::after {
  z-index: 2;
  inset-block-start: -22%;
  inset-inline-end: 57%;
  inline-size: 72%;
  border-color: rgb(255 255 255 / .48);
  box-shadow: 0 0 0 1px var(--color-primary-line), 0 0 30px rgb(220 21 27 / .22);
  pointer-events: none;
}
html[dir="rtl"] .home-hero__visual {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgb(0 0 0 / .45) 1.5%, rgb(0 0 0) 5.5%, rgb(0 0 0) 89%, rgb(0 0 0 / .72) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .58) 2%, rgb(0 0 0) 6.5%, rgb(0 0 0) 91.5%, rgb(0 0 0 / .58) 97%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, rgb(0 0 0 / .45) 1.5%, rgb(0 0 0) 5.5%, rgb(0 0 0) 89%, rgb(0 0 0 / .72) 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .58) 2%, rgb(0 0 0) 6.5%, rgb(0 0 0) 91.5%, rgb(0 0 0 / .58) 97%, transparent 100%);
}
html[dir="ltr"] .home-hero__visual {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgb(0 0 0 / .72) 5%, rgb(0 0 0) 11%, rgb(0 0 0) 94.5%, rgb(0 0 0 / .45) 98.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .58) 2%, rgb(0 0 0) 6.5%, rgb(0 0 0) 91.5%, rgb(0 0 0 / .58) 97%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, rgb(0 0 0 / .72) 5%, rgb(0 0 0) 11%, rgb(0 0 0) 94.5%, rgb(0 0 0 / .45) 98.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .58) 2%, rgb(0 0 0) 6.5%, rgb(0 0 0) 91.5%, rgb(0 0 0 / .58) 97%, transparent 100%);
}

.home-statistics { padding-block: var(--space-12); }
.home-statistics__layout { gap: var(--space-8); }
.home-statistics__summary { align-self: center; }
.home-section-heading { margin-block-end: var(--space-6); }
.home-statistics__summary .home-section-heading { margin-block-end: 0; }
.home-metrics {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-metric-grid { gap: var(--space-2); }
.home-metric-card,
.home-metric-skeleton {
  min-block-size: 5.4rem;
  border-radius: var(--radius-md);
}
.home-metric-card { padding: var(--space-4); }
.home-metric-card__icon { inline-size: 2.6rem; block-size: 2.6rem; }
.home-metric-card__value { font-size: var(--text-h3); }
.home-map-card {
  align-self: end;
  border-block-start-width: 2px;
  box-shadow: 0 24px 60px rgb(20 22 25 / .1);
}
.home-map-card__heading { padding: var(--space-5); }
.home-map__frame { --map-aspect-ratio: 2 / 1; }

.home-categories { padding-block: var(--space-8); }
.home-categories .home-section-heading { margin-block-end: var(--space-6); }
.home-category-skeleton { block-size: 15.5rem; }
.home-category-tile {
  min-block-size: 15.5rem;
  grid-template-rows: 7.75rem minmax(0, 1fr) auto;
  border-radius: var(--radius-md);
  box-shadow: 0 14px 38px rgb(20 22 25 / .075);
}
.home-category-tile__copy { gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-2); }
.home-category-tile__copy strong { font-size: var(--text-h3); }
.home-category-tile__cta { min-block-size: 2.5rem; margin-inline: var(--space-5); padding-block: var(--space-2) var(--space-3); }
.home-category-tile__index {
  inline-size: 2.35rem;
  block-size: 2.35rem;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
}
.home-category-tile[data-category-slug="rubber-oil"] .home-category-tile__media img {
  object-fit: fill;
  object-position: center;
  transform: none;
}

.home-brands { padding-block: var(--space-7); }
.home-brands__layout { gap: var(--space-8); }
.home-brand-card { min-block-size: 4.25rem; padding: var(--space-3); box-shadow: 0 10px 28px rgb(20 22 25 / .065); }

.home-footer {
  padding-block: var(--space-8) var(--space-4);
  border-block-start: var(--border-width) solid var(--color-border-soft);
  background:
    linear-gradient(to top, rgb(255 255 255 / .78), transparent 70%),
    radial-gradient(circle at 12% 15%, rgb(220 21 27 / .055), transparent 18rem),
    var(--pattern-industrial-lines),
    linear-gradient(145deg, var(--color-surface-soft), var(--color-surface-muted));
  color: var(--color-text-primary);
  box-shadow: 0 -14px 40px rgb(20 22 25 / .055);
}
.home-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .045;
  background: url("/assets/design-system/hero-refinery.png") center 42% / cover no-repeat;
  filter: grayscale(1);
  pointer-events: none;
}
.home-footer::after { border-color: var(--color-primary-line); box-shadow: 0 0 0 4rem rgb(220 21 27 / .02); }
.home-footer .ui-footer__inner { position: relative; z-index: 1; }
.home-footer__grid { gap: var(--space-8); }
.home-footer__brand-link { color: var(--color-text-primary); }
.home-footer__brand-link small,
.home-footer__brand p,
.home-footer__contact p { color: var(--color-text-secondary); }
.home-footer__trust {
  border-color: var(--color-primary-line);
  background: var(--color-primary-faint);
  color: var(--color-text-secondary);
}
.home-footer__column nav a,
.home-footer__bottom a { color: var(--color-text-secondary); }
.home-footer__column nav a,
.home-footer__bottom a { min-block-size: auto; padding-block: var(--space-1); }
.home-footer__column nav a:hover,
.home-footer__bottom a:hover { color: var(--color-primary); }
.home-footer__bottom {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-4);
  border-block-start-color: var(--color-border);
  color: var(--color-text-secondary);
}

@media (max-width: 63.99rem) {
  .home-hero__copy { max-inline-size: none; }
  .home-hero__visual { overflow: hidden; border-radius: var(--radius-lg); }
}

@media (max-width: 39.99rem) {
  .home-hero__layout { padding-block: var(--space-4) var(--space-8); }
  .home-hero__copy { padding: var(--space-6) 0; background: transparent; }
  .home-hero__visual {
    min-block-size: 18rem;
    aspect-ratio: 4 / 3;
    margin-inline: calc(var(--page-gutter) * -1);
    border-radius: 0;
    background-position: 48% center;
  }
  html[dir] .home-hero__visual {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, rgb(0 0 0 / .58) 2%, rgb(0 0 0) 7%, rgb(0 0 0) 93%, rgb(0 0 0 / .58) 98%, transparent 100%),
      linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .5) 1.5%, rgb(0 0 0) 5.5%, rgb(0 0 0) 92.5%, rgb(0 0 0 / .5) 98%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0, rgb(0 0 0 / .58) 2%, rgb(0 0 0) 7%, rgb(0 0 0) 93%, rgb(0 0 0 / .58) 98%, transparent 100%),
      linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .5) 1.5%, rgb(0 0 0) 5.5%, rgb(0 0 0) 92.5%, rgb(0 0 0 / .5) 98%, transparent 100%);
  }
  .home-statistics { padding-block: var(--space-10); }
  .home-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .home-metric-card {
    min-inline-size: 0;
    min-block-size: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1);
    padding: var(--space-2);
    text-align: center;
  }
  .home-metric-card__icon { inline-size: 2.25rem; block-size: 2.25rem; flex: 0 0 auto; }
  .home-metric-card__icon::before { inline-size: 1rem; block-size: 1rem; }
  .home-metric-card__value { font-size: 1.125rem; }
  .home-metric-card__label { font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
  .home-metric-card .ui-caption { font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
  .home-metric-grid.ui-stagger > .home-metric-card { --reveal-delay: 0ms !important; }
  .ui-enhanced .home-metric-grid .home-metric-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .home-metric-skeleton { min-block-size: 8rem; }
  .home-category-tile { min-block-size: 19rem; grid-template-rows: 10rem minmax(0, 1fr) auto; }
}

@media (min-width: 64rem) {
  .home-hero__layout {
    grid-template-columns: minmax(25rem, .78fr) minmax(0, 1.22fr);
    min-block-size: 31rem;
  }
  .home-hero__copy { padding-inline-start: var(--space-8); padding-inline-end: var(--space-4); }
  .home-hero__visual { margin-inline-end: calc(var(--page-gutter) * -1); }
  .home-statistics__layout { grid-template-columns: minmax(19rem, .68fr) minmax(0, 1.32fr); }
  .home-brands__layout { grid-template-columns: minmax(20rem, .7fr) minmax(0, 1.3fr); }
  .home-footer__grid { gap: var(--space-10); }
}

/* The stacked laptop/tablet hero needs its own height after the art-direction
   rules above remove the image's original aspect ratio. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .home-hero__layout { gap: var(--space-4); }
  .home-hero__visual {
    block-size: auto;
    min-block-size: 20rem;
    aspect-ratio: 16 / 9;
    background-position: center 48%;
  }
}