/* Factory / gallery page */
.fab-hero { position: relative; background: radial-gradient(120% 120% at 80% 0%, #2B5E42 0%, #1F4A33 40%, #12301F 100%); color: var(--cream); padding: 160px 0 120px; overflow: hidden; }
.fab-hero .eyebrow { color: #F2B8A8; margin-bottom: 18px; }
.fab-hero .display { font-size: clamp(3.4rem, 9.5vw, 8.6rem); position: relative; z-index: 1; }
.fab-hero .display em { font-style: normal; color: var(--amber); }
.fab-hero .lead { color: var(--mutedD); max-width: 540px; margin: 24px 0 0; position: relative; z-index: 1; }
.pipes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.pipes .p { fill: none; stroke: rgba(221, 232, 213, .09); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.pipes .f { fill: none; stroke: var(--amber); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 26; animation: flow 1.6s linear infinite; opacity: .75; }
.pipes .f.slow { animation-duration: 2.4s; opacity: .5; }
@keyframes flow { to { stroke-dashoffset: -56; } }
.scroll-cue { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; margin-top: 46px; color: var(--mutedD); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue i { width: 2px; height: 46px; background: linear-gradient(var(--amber), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* the pinned, horizontally scrolling process line */
.process { position: relative; background: var(--g950); color: var(--cream); }
.process-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.process-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; width: 100%; margin-bottom: 34px; }
.process-head .display { font-size: clamp(2rem, 4vw, 3.6rem); }
.process-head .eyebrow { color: #F2B8A8; margin-bottom: 12px; }
.pcount { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--mutedD); white-space: nowrap; }
.pcount span { color: var(--amber); }
.track-wrap { position: relative; }
.process-track { position: relative; display: flex; gap: 34px; padding: 0 max(28px, calc((100vw - 1280px) / 2 + 28px)); will-change: transform; }
.pipe { position: absolute; left: 0; top: 0; height: 40px; pointer-events: none; overflow: visible; }
.pipe .base { stroke: rgba(221, 232, 213, .12); stroke-width: 14; stroke-linecap: round; fill: none; }
.pipe .glass { stroke: rgba(221, 232, 213, .18); stroke-width: 16; fill: none; stroke-linecap: round; }
.pipe .juice { stroke: var(--amber); stroke-width: 9; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 10px rgba(227, 163, 60, .55)); }
.pipe .bub { stroke: #FFE7B5; stroke-width: 4; stroke-dasharray: 1 22; stroke-linecap: round; fill: none; animation: flow 1.2s linear infinite; }
.station { position: relative; flex: 0 0 min(76vw, 440px); display: flex; flex-direction: column; }
.station .frame { position: relative; height: min(40vh, 330px); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transform: scale(.94); opacity: .55; transition: transform .8s var(--ease), opacity .8s; }
.station.active .frame { transform: none; opacity: 1; }
.station .frame img { width: 100%; height: 100%; object-fit: cover; }
.station .node { position: relative; z-index: 1; width: 52px; height: 52px; margin: 22px 0 0 18px; border-radius: 50%; display: grid; place-items: center; background: var(--g800); border: 2px solid rgba(221, 232, 213, .25); font-family: var(--display); font-weight: 800; color: var(--mutedD); transition: background .5s, color .5s, border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.station.active .node { background: var(--amber); color: var(--ink); border-color: var(--amber); box-shadow: 0 0 0 8px rgba(227, 163, 60, .18), 0 0 30px rgba(227, 163, 60, .6); transform: scale(1.08); }
.station h3 { margin: 18px 0 0; font-family: var(--display); font-size: 28px; letter-spacing: -.02em; }
.station p { margin: 8px 0 0; color: var(--mutedD); max-width: 380px; }
.process-bar { position: relative; height: 3px; margin-top: 34px; background: rgba(221, 232, 213, .12); border-radius: 2px; overflow: hidden; }
.process-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--amber); }
@media (max-width: 820px) {
  .process { height: auto !important; }
  .process-sticky { position: relative; height: auto; padding: 90px 0; }
  .process-track { flex-direction: column; gap: 46px; transform: none !important; }
  .pipe, .process-bar { display: none; }
  .station { flex-basis: auto; padding-left: 24px; border-left: 3px solid rgba(221, 232, 213, .14); }
  .station.active { border-left-color: var(--amber); }
  .station .node { position: absolute; left: -28px; top: 0; margin: 0; }
}

/* photo gallery */
.gal { background: var(--cream); padding: 84px 0; }
.gal .section-head .display { color: var(--g800); }
.masonry { columns: 3 280px; column-gap: 18px; }
.masonry figure { break-inside: avoid; margin: 0 0 18px; border-radius: 20px; overflow: hidden; position: relative; cursor: zoom-in; background: var(--g800); }
.masonry figure .ph, .masonry figure img { position: relative; width: 100%; transition: transform .9s var(--ease); }
.masonry figure .ph { position: relative; aspect-ratio: var(--ar, 4 / 3); }
.masonry figure img { height: auto; aspect-ratio: var(--ar, auto); object-fit: cover; }
.masonry figure:hover .ph, .masonry figure:hover img { transform: scale(1.05); }
.masonry figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(14, 36, 24, .72); color: var(--cream); font-size: 14px; font-weight: 600; transform: translateY(8px); opacity: 0; transition: opacity .4s, transform .4s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.masonry figure:hover figcaption, .masonry figure:focus-visible figcaption { opacity: 1; transform: none; }
.masonry figure:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; color: var(--leaf); font-size: 13px; font-weight: 600; background: radial-gradient(90% 70% at 30% 20%, rgba(240, 184, 78, .22), transparent 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px), linear-gradient(140deg, #2B5E42, #1F4A33 60%, #163a27); }
.ph.light { color: var(--g800); background: radial-gradient(90% 70% at 30% 20%, rgba(227, 163, 60, .25), transparent 60%), repeating-linear-gradient(135deg, rgba(31, 74, 51, .05) 0 12px, transparent 12px 24px), linear-gradient(140deg, #EFEADB, #DDE8D5); }
.ph .ico { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); opacity: .55; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(9, 22, 15, .92); display: flex; align-items: center; justify-content: center; padding: 70px 80px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox .stage { position: relative; width: min(1100px, 100%); max-height: 100%; border-radius: 22px; overflow: hidden; transform: scale(.94); transition: transform .5s var(--ease); }
.lightbox.open .stage { transform: none; }
.lightbox .stage .ph { position: relative; aspect-ratio: 16 / 10; }
.lightbox .stage img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.lightbox .cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: var(--cream); font-weight: 600; }
.lightbox button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(247, 245, 239, .3); background: rgba(247, 245, 239, .06); color: var(--cream); cursor: pointer; font-size: 20px; }
.lightbox .x { top: 18px; right: 18px; }
.lightbox .prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lightbox { padding: 70px 14px; } .lightbox .prev, .lightbox .next { top: auto; bottom: 16px; transform: none; } }
.fab-cta { background: var(--g900); color: var(--cream); padding: 76px 0; text-align: center; }
.fab-cta .display { font-size: clamp(2.6rem, 6vw, 5rem); }
.fab-cta p { color: var(--mutedD); margin: 16px auto 30px; max-width: 520px; }
.masonry figcaption:empty { display: none; }

/* hero: the animated production line */
.fab-hero { padding: 130px 0 36px; }
.fab-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 60px; position: relative; z-index: 1; }
.fab-hero .display { font-size: clamp(2.8rem, 6.4vw, 5.8rem); }
.fab-head .lead { max-width: 430px; margin: 0 0 10px; }
.line-wrap { margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.line-wrap::-webkit-scrollbar { display: none; }
.line { width: 100%; max-width: 1600px; margin: 0 auto; }
.line svg { display: block; width: 100%; height: auto; overflow: visible; }
.line .floor { stroke: rgba(221, 232, 213, .22); stroke-width: 2; }
.line .pp { fill: none; stroke: #7D8983; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.line .pph { fill: none; stroke: #E9EEEB; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transform: translate(-2px, -2px); }
.line .pj { fill: none; stroke: #E3A33C; stroke-width: 4.5; filter: drop-shadow(0 0 3px rgba(240, 184, 78, .55)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 12; animation: lineflow 1s linear infinite; }
@keyframes lineflow { to { stroke-dashoffset: -22; } }
.line .elev { stroke: #6F7B74; stroke-width: 3; stroke-dasharray: 6 10; animation: lineflow-up .9s linear infinite; }
@keyframes lineflow-up { to { stroke-dashoffset: 16; } }
.line .spin { animation: lspin 1.4s linear infinite; }
.line .spin.fast { animation-duration: .5s; }
@keyframes lspin { to { transform: rotate(360deg); } }
.line .temp { font: 700 10px var(--body); fill: #F0B84E; }
.line .lb text { font: 600 15px var(--body); fill: var(--mutedD); transition: fill .4s; }
.line .lb .n { font-family: var(--display); font-weight: 800; fill: var(--amber); }
.line .lb circle { fill: rgba(221, 232, 213, .3); transition: fill .4s, r .4s; }
.line .lb.on text { fill: var(--cream); }
.line .lb.on circle { fill: var(--amber); r: 6; }
@media (max-width: 760px) {
  .fab-hero { padding: 110px 0 24px; }
  .line { width: 1100px; }
}
.line .tree { cursor: pointer; }
.line .crown { animation: sway 5.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.9deg); } }
.line .tree.shake { animation: shake .7s ease-out; }
@keyframes shake { 0% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(2.4deg); } 60% { transform: rotate(-1.5deg); } 80% { transform: rotate(.8deg); } 100% { transform: rotate(0); } }
.line .led { animation: led 1.6s steps(2, jump-none) infinite; }
@keyframes led { 50% { opacity: .35; } }
.line .temp.sm { font-size: 8px; }
.line .lb { cursor: help; }
@media (prefers-reduced-motion: reduce) {
  .line .pj, .line .spin, .line .crown, .line .led { animation: none; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .masonry { columns: 2 !important; column-gap: 10px !important; }
  .masonry figure { margin-bottom: 10px; border-radius: 14px; }
  .gal { padding: 56px 0 64px; }
  .gal .section-head .display { font-size: 2.3rem; }
  .fab-cta { padding: 56px 0; }
}

/* ---------- phone polish: factory ---------- */
@media (max-width: 760px) {
  .line .lb text { font-size: 21px; }
  .line .lb circle { r: 6; }
  .process-head .eyebrow { white-space: nowrap; }
  .process-head .display { font-size: 2rem; }
  .pcount { font-size: 22px; }
}

/* photos of the process steps: always a 4:3 frame (the shape of a phone photo held sideways), so a 4:3 photo is shown whole on every screen */
.station { flex-basis: min(76vw, 440px, 53vh); }
.station .frame { height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 820px) { .station { flex-basis: auto; } }