/* ==========================================================================
   LANDING
   The farm photograph is pinned to the window. Every section of the page
   scrolls over the top of it, so the picture is on screen the whole way
   down and never drifts out of frame.

   No product grid appears anywhere on this page. The only product data
   permitted here is the Weekly Specials panel, pinned to the top right.
   ========================================================================== */

.land { position: relative; z-index: 1; }

/* The landing hero runs the full height of the window. The top bar is
   transparent over it, and the scene's own padding keeps the type clear. */
body.landing .stage { padding-top: 0; }
body.landing { background: var(--void); }

/* --------------------------------------------------------------------------
   THE PINNED BACKDROP
   -------------------------------------------------------------------------- */

.land-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.land-bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Photography sits under a two-stop veil: dark at the left where the type
   lives, clearer at the right so their farm is actually visible. */
.veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 9, 11, .92) 0%, rgba(7, 9, 11, .7) 36%,
                    rgba(7, 9, 11, .3) 66%, rgba(7, 9, 11, .52) 100%),
    linear-gradient(180deg, rgba(7, 9, 11, .78) 0%, transparent 20%, transparent 80%, rgba(7, 9, 11, .78) 100%);
}

/* a faint survey grid, the only "texture" on the page */
.grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, #000 20%, transparent 78%);
}

/* --------------------------------------------------------------------------
   SCENES
   Transparent by design. Anything that carries body copy brings its own
   solid panel, so the photograph is never behind small text.
   -------------------------------------------------------------------------- */

.scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: transparent;
}
.scene-plain {
  min-height: 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.scene-inner {
  position: relative;
  width: 100%;
  padding: 120px 48px 96px;
  max-width: 1420px;
}
.scene-plain .scene-inner { padding: 96px 48px 96px; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero-copy { max-width: 720px; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  background: rgba(200, 240, 60, .08);
  border: 1px solid rgba(200, 240, 60, .26);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--volt);
  text-transform: uppercase;
}
.hero-kicker .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 0 var(--volt-glow);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 240, 60, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(200, 240, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 240, 60, 0); }
}

.hero-title {
  margin: 26px 0 0;
  font-size: clamp(46px, 7.4vw, 104px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .92;
  text-transform: uppercase;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span {
  display: block;
  transform: translateY(102%);
  animation: rise .95s var(--ease) forwards;
}
.hero-title .line:nth-child(2) > span { animation-delay: .09s; }
.hero-title .line:nth-child(3) > span { animation-delay: .18s; }
@keyframes rise { to { transform: translateY(0); } }

.hero-title em {
  font-style: normal;
  color: var(--volt);
  position: relative;
}

.hero-sub {
  margin: 26px 0 0;
  max-width: 520px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--chalk);
  opacity: 0;
  animation: fade .8s var(--ease) .42s forwards;
}
@keyframes fade { to { opacity: 1; } }

.hero-acts {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 34px;
  opacity: 0;
  animation: fade .8s var(--ease) .54s forwards;
}

/* thin stat strip instead of a card row */
.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 54px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  opacity: 0;
  animation: fade .8s var(--ease) .66s forwards;
}
.hero-strip div {
  padding: 18px 30px 0 0;
  margin-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.hero-strip div:last-child { border-right: 0; }
.hero-strip b {
  display: block;
  font-size: 24px; font-weight: 800; color: var(--chalk);
  letter-spacing: -.04em;
}
.hero-strip span {
  display: block;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone); margin-top: 4px; font-weight: 700;
}

/* scroll cue, bottom left, moves with the page */
.cue {
  position: absolute;
  left: 48px; bottom: 34px;
  display: flex; align-items: center; gap: 11px;
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--chalk); font-weight: 700;
}
.cue i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(var(--volt), transparent);
  animation: drop 1.9s infinite var(--ease);
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  46%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------------------------------------------------
   WEEKLY SPECIALS, pinned top right
   -------------------------------------------------------------------------- */

.specials {
  position: absolute;
  top: 92px; right: 40px;
  width: 336px;
  z-index: 6;
  background: rgba(12, 15, 19, .82);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--steel);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(-14px);
  animation: dropIn .8s var(--ease) .3s forwards;
}
@keyframes dropIn { to { opacity: 1; transform: translateY(0); } }

.specials-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: linear-gradient(90deg, rgba(200, 240, 60, .16), transparent);
  border-bottom: 1px solid var(--iron);
}
.specials-head h2 {
  font-size: 11px; font-weight: 900; letter-spacing: .24em;
  color: var(--volt); text-transform: uppercase;
}
.specials-head .week {
  font-size: 9.5px; letter-spacing: .14em; color: var(--bone);
  font-weight: 700; text-transform: uppercase;
}

.specials-body { max-height: 400px; overflow-y: auto; }
.specials-body::-webkit-scrollbar { width: 4px; }
.specials-body::-webkit-scrollbar-thumb { background: var(--steel); }

.special {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background .18s var(--ease);
}
.special:last-child { border-bottom: 0; }
.special:hover { background: rgba(255, 255, 255, .035); }

/* contain, not cover. A tall photo or a screenshot must not lose its top
   and bottom just to fill a 54px square. */
.special .thumb {
  width: 54px; height: 54px;
  border-radius: var(--r-sm);
  background: var(--iron);
  object-fit: contain;
  padding: 3px;
  border: 1px solid var(--steel);
}
.special .nm {
  font-size: 12.5px; font-weight: 700; color: var(--chalk);
  line-height: 1.3; letter-spacing: -.01em;
}
.special .note { font-size: 10.5px; color: var(--bone); margin-top: 2px; }
.special .row {
  display: flex; align-items: baseline; gap: 8px; margin-top: 6px;
}
.special .now { font-size: 15px; font-weight: 800; color: var(--volt); letter-spacing: -.02em; }
.special .was { font-size: 11px; color: var(--ash); text-decoration: line-through; }
.special .save {
  margin-left: auto;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--void); background: var(--volt);
  padding: 2px 6px; border-radius: var(--r-xs);
}

