/* ============================================================
   nutrition.css — Nutrition & Dietitian Services page
   All page-specific classes namespaced nut-*
   Depends on: ../styles.css for base variables & fonts
   ============================================================ */

/* ── SHARED SECTION HEADINGS ──────────────────────────────── */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--type-caption);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 16px;
}
.section-tag-line {
    width: 26px; height: 1.5px;
    background: var(--teal);
    opacity: 0.6;
}
.section-h2 {
    font-family: var(--font-serif);
    font-size: var(--type-h1);
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 14px;
}
.section-h2 em { font-style: italic; color: var(--teal); }

/* ── HERO ─────────────────────────────────────────────────── */
.nut-hero {
    background: linear-gradient(rgba(26,36,32,0.72), rgba(26,36,32,0.82)),
                url('https://cdn.livea.com/food.png') center/cover no-repeat;
    min-height: 90vh;
    padding-top: 176px;
    position: relative;
    overflow: hidden;
}
body.has-announcement .nut-hero { padding-top: 216px; }

.nut-hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(49,184,152,.07);
    pointer-events: none;
}
.nut-hero-ring-1 { width: 820px; height: 820px; top: -35%; right: -18%; }
.nut-hero-ring-2 { width: 580px; height: 580px; top: -18%; right: -6%; }

.nut-hero-glow {
    position: absolute;
    width: 520px; height: 520px;
    top: -25%; right: -10%;
    background: radial-gradient(circle, rgba(49,184,152,.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.nut-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 80px 48px;
    min-height: 90vh;
}

.nut-hero-left {
    position: relative; z-index: 2;
    opacity: 0; animation: nut-fade-up .7s .1s forwards;
}
.nut-hero-right {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 24px;
    opacity: 0; animation: nut-fade-in .8s .28s forwards;
}

@keyframes nut-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes nut-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Breadcrumb */
.nut-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--type-caption); text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.55); margin-bottom: 28px;
}
.nut-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s; }
.nut-breadcrumb a:hover { color: rgba(255,255,255,.5); }
.nut-breadcrumb-sep { opacity: .3; }
.nut-breadcrumb-current { color: rgba(255,255,255,.65); }

/* Hero headings — the small keyword line is the page's h1; the large
   display line is styled text so the design stays the same. */
.nut-hero .nut-hero-kicker {
    font-family: var(--font-sans);
    line-height: 1.4;
    margin: 0 0 16px;
}
.nut-hero-title {
    font-family: var(--font-serif);
    font-size: var(--type-display);
    font-weight: 400; line-height: 1.04;
    color: white; margin-bottom: 16px;
}
.nut-hero-title em { font-style: italic; color: var(--teal-light); }

.nut-hero-subtitle {
    font-size: var(--type-body); font-weight: 400; line-height: var(--lh-body);
    color: white; max-width: 460px; margin-bottom: 32px;
}

/* Hero buttons */
.nut-hero-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.nut-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--teal); color: white; padding: 14px 30px;
    border-radius: 100px; font-size: 13px; font-weight: 500;
    text-decoration: none; box-shadow: 0 6px 20px rgba(49,184,152,.35);
    transition: background .25s, transform .2s, box-shadow .3s;
    position: relative; overflow: hidden;
}
.nut-btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: translateX(-100%); transition: transform .6s;
}
.nut-btn-primary:hover::before { transform: translateX(100%); }
.nut-btn-primary:hover { background: var(--teal-dim); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(49,184,152,.45); }

.nut-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid rgba(255,255,255,.18); color: rgba(255,255,255,.58);
    padding: 13px 26px; border-radius: 100px; font-size: 13px;
    font-weight: 400; text-decoration: none;
    transition: border-color .25s, color .25s, background .25s;
}
.nut-btn-ghost:hover {
    border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.05);
}

