/* ============================================================
   EMBER SMOKERY — embersmokery.com
   ============================================================ */

/* ---------- Brand fonts ---------- */
@font-face {
  font-family: "TAY Birdie";
  src: url("assets/fonts/TAYBirdie.woff2") format("woff2");
  font-weight: 100 900;           /* single master serves all weights (no faux-bold) */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("assets/fonts/ABCDiatypeTrial-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("assets/fonts/ABCDiatypeTrial-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ember:    #FF4C00;   /* Ember Orange   */
  --ember-cta:#E5B7D6;   /* CTA lilac      */
  --brisket:  #8B001E;   /* Brisket Red    */
  --mustard:  #FDF098;   /* Popping Mustard*/
  --kraft:    #F6EAD1;   /* Kraft Brown    */
  --pink:     #EF3D7D;   /* Medium Rare    */
  --lettuce:  #1CA64A;   /* Lettuce Green  */
  --charcoal: #2B010A;   /* Charcoal Black */

  --display: "TAY Birdie", "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --body: "ABC Diatype", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --nav-h: 108px;                            /* Figma nav: 72px row + 18px top/bottom padding */
  --pad: clamp(20px, 4vw, 48px);
}

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

html {
  scroll-behavior: auto;   /* Lenis handles smooth scrolling */
  overflow-x: clip;         /* constrain the layout viewport: body's clip alone doesn't stop the
                               ICB expanding to off-edge content (wrap food photos), which zoomed
                               the whole page out on phones. clip (not hidden) keeps sticky/scroll intact. */
}

/* Lenis smooth-scroll base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--body);
  background: var(--kraft);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip (not hidden) so it doesn't create a scroll container that breaks the sticky hero */
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* Bear-paw cursor (24px SVG) — colour adapts to the background it sits on */
*, *::before, *::after {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.1824%209.94974C12.4806%2010.2316%2013.2406%209.59193%2013.2826%209.74118L14.29%2010.0469L14.9075%2010.2793L17.0113%2010.9478L18.3945%2011.4647C18.5394%2011.8479%2018.7745%2011.5613%2019.4226%2011.8345L20.0996%2012.1196C20.5802%2012.3225%2021.0857%2012.7875%2021.3807%2013.2215L22.0303%2014.179L23.5281%2016.4452C24.3024%2017.6165%2023.8073%2017.6523%2023.6516%2018.3174C23.4558%2019.1568%2022.811%2019.7034%2022.1622%2020.2255C21.2834%2020.9325%2020.3989%2021.5467%2019.3157%2021.8789C19.0836%2022.2316%2018.6577%2022.3012%2018.2821%2022.146C17.193%2022.2719%2016.1851%2022.1934%2015.0813%2021.9743C14.1597%2021.7919%2013.6804%2023.2914%2010.7126%2023.88C10.0969%2024.0022%209.6447%2024.078%209.01225%2023.8325C8.47036%2023.6219%207.76126%2023.1971%207.39466%2022.8166C7.36347%2022.7841%207.2179%2022.691%207.21767%2022.6927C7.21814%2022.6949%207.17808%2022.8389%207.1626%2022.8949C6.54845%2023.1657%205.87965%2022.7868%205.66137%2022.1661C5.35546%2021.743%205.25933%2021.3434%205.15968%2020.8426C5.08979%2020.4941%204.69899%2020.096%204.62075%2019.7357L4.2894%2018.2109C4.15681%2017.6014%204.36608%2017.0574%204.56731%2016.5066C4.80952%2015.843%205.19328%2015.2895%205.59343%2014.6925L5.9942%2014.0956C6.57879%2013.2234%207.31264%2012.5254%208.33374%2012.0994C8.39677%2011.4176%208.88207%2011.0326%209.39563%2010.6558C9.92878%2010.2647%2010.4426%209.78957%2011.1824%209.94974ZM2.55158%207.84516C2.35718%208.46834%202.30413%209.05151%202.53274%209.6192L3.02998%2010.8558C3.5853%2011.0854%204.2888%2011.2709%204.61102%2011.7922L5.13668%2012.6426C5.63487%2013.4485%205.37184%2014.293%204.81717%2014.9854C3.74357%2016.3259%203.27591%2016.2148%201.93238%2015.9607C1.62964%2015.9034%201.41863%2015.7343%201.17976%2015.5929C0.856367%2015.4015%200.670092%2015.2808%200.471417%2014.9646C0.112418%2014.3937%20-0.0583148%2013.8504%200.0178889%2013.1548L0.313707%2010.4618C0.366347%209.98166%200.364422%209.45339%200.959663%209.30676C1.04065%208.53785%201.39617%207.87639%202.1006%207.46821L2.55158%207.84516ZM20.2787%205.59794C20.3344%205.26579%2020.8778%205.90489%2021.2269%206.03458C23.1355%206.74447%2022.4776%207.48109%2023.3043%208.54656L23.7122%209.36574C24.2445%2010.4372%2023.8744%2011.8233%2022.6846%2012.2161C21.9928%2012.4444%2021.2142%2012.369%2020.6433%2011.9939C20.0441%2011.6005%2019.773%2011.165%2019.7889%2010.4949C19.8074%209.71691%2019.9935%208.95213%2020.5887%208.41815L20.6802%207.55803L20.2455%206.54984C20.1589%206.34876%2020.1902%206.08825%2020.2292%205.89475L20.2787%205.59794ZM7.66032%203.5112C7.54851%204.25077%207.35883%205.03321%207.52174%205.81182C7.68474%206.5901%209.14245%206.55437%209.16898%208.69465C9.18034%209.59383%208.60822%2010.681%207.84107%2011.2368L7.07245%2011.6311C6.84669%2011.747%206.68006%2011.833%206.49659%2011.9898C6.04738%2011.9589%205.55179%2011.6812%205.06741%2011.4717C4.62975%2011.2827%204.14622%2011.2357%204.11788%2010.6786L4.30558%2010.7447C4.35146%2010.7605%204.46371%2010.642%204.42345%2010.6147L4.22083%2010.4776C4.09595%2010.3933%203.97896%2010.298%203.89353%2010.1922L3.61003%209.84164C3.5487%209.76564%203.62941%209.56613%203.67152%209.44793C3.53931%209.11609%203.55976%208.64687%203.64062%208.29302C3.29857%207.54986%203.9269%206.95876%204.18564%206.44729C4.68418%205.46308%204.60929%203.94658%205.21507%203.31264C5.57958%202.93168%206.13006%202.7183%206.63183%202.55928L7.26415%202.35778L7.66032%203.5112ZM8.98102%200.164401C9.27951%20-0.101305%209.69928%20-0.0273015%209.91345%200.257517L10.2924%200.761722C10.8972%201.56602%2011.7579%201.70035%2012.1195%202.64614C12.3087%203.14087%2012.4596%203.86532%2012.8696%204.21141C13.2432%204.52669%2013.5227%204.67219%2013.6758%205.1301C13.7973%205.49266%2013.8379%205.85067%2013.8453%206.22203L13.8632%207.13885C13.8875%208.36323%2013.3358%209.40008%2012.1236%209.48012C11.5372%209.82919%2010.7582%209.53694%2010.458%208.96028C10.0873%208.82625%209.95316%208.51914%209.74581%208.22357C9.59355%208.00668%209.29992%207.73297%209.25661%207.44781L9.14945%206.73668C9.13547%205.66094%209.25924%204.60075%209.02716%203.5352L8.45574%202.07816C8.18718%201.39339%208.45879%200.629797%208.98102%200.164401ZM16.1809%201.54091C16.3612%201.62375%2016.5523%201.77422%2016.7674%201.79048C17.4659%201.84396%2018.5335%203.16819%2018.6419%203.64672L18.7721%204.22461L19.0071%205.43163C19.067%205.73789%2019.2525%205.99074%2019.4836%206.20761L19.8401%206.54226C19.9935%206.85841%2019.978%207.63354%2019.7168%207.93037C19.381%208.31112%2018.9885%208.59989%2018.5691%208.87828C17.7386%209.42998%2016.5176%209.47859%2015.6762%208.94244L14.8189%208.39678L14.3327%207.17363C14.138%206.68322%2014.1256%205.56314%2014.6422%205.37596C14.6266%204.65737%2015.0326%204.04529%2014.9654%202.96468C14.9209%202.255%2014.294%201.76122%2014.7178%201.42775L14.405%201.19197C14.3221%201.12956%2014.3927%200.877261%2014.4589%200.750529L16.1809%201.54091ZM20.4388%206.37456L20.4399%206.43705L20.4419%206.4966L20.4428%206.437L20.4417%206.37451L20.4387%206.31401L20.4388%206.37456Z'%20fill%3D'%23EF3D7D'%2F%3E%3C%2Fsvg%3E") 12 9, auto !important;                 /* images + kraft → medium-rare pink */
}
/* orange backgrounds → brisket red */
.table, .table * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.1824%209.94974C12.4806%2010.2316%2013.2406%209.59193%2013.2826%209.74118L14.29%2010.0469L14.9075%2010.2793L17.0113%2010.9478L18.3945%2011.4647C18.5394%2011.8479%2018.7745%2011.5613%2019.4226%2011.8345L20.0996%2012.1196C20.5802%2012.3225%2021.0857%2012.7875%2021.3807%2013.2215L22.0303%2014.179L23.5281%2016.4452C24.3024%2017.6165%2023.8073%2017.6523%2023.6516%2018.3174C23.4558%2019.1568%2022.811%2019.7034%2022.1622%2020.2255C21.2834%2020.9325%2020.3989%2021.5467%2019.3157%2021.8789C19.0836%2022.2316%2018.6577%2022.3012%2018.2821%2022.146C17.193%2022.2719%2016.1851%2022.1934%2015.0813%2021.9743C14.1597%2021.7919%2013.6804%2023.2914%2010.7126%2023.88C10.0969%2024.0022%209.6447%2024.078%209.01225%2023.8325C8.47036%2023.6219%207.76126%2023.1971%207.39466%2022.8166C7.36347%2022.7841%207.2179%2022.691%207.21767%2022.6927C7.21814%2022.6949%207.17808%2022.8389%207.1626%2022.8949C6.54845%2023.1657%205.87965%2022.7868%205.66137%2022.1661C5.35546%2021.743%205.25933%2021.3434%205.15968%2020.8426C5.08979%2020.4941%204.69899%2020.096%204.62075%2019.7357L4.2894%2018.2109C4.15681%2017.6014%204.36608%2017.0574%204.56731%2016.5066C4.80952%2015.843%205.19328%2015.2895%205.59343%2014.6925L5.9942%2014.0956C6.57879%2013.2234%207.31264%2012.5254%208.33374%2012.0994C8.39677%2011.4176%208.88207%2011.0326%209.39563%2010.6558C9.92878%2010.2647%2010.4426%209.78957%2011.1824%209.94974ZM2.55158%207.84516C2.35718%208.46834%202.30413%209.05151%202.53274%209.6192L3.02998%2010.8558C3.5853%2011.0854%204.2888%2011.2709%204.61102%2011.7922L5.13668%2012.6426C5.63487%2013.4485%205.37184%2014.293%204.81717%2014.9854C3.74357%2016.3259%203.27591%2016.2148%201.93238%2015.9607C1.62964%2015.9034%201.41863%2015.7343%201.17976%2015.5929C0.856367%2015.4015%200.670092%2015.2808%200.471417%2014.9646C0.112418%2014.3937%20-0.0583148%2013.8504%200.0178889%2013.1548L0.313707%2010.4618C0.366347%209.98166%200.364422%209.45339%200.959663%209.30676C1.04065%208.53785%201.39617%207.87639%202.1006%207.46821L2.55158%207.84516ZM20.2787%205.59794C20.3344%205.26579%2020.8778%205.90489%2021.2269%206.03458C23.1355%206.74447%2022.4776%207.48109%2023.3043%208.54656L23.7122%209.36574C24.2445%2010.4372%2023.8744%2011.8233%2022.6846%2012.2161C21.9928%2012.4444%2021.2142%2012.369%2020.6433%2011.9939C20.0441%2011.6005%2019.773%2011.165%2019.7889%2010.4949C19.8074%209.71691%2019.9935%208.95213%2020.5887%208.41815L20.6802%207.55803L20.2455%206.54984C20.1589%206.34876%2020.1902%206.08825%2020.2292%205.89475L20.2787%205.59794ZM7.66032%203.5112C7.54851%204.25077%207.35883%205.03321%207.52174%205.81182C7.68474%206.5901%209.14245%206.55437%209.16898%208.69465C9.18034%209.59383%208.60822%2010.681%207.84107%2011.2368L7.07245%2011.6311C6.84669%2011.747%206.68006%2011.833%206.49659%2011.9898C6.04738%2011.9589%205.55179%2011.6812%205.06741%2011.4717C4.62975%2011.2827%204.14622%2011.2357%204.11788%2010.6786L4.30558%2010.7447C4.35146%2010.7605%204.46371%2010.642%204.42345%2010.6147L4.22083%2010.4776C4.09595%2010.3933%203.97896%2010.298%203.89353%2010.1922L3.61003%209.84164C3.5487%209.76564%203.62941%209.56613%203.67152%209.44793C3.53931%209.11609%203.55976%208.64687%203.64062%208.29302C3.29857%207.54986%203.9269%206.95876%204.18564%206.44729C4.68418%205.46308%204.60929%203.94658%205.21507%203.31264C5.57958%202.93168%206.13006%202.7183%206.63183%202.55928L7.26415%202.35778L7.66032%203.5112ZM8.98102%200.164401C9.27951%20-0.101305%209.69928%20-0.0273015%209.91345%200.257517L10.2924%200.761722C10.8972%201.56602%2011.7579%201.70035%2012.1195%202.64614C12.3087%203.14087%2012.4596%203.86532%2012.8696%204.21141C13.2432%204.52669%2013.5227%204.67219%2013.6758%205.1301C13.7973%205.49266%2013.8379%205.85067%2013.8453%206.22203L13.8632%207.13885C13.8875%208.36323%2013.3358%209.40008%2012.1236%209.48012C11.5372%209.82919%2010.7582%209.53694%2010.458%208.96028C10.0873%208.82625%209.95316%208.51914%209.74581%208.22357C9.59355%208.00668%209.29992%207.73297%209.25661%207.44781L9.14945%206.73668C9.13547%205.66094%209.25924%204.60075%209.02716%203.5352L8.45574%202.07816C8.18718%201.39339%208.45879%200.629797%208.98102%200.164401ZM16.1809%201.54091C16.3612%201.62375%2016.5523%201.77422%2016.7674%201.79048C17.4659%201.84396%2018.5335%203.16819%2018.6419%203.64672L18.7721%204.22461L19.0071%205.43163C19.067%205.73789%2019.2525%205.99074%2019.4836%206.20761L19.8401%206.54226C19.9935%206.85841%2019.978%207.63354%2019.7168%207.93037C19.381%208.31112%2018.9885%208.59989%2018.5691%208.87828C17.7386%209.42998%2016.5176%209.47859%2015.6762%208.94244L14.8189%208.39678L14.3327%207.17363C14.138%206.68322%2014.1256%205.56314%2014.6422%205.37596C14.6266%204.65737%2015.0326%204.04529%2014.9654%202.96468C14.9209%202.255%2014.294%201.76122%2014.7178%201.42775L14.405%201.19197C14.3221%201.12956%2014.3927%200.877261%2014.4589%200.750529L16.1809%201.54091ZM20.4388%206.37456L20.4399%206.43705L20.4419%206.4966L20.4428%206.437L20.4417%206.37451L20.4387%206.31401L20.4388%206.37456Z'%20fill%3D'%238B001E'%2F%3E%3C%2Fsvg%3E") 12 9, auto !important;
}
/* pink / red backgrounds → cornbread yellow */
.says, .says *,
.marquee--hero, .marquee--hero *,          /* the ember-red "sorry about your shirt" band */
.intro__orange .intro__logo {              /* the red EMBER logo on the opening screen is a red surface */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.1824%209.94974C12.4806%2010.2316%2013.2406%209.59193%2013.2826%209.74118L14.29%2010.0469L14.9075%2010.2793L17.0113%2010.9478L18.3945%2011.4647C18.5394%2011.8479%2018.7745%2011.5613%2019.4226%2011.8345L20.0996%2012.1196C20.5802%2012.3225%2021.0857%2012.7875%2021.3807%2013.2215L22.0303%2014.179L23.5281%2016.4452C24.3024%2017.6165%2023.8073%2017.6523%2023.6516%2018.3174C23.4558%2019.1568%2022.811%2019.7034%2022.1622%2020.2255C21.2834%2020.9325%2020.3989%2021.5467%2019.3157%2021.8789C19.0836%2022.2316%2018.6577%2022.3012%2018.2821%2022.146C17.193%2022.2719%2016.1851%2022.1934%2015.0813%2021.9743C14.1597%2021.7919%2013.6804%2023.2914%2010.7126%2023.88C10.0969%2024.0022%209.6447%2024.078%209.01225%2023.8325C8.47036%2023.6219%207.76126%2023.1971%207.39466%2022.8166C7.36347%2022.7841%207.2179%2022.691%207.21767%2022.6927C7.21814%2022.6949%207.17808%2022.8389%207.1626%2022.8949C6.54845%2023.1657%205.87965%2022.7868%205.66137%2022.1661C5.35546%2021.743%205.25933%2021.3434%205.15968%2020.8426C5.08979%2020.4941%204.69899%2020.096%204.62075%2019.7357L4.2894%2018.2109C4.15681%2017.6014%204.36608%2017.0574%204.56731%2016.5066C4.80952%2015.843%205.19328%2015.2895%205.59343%2014.6925L5.9942%2014.0956C6.57879%2013.2234%207.31264%2012.5254%208.33374%2012.0994C8.39677%2011.4176%208.88207%2011.0326%209.39563%2010.6558C9.92878%2010.2647%2010.4426%209.78957%2011.1824%209.94974ZM2.55158%207.84516C2.35718%208.46834%202.30413%209.05151%202.53274%209.6192L3.02998%2010.8558C3.5853%2011.0854%204.2888%2011.2709%204.61102%2011.7922L5.13668%2012.6426C5.63487%2013.4485%205.37184%2014.293%204.81717%2014.9854C3.74357%2016.3259%203.27591%2016.2148%201.93238%2015.9607C1.62964%2015.9034%201.41863%2015.7343%201.17976%2015.5929C0.856367%2015.4015%200.670092%2015.2808%200.471417%2014.9646C0.112418%2014.3937%20-0.0583148%2013.8504%200.0178889%2013.1548L0.313707%2010.4618C0.366347%209.98166%200.364422%209.45339%200.959663%209.30676C1.04065%208.53785%201.39617%207.87639%202.1006%207.46821L2.55158%207.84516ZM20.2787%205.59794C20.3344%205.26579%2020.8778%205.90489%2021.2269%206.03458C23.1355%206.74447%2022.4776%207.48109%2023.3043%208.54656L23.7122%209.36574C24.2445%2010.4372%2023.8744%2011.8233%2022.6846%2012.2161C21.9928%2012.4444%2021.2142%2012.369%2020.6433%2011.9939C20.0441%2011.6005%2019.773%2011.165%2019.7889%2010.4949C19.8074%209.71691%2019.9935%208.95213%2020.5887%208.41815L20.6802%207.55803L20.2455%206.54984C20.1589%206.34876%2020.1902%206.08825%2020.2292%205.89475L20.2787%205.59794ZM7.66032%203.5112C7.54851%204.25077%207.35883%205.03321%207.52174%205.81182C7.68474%206.5901%209.14245%206.55437%209.16898%208.69465C9.18034%209.59383%208.60822%2010.681%207.84107%2011.2368L7.07245%2011.6311C6.84669%2011.747%206.68006%2011.833%206.49659%2011.9898C6.04738%2011.9589%205.55179%2011.6812%205.06741%2011.4717C4.62975%2011.2827%204.14622%2011.2357%204.11788%2010.6786L4.30558%2010.7447C4.35146%2010.7605%204.46371%2010.642%204.42345%2010.6147L4.22083%2010.4776C4.09595%2010.3933%203.97896%2010.298%203.89353%2010.1922L3.61003%209.84164C3.5487%209.76564%203.62941%209.56613%203.67152%209.44793C3.53931%209.11609%203.55976%208.64687%203.64062%208.29302C3.29857%207.54986%203.9269%206.95876%204.18564%206.44729C4.68418%205.46308%204.60929%203.94658%205.21507%203.31264C5.57958%202.93168%206.13006%202.7183%206.63183%202.55928L7.26415%202.35778L7.66032%203.5112ZM8.98102%200.164401C9.27951%20-0.101305%209.69928%20-0.0273015%209.91345%200.257517L10.2924%200.761722C10.8972%201.56602%2011.7579%201.70035%2012.1195%202.64614C12.3087%203.14087%2012.4596%203.86532%2012.8696%204.21141C13.2432%204.52669%2013.5227%204.67219%2013.6758%205.1301C13.7973%205.49266%2013.8379%205.85067%2013.8453%206.22203L13.8632%207.13885C13.8875%208.36323%2013.3358%209.40008%2012.1236%209.48012C11.5372%209.82919%2010.7582%209.53694%2010.458%208.96028C10.0873%208.82625%209.95316%208.51914%209.74581%208.22357C9.59355%208.00668%209.29992%207.73297%209.25661%207.44781L9.14945%206.73668C9.13547%205.66094%209.25924%204.60075%209.02716%203.5352L8.45574%202.07816C8.18718%201.39339%208.45879%200.629797%208.98102%200.164401ZM16.1809%201.54091C16.3612%201.62375%2016.5523%201.77422%2016.7674%201.79048C17.4659%201.84396%2018.5335%203.16819%2018.6419%203.64672L18.7721%204.22461L19.0071%205.43163C19.067%205.73789%2019.2525%205.99074%2019.4836%206.20761L19.8401%206.54226C19.9935%206.85841%2019.978%207.63354%2019.7168%207.93037C19.381%208.31112%2018.9885%208.59989%2018.5691%208.87828C17.7386%209.42998%2016.5176%209.47859%2015.6762%208.94244L14.8189%208.39678L14.3327%207.17363C14.138%206.68322%2014.1256%205.56314%2014.6422%205.37596C14.6266%204.65737%2015.0326%204.04529%2014.9654%202.96468C14.9209%202.255%2014.294%201.76122%2014.7178%201.42775L14.405%201.19197C14.3221%201.12956%2014.3927%200.877261%2014.4589%200.750529L16.1809%201.54091ZM20.4388%206.37456L20.4399%206.43705L20.4419%206.4966L20.4428%206.437L20.4417%206.37451L20.4387%206.31401L20.4388%206.37456Z'%20fill%3D'%23E5B7D6'%2F%3E%3C%2Fsvg%3E") 12 9, auto !important;
}

