/* =====================================================
   Homepage (v2) — loads after style.css
   ===================================================== */
:root { --accent: #e4572e; }

.page-inner .site-header { position: sticky; background: #fff; }
.page-inner .main-nav a.active { border-color: var(--accent); }
.home .main-nav { gap: 36px; }

.eyebrow-line { display: flex; align-items: center; gap: 14px; }
.eyebrow-line::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow-accent { color: var(--accent); }

/* ---------- hero: image scales to the window ---------- */
/* The artwork is 1694 x 929. The hero keeps that ratio so the red shape always
   sits behind the text, but never grows taller than the visible window. */
.home-hero {
  --hero-h: min(calc(100vw * 929 / 1694), calc(100vh - 64px), 640px);
  position: relative;
  height: max(var(--hero-h), 500px);
  background: #fff center / cover no-repeat;
  overflow: hidden;
  color: #fff;
}
.home-hero-text {
  position: absolute;
  left: 10%;
  top: 19%;
  width: min(44%, 640px);
}
.hero-eyebrow { font-size: clamp(10px, .75vw, 12px); color: #fff; margin-bottom: clamp(10px, 1.4vw, 20px); }
.home-hero h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: clamp(10px, 1.2vw, 18px);
}
.hero-tag { font-size: clamp(14px, 1.2vw, 18px); font-weight: 400; margin-bottom: clamp(12px, 1.8vw, 26px); }
.hero-body { font-size: clamp(13px, .95vw, 14.5px); line-height: 1.6; max-width: 360px; max-width: 30em; opacity: .95; margin-bottom: clamp(18px, 2vw, 30px); }
.home-hero .hero-slide { display: none; }
.home-hero .hero-slide.is-active { display: block; animation: heroTextIn .9s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroTextIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Background layers: crossfade between slides, with a slow gentle drift while each is shown.
   They inherit background-size/position from .home-hero, so every breakpoint rule still applies. */
.hero-bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: inherit; background-position: inherit; }
.hero-bg {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: inherit; background-position: inherit;
  opacity: 0; transform: none; transform-origin: 80% 50%;
  transition: opacity 1.4s ease;
  will-change: opacity, transform;
}
/* Each image appears at its true framing (no zoom), then slowly pushes in while it is on screen. */
.hero-bg.is-active { opacity: 1; animation: heroPush 8s cubic-bezier(.25,.46,.45,.94) forwards; }
@keyframes heroPush {
  from { transform: none; }
  to   { transform: scale(1.035); }
}
.home-hero { cursor: pointer; }
.hero-bg-1 { background-image: url("../assets/img/home-hero.jpg"); }
.hero-bg-2 { background-image: url("../assets/img/home-hero-2.jpg"); }
.hero-bg-3 { background-image: url("../assets/img/home-hero-3.jpg"); }
.home-hero > *:not(.hero-bgs) { position: relative; z-index: 1; }
.home-hero > .home-hero-text, .home-hero > .hero-counter, .home-hero > .hero-caption, .home-hero > .hero-origins { position: absolute; }
/* Devices with "reduce motion" / Windows "Animation effects" off: keep a much slower, smaller zoom. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { transition: opacity .8s ease; }
  .hero-bg.is-active { animation-name: heroPushSoft; }
  @keyframes heroPushSoft { from { transform: none; } to { transform: scale(1.012); } }
  .home-hero .hero-slide.is-active { animation-duration: .4s; }
}
.home-hero-mobile { display: none; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #f4f1ee; }

.hero-counter {
  position: absolute; left: 3.4%; top: 68%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--ink);
}
.hero-counter span:last-child { color: var(--muted); font-weight: 500; }
.hero-counter i { display: block; width: 1px; height: clamp(36px, 4vw, 52px); background: var(--ink); }
.hero-caption {
  position: absolute; left: 7.6%; bottom: 3%;
  font-size: clamp(9px, .7vw, 11px); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; line-height: 1.6;
  color: var(--ink-soft);
}
.hero-origins {
  position: absolute; right: 2.4%; top: 8%; color: var(--ink); width: 132px;
  padding: 16px 18px 14px; border-radius: 8px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.hero-origins-title {
  position: relative; font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; line-height: 1.6;
  margin-bottom: 18px;
}
.hero-origins-title::before { content: ""; display: block; width: 24px; height: 1.5px; background: var(--accent); margin-bottom: 10px; }
.hero-origins ul { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }

/* ---------- our range ---------- */
.range { padding: clamp(36px, 3.5vw, 52px) 0 28px; }
.range-head { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: end; margin-bottom: 26px; }
.range-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -0.025em;
}
.range-intro p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 18px; max-width: 430px; }
.link-underline { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.link-underline { background: linear-gradient(var(--accent), var(--accent)) left bottom / calc(100% - 30px) 1.5px no-repeat; padding-bottom: 4px; }
.link-underline:hover .icon-arrow { transform: translateX(3px); }

.range-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1080px) and (min-width: 901px) { .range-grid { grid-template-columns: repeat(3, 1fr); } }
.range-card { display: block; }
.range-img { aspect-ratio: 377 / 381; border-radius: 4px; overflow: hidden; background: #f3f3f1; }
.range-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.range-card:hover .range-img img { transform: scale(1.04); }
.range-card > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px 0; font-size: 13.5px; font-weight: 600; }
.range-card:hover .icon-arrow { transform: translateX(3px); }