/* Hero offer link */
.nut-hero-offer {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: -16px 0 36px;
    font-size: 14px; color: rgba(255,255,255,.85); text-decoration: none;
    transition: color .2s;
}
.nut-hero-offer strong { font-weight: 600; color: white; }
.nut-hero-offer:hover { color: white; }
.nut-hero-offer svg { color: var(--teal-light); transition: transform .2s; }
.nut-hero-offer:hover svg { transform: translateX(3px); }
.nut-hero-offer-tag {
    font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: var(--forest); background: var(--teal-light);
    padding: 4px 10px; border-radius: 100px;
}

/* Hero proof bar */
.nut-hero-proof {
    display: flex; align-items: center; gap: 28px;
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06);
}
.nut-proof-val {
    font-family: var(--font-serif); font-size: 28px; font-weight: 500;
    color: var(--teal-light); line-height: 1.1;
}
.nut-proof-lbl {
    font-size: var(--type-caption); font-weight: 400; letter-spacing: .03em;
    color: rgba(255,255,255,.65); margin-top: 2px;
}
.nut-proof-sep {
    width: 1px; height: 32px;
    background: rgba(255,255,255,.08);
}

/* ── INCLUDED CARD (floating, hero right) ─────────────────── */
.nut-included-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 28px 24px;
}
.nut-ic-header {
    font-family: var(--font-serif); font-size: 18px; font-weight: 500;
    color: white; margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.nut-ic-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; color: rgba(255,255,255,.65);
    font-size: var(--type-body); font-weight: 400;
}
.nut-ic-item svg { color: var(--teal-light); flex-shrink: 0; }

/* ── MINI TESTIMONIAL (floating, hero right) ──────────────── */
.nut-mini-testi {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 20px 24px;
}
.nut-mini-stars { color: var(--teal-light); margin-bottom: 10px; display: flex; gap: 2px; }
.nut-mini-quote {
    font-family: var(--font-serif); font-size: var(--type-body); font-weight: 400;
    font-style: italic; line-height: 1.6; color: rgba(255,255,255,.7);
    margin: 0;
}
.nut-mini-who {
    font-size: var(--type-caption); color: rgba(255,255,255,.65);
    margin-top: 10px; font-weight: 400;
}

/* ── HOW IT WORKS — sticky heading + big-number rows (H4 + C3) ── */
.nut-how {
    padding: 120px 0;
    background: var(--off-white);
}
.nut-how-grid {
    display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start;
}
.nut-how-head { position: sticky; top: 140px; }
.nut-how-head p {
    font-size: var(--type-body); line-height: var(--lh-body); color: var(--text-medium);
    max-width: 420px; margin: 0;
}
.nut-how-steps { list-style: none; margin: 0; padding: 0; }
.nut-how-steps li {
    display: grid; grid-template-columns: 120px 1fr; gap: 8px;
    padding: 40px 0; border-top: 1px solid var(--sand-deep);
}
.nut-how-steps li:last-child { border-bottom: 1px solid var(--sand-deep); }
.nut-how-num {
    font-family: var(--font-serif); font-size: 88px; font-weight: 400; line-height: .85;
    color: var(--teal);
}
.nut-how-steps h3 {
    font-family: var(--font-serif); font-size: 30px; font-weight: 500; line-height: 1.15;
    color: var(--text-dark); margin: 0 0 12px;
}
.nut-how-steps p {
    font-size: var(--type-body); line-height: var(--lh-body); color: var(--text-medium); margin: 0;
}