/* opening screen (intro) → lilac paw cursor, matches the JS #E5B7D6 paw */
.intro__orange, .intro__orange * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M11.1824%209.94974C12.4806%2010.2316%2013.2406%209.59193%2013.2826%209.74118L14.29%2010.0469L14.9075%2010.2793L17.0113%2010.9478L18.3945%2011.4647C18.5394%2011.8479%2018.7745%2011.5613%2019.4226%2011.8345L20.0996%2012.1196C20.5802%2012.3225%2021.0857%2012.7875%2021.3807%2013.2215L22.0303%2014.179L23.5281%2016.4452C24.3024%2017.6165%2023.8073%2017.6523%2023.6516%2018.3174C23.4558%2019.1568%2022.811%2019.7034%2022.1622%2020.2255C21.2834%2020.9325%2020.3989%2021.5467%2019.3157%2021.8789C19.0836%2022.2316%2018.6577%2022.3012%2018.2821%2022.146C17.193%2022.2719%2016.1851%2022.1934%2015.0813%2021.9743C14.1597%2021.7919%2013.6804%2023.2914%2010.7126%2023.88C10.0969%2024.0022%209.6447%2024.078%209.01225%2023.8325C8.47036%2023.6219%207.76126%2023.1971%207.39466%2022.8166C7.36347%2022.7841%207.2179%2022.691%207.21767%2022.6927C7.21814%2022.6949%207.17808%2022.8389%207.1626%2022.8949C6.54845%2023.1657%205.87965%2022.7868%205.66137%2022.1661C5.35546%2021.743%205.25933%2021.3434%205.15968%2020.8426C5.08979%2020.4941%204.69899%2020.096%204.62075%2019.7357L4.2894%2018.2109C4.15681%2017.6014%204.36608%2017.0574%204.56731%2016.5066C4.80952%2015.843%205.19328%2015.2895%205.59343%2014.6925L5.9942%2014.0956C6.57879%2013.2234%207.31264%2012.5254%208.33374%2012.0994C8.39677%2011.4176%208.88207%2011.0326%209.39563%2010.6558C9.92878%2010.2647%2010.4426%209.78957%2011.1824%209.94974ZM2.55158%207.84516C2.35718%208.46834%202.30413%209.05151%202.53274%209.6192L3.02998%2010.8558C3.5853%2011.0854%204.2888%2011.2709%204.61102%2011.7922L5.13668%2012.6426C5.63487%2013.4485%205.37184%2014.293%204.81717%2014.9854C3.74357%2016.3259%203.27591%2016.2148%201.93238%2015.9607C1.62964%2015.9034%201.41863%2015.7343%201.17976%2015.5929C0.856367%2015.4015%200.670092%2015.2808%200.471417%2014.9646C0.112418%2014.3937%20-0.0583148%2013.8504%200.0178889%2013.1548L0.313707%2010.4618C0.366347%209.98166%200.364422%209.45339%200.959663%209.30676C1.04065%208.53785%201.39617%207.87639%202.1006%207.46821L2.55158%207.84516ZM20.2787%205.59794C20.3344%205.26579%2020.8778%205.90489%2021.2269%206.03458C23.1355%206.74447%2022.4776%207.48109%2023.3043%208.54656L23.7122%209.36574C24.2445%2010.4372%2023.8744%2011.8233%2022.6846%2012.2161C21.9928%2012.4444%2021.2142%2012.369%2020.6433%2011.9939C20.0441%2011.6005%2019.773%2011.165%2019.7889%2010.4949C19.8074%209.71691%2019.9935%208.95213%2020.5887%208.41815L20.6802%207.55803L20.2455%206.54984C20.1589%206.34876%2020.1902%206.08825%2020.2292%205.89475L20.2787%205.59794ZM7.66032%203.5112C7.54851%204.25077%207.35883%205.03321%207.52174%205.81182C7.68474%206.5901%209.14245%206.55437%209.16898%208.69465C9.18034%209.59383%208.60822%2010.681%207.84107%2011.2368L7.07245%2011.6311C6.84669%2011.747%206.68006%2011.833%206.49659%2011.9898C6.04738%2011.9589%205.55179%2011.6812%205.06741%2011.4717C4.62975%2011.2827%204.14622%2011.2357%204.11788%2010.6786L4.30558%2010.7447C4.35146%2010.7605%204.46371%2010.642%204.42345%2010.6147L4.22083%2010.4776C4.09595%2010.3933%203.97896%2010.298%203.89353%2010.1922L3.61003%209.84164C3.5487%209.76564%203.62941%209.56613%203.67152%209.44793C3.53931%209.11609%203.55976%208.64687%203.64062%208.29302C3.29857%207.54986%203.9269%206.95876%204.18564%206.44729C4.68418%205.46308%204.60929%203.94658%205.21507%203.31264C5.57958%202.93168%206.13006%202.7183%206.63183%202.55928L7.26415%202.35778L7.66032%203.5112ZM8.98102%200.164401C9.27951%20-0.101305%209.69928%20-0.0273015%209.91345%200.257517L10.2924%200.761722C10.8972%201.56602%2011.7579%201.70035%2012.1195%202.64614C12.3087%203.14087%2012.4596%203.86532%2012.8696%204.21141C13.2432%204.52669%2013.5227%204.67219%2013.6758%205.1301C13.7973%205.49266%2013.8379%205.85067%2013.8453%206.22203L13.8632%207.13885C13.8875%208.36323%2013.3358%209.40008%2012.1236%209.48012C11.5372%209.82919%2010.7582%209.53694%2010.458%208.96028C10.0873%208.82625%209.95316%208.51914%209.74581%208.22357C9.59355%208.00668%209.29992%207.73297%209.25661%207.44781L9.14945%206.73668C9.13547%205.66094%209.25924%204.60075%209.02716%203.5352L8.45574%202.07816C8.18718%201.39339%208.45879%200.629797%208.98102%200.164401ZM16.1809%201.54091C16.3612%201.62375%2016.5523%201.77422%2016.7674%201.79048C17.4659%201.84396%2018.5335%203.16819%2018.6419%203.64672L18.7721%204.22461L19.0071%205.43163C19.067%205.73789%2019.2525%205.99074%2019.4836%206.20761L19.8401%206.54226C19.9935%206.85841%2019.978%207.63354%2019.7168%207.93037C19.381%208.31112%2018.9885%208.59989%2018.5691%208.87828C17.7386%209.42998%2016.5176%209.47859%2015.6762%208.94244L14.8189%208.39678L14.3327%207.17363C14.138%206.68322%2014.1256%205.56314%2014.6422%205.37596C14.6266%204.65737%2015.0326%204.04529%2014.9654%202.96468C14.9209%202.255%2014.294%201.76122%2014.7178%201.42775L14.405%201.19197C14.3221%201.12956%2014.3927%200.877261%2014.4589%200.750529L16.1809%201.54091ZM20.4388%206.37456L20.4399%206.43705L20.4419%206.4966L20.4428%206.437L20.4417%206.37451L20.4387%206.31401L20.4388%206.37456Z'%20fill%3D'%23E5B7D6'%2F%3E%3C%2Fsvg%3E") 12 9, auto !important;
}

