/* OD Nutra remake: frame 10, "Packaging for every format", and the footer (Lino 2026-11-11).
   Both come from the second OD Nutra project and are restyled like frames 7 to 9: white page,
   navy ink, the lead words in teal, the uppercase eyebrow, navy pills and buttons, Apple-grey cards.

   Frame 10: five photo panels in a row. The open one is wide and shows a dark glass spec card
   (what it holds, sizes), its count, its name and one line over a midnight scrim; the others stay
   narrow strips with the name turned on its side. A panel opens on click, on hover (mouse only,
   760px and wider) and with the arrow keys. The pills filter by powders or capsules.
   Below 760px the strips become 76px grey rows with a photo thumbnail.

   Footer: wordmark, one line and contact, three link columns, the legal row, then the giant
   wordmark cropped by the page end; it rises into place once the footer is on screen, sized to the
   same side margins as the rest of the page, and catches the falling pills. */

.pkg, .ft {
  --pk-x: calc(var(--frame) + var(--pad-x));   /* lines up with the navbar's logo */
  --pk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pk-grey: #f2f4f5;
  --pk-night: 7 15 31;                          /* the hero's midnight blue, as rgb channels */
  position: relative; z-index: 3; background: var(--white);
}
.pkg {
  display: flex; flex-direction: column; justify-content: center; min-height: 100svh; box-sizing: border-box;
  padding: clamp(128px, 16svh, 168px) var(--pk-x) clamp(72px, 9svh, 112px); overflow-x: clip;
}
.pkg:focus, .ft:focus { outline: none; }