/* ── WHY NUTRITION — left header + editorial list on forest (H2 + C2) ── */
.nut-why {
    padding: 120px 0;
    background: var(--forest);
}
.nut-why-head { max-width: 760px; margin-bottom: 64px; }
.nut-why-head .section-h2 { color: white; font-size: clamp(36px, 4vw, 56px); }
.nut-why-head p { font-size: 18px; line-height: var(--lh-body); color: white; margin: 0; max-width: 620px; }
.nut-why-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px;
}
.nut-why-list li { padding: 32px 0; border-top: 1px solid rgba(255,255,255,.18); position: relative; }
.nut-why-list li::before { content: ''; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--teal-light); }
.nut-why-num {
    display: block; margin-bottom: 14px;
    font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--teal-light);
}
.nut-why-list h3 {
    font-family: var(--font-serif); font-size: 26px; font-weight: 500;
    color: white; margin: 0 0 10px;
}
.nut-why-list p { font-size: var(--type-body); line-height: var(--lh-body); color: white; margin: 0; }

/* ── SPLIT HEADER (H3): heading left, text/link right ───────── */
.nut-split-head {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
    margin-bottom: 48px;
}
.nut-split-head .section-h2 { margin: 0; }
.nut-split-head p {
    font-size: var(--type-body); line-height: var(--lh-body); color: var(--text-medium); margin: 0;
}
.nut-text-link {
    display: inline-block; margin-top: 14px;
    font-size: 14px; font-weight: 500; color: var(--teal-dim); text-decoration: none;
}
.nut-text-link:hover { text-decoration: underline; }

/* ── TEAM — large portraits ─────────────────────────────── */
.nut-team {
    padding: 120px 0;
    background: var(--off-white);
}
.nut-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.nut-person { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.nut-person img {
    width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
    border-radius: var(--radius-lg); display: block;
}
.nut-person h3 {
    font-family: var(--font-serif); font-size: 28px; font-weight: 500;
    color: var(--text-dark); margin: 4px 0 4px;
}
.nut-person-role {
    font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--teal-dim); margin-bottom: 16px;
}
.nut-person p { font-size: var(--type-body); line-height: var(--lh-body); color: var(--text-medium); margin: 0; }

/* ── NUTRITION + MEDICAL INTEGRATION ──────────────────────── */
.nut-integration {
    padding: 120px 0;
    background: var(--sand-mid);
}

.nut-int-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 88px;
    align-items: center;
}

.nut-int-left h2 { margin-bottom: 24px; }
.nut-int-left > p {
    font-size: var(--type-body); font-weight: 400; line-height: var(--lh-body);
    color: var(--text-medium); margin-bottom: 16px; max-width: 540px;
}

/* Editorial list: hairlines and numerals instead of boxed icon cards */
.nut-int-list {
    list-style: none; margin: 40px 0 0; padding: 0;
    border-top: 1px solid rgba(26,36,32,.14);
}
.nut-int-list li {
    padding: 22px 0 22px 28px; position: relative;
    border-bottom: 1px solid rgba(26,36,32,.14);
}
.nut-int-list li::before {
    content: ''; position: absolute; left: 0; top: 34px;
    width: 12px; height: 1.5px; background: var(--teal);
}
.nut-int-num {
    font-family: var(--font-serif); font-style: italic; font-size: 26px;
    color: var(--teal-dim); line-height: 1;
}
.nut-int-list h3 {
    font-family: var(--font-serif); font-size: 24px; font-weight: 500;
    color: var(--text-dark); line-height: 1.2; margin: 0 0 4px;
}
.nut-int-list p {
    font-size: 15px; color: var(--text-medium); margin: 0;
}

/* Photo with an offset forest block behind it */
.nut-int-right { position: relative; padding: 0 0 28px 28px; }
.nut-int-figure { position: relative; margin: 0; }
.nut-int-figure::before {
    content: ''; position: absolute; z-index: 0;
    left: -28px; bottom: -28px; width: 70%; height: 70%;
    background: var(--forest); border-radius: var(--radius-lg);
}
.nut-int-figure img {
    position: relative; z-index: 1; display: block;
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% center;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(26,36,32,.18);
}
.nut-int-figure figcaption {
    position: absolute; z-index: 2; right: 20px; bottom: 20px;
    background: rgba(253,250,247,.94);
    padding: 10px 18px; border-radius: 100px;
    font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--forest);
}