/* Custom paw cursor (JS-driven): follows the mouse and blends its colour from the
   zone it's leaving to the zone it's entering, gradient angled along the movement.
   Native SVG cursors above stay as the no-JS fallback. */
html.paw-cursor,
html.paw-cursor *, html.paw-cursor *::before, html.paw-cursor *::after { cursor: none !important; }
#paw-cursor {
  position: fixed; left: 0; top: 0; width: 24px; height: 24px;
  pointer-events: none; z-index: 2147483647;
  opacity: 0; transition: opacity .18s ease;
  will-change: transform;
}
#paw-cursor.is-visible { opacity: 1; }
#paw-cursor.is-down { transform-origin: 12px 9px; }

.h-display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:active { transform: scale(.97); }

/* Primary CTA — Figma "CTA (main)" sticker button */
.btn--primary {
  background: var(--ember-cta);
  color: var(--brisket);
  border: 2px solid var(--charcoal);
  box-shadow: 6px 6px 0 0 var(--charcoal);
  padding: 9px 15px;
  border-radius: 100px;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;
}@media (hover: hover) { .btn--primary:hover { background: var(--ember-cta); transform: rotate(-6deg); } }

.btn--primary:active { transform: rotate(-6deg) scale(.97); }

/* GET EMBER nav CTA — dotted-button lift (hover.dev): rise with a hard shadow, press flat on click */