/* ---------- Head ---------- */
.pkg__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.pkg__eyebrow { margin: 0 0 clamp(2px, 0.4vw, 6px); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }   /* the frame 7 eyebrow, no pill (Lino 2026-11-11) */
.pkg__title {
  margin: 0; font-size: clamp(2.125rem, 0.9rem + 2.7vw, 4.25rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.045em;
  color: var(--navy-900);
}
.pkg__title em { font-style: normal; color: var(--teal-700); }   /* 6.6:1 on white */

.pkg__pills { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.pkg__pills button {
  height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em;
  color: var(--navy-900); background: var(--white); box-shadow: inset 0 0 0 1px rgb(15 35 64 / 0.16);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.pkg__pills button:hover { box-shadow: inset 0 0 0 1px rgb(15 35 64 / 0.42); }
.pkg__pills button[aria-pressed="true"] { color: var(--white); background: var(--navy-900); box-shadow: none; }   /* 15.9:1 */
.pkg__pills button[aria-pressed="true"]:hover { background: var(--navy-800); }

/* ---------- Gallery ---------- */
.pack-gallery {
  display: flex; gap: 12px; height: clamp(440px, min(40vw, 100svh - 300px), 620px);
  margin: clamp(40px, 6svh, 72px) 0 0; padding: 0; list-style: none;
}
.pack-item {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0;
  border-radius: var(--scene-r); background: rgb(var(--pk-night)); color: var(--white);
  transition: flex-grow 0.9s var(--pk-ease);
}
.pack-item.is-open { flex-grow: 4.2; }
.pack-item[hidden] { display: none; }
.pack-item__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pack-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.1s var(--pk-ease); }
.pack-item.is-open .pack-item__media img { transform: none; }
/* the open panel: a midnight scrim under its title; the closed strips: darker toward their side name */
.pack-item::before, .pack-item::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity 0.5s ease; }
.pack-item::before { background: linear-gradient(to top, rgb(var(--pk-night) / 0.82) 0, rgb(var(--pk-night) / 0.42) 26%, rgb(var(--pk-night) / 0) 52%); }
.pack-item::after { background: linear-gradient(to top, rgb(var(--pk-night) / 0.8) 0, rgb(var(--pk-night) / 0.34) 44%, rgb(var(--pk-night) / 0.14) 100%); }
.pack-item.is-open::after { opacity: 0; }

.pack-item__btn { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.pack-item__btn:focus-visible { outline: 2px solid var(--white); outline-offset: -5px; }
.pack-item.is-open .pack-item__btn { cursor: default; }
.pack-item__num {
  position: absolute; top: 20px; left: 20px; font-size: 0.875rem; color: rgb(255 255 255 / 0.86);
  font-variant-numeric: tabular-nums; transition: opacity 0.4s ease;
}
.pack-item__side {
  position: absolute; left: 18px; bottom: 24px; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem); font-weight: 500; letter-spacing: -0.015em;
  transition: opacity 0.4s ease;
}
.pack-item.is-open .pack-item__side, .pack-item.is-open .pack-item__num { opacity: 0; }

.pack-item__open {
  position: absolute; inset: clamp(20px, 1.8vw, 28px); display: flex; flex-direction: column; justify-content: space-between;
  min-width: 300px; opacity: 0; transform: translate3d(0, 10px, 0); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.6s var(--pk-ease);
}
.pack-item.is-open .pack-item__open { opacity: 1; transform: none; transition-delay: 220ms; }
.pack-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pack-item__count { padding-top: 10px; font-size: 0.875rem; color: rgb(255 255 255 / 0.9); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 8px rgb(var(--pk-night) / 0.45); }
/* Lino's photos (2026-11-12) are light at the top, where white numbers fell to about 2:1: the
   panel numbers and the open counter use navy ink there instead (about 8:1 on those backdrops). */
.pack-item__num, .pack-item__count { color: var(--navy-900); text-shadow: none; }
.pack-item__specs {   /* dark glass, like the frame 6 card (Lino 2026-11-11): labels above values, two columns */
  display: grid; grid-template-columns: repeat(2, auto); width: fit-content; max-width: 100%; margin: 0; padding: 14px 6px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, rgb(var(--pk-night) / 0.50), rgb(var(--pk-night) / 0.30) 70%);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 30px 60px -36px rgb(var(--pk-night) / 0.75);
}
.pack-item__specs > div { display: grid; gap: 6px; min-width: 0; padding: 2px 18px; }
.pack-item__specs > div + div { border-left: 1px solid rgb(255 255 255 / 0.16); }
.pack-item__specs dt {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.78);
}
.pack-item__specs dd { margin: 0; white-space: nowrap; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--white); }
.pack-item__icon { width: 15px; height: 15px; flex: none; color: var(--aqua-cta); }
.pack-item__name {
  margin: 0; font-size: clamp(1.875rem, 1rem + 1.8vw, 3rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em;
  text-shadow: 0 1px 14px rgb(var(--pk-night) / 0.35);
}
.pack-item__desc { margin: 10px 0 0; max-width: 26em; font-size: var(--text-body); line-height: 1.4; letter-spacing: -0.01em; color: rgb(255 255 255 / 0.9); }

/* ---------- Entrance: the headline rises out of its line box, the rest comes up after it ---------- */
.pkg .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.pkg .ln > span { display: inline-block; transition: transform 1s var(--pk-ease); }
.pkg__eyebrow, .pkg__pills, .pack-gallery { transition: opacity 0.8s ease, transform 1s var(--pk-ease); }
.pkg__pills { transition-delay: 160ms; }
.pack-gallery { transition-delay: 260ms; }
.js .pkg:not(.is-in) .ln > span { transform: translate3d(0, 105%, 0); }
.js .pkg:not(.is-in) .pkg__eyebrow, .js .pkg:not(.is-in) .pkg__pills { opacity: 0; transform: translate3d(0, 16px, 0); }
.js .pkg:not(.is-in) .pack-gallery { opacity: 0; transform: translate3d(0, 40px, 0); }

/* Stronger entrance (Lino 2026-11-11, "se siente plana"): the pills pop in one by one, the panels
   rise and unveil from the bottom one after another, and only then does the first one open wide.
   .is-settled (added by the script once the entrance is over) removes the entrance delays, so
   hovering and clicking stay immediate. */
.pack-gallery { transition-duration: 0.4s, 0.4s; }
.pack-item:nth-child(2) { --i: 1; } .pack-item:nth-child(3) { --i: 2; } .pack-item:nth-child(4) { --i: 3; } .pack-item:nth-child(5) { --i: 4; }
.pkg__pills button:nth-child(2) { --i: 1; } .pkg__pills button:nth-child(3) { --i: 2; }
.js .pkg:not(.is-in) .pack-item { clip-path: inset(100% 0 0 0 round var(--scene-r)); }
.js .pkg:not(.is-in) .pack-item.is-open { flex-grow: 1; }
.pkg.is-in:not(.is-settled) .pack-item { transition-delay: 0.95s; }
.pkg.is-in .pack-item { animation: pack-item-in 1.15s var(--pk-ease) calc(220ms + var(--i, 0) * 90ms) backwards; }
@keyframes pack-item-in {
  from { clip-path: inset(100% 0 0 0 round var(--scene-r)); translate: 0 90px; }
  to   { clip-path: inset(0 0 0 0 round var(--scene-r)); translate: 0 0; }
}
.pkg.is-in .pack-item__media img { animation: pack-media-in 1.6s var(--pk-ease) calc(220ms + var(--i, 0) * 90ms) backwards; }
@keyframes pack-media-in { from { scale: 1.25; } to { scale: 1; } }
.pkg.is-in .pkg__pills button { animation: pill-in 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) calc(160ms + var(--i, 0) * 80ms) backwards; }
@keyframes pill-in { from { opacity: 0; translate: 0 18px; scale: 0.8; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .pkg:not(.is-in) .pack-item { clip-path: none; }
  .js .pkg:not(.is-in) .pack-item.is-open { flex-grow: 4.2; }
  .pkg.is-in .pack-item, .pkg.is-in .pack-item__media img, .pkg.is-in .pkg__pills button { animation: none; }
  .pkg.is-in:not(.is-settled) .pack-item { transition-delay: 0s; }
}

/* ---------- Footer ---------- */
.ft { padding: clamp(80px, 11svh, 128px) var(--pk-x) 0; overflow: hidden; border-top: 1px solid rgb(15 35 64 / 0.08); }
/* Brand on the left, four columns spread across the rest (Lino 2026-11-11, second pass: the empty
   middle went away by moving the address, phone and email into a Contact column and putting the
   social links under the brand line) */
.ft__top { display: grid; grid-template-columns: minmax(250px, 0.85fr) minmax(0, 2.6fr); gap: clamp(48px, 6vw, 112px); }
.ft__mark { font-size: 28px; }
.ft__line { margin: 18px 0 0; max-width: 24em; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-body); }
.ft__social { display: flex; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.ft__social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--navy-900);
  box-shadow: inset 0 0 0 1px rgb(15 35 64 / 0.14); transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.ft__social a:hover { background: var(--navy-900); color: var(--white); box-shadow: inset 0 0 0 1px var(--navy-900); }
