{"roots":["6:23"],"nodeById":{"6:23":{"type":"WEBPAGE","id":"6:23","name":"/product-portfolio","absoluteBoundingBox":{"x":3774,"y":0,"width":1847,"height":9364},"isolatedAbsoluteRenderBounds":{"x":3774,"y":0,"width":1847,"height":9364},"relativeTransform":[[1,0,3774],[0,1,0]],"size":{"x":1847,"y":9364},"fills":[{"opacity":0.298039227724075,"blendMode":"NORMAL","type":"SOLID","color":{"r":1,"g":1,"b":1,"a":1},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"children":["6:24","6:29"]},"6:29":{"type":"FRAME","id":"6:29","name":"Mobile","absoluteBoundingBox":{"x":5182,"y":100,"width":375,"height":9200},"isolatedAbsoluteRenderBounds":{"x":5182,"y":100,"width":375,"height":9200},"relativeTransform":[[1,0,1408],[0,1,100]],"size":{"x":375,"y":9200},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1,"g":1,"b":1,"a":1},"visible":true,"opacity":1}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"overflowDirection":"VERTICAL_SCROLLING","isBreakpointFrame":true,"children":["6:30"]},"6:30":{"type":"WIDGET","id":"6:30","name":"Embed 2","absoluteBoundingBox":{"x":5182,"y":100,"width":375,"height":9030},"isolatedAbsoluteRenderBounds":{"x":5182,"y":100,"width":375,"height":9030},"relativeTransform":[[1,0,0],[0,1,0]],"size":{"x":375,"y":9030},"constraints":{"vertical":"TOP","horizontal":"LEFT_RIGHT"},"constraintValues":{"left":{"pixelOffset":0,"sizeFraction":0},"right":{"pixelOffset":0,"sizeFraction":1},"top":{"pixelOffset":0,"sizeFraction":0}},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n<title>Products — Good Morning® | Made for Every Morning</title>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Baloo+2:wght@500;600;700;800&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n  /* ============================================================\n     PRIMARY / DISPLAY TYPEFACE — COOPER\n     ------------------------------------------------------------\n     Per the Good Morning brand guideline, the primary brand\n     typeface is COOPER. Cooper is a licensed face and cannot be\n     served from a public CDN, so this build ships FRAUNCES tuned\n     toward Cooper (SOFT + WONK axes at maximum) as the stand-in.\n\n     TO SWITCH TO REAL COOPER:\n     1. Drop the licensed webfont files beside this file, e.g.\n        ./fonts/CooperStd-Black.woff2\n     2. Uncomment the @font-face block below.\n     3. In :root, change --disp to:\n        --disp:'Cooper Std','Fraunces','Baloo 2',Georgia,serif;\n     Nothing else needs to change.\n     ------------------------------------------------------------\n  @font-face{\n    font-family:'Cooper Std';\n    src:url('./fonts/CooperStd-Black.woff2') format('woff2');\n    font-weight:400 900;\n    font-style:normal;\n    font-display:swap;\n  }\n  ------------------------------------------------------------ */\n\n  /* Tune Fraunces toward Cooper: maximum softness + wonk */\n  h1,h2,h3,h4,.sectitle,.doc-h,.lead,.lead-line,.big,.the,.kick,.btn,.brandlock,\n  .navcta,.cn,.n,.num,.yr,.ms,.st,.vn,.pn,.an,.q,.tag,.tagline,.fn,.fh,.fq,\n  .stack,.catname,.catsub,.chip,.pill,.cnum,.ct,.mloc,.stat .n,.kpi .num,\n  .fcard .fn,.sku .n,.season .fh,.lcard .n,.val h3,.qc h3,.pcard h3,.mstat .n,\n  .rail a,.links a,.crumb,blockquote,.sig,.rvv,.item{\n    font-variation-settings:'SOFT' 100,'WONK' 1;\n  }\n  .deva,.deva *{font-variation-settings:normal}\n\n  :root{\n    --mist:#FFFFFF;--gold:#FFD000;--sun:#FFF200;--clover:#008C1E;--forest:#00660C;--soil:#1B1600;\n    --disp:'Fraunces','Baloo 2',Georgia,serif;--deva:'Baloo 2',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;\n    --hair:rgba(27,22,0,.16);--pad:clamp(20px,5vw,72px);--nav-h:72px;--rail-h:54px;\n  }\n  *{margin:0;padding:0;box-sizing:border-box}\n  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--rail-h) + 16px)}\n  body{font-family:var(--body);background:var(--mist);color:var(--soil);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}\n  .wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}\n  .pad{padding-block:clamp(60px,9vh,104px)}\n  .deva{font-family:var(--deva);font-weight:600}\n\n  .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*80ms)}\n  .seen .rv{opacity:1;transform:none}\n  @media (prefers-reduced-motion:reduce){*{animation:none!important}.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}\n\n  .rays{transform-origin:100px 100px;animation:spin 90s linear infinite}\n  @keyframes spin{to{transform:rotate(360deg)}}\n  .sunburst{position:absolute;inset:0;z-index:0;pointer-events:none;\n    background:repeating-conic-gradient(from 0deg at var(--bx,72%) var(--by,50%),var(--sun) 0deg 4.2deg,var(--gold) 4.2deg 12deg);\n    -webkit-mask:radial-gradient(closest-side at var(--bx,72%) var(--by,50%),#000 4%,#000 46%,transparent 72%);\n    mask:radial-gradient(closest-side at var(--bx,72%) var(--by,50%),#000 4%,#000 46%,transparent 72%);\n    animation:spin 180s linear infinite}\n\n  .fpo{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,rgba(255,208,0,.22),rgba(0,140,30,.18));border:1px solid var(--hair);display:grid;place-items:center;min-height:170px;isolation:isolate}\n  .fpo .glyph{width:42px;height:42px;opacity:.45;color:var(--forest)}\n  .fpo .cap{position:absolute;left:12px;right:12px;bottom:11px;font-size:10px;line-height:1.4;opacity:.7;z-index:2}\n  .fpo .tag{position:absolute;top:10px;right:10px;font-weight:600;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);opacity:.5;border:1px solid currentColor;border-radius:4px;padding:2px 6px;z-index:2}\n  .on-dark .fpo{border-color:rgba(255,255,255,.24);background:linear-gradient(135deg,rgba(255,242,0,.16),rgba(255,255,255,.05))}\n  .on-dark .fpo .glyph,.on-dark .fpo .tag{color:var(--sun);opacity:.65}\n  .on-dark .fpo .cap{color:#fff;opacity:.8}\n\n  /* NAV */\n  .nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}\n  .nav.stuck{border-color:var(--hair);box-shadow:0 4px 24px rgba(27,22,0,.05)}\n  .nav .in{max-width:1240px;margin:0 auto;padding-inline:var(--pad);height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}\n  .brandlock{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:19px;color:var(--forest);text-decoration:none;flex:none}\n  .links{display:none;gap:clamp(16px,2.4vw,34px);align-items:center}\n  @media(min-width:940px){.links{display:flex}}\n  .links a{font-size:14px;font-weight:500;color:var(--soil);text-decoration:none;opacity:.8;position:relative;padding:4px 0;transition:opacity .2s,color .2s}\n  .links a::after{content:\"\";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .3s cubic-bezier(.2,.7,.2,1)}\n  .links a:hover,.links a.current{opacity:1;color:var(--forest)}.links a:hover::after,.links a.current::after{right:0}\n  .navcta{flex:none;display:inline-flex;align-items:center;gap:9px;background:var(--forest);color:#fff;font-family:var(--disp);font-weight:700;font-size:14px;text-decoration:none;padding:10px 20px;border-radius:100px;transition:background .25s,transform .25s}\n  .navcta:hover{background:var(--clover);transform:translateY(-1px)}\n  .burger{display:grid;gap:5px;background:none;border:0;cursor:pointer;padding:8px;flex:none}\n  @media(min-width:940px){.burger{display:none}}\n  .burger span{width:22px;height:2px;background:var(--forest);border-radius:2px;transition:transform .3s,opacity .3s}\n  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}\n  .burger.open span:nth-child(2){opacity:0}\n  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}\n  .drawer{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--mist);border-bottom:1px solid var(--hair);display:grid;gap:2px;padding:16px var(--pad) 24px;z-index:99;transform:translateY(-120%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}\n  .drawer.open{transform:none}\n  @media(min-width:940px){.drawer{display:none}}\n  .drawer a{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--soil);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--hair)}\n\n  /* PAGE HERO */\n  .phero{padding-top:calc(var(--nav-h) + clamp(44px,7vh,80px));padding-bottom:clamp(44px,6vh,72px);position:relative;overflow:hidden;background:var(--gold);color:var(--forest)}\n  .phero .sunburst{opacity:.44;--bx:88%;--by:18%}\n  .phero .crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:16px;opacity:0;animation:fu .9s ease .2s forwards}\n  .phero .crumb a{color:inherit;text-decoration:none}.phero .crumb a:hover{text-decoration:underline}\n  .phero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,6.2vw,4.8rem);line-height:.98;letter-spacing:-0.02em;opacity:0;animation:fu 1s cubic-bezier(.2,.7,.2,1) .35s forwards}\n  .phero .deck{max-width:48ch;margin-top:18px;font-size:clamp(1.02rem,1.4vw,1.18rem);opacity:.8;opacity:0;animation:fu 1s ease .6s forwards}\n  @keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}\n\n  /* RAIL */\n  .rail{position:sticky;top:var(--nav-h);z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair);height:var(--rail-h)}\n  .rail .in{max-width:1240px;margin:0 auto;padding-inline:var(--pad);height:100%;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}\n  .rail .in::-webkit-scrollbar{display:none}\n  .rail a{flex:none;font-size:12.5px;font-weight:500;color:var(--soil);opacity:.62;text-decoration:none;padding:7px 13px;border-radius:100px;white-space:nowrap;transition:background .25s,color .25s,opacity .25s}\n  .rail a:hover{opacity:1;background:rgba(0,102,12,.07)}\n  .rail a.active{opacity:1;background:var(--forest);color:#fff;font-weight:600}\n\n  /* heads */\n  .the{font-family:var(--disp);font-weight:500;font-size:clamp(.98rem,1.6vw,1.25rem);color:var(--clover);margin-bottom:2px}\n  .on-dark .the{color:var(--sun)}\n  h2.big{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.03;letter-spacing:-0.015em;max-width:20ch}\n  .shead{margin-bottom:clamp(26px,3.6vw,42px)}\n  .shead p{max-width:52ch;margin-top:14px;opacity:.75;font-size:clamp(1rem,1.2vw,1.1rem)}\n  .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:15px;text-decoration:none;padding:13px 24px;border-radius:100px;transition:transform .25s,background .25s,color .25s;border:0;cursor:pointer}\n  .btn.primary{background:var(--forest);color:#fff}.btn.primary:hover{background:var(--clover);transform:translateY(-2px)}\n  .btn.ghost{border:2px solid var(--forest);color:var(--forest);background:none}.btn.ghost:hover{background:var(--forest);color:#fff;transform:translateY(-2px)}\n  .on-dark .btn.ghost{border-color:var(--sun);color:var(--sun)}.on-dark .btn.ghost:hover{background:var(--sun);color:var(--forest)}\n  .btn .arw{transition:transform .25s}.btn:hover .arw{transform:translateX(4px)}\n\n  /* CATEGORY INTRO ROW */\n  .catrow{display:grid;gap:clamp(14px,2vw,20px)}\n  @media(min-width:560px){.catrow{grid-template-columns:repeat(2,1fr)}}\n  @media(min-width:980px){.catrow{grid-template-columns:repeat(4,1fr)}}\n  .catlink{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:var(--mist);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}\n  .catlink:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(27,22,0,.13);border-color:transparent}\n  .catlink .fpo{border:0;border-radius:0;aspect-ratio:4/3;min-height:0}\n  .catlink .b{padding:18px 20px 22px}\n  .catlink .n{font-family:var(--disp);font-weight:800;font-size:1.45rem;line-height:1}\n  .catlink .s{font-size:13px;opacity:.72;margin-top:6px}\n\n  /* SKU GRID */\n  .skus{display:grid;gap:clamp(14px,2vw,22px);margin-top:clamp(24px,3vw,34px)}\n  @media(min-width:600px){.skus{grid-template-columns:repeat(2,1fr)}}\n  @media(min-width:1000px){.skus{grid-template-columns:repeat(3,1fr)}}\n  .sku{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--mist);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}\n  .sku:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(27,22,0,.12);border-color:transparent}\n  .sku .fpo{border:0;border-radius:0;aspect-ratio:5/4;min-height:0}\n  .sku .b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}\n  .sku .n{font-family:var(--disp);font-weight:700;font-size:1.25rem;line-height:1.15}\n  .sku .d{font-size:13.5px;opacity:.74;margin-top:7px;flex:1}\n  .sku .meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}\n  .pill{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:rgba(0,140,30,.1);color:var(--forest)}\n  .pill.gold{background:rgba(255,208,0,.28);color:var(--soil)}\n  .pill.new{background:var(--clover);color:#fff}\n  .sku.premium{border-color:var(--gold);position:relative}\n  .sku.premium::before{content:\"Premium\";position:absolute;top:12px;left:12px;z-index:3;background:var(--forest);color:var(--sun);font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:100px}\n\n  /* category band */\n  .band{position:relative;overflow:hidden}\n  .band.green{background:var(--forest);color:#fff}\n  .band.green .sunburst{opacity:.1}\n  .band.cream{background:#faf8f2}\n  .band.goldband{background:var(--gold);color:var(--forest)}\n  .band.goldband .sunburst{opacity:.36;--bx:92%;--by:86%}\n  .split{display:grid;gap:clamp(28px,4vw,60px);align-items:center}\n  @media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev .txt{order:2}}\n  .split .fpo{min-height:min(52vh,460px)}\n  .body-col{max-width:48ch;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.72;opacity:.82}\n\n  /* PRODUCT FINDER */\n  .finder{background:var(--soil);color:#fff;position:relative;overflow:hidden}\n  .finder .sunburst{opacity:.07;--bx:82%;--by:20%}\n  .finder .the{color:var(--sun)}\n  .finder h2.big{color:#fff}\n  .finder .fp{opacity:.72;max-width:52ch;margin-top:14px}\n  .fbox{margin-top:clamp(28px,4vw,42px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:clamp(22px,3vw,34px);position:relative;z-index:2}\n  .fq{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--sun);margin-bottom:14px}\n  .fq .step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--soil);font-size:12px;margin-right:9px;vertical-align:2px}\n  .chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}\n  .chip{font-family:var(--body);font-weight:500;font-size:13.5px;padding:9px 17px;border-radius:100px;\n    border:1.5px solid rgba(255,255,255,.28);background:none;color:rgba(255,255,255,.82);cursor:pointer;transition:all .25s}\n  .chip:hover{border-color:var(--sun);color:#fff}\n  .chip.on{background:var(--sun);border-color:var(--sun);color:var(--soil);font-weight:600}\n  .fres{border-top:1px solid rgba(255,255,255,.16);padding-top:24px;margin-top:4px}\n  .fcount{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:16px}\n  .fgrid{display:grid;gap:12px}\n  @media(min-width:640px){.fgrid{grid-template-columns:repeat(2,1fr)}}\n  @media(min-width:1000px){.fgrid{grid-template-columns:repeat(3,1fr)}}\n  .fcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px 18px;\n    animation:pop .4s cubic-bezier(.2,.8,.2,1) both}\n  @keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}\n  .fcard .fn{font-family:var(--disp);font-weight:700;font-size:1.08rem;color:var(--sun)}\n  .fcard .fc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-top:3px}\n  .fcard .fd{font-size:13px;opacity:.75;margin-top:8px}\n  .fempty{text-align:center;padding:26px;opacity:.6;font-size:14px}\n  .freset{background:none;border:0;color:var(--sun);font-size:13px;cursor:pointer;text-decoration:underline;padding:0;margin-top:18px;font-family:var(--body)}\n\n  /* SEASONAL */\n  .seasons{display:grid;gap:clamp(14px,2vw,20px);margin-top:clamp(24px,3vw,34px)}\n  @media(min-width:720px){.seasons{grid-template-columns:repeat(3,1fr)}}\n  .season{position:relative;overflow:hidden;border-radius:14px;background:var(--forest);color:#fff;padding:clamp(22px,2.8vw,30px);min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s}\n  .season:hover{transform:translateY(-6px)}\n  .season .sunburst{opacity:.14}\n  .season .fn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sun);position:relative;z-index:2}\n  .season .fh{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.75rem);margin-top:10px;position:relative;z-index:2}\n  .season .fd{font-size:13px;opacity:.78;margin-top:8px;position:relative;z-index:2}\n\n  /* NEW LAUNCHES */\n  .launch{display:grid;gap:clamp(14px,2vw,22px);margin-top:clamp(24px,3vw,34px)}\n  @media(min-width:640px){.launch{grid-template-columns:repeat(2,1fr)}}\n  .lcard{border:2px solid var(--clover);border-radius:16px;overflow:hidden;background:var(--mist);display:grid;transition:transform .35s,box-shadow .35s}\n  @media(min-width:480px){.lcard{grid-template-columns:.9fr 1.1fr}}\n  .lcard:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,102,12,.16)}\n  .lcard .fpo{border:0;border-radius:0;min-height:190px}\n  .lcard .b{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}\n  .lcard .n{font-family:var(--disp);font-weight:800;font-size:1.35rem;line-height:1.1;margin-top:9px}\n  .lcard .d{font-size:13.5px;opacity:.75;margin-top:8px}\n\n  /* CLOSING */\n  .closing{background:var(--clover);color:#fff;text-align:center;overflow:hidden}\n  .closing .sunburst{opacity:.1;--bx:50%;--by:34%}\n  .closing .q{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,4vw,2.9rem);line-height:1.15;max-width:22ch;margin:0 auto;position:relative;z-index:2}\n  .closing .deva{color:var(--sun);margin-top:16px;font-family:var(--deva);font-weight:700;font-size:clamp(1.3rem,2.6vw,2rem);position:relative;z-index:2}\n  .closing .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px;position:relative;z-index:2}\n  .closing .btn.primary{background:#fff;color:var(--forest)}.closing .btn.primary:hover{background:var(--sun)}\n  .closing .btn.ghost{border-color:#fff;color:#fff}.closing .btn.ghost:hover{background:#fff;color:var(--forest)}\n\n  /* FOOTER */\n  footer{background:var(--soil);color:rgba(255,255,255,.72);padding-top:clamp(56px,8vh,84px)}\n  .foot-grid{display:grid;gap:clamp(28px,4vw,48px)}\n  @media(min-width:820px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}\n  footer .brandlock{color:var(--sun);font-size:22px}\n  footer .tagline{font-family:var(--disp);font-weight:600;color:var(--gold);font-size:1.15rem;margin-top:14px}\n  footer .blurb{font-size:13.5px;margin-top:12px;max-width:34ch;opacity:.7}\n  footer h4{font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.55;margin-bottom:14px}\n  footer ul{list-style:none;display:grid;gap:9px}\n  footer ul a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14px;transition:color .2s}\n  footer ul a:hover{color:var(--sun)}\n  .fbot{margin-top:clamp(34px,5vh,54px);border-top:1px solid rgba(255,255,255,.14);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;opacity:.6}\n\n  .specnote{background:#f4f1e8;border-top:1px solid var(--hair);padding-block:clamp(36px,5vh,56px);font-size:14px}\n  .specnote .rows{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;margin-top:18px}\n  @media(min-width:680px){.specnote .rows{grid-template-columns:1fr 1fr}}\n  .specnote .r{background:#faf8f2;padding:14px 20px}\n  .specnote .rk{font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--clover);margin-bottom:5px}\n  .specnote .r.never .rk{color:#c0392b}\n  .specnote .rvv{font-family:var(--disp);font-weight:600;font-size:1.05rem}\n</style>\n</head>\n<body>\n\n<template id=\"sunT\">\n  <svg viewBox=\"0 0 200 200\" width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n    <g class=\"rays\" stroke=\"currentColor\" stroke-width=\"10\" stroke-linecap=\"round\">\n      <line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(30 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(60 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(90 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(120 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(150 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(180 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(210 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(240 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(270 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(300 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(330 100 100)\"/>\n    </g><circle cx=\"100\" cy=\"100\" r=\"39\" fill=\"currentColor\"/>\n  </svg>\n</template>\n<template id=\"glyphT\">\n  <svg class=\"glyph\" viewBox=\"0 0 64 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <rect x=\"3\" y=\"3\" width=\"58\" height=\"42\" rx=\"4\"/><circle cx=\"20\" cy=\"18\" r=\"6\"/><path d=\"M6 40 L26 24 L40 34 L50 26 L58 34\"/>\n  </svg>\n</template>\n\n<!-- NAV -->\n<nav class=\"nav\" id=\"nav\">\n  <div class=\"in\">\n    <a href=\"good-morning-homepage.html\" class=\"brandlock\"><span class=\"sunhost\" style=\"width:26px;height:26px;color:var(--clover)\"></span> Good Morning</a>\n    <div class=\"links\">\n      <a href=\"good-morning-about.html\">About</a>\n      <a href=\"#\" class=\"current\">Products</a>\n      <a href=\"good-morning-impact.html\">Our Impact</a>\n      <a href=\"good-morning-careers.html\">Careers</a>\n      <a href=\"good-morning-distributors.html\">Distributors</a>\n      <a href=\"good-morning-contact.html\">Contact</a>\n      <a href=\"good-morning-homepage.html#quality\">Quality</a>\n      <a href=\"good-morning-homepage.html#cafe\">Café</a>\n      <a href=\"good-morning-homepage.html#partners\">Partners</a>\n    </div>\n    <a href=\"#finder\" class=\"navcta\">Product Finder</a>\n    <button class=\"burger\" id=\"burger\" aria-label=\"Menu\"><span></span><span></span><span></span></button>\n  </div>\n</nav>\n<div class=\"drawer\" id=\"drawer\">\n  <a href=\"good-morning-about.html\">About</a><a href=\"#\">Products</a><a href=\"good-morning-homepage.html#quality\">Quality</a><a href=\"good-morning-homepage.html#cafe\">Café</a><a href=\"good-morning-homepage.html#partners\">Partners</a>\n</div>\n\n<!-- HERO -->\n<header class=\"phero\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\" style=\"position:relative;z-index:2\">\n    <div class=\"crumb\"><a href=\"good-morning-homepage.html\">Home</a> &nbsp;/&nbsp; Products</div>\n    <h1>Made for every morning.</h1>\n    <p class=\"deck\">Bread, rusk, biscuits and namkeen. Our portfolio has grown alongside the changing needs of Indian families — each created for a different morning, all carrying the same promise.</p>\n  </div>\n</header>\n\n<!-- RAIL -->\n<div class=\"rail\" id=\"rail\">\n  <div class=\"in\">\n    <a href=\"#bread\">Bread</a>\n    <a href=\"#rusk\">Rusk</a>\n    <a href=\"#biscuits\">Biscuits</a>\n    <a href=\"#namkeen\">Namkeen</a>\n    <a href=\"#seasonal\">Seasonal</a>\n    <a href=\"#launches\">New Launches</a>\n    <a href=\"#finder\">Product Finder</a>\n  </div>\n</div>\n\n<!-- CATEGORY OVERVIEW -->\n<section class=\"pad\">\n  <div class=\"wrap\">\n    <div class=\"shead\">\n      <div class=\"the rv\">the portfolio</div>\n      <h2 class=\"big rv\" style=\"--d:1\">One promise. Four rituals.</h2>\n      <p class=\"rv\" style=\"--d:2\">Every product exists to become part of one of life's simplest, yet most meaningful rituals.</p>\n    </div>\n    <div class=\"catrow\">\n      <a href=\"#bread\" class=\"catlink rv\" style=\"--d:1\"><div class=\"fpo\" data-cap=\"Fresh bread\"></div><div class=\"b\"><div class=\"n\">Bread</div><div class=\"s\">Freshly baked. Made for everyday mornings.</div></div></a>\n      <a href=\"#rusk\" class=\"catlink rv\" style=\"--d:2\"><div class=\"fpo\" data-cap=\"Rusk with chai\"></div><div class=\"b\"><div class=\"n\">Rusk</div><div class=\"s\">Made for chai conversations.</div></div></a>\n      <a href=\"#biscuits\" class=\"catlink rv\" style=\"--d:3\"><div class=\"fpo\" data-cap=\"Biscuits\"></div><div class=\"b\"><div class=\"n\">Biscuits</div><div class=\"s\">Small moments. Shared together.</div></div></a>\n      <a href=\"#namkeen\" class=\"catlink rv\" style=\"--d:4\"><div class=\"fpo\" data-cap=\"Namkeen\"></div><div class=\"b\"><div class=\"n\">Namkeen</div><div class=\"s\">Because every family has its own ritual.</div></div></a>\n    </div>\n  </div>\n</section>\n\n<!-- BREAD -->\n<section class=\"pad band cream\" id=\"bread\">\n  <div class=\"wrap\">\n    <div class=\"split\" style=\"margin-bottom:clamp(30px,4vw,48px)\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 01</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Bread</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--clover);margin-top:6px\">Freshly baked. Made for everyday mornings.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px\">\n          <p>Bread is where our story began, and it is still where most mornings begin. Baked fresh through the night, delivered before the day starts, and made to be exactly the same every single time.</p>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Sliced fresh bread, crumb detail, kitchen counter\"></div>\n    </div>\n    <div class=\"the rv\">the bread range</div>\n    <div class=\"skus\">\n      <div class=\"sku rv\" style=\"--d:1\"><div class=\"fpo\" data-cap=\"White bread loaf\"></div><div class=\"b\"><div class=\"n\">White Bread</div><div class=\"d\">The everyday loaf. Soft, consistent, and made for toast, tiffin and the first meal of the day.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill\">Tiffin</span></div></div></div>\n      <div class=\"sku rv\" style=\"--d:2\"><div class=\"fpo\" data-cap=\"Brown bread loaf\"></div><div class=\"b\"><div class=\"n\">Brown Bread</div><div class=\"d\">Wholesome and hearty, for families who want a little more from the morning slice.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill gold\">Wholesome</span></div></div></div>\n      <div class=\"sku rv\" style=\"--d:3\"><div class=\"fpo\" data-cap=\"Sandwich bread\"></div><div class=\"b\"><div class=\"n\">Sandwich Bread</div><div class=\"d\">Wider slices, made to hold everything a tiffin box needs to carry.</div><div class=\"meta\"><span class=\"pill\">Tiffin</span><span class=\"pill\">Evening</span></div></div></div>\n      <div class=\"sku rv\" style=\"--d:4\"><div class=\"fpo\" data-cap=\"Milk bread\"></div><div class=\"b\"><div class=\"n\">Milk Bread</div><div class=\"d\">Softer, slightly sweet, and a favourite with children. The gentlest way to begin.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill gold\">Kids</span></div></div></div>\n      <div class=\"sku premium rv\" style=\"--d:5\"><div class=\"fpo\" data-cap=\"Premium range packaging\"></div><div class=\"b\"><div class=\"n\">Premium Range</div><div class=\"d\">Our finest bakes, for mornings that deserve a little more. Crafted in smaller batches with select ingredients.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill gold\">Premium</span></div></div></div>\n    </div>\n  </div>\n</section>\n\n<!-- RUSK -->\n<section class=\"pad band green on-dark\" id=\"rusk\">\n  <div class=\"sunburst\" style=\"--bx:12%;--by:22%\"></div>\n  <div class=\"wrap\">\n    <div class=\"split rev\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 02</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Rusk</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--sun);margin-top:6px\">Made for chai conversations.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px;opacity:.85\">\n          <p>Some mornings aren't in a hurry. They're spent around a cup of chai, with a rusk that holds its own — crisp enough to dip, sturdy enough to last the whole conversation.</p>\n        </div>\n        <div class=\"skus\" style=\"grid-template-columns:1fr;margin-top:26px\">\n          <div class=\"sku rv\" style=\"--d:4;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff\">\n            <div class=\"b\"><div class=\"n\" style=\"color:var(--sun)\">The Rusk Range</div><div class=\"d\" style=\"opacity:.78\">Classic, elaichi, suji and premium variants — each made for a different chai.</div><div class=\"meta\"><span class=\"pill\" style=\"background:rgba(255,242,0,.18);color:var(--sun)\">Chai time</span><span class=\"pill\" style=\"background:rgba(255,242,0,.18);color:var(--sun)\">Evening</span></div></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Rusk dipped in chai, steam, hands mid-conversation\"></div>\n    </div>\n  </div>\n</section>\n\n<!-- BISCUITS -->\n<section class=\"pad\" id=\"biscuits\">\n  <div class=\"wrap\">\n    <div class=\"split\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 03</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Biscuits</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--clover);margin-top:6px\">Small moments. Shared together.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px\">\n          <p>A biscuit is rarely eaten alone. It's passed across a table, packed into a bag, offered to a guest. Small things, shared — which is exactly why they matter.</p>\n        </div>\n        <div class=\"skus\" style=\"grid-template-columns:1fr;margin-top:26px\">\n          <div class=\"sku rv\" style=\"--d:4\"><div class=\"b\"><div class=\"n\">The Biscuit Range</div><div class=\"d\">Glucose, marie, cream, cookies and premium bakes — for every small moment of the day.</div><div class=\"meta\"><span class=\"pill\">Chai time</span><span class=\"pill\">Tiffin</span><span class=\"pill\">Evening</span></div></div></div>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Children sharing biscuits, candid, warm\"></div>\n    </div>\n  </div>\n</section>\n\n<!-- NAMKEEN -->\n<section class=\"pad band goldband\" id=\"namkeen\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\">\n    <div class=\"split rev\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 04</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Namkeen</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);margin-top:6px;opacity:.8\">Because every family has its own ritual.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px\">\n          <p>Not every Good Morning happens in the morning. An evening break, a small pause in the middle of a long day — every time life asks for a little freshness or reset, there is room for a Good Morning.</p>\n        </div>\n        <div class=\"skus\" style=\"grid-template-columns:1fr;margin-top:26px\">\n          <div class=\"sku rv\" style=\"--d:4;background:rgba(255,255,255,.6);border-color:rgba(0,102,12,.2)\"><div class=\"b\"><div class=\"n\">The Namkeen Range</div><div class=\"d\">Traditional mixtures, sev and regional favourites — made for the family's own ritual.</div><div class=\"meta\"><span class=\"pill\">Evening</span><span class=\"pill gold\">Sharing</span></div></div></div>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Namkeen bowl on a family table, evening chai spread\"></div>\n    </div>\n  </div>\n</section>\n\n<!-- SEASONAL -->\n<section class=\"pad band cream\" id=\"seasonal\">\n  <div class=\"wrap\">\n    <div class=\"shead\">\n      <div class=\"the rv\">seasonal products</div>\n      <h2 class=\"big rv\" style=\"--d:1\">Every festival is a beginning.</h2>\n      <p class=\"rv\" style=\"--d:2\">Special bakes for the mornings that matter most — made in limited runs, for the seasons India celebrates together.</p>\n    </div>\n    <div class=\"seasons\">\n      <div class=\"season rv\" style=\"--d:1\"><div class=\"sunburst\" style=\"--bx:80%;--by:20%\"></div><div class=\"fn\">Diwali</div><div class=\"fh deva\">रोशनी की शुरुआत।</div><div class=\"fd\">Festive gift packs and special bakes for the season of light.</div></div>\n      <div class=\"season rv\" style=\"--d:2\"><div class=\"sunburst\" style=\"--bx:80%;--by:20%\"></div><div class=\"fn\">Holi</div><div class=\"fh deva\">रंगों की शुरुआत।</div><div class=\"fd\">Sweet and savoury favourites for a morning full of colour.</div></div>\n      <div class=\"season rv\" style=\"--d:3\"><div class=\"sunburst\" style=\"--bx:80%;--by:20%\"></div><div class=\"fn\">Raksha Bandhan</div><div class=\"fh deva\">रिश्तों की शुरुआत।</div><div class=\"fd\">Made for the mornings families spend together.</div></div>\n    </div>\n    <p class=\"rv\" style=\"--d:4;margin-top:20px;font-size:13px;opacity:.6\">Seasonal availability varies by region. Placeholder ranges — to be replaced with the actual festive calendar.</p>\n  </div>\n</section>\n\n<!-- NEW LAUNCHES -->\n<section class=\"pad\" id=\"launches\">\n  <div class=\"wrap\">\n    <div class=\"shead\">\n      <div class=\"the rv\">new launches</div>\n      <h2 class=\"big rv\" style=\"--d:1\">A new beginning in your morning.</h2>\n      <p class=\"rv\" style=\"--d:2\">Consumer habits evolve. So do we. Every new product begins with one question — will this make someone's morning better?</p>\n    </div>\n    <div class=\"launch\">\n      <div class=\"lcard rv\" style=\"--d:1\">\n        <div class=\"fpo\" data-cap=\"New product hero\"></div>\n        <div class=\"b\"><span class=\"pill new\" style=\"align-self:flex-start\">New</span><div class=\"n\">[Product Name]</div><div class=\"d\">A short, warm line about what this product makes possible — never a sales pitch.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span></div></div>\n      </div>\n      <div class=\"lcard rv\" style=\"--d:2\">\n        <div class=\"fpo\" data-cap=\"New product hero\"></div>\n        <div class=\"b\"><span class=\"pill new\" style=\"align-self:flex-start\">New</span><div class=\"n\">[Product Name]</div><div class=\"d\">A short, warm line about what this product makes possible — never a sales pitch.</div><div class=\"meta\"><span class=\"pill\">Chai time</span></div></div>\n      </div>\n    </div>\n    <p class=\"rv\" style=\"--d:3;margin-top:20px;font-size:13px;opacity:.6\">Placeholders — replace with live launches. Per the verbal system, launches never open with “Introducing…”; they open with <b class=\"deva\">आपकी सुबह में एक नई शुरुआत।</b></p>\n  </div>\n</section>\n\n<!-- PRODUCT FINDER -->\n<section class=\"pad finder on-dark\" id=\"finder\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\" style=\"position:relative;z-index:2\">\n    <div class=\"the rv\">product finder</div>\n    <h2 class=\"big rv\" style=\"--d:1\">Which morning are you having?</h2>\n    <p class=\"fp rv\" style=\"--d:2\">Tell us about the moment, not the product. We'll find what belongs in it.</p>\n\n    <div class=\"fbox rv\" style=\"--d:3\">\n      <div class=\"fq\"><span class=\"step\">1</span> What's the moment?</div>\n      <div class=\"chips\" id=\"momentChips\">\n        <button class=\"chip on\" data-f=\"moment\" data-v=\"all\">Any moment</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"breakfast\">Breakfast</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"chai\">Chai time</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"tiffin\">Tiffin</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"evening\">Evening break</button>\n      </div>\n\n      <div class=\"fq\"><span class=\"step\">2</span> Who's it for?</div>\n      <div class=\"chips\" id=\"whoChips\">\n        <button class=\"chip on\" data-f=\"who\" data-v=\"all\">Everyone</button>\n        <button class=\"chip\" data-f=\"who\" data-v=\"kids\">Children</button>\n        <button class=\"chip\" data-f=\"who\" data-v=\"family\">The whole family</button>\n        <button class=\"chip\" data-f=\"who\" data-v=\"guests\">Guests</button>\n      </div>\n\n      <div class=\"fq\"><span class=\"step\">3</span> Anything particular?</div>\n      <div class=\"chips\" id=\"kindChips\">\n        <button class=\"chip on\" data-f=\"kind\" data-v=\"all\">No preference</button>\n        <button class=\"chip\" data-f=\"kind\" data-v=\"wholesome\">Something wholesome</button>\n        <button class=\"chip\" data-f=\"kind\" data-v=\"premium\">Something premium</button>\n        <button class=\"chip\" data-f=\"kind\" data-v=\"savoury\">Something savoury</button>\n      </div>\n\n      <div class=\"fres\">\n        <div class=\"fcount\" id=\"fcount\">Showing all products</div>\n        <div class=\"fgrid\" id=\"fgrid\"></div>\n        <button class=\"freset\" id=\"freset\">Reset the finder</button>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- CLOSING -->\n<section class=\"pad closing\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\">\n    <div class=\"q rv\">Every great day begins with a great morning.</div>\n    <div class=\"deva rv\" style=\"--d:1\">शुरुआत आपसे।</div>\n    <div class=\"ctas rv\" style=\"--d:2\">\n      <a href=\"good-morning-about.html\" class=\"btn primary\">Explore our story <span class=\"arw\">→</span></a>\n      <a href=\"good-morning-homepage.html#partners\" class=\"btn ghost\">Stock our products</a>\n    </div>\n  </div>\n</section>\n\n<!-- FOOTER -->\n<footer>\n  <div class=\"wrap\">\n    <div class=\"foot-grid\">\n      <div>\n        <div class=\"brandlock\"><span class=\"sunhost\" style=\"width:30px;height:30px;color:var(--gold)\"></span> Good Morning</div>\n        <div class=\"tagline deva\">शुरुआत आपसे।</div>\n        <p class=\"blurb\">Building India's Morning Brand. Bread, rusk, biscuits and namkeen for the first hour of every day.</p>\n      </div>\n      <div><h4>Brand</h4><ul><li><a href=\"good-morning-about.html#story\">Our Story</a></li><li><a href=\"good-morning-about.html#philosophy\">Philosophy</a></li><li><a href=\"good-morning-about.html#leadership\">Leadership</a></li><li><a href=\"good-morning-about.html#milestones\">Milestones</a></li></ul></div>\n      <div><h4>Products</h4><ul><li><a href=\"#bread\">Bread</a></li><li><a href=\"#rusk\">Rusk</a></li><li><a href=\"#biscuits\">Biscuits</a></li><li><a href=\"#namkeen\">Namkeen</a></li><li><a href=\"#finder\">Product Finder</a></li></ul></div>\n      <div><h4>Connect</h4><ul><li><a href=\"good-morning-homepage.html#partners\">Distributors</a></li><li><a href=\"good-morning-homepage.html#partners\">Exports</a></li><li><a href=\"good-morning-homepage.html#cafe\">Café</a></li><li><a href=\"good-morning-contact.html\">Contact</a></li></ul></div>\n    </div>\n    <div class=\"fbot\"><span>© 2026 Good Morning®. All rights reserved.</span><span>Design by Black✳cherie agency</span></div>\n  </div>\n</footer>\n\n<!-- DESIGN NOTE -->\n<section class=\"specnote\">\n  <div class=\"wrap\">\n    <div class=\"the\">design note · not part of the live page</div>\n    <h2 style=\"font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem)\">Products, told as rituals — not a catalogue.</h2>\n    <div class=\"rows\">\n      <div class=\"r\"><div class=\"rk\">Role</div><div class=\"rvv\">Build trust</div></div>\n      <div class=\"r\"><div class=\"rk\">Objective</div><div class=\"rvv\">Help people understand the brand</div></div>\n      <div class=\"r\"><div class=\"rk\">Primary message</div><div class=\"rvv\">Making Every Morning Better.</div></div>\n      <div class=\"r\"><div class=\"rk\">Finder logic</div><div class=\"rvv\">Sorts by moment, not by SKU</div></div>\n      <div class=\"r never\" style=\"grid-column:1/-1\"><div class=\"rk\">Never (deliberately absent)</div><div class=\"rvv\">Prices · Discounts · “Buy Now” · Limited stock · Campaign headlines · Product-as-hero copy</div></div>\n    </div>\n    <p style=\"margin-top:16px;opacity:.7\">Per the Communication Decision System, the website's job is trust, not purchase — retail POS triggers purchase. So products here are described through the ritual they belong to, with people as the hero. Delete this note before launch.</p>\n  </div>\n</section>\n\n<script>\n  const sunT=document.getElementById('sunT'), glyphT=document.getElementById('glyphT');\n  document.querySelectorAll('.sunhost').forEach(h=>h.appendChild(sunT.content.cloneNode(true)));\n  document.querySelectorAll('.fpo').forEach(f=>{\n    f.appendChild(glyphT.content.cloneNode(true));\n    const t=document.createElement('span'); t.className='tag'; t.textContent='FPO'; f.appendChild(t);\n    if(f.dataset.cap){const c=document.createElement('span');c.className='cap';c.textContent=f.dataset.cap;f.appendChild(c);}\n  });\n\n  const nav=document.getElementById('nav');\n  addEventListener('scroll',()=>nav.classList.toggle('stuck',scrollY>10),{passive:true});\n  const burger=document.getElementById('burger'), drawer=document.getElementById('drawer');\n  burger.addEventListener('click',()=>{burger.classList.toggle('open');drawer.classList.toggle('open')});\n  drawer.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{burger.classList.remove('open');drawer.classList.remove('open')}));\n\n  const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('seen')}),{threshold:0.1});\n  document.querySelectorAll('section, header').forEach(s=>io.observe(s));\n\n  // rail scrollspy\n  const rail=document.getElementById('rail');\n  const railLinks=[...rail.querySelectorAll('a')];\n  const targets=railLinks.map(a=>document.querySelector(a.getAttribute('href'))).filter(Boolean);\n  function spy(){\n    const line=scrollY+72+90; let cur=targets[0];\n    for(const t of targets){ if(t.offsetTop<=line) cur=t; }\n    railLinks.forEach(a=>{\n      const on=a.getAttribute('href')==='#'+cur.id;\n      a.classList.toggle('active',on);\n      if(on && rail.querySelector('.in').scrollWidth>rail.clientWidth) a.scrollIntoView({inline:'center',block:'nearest',behavior:'smooth'});\n    });\n  }\n  addEventListener('scroll',spy,{passive:true}); addEventListener('resize',spy); spy();\n\n  /* ---------- PRODUCT FINDER ---------- */\n  const PRODUCTS=[\n    {n:'White Bread',c:'Bread',d:'The everyday loaf, for toast and tiffin.',moment:['breakfast','tiffin'],who:['family','kids'],kind:[]},\n    {n:'Brown Bread',c:'Bread',d:'Wholesome and hearty, for a fuller morning.',moment:['breakfast'],who:['family'],kind:['wholesome']},\n    {n:'Sandwich Bread',c:'Bread',d:'Wider slices, made for the tiffin box.',moment:['tiffin','evening'],who:['kids','family'],kind:[]},\n    {n:'Milk Bread',c:'Bread',d:'Soft, slightly sweet — a favourite with children.',moment:['breakfast'],who:['kids'],kind:[]},\n    {n:'Premium Range',c:'Bread',d:'Smaller batches, select ingredients, finer bakes.',moment:['breakfast'],who:['guests','family'],kind:['premium']},\n    {n:'Classic Rusk',c:'Rusk',d:'Crisp enough to dip, sturdy enough to last.',moment:['chai','evening'],who:['family'],kind:[]},\n    {n:'Elaichi Rusk',c:'Rusk',d:'A little cardamom for a slower chai.',moment:['chai'],who:['guests','family'],kind:[]},\n    {n:'Suji Rusk',c:'Rusk',d:'Traditional, wholesome, and made to last.',moment:['chai','evening'],who:['family'],kind:['wholesome']},\n    {n:'Premium Rusk',c:'Rusk',d:'For the chai you serve when someone visits.',moment:['chai'],who:['guests'],kind:['premium']},\n    {n:'Glucose Biscuits',c:'Biscuits',d:'The first biscuit most children remember.',moment:['chai','tiffin'],who:['kids'],kind:[]},\n    {n:'Marie Biscuits',c:'Biscuits',d:'Light, familiar, and always on the shelf.',moment:['chai'],who:['family'],kind:['wholesome']},\n    {n:'Cream Biscuits',c:'Biscuits',d:'Small moments, shared at any hour.',moment:['tiffin','evening'],who:['kids'],kind:[]},\n    {n:'Cookies',c:'Biscuits',d:'A little richer, for when the day slows down.',moment:['evening','chai'],who:['guests','family'],kind:['premium']},\n    {n:'Traditional Mixture',c:'Namkeen',d:'The family ritual, in a bowl.',moment:['evening'],who:['family','guests'],kind:['savoury']},\n    {n:'Sev',c:'Namkeen',d:'Simple, savoury, endlessly shareable.',moment:['evening'],who:['family'],kind:['savoury']},\n    {n:'Regional Favourites',c:'Namkeen',d:'Because every family has its own ritual.',moment:['evening','chai'],who:['guests','family'],kind:['savoury']}\n  ];\n  const state={moment:'all',who:'all',kind:'all'};\n  const grid=document.getElementById('fgrid'), count=document.getElementById('fcount');\n\n  function match(p){\n    return (state.moment==='all'||p.moment.includes(state.moment))\n        && (state.who==='all'||p.who.includes(state.who))\n        && (state.kind==='all'||p.kind.includes(state.kind));\n  }\n  function render(){\n    const res=PRODUCTS.filter(match);\n    grid.innerHTML = res.length ? res.map((p,i)=>\n      `<div class=\"fcard\" style=\"animation-delay:${i*45}ms\"><div class=\"fn\">${p.n}</div><div class=\"fc\">${p.c}</div><div class=\"fd\">${p.d}</div></div>`\n    ).join('') : `<div class=\"fempty\" style=\"grid-column:1/-1\">No exact match — but every morning has something. Try widening a choice above.</div>`;\n    const isAll = state.moment==='all'&&state.who==='all'&&state.kind==='all';\n    count.textContent = isAll ? `Showing all ${res.length} products` : `${res.length} product${res.length===1?'':'s'} for this morning`;\n  }\n  document.querySelectorAll('.chip').forEach(c=>c.addEventListener('click',()=>{\n    const f=c.dataset.f;\n    document.querySelectorAll(`.chip[data-f=\"${f}\"]`).forEach(x=>x.classList.remove('on'));\n    c.classList.add('on'); state[f]=c.dataset.v; render();\n  }));\n  document.getElementById('freset').addEventListener('click',()=>{\n    state.moment='all';state.who='all';state.kind='all';\n    document.querySelectorAll('.chip').forEach(x=>x.classList.toggle('on',x.dataset.v==='all'));\n    render();\n  });\n  render();\n</script>\n</body>\n</html>","embedURL":""}},"6:24":{"type":"FRAME","id":"6:24","name":"Desktop","absoluteBoundingBox":{"x":3838,"y":100,"width":1280,"height":9200},"isolatedAbsoluteRenderBounds":{"x":3838,"y":100,"width":1280,"height":9200},"relativeTransform":[[1,0,64],[0,1,100]],"size":{"x":1280,"y":9200},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1,"g":1,"b":1,"a":1},"visible":true,"opacity":1}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"overflowDirection":"VERTICAL_SCROLLING","isBreakpointFrame":true,"children":["6:25"]},"6:25":{"type":"WIDGET","id":"6:25","name":"Embed 2","absoluteBoundingBox":{"x":3838,"y":100,"width":1280,"height":9030},"isolatedAbsoluteRenderBounds":{"x":3838,"y":100,"width":1280,"height":9030},"relativeTransform":[[1,0,0],[0,1,0]],"size":{"x":1280,"y":9030},"constraints":{"vertical":"TOP","horizontal":"LEFT_RIGHT"},"constraintValues":{"left":{"pixelOffset":0,"sizeFraction":0},"right":{"pixelOffset":0,"sizeFraction":1},"top":{"pixelOffset":0,"sizeFraction":0}},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n<title>Products — Good Morning® | Made for Every Morning</title>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Baloo+2:wght@500;600;700;800&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n  /* ============================================================\n     PRIMARY / DISPLAY TYPEFACE — COOPER\n     ------------------------------------------------------------\n     Per the Good Morning brand guideline, the primary brand\n     typeface is COOPER. Cooper is a licensed face and cannot be\n     served from a public CDN, so this build ships FRAUNCES tuned\n     toward Cooper (SOFT + WONK axes at maximum) as the stand-in.\n\n     TO SWITCH TO REAL COOPER:\n     1. Drop the licensed webfont files beside this file, e.g.\n        ./fonts/CooperStd-Black.woff2\n     2. Uncomment the @font-face block below.\n     3. In :root, change --disp to:\n        --disp:'Cooper Std','Fraunces','Baloo 2',Georgia,serif;\n     Nothing else needs to change.\n     ------------------------------------------------------------\n  @font-face{\n    font-family:'Cooper Std';\n    src:url('./fonts/CooperStd-Black.woff2') format('woff2');\n    font-weight:400 900;\n    font-style:normal;\n    font-display:swap;\n  }\n  ------------------------------------------------------------ */\n\n  /* Tune Fraunces toward Cooper: maximum softness + wonk */\n  h1,h2,h3,h4,.sectitle,.doc-h,.lead,.lead-line,.big,.the,.kick,.btn,.brandlock,\n  .navcta,.cn,.n,.num,.yr,.ms,.st,.vn,.pn,.an,.q,.tag,.tagline,.fn,.fh,.fq,\n  .stack,.catname,.catsub,.chip,.pill,.cnum,.ct,.mloc,.stat .n,.kpi .num,\n  .fcard .fn,.sku .n,.season .fh,.lcard .n,.val h3,.qc h3,.pcard h3,.mstat .n,\n  .rail a,.links a,.crumb,blockquote,.sig,.rvv,.item{\n    font-variation-settings:'SOFT' 100,'WONK' 1;\n  }\n  .deva,.deva *{font-variation-settings:normal}\n\n  :root{\n    --mist:#FFFFFF;--gold:#FFD000;--sun:#FFF200;--clover:#008C1E;--forest:#00660C;--soil:#1B1600;\n    --disp:'Fraunces','Baloo 2',Georgia,serif;--deva:'Baloo 2',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;\n    --hair:rgba(27,22,0,.16);--pad:clamp(20px,5vw,72px);--nav-h:72px;--rail-h:54px;\n  }\n  *{margin:0;padding:0;box-sizing:border-box}\n  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--rail-h) + 16px)}\n  body{font-family:var(--body);background:var(--mist);color:var(--soil);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}\n  .wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}\n  .pad{padding-block:clamp(60px,9vh,104px)}\n  .deva{font-family:var(--deva);font-weight:600}\n\n  .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*80ms)}\n  .seen .rv{opacity:1;transform:none}\n  @media (prefers-reduced-motion:reduce){*{animation:none!important}.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}\n\n  .rays{transform-origin:100px 100px;animation:spin 90s linear infinite}\n  @keyframes spin{to{transform:rotate(360deg)}}\n  .sunburst{position:absolute;inset:0;z-index:0;pointer-events:none;\n    background:repeating-conic-gradient(from 0deg at var(--bx,72%) var(--by,50%),var(--sun) 0deg 4.2deg,var(--gold) 4.2deg 12deg);\n    -webkit-mask:radial-gradient(closest-side at var(--bx,72%) var(--by,50%),#000 4%,#000 46%,transparent 72%);\n    mask:radial-gradient(closest-side at var(--bx,72%) var(--by,50%),#000 4%,#000 46%,transparent 72%);\n    animation:spin 180s linear infinite}\n\n  .fpo{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,rgba(255,208,0,.22),rgba(0,140,30,.18));border:1px solid var(--hair);display:grid;place-items:center;min-height:170px;isolation:isolate}\n  .fpo .glyph{width:42px;height:42px;opacity:.45;color:var(--forest)}\n  .fpo .cap{position:absolute;left:12px;right:12px;bottom:11px;font-size:10px;line-height:1.4;opacity:.7;z-index:2}\n  .fpo .tag{position:absolute;top:10px;right:10px;font-weight:600;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);opacity:.5;border:1px solid currentColor;border-radius:4px;padding:2px 6px;z-index:2}\n  .on-dark .fpo{border-color:rgba(255,255,255,.24);background:linear-gradient(135deg,rgba(255,242,0,.16),rgba(255,255,255,.05))}\n  .on-dark .fpo .glyph,.on-dark .fpo .tag{color:var(--sun);opacity:.65}\n  .on-dark .fpo .cap{color:#fff;opacity:.8}\n\n  /* NAV */\n  .nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}\n  .nav.stuck{border-color:var(--hair);box-shadow:0 4px 24px rgba(27,22,0,.05)}\n  .nav .in{max-width:1240px;margin:0 auto;padding-inline:var(--pad);height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}\n  .brandlock{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:19px;color:var(--forest);text-decoration:none;flex:none}\n  .links{display:none;gap:clamp(16px,2.4vw,34px);align-items:center}\n  @media(min-width:940px){.links{display:flex}}\n  .links a{font-size:14px;font-weight:500;color:var(--soil);text-decoration:none;opacity:.8;position:relative;padding:4px 0;transition:opacity .2s,color .2s}\n  .links a::after{content:\"\";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .3s cubic-bezier(.2,.7,.2,1)}\n  .links a:hover,.links a.current{opacity:1;color:var(--forest)}.links a:hover::after,.links a.current::after{right:0}\n  .navcta{flex:none;display:inline-flex;align-items:center;gap:9px;background:var(--forest);color:#fff;font-family:var(--disp);font-weight:700;font-size:14px;text-decoration:none;padding:10px 20px;border-radius:100px;transition:background .25s,transform .25s}\n  .navcta:hover{background:var(--clover);transform:translateY(-1px)}\n  .burger{display:grid;gap:5px;background:none;border:0;cursor:pointer;padding:8px;flex:none}\n  @media(min-width:940px){.burger{display:none}}\n  .burger span{width:22px;height:2px;background:var(--forest);border-radius:2px;transition:transform .3s,opacity .3s}\n  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}\n  .burger.open span:nth-child(2){opacity:0}\n  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}\n  .drawer{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--mist);border-bottom:1px solid var(--hair);display:grid;gap:2px;padding:16px var(--pad) 24px;z-index:99;transform:translateY(-120%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}\n  .drawer.open{transform:none}\n  @media(min-width:940px){.drawer{display:none}}\n  .drawer a{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--soil);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--hair)}\n\n  /* PAGE HERO */\n  .phero{padding-top:calc(var(--nav-h) + clamp(44px,7vh,80px));padding-bottom:clamp(44px,6vh,72px);position:relative;overflow:hidden;background:var(--gold);color:var(--forest)}\n  .phero .sunburst{opacity:.44;--bx:88%;--by:18%}\n  .phero .crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:16px;opacity:0;animation:fu .9s ease .2s forwards}\n  .phero .crumb a{color:inherit;text-decoration:none}.phero .crumb a:hover{text-decoration:underline}\n  .phero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,6.2vw,4.8rem);line-height:.98;letter-spacing:-0.02em;opacity:0;animation:fu 1s cubic-bezier(.2,.7,.2,1) .35s forwards}\n  .phero .deck{max-width:48ch;margin-top:18px;font-size:clamp(1.02rem,1.4vw,1.18rem);opacity:.8;opacity:0;animation:fu 1s ease .6s forwards}\n  @keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}\n\n  /* RAIL */\n  .rail{position:sticky;top:var(--nav-h);z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair);height:var(--rail-h)}\n  .rail .in{max-width:1240px;margin:0 auto;padding-inline:var(--pad);height:100%;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}\n  .rail .in::-webkit-scrollbar{display:none}\n  .rail a{flex:none;font-size:12.5px;font-weight:500;color:var(--soil);opacity:.62;text-decoration:none;padding:7px 13px;border-radius:100px;white-space:nowrap;transition:background .25s,color .25s,opacity .25s}\n  .rail a:hover{opacity:1;background:rgba(0,102,12,.07)}\n  .rail a.active{opacity:1;background:var(--forest);color:#fff;font-weight:600}\n\n  /* heads */\n  .the{font-family:var(--disp);font-weight:500;font-size:clamp(.98rem,1.6vw,1.25rem);color:var(--clover);margin-bottom:2px}\n  .on-dark .the{color:var(--sun)}\n  h2.big{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.03;letter-spacing:-0.015em;max-width:20ch}\n  .shead{margin-bottom:clamp(26px,3.6vw,42px)}\n  .shead p{max-width:52ch;margin-top:14px;opacity:.75;font-size:clamp(1rem,1.2vw,1.1rem)}\n  .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:15px;text-decoration:none;padding:13px 24px;border-radius:100px;transition:transform .25s,background .25s,color .25s;border:0;cursor:pointer}\n  .btn.primary{background:var(--forest);color:#fff}.btn.primary:hover{background:var(--clover);transform:translateY(-2px)}\n  .btn.ghost{border:2px solid var(--forest);color:var(--forest);background:none}.btn.ghost:hover{background:var(--forest);color:#fff;transform:translateY(-2px)}\n  .on-dark .btn.ghost{border-color:var(--sun);color:var(--sun)}.on-dark .btn.ghost:hover{background:var(--sun);color:var(--forest)}\n  .btn .arw{transition:transform .25s}.btn:hover .arw{transform:translateX(4px)}\n\n  /* CATEGORY INTRO ROW */\n  .catrow{display:grid;gap:clamp(14px,2vw,20px)}\n  @media(min-width:560px){.catrow{grid-template-columns:repeat(2,1fr)}}\n  @media(min-width:980px){.catrow{grid-template-columns:repeat(4,1fr)}}\n  .catlink{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:var(--mist);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}\n  .catlink:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(27,22,0,.13);border-color:transparent}\n  .catlink .fpo{border:0;border-radius:0;aspect-ratio:4/3;min-height:0}\n  .catlink .b{padding:18px 20px 22px}\n  .catlink .n{font-family:var(--disp);font-weight:800;font-size:1.45rem;line-height:1}\n  .catlink .s{font-size:13px;opacity:.72;margin-top:6px}\n\n  /* SKU GRID */\n  .skus{display:grid;gap:clamp(14px,2vw,22px);margin-top:clamp(24px,3vw,34px)}\n  @media(min-width:600px){.skus{grid-template-columns:repeat(2,1fr)}}\n  @media(min-width:1000px){.skus{grid-template-columns:repeat(3,1fr)}}\n  .sku{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--mist);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}\n  .sku:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(27,22,0,.12);border-color:transparent}\n  .sku .fpo{border:0;border-radius:0;aspect-ratio:5/4;min-height:0}\n  .sku .b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}\n  .sku .n{font-family:var(--disp);font-weight:700;font-size:1.25rem;line-height:1.15}\n  .sku .d{font-size:13.5px;opacity:.74;margin-top:7px;flex:1}\n  .sku .meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}\n  .pill{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:rgba(0,140,30,.1);color:var(--forest)}\n  .pill.gold{background:rgba(255,208,0,.28);color:var(--soil)}\n  .pill.new{background:var(--clover);color:#fff}\n  .sku.premium{border-color:var(--gold);position:relative}\n  .sku.premium::before{content:\"Premium\";position:absolute;top:12px;left:12px;z-index:3;background:var(--forest);color:var(--sun);font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:100px}\n\n  /* category band */\n  .band{position:relative;overflow:hidden}\n  .band.green{background:var(--forest);color:#fff}\n  .band.green .sunburst{opacity:.1}\n  .band.cream{background:#faf8f2}\n  .band.goldband{background:var(--gold);color:var(--forest)}\n  .band.goldband .sunburst{opacity:.36;--bx:92%;--by:86%}\n  .split{display:grid;gap:clamp(28px,4vw,60px);align-items:center}\n  @media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.rev .txt{order:2}}\n  .split .fpo{min-height:min(52vh,460px)}\n  .body-col{max-width:48ch;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.72;opacity:.82}\n\n  /* PRODUCT FINDER */\n  .finder{background:var(--soil);color:#fff;position:relative;overflow:hidden}\n  .finder .sunburst{opacity:.07;--bx:82%;--by:20%}\n  .finder .the{color:var(--sun)}\n  .finder h2.big{color:#fff}\n  .finder .fp{opacity:.72;max-width:52ch;margin-top:14px}\n  .fbox{margin-top:clamp(28px,4vw,42px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:clamp(22px,3vw,34px);position:relative;z-index:2}\n  .fq{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--sun);margin-bottom:14px}\n  .fq .step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--soil);font-size:12px;margin-right:9px;vertical-align:2px}\n  .chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}\n  .chip{font-family:var(--body);font-weight:500;font-size:13.5px;padding:9px 17px;border-radius:100px;\n    border:1.5px solid rgba(255,255,255,.28);background:none;color:rgba(255,255,255,.82);cursor:pointer;transition:all .25s}\n  .chip:hover{border-color:var(--sun);color:#fff}\n  .chip.on{background:var(--sun);border-color:var(--sun);color:var(--soil);font-weight:600}\n  .fres{border-top:1px solid rgba(255,255,255,.16);padding-top:24px;margin-top:4px}\n  .fcount{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:16px}\n  .fgrid{display:grid;gap:12px}\n  @media(min-width:640px){.fgrid{grid-template-columns:repeat(2,1fr)}}\n  @media(min-width:1000px){.fgrid{grid-template-columns:repeat(3,1fr)}}\n  .fcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px 18px;\n    animation:pop .4s cubic-bezier(.2,.8,.2,1) both}\n  @keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}\n  .fcard .fn{font-family:var(--disp);font-weight:700;font-size:1.08rem;color:var(--sun)}\n  .fcard .fc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-top:3px}\n  .fcard .fd{font-size:13px;opacity:.75;margin-top:8px}\n  .fempty{text-align:center;padding:26px;opacity:.6;font-size:14px}\n  .freset{background:none;border:0;color:var(--sun);font-size:13px;cursor:pointer;text-decoration:underline;padding:0;margin-top:18px;font-family:var(--body)}\n\n  /* SEASONAL */\n  .seasons{display:grid;gap:clamp(14px,2vw,20px);margin-top:clamp(24px,3vw,34px)}\n  @media(min-width:720px){.seasons{grid-template-columns:repeat(3,1fr)}}\n  .season{position:relative;overflow:hidden;border-radius:14px;background:var(--forest);color:#fff;padding:clamp(22px,2.8vw,30px);min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s}\n  .season:hover{transform:translateY(-6px)}\n  .season .sunburst{opacity:.14}\n  .season .fn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sun);position:relative;z-index:2}\n  .season .fh{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.75rem);margin-top:10px;position:relative;z-index:2}\n  .season .fd{font-size:13px;opacity:.78;margin-top:8px;position:relative;z-index:2}\n\n  /* NEW LAUNCHES */\n  .launch{display:grid;gap:clamp(14px,2vw,22px);margin-top:clamp(24px,3vw,34px)}\n  @media(min-width:640px){.launch{grid-template-columns:repeat(2,1fr)}}\n  .lcard{border:2px solid var(--clover);border-radius:16px;overflow:hidden;background:var(--mist);display:grid;transition:transform .35s,box-shadow .35s}\n  @media(min-width:480px){.lcard{grid-template-columns:.9fr 1.1fr}}\n  .lcard:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,102,12,.16)}\n  .lcard .fpo{border:0;border-radius:0;min-height:190px}\n  .lcard .b{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}\n  .lcard .n{font-family:var(--disp);font-weight:800;font-size:1.35rem;line-height:1.1;margin-top:9px}\n  .lcard .d{font-size:13.5px;opacity:.75;margin-top:8px}\n\n  /* CLOSING */\n  .closing{background:var(--clover);color:#fff;text-align:center;overflow:hidden}\n  .closing .sunburst{opacity:.1;--bx:50%;--by:34%}\n  .closing .q{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,4vw,2.9rem);line-height:1.15;max-width:22ch;margin:0 auto;position:relative;z-index:2}\n  .closing .deva{color:var(--sun);margin-top:16px;font-family:var(--deva);font-weight:700;font-size:clamp(1.3rem,2.6vw,2rem);position:relative;z-index:2}\n  .closing .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px;position:relative;z-index:2}\n  .closing .btn.primary{background:#fff;color:var(--forest)}.closing .btn.primary:hover{background:var(--sun)}\n  .closing .btn.ghost{border-color:#fff;color:#fff}.closing .btn.ghost:hover{background:#fff;color:var(--forest)}\n\n  /* FOOTER */\n  footer{background:var(--soil);color:rgba(255,255,255,.72);padding-top:clamp(56px,8vh,84px)}\n  .foot-grid{display:grid;gap:clamp(28px,4vw,48px)}\n  @media(min-width:820px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}\n  footer .brandlock{color:var(--sun);font-size:22px}\n  footer .tagline{font-family:var(--disp);font-weight:600;color:var(--gold);font-size:1.15rem;margin-top:14px}\n  footer .blurb{font-size:13.5px;margin-top:12px;max-width:34ch;opacity:.7}\n  footer h4{font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.55;margin-bottom:14px}\n  footer ul{list-style:none;display:grid;gap:9px}\n  footer ul a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14px;transition:color .2s}\n  footer ul a:hover{color:var(--sun)}\n  .fbot{margin-top:clamp(34px,5vh,54px);border-top:1px solid rgba(255,255,255,.14);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;opacity:.6}\n\n  .specnote{background:#f4f1e8;border-top:1px solid var(--hair);padding-block:clamp(36px,5vh,56px);font-size:14px}\n  .specnote .rows{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;margin-top:18px}\n  @media(min-width:680px){.specnote .rows{grid-template-columns:1fr 1fr}}\n  .specnote .r{background:#faf8f2;padding:14px 20px}\n  .specnote .rk{font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--clover);margin-bottom:5px}\n  .specnote .r.never .rk{color:#c0392b}\n  .specnote .rvv{font-family:var(--disp);font-weight:600;font-size:1.05rem}\n</style>\n</head>\n<body>\n\n<template id=\"sunT\">\n  <svg viewBox=\"0 0 200 200\" width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n    <g class=\"rays\" stroke=\"currentColor\" stroke-width=\"10\" stroke-linecap=\"round\">\n      <line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(30 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(60 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(90 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(120 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(150 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(180 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(210 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(240 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(270 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(300 100 100)\"/><line x1=\"100\" y1=\"16\" x2=\"100\" y2=\"42\" transform=\"rotate(330 100 100)\"/>\n    </g><circle cx=\"100\" cy=\"100\" r=\"39\" fill=\"currentColor\"/>\n  </svg>\n</template>\n<template id=\"glyphT\">\n  <svg class=\"glyph\" viewBox=\"0 0 64 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n    <rect x=\"3\" y=\"3\" width=\"58\" height=\"42\" rx=\"4\"/><circle cx=\"20\" cy=\"18\" r=\"6\"/><path d=\"M6 40 L26 24 L40 34 L50 26 L58 34\"/>\n  </svg>\n</template>\n\n<!-- NAV -->\n<nav class=\"nav\" id=\"nav\">\n  <div class=\"in\">\n    <a href=\"good-morning-homepage.html\" class=\"brandlock\"><span class=\"sunhost\" style=\"width:26px;height:26px;color:var(--clover)\"></span> Good Morning</a>\n    <div class=\"links\">\n      <a href=\"good-morning-about.html\">About</a>\n      <a href=\"#\" class=\"current\">Products</a>\n      <a href=\"good-morning-impact.html\">Our Impact</a>\n      <a href=\"good-morning-careers.html\">Careers</a>\n      <a href=\"good-morning-distributors.html\">Distributors</a>\n      <a href=\"good-morning-contact.html\">Contact</a>\n      <a href=\"good-morning-homepage.html#quality\">Quality</a>\n      <a href=\"good-morning-homepage.html#cafe\">Café</a>\n      <a href=\"good-morning-homepage.html#partners\">Partners</a>\n    </div>\n    <a href=\"#finder\" class=\"navcta\">Product Finder</a>\n    <button class=\"burger\" id=\"burger\" aria-label=\"Menu\"><span></span><span></span><span></span></button>\n  </div>\n</nav>\n<div class=\"drawer\" id=\"drawer\">\n  <a href=\"good-morning-about.html\">About</a><a href=\"#\">Products</a><a href=\"good-morning-homepage.html#quality\">Quality</a><a href=\"good-morning-homepage.html#cafe\">Café</a><a href=\"good-morning-homepage.html#partners\">Partners</a>\n</div>\n\n<!-- HERO -->\n<header class=\"phero\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\" style=\"position:relative;z-index:2\">\n    <div class=\"crumb\"><a href=\"good-morning-homepage.html\">Home</a> &nbsp;/&nbsp; Products</div>\n    <h1>Made for every morning.</h1>\n    <p class=\"deck\">Bread, rusk, biscuits and namkeen. Our portfolio has grown alongside the changing needs of Indian families — each created for a different morning, all carrying the same promise.</p>\n  </div>\n</header>\n\n<!-- RAIL -->\n<div class=\"rail\" id=\"rail\">\n  <div class=\"in\">\n    <a href=\"#bread\">Bread</a>\n    <a href=\"#rusk\">Rusk</a>\n    <a href=\"#biscuits\">Biscuits</a>\n    <a href=\"#namkeen\">Namkeen</a>\n    <a href=\"#seasonal\">Seasonal</a>\n    <a href=\"#launches\">New Launches</a>\n    <a href=\"#finder\">Product Finder</a>\n  </div>\n</div>\n\n<!-- CATEGORY OVERVIEW -->\n<section class=\"pad\">\n  <div class=\"wrap\">\n    <div class=\"shead\">\n      <div class=\"the rv\">the portfolio</div>\n      <h2 class=\"big rv\" style=\"--d:1\">One promise. Four rituals.</h2>\n      <p class=\"rv\" style=\"--d:2\">Every product exists to become part of one of life's simplest, yet most meaningful rituals.</p>\n    </div>\n    <div class=\"catrow\">\n      <a href=\"#bread\" class=\"catlink rv\" style=\"--d:1\"><div class=\"fpo\" data-cap=\"Fresh bread\"></div><div class=\"b\"><div class=\"n\">Bread</div><div class=\"s\">Freshly baked. Made for everyday mornings.</div></div></a>\n      <a href=\"#rusk\" class=\"catlink rv\" style=\"--d:2\"><div class=\"fpo\" data-cap=\"Rusk with chai\"></div><div class=\"b\"><div class=\"n\">Rusk</div><div class=\"s\">Made for chai conversations.</div></div></a>\n      <a href=\"#biscuits\" class=\"catlink rv\" style=\"--d:3\"><div class=\"fpo\" data-cap=\"Biscuits\"></div><div class=\"b\"><div class=\"n\">Biscuits</div><div class=\"s\">Small moments. Shared together.</div></div></a>\n      <a href=\"#namkeen\" class=\"catlink rv\" style=\"--d:4\"><div class=\"fpo\" data-cap=\"Namkeen\"></div><div class=\"b\"><div class=\"n\">Namkeen</div><div class=\"s\">Because every family has its own ritual.</div></div></a>\n    </div>\n  </div>\n</section>\n\n<!-- BREAD -->\n<section class=\"pad band cream\" id=\"bread\">\n  <div class=\"wrap\">\n    <div class=\"split\" style=\"margin-bottom:clamp(30px,4vw,48px)\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 01</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Bread</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--clover);margin-top:6px\">Freshly baked. Made for everyday mornings.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px\">\n          <p>Bread is where our story began, and it is still where most mornings begin. Baked fresh through the night, delivered before the day starts, and made to be exactly the same every single time.</p>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Sliced fresh bread, crumb detail, kitchen counter\"></div>\n    </div>\n    <div class=\"the rv\">the bread range</div>\n    <div class=\"skus\">\n      <div class=\"sku rv\" style=\"--d:1\"><div class=\"fpo\" data-cap=\"White bread loaf\"></div><div class=\"b\"><div class=\"n\">White Bread</div><div class=\"d\">The everyday loaf. Soft, consistent, and made for toast, tiffin and the first meal of the day.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill\">Tiffin</span></div></div></div>\n      <div class=\"sku rv\" style=\"--d:2\"><div class=\"fpo\" data-cap=\"Brown bread loaf\"></div><div class=\"b\"><div class=\"n\">Brown Bread</div><div class=\"d\">Wholesome and hearty, for families who want a little more from the morning slice.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill gold\">Wholesome</span></div></div></div>\n      <div class=\"sku rv\" style=\"--d:3\"><div class=\"fpo\" data-cap=\"Sandwich bread\"></div><div class=\"b\"><div class=\"n\">Sandwich Bread</div><div class=\"d\">Wider slices, made to hold everything a tiffin box needs to carry.</div><div class=\"meta\"><span class=\"pill\">Tiffin</span><span class=\"pill\">Evening</span></div></div></div>\n      <div class=\"sku rv\" style=\"--d:4\"><div class=\"fpo\" data-cap=\"Milk bread\"></div><div class=\"b\"><div class=\"n\">Milk Bread</div><div class=\"d\">Softer, slightly sweet, and a favourite with children. The gentlest way to begin.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill gold\">Kids</span></div></div></div>\n      <div class=\"sku premium rv\" style=\"--d:5\"><div class=\"fpo\" data-cap=\"Premium range packaging\"></div><div class=\"b\"><div class=\"n\">Premium Range</div><div class=\"d\">Our finest bakes, for mornings that deserve a little more. Crafted in smaller batches with select ingredients.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span><span class=\"pill gold\">Premium</span></div></div></div>\n    </div>\n  </div>\n</section>\n\n<!-- RUSK -->\n<section class=\"pad band green on-dark\" id=\"rusk\">\n  <div class=\"sunburst\" style=\"--bx:12%;--by:22%\"></div>\n  <div class=\"wrap\">\n    <div class=\"split rev\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 02</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Rusk</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--sun);margin-top:6px\">Made for chai conversations.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px;opacity:.85\">\n          <p>Some mornings aren't in a hurry. They're spent around a cup of chai, with a rusk that holds its own — crisp enough to dip, sturdy enough to last the whole conversation.</p>\n        </div>\n        <div class=\"skus\" style=\"grid-template-columns:1fr;margin-top:26px\">\n          <div class=\"sku rv\" style=\"--d:4;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff\">\n            <div class=\"b\"><div class=\"n\" style=\"color:var(--sun)\">The Rusk Range</div><div class=\"d\" style=\"opacity:.78\">Classic, elaichi, suji and premium variants — each made for a different chai.</div><div class=\"meta\"><span class=\"pill\" style=\"background:rgba(255,242,0,.18);color:var(--sun)\">Chai time</span><span class=\"pill\" style=\"background:rgba(255,242,0,.18);color:var(--sun)\">Evening</span></div></div>\n          </div>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Rusk dipped in chai, steam, hands mid-conversation\"></div>\n    </div>\n  </div>\n</section>\n\n<!-- BISCUITS -->\n<section class=\"pad\" id=\"biscuits\">\n  <div class=\"wrap\">\n    <div class=\"split\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 03</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Biscuits</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--clover);margin-top:6px\">Small moments. Shared together.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px\">\n          <p>A biscuit is rarely eaten alone. It's passed across a table, packed into a bag, offered to a guest. Small things, shared — which is exactly why they matter.</p>\n        </div>\n        <div class=\"skus\" style=\"grid-template-columns:1fr;margin-top:26px\">\n          <div class=\"sku rv\" style=\"--d:4\"><div class=\"b\"><div class=\"n\">The Biscuit Range</div><div class=\"d\">Glucose, marie, cream, cookies and premium bakes — for every small moment of the day.</div><div class=\"meta\"><span class=\"pill\">Chai time</span><span class=\"pill\">Tiffin</span><span class=\"pill\">Evening</span></div></div></div>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Children sharing biscuits, candid, warm\"></div>\n    </div>\n  </div>\n</section>\n\n<!-- NAMKEEN -->\n<section class=\"pad band goldband\" id=\"namkeen\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\">\n    <div class=\"split rev\">\n      <div class=\"txt\">\n        <div class=\"the rv\">category 04</div>\n        <h2 class=\"big rv\" style=\"--d:1\">Namkeen</h2>\n        <p class=\"rv\" style=\"--d:2;font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);margin-top:6px;opacity:.8\">Because every family has its own ritual.</p>\n        <div class=\"body-col rv\" style=\"--d:3;margin-top:16px\">\n          <p>Not every Good Morning happens in the morning. An evening break, a small pause in the middle of a long day — every time life asks for a little freshness or reset, there is room for a Good Morning.</p>\n        </div>\n        <div class=\"skus\" style=\"grid-template-columns:1fr;margin-top:26px\">\n          <div class=\"sku rv\" style=\"--d:4;background:rgba(255,255,255,.6);border-color:rgba(0,102,12,.2)\"><div class=\"b\"><div class=\"n\">The Namkeen Range</div><div class=\"d\">Traditional mixtures, sev and regional favourites — made for the family's own ritual.</div><div class=\"meta\"><span class=\"pill\">Evening</span><span class=\"pill gold\">Sharing</span></div></div></div>\n        </div>\n      </div>\n      <div class=\"fpo rv\" style=\"--d:2\" data-cap=\"Namkeen bowl on a family table, evening chai spread\"></div>\n    </div>\n  </div>\n</section>\n\n<!-- SEASONAL -->\n<section class=\"pad band cream\" id=\"seasonal\">\n  <div class=\"wrap\">\n    <div class=\"shead\">\n      <div class=\"the rv\">seasonal products</div>\n      <h2 class=\"big rv\" style=\"--d:1\">Every festival is a beginning.</h2>\n      <p class=\"rv\" style=\"--d:2\">Special bakes for the mornings that matter most — made in limited runs, for the seasons India celebrates together.</p>\n    </div>\n    <div class=\"seasons\">\n      <div class=\"season rv\" style=\"--d:1\"><div class=\"sunburst\" style=\"--bx:80%;--by:20%\"></div><div class=\"fn\">Diwali</div><div class=\"fh deva\">रोशनी की शुरुआत।</div><div class=\"fd\">Festive gift packs and special bakes for the season of light.</div></div>\n      <div class=\"season rv\" style=\"--d:2\"><div class=\"sunburst\" style=\"--bx:80%;--by:20%\"></div><div class=\"fn\">Holi</div><div class=\"fh deva\">रंगों की शुरुआत।</div><div class=\"fd\">Sweet and savoury favourites for a morning full of colour.</div></div>\n      <div class=\"season rv\" style=\"--d:3\"><div class=\"sunburst\" style=\"--bx:80%;--by:20%\"></div><div class=\"fn\">Raksha Bandhan</div><div class=\"fh deva\">रिश्तों की शुरुआत।</div><div class=\"fd\">Made for the mornings families spend together.</div></div>\n    </div>\n    <p class=\"rv\" style=\"--d:4;margin-top:20px;font-size:13px;opacity:.6\">Seasonal availability varies by region. Placeholder ranges — to be replaced with the actual festive calendar.</p>\n  </div>\n</section>\n\n<!-- NEW LAUNCHES -->\n<section class=\"pad\" id=\"launches\">\n  <div class=\"wrap\">\n    <div class=\"shead\">\n      <div class=\"the rv\">new launches</div>\n      <h2 class=\"big rv\" style=\"--d:1\">A new beginning in your morning.</h2>\n      <p class=\"rv\" style=\"--d:2\">Consumer habits evolve. So do we. Every new product begins with one question — will this make someone's morning better?</p>\n    </div>\n    <div class=\"launch\">\n      <div class=\"lcard rv\" style=\"--d:1\">\n        <div class=\"fpo\" data-cap=\"New product hero\"></div>\n        <div class=\"b\"><span class=\"pill new\" style=\"align-self:flex-start\">New</span><div class=\"n\">[Product Name]</div><div class=\"d\">A short, warm line about what this product makes possible — never a sales pitch.</div><div class=\"meta\"><span class=\"pill\">Breakfast</span></div></div>\n      </div>\n      <div class=\"lcard rv\" style=\"--d:2\">\n        <div class=\"fpo\" data-cap=\"New product hero\"></div>\n        <div class=\"b\"><span class=\"pill new\" style=\"align-self:flex-start\">New</span><div class=\"n\">[Product Name]</div><div class=\"d\">A short, warm line about what this product makes possible — never a sales pitch.</div><div class=\"meta\"><span class=\"pill\">Chai time</span></div></div>\n      </div>\n    </div>\n    <p class=\"rv\" style=\"--d:3;margin-top:20px;font-size:13px;opacity:.6\">Placeholders — replace with live launches. Per the verbal system, launches never open with “Introducing…”; they open with <b class=\"deva\">आपकी सुबह में एक नई शुरुआत।</b></p>\n  </div>\n</section>\n\n<!-- PRODUCT FINDER -->\n<section class=\"pad finder on-dark\" id=\"finder\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\" style=\"position:relative;z-index:2\">\n    <div class=\"the rv\">product finder</div>\n    <h2 class=\"big rv\" style=\"--d:1\">Which morning are you having?</h2>\n    <p class=\"fp rv\" style=\"--d:2\">Tell us about the moment, not the product. We'll find what belongs in it.</p>\n\n    <div class=\"fbox rv\" style=\"--d:3\">\n      <div class=\"fq\"><span class=\"step\">1</span> What's the moment?</div>\n      <div class=\"chips\" id=\"momentChips\">\n        <button class=\"chip on\" data-f=\"moment\" data-v=\"all\">Any moment</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"breakfast\">Breakfast</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"chai\">Chai time</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"tiffin\">Tiffin</button>\n        <button class=\"chip\" data-f=\"moment\" data-v=\"evening\">Evening break</button>\n      </div>\n\n      <div class=\"fq\"><span class=\"step\">2</span> Who's it for?</div>\n      <div class=\"chips\" id=\"whoChips\">\n        <button class=\"chip on\" data-f=\"who\" data-v=\"all\">Everyone</button>\n        <button class=\"chip\" data-f=\"who\" data-v=\"kids\">Children</button>\n        <button class=\"chip\" data-f=\"who\" data-v=\"family\">The whole family</button>\n        <button class=\"chip\" data-f=\"who\" data-v=\"guests\">Guests</button>\n      </div>\n\n      <div class=\"fq\"><span class=\"step\">3</span> Anything particular?</div>\n      <div class=\"chips\" id=\"kindChips\">\n        <button class=\"chip on\" data-f=\"kind\" data-v=\"all\">No preference</button>\n        <button class=\"chip\" data-f=\"kind\" data-v=\"wholesome\">Something wholesome</button>\n        <button class=\"chip\" data-f=\"kind\" data-v=\"premium\">Something premium</button>\n        <button class=\"chip\" data-f=\"kind\" data-v=\"savoury\">Something savoury</button>\n      </div>\n\n      <div class=\"fres\">\n        <div class=\"fcount\" id=\"fcount\">Showing all products</div>\n        <div class=\"fgrid\" id=\"fgrid\"></div>\n        <button class=\"freset\" id=\"freset\">Reset the finder</button>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- CLOSING -->\n<section class=\"pad closing\">\n  <div class=\"sunburst\"></div>\n  <div class=\"wrap\">\n    <div class=\"q rv\">Every great day begins with a great morning.</div>\n    <div class=\"deva rv\" style=\"--d:1\">शुरुआत आपसे।</div>\n    <div class=\"ctas rv\" style=\"--d:2\">\n      <a href=\"good-morning-about.html\" class=\"btn primary\">Explore our story <span class=\"arw\">→</span></a>\n      <a href=\"good-morning-homepage.html#partners\" class=\"btn ghost\">Stock our products</a>\n    </div>\n  </div>\n</section>\n\n<!-- FOOTER -->\n<footer>\n  <div class=\"wrap\">\n    <div class=\"foot-grid\">\n      <div>\n        <div class=\"brandlock\"><span class=\"sunhost\" style=\"width:30px;height:30px;color:var(--gold)\"></span> Good Morning</div>\n        <div class=\"tagline deva\">शुरुआत आपसे।</div>\n        <p class=\"blurb\">Building India's Morning Brand. Bread, rusk, biscuits and namkeen for the first hour of every day.</p>\n      </div>\n      <div><h4>Brand</h4><ul><li><a href=\"good-morning-about.html#story\">Our Story</a></li><li><a href=\"good-morning-about.html#philosophy\">Philosophy</a></li><li><a href=\"good-morning-about.html#leadership\">Leadership</a></li><li><a href=\"good-morning-about.html#milestones\">Milestones</a></li></ul></div>\n      <div><h4>Products</h4><ul><li><a href=\"#bread\">Bread</a></li><li><a href=\"#rusk\">Rusk</a></li><li><a href=\"#biscuits\">Biscuits</a></li><li><a href=\"#namkeen\">Namkeen</a></li><li><a href=\"#finder\">Product Finder</a></li></ul></div>\n      <div><h4>Connect</h4><ul><li><a href=\"good-morning-homepage.html#partners\">Distributors</a></li><li><a href=\"good-morning-homepage.html#partners\">Exports</a></li><li><a href=\"good-morning-homepage.html#cafe\">Café</a></li><li><a href=\"good-morning-contact.html\">Contact</a></li></ul></div>\n    </div>\n    <div class=\"fbot\"><span>© 2026 Good Morning®. All rights reserved.</span><span>Design by Black✳cherie agency</span></div>\n  </div>\n</footer>\n\n<!-- DESIGN NOTE -->\n<section class=\"specnote\">\n  <div class=\"wrap\">\n    <div class=\"the\">design note · not part of the live page</div>\n    <h2 style=\"font-family:var(--disp);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem)\">Products, told as rituals — not a catalogue.</h2>\n    <div class=\"rows\">\n      <div class=\"r\"><div class=\"rk\">Role</div><div class=\"rvv\">Build trust</div></div>\n      <div class=\"r\"><div class=\"rk\">Objective</div><div class=\"rvv\">Help people understand the brand</div></div>\n      <div class=\"r\"><div class=\"rk\">Primary message</div><div class=\"rvv\">Making Every Morning Better.</div></div>\n      <div class=\"r\"><div class=\"rk\">Finder logic</div><div class=\"rvv\">Sorts by moment, not by SKU</div></div>\n      <div class=\"r never\" style=\"grid-column:1/-1\"><div class=\"rk\">Never (deliberately absent)</div><div class=\"rvv\">Prices · Discounts · “Buy Now” · Limited stock · Campaign headlines · Product-as-hero copy</div></div>\n    </div>\n    <p style=\"margin-top:16px;opacity:.7\">Per the Communication Decision System, the website's job is trust, not purchase — retail POS triggers purchase. So products here are described through the ritual they belong to, with people as the hero. Delete this note before launch.</p>\n  </div>\n</section>\n\n<script>\n  const sunT=document.getElementById('sunT'), glyphT=document.getElementById('glyphT');\n  document.querySelectorAll('.sunhost').forEach(h=>h.appendChild(sunT.content.cloneNode(true)));\n  document.querySelectorAll('.fpo').forEach(f=>{\n    f.appendChild(glyphT.content.cloneNode(true));\n    const t=document.createElement('span'); t.className='tag'; t.textContent='FPO'; f.appendChild(t);\n    if(f.dataset.cap){const c=document.createElement('span');c.className='cap';c.textContent=f.dataset.cap;f.appendChild(c);}\n  });\n\n  const nav=document.getElementById('nav');\n  addEventListener('scroll',()=>nav.classList.toggle('stuck',scrollY>10),{passive:true});\n  const burger=document.getElementById('burger'), drawer=document.getElementById('drawer');\n  burger.addEventListener('click',()=>{burger.classList.toggle('open');drawer.classList.toggle('open')});\n  drawer.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{burger.classList.remove('open');drawer.classList.remove('open')}));\n\n  const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('seen')}),{threshold:0.1});\n  document.querySelectorAll('section, header').forEach(s=>io.observe(s));\n\n  // rail scrollspy\n  const rail=document.getElementById('rail');\n  const railLinks=[...rail.querySelectorAll('a')];\n  const targets=railLinks.map(a=>document.querySelector(a.getAttribute('href'))).filter(Boolean);\n  function spy(){\n    const line=scrollY+72+90; let cur=targets[0];\n    for(const t of targets){ if(t.offsetTop<=line) cur=t; }\n    railLinks.forEach(a=>{\n      const on=a.getAttribute('href')==='#'+cur.id;\n      a.classList.toggle('active',on);\n      if(on && rail.querySelector('.in').scrollWidth>rail.clientWidth) a.scrollIntoView({inline:'center',block:'nearest',behavior:'smooth'});\n    });\n  }\n  addEventListener('scroll',spy,{passive:true}); addEventListener('resize',spy); spy();\n\n  /* ---------- PRODUCT FINDER ---------- */\n  const PRODUCTS=[\n    {n:'White Bread',c:'Bread',d:'The everyday loaf, for toast and tiffin.',moment:['breakfast','tiffin'],who:['family','kids'],kind:[]},\n    {n:'Brown Bread',c:'Bread',d:'Wholesome and hearty, for a fuller morning.',moment:['breakfast'],who:['family'],kind:['wholesome']},\n    {n:'Sandwich Bread',c:'Bread',d:'Wider slices, made for the tiffin box.',moment:['tiffin','evening'],who:['kids','family'],kind:[]},\n    {n:'Milk Bread',c:'Bread',d:'Soft, slightly sweet — a favourite with children.',moment:['breakfast'],who:['kids'],kind:[]},\n    {n:'Premium Range',c:'Bread',d:'Smaller batches, select ingredients, finer bakes.',moment:['breakfast'],who:['guests','family'],kind:['premium']},\n    {n:'Classic Rusk',c:'Rusk',d:'Crisp enough to dip, sturdy enough to last.',moment:['chai','evening'],who:['family'],kind:[]},\n    {n:'Elaichi Rusk',c:'Rusk',d:'A little cardamom for a slower chai.',moment:['chai'],who:['guests','family'],kind:[]},\n    {n:'Suji Rusk',c:'Rusk',d:'Traditional, wholesome, and made to last.',moment:['chai','evening'],who:['family'],kind:['wholesome']},\n    {n:'Premium Rusk',c:'Rusk',d:'For the chai you serve when someone visits.',moment:['chai'],who:['guests'],kind:['premium']},\n    {n:'Glucose Biscuits',c:'Biscuits',d:'The first biscuit most children remember.',moment:['chai','tiffin'],who:['kids'],kind:[]},\n    {n:'Marie Biscuits',c:'Biscuits',d:'Light, familiar, and always on the shelf.',moment:['chai'],who:['family'],kind:['wholesome']},\n    {n:'Cream Biscuits',c:'Biscuits',d:'Small moments, shared at any hour.',moment:['tiffin','evening'],who:['kids'],kind:[]},\n    {n:'Cookies',c:'Biscuits',d:'A little richer, for when the day slows down.',moment:['evening','chai'],who:['guests','family'],kind:['premium']},\n    {n:'Traditional Mixture',c:'Namkeen',d:'The family ritual, in a bowl.',moment:['evening'],who:['family','guests'],kind:['savoury']},\n    {n:'Sev',c:'Namkeen',d:'Simple, savoury, endlessly shareable.',moment:['evening'],who:['family'],kind:['savoury']},\n    {n:'Regional Favourites',c:'Namkeen',d:'Because every family has its own ritual.',moment:['evening','chai'],who:['guests','family'],kind:['savoury']}\n  ];\n  const state={moment:'all',who:'all',kind:'all'};\n  const grid=document.getElementById('fgrid'), count=document.getElementById('fcount');\n\n  function match(p){\n    return (state.moment==='all'||p.moment.includes(state.moment))\n        && (state.who==='all'||p.who.includes(state.who))\n        && (state.kind==='all'||p.kind.includes(state.kind));\n  }\n  function render(){\n    const res=PRODUCTS.filter(match);\n    grid.innerHTML = res.length ? res.map((p,i)=>\n      `<div class=\"fcard\" style=\"animation-delay:${i*45}ms\"><div class=\"fn\">${p.n}</div><div class=\"fc\">${p.c}</div><div class=\"fd\">${p.d}</div></div>`\n    ).join('') : `<div class=\"fempty\" style=\"grid-column:1/-1\">No exact match — but every morning has something. Try widening a choice above.</div>`;\n    const isAll = state.moment==='all'&&state.who==='all'&&state.kind==='all';\n    count.textContent = isAll ? `Showing all ${res.length} products` : `${res.length} product${res.length===1?'':'s'} for this morning`;\n  }\n  document.querySelectorAll('.chip').forEach(c=>c.addEventListener('click',()=>{\n    const f=c.dataset.f;\n    document.querySelectorAll(`.chip[data-f=\"${f}\"]`).forEach(x=>x.classList.remove('on'));\n    c.classList.add('on'); state[f]=c.dataset.v; render();\n  }));\n  document.getElementById('freset').addEventListener('click',()=>{\n    state.moment='all';state.who='all';state.kind='all';\n    document.querySelectorAll('.chip').forEach(x=>x.classList.toggle('on',x.dataset.v==='all'));\n    render();\n  });\n  render();\n</script>\n</body>\n</html>","embedURL":""}}},"assetIdToGuid":{},"guidToUrl":{"0:3":"/","1:23":"/about","6:23":"/product-portfolio","8:7":"/our-impact","8:28":"/distributor","8:49":"/career","8:70":"/contact","18:7":"/sitemap"},"fonts":{},"assets":{},"stablePathToAssetInfo":{},"animateRootIds":[],"siteSettings":{"scalingMode":"REFLOW","blockSearchIndexing":true,"labs":{"E5FBBA911B2B7A09E649D4BE6CDF8591EAEFC881":false},"title":"Good Morning Web Wireframe - Product portfolio"},"sourceCodeHash":""}