.btn--secondary {
  background: transparent;
  color: var(--ember);
  border-color: var(--ember);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
}@media (hover: hover) { .btn--secondary:hover { background: var(--ember); color: var(--kraft); } }


/* Platters "See more" — Figma link with a hand-drawn wavy underline that travels on hover */
a.platters__cta {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--brisket);
  padding: 4px 0 10px;               /* no side padding → underline spans exactly the text width */
  font-size: 24px;
  position: relative;
  transition: opacity .2s ease;
}
a.platters__cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;
  background: url("assets/see-more-1.svg") no-repeat center / 100% 100%;
  transform-origin: left center;
}@media (hover: hover) { a.platters__cta:hover { background: none; color: var(--brisket); opacity: .85; } }
@media (hover: hover) { /* line is always there; on hover it "boils" — cycles through the three wavy line
   SVGs so the hand-drawn underline looks like it's being redrawn / wiggling */
a.platters__cta:hover::after { animation: cta-boil 2.6s steps(1, end) infinite; } }

@keyframes cta-boil {
  0%,   18% { background-image: url("assets/see-more-1.svg"); }
  20%,  38% { background-image: url("assets/see-more-2.svg"); }
  40%,  58% { background-image: url("assets/see-more-3.svg"); }
  60%,  78% { background-image: url("assets/see-more-2.svg"); }
  80%, 100% { background-image: url("assets/see-more-1.svg"); }
}

/* ============================================================
   OPENING INTRO  (plays once on load / refresh)
   ============================================================ */
.intro { display: none; }   /* off by default → safe when motion is reduced or JS is off */

@media (prefers-reduced-motion: no-preference) {
  .intro {
    display: block;
    position: fixed; inset: 0; z-index: 9999; overflow: hidden;
    pointer-events: none;                 /* purely visual — never blocks the page */
  }
  .intro__orange {
    position: absolute; inset: 0;
    background: var(--ember);             /* #FF4C00 */
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;                 /* capture the pointer so the orange screen shows its brisket cursor */
    isolation: isolate;                   /* mix-blend-mode of the grain ::after must blend against THIS bg,
                                             not the page behind — without it the texture drops out while the
                                             panel is animating/composited on mobile GPUs */
    animation: intro-orange 2.6s ease both;
  }
  .intro__orange::after {               /* masked wavy grain (shared grain.webp), tinted #FF0000 */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-color: #FF0000;
    -webkit-mask: url(assets/grain.webp?v=3) center / cover;
            mask: url(assets/grain.webp?v=3) center / cover;
    mix-blend-mode: multiply; opacity: .3;
  }
  .intro__logo {
    position: relative; z-index: 1;       /* sit above the grain texture — logo stays clean */
    display: block; width: min(88vw, 1400px); height: 34vh;
    background: var(--brisket);           /* maroon EMBER */
    -webkit-mask: url(assets/ember-logo.svg) no-repeat center / contain;
            mask: url(assets/ember-logo.svg) no-repeat center / contain;
    animation: intro-logo 2.6s ease both;
  }
  .intro__panel {
    position: absolute; left: 0; width: 100%; height: 50%;   /* % of the fixed .intro box (not vh):
      each panel is exactly half so top + bottom MEET at the centre line — no overlap band (the
      bottom was stacking over the top at 52%), and the grain below stays continuous. */
    background: var(--brisket);           /* deep-red closing screen */
    overflow: hidden;
    isolation: isolate;                   /* keep the grain ::after's multiply blending against this panel's
                                             bg while it animates apart (mobile GPUs drop the blend otherwise) */
  }
  .intro__panel::after {                /* masked wavy grain (shared grain.webp), tinted #850010 over the red */
    content: ""; position: absolute; left: 0; width: 100%; height: 200%;   /* = full .intro height → texture is continuous across the centre seam */
    pointer-events: none;
    background-color: #850010;
    -webkit-mask: url(assets/grain.webp?v=3) center / cover;
            mask: url(assets/grain.webp?v=3) center / cover;
    mix-blend-mode: multiply; opacity: .3;
  }
  .intro__top    { top: 0;    animation: intro-top 2.6s cubic-bezier(.7,0,.2,1) both; }
  .intro__bottom { bottom: 0; animation: intro-bottom 2.6s cubic-bezier(.7,0,.2,1) both; }
  .intro__top::after    { top: 0; }     /* align both halves so the grain is continuous */
  .intro__bottom::after { bottom: 0; }

  /* nav + marquee + title slide/fade in AFTER the panels have parted (so they're
     clearly visible animating in, not revealed already-in-place) */
  .intro-on .nav          { animation: intro-nav .45s cubic-bezier(.2,.7,.2,1) 2.55s both; }
  .intro-on .marquee--hero{ animation: intro-marquee .45s cubic-bezier(.2,.7,.2,1) 2.6s both; }
  /* hero title reveals word-by-word (JS-driven) instead of a single block slide */
}
.hero__title .hw-w { display: inline-block; opacity: 0; will-change: opacity, transform, filter; }
@keyframes hero-word {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

@keyframes intro-orange {
  0%, 63%  { opacity: 1; pointer-events: auto; }
  64%,100% { opacity: 0; pointer-events: none; }   /* release the pointer once the orange is gone → hero stays interactive */
}
@keyframes intro-logo {
  0%       { transform: translateY(28px); opacity: 0; }  /* slight rise from below */
  34%, 60% { transform: translateY(0);    opacity: 1; }  /* gentle fade up over ~0.9s so it reads as a fade, not a pop */
  64%, 100%{ transform: translateY(0);    opacity: 0; }  /* logo fully out with the orange — never lingers over the hero */
}
@keyframes intro-top    { 0%, 40% { transform: translateY(-101%); } 63%, 70% { transform: translateY(0); } 100% { transform: translateY(-101%); } }
@keyframes intro-bottom { 0%, 40% { transform: translateY(101%);  } 63%, 70% { transform: translateY(0); } 100% { transform: translateY(101%);  } }
@keyframes intro-nav     { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes intro-marquee { from { transform: translateY(100%);  } to { transform: translateY(0); } }
@keyframes intro-title   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled {
  background: transparent;
  box-shadow: none;
}
.nav__inner {
  width: 100%;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__bear { justify-self: start; }
.nav__logo { justify-self: center; }
.nav__cta { justify-self: end; }

/* Logos are SVG-shaped masks over a fill; JS drives the fill colour per scroll */
.logo-fill {
  display: block;
  background: var(--mustard);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-mode: alpha;       mask-mode: alpha;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.28));
}
.bear-fill {
  width: 72px; height: 72px;                 /* Figma nav: bear 72×72 */
  -webkit-mask-image: url(assets/bear-logo.svg); mask-image: url(assets/bear-logo.svg);
  transform-origin: center center;
  animation: bear-wiggle 2600ms linear infinite;
}
.ember-fill {
  width: 229px; height: 60px;                /* Figma nav: EMBER logo 60px tall (183:48 aspect) */
  -webkit-mask-image: url(assets/ember-logo.svg); mask-image: url(assets/ember-logo.svg);
}
/* Snarl wiggle — ported from orhgao.sg Wix "motion-wiggle-023": a damped shake burst then rest */
@keyframes bear-wiggle {
  0%     { transform: rotate(0deg)  translateY(0); }
  4.14%  { transform: rotate(10deg) translateY(-10px); }
  8.05%  { transform: rotate(-8deg) translateY(0); }
  12.19% { transform: rotate(6deg)  translateY(0); }
  16.79% { transform: rotate(-4deg) translateY(0); }
  23%    { transform: rotate(0deg)  translateY(0); }
  100%   { transform: rotate(0deg)  translateY(0); }
}

/* ============================================================
   HERO
   ============================================================ */
/* hero pins while the build-a-wrap section scrolls up and layers over it */
.hero-stack { position: relative; z-index: 0; }
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.42));
}
.hero__title {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  color: var(--mustard);
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-size: clamp(30px, 7vw, 104px);
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
  padding: 0 20px;
  margin-bottom: 60px;
}

/* Header byline annotations — two words stacked, each tilted ±6° */
.annot {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--mustard);
  opacity: .95;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.annot__w { display: block; transform-origin: center center; }
.annot__w + .annot__w { margin-top: -6px; } /* -6px overlap between every stacked word */

/* Looping seesaw: top word 6° ⇄ -6°, bottom word -6° ⇄ 6° (opposite phase) */
@keyframes annot-w1 { 0%, 100% { transform: rotate(6deg); }  50% { transform: rotate(-6deg); } }
@keyframes annot-w2 { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.annot__w1 { transform: rotate(6deg);  animation: annot-w1 2.2s ease-in-out infinite; }
.annot__w2 { transform: rotate(-6deg); animation: annot-w2 2.2s ease-in-out infinite; }

.annot--dark { color: var(--kraft); }
.annot--a { top: 20%; left: 13%; }
.annot--b { top: 15%; right: 14%; }
.annot--c { top: 66%; left: 42%; }

/* ---------- Marquee (shared) ---------- */
.marquee {
  overflow: hidden;
  width: 100%;
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll-x 32s linear infinite;
}@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }

@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee--hero {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  background: var(--ember);
  height: 72px;
}
.marquee--hero .marquee__track { animation-duration: 65s; height: 72px; }   /* 20 spans now — longer track, so slower duration keeps the same scroll speed + no end gap */
.marquee--hero span {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--mustard);
  font-size: clamp(16px, 1.8vw, 24px);
  letter-spacing: .03em;
  padding: 0 22px;
  display: inline-flex;
  gap: 22px;
  align-items: center;
}
.marquee--hero .marquee__arrow {
  width: auto;
  height: 22px;
}

/* ============================================================
   BUILD A WRAP — full-screen pinned, scroll-scrubbed
   ============================================================ */
.wrap-scroll {
  position: relative;
  z-index: 1;                 /* slides up over the pinned hero */
  height: 500vh;              /* phase 1 (build-a-wrap) + phase 2 (how to Ember). 700→500→350→500vh: 350 felt too fast, so add runway back so each HTE frame advances in ~1 screen of scroll */
  background: var(--kraft);
  box-shadow: 0 -24px 55px rgba(0, 0, 0, .22);   /* soft edge as it lifts over the hero */
}
/* Phones: 680vh made each How-to-Ember frame take 2–3 swipes to advance. 400vh
   gives ~one swipe per frame (HTE window is ~64% of the section ÷ 3 frames). */
@media (max-width: 640px) {
  .wrap-scroll { height: 400vh; }
}
.wrap-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--kraft);
  border-radius: 0;   /* square top so the green leaf panels aren't clipped/curved at the top corners */
}
.wrap-stage {
  position: absolute;
  inset: 0;
}

/* Ember-orange texture: sits in front of the kraft background but behind the
   copy (z2), food (z3) and leaves (z5/6). The strip is very tall, so object-fit
   cover crops it up/down as the viewport changes. */
.wrap-texture {                /* masked wavy grain (shared grain.webp), tinted #FAE1B9 over the kraft */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-color: #FAE1B9;
  -webkit-mask: url(assets/grain.webp?v=3) center / cover;
          mask: url(assets/grain.webp?v=3) center / cover;
  mix-blend-mode: multiply; opacity: .3;
}

/* intro + tagline block — centred, 48px between them */
.wrap-copy {
  position: absolute;
  top: 52%;                   /* sits below centre so the copy clears the fixed nav wordmark up top */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;                 /* above the sliding food photos so the copy is never clipped on narrow/square viewports */
  width: min(500px, 52vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.wrap-intro {
  width: 100%;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  color: var(--brisket);
  font-size: clamp(18px, 1.8vw, 25px);
  line-height: 1.5;
  letter-spacing: .005em;
}
.wrap-intro .wi-w { display: inline-block; opacity: 0; will-change: opacity, transform, filter; }
.wrap-intro .wi-break { display: block; height: 1.1em; }   /* gap between the two paragraphs */
.wrap-intro .wi-nowrap { white-space: nowrap; }             /* keeps the final two words off an orphan line */
.wrap-intro--mob { display: none; }                         /* desktop copy shows by default */

/* flying food photos — anchored at final spot, JS slides them in via --x;
   --vr adds a scroll-velocity tilt (frydate-style) that settles when idle */
.wrap-food {
  position: absolute;
  z-index: 3;
  border-radius: 12px;
  object-fit: cover;
  will-change: transform;
  box-shadow: none;
  background: none;
}
/* positions/sizes matched to Figma "Build a wrap" Variant6 (frame 1920×1080) */
/* heights capped by a vw term so the photos can't balloon on tall / portrait viewports
   (the min() picks vh on wide screens — unchanged desktop look — and vw when it's taller than wide) */
.wf-1 { left: -2vw;   top: 50%;      height: min(65vh, 44vw); transform: translate(var(--x1, -135vw), -50%) rotate(calc(-6deg + var(--vr, 0deg))); }
.wf-2 { right: 0;     bottom: 4.4vh; height: min(55vh, 40vw); transform: translateX(var(--x2, 135vw)) rotate(calc(6deg - var(--vr, 0deg))); }
.wf-3 { right: 2.5vw; top: 2vh;      height: min(28vh, 22vw); transform: translateX(var(--x3, 145vw)) rotate(calc(-6deg + var(--vr, 0deg))); }

/* leaf wipe — two oversized lettuce leaves slide in from each side, fully covering the screen */
.wrap-leaf {
  position: absolute;
  z-index: 5;
  top: 50%;
  height: 150vh;               /* wide lettuce sized by height so it covers the viewport when closed */
  width: auto;
  max-width: none;
  will-change: transform;
  pointer-events: none;
}
.wl-left  { left: 0;  top: 50%; z-index: 6; transform: translate(var(--xl, -100%), -50%); }  /* left leaf sits above the right */
.wl-right { right: 0; top: 50%; z-index: 5; transform: translate(var(--xr, 100%), -50%); }  /* both leaves vertically centred */
.wrap-green {                    /* solid leaf-green behind the leaves; render() fades it in with `cov` so any
                                    slivers between the closed leaves read green, not the cream frame underneath.
                                    Lets the leaves display smaller (crisper) without cream gaps showing. */
  position: absolute; inset: 0; z-index: 4;   /* above the .hte frames (also z4, but earlier in DOM), below leaves (z5/6) */
  background: #2A9747;           /* dominant lettuce green */
  opacity: 0; pointer-events: none;
}

/* ============================================================
   TABLET (641–1024px): the pinned scroll-scrubbed build-a-wrap / how-to-ember
   collage needs a wide 16:9 frame, so on tablet it collapses to a clean static
   intro on kraft — no overlapping photos or leaves. Phones (≤640) run the FULL
   choreography in a portrait frame instead (see the ≤640 block below). The JS
   render() bails out only across this tablet band.
   ============================================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  .wrap-scroll { height: auto; box-shadow: none; }
  .wrap-pin { position: static; height: auto; min-height: 100svh; border-radius: 0; display: flex; align-items: center; overflow: visible; }
  .wrap-stage { position: static; inset: auto; width: 100%; }
  .wrap-texture { display: none; }
  .wrap-copy {
    position: static; transform: none;
    width: 100%; max-width: 620px; margin: 0 auto;
    padding: clamp(72px, 14vh, 140px) 28px;
    gap: clamp(32px, 6vh, 48px);
  }
  .wrap-intro { font-size: clamp(20px, 5.2vw, 30px); }
  .wrap-intro .wi-w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .wrap-intro--desk { display: none; }        /* swap to the punchier mobile copy */
  .wrap-intro--mob { display: block; }
  .wrap-food, .wrap-leaf, .hte, .hte-final { display: none !important; }
}

/* ===== PHASE 2 — HOW TO EMBER (three colour panels, revealed once leaves open) ===== */
.hte {
  position: absolute; inset: 0; z-index: 4;   /* above phase-1 content, below the leaves (z5/6) */
  opacity: 0;                                 /* hidden during phase 1 — JS reveals it */
  overflow: hidden;
  --panel-bg: #FDF098; --tex-color: #FFE865; --ink: #68680D; --card-bg: #1CA64A;   /* per-frame, set by JS */
  /* centred photo geometry (mirrors .hte__card: height min(560px,60vh), aspect 3/4).
     Copy is anchored to these so it keeps the same spot on the photo at any viewport. */
  --photo-h: min(560px, 60vh);
  --photo-half-w: calc(var(--photo-h) * 0.375);   /* = min(210px, 22.5vh) */
  --photo-half-h: calc(var(--photo-h) * 0.5);      /* = min(280px, 30vh)  */
}
.hte__bg, .hte__wipe { position: absolute; inset: 0; }
.hte__bg   { background: var(--panel-bg); transition: background-color .55s cubic-bezier(.5, 0, .2, 1); }
/* One shared cornbread texture, greyscaled + 30% multiply → tints to each frame's
   --panel-bg (which transitions per frame), so the texture stays put and only the
   colour changes. The per-frame .t0/.t1/.t2 layers are retired (JS still toggles them
   but they're empty/hidden — harmless). */
.hte__tex {                                     /* masked wavy grain (shared grain.webp), tinted per-frame --tex-color */
  position: absolute; inset: 0; pointer-events: none;
  background-color: var(--tex-color, var(--panel-bg));
  -webkit-mask: url(assets/grain.webp?v=3) center / cover;
          mask: url(assets/grain.webp?v=3) center / cover;
  mix-blend-mode: multiply; opacity: var(--tex-op, .2);
  transition: background-color .55s cubic-bezier(.5, 0, .2, 1);   /* ease the grain colour in sync with .hte__bg */
}
.hte__tex > i { display: none; }
.hte__wipe { display: none; }

.hte__inner { position: absolute; inset: 0; z-index: 2; }

/* small "HOW TO EMBER" label — top by default, bottom for frames that ask for it */
.hte__label {
  position: absolute; left: 50%; top: 11%; transform: translateX(-50%); margin: 0;
  font-family: var(--body); font-weight: 400;         /* ABC Diatype Regular (Figma node 3:9678) */
  font-size: 24px; letter-spacing: 0; color: var(--ink); white-space: nowrap;
  opacity: 0; filter: blur(6px);          /* blur-reveals on appear like the hero title */
  transition: color .55s cubic-bezier(.5, 0, .2, 1), opacity .55s cubic-bezier(.5, 0, .2, 1), filter .55s cubic-bezier(.5, 0, .2, 1);
}
.hte.label-bottom .hte__label { top: auto; bottom: 10.4%; }  /* Figma: y 938 of 1080 → ~10% from bottom */

/* headline copy — olive/rose, tilted, either side of the photo (clears the 408px leaf) */
.hte__text {
  position: absolute; top: 47%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 24px; line-height: 1; white-space: nowrap;
  color: #FDF098;                         /* cream labels, sit inside the photo (Figma) */
  z-index: 4;                             /* all copy sits ABOVE the photo card */
  opacity: 0; filter: blur(6px);          /* blur-reveals on appear (JS-driven), like the hero title */
  transition: color .55s cubic-bezier(.5, 0, .2, 1), opacity .55s cubic-bezier(.5, 0, .2, 1), filter .55s cubic-bezier(.5, 0, .2, 1);
}
/* PILE ON / THE MEATS — inside the photo, mid-left, left-aligned (Figma) */
.hte__text--left  {
  left: calc(50% - var(--photo-half-w) + 20px); right: auto; top: 48%;
  transform: translateY(-50%);
  align-items: center; text-align: center; gap: 0;
}
/* DOUBLE DIP / THE SAUCES — inside the photo, upper-right, left-aligned (Figma) */
.hte__text--right  {
  left: calc(50% + 28px); right: auto; top: 31%;
  transform: translateY(-50%); text-align: center;
  align-items: center; gap: 0; opacity: 0; filter: blur(6px);
  transition: opacity .55s cubic-bezier(.5, 0, .2, 1), filter .55s cubic-bezier(.5, 0, .2, 1);
}
/* WRAP IT / ALL UP — inside the photo, lower-right, only on the last frame */
.hte__text--right2 {
  left: calc(50% + 44px); right: auto; top: calc(50% + var(--photo-half-h) - 78px);
  transform: translateY(-50%); text-align: center;
  align-items: center; gap: 0; opacity: 0; filter: blur(6px);
  transition: opacity .55s cubic-bezier(.5, 0, .2, 1), filter .55s cubic-bezier(.5, 0, .2, 1);
}
.hte.has-right .hte__text--right { opacity: 1; }
/* Figma node 3:9679: GO FORKLESS +6° / GLOVE UP -6° (Figma CCW) → negated for CSS's CW rotate.
   The opposite tilts swing the two lines toward each other on the left, so a -6px/0 gap
   collides; +8px gives Figma's ~7px min clearance. Centre aligned. */
.hte__text .w1 { transform: rotate(-6deg); }
.hte__text .w2 { transform: rotate(6deg); margin-top: 12px; }

/* photo card — centred, exact 3:4 portrait aspect (matches the source images) */
.hte__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: min(560px, 60vh); aspect-ratio: 3 / 4; width: auto;
  border-radius: 12px; overflow: hidden; background: var(--card-bg);
  z-index: 1;                                   /* below the copy */
}
/* vertical carousel — photos stack and slide up (scroll down) / down (scroll up) */
.hte__stack { position: absolute; inset: 0; }
.hte__stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translateY(var(--slide, 0));
  transition: transform .55s cubic-bezier(.5, 0, .2, 1);
  will-change: transform;
}

