/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("af09962f-67b1-4bf0-9109-d1266d41c748.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("ece60acf-dde2-4756-b99f-ab108a5f06fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("da7bc1de-1901-48fa-afb5-4934721fe58d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("af09962f-67b1-4bf0-9109-d1266d41c748.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("ece60acf-dde2-4756-b99f-ab108a5f06fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("da7bc1de-1901-48fa-afb5-4934721fe58d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("af09962f-67b1-4bf0-9109-d1266d41c748.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("ece60acf-dde2-4756-b99f-ab108a5f06fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("da7bc1de-1901-48fa-afb5-4934721fe58d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("af09962f-67b1-4bf0-9109-d1266d41c748.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("ece60acf-dde2-4756-b99f-ab108a5f06fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("da7bc1de-1901-48fa-afb5-4934721fe58d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("af09962f-67b1-4bf0-9109-d1266d41c748.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("ece60acf-dde2-4756-b99f-ab108a5f06fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("da7bc1de-1901-48fa-afb5-4934721fe58d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("af09962f-67b1-4bf0-9109-d1266d41c748.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("ece60acf-dde2-4756-b99f-ab108a5f06fc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("da7bc1de-1901-48fa-afb5-4934721fe58d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("6e7bdcca-12d5-42ec-ae70-ba1b0791bd72.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("df13c8a5-da04-49f1-bf42-50dacb805c28.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("9416ce3a-1ea9-4c17-ab01-32cfb3925951.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("6e7bdcca-12d5-42ec-ae70-ba1b0791bd72.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("df13c8a5-da04-49f1-bf42-50dacb805c28.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("9416ce3a-1ea9-4c17-ab01-32cfb3925951.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("a7e6d323-3867-427a-9334-f40b743b08f9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("66383c8b-0a85-4afb-9135-f0514db7923d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fb0af21e-98a1-4575-ad45-516117e21bb5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a7e6d323-3867-427a-9334-f40b743b08f9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("66383c8b-0a85-4afb-9135-f0514db7923d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fb0af21e-98a1-4575-ad45-516117e21bb5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a7e6d323-3867-427a-9334-f40b743b08f9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("66383c8b-0a85-4afb-9135-f0514db7923d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fb0af21e-98a1-4575-ad45-516117e21bb5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("a7e6d323-3867-427a-9334-f40b743b08f9.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("66383c8b-0a85-4afb-9135-f0514db7923d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fb0af21e-98a1-4575-ad45-516117e21bb5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   INTERMEX FOODS — Landing Page
   Warm cream paper · agricultural field-green · wheat-gold accent
   Newsreader (serif) + Archivo (grotesque)
   ============================================================ */

:root {
  /* Warm paper neutrals */
  --bg:        oklch(0.975 0.007 95);   /* cream paper */
  --bg-2:      oklch(0.952 0.011 92);   /* oat */
  --bg-deep:   oklch(0.928 0.014 88);   /* warm beige band */
  --bg-panel:  oklch(0.993 0.004 95);   /* near-white card */
  --footer-bg: oklch(0.905 0.014 85);   /* taupe footer */

  /* Ink — warm near-black */
  --ink:       oklch(0.255 0.020 130);
  --ink-dim:   oklch(0.405 0.018 128);
  --muted:     oklch(0.545 0.016 130);
  --hairline:  oklch(0.255 0.020 130 / 0.14);
  --hairline-2:oklch(0.255 0.020 130 / 0.07);

  /* Burgundy / wine red — primary accent (was agricultural field-green) */
  --green:     oklch(0.470 0.130 25);
  --green-2:   oklch(0.405 0.130 25);
  --green-deep:oklch(0.285 0.080 25);
  --green-ink: oklch(0.975 0.012 25);

  /* Wheat gold — secondary harvest accent */
  --wheat:     oklch(0.770 0.125 78);
  --wheat-2:   oklch(0.700 0.130 72);
  --wheat-ink: oklch(0.285 0.045 80);

  /* On-dark tones (hero + photo tiles) */
  --on-dark:     oklch(0.972 0.012 95);
  --on-dark-dim: oklch(0.870 0.016 95);

  --container: 1280px;
  --pad: clamp(20px, 5vw, 64px);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Archivo", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--green); color: var(--green-ink); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--green);
  opacity: 0.8;
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.015em;
  font-size: clamp(44px, 8.2vw, 124px);
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 400; color: var(--green); }

h1.section-title, h2.section-title {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-size: clamp(34px, 5.2vw, 76px);
  text-wrap: balance;
}
h1.section-title em, h2.section-title em { font-style: italic; color: var(--green); }

.lede {
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 56ch;
  text-wrap: pretty;
}

.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  --bh: 56px;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  height: var(--bh);
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.btn--primary { background: var(--green); color: var(--green-ink); }
.btn--primary:hover { background: var(--green-2); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.btn--sm { --bh: 44px; padding: 0 20px; font-size: 14px; }

.btn--dark { background: var(--green-deep); color: var(--on-dark); }
.btn--dark:hover { background: oklch(0.235 0.05 152); transform: translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: oklch(0.975 0.007 95 / 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--green);
  font-size: 21px;
}
.brand__mark {
  height: 30px; width: auto;
  flex: none;
}
/* hero image is light → nav reads dark from the top */
.nav .brand { color: var(--ink); }
.nav.is-stuck .brand { color: var(--ink); }

.nav__links {
  display: flex;
  gap: 34px;
  margin-left: auto;
  margin-right: 8px;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav.is-stuck .nav__links a { color: var(--ink-dim); }
.nav.is-stuck .nav__links a:hover { color: var(--ink); }

@media (max-width: 860px) { .nav__links { display: none; } }

/* ---- Hamburger toggle ---- */
.nav__toggle {
  display: none;
  position: relative;
  width: 46px; height: 46px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-stuck .nav__toggle { border-color: var(--hairline); }
.nav__toggle:hover { border-color: var(--green); }
.nav__toggle-bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease), background .25s var(--ease);
}
.nav.is-stuck .nav__toggle-bar { background: var(--ink); }
@media (max-width: 860px) {
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}
body.menu-open .nav__toggle-bar { background: var(--ink); }
body.menu-open .nav__toggle-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav__toggle-bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---- Mobile menu panel ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: oklch(0.975 0.007 95 / 0.98);
  backdrop-filter: blur(18px) saturate(1.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 96px var(--pad) var(--pad);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.mobile-menu__links a {
  font-family: var(--serif);
  font-size: clamp(30px, 7.5vw, 38px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 10px 0;
  transition: color .25s var(--ease);
}
.mobile-menu__links a:hover { color: var(--green); }
.mobile-menu__cta { margin-top: 24px; }
.mobile-menu__meta {
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ============================================================
   PLACEHOLDERS (food photo slots)
   ============================================================ */
.ph {
  position: relative;
  width: 100%; height: 100%;
  background-color: var(--bg-2);
  background-image:
    repeating-linear-gradient(135deg,
      oklch(0.255 0.020 130 / 0.04) 0,
      oklch(0.255 0.020 130 / 0.04) 1px,
      transparent 1px, transparent 11px),
    radial-gradient(120% 90% at 30% 10%, oklch(0.94 0.03 120) 0%, transparent 60%),
    radial-gradient(120% 120% at 90% 100%, oklch(0.90 0.02 88) 0%, transparent 55%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph__label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: oklch(1 0 0 / 0.7);
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  border-radius: 6px;
  max-width: 78%;
  text-align: center;
  line-height: 1.5;
  backdrop-filter: blur(2px);
}
.ph__label b { color: var(--green); font-weight: 600; }

/* Golden-hour wheat-field treatment (tonal mock; real photo drops in same slot) */
.ph--wheat {
  background-color: oklch(0.62 0.10 80);
  background-image:
    /* horizon glow */
    radial-gradient(150% 66% at 50% 50%, oklch(0.90 0.13 90 / 0.7) 0%, transparent 50%),
    /* sky */
    linear-gradient(0deg,
      oklch(0.78 0.09 120) 0%,
      oklch(0.82 0.08 100) 36%,
      oklch(0.86 0.07 95) 100%);
}
.ph--wheat::before {
  /* field of stalks, confined to lower band, feathered into the horizon */
  content: "";
  position: absolute;
  inset: 44% 0 0 0;
  z-index: 0;
  background-image:
    /* deep foreground shadow */
    linear-gradient(0deg, oklch(0.46 0.10 70 / 0.7) 0%, transparent 38%),
    /* individual stalks */
    repeating-linear-gradient(90.6deg,
      transparent 0px,
      oklch(0.52 0.12 64 / 0.42) 1px,
      transparent 2px,
      transparent 5px),
    repeating-linear-gradient(89.4deg,
      transparent 0px,
      oklch(0.92 0.12 92 / 0.45) 1px,
      transparent 2px,
      transparent 7px),
    /* field body, light at top edge → bronze → shadow */
    linear-gradient(0deg,
      oklch(0.54 0.11 64) 0%,
      oklch(0.70 0.13 76) 16%,
      oklch(0.82 0.13 85) 38%,
      oklch(0.86 0.12 88) 60%,
      transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
.ph--wheat .ph__label { position: relative; z-index: 1; }

/* ============================================================
   HERO — shared
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  isolation: isolate;
}
/* Hero A — Monument */
.hero--a { align-items: flex-end; }
.hero--a .hero__media {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero--a .hero__media .ph,
.hero--a .hero__media .hero__img {
  height: 128%;
  top: -14%;
  position: absolute;
  will-change: transform;
  align-content: end;
  justify-items: end;
  padding: 0 40px 136px 0;
}
.hero--a .hero__media .hero__img {
  left: 0;
  width: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  padding: 0;
}
.hero__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, oklch(0.975 0.007 95 / 0.94) 0%, oklch(0.975 0.007 95 / 0.6) 22%, oklch(0.975 0.007 95 / 0.12) 42%, transparent 56%),
    linear-gradient(90deg, oklch(0.975 0.007 95 / 0.88) 0%, oklch(0.975 0.007 95 / 0.5) 38%, oklch(0.975 0.007 95 / 0.12) 56%, transparent 70%);
}
.hero--a .hero__content {
  padding-bottom: clamp(56px, 9vh, 120px);
  padding-top: 140px;
}
/* hero image is light → dark ink text reads on the open white space */
.hero--a .eyebrow { color: var(--green); }
.hero--a .eyebrow::before { background: var(--green); }
.hero--a .display { color: var(--ink); max-width: 16ch; margin: 22px 0 28px; }
.hero--a .display em { color: var(--green); }
.hero--a .lede { color: var(--ink-dim); margin-bottom: 38px; }
.hero--a .btn--ghost { color: var(--ink); border-color: var(--hairline); }
.hero--a .btn--ghost:hover { border-color: var(--ink); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__meta {
  position: absolute;
  bottom: 30px; left: 0; right: 0;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 9px; }
.hero__meta span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex: none;
}
@media (max-width: 600px){ .hero__meta { display: none; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-deep);
  overflow: hidden;
  padding: 22px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: scroll-x 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 46px);
  color: var(--ink-dim);
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 56px;
  white-space: nowrap;
}
.marquee__item::after {
  content: "✦";
  font-style: normal;
  font-size: 0.5em;
  color: var(--wheat-2);
}
@keyframes scroll-x { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track { animation: none; } }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { position: relative; }
.band { padding: clamp(88px, 13vh, 168px) 0; }
.band--deep { background: var(--bg-deep); }
.band--panel { background: var(--bg-2); }

.sec-head { max-width: 760px; margin-bottom: clamp(48px, 7vh, 88px); }
.sec-head .lede { margin-top: 22px; }
.sec-head--split {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  max-width: none;
}
@media (max-width: 760px){ .sec-head--split { grid-template-columns: 1fr; } }

.idx {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--green);
}

/* ============================================================
   SUPPLIERS
   ============================================================ */
.suppliers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 880px){ .suppliers-grid { grid-template-columns: 1fr; } }

.supplier {
  position: relative;
  padding-top: clamp(92px, 10.5vw, 132px);
  display: flex;
  flex-direction: column;
}

/* Free-floating logo — peeks above the panel, glides up on hover */
.supplier__logo {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1;                /* sits BEHIND the body panel */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  filter: drop-shadow(0 16px 26px oklch(0.255 0.02 130 / 0.16));
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.supplier:hover .supplier__logo {
  transform: translateX(-50%) translateY(-30px);
  filter: drop-shadow(0 24px 34px oklch(0.255 0.02 130 / 0.22));
}
.supplier__logo-img { height: auto; display: block; }
.supplier__logo-img--pagasa  { width: clamp(300px, 34vw, 376px); }   /* wide horizontal mark */
.supplier__logo-img--elrosal { width: clamp(214px, 24.5vw, 272px); }   /* square rose lockup */

.supplier__body {
  position: relative;
  z-index: 2;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 18px 40px -28px oklch(0.255 0.02 130 / 0.4);
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.supplier:hover .supplier__body {
  border-color: oklch(0.255 0.02 130 / 0.2);
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 30px 56px -30px oklch(0.255 0.02 130 / 0.5);
}
.supplier__gen {
  position: absolute; top: 18px; right: 18px;
  z-index: 3;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green);
}
.supplier__body { padding: clamp(28px, 3vw, 42px); padding-top: clamp(46px, 4.6vw, 62px); }
.supplier__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.supplier__tag { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 20px; }
.supplier__desc { color: var(--ink-dim); font-size: 16px; line-height: 1.65; margin-bottom: 28px; text-wrap: pretty; }
.supplier__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.supplier__url { font-family: ui-monospace, monospace; font-size: 13px; color: var(--muted); }

/* ============================================================
   PRODUCT CATEGORIES
   ============================================================ */
.cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 900px){ .cats { grid-template-columns: 1fr; max-width: 520px; } }

.cat {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--hairline);
  isolation: isolate;
}
.cat .ph { position: absolute; inset: 0; z-index: -2; transition: transform 1.1s var(--ease); }
.cat:hover .ph { transform: scale(1.07); }
.cat__img {
  position: absolute;
  left: 0; top: -12%;
  width: 100%; height: 124%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.cat:hover .cat__img { transform: scale(1.07); }
.cat__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, oklch(0.16 0.03 150 / 0.92) 0%, oklch(0.16 0.03 150 / 0.25) 50%, transparent 100%);
}
.cat__body { padding: clamp(22px, 2.6vw, 34px); width: 100%; }
.cat__no { font-family: ui-monospace, monospace; font-size: 12px; color: var(--wheat); letter-spacing: 0.1em; }
.cat__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  margin: 8px 0 6px;
  color: var(--on-dark);
}
.cat__desc {
  font-size: 14px; color: var(--on-dark-dim);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}
.cat:hover .cat__desc { max-height: 120px; opacity: 1; margin-top: 8px; }
.cat__line { height: 2px; width: 0; background: var(--wheat); margin-top: 16px; transition: width .5s var(--ease); }
.cat:hover .cat__line { width: 64px; }

/* ============================================================
   WHY INTERMEX — stats
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 820px){ .stats { grid-template-columns: 1fr; } }
.stat {
  padding: clamp(38px, 5vw, 64px) clamp(20px, 3vw, 44px) clamp(32px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.stat + .stat { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--hairline); }
@media (max-width: 820px){ .stat + .stat { border-left: none; padding-left: 0; } }
.stat__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 10vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--wheat-2);
  display: flex;
  align-items: flex-end;
  min-height: clamp(64px, 10vw, 132px);
}
.stat__num .sfx { font-size: 0.42em; margin-left: 0.08em; color: var(--green); }
.stat__num--word { font-style: italic; font-size: clamp(44px, 6.4vw, 88px); }
.stat__label {
  margin-top: 22px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.01em;
}
.stat__sub { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 34ch; }

/* ---------- Coast-to-coast strip ---------- */
.geo {
  margin-top: clamp(56px, 8vh, 96px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-panel);
}
@media (max-width: 760px){ .geo { grid-template-columns: 1fr; } }
.geo__cell {
  padding: clamp(26px, 3vw, 40px);
  position: relative;
}
.geo__cell + .geo__cell { border-left: 1px solid var(--hairline); }
@media (max-width: 760px){ .geo__cell + .geo__cell { border-left: none; border-top: 1px solid var(--hairline); } }
.geo__role { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.geo__place { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); margin: 10px 0 6px; line-height: 1; }
.geo__note { color: var(--muted); font-size: 14px; }

/* ============================================================
   CONTACT / CTA
   ============================================================ */
.cta {
  background: var(--wheat);
  color: var(--wheat-ink);
  position: relative;
  overflow: hidden;
}
.cta__inner { padding: clamp(80px, 14vh, 180px) 0; position: relative; z-index: 2; text-align: center; }
.cta .eyebrow { color: var(--wheat-ink); }
.cta .eyebrow::before { background: var(--wheat-ink); }
.cta__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 22px auto 18px;
  max-width: 16ch;
  text-wrap: balance;
}
.cta__title em { font-style: italic; }
.cta__sub { font-size: clamp(17px, 1.6vw, 21px); max-width: 50ch; margin: 0 auto 40px; color: oklch(0.285 0.045 80 / 0.82); }
.cta__row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta__contacts {
  margin-top: 44px;
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cta__contacts a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid oklch(0.285 0.045 80 / 0.32); padding-bottom: 3px; }
.cta__watermark {
  position: absolute;
  inset: auto -2% -34% -2%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 30vw;
  line-height: 1;
  color: oklch(0.285 0.045 80 / 0.09);
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}

/* ---- Contact form (homepage CTA) ---- */
.cform {
  margin: 0 auto;
  max-width: 680px;
  background: var(--bg-panel);
  border-radius: 20px;
  padding: clamp(24px, 3.5vw, 40px);
  text-align: left;
  color: var(--ink);
  box-shadow: 0 24px 60px oklch(0.285 0.045 80 / 0.22);
}
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
@media (max-width: 640px){ .cform__grid { grid-template-columns: 1fr; } }
.cform__field { display: flex; flex-direction: column; gap: 7px; }
.cform__field--full { grid-column: 1 / -1; }
.cform__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.cform__input {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cform__input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px oklch(0.470 0.130 25 / 0.14);
}
textarea.cform__input { resize: vertical; min-height: 110px; }
.cform__gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform__foot { margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cform__status { font-size: 14px; color: var(--ink-dim); margin: 0; }
.cform__status.is-error { color: var(--green); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--footer-bg); padding: clamp(56px, 8vh, 96px) 0 40px; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 760px){ .footer__top { grid-template-columns: 1fr; gap: 32px; } }
.footer__brand .brand { font-size: 22px; margin-bottom: 16px; color: var(--ink); }
.footer__logo { display: inline-block; }
.footer__logo img { width: clamp(146px, 16vw, 172px); height: auto; display: block; margin-bottom: 18px; }
.footer__blurb { color: var(--muted); font-size: 15px; max-width: 38ch; line-height: 1.6; }
.footer__col h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px; font-weight: 600; }
.footer__col a { display: block; color: var(--muted); font-size: 15px; padding: 6px 0; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--green); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 28px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); letter-spacing: 0.02em;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
/* Content is visible by default. The hidden-then-reveal state engages
   only when JS confirms rAF is alive (body.anim) — so any throttled or
   backgrounded context simply shows content with no stuck-hidden risk. */
body.anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
body.anim .reveal.in { opacity: 1; transform: none; }
body.anim .reveal[data-delay="1"]{ transition-delay: .08s; }
body.anim .reveal[data-delay="2"]{ transition-delay: .16s; }
body.anim .reveal[data-delay="3"]{ transition-delay: .24s; }
body.anim .reveal[data-delay="4"]{ transition-delay: .32s; }

/* ============================================================
   MOBILE / TOUCH REFINEMENTS
   ============================================================ */
/* Hero — focus the cookies (upper-right of the photo) on phones */
@media (max-width: 600px){
  .hero--a .hero__media .hero__img { object-position: 85% 30%; }
}

/* Supplier logos — hover glide-up never fires on touch, so trigger the
   peek-reveal on scroll-into-view instead of leaving the logos static. */
@media (hover: none){
  .supplier__logo {
    transform: translateX(-50%) translateY(4px);
    transition: transform .8s var(--ease), filter .8s var(--ease);
  }
  .supplier.in .supplier__logo {
    transform: translateX(-50%) translateY(-26px);
    filter: drop-shadow(0 24px 34px oklch(0.255 0.02 130 / 0.22));
  }
}


/* ============ Product page (pasta) ============ */
.hero--sub { min-height: clamp(500px, 66svh, 720px); }
.hero--sub .hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  padding: 0; top: 0;
}
.plp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.pcard {
  display: flex; flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 20px 20px 22px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -26px oklch(0.255 0.020 130 / 0.45);
  border-color: var(--hairline-2);
}
.pcard__tile {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pcard__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pcard__name {
  font-family: var(--sans); font-weight: 600;
  font-size: 15px; line-height: 1.25; color: var(--ink);
}
.pcard__size {
  margin-top: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green);
}
.plp-count {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-left: 2px;
}
@media (max-width: 560px) {
  .plp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}


/* ============ Product page — subsections & chips ============ */
.subnav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 26px 0 4px;
}
.subnav a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--hairline);
  border-radius: 999px; padding: 7px 15px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.subnav a:hover { color: var(--green-ink); background: var(--green); border-color: var(--green); }
.subsec { margin-top: clamp(44px, 6vh, 76px); scroll-margin-top: 92px; }
.subsec:first-of-type { margin-top: clamp(36px, 4vh, 52px); }
.subsec__head {
  display: flex; align-items: baseline; gap: 14px;
  border-top: 1px solid var(--hairline);
  padding-top: 22px; margin-bottom: 28px;
}
.subsec__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.01em; line-height: 1;
}
.subsec__count {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.pcard__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--green);
  border: 1px solid var(--hairline);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}

.pcard__note { font-size: 12px; color: var(--muted); margin-top: 5px; font-style: italic; }

/* ============ Editorial product cards (v2) ============ */
.pcard {
  background: var(--bg-panel);
  border: none;
  border-radius: 18px;
  padding: 22px 22px 24px;
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard__ix {
  position: absolute; top: 16px; left: 22px; z-index: 2;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted);
}
.pcard__ix::before {
  content: ""; display: inline-block; width: 14px; height: 1px;
  background: var(--hairline); vertical-align: middle; margin-right: 7px;
}
.pcard__tile {
  position: relative; aspect-ratio: 1 / 1.04;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; background: none;
}
.pcard__tile::after {
  content: ""; position: absolute; left: 50%; bottom: 9%;
  width: 56%; height: 8%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(43,42,38,.22), transparent 70%);
  filter: blur(2px);
}
.pcard__img {
  position: relative; z-index: 1;
  filter: drop-shadow(0 12px 14px rgba(43,42,38,.18));
  transition: transform .5s var(--ease);
}
.pcard__name {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 22px; letter-spacing: -.01em; line-height: 1.15; color: var(--ink);
}
.pcard__note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 5px; }
.pcard__rule { height: 1px; background: var(--hairline); margin: 12px 0 10px; }
.pcard__sizes {
  display: block; margin-top: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green);
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(43,42,38,.5); }
.pcard:hover .pcard__img { transform: scale(1.06); }

/* ============ Product cards (v3 — supplier/hero style) ============ */
.plp-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 20px; }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: none; border: none; border-radius: 0; padding: 0;
  padding-top: 92px;                        /* room for the floating bag */
  overflow: visible;
}
.pcard__img {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;   /* in front: bag peeks out over the card top */
  width: 85%; margin-inline: auto; height: 122px;              /* cap width so wide bags don't blow out */
  object-fit: contain; object-position: center bottom;         /* bottom-align every bag on one baseline */
  filter: drop-shadow(0 12px 18px rgba(43,42,38,.12));         /* soft, shallow reach */
  transition: transform .6s var(--ease), filter .6s var(--ease); pointer-events: none;
}
.pcard__body {
  position: relative; z-index: 2; flex: 1; text-align: center;
  background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 44px 24px 14px;                                     /* top clears the peeking bag; tighter bottom */
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 36px -28px rgba(43,42,38,.4);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pcard__ix {                                                   /* catalog index, at the very bottom */
  position: static; top: auto; left: auto;                     /* reset earlier absolute positioning */
  display: block; margin: 10px 0 0;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--muted);
}
.pcard__ix::before { content: none; }                          /* kill earlier hairline tick */
.pcard__name {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
}
.pcard__note { font-size: 12px; font-style: italic; color: var(--muted); margin-top: 4px; }
.pcard__rule { height: 1px; width: 32px; background: var(--hairline); margin: 8px auto 6px; }
.pcard__sizes {
  display: block; margin-top: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green);
}
.pcard:hover { transform: none; box-shadow: none; }
.pcard:hover .pcard__img { transform: translateY(-16px); filter: drop-shadow(0 30px 34px rgba(43,42,38,.18)); }
.pcard:hover .pcard__body {
  border-color: rgba(43,42,38,.2);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 28px 52px -28px rgba(43,42,38,.5);
}

/* Long-cut bags are long/wide — scale them down a touch so they don't dominate.
   Keep the base at the same line (top+height = 122) so the peek is unchanged. */
.pcard[data-shape="long"] .pcard__img { height: 98px; top: 24px; }

/* ============ Product filter bar (sticky, two rows) ============ */
.pfilter {
  position: sticky; top: 82px; z-index: 40;
  margin: 30px 0 40px;
  padding: 14px 16px;
  background: oklch(0.975 0.007 95 / 0.9);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}
.pfilter__row {
  display: flex; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pfilter__row::-webkit-scrollbar { display: none; }
/* Fade hint on rows that overflow horizontally; cleared at scroll end.
   Classes managed by FILTER_JS. */
.pfilter__row.has-overflow {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.pfilter__row.has-overflow.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.pfilter__row--shape {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.pfchip {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-weight: 600;
  border-radius: 999px;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.pfchip--coll {
  font-size: 13px; letter-spacing: .02em; padding: 8px 16px;
  color: var(--ink-dim); background: var(--bg-panel); border: 1px solid var(--hairline);
}
.pfchip--coll:hover { color: var(--ink); border-color: var(--hairline-2); }
.pfchip--coll.is-active { background: var(--green); color: var(--green-ink); border-color: var(--green); }
.pfchip--shape {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 13px;
  color: var(--muted); background: transparent; border: 1px solid var(--hairline);
}
.pfchip--shape:hover { color: var(--ink); border-color: var(--hairline-2); }
.pfchip--shape.is-active { color: var(--green); border-color: var(--green); background: oklch(0.470 0.130 25 / 0.08); }
.pfilter__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 12px;
}
.pfilter__caption { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-dim); line-height: 1.3; }
.pfilter__caption:empty { display: none; }
.pfilter__count { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.plp-empty { text-align: center; color: var(--muted); font-style: italic; padding: 48px 0; }

/* ============ Cross-links between product pages ============ */
.xnav { padding: clamp(28px, 5vh, 48px) 0; border-top: 1px solid var(--hairline); background: var(--bg-deep); }
.xnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.xnav__label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.xnav__links { display: flex; gap: 12px 32px; flex-wrap: wrap; }
.xnav__link { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); color: var(--ink); transition: color 0.2s var(--ease); }
.xnav__link .arr { color: var(--green); }
.xnav__link:hover { color: var(--green); }
@media (max-width: 560px) {
  .pfilter { top: 78px; padding: 12px; border-radius: 14px; margin: 24px 0 32px; }
  .pfchip--coll { font-size: 12.5px; padding: 7px 14px; }
  .pfilter__caption { font-size: 13px; }
}

/* Trial: bring supplier logos IN FRONT of the card (like product bags) */
.supplier__logo { z-index: 3; }

/* El Rosal rose (text removed) — smaller so it clears the "El Rosal" name, overlapping only the tag */
.supplier__logo-img--elrosal { width: clamp(148px, 17vw, 182px); }