/* ── RECIPES PREVIEW ──────────────────────────────────────── */
.nut-recipes {
    padding: 80px 0;
    background: var(--off-white);
}

/* Real recipe cards */
.nut-recipe-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    margin-top: 48px;
}
.nut-recipe-card {
    display: flex; flex-direction: column;
    background: var(--off-white); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 10px 30px rgba(26,36,32,.08);
    text-decoration: none; color: inherit;
    transition: transform .25s, box-shadow .25s;
}
.nut-recipe-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(26,36,32,.14); }
.nut-recipe-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.nut-recipe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.nut-recipe-card:hover .nut-recipe-photo img { transform: scale(1.05); }
.nut-recipe-info { padding: 18px 20px 22px; }
.nut-recipe-meta {
    font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: var(--teal-dim);
}
.nut-recipe-info h3 {
    font-family: var(--font-serif); font-size: 21px; font-weight: 500; line-height: 1.25;
    color: var(--text-dark); margin: 6px 0 0;
}

.nut-recipe-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.nut-recipe-cat {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    text-align: center;
    text-decoration: none;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.nut-recipe-cat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(49,184,152,.25);
}

.nut-recipe-cat-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(49,184,152,.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal); margin: 0 auto 18px;
}
.nut-recipe-cat-icon.rose {
    background: rgba(184,137,122,.08);
    color: var(--rose-gold);
}
.nut-recipe-cat-icon.forest {
    background: rgba(28,56,50,.06);
    color: var(--forest);
}

.nut-recipe-cat h3 {
    font-family: var(--font-serif); font-size: var(--type-h3); font-weight: 500;
    color: var(--text-dark); margin-bottom: 6px;
}
.nut-recipe-cat p {
    font-size: var(--type-small); font-weight: 400; line-height: 1.6;
    color: var(--muted);
}

/* ── SHARED SECTION PRIMITIVES (scoped overrides) ─────────── */
.nut-how .section-header,
.nut-team .section-header,
.nut-recipes .section-header { text-align: center; }

/* Better Together uses a 2-col layout — left-align its text */
.nut-integration .section-tag,
.nut-integration .section-h2,
.nut-integration p { text-align: left; }

.nut-why .section-header { text-align: center; }

/* ── REVEAL / ANIMATION DELAYS ────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s cubic-bezier(.22,1,.36,1),
                transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view,
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .18s; }
.reveal.d3 { transition-delay: .28s; }
.reveal.d4 { transition-delay: .38s; }

/* ── PROMO BANNER ────────────────────────────────────────── */

/* ── CTA SECTION (override global with hero image) */
.cta-section {
    background: linear-gradient(rgba(26,36,32,0.75), rgba(26,36,32,0.82)),
                url('https://cdn.livea.com/herbs.jpg') center/cover no-repeat;
}

