/* Tighter layout for the saved original site (customer feedback, 2026-09-25).
   Keep the original typography, imagery, colours and masthead design; reduce the
   vertical space around them so products and content appear without long scrolls. */

/* ------------------------------------------------------------------ header */
/* The masthead stays pinned (it already was) and keeps its two-row design,
   with less padding so it takes ~110px instead of ~155px. */
.utility .shell { padding-block:5px; }
body > header .masthead { padding-top:14px; }
body > header .masthead .brand { margin-bottom:8px; }
body > header .masthead nav { padding:8px 0 10px; }
.stabil-mobile-menu-toggle { display:none; }

/* -------------------------------------------------------- hover drop-downs */
/* Every tab opens its menu as soon as the cursor reaches it, as on the current
   stabilnutrition.com. Markup comes from rewrite.mjs. */
body > header .masthead nav .stabil-menu { position:relative; display:flex; align-items:center; }
body > header .masthead nav .stabil-menu > a, body > header .masthead nav a.contact-link { white-space:nowrap; }
body > header .masthead nav .stabil-menu > a::after { content:""; display:inline-block; width:0; height:0; margin-left:6px; vertical-align:2px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.55; }
.stabil-submenu { display:none; position:absolute; top:100%; left:-16px; z-index:20; min-width:230px; padding:8px 0; background:#fff; border:1px solid #e7e5f1; border-top:3px solid var(--stabil-orange, #ffa31a); box-shadow:0 16px 36px rgba(33,31,95,.14); text-align:left; }
.stabil-submenu::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:12px; }
.stabil-menu:hover > .stabil-submenu, .stabil-menu:focus-within > .stabil-submenu { display:block; }
.stabil-menu:nth-last-child(-n+3) > .stabil-submenu { left:auto; right:-16px; }
body > header .masthead nav .stabil-submenu a { display:block; padding:8px 18px; font-size:13.5px; font-weight:600; letter-spacing:0; text-transform:none; white-space:nowrap; text-decoration:none; }
body > header .masthead nav .stabil-submenu a:hover { background:var(--stabil-cream, #fff7e9); }

/* ------------------------------------------------------------- home page */
/* .hero.hero outranks the original .hero[data-astro-cid-*] rule. */
main > section.hero.hero { min-height:clamp(360px, 46vh, 440px); }
main > section.hero .hero-copy { padding-block:44px; }
main > section.hero h1 { font-size:clamp(44px, 4.4vw, 64px); line-height:1.06; margin-bottom:16px; }
main > section.hero .actions { margin-top:18px; }
main > .section h2 { font-size:clamp(32px, 3vw, 44px); line-height:1.1; }

/* Product row injected under the home hero by browse.js. */
.stabil-home-products { background:#fff; border-bottom:1px solid #e8e8e8; }
main > .section.stabil-home-products { padding-block:26px; }
.stabil-home-products[data-state="loading"] { min-height:300px; }
.stabil-home-products .stabil-home-products-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:14px; }
.stabil-home-products .stabil-home-products-head h2 { margin:0; font-size:clamp(26px, 2.2vw, 32px); }
.stabil-home-products .stabil-home-products-head .eyebrow { margin:0 0 6px; }
.stabil-home-products-all { white-space:nowrap; font-weight:700; }
/* Six products (SRB first, DRB last) sit in one row on desktop, 3 x 2 when narrower. */
.stabil-home-products-grid { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; }
@media (max-width:1100px) { .stabil-home-products-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.stabil-home-products-grid article { display:flex; flex-direction:column; border:1px solid #e3e1ea; background:#fff; padding:16px 18px; min-width:0; }
.stabil-home-products-grid .card-label { display:none; }
.stabil-home-products-grid h3 { font-size:21px; line-height:1.15; margin:0 0 8px; color:var(--stabil-navy); }
.stabil-home-products-grid p { font-size:14px; line-height:1.5; margin:0 0 12px; color:#5d5b6e; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.stabil-home-products-grid a { margin-top:auto; font-size:14px; font-weight:700; }

/* ------------------------------------------------ inner-page hero banners */
/* Heroes keep their image and headline, at roughly two-thirds of the height. */
.mpc.marketing .marketing-breadcrumb,
.mpc :is(.nutrition-breadcrumb,.rice-breadcrumb) { padding-block:8px; }

.mpc.marketing .marketing-hero,
.mpc.marketing .marketing-hero.has-image,
.mpc :is(.nutrition-hero,.rice-hero) { position:relative; isolation:isolate; background:var(--cream); min-height:clamp(240px, 32vh, 300px); }
.mpc.marketing .marketing-hero.has-image::before { content:""; position:absolute; inset:0 0 0 50%; z-index:-1; background:linear-gradient(90deg,var(--cream),rgba(254,246,233,.15) 24%,transparent 65%),var(--hero-image) center/cover no-repeat; }
.mpc :is(.nutrition-hero,.rice-hero)::before { content:""; position:absolute; inset:0 0 0 50%; z-index:-1; background:linear-gradient(90deg,var(--cream),rgba(254,246,233,.15) 24%,transparent 65%),var(--page-hero-image) center/cover no-repeat; }

.mpc.marketing .marketing-hero-copy,
.mpc :is(.nutrition-hero,.rice-hero) :is(.nutrition-hero-copy,.rice-hero-copy) { padding-block:24px; min-width:0; }
.mpc.marketing .has-image .marketing-hero-copy,
.mpc :is(.nutrition-hero,.rice-hero) :is(.nutrition-hero-copy,.rice-hero-copy) { width:calc(50% - 28px); max-width:none; }

.mpc.marketing .marketing-hero h1,
.mpc :is(.nutrition-hero,.rice-hero) h1 { font-size:clamp(30px, 2.8vw, 42px); line-height:1.1; margin-bottom:12px; overflow-wrap:break-word; }
.mpc.marketing .marketing-hero-copy > p:not(.eyebrow),
.mpc :is(.nutrition-hero,.rice-hero) p:not(.eyebrow) { font-size:16px; line-height:1.55; max-width:100%; margin-bottom:0; }
.mpc.marketing .marketing-hero-copy .actions,
.mpc :is(.nutrition-hero,.rice-hero) .actions { gap:12px 16px; margin-top:16px; }
.mpc.marketing .marketing-hero-copy .button,
.mpc :is(.nutrition-hero,.rice-hero) .button { min-height:40px; padding:9px 16px; font-size:12px; max-width:100%; white-space:normal; text-align:center; }

main > .page-hero { padding-block:28px 22px; }
main > .page-hero h1 { font-size:clamp(32px, 3.4vw, 48px); line-height:1.1; overflow-wrap:break-word; }

/* --------------------------------------------------- in-page section bar */
/* The section bar stays pinned under the header so moving around a page is
   one click, with no scrolling back up. */
:root { --stabil-header-height:0px; --stabil-section-nav-height:0px; }
.mpc .stabil-browse-nav { position:sticky; top:var(--stabil-header-height); z-index:2; }
.mpc .page-nav.stabil-browse-nav { background:#fff; }
.mpc .stabil-browse-nav a[aria-current="location"] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.mpc.marketing .marketing-jump a { padding-block:11px; }
/* Outranks the original .rice-jump[data-astro-cid-*] a[data-astro-cid-*] rule. */
html .mpc.mpc :is(.nutrition-jump,.rice-jump) a[href] { padding-block:11px; }
main [id] { scroll-margin-top:calc(var(--stabil-header-height) + var(--stabil-section-nav-height) + 14px)!important; }

/* ---------------------------------------------------------------- sections */
main > .section,
.mpc .section,
.mpc.marketing .section,
.mpc:is(.nutrition-page,.rice-page) .section { padding-block:36px; }
.mpc .section-head { margin-bottom:16px; }
.mpc .nutrition-products, .mpc .rice-products { gap:18px; }

/* Product and chart grids with five or more items use three columns. */
.mpc.marketing .m-grid { gap:16px; }
.mpc.marketing .m-grid:has(> :nth-child(5)) { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.mpc.marketing .m-card { padding:22px; }
.mpc.marketing .m-card h3 { font-size:23px; margin-bottom:8px; }
.mpc.marketing .m-card p { margin-bottom:6px; }

/* ------------------------------------------------ shorter laptop screens */
@media (min-width:761px) and (max-height:820px) {
  main > section.hero.hero { min-height:340px; }
  main > section.hero .hero-copy { padding-block:32px; }
  .mpc.marketing .marketing-hero,
  .mpc.marketing .marketing-hero.has-image,
  .mpc :is(.nutrition-hero,.rice-hero) { min-height:230px; }
  .mpc.marketing .marketing-hero-copy,
  .mpc :is(.nutrition-hero,.rice-hero) :is(.nutrition-hero-copy,.rice-hero-copy) { padding-block:16px; }
  .mpc.marketing .marketing-hero h1,
  .mpc :is(.nutrition-hero,.rice-hero) h1 { font-size:clamp(28px, 2.4vw, 34px); margin-bottom:8px; }
  .mpc.marketing .marketing-hero-copy .actions,
  .mpc :is(.nutrition-hero,.rice-hero) .actions { margin-top:12px; }
}

@media (max-width:1100px) {
  .mpc.marketing .m-grid:has(> :nth-child(5)) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:1000px) {
  .mpc.marketing .has-image .marketing-hero-copy { width:calc(50% - 20px); }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:760px) {
  html, body { max-width:100%; overflow-x:clip; }
  img, svg, video, canvas { max-width:100%; height:auto; }
  main > section.hero.hero { min-height:0; }
  main > section.hero .hero-copy { padding-block:30px; }
  main > section.hero h1 { font-size:clamp(34px, 9vw, 44px); }
  main > .section h2 { font-size:clamp(28px, 7vw, 34px); }
  /* Two-column blocks stack on a phone; keep the heading close to its text. */
  main > .section .split.split { row-gap:18px; }
  /* A compact mobile header replaces the clipped desktop link row. */
  body > header .masthead { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px 0; }
  body > header .masthead .brand { width:min(250px, calc(100% - 86px)); max-width:none; margin:0; }
  .stabil-mobile-menu-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:8px 11px; border:1px solid #d9d7e5; border-radius:3px; background:#fff; color:var(--stabil-navy, #242466); font:700 12px/1 Open Sans,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
  .stabil-mobile-menu-toggle:focus-visible { outline:3px solid rgba(255,163,26,.38); outline-offset:2px; }
  .stabil-mobile-menu-icon { display:grid; gap:4px; width:17px; }
  .stabil-mobile-menu-icon i { display:block; width:17px; height:2px; border-radius:2px; background:currentColor; transition:transform .18s ease, opacity .18s ease; }
  .stabil-mobile-menu-open .stabil-mobile-menu-icon i:first-child { transform:translateY(6px) rotate(45deg); }
  .stabil-mobile-menu-open .stabil-mobile-menu-icon i:nth-child(2) { opacity:0; }
  .stabil-mobile-menu-open .stabil-mobile-menu-icon i:last-child { transform:translateY(-6px) rotate(-45deg); }
  body > header .masthead nav { display:none; flex:1 0 100%; width:100%; max-height:calc(100dvh - var(--stabil-header-height) + 70px); overflow-y:auto; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:5px 0 2px; border-top:1px solid #e7e5f1; }
  body > header.stabil-mobile-menu-open .masthead nav { display:flex; }
  body > header .masthead nav .stabil-menu { display:block; width:100%; }
  body > header .masthead nav .stabil-menu > a,
  body > header .masthead nav > a { display:flex!important; align-items:center; width:100%; padding:11px 4px; border-bottom:1px solid #efedf4; font-size:12px; letter-spacing:.06em; line-height:1.25; text-transform:uppercase; }
  body > header .masthead nav > a.contact-link { justify-content:center; width:100%; margin:8px 0 2px; padding:10px 12px; border:1px solid var(--stabil-orange, #ffa31a); background:var(--stabil-orange, #ffa31a); font-weight:800; }
  /* Each main link opens its landing page; deeper links remain available there. */
  .stabil-submenu { display:none!important; }
  body > header .masthead nav .stabil-menu > a::after { display:none; }

  .stabil-home-products .stabil-home-products-head { display:block; }
  /* Products swipe sideways on a phone rather than stacking five cards deep. */
  .stabil-home-products-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding-bottom:4px; }
  .stabil-home-products-grid article { scroll-snap-align:start; }

  .mpc.marketing .marketing-hero,
  .mpc.marketing .marketing-hero.has-image,
  .mpc :is(.nutrition-hero,.rice-hero) { min-height:0; padding-bottom:170px; }
  .mpc.marketing .marketing-hero.has-image::before { inset:auto 0 0; height:170px; background:var(--hero-image) center/cover no-repeat; }
  .mpc :is(.nutrition-hero,.rice-hero)::before { inset:auto 0 0; height:170px; background:var(--page-hero-image) center/cover no-repeat; }
  .mpc.marketing .has-image .marketing-hero-copy,
  .mpc :is(.nutrition-hero,.rice-hero) :is(.nutrition-hero-copy,.rice-hero-copy) { width:100%; padding-block:22px; }
  .mpc.marketing .marketing-hero h1,
  .mpc :is(.nutrition-hero,.rice-hero) h1 { font-size:clamp(28px, 7vw, 36px); }

  main > .section,
  .mpc .section,
  .mpc.marketing .section,
  .mpc:is(.nutrition-page,.rice-page) .section { padding-block:26px; }
  .mpc.marketing .m-grid:has(> :nth-child(5)) { grid-template-columns:1fr; }
  .mpc.marketing .m-card { padding:18px; }
}

@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

/* ------------------------------------------------------ restored team pages */
/* Our Team and the four bio pages carry the live site's headshots and full bios
   (content/*.html). Layout uses the preview's own type and colours. */
.team-intro p { max-width:860px; }
.team-intro p { font-size:17px; line-height:1.65; color:#3d3b5c; }
.team-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.team-member { display:grid; grid-template-columns:132px minmax(0, 1fr); gap:22px; align-items:start; padding:24px; background:#fff; border:1px solid #e7e5f1; }
.team-member .team-photo img { display:block; width:132px; height:132px; border-radius:50%; object-fit:cover; object-position:center 20%; }
.team-member h2 { margin:4px 0 4px; font-size:26px; line-height:1.15; }
.team-title { margin:0 0 12px; color:var(--stabil-orange-deep, #ed9210); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.team-member p:not(.team-title) { font-size:15px; line-height:1.6; color:#4b4b70; }
.team-more { font-weight:700; font-size:14px; }
.team-bio { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:44px; align-items:start; }
.team-bio-photo { display:block; width:260px; height:260px; border-radius:50%; object-fit:cover; object-position:center 20%; }
.team-bio-text { max-width:720px; }
.team-bio-text p, .team-areas li { font-size:17px; line-height:1.7; color:#3d3b5c; }
.team-areas { padding-left:20px; }
.team-areas li { margin-bottom:12px; }
.team-areas strong { color:var(--stabil-navy, #242466); }
.team-back { margin-top:22px; font-weight:700; }
@media (max-width:900px) {
  .team-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .team-member { grid-template-columns:88px minmax(0, 1fr); gap:16px; padding:18px; }
  .team-member .team-photo img { width:88px; height:88px; }
  .team-member h2 { font-size:22px; }
  .team-bio { grid-template-columns:1fr; gap:22px; }
  .team-bio-photo { width:180px; height:180px; }
}

/* ------------------------------------------------------------ chart viewer */
/* A chart can be read without opening a separate tab and losing one's place. */
.stabil-chart-viewer { width:min(1050px,94vw); max-height:90dvh; padding:20px; border:1px solid #dedde6; color:#211f5f; background:white; }
.stabil-chart-viewer::backdrop { background:rgba(20,19,44,.65); }
.stabil-chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:-20px; background:white; padding:12px 0; }
.stabil-chart-toolbar h2 { font-size:22px; margin:0; }
.stabil-chart-toolbar button { border:1px solid #211f5f; background:#211f5f; color:white; padding:10px 18px; font:inherit; cursor:pointer; }
.stabil-chart-viewer img { display:block; width:100%; height:auto; }
.stabil-chart-viewer > a { display:inline-block; margin-top:14px; }