/* ---------- featured strip ---------- */
.featured-strip { padding: 24px 0 48px; }
.featured-strip .section-head { align-items: center; margin-bottom: 20px; }
.featured-strip .eyebrow { margin: 0; }
.featured-strip .link-arrow { font-size: 14px; font-weight: 500; }
.feat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.feat { text-align: center; }
.feat > div { aspect-ratio: 295 / 231; border-radius: 4px; overflow: hidden; background: #f6f6f6; margin-bottom: 10px; }
.feat img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.feat:hover img { transform: scale(1.05); }
.feat span { font-size: 12.5px; font-weight: 500; }

/* ---------- approach ---------- */
.home-approach { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #fff; }
.home-approach-media { position: relative; min-height: 320px; }
.home-approach-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-approach-media p {
  position: absolute; left: 12%; top: 11%;
  font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; line-height: 1.7; color: var(--ink);
}
.home-approach-text { padding: clamp(32px, 4vw, 64px) clamp(24px, 6vw, 96px) clamp(32px, 4vw, 56px) clamp(24px, 6.5vw, 72px); align-self: center; }
.home-approach .section-title { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; margin-bottom: 18px; }
.approach-copy { font-size: 14px; line-height: 1.65; color: var(--ink-soft); max-width: 520px; margin-bottom: 30px; }
.approach-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
.approach-points li { display: flex; align-items: center; gap: 12px; font-size: 12.5px; line-height: 1.35; padding: 4px 28px; }
.approach-points li:first-child { padding-left: 0; }
.approach-points li + li { border-left: 1px solid var(--line); }
.approach-points svg { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .home .main-nav { gap: 28px; }
  .hero-origins { display: none; }
}
@media (max-width: 1080px) {
  .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
  .range-head { grid-template-columns: 1fr; gap: 20px; }
  .home-hero-text { width: 52%; }
}
@media (max-width: 900px) {
  /* Narrow screens keep the desktop composition: one artwork, text on the red shape,
     spice bowls on the right. The artwork is scaled to the hero height (540px), so
     1px of artwork = 540/929 px on screen; offsets below are in that scale. */
  .home-hero { height: 540px; min-height: 0; background-size: auto 100%; background-position: right center; }
  .home-hero-mobile { display: none; }
  .home-hero-text { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: calc(100% - 500px); min-width: 250px; padding: 0; }
  .home-hero h1 { font-size: clamp(28px, 3.9vw, 34px); }
  .hero-tag { font-size: 15px; margin-bottom: 12px; }
  .hero-body { font-size: 13px; margin-bottom: 20px; }
  .home-hero .btn-lg { padding: 11px 18px; font-size: 13px; }
  .hero-counter { left: 24px; top: auto; bottom: 22px; flex-direction: row; }
  .hero-counter i { width: 36px; height: 1px; background: #fff; }
  .hero-counter, .hero-counter span:last-child { color: #fff; }
  .hero-caption { display: none; }
  .range-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  /* 5 cards in 2 columns: the last one spans the full width instead of sitting alone */
  .range-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
  .range-card:last-child > span { padding: 0 4px; justify-content: flex-start; gap: 12px; font-size: 14.5px; }
  .home-approach { grid-template-columns: 1fr; }
  .home-approach-media { min-height: 240px; }
  .approach-points { grid-template-columns: 1fr 1fr 1fr; }
  .approach-points li { padding: 4px 12px; }
}
@media (max-width: 560px) {
  .home-hero h1 { font-size: 28px; }
  .hero-eyebrow { font-size: 10px; }

  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-points { grid-template-columns: 1fr; gap: 14px; }
  .approach-points li, .approach-points li:first-child { padding: 0; border: 0; }
}

/* ---------- quote banner ---------- */
.home-cta { position: relative; color: #fff; background: #e5340b url("../assets/img/products-banner.jpg") right center / cover no-repeat; }
.home-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #da4314 0%, #da4314 34%, rgba(218,67,20,0) 50%); }
.home-cta-inner { position: relative; min-height: clamp(280px, 24vw, 380px); display: flex; flex-direction: column; justify-content: center; padding-block: 44px; }
.home-cta .eyebrow { color: rgba(255,255,255,.9); margin-bottom: 14px; }
.home-cta .eyebrow-line::after { background: rgba(255,255,255,.8); opacity: 1; }
.home-cta h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 14px; }
.home-cta-inner > p:not(.eyebrow) { font-size: 14.5px; line-height: 1.6; max-width: 420px; opacity: .95; margin-bottom: 24px; }
.home-cta-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.home-cta-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #fff; }
.home-cta-link:hover .icon-arrow { transform: translateX(3px); }
@media (max-width: 900px) {
  .home-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(229,52,11,.96) 0%, rgba(229,52,11,.85) 70%, rgba(229,52,11,.55) 100%); }
}

/* Slides 2 and 3: the coloured shape reaches the left edge, so the counter and caption turn white. */
.home-hero .hero-counter, .home-hero .hero-caption, .home-hero .hero-counter i { transition: color .8s ease, background-color .8s ease; }
.home-hero[data-slide="2"] .hero-counter, .home-hero[data-slide="3"] .hero-counter,
.home-hero[data-slide="2"] .hero-counter span:last-child, .home-hero[data-slide="3"] .hero-counter span:last-child,
.home-hero[data-slide="2"] .hero-caption, .home-hero[data-slide="3"] .hero-caption { color: rgba(255,255,255,.92); }
.home-hero[data-slide="2"] .hero-counter i, .home-hero[data-slide="3"] .hero-counter i { background: rgba(255,255,255,.85); }

/* ---------- Phones: same design, portrait artwork ----------
   Each slide has a portrait version of its artwork (*-m.jpg): the coloured shape
   fills the top and left and curves round the ingredients at the bottom right.
   Text sits on the shape, as on desktop. Sizes follow the screen width so the
   layout keeps its proportions on every phone. */
@media (max-width: 560px) {
  .home-hero { height: calc(100vw * 1340 / 750); min-height: 0; background: #fff top center / 100% auto no-repeat; }
  .hero-bg { transform-origin: 75% 85%; }
  .hero-bg-1 { background-image: url("../assets/img/home-hero-mobile.jpg"); }
  .hero-bg-2 { background-image: url("../assets/img/home-hero-2-mobile.jpg"); }
  .hero-bg-3 { background-image: url("../assets/img/home-hero-3-mobile.jpg"); }
  .home-hero > .home-hero-text { left: 6.4vw; right: 6.4vw; top: 7.5vw; transform: none; width: auto; min-width: 0; padding: 0; }
  .hero-eyebrow { font-size: 2.7vw; margin-bottom: 3.2vw; }
  .home-hero h1 { font-size: 7.6vw; line-height: 1.08; margin-bottom: 3vw; }
  .hero-tag { font-size: 4vw; margin-bottom: 2.6vw; }
  .hero-body { font-size: 3.45vw; line-height: 1.55; margin-bottom: 4.6vw; max-width: 82vw; }
  .home-hero .btn-lg { padding: 2.9vw 4.6vw; font-size: 3.5vw; }
  .home-hero > .hero-counter { left: 6.4vw; top: auto; bottom: 7vw; flex-direction: column; gap: 2vw; }
  /* the phone artworks are white at the bottom left, so the counter is navy on every slide */
  .home-hero .hero-counter, .home-hero .hero-counter span:last-child,
  .home-hero[data-slide] .hero-counter, .home-hero[data-slide] .hero-counter span:last-child { color: var(--ink); font-size: 3vw; }
  .home-hero .hero-counter i, .home-hero[data-slide] .hero-counter i { width: 1px; height: 9vw; background: var(--ink); }
}