/* ── CURRENT OFFER ───────────────────────────────────────── */
.nut-offer {
    padding: 96px 0 0;
    background: var(--off-white);
}
.nut-offer-card {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Same teal panel as the homepage "Take the first step" banner */
    background: linear-gradient(135deg, rgba(49,184,152,0.85) 0%, rgba(38,149,126,0.90) 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(26,36,32,.14);
    padding: 64px 72px;
}
.nut-offer-card::before,
.nut-offer-card::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.nut-offer-card::before {
    top: -50%; right: 5%; width: 420px; height: 420px;
    background: rgba(255,255,255,0.06);
}
.nut-offer-card::after {
    bottom: -60%; right: 30%; width: 260px; height: 260px;
    background: rgba(255,255,255,0.04);
}
.nut-offer-copy, .nut-offer-side { position: relative; z-index: 1; }
.nut-offer-card .section-tag { color: white; }
.nut-offer-card .section-tag-line { background: white; }
.nut-offer-card .section-h2 { color: white; }
.nut-offer-card .section-h2 em { color: white; }
.nut-offer-copy .section-p { margin-bottom: 0; color: rgba(255,255,255,.92); }
.nut-offer-side {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding-left: 48px;
    border-left: 1px solid rgba(255,255,255,.25);
}
.nut-offer-price { display: flex; align-items: baseline; gap: 4px; }
.nut-offer-amt {
    font-family: var(--font-serif); font-size: 72px; line-height: 1;
    font-weight: 500; color: white;
}
.nut-offer-per { font-size: 16px; color: rgba(255,255,255,.85); }
.nut-offer-card .nut-btn-primary {
    background: white; color: var(--teal-dim); font-weight: 600;
    box-shadow: 0 10px 28px rgba(26,36,32,.16);
}
.nut-offer-card .nut-btn-primary:hover { background: var(--off-white); color: var(--forest); }
.nut-offer-call {
    font-size: 14px; color: rgba(255,255,255,.9); text-decoration: none;
}
.nut-offer-call:hover { color: white; text-decoration: underline; }

/* ── TESTIMONIAL CAROUSEL ─────────────────────────────────── */
.nut-testi {
    margin-top: 96px;
    padding: 88px 0 72px;
    background: linear-gradient(180deg, rgba(49,184,152,.10) 0%, rgba(49,184,152,.04) 100%);
}
.nut-testi .section-header { text-align: center; }
.nut-testi-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 48px) / 3);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 8px 2px 24px;
    margin-top: 40px;
}
.nut-testi-track::-webkit-scrollbar { display: none; }
.nut-testi-card {
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    position: relative;
    margin: 0;
    background: var(--off-white);
    border: 1px solid var(--sand-deep);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(26,36,32,.06);
    padding: 32px 28px;
}
.nut-testi-card::before {
    content: '\201C';
    position: absolute; top: 6px; right: 26px;
    font-family: var(--font-serif); font-size: 120px; line-height: 1;
    color: var(--teal); opacity: .18; pointer-events: none;
}
.nut-testi-card { border-top: 4px solid var(--teal); }
.nut-testi-stars { color: var(--teal); letter-spacing: 3px; font-size: 14px; margin-bottom: 16px; }
.nut-testi-card blockquote {
    font-family: var(--font-serif); font-size: 21px; font-style: italic;
    font-weight: 400; line-height: 1.45; color: var(--text-dark);
    margin: 0 0 24px; flex: 1;
}
.nut-testi-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.nut-testi-card figcaption strong { font-size: 15px; font-weight: 500; color: var(--text-dark); }
.nut-testi-card figcaption span { font-size: 13px; color: var(--muted); }
.nut-testi-nav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.nut-testi-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: white; color: var(--forest);
    border: 1.5px solid var(--sand-deep); cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.nut-testi-btn:hover { background: var(--forest); color: white; border-color: var(--forest); }

/* ── REAL RESULTS (photos from /success-stories/) ──────────── */
.nut-results { margin-top: 64px; }
.nut-results-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; margin-bottom: 24px;
}
.nut-results-head h3 {
    font-family: var(--font-serif); font-size: 32px; font-weight: 400;
    color: var(--text-dark); margin: 0;
}
.nut-results-head a { font-size: 14px; font-weight: 500; color: var(--teal-dim); text-decoration: none; }
.nut-results-head a:hover { text-decoration: underline; }
.nut-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nut-result-card {
    display: flex; flex-direction: column;
    background: var(--off-white); border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 10px 30px rgba(26,36,32,.08);
    text-decoration: none; color: inherit;
    transition: transform .25s, box-shadow .25s;
}
.nut-result-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(26,36,32,.14); }
.nut-result-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
/* Photos are framed tight to the head, so crop from the floor, never the top */
.nut-result-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.nut-result-badge {
    position: absolute; left: 16px; bottom: 16px;
    background: var(--forest); color: white;
    font-family: var(--font-serif); font-size: 22px; font-weight: 500;
    padding: 6px 16px; border-radius: 100px;
}
.nut-result-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 2px; }
.nut-result-body p {
    font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.45;
    color: var(--text-dark); margin: 0 0 14px;
}
.nut-result-body strong { font-size: 15px; font-weight: 500; color: var(--text-dark); }
.nut-result-body span { font-size: 13px; color: var(--muted); }
.nut-results-note { font-size: 12px; color: var(--muted); margin: 16px 0 0; }