.specials-foot {
  padding: 11px 16px;
  border-top: 1px solid var(--iron);
  background: rgba(0, 0, 0, .28);
}
.specials-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--bone);
}

/* --------------------------------------------------------------------------
   SCENE 2: what we make
   -------------------------------------------------------------------------- */

.section-head { max-width: 660px; margin-bottom: 54px; }
.section-head h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: -.045em;
}
.section-head p { margin: 18px 0 0; color: var(--bone); font-size: 15.5px; max-width: 520px; }

.depth {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.depth-card {
  position: relative;
  padding: 30px 26px 26px;
  background: linear-gradient(160deg, var(--carbon), var(--pitch));
  border: 1px solid var(--iron);
  border-radius: var(--r-lg);
  overflow: hidden;
  will-change: transform;
  transition: border-color .3s var(--ease);
}
.depth-card:hover { border-color: var(--ash); }
.depth-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 50% -10%, rgba(200, 240, 60, .1), transparent 70%);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.depth-card:hover::after { opacity: 1; }
.depth-card .n {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; color: var(--volt);
}
.depth-card h3 {
  margin: 16px 0 10px;
  font-size: 21px; letter-spacing: -.03em;
}
.depth-card p { margin: 0; color: var(--bone); font-size: 13.5px; line-height: 1.6; }
.depth-card .arrow {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--volt);
}
.depth-card .arrow svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.depth-card:hover .arrow svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   MARQUEE
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  padding: 26px 0;
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
  background: var(--pitch);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 44px;
  width: max-content;
  animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-track span {
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--volt);
  white-space: nowrap;
}
.marquee-track i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--volt-dim); flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   SCENE 3: how ordering works
   -------------------------------------------------------------------------- */

/* Solid panel behind every step. Photography is fine behind a headline,
   but body copy needs a real background to stay readable. */
.steps {
  display: grid;
  gap: 0;
  margin-top: 10px;
  background: var(--carbon);
  border: 1px solid var(--steel);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.step {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 28px;
  align-items: start;
  padding: 30px 32px;
  background: var(--carbon);
  border-top: 1px solid var(--iron);
  transition: background .3s var(--ease), padding-left .35s var(--ease);
}
.step:first-child { border-top: 0; }
.step:hover { background: var(--iron); padding-left: 44px; }
.step .num {
  font-family: var(--mono);
  font-size: 34px; font-weight: 700;
  color: var(--chalk);
  line-height: 1;
  transition: color .3s var(--ease);
}
.step:hover .num { color: var(--volt); }
.step h3 { font-size: 22px; letter-spacing: -.03em; }
.step p { margin: 9px 0 0; color: var(--bone); font-size: 14px; max-width: 620px; line-height: 1.62; }
.step .flag {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  color: var(--chalk); text-transform: uppercase;
  background: var(--iron);
  border: 1px solid var(--steel); border-radius: 999px;
  padding: 5px 11px; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SCENE 4: the statement
   -------------------------------------------------------------------------- */

.statement { text-align: left; max-width: 900px; }
.statement .lead {
  font-size: clamp(19px, 2.5vw, 27px);
  line-height: 1.44;
  color: var(--chalk);
  letter-spacing: -.025em;
  font-weight: 600;
}
.statement .hard {
  margin-top: 34px;
  padding: 22px 26px;
  border-left: 3px solid var(--volt);
  background: rgba(200, 240, 60, .05);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.6;
  color: var(--chalk);
  text-transform: uppercase;
}

.closer {
  margin-top: 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}

/* one line, and then the page is over */
.hairline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 16px 48px;
  border-top: 1px solid var(--iron);
  font-size: 11px;
  color: var(--bone);
  background: rgba(7, 9, 11, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hairline a { color: var(--chalk); }
.hairline a:hover { color: var(--volt); }
.hairline .sep { color: var(--steel); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .specials { width: 300px; right: 26px; top: 84px; }
  .scene-inner { padding: 110px 30px 84px; }
  .cue { left: 30px; }
  .hairline { padding: 16px 30px; }
}

@media (max-width: 980px) {
  .specials {
    position: relative;
    top: auto; right: auto;
    width: 100%;
    margin: 0 0 34px;
    animation: none; opacity: 1; transform: none;
  }
  .hero-copy { max-width: none; }
  .depth { grid-template-columns: 1fr; }
  .scene { min-height: auto; }
  .scene-inner { padding: 90px 20px 70px; }
  .scene-plain .scene-inner { padding: 64px 20px 64px; }
  .cue { display: none; }
  .step { grid-template-columns: 58px 1fr; padding: 24px 20px; }
  .step:hover { padding-left: 20px; }
  .step .flag { grid-column: 2; justify-self: start; margin-top: 12px; }
  .hairline { padding: 16px 20px; }
  /* On a narrow screen the copy runs the full width, so the veil is even
     rather than weighted to the left. Still lighter than solid, so the
     farm reads behind everything. */
  .veil {
    background:
      linear-gradient(180deg, rgba(7, 9, 11, .84) 0%, rgba(7, 9, 11, .7) 40%,
                      rgba(7, 9, 11, .7) 60%, rgba(7, 9, 11, .84) 100%);
  }
  .land-bg > img { object-position: center 38%; }
}