/* "HOW TO EMBER" title — centred on the green as the leaves close at section entry (Figma 3:950) */
.hte-title {
  position: absolute; inset: 0; z-index: 7;   /* on top of the green leaves */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.hte-title p {
  margin: 0; text-align: center;
  font-family: var(--display); font-weight: 400;   /* TAY Birdie */
  text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1;
  color: var(--mustard);
}

.hte-final {
  position: absolute; inset: 0; z-index: 7;   /* on top of the green leaves */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.hte-final p {
  margin: 0; text-align: center; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(20px, 3.4vw, 40px); line-height: 1.2; white-space: nowrap;
  color: var(--mustard); transform: translateY(var(--fy, 40px));
}
.hte-final__br { display: none; }   /* desktop: one line */

/* ============================================================
   TABLE
   ============================================================ */
.menu-stack { position: relative; z-index: 0; }   /* platters slides up over the pinned table */
.table {
  position: sticky;
  top: 0;
  z-index: 0;
  background: #FF4C00;                 /* ember-orange border/background */
  /* constant 102px border on all four sides — the image inside crops
     (object-fit: cover) as the viewport changes, the padding never flexes */
  padding: 102px;
}
.table::before {                      /* masked wavy grain (shared grain.webp), tinted #FF0000 over the red */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: #FF0000;
  -webkit-mask: url(assets/grain.webp?v=3) center / cover;
          mask: url(assets/grain.webp?v=3) center / cover;
  mix-blend-mode: multiply; opacity: .3;
}
.table__frame {
  position: relative; z-index: 1;     /* image sits above the grain; grain shows in the border */
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  /* fill the viewport minus the two 102px borders, so the frame stays inside
     one screen and the photo crops up/down responsively; capped so it never
     gets taller than the source art */
  height: min(878px, calc(100svh - 204px));
}
.table__frame picture { display: block; width: 100%; height: 100%; }
.table__frame img { width: 100%; height: 100%; object-fit: cover; }
.table .annot {
  position: absolute;
  font-size: clamp(13px, 1.5vw, 22px);
  z-index: 4;
  color: var(--mustard);       /* popping mustard */
  text-shadow: none;           /* no shadow behind the byline text */
}
/* stacked words, each seesawing ±6° — same looping animation as the hero annotations */
.table__a { top: 8%;  left: 9%; }
.table__b { bottom: 12%; left: 8%; }
.table__c { bottom: 14%; right: 9%; }

/* ============================================================
   PLATTERS
   ============================================================ */
.platters {
  background: var(--kraft);
  position: relative;
  isolation: isolate;
  z-index: 1;                                    /* rides up over the pinned table */
  border-radius: 12px 12px 0 0;                  /* rounded top edge for the layered look */
  box-shadow: 0 -24px 55px rgba(0, 0, 0, .22);   /* soft edge as it lifts */
  overflow: hidden;
  padding: clamp(88px, 11vh, 128px) var(--pad) clamp(40px, 6vh, 90px);   /* top clears the fixed nav */
  text-align: center;
  /* always fit the whole section (heading + 3 cards + CTA) within one screen */
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.platters::before {                              /* masked wavy grain (shared grain.webp), tinted #FAE1B9 over the kraft */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: #FAE1B9;
  -webkit-mask: url(assets/grain.webp?v=3) center / cover;
          mask: url(assets/grain.webp?v=3) center / cover;
  mix-blend-mode: multiply; opacity: .3;
}
.platters__head { max-width: 760px; margin: 0 auto clamp(20px, 2.5vh, 36px); }   /* tighter gap to the cards */
.platters .h-display {
  color: var(--brisket);
  font-size: 48px;
  margin-bottom: 6px;
  white-space: nowrap;              /* keep "Pick your platter" on one line */
}
.platters__sub {
  color: var(--brisket);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.4;
  max-width: 552px;
  margin: 0 auto;
}
.platters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1200px;                /* 3 × 384px cards + 2 × 24px gaps — narrower/portrait */
  margin: 0 auto;
}
.platter {
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;   /* whole card = 12px radius */
  text-align: left;
}
.platter__img {
  aspect-ratio: 385 / 500;          /* narrower + taller — keeps a portrait card (not squarish) */
  overflow: hidden;
  background: var(--brisket);
  /* on genuinely short screens crop the photo down (cover) so the section still fits,
     but keep a tall floor so the cards stay portrait and never read squarish. */
  max-height: clamp(380px, calc(100svh - 460px), 560px);
}
.platter__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}@media (hover: hover) { .platter:hover .platter__img img { transform: scale(1.05); } }

.platter__footer {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  padding: 24px;
  transition: background-color .22s ease;
}
.platter__name, .platter__desc { transition: color .22s ease; }
.platter__text { flex: 0 1 auto; min-width: 0; text-align: center; }
.platter__name {
  font-family: var(--display);
  font-weight: 400;                 /* TAY Birdie Regular (Figma) — 800 faux-bolds + widens the glyphs */
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;              /* keep each platter name on one line */
}
.platter__desc {
  font-family: var(--body); font-weight: 700;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.4;
  margin-top: 2px;
}
.platter__add {
  flex-shrink: 0;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 24px; line-height: 1.2;
  padding: 9px 18px; border-radius: 100px;
  background: var(--mustard);
  transition: transform .15s ease, background-color .22s ease, color .22s ease;
}
.platter__add:active { transform: scale(.95); }
/* per-platter colours (Figma) — footer bg + text swap to the inverse on hover */
.platter--bear  .platter__footer { background: #FF4C00; }              /* ember orange */
.platter--bear  .platter__name,
.platter--bear  .platter__desc  { color: #FDF098; }
.platter--bear  .platter__add   { color: #FF4C00; }@media (hover: hover) { .platter--bear:hover  .platter__footer { background: #FDF098; } }
@media (hover: hover) { .platter--bear:hover  .platter__name,
.platter--bear:hover  .platter__desc  { color: #FF4C00; } }
@media (hover: hover) { /* ember orange */
.platter--bear:hover  .platter__add   { background: #FF4C00; color: #FDF098; } }


.platter--both  .platter__footer { background: #8B001E; }              /* brisket red */
.platter--both  .platter__name,
.platter--both  .platter__desc  { color: #FDF098; }
.platter--both  .platter__add   { color: #8B001E; }@media (hover: hover) { .platter--both:hover  .platter__footer { background: #FDF098; } }
@media (hover: hover) { .platter--both:hover  .platter__name,
.platter--both:hover  .platter__desc  { color: #8B001E; } }
@media (hover: hover) { /* brisket red */
.platter--both:hover  .platter__add   { background: #8B001E; color: #FDF098; } }


.platter--birds .platter__footer { background: #FFB62E; }              /* mango footer (default, Figma 3:37271) */
.platter--birds .platter__name,
.platter--birds .platter__desc  { color: #8B001E; }
.platter--birds .platter__add   { background: #FDF098; color: #8B001E; }@media (hover: hover) { /* pale mustard ADD */
.platter--birds:hover .platter__footer { background: #FDF098; } }
@media (hover: hover) { /* pale footer on hover */
.platter--birds:hover .platter__name,
.platter--birds:hover .platter__desc  { color: #FBAC18; } }
@media (hover: hover) { .platter--birds:hover .platter__add   { background: #FFB62E; color: #8B001E; } }
 /* mango ADD on hover */

.platters__cta { margin-top: clamp(24px, 3vh, 44px); }

/* carousel chrome — phones only; desktop keeps the 3-up grid (below hidden) */
.platters__carousel { position: relative; width: 100%; }
.platters__arrow, .platters__dots { display: none; }

/* ============================================================
   TESTIMONIALS  (pink)
   ============================================================ */
.says {
  background: var(--pink);
  color: var(--mustard);
  position: relative;
  isolation: isolate;
  max-height: 770px;
  padding: clamp(40px, 5vw, 72px) 0;     /* shortened — press marquee moved to its own band below */
  overflow: hidden;
}
.says::before {                          /* masked wavy grain (shared grain.webp), tinted #FF026F over the pink bg */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: #FF026F;
  -webkit-mask: url(assets/grain.webp?v=3) center / cover;
          mask: url(assets/grain.webp?v=3) center / cover;
  mix-blend-mode: multiply; opacity: .2;
}
/* "As featured in" press marquee — now its own brisket-red band (Figma) */
.press {
  background: var(--brisket);
  overflow: hidden;
}
.marquee--press {
  padding: 26px 0;
}
/* No flex `gap` here: gap leaves the last item with no trailing space, so translateX(-50%)
   doesn't tile the two copies cleanly (big blank at the loop point). Per-image horizontal
   margin makes each copy self-contained, so -50% is a seamless, infinite loop. */
.marquee--press .marquee__track { animation-duration: 50s; }   /* longer: each half is now 2 sets wide, keeps a calm scroll speed */
.marquee--press img {
  height: 30px;                 /* sized down from 40px */
  width: auto;
  margin: 0 100px;              /* 200px between logos — more breathing room */
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(700%) hue-rotate(3deg) brightness(103%);
  opacity: .95;
}
/* compact/stacked marks (hexagon, balloon) read small — give them more height */
.marquee--press img.p-tall { height: 40px; }

.says__body {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.says__left {                       /* title centred above the bear illustration */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.says__title {                     /* H2 — 60px, 100% line-height, centre, capitalised */
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--mustard);
  line-height: 1;
  font-size: clamp(40px, 6.5vw, 60px);
  margin-top: clamp(28px, 5vw, 68px);  /* nudge the title down toward the bear */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;                        /* 6px padding between lines */
}
.says__title .w1 { transform: rotate(-6deg); }   /* WHAT   +6° (Figma) */
.says__title .w2 { transform: rotate(6deg); }    /* PEOPLE -6° */
.says__title .w3 { transform: rotate(-6deg); }   /* ARE    +6° */
.says__title .w4 { transform: rotate(6deg); }    /* SAYING -6° */
.says__bear {
  width: clamp(220px, 28vw, 400px);
  margin-top: clamp(-72px, -5vw, -36px);   /* overlap up under the title */
  position: relative;
  z-index: 1;                              /* title sits on top of the bear */
}
.says__title { position: relative; z-index: 2; }

.says__right { position: relative; }
.says__viewport { overflow: hidden; }
.says__slides {
  display: flex;
  transition: transform .5s cubic-bezier(.7,0,.2,1);
}
.says__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 30px;
  padding: 10px;
}
.review { text-align: center; }
.review p {
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.3;
  margin-bottom: 16px;
}
.review cite {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: 18px;                /* P4 — TAY Birdie 18 */
  line-height: 1.5;               /* 150% */
  letter-spacing: .04em;
  color: var(--mustard);
  display: flex;
  flex-direction: column;
}
/* name + sub-line share the same font, size, line-height and colour */
.review cite span { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--mustard); }

.says__arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 5;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .25s ease;
}@media (hover: hover) { .says__arrow:hover { opacity: 1; } }

.says__arrow img { width: auto; height: 30px; display: block; }
/* flank the reviews column (arrows now live inside .says__right) — close to the text, not at the screen edges */
.says__arrow--prev { left: -60px; }
.says__arrow--next { right: -60px; }@media (hover: hover) { /* nudge outward on hover */
.says__arrow--prev:hover { transform: translateY(-50%) translateX(-8px); } }
@media (hover: hover) { .says__arrow--next:hover { transform: translateY(-50%) translateX(8px); } }

.says__arrow--prev img { transform: rotate(90deg); }   /* down-arrow → points left */
.says__arrow--next img { transform: rotate(-90deg); }  /* down-arrow → points right */

.says__dots {
  position: absolute;            /* out of flow so the reviews centre against the bear, not offset by the dots */
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.says__dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--mustard);   /* unselected = outline */
  background: transparent;
  cursor: pointer;
  transition: background .2s;
}
.says__dots button.is-active { background: var(--mustard); }   /* selected = filled, same 15px */

/* ============================================================
   JOIN THE TABLE
   ============================================================ */
.join { position: relative; background: var(--charcoal); }  /* just the photo + text — no cornbread border/texture */
/* 700px band; the photo is a FIXED background (dgrees-style) — it stays pinned to the
   viewport while the section scrolls past, so the image reads as sticky in the background. */
.join__track { position: relative; z-index: 1; height: 700px; }
.join__frame {
  position: relative;
  height: 700px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: url(assets/join-table.webp?v=3) center center / cover no-repeat fixed;
}
.join__overlay { position: absolute; inset: 0; background: rgba(43, 1, 10, .35); }
.join__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;                       /* gap between header and CTA */
}
.join__title {
  color: var(--mustard);
  font-size: 48px;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
/* Join "See more" — same hand-drawn underline as the platters CTA, but mustard. */
a.platters__cta.join__cta { color: var(--mustard); margin-top: 0; }  /* let the flex gap (24px) own the header→CTA spacing */
a.platters__cta.join__cta::after {
  background: var(--mustard);
  -webkit-mask: url("assets/see-more-1.svg") no-repeat center / 100% 100%;
          mask: url("assets/see-more-1.svg") no-repeat center / 100% 100%;
  -webkit-mask-mode: alpha; mask-mode: alpha;
}@media (hover: hover) { a.platters__cta.join__cta:hover { color: var(--mustard); opacity: .85; } }
@media (hover: hover) { /* same "boil" as the Get Ember underline — cycles the three wavy line SVGs (via mask) */
a.platters__cta.join__cta:hover::after { animation: cta-boil-mask 2.6s steps(1, end) infinite; } }

@keyframes cta-boil-mask {
  0%,   18% { -webkit-mask-image: url("assets/see-more-1.svg"); mask-image: url("assets/see-more-1.svg"); }
  20%,  38% { -webkit-mask-image: url("assets/see-more-2.svg"); mask-image: url("assets/see-more-2.svg"); }
  40%,  58% { -webkit-mask-image: url("assets/see-more-3.svg"); mask-image: url("assets/see-more-3.svg"); }
  60%,  78% { -webkit-mask-image: url("assets/see-more-2.svg"); mask-image: url("assets/see-more-2.svg"); }
  80%, 100% { -webkit-mask-image: url("assets/see-more-1.svg"); mask-image: url("assets/see-more-1.svg"); }
}
@media (max-width: 430px) { .join__title { font-size: 32px; } }

/* ============================================================
   FOOTER
   ============================================================ */
/* Back-to-top — fades up once the footer is in view */
.to-top {
  position: fixed; bottom: clamp(20px, 3vw, 40px); left: clamp(20px, 3vw, 40px);
  z-index: 9000; border: none; background: none; padding: 0; cursor: pointer; line-height: 0;
  width: clamp(52px, 5vw, 64px); height: clamp(52px, 5vw, 64px);
  opacity: 0; transform: translateY(24px) scale(.85); pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1);
}
.to-top img { width: 100%; height: 100%; display: block; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }@media (hover: hover) { .to-top:hover { transform: translateY(-3px) rotate(-6deg); } }


.footer {
  background: var(--charcoal);
  color: var(--ember);            /* Figma footer: ember orange throughout */
  padding-top: clamp(48px, 5vw, 72px);
  overflow: hidden;
  height: 725px;                  /* fixed footer height (Figma) */
  box-sizing: border-box;
}
.footer__top { padding: 0 var(--pad); }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 40px;
  align-items: start;
}
.footer__col h4 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 30px;                  /* Figma footer P1 (node 3:37290) */
  margin-bottom: 16px;
  color: var(--ember);
}
.footer__col p { font-size: 18px; line-height: 1.7; margin-bottom: 8px; opacity: .9; }@media (hover: hover) { .footer__col a:hover { color: var(--mustard); } }

.footer__social a {
  display: inline-flex;
  color: var(--ember);
  transition: color .2s;
}@media (hover: hover) { .footer__social a:hover { color: var(--mustard); } }

.footer__halal { width: 72px; height: auto; justify-self: end; }

.footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 102px;                /* Figma: top section → meta = 102px */
  padding-top: 0;
  font-family: var(--body);         /* ABC Diatype Regular (Figma footer P3) */
  font-weight: 400;
  letter-spacing: 0;
  font-size: 18px;
  color: var(--ember);
}
.footer__meta span:first-child { text-transform: uppercase; }   /* © EMBER SMOKERY caps; "All rights reserved" stays sentence case */

.footer__wordmark {
  display: block;
  margin-top: 20px;                 /* pull the big EMBER logo up closer to the copyright line */
  line-height: 0;
}
.footer__wordmark img {
  width: 100%;
  padding: 0 var(--pad);
  transform: translateY(10%);        /* small downward shift keeps a slight bottom bleed */
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* build-a-wrap: tuck the fly-in photos further off the edges so the story copy stays clear (tablet) */
  .wrap-copy { width: min(520px, 78vw); }
  .wf-1 { left: -18vw; height: min(46vh, 40vw); }
  .wf-2 { right: -12vw; height: min(40vh, 32vw); }
  .wf-3 { right: -11vw; top: 2vh; width: 30vw; height: auto; }
  .says__body { grid-template-columns: 1fr; text-align: center; }
  .says__left { display: flex; flex-direction: column; align-items: center; }
  .says__title { align-items: center; }
  .says__bear { display: none; }
  .says__arrow--prev { left: -6px; }
  .says__arrow--next { right: -6px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__halal { grid-column: 2; justify-self: end; }
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; --pad: 18px; }
  .bear-fill { width: 42px; height: 42px; }
  .ember-fill { width: 99px; height: 26px; }
  .nav__cta { padding: 7px 12px; font-size: 16px; box-shadow: 4px 4px 0 0 var(--charcoal); grid-column: 3; }  /* stay in the right column once the centre wordmark is gone */
  .nav__cta .btn__paw { width: 17px; height: 17px; }
  .nav__logo { display: none; }             /* drop the centre EMBER wordmark on phones — bear + Get Ember only */
  .hero { min-height: 560px; }
  /* Keep the two <br/>-intended lines ("A new way to" / "eat smoked meats") on one
     line each: 48px fragmented into 4 ragged lines on phones. Fluid so it stays as
     large as possible while fitting the width, and never overflows the edges. */
  .hero__title { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.04; margin-bottom: 60px; letter-spacing: 0; overflow-wrap: break-word; }
  /* hand annotations — kept on phones, repositioned to hug the hero (Figma mobile) */
  .annot { font-size: 16px; }
  .annot--a { top: 25%; left: 7%;  right: auto; }    /* Extra Pickles — left */
  .annot--b { top: 15%; right: 7%; left: auto; }     /* In a Wrap — top-right */
  .annot--c { top: auto; bottom: 11%; left: 24%; }   /* Double Dipped — bottom-left */
  .marquee--hero span { font-size: 15px; }
  .marquee--hero,
  .marquee--hero .marquee__track { height: 60px; }
  /* ===== Build-a-wrap: full scroll choreography on phones, portrait-framed =====
     Same JS engine as desktop (render() now runs at ≤640). Text reveals word-by-word,
     the three food photos fly into the corners, the lettuce closes/opens, then the
     three How-to-Ember colour frames carousel bottom-to-top, and the lettuce closes
     to the final green line. Positions are portrait-tuned to the mobile Figma. */
  /* fill the CURRENT viewport height: 100svh (small) leaves an empty strip at the
     bottom once the mobile address bar hides. 100lvh (large) matches the vh units the
     photos/card use and stays full-screen while scrolling through the section. */
  .wrap-pin { height: 100lvh; }
  .wrap-intro { font-size: clamp(17px, 4.6vw, 22px); }
  .wrap-copy { width: min(460px, 86vw); gap: 30px; top: 45%; }   /* nudged up to give the bigger bottom photos room (Figma) */
  /* food photos fly in from off-screen (render drives --x1/2/3) to portrait corners.
     Rotations LOCKED at ±6° on phones (no scroll-velocity wobble): left -6°, right +6°. */
  .wrap-food { border-radius: 6px; }        /* 6px corners on phones (Figma) */
  .wf-1 {                                   /* platter — bottom-left, large, filling the bottom */
    height: 34vh; width: auto; left: -10vw; top: auto; bottom: -3vh; right: auto;
    transform: translate(var(--x1, -100vw), 0) rotate(-6deg);
  }
  .wf-2 {                                   /* table diners — bottom-right, large, filling the bottom */
    height: 30vh; width: auto; right: -6vw; top: auto; bottom: -3vh; left: auto;
    transform: translate(var(--x2, 100vw), 0) rotate(6deg);
  }
  .wf-3 {                                   /* man biting wrap — top-right, up into the CTA (Figma) */
    width: 46vw; height: auto; right: -4vw; top: 3vh; bottom: auto; left: auto;
    transform: translate(var(--x3, 110vw), 0) rotate(-6deg);
  }
  /* Sized by height to cover the portrait frame when closed. 130vh left cream gaps at the
     top/bottom centre on real devices (the leaves are absolute+top:50% inside the sticky pin,
     so the dynamic mobile viewport shifts coverage and the wavy edges fall short). 165vh
     over-covers with slack; the fresh 3831px WebP scales up cleanly (the old "blocky at 175vh"
     was the low-res asset). */
  .wrap-leaf { height: 125vh; }   /* smaller = crisper (less upscaling of the 1500px asset); the
                                     .wrap-green backdrop catches any slivers the smaller leaves leave */
  /* How-to-Ember photo card fills more of the narrow frame */
  .hte__card { height: min(560px, 56vh); }
  .hte__label { font-size: 18px; }
  .hte__text { font-size: 22px; }
  .hte-final__br { display: inline; }        /* "Or just eat / however you want" on 2 lines (Figma) */
  .hte-final p { line-height: 1.15; }
  /* full-bleed on phones: no orange border/background/texture — the photo fills the
     whole screen (Figma mobile), with the bylines sitting on the image. */
  .table { padding: 0; }
  .table::before { display: none; }      /* drop the orange grain texture */
  .table__frame { border-radius: 0; height: 100lvh; max-height: none; }
  /* bylines shown on the photo, positioned to the mobile Figma */
  .table .annot { display: flex; font-size: clamp(15px, 4.2vw, 20px); }
  .table__a { top: 6%;  right: 7%; left: auto; bottom: auto; }                        /* Come hungry — top-right */
  .table__c { top: 17%; left: 6%;  right: auto; bottom: auto; }                       /* Eat your heart out — left */
  .table__b { bottom: 7%; left: 50%; right: auto; top: auto; transform: translateX(-50%); }  /* Get messy — bottom-centre */
  /* ===== Pick your platter — swipeable carousel on phones (Figma mobile) ===== */
  .platters { min-height: 0; display: block; padding: clamp(56px, 12vw, 90px) var(--pad); }
  .platters::before { opacity: .4; }   /* slightly more visible grain on mobile (Figma) */
  .platters .h-display { font-size: 30px; white-space: normal; }   /* was 48px — overflowed */
  .platters__sub { font-size: 15px; max-width: 40ch; }
  .platters__carousel {
    position: relative; overflow: hidden;
    width: 100%; max-width: 440px; margin: 0 auto; border-radius: 12px;
  }
  .platters__grid {                          /* becomes the sliding track */
    display: flex; grid-template-columns: none; gap: 0; max-width: none;
    transition: transform .4s cubic-bezier(.5, 0, .2, 1);
  }
  .platter { flex: 0 0 100%; min-width: 0; }
  .platter__img { aspect-ratio: 1 / 1; max-height: none; }   /* shorter card (Figma mobile) — was too tall at 385/500 */
  .platter__name { font-size: 26px; }
  /* yellow round arrows overlaid on the photo (Figma) */
  .platters__arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 38%; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--mustard); border: none; padding: 0; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }
  .platters__arrow--prev { left: 12px; }
  .platters__arrow--next { right: 12px; }
  /* arrow as a mask so it always shows (dark on the mustard circle), colour-controlled */
  .platters__arrow::before {
    content: ""; width: 20px; height: 16px;
    background: var(--brisket);
    -webkit-mask: url(assets/arrow-mobile.svg) no-repeat center / contain;
            mask: url(assets/arrow-mobile.svg) no-repeat center / contain;
  }
  .platters__arrow--prev::before { transform: scaleX(-1); }   /* svg points right → flip for prev */
  /* dots */
  .platters__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
  .platters__dots button {
    width: 6px; height: 6px; border-radius: 50%;
    border: 1.5px solid var(--brisket); background: transparent; padding: 0; cursor: pointer;
    transition: background .2s;
  }
  .platters__dots button.is-active { background: var(--brisket); }
  /* ===== Testimonials: one review per swipe, bear illustration behind (Figma mobile) ===== */
  /* minmax(0,1fr) + min-width:0 so the flex-100% reviews don't blow the grid track wide */
  .says__body { position: relative; grid-template-columns: minmax(0, 1fr); }
  .says__right, .says__viewport, .says__slides { min-width: 0; max-width: 100%; }
  .says__left { position: static; min-width: 0; }
  .says__bear {                                        /* faded bear behind the title + review */
    display: block; position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
    width: 72%; max-width: 300px; margin: 0; opacity: .5; z-index: 0;
  }
  .says__title { font-size: 44px; z-index: 2; }
  .says__right { position: relative; z-index: 1; margin-top: 10px; }
  .says__slide { display: contents; }                  /* promote each review to its own slide */
  .review { flex: 0 0 100%; box-sizing: border-box; padding: 0 26px; }
  .review p { font-size: 16px; }
  .says__arrow { top: 46%; }
  .says__arrow--prev { left: 0; }
  .says__arrow--next { right: 0; }
  .says__dots { position: static; margin-top: 24px; flex-wrap: wrap; }
  /* ===== Press band: shorter on phones ===== */
  .marquee--press { padding: 14px 0; }
  .marquee--press img { height: 24px; margin: 0 34px; }
  .marquee--press img.p-tall { height: 30px; }
  /* ===== Join band: 400px tall on phones ===== */
  .join__track, .join__frame { height: 400px; }
  /* ===== Footer: centred, smaller type (Figma mobile) ===== */
  .footer__top { text-align: center; }
  .footer__cols { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .footer__col { text-align: center; }
  .footer__col h4 { font-size: 18px; margin-bottom: 12px; }          /* headers 18px */
  .footer__col p { font-size: 15px; font-weight: 400; line-height: 1.6; }  /* body 15px regular */
  .footer__social { display: flex; justify-content: center; }
  .footer__halal { grid-column: 1; justify-self: center; }
  .footer__meta { flex-direction: column; gap: 6px; align-items: center; text-align: center; font-size: 15px; margin-top: 56px; }
  /* Footer EMBER wordmark (Figma mobile): bigger + edge-to-edge, bottom cropped so it bleeds off
     the page bottom. Footer height auto so the cropped wordmark's bottom IS the page bottom. */
  .footer { height: auto; }
  .footer__wordmark { overflow: hidden; }
  .footer__wordmark img { width: 100%; padding: 0; transform: none; margin-bottom: -12%; }
  .to-top { bottom: 24px; left: 24px; }      /* 24px from the left + bottom on phones */
}


@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .annot__w1, .annot__w2,
  .marquee__arrow,
  .bear-fill { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   POPUP — 10% off (appears a few seconds after the intro)
   ============================================================ */
/* sticky "10% off" tab — bottom-right (to-top lives bottom-left); opens the popup */
.offer-tab {
  position: fixed; z-index: 9000;
  bottom: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px);
  display: inline-flex; align-items: center; text-decoration: none;
  background: #FF4C00; color: #FDF098;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(15px, 1.4vw, 18px); letter-spacing: .04em; line-height: 1;
  border: none; border-radius: 100px; padding: 15px 22px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(43, 1, 10, .3);
  opacity: 0; transform: translateY(24px) scale(.9); pointer-events: none;
  transition: opacity .45s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}
body:not(.intro-on) .offer-tab { opacity: 1; transform: none; pointer-events: auto; }@media (hover: hover) { .offer-tab:hover { transform: translateY(-3px); background: #FDF098; color: #FF4C00; } }