/* ── VIDEO STORY ─────────────────────────────────────────── */
.nut-story {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center;
    margin-top: 72px; padding: 40px;
    background: var(--forest); border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(26,36,32,.18);
}
.nut-story-video {
    position: relative; aspect-ratio: 16 / 9;
    border-radius: var(--radius-md); overflow: hidden; background: #000;
}
.nut-story-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nut-story-copy .section-tag { color: var(--teal-light); }
.nut-story-copy .section-tag-line { background: var(--teal-light); }
.nut-story-copy h3 {
    font-family: var(--font-serif); font-size: 40px; font-weight: 400; line-height: 1.1;
    color: white; margin: 0 0 10px;
}
.nut-story-stat { font-size: 14px; color: rgba(255,255,255,.75); margin: 0 0 20px; }
.nut-story-copy blockquote {
    font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.5;
    color: rgba(255,255,255,.9); margin: 0 0 28px;
    padding-left: 18px; border-left: 2px solid var(--teal-light);
}

/* ── FAQ — sticky heading + accordion (H4 + C8) ──────────── */
.nut-faq {
    padding: 112px 0;
    background: var(--sand-mid);
}
.nut-faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
.nut-faq-head { position: sticky; top: 140px; }
.nut-faq-head p { font-size: var(--type-body); line-height: var(--lh-body); color: var(--text-medium); margin: 0; }
.nut-faq-head a { color: var(--teal-dim); }
.nut-faq-list { border-top: 1px solid rgba(26,36,32,.14); }
.nut-faq-item { border-bottom: 1px solid rgba(26,36,32,.14); }
.nut-faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 24px 0;
    font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--text-dark);
}
.nut-faq-item summary::-webkit-details-marker { display: none; }
.nut-faq-item summary::after {
    content: '+'; flex-shrink: 0;
    font-family: var(--font-sans); font-size: 24px; font-weight: 300; color: var(--teal);
    transition: transform .2s;
}
.nut-faq-item[open] summary::after { transform: rotate(45deg); }
.nut-faq-item p {
    margin: 0 0 24px; max-width: 640px;
    font-size: var(--type-body); line-height: var(--lh-body); color: var(--text-medium);
}