.ft__social a:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 3px; }
.ft__social svg { width: 18px; height: 18px; }
.ft__contact { display: grid; gap: 14px; font-style: normal; }
.ft__contact a, .ft__contact span {
  display: inline-flex; align-items: flex-start; gap: 10px; width: fit-content;
  font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--navy-900); text-decoration: none; transition: color 0.25s ease;
}
.ft__contact a:hover { color: var(--teal-700); }
.ft__contact svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--teal-700); }
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 36px clamp(24px, 3vw, 56px); }
.ft__cols h3 { margin: 0 0 18px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }   /* 7.6:1 */
.ft__cols ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ft__cols a { font-size: 1rem; letter-spacing: -0.01em; color: var(--navy-900); text-decoration: none; text-underline-offset: 4px; transition: color 0.25s ease; }
.ft__cols a:hover { color: var(--teal-700); text-decoration: underline; }
.ft__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid rgb(15 35 64 / 0.1);
  font-size: 0.875rem; line-height: 1.55; color: var(--ink-body);
}
.ft__bottom p { margin: 0; max-width: 62em; }
.ft__giant {   /* the script sizes it so its letters span exactly the footer's content width */
  margin: clamp(96px, 11vw, 176px) 0 0; overflow: hidden; text-align: center; white-space: nowrap; user-select: none;
  font-size: clamp(76px, 20.5vw, 330px); line-height: 0.74; letter-spacing: -0.05em;
}
.ft__giant-in { position: relative; left: var(--gx, 0px); display: inline-block; transform: translateY(4%); transition: transform 1.3s var(--pk-ease); }