/* ── MOBILE RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
    .nut-hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 60px 32px;
        min-height: auto;
    }
    /* Headline first on small screens; grid items must be allowed to
       shrink or the cards push the page wider than the phone. */
    .nut-hero-left,
    .nut-hero-right { min-width: 0; }

    .nut-recipe-grid { grid-template-columns: 1fr 1fr; }


    .nut-int-grid { grid-template-columns: 1fr; gap: 56px; }
    .nut-how-grid, .nut-faq-grid { grid-template-columns: 1fr; gap: 40px; }
    .nut-how-head, .nut-faq-head { position: static; }
    .nut-team-grid { grid-template-columns: 1fr; gap: 40px; }
    .nut-split-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
    .nut-int-right { max-width: 520px; }
    .nut-int-figure figcaption { right: 12px; bottom: 12px; padding: 6px 12px; font-size: 12px; letter-spacing: .08em; }

    .nut-recipe-categories { grid-template-columns: 1fr; gap: 16px; }

    .nut-testi-track { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 768px) {
    .nut-hero { min-height: auto; padding-top: 136px; }
    body.has-announcement .nut-hero { padding-top: 166px; }
    .nut-hero-inner { padding: 48px 20px 60px; }

    .nut-hero-btns { flex-direction: column; align-items: stretch; }
    .nut-btn-primary,
    .nut-btn-ghost { justify-content: center; text-align: center; }

    .nut-hero-proof { flex-wrap: wrap; gap: 16px; }
    .nut-proof-sep { display: none; }
    .nut-proof-stat { min-width: 80px; }

    .nut-how,
    .nut-why,
    .nut-team,
    .nut-integration,
    .nut-recipes { padding: 80px 0; }

    .nut-how .container,
    .nut-why .container,
    .nut-team .container,
    .nut-integration .container,
    .nut-recipes .container { padding: 0 20px; }



    .nut-recipe-categories { grid-template-columns: 1fr 1fr; }
    .nut-recipe-grid { gap: 14px; }
    .nut-recipe-info { padding: 14px 14px 16px; }
    .nut-recipe-info h3 { font-size: 17px; }

    .nut-offer { padding: 64px 0 0; }
    .nut-testi { margin-top: 64px; padding: 64px 0 48px; }
    .nut-testi .container, .nut-faq .container { padding: 0 20px; }
    .nut-testi-track { grid-auto-columns: 85%; gap: 16px; }
    .nut-testi-card { padding: 28px 22px; }
    .nut-testi-card blockquote { font-size: 19px; }
    .nut-faq { padding: 80px 0; }
    .nut-faq-item summary { font-size: 19px; }
    .nut-faq .container { padding: 0 20px; }
    .nut-how-steps li { grid-template-columns: 72px 1fr; padding: 28px 0; }
    .nut-how-num { font-size: 56px; }
    .nut-how-steps h3 { font-size: 24px; }
    .nut-why-list { grid-template-columns: 1fr; }
    .nut-why-list h3 { font-size: 22px; }
    .nut-person { grid-template-columns: 120px 1fr; gap: 20px; }
    .nut-person h3 { font-size: 22px; }
    .nut-results { margin-top: 48px; }
    .nut-story { grid-template-columns: 1fr; gap: 28px; padding: 20px 20px 32px; margin-top: 48px; }
    .nut-story-copy { padding: 0 8px; }
    .nut-story-copy h3 { font-size: 32px; }
    .nut-story-copy blockquote { font-size: 18px; }
    .nut-story-copy .nut-btn-primary { width: 100%; justify-content: center; }
    .nut-results-head { flex-direction: column; gap: 6px; }
    .nut-results-grid {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
        gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        padding-bottom: 12px;
    }
    .nut-results-grid::-webkit-scrollbar { display: none; }
    .nut-result-card { scroll-snap-align: start; }
    .nut-hero-offer { margin: -8px 0 32px; }
    .nut-offer .container { padding: 0 20px; }
    .nut-offer-card { grid-template-columns: 1fr; gap: 28px; padding: 44px 28px; }
    .nut-offer-side { padding-left: 0; padding-top: 28px; border-left: 0; border-top: 1px solid rgba(255,255,255,.25); }
    .nut-offer-side .nut-btn-primary { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .nut-recipe-categories { grid-template-columns: 1fr; }
}

/* ===================== Card borders =====================
   Every card on the page gets the same 2px weight. Cards on light
   backgrounds use a soft sage line (shop cards keep their own tint's
   shade); cards on the dark and teal panels use translucent white. */
.shop-band--nutrition .shop-goal-tile { border-width: 2px; }
.nut-recipe-card,
.nut-result-card { border: 2px solid #BCD6CC; }
.nut-testi-card { border-width: 2px; border-color: var(--sand-deep); border-top-width: 4px; border-top-color: var(--teal); }
.nut-included-card { border: 2px solid rgba(255, 255, 255, 0.18); }
.nut-offer-card { border: 2px solid rgba(255, 255, 255, 0.35); }