/* Falling pills (Lino 2026-11-11, after the falling-tags footer he sent): once the giant wordmark
   is on screen, dust condenses into capsules, softgels and tablets while it falls; they land on the
   letters and can be dragged, thrown and nudged with the pointer. Drawn on one canvas by the
   footer script with Matter.js physics; the canvas never takes clicks, the footer hit-tests pills. */
.ft__pills { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.ft.is-grab { cursor: grab; }
.ft.is-grabbing, .ft.is-grabbing * { cursor: grabbing; user-select: none; }
.js .ft:not(.is-in) .ft__giant-in { transform: translateY(70%); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1100px) {
  .ft__top { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .ft__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
}
@media (max-width: 900px) {
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 1000px) {
  .pkg__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pack-gallery { height: 520px; gap: 8px; }
  .pack-item.is-open { flex-grow: 5; }
}
@media (max-width: 759px) {
  .pkg, .ft { --pk-x: calc(var(--frame) + 16px); }
  .pkg { min-height: 0; padding-block: 104px 72px; }
  .pkg__pills button { height: 40px; padding: 0 16px; }
  .pack-gallery { flex-direction: column; height: auto; margin-top: 32px; }
  .pack-item { flex: none; height: 76px; transition: height 0.8s var(--pk-ease), background-color 0.4s ease; }
  .pack-item:not(.is-open) { background: var(--pk-grey); color: var(--navy-900); }
  .pack-item.is-open { height: min(116vw, 520px); }
  /* a 76px slice of the photo reads as a slab: closed rows show it as a thumbnail */
  .pack-item:not(.is-open) .pack-item__media { inset: 8px 8px 8px auto; width: 60px; border-radius: 12px; }
  .pack-item:not(.is-open)::before, .pack-item:not(.is-open)::after { opacity: 0; }
  .pack-item__side { writing-mode: horizontal-tb; transform: none; left: 56px; bottom: auto; top: 50%; translate: 0 -50%; }
  .pack-item__num { top: 50%; left: 20px; translate: 0 -50%; }
  .pack-item:not(.is-open) .pack-item__num { color: var(--navy-700); }
  .pack-item:not(.is-open) .pack-item__btn:focus-visible { outline-color: var(--teal-700); }
  .pack-item__open { inset: 20px; min-width: 0; }
  .ft { padding-top: 72px; }
  .ft__cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .ft__cols > :last-child { grid-column: 1 / -1; }
  .ft__bottom { margin-top: 48px; }
}
@media (max-width: 419px) {
  /* the counter clips beside the spec card at 320px; the open row already says where you are */
  .pack-item__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pkg__pills button, .pack-item, .pack-item::before, .pack-item::after, .pack-item__num, .pack-item__side, .pack-item__open,
  .pack-item__media img, .pkg .ln > span, .pkg__eyebrow, .pkg__pills, .pack-gallery, .ft__giant-in { transition: none !important; }
  .js .pkg:not(.is-in) .ln > span, .js .pkg:not(.is-in) .pkg__eyebrow, .js .pkg:not(.is-in) .pkg__pills,
  .js .pkg:not(.is-in) .pack-gallery { opacity: 1; transform: none; }
  .js .ft:not(.is-in) .ft__giant-in { transform: translateY(4%); }
}