/* ==========================================================================
   Sobisco Fresh site stylesheet
   Brand red #ED1C24 · light, clean, vibrant, premium
   ========================================================================== */

:root{
  /* --- palette --- */
  --paper:        #FFFCF7;   /* page base, warm bakery paper */
  --paper-2:      #F8EFE1;   /* alternating band */
  --surface:      #FFFFFF;   /* cards */
  --ink:          #2C211B;   /* warm espresso, used instead of black */
  --ink-soft:     #6E5B4E;   /* body / secondary */
  --red:          #ED1C24;   /* Sobisco brand red */
  --cocoa-1:      #2E2018;   /* deep espresso, band base    */
  --cocoa-2:      #4A2F1C;   /* cocoa, headings and figures */
  --cocoa-3:      #7A4A22;   /* caramel, band highlight     */
  --gold:         #B08430;   /* premium detailing */
  --red-bright:   #F4442B;   /* vibrant brand accent, for gradients */
  --ember:        #F5732E;   /* warm highlight in gradients */
  --cream-1:      #FFF7EE;   /* footer gradient, top */
  --cream-2:      #FBE6D3;   /* footer gradient, middle */
  --cream-3:      #F6D5BE;   /* footer gradient, base */
  --line:         rgba(44,33,27,.12);
  --shadow-sm:    0 10px 24px -16px rgba(80,30,20,.45);
  --shadow:       24px 30px 60px -32px rgba(80,30,20,.40);

  --maxw: 1240px;
  --nav-h: 78px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 52px + env(safe-area-inset-top,0px));
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces","Georgia",serif;font-weight:600;line-height:1.1;margin:0;letter-spacing:-.012em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
ul{margin:0;padding:0;list-style:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.sec{padding:88px 0;}
.sec-tight{padding:60px 0;}
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;border-radius:5px;
}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--red);color:#fff;padding:10px 16px;border-radius:8px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:16px;padding:14px 28px;border-radius:999px;
  border:none;cursor:pointer;font-family:inherit;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.btn svg{width:18px;height:18px;flex:none;}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 14px 30px -14px var(--red);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px var(--red);}
.btn-ghost{border:1.6px solid var(--ink);color:var(--ink);background:transparent;}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn-light{border:1.6px solid rgba(255,255,255,.55);color:#FFF4E7;background:transparent;}
.btn-light:hover{background:#FFF4E7;color:var(--cocoa-1);}

/* ---------- top utility bar ---------- */
.topbar{
  background:linear-gradient(100deg,#D81920 0%,var(--red) 42%,var(--red-bright) 100%);
  color:#FFF2EA;font-size:13.5px;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px;flex-wrap:wrap;}
.topbar .menus{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.topbar .menus a{font-weight:700;letter-spacing:.012em;}
.topbar .menus .lbl{opacity:.76;font-weight:500;}
.topbar a{opacity:.94;transition:opacity .25s ease,color .25s ease;}
.topbar a:hover{opacity:1;color:#fff;text-decoration:underline;text-underline-offset:3px;}
.topbar .rt{display:flex;gap:20px;align-items:center;}
@media(max-width:760px){.topbar .rt{display:none;}}

/* ---------- navigation ---------- */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:rgba(255,252,247,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease;
}
.nav.is-scrolled{border-bottom-color:var(--line);background:rgba(255,252,247,.96);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--nav-h);}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:50px;width:auto;}
.navlinks{display:flex;align-items:center;gap:32px;}
.navlinks > li > a{font-weight:600;font-size:15.5px;position:relative;padding:6px 0;display:inline-block;}
.navlinks > li > a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .3s ease;}
.navlinks > li > a:hover::after,.navlinks > li > a[aria-current="page"]::after{right:0;}
.navlinks .navcta{
  background:var(--red);color:#fff;font-weight:700;padding:11px 22px;border-radius:999px;
  box-shadow:0 10px 22px -12px var(--red);transition:transform .2s ease;
}
.navlinks .navcta::after{display:none;}
.navlinks .navcta:hover{transform:translateY(-1px);}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;color:var(--ink);}
.burger svg{width:24px;height:24px;}

@media(max-width:980px){
  /* The panel used to be slid up out of sight by a large translate, which
     meant it flew a long way on every open and its links stayed reachable by
     keyboard while closed. It now fades and drops a short distance, is taken
     out of the tab order when shut, and the items arrive one after another. */
  .navlinks{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:6px 24px 22px;box-shadow:0 26px 40px -24px rgba(80,30,20,.5);
    transform-origin:top center;
    opacity:0;visibility:hidden;
    transform:translateY(-10px) scaleY(.97);
    transition:opacity .26s ease, transform .3s cubic-bezier(.2,.8,.3,1),
               visibility 0s linear .3s;
  }
  .navlinks.is-open{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .26s ease, transform .34s cubic-bezier(.2,.8,.3,1.1),
               visibility 0s;
  }

  .navlinks > li{
    opacity:0;transform:translateY(-8px);
    transition:opacity .26s ease, transform .3s cubic-bezier(.2,.8,.3,1.2);
  }
  .navlinks.is-open > li{opacity:1;transform:none;}
  .navlinks.is-open > li:nth-child(1){transition-delay:.04s}
  .navlinks.is-open > li:nth-child(2){transition-delay:.08s}
  .navlinks.is-open > li:nth-child(3){transition-delay:.12s}
  .navlinks.is-open > li:nth-child(4){transition-delay:.16s}
  .navlinks.is-open > li:nth-child(5){transition-delay:.20s}
  .navlinks.is-open > li:nth-child(6){transition-delay:.24s}

  .nav{position:sticky;}
  .nav .wrap{position:relative;}
  .navlinks > li > a{padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;display:block;}
  .navlinks > li > a::after{display:none;}
  .navlinks .navcta{text-align:center;margin-top:16px;padding:14px;border-bottom:none;}
  .burger{display:inline-flex;position:relative;transition:color .2s ease;}
  .burger svg{transition:opacity .22s ease, transform .32s cubic-bezier(.2,.8,.3,1.3);}
  .burger .ico-close{position:absolute;inset:0;margin:auto;opacity:0;transform:rotate(-90deg) scale(.7);}

  /* Dimmed backdrop, drawn by the header so it needs no extra markup.
     A tap anywhere outside closes the menu; that is wired up in main.js. */
  .nav::after{
    content:"";position:fixed;left:0;right:0;bottom:0;top:100%;
    background:rgba(28,18,14,.42);
    opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:-1;
  }
  .nav.menu-open::after{opacity:1;}
  .nav.menu-open .burger{color:var(--red);}
  .nav.menu-open .ico-open{opacity:0;transform:rotate(90deg) scale(.7);}
  .nav.menu-open .ico-close{opacity:1;transform:rotate(0) scale(1);}
}

@media (prefers-reduced-motion:reduce){
  .navlinks,.navlinks > li,.burger svg,.nav::after{transition:none !important;}
}

/* ---------- headings & shared bits ---------- */
.eyebrow{color:var(--gold);font-weight:700;font-size:14px;margin-bottom:14px;}
.eyebrow.red{color:var(--red);}
.sec-head{max-width:640px;margin:0 auto;text-align:center;}
.sec-head h2{font-size:clamp(30px,4vw,46px);}
.sec-head p{margin-top:16px;color:var(--ink-soft);font-size:18px;}
.lead{color:var(--ink-soft);font-size:18.5px;max-width:58ch;}

.page-head{background:var(--paper-2);border-bottom:1px solid var(--line);}
.page-head .wrap{padding:60px 24px 64px;text-align:center;}
.page-head h1{font-size:clamp(34px,5.2vw,58px);}
.page-head p{margin:18px auto 0;color:var(--ink-soft);max-width:60ch;font-size:18px;}
.crumbs{
  font-size:12.5px;font-weight:500;letter-spacing:.015em;
  color:rgba(110,91,78,.7);margin-bottom:38px;
}
.crumbs a{transition:color .25s ease;}
.crumbs a:hover{color:var(--red);}
.crumbs span{opacity:.45;}
.crumbs span{opacity:.5;margin:0 8px;}

/* ---------- hero (home) ---------- */
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-top:60px;padding-bottom:76px;}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--cocoa-3);font-weight:700;font-size:14px;margin-bottom:22px;}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;}
.hero h1{font-size:clamp(40px,5.8vw,66px);}
.hero h1 em{font-style:italic;font-weight:500;color:var(--red);}
.hero .lead{margin-top:22px;}
.hero .actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}
.proof{margin-top:38px;display:flex;gap:30px;flex-wrap:wrap;color:var(--ink-soft);font-size:14.5px;font-weight:600;}
.proof b{display:block;font-family:"Fraunces",serif;font-size:27px;color:var(--ink);line-height:1;margin-bottom:5px;font-weight:600;}

/* hero collage of real product photography */
.hero-art{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;}
.hero-art figure{margin:0;border-radius:22px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow);}
.hero-art img{width:100%;height:100%;object-fit:cover;}
.hero-art .tall{grid-row:span 2;aspect-ratio:3/4.35;}
.hero-art .sq{aspect-ratio:1/1;}
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:38px;padding-top:44px;padding-bottom:56px;}
  .hero-art{max-width:540px;margin:0 auto;width:100%;}
}

/* ---------- stats / legacy ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px;}}
.split h2{font-size:clamp(28px,3.6vw,42px);}
.split p{margin-top:18px;color:var(--ink-soft);max-width:54ch;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;}
.stat b{display:block;font-family:"Fraunces",serif;font-size:38px;font-weight:600;line-height:1;color:var(--cocoa-2);}
.stat span{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-soft);font-weight:600;}

/* ---------- category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px;}
.cat{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;
}
.cat:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.cat .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);}
.cat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cat:hover .ph img{transform:scale(1.06);}
.cat .bd{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.cat .bd h3{font-size:21px;}
.cat .bd p{margin-top:9px;color:var(--ink-soft);font-size:15px;flex:1;}
.cat .bd .go{margin-top:16px;font-weight:700;font-size:14.5px;color:var(--red);display:inline-flex;align-items:center;gap:8px;}
.cat .bd .go svg{width:16px;height:16px;transition:transform .25s ease;}
.cat:hover .bd .go svg{transform:translateX(4px);}
.cat.tile{background:var(--red);border-color:var(--red);color:#fff;justify-content:center;text-align:center;}
.cat.tile h3{color:#fff;font-size:25px;}
.cat.tile p{color:#FCDED8;flex:none;margin-top:12px;}
.cat.tile .go{color:#fff;margin-top:20px;justify-content:center;}
@media(max-width:1080px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:820px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr;}}

/* ---------- product grid ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.prod{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;
}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.prod .ph{aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);position:relative;}
.prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.prod:hover .ph img{transform:scale(1.05);}
.prod .tag{
  position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:var(--cocoa-2);
  font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:6px 11px;border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.prod .bd{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;}
.prod .bd h3{font-size:18px;line-height:1.24;}
.prod .bd p{margin-top:8px;font-size:14.5px;color:var(--ink-soft);}
@media(max-width:1080px){.prod-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:820px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.prod-grid{grid-template-columns:1fr;}}

/* ---------- category section (products page) ---------- */
.catsec{padding:78px 0;border-top:1px solid var(--line);}
.catsec:first-of-type{border-top:none;}
.catsec.alt{background:var(--paper-2);}
.catsec .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap;}
.catsec .hd h2{font-size:clamp(27px,3.4vw,38px);}
.catsec .hd p{margin-top:12px;color:var(--ink-soft);max-width:56ch;}
.catsec .hd .count{color:var(--ink-soft);font-size:14.5px;font-weight:700;white-space:nowrap;}

/* sticky category filter bar */
.filterbar{
  position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:40;
  background:rgba(255,252,247,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.filterbar .wrap{display:flex;gap:10px;overflow-x:auto;padding-top:14px;padding-bottom:14px;scrollbar-width:thin;}
.filterbar a{
  white-space:nowrap;font-weight:600;font-size:14.5px;padding:9px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filterbar a:hover{border-color:var(--red);color:var(--red);}
.filterbar a.active{background:var(--red);border-color:var(--red);color:#fff;}

/* ---------- signature / red band ---------- */
/* Warm cocoa gradient. A deep red field reads as a non-veg marker in
   India; Sobisco Fresh serves both, so the band uses the bakery's own
   espresso-to-caramel range instead. */
.signature{
  position:relative;overflow:hidden;
  background:
    radial-gradient(680px 380px at 88% -12%,rgba(176,132,48,.22),transparent 64%),
    linear-gradient(135deg,var(--cocoa-1) 0%,var(--cocoa-2) 48%,var(--cocoa-3) 100%);
  color:#F3E4D3;
}
.signature > *{position:relative;z-index:1;}
.signature h2{color:#FFF8EF;font-size:clamp(28px,3.6vw,42px);}
.signature p{color:#EBD8C4;}
.signature .eyebrow{color:#EFC79A;}
.feature-list{display:grid;gap:14px;}
.feature{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:18px 20px;}
.feature .ic{width:44px;height:44px;flex:none;border-radius:12px;background:#FCEFE0;display:flex;align-items:center;justify-content:center;}
.feature .ic svg{width:24px;height:24px;color:var(--red);}
.feature b{display:block;font-family:"Fraunces",serif;font-size:18px;color:#FFF8EF;}
.feature span{font-size:14.5px;color:#E3CDB7;}

/* ---------- outlets ---------- */
.outlet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.outlet{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;
  display:flex;flex-direction:column;gap:12px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.outlet:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(237,28,36,.35);}
.outlet-head{display:flex;align-items:center;gap:13px;}
.outlet .pin{width:38px;height:38px;border-radius:50%;background:#FDE7E7;display:flex;align-items:center;justify-content:center;flex:none;}
.outlet .pin svg{width:20px;height:20px;color:var(--red);}
.outlet h3{font-size:21px;}
.outlet address{font-style:normal;color:var(--ink-soft);font-size:15px;line-height:1.55;flex:1;}
.outlet .links{display:flex;gap:16px;flex-wrap:wrap;font-weight:700;font-size:14.5px;padding-top:6px;border-top:1px solid var(--line);}
.outlet .links a{color:var(--red);display:inline-flex;align-items:center;gap:7px;}
.outlet .links svg{width:15px;height:15px;}
@media(max-width:980px){.outlet-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.outlet-grid{grid-template-columns:1fr;}}

.mapframe{border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--paper-2);}
.mapframe iframe{display:block;width:100%;height:440px;border:0;}

/* ---------- menus ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;}
.menu-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:13px;transition:transform .25s ease,box-shadow .25s ease;}
.menu-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.menu-card .ic{width:52px;height:52px;border-radius:14px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;}
.menu-card .ic svg{width:28px;height:28px;color:var(--red);}
.menu-card h3{font-size:22px;}
.menu-card p{color:var(--ink-soft);font-size:15px;flex:1;}
.menu-card .dl{font-weight:700;color:var(--red);font-size:15px;display:inline-flex;align-items:center;gap:8px;}
.menu-card .dl svg{width:16px;height:16px;}
@media(max-width:860px){.menu-grid{grid-template-columns:1fr;}}

/* ---------- story page ---------- */
.story-img{border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2);}
.story-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
.value{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;}
.value .ic{width:48px;height:48px;border-radius:13px;background:#FDE7E7;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.value .ic svg{width:25px;height:25px;color:var(--red);}
.value h3{font-size:21px;}
.value p{margin-top:10px;color:var(--ink-soft);font-size:15.5px;}
@media(max-width:860px){.values{grid-template-columns:1fr;}}

.timeline{margin-top:50px;display:grid;gap:0;}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--line);}
.tl-item:last-child{border-bottom:1px solid var(--line);}
.tl-item .yr{font-family:"Fraunces",serif;font-size:27px;font-weight:600;color:var(--red);line-height:1;}
.tl-item h3{font-size:20px;}
.tl-item p{margin-top:8px;color:var(--ink-soft);}
@media(max-width:620px){.tl-item{grid-template-columns:1fr;gap:10px;}}

/* ---------- gallery strip ---------- */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.strip figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:var(--paper-2);}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.strip figure:hover img{transform:scale(1.07);}
@media(max-width:900px){.strip{grid-template-columns:repeat(3,1fr);}}

/* ---------- video grid ---------- */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;}
/* (a malformed rule sat here: ".vid:hover @media(...)" is not a valid
   selector, so the browser threw the whole line away. The video grid is
   laid out in the VIDEO section further down.) */

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:34px;}}
.info-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;}
.info-card + .info-card{margin-top:18px;}
.info-card h3{font-size:20px;margin-bottom:14px;}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:11px 0;}
.info-row .ic{width:38px;height:38px;border-radius:10px;background:#FDE7E7;display:flex;align-items:center;justify-content:center;flex:none;}
.info-row .ic svg{width:19px;height:19px;color:var(--red);}
.info-row b{display:block;font-size:14px;color:var(--ink-soft);font-weight:700;}
.info-row a,.info-row span{font-size:16px;}
.info-row a:hover{color:var(--red);}

.form{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow-sm);}
.form h2{font-size:28px;}
.form > p{margin-top:12px;color:var(--ink-soft);}
.field{margin-top:20px;}
.field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  transition:border-color .2s ease,background .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);background:#fff;}
.field textarea{min-height:140px;resize:vertical;}
.form .note{margin-top:16px;font-size:13.5px;color:var(--ink-soft);}
.form .btn{margin-top:22px;}

/* ---------- footer ---------- */
/* Warm gradient footer. The surface is light so the Sobisco Fresh and
   Ascent marks sit directly on it at full contrast,
   with no white plate behind either logo. */
.foot{
  position:relative;
  background:
    radial-gradient(760px 420px at 88% -10%,rgba(237,28,36,.13),transparent 62%),
    radial-gradient(620px 380px at 4% 108%,rgba(176,132,48,.16),transparent 66%),
    linear-gradient(168deg,var(--cream-1) 0%,var(--cream-2) 52%,var(--cream-3) 100%);
  color:var(--ink-soft);
}
.foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--red) 0%,var(--ember) 48%,var(--gold) 100%);
}
.foot .wrap{padding:70px 24px 30px;}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr;gap:34px;}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr;}}
.foot .brand img{height:66px;width:auto;transition:transform .35s ease;}
.foot .brand:hover img{transform:scale(1.04);}
.foot .tag{margin-top:20px;max-width:40ch;color:var(--ink-soft);font-size:15px;}
.foot h4{font-family:"Mulish",sans-serif;font-weight:800;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 16px;}
.foot li{margin-bottom:10px;}
.foot li a{font-size:15.5px;color:var(--ink);opacity:.86;transition:color .25s ease,opacity .25s ease,padding-left .3s ease;}
.foot li a:hover{color:var(--cocoa-2);opacity:1;padding-left:5px;}
.socials{margin-top:22px;display:flex;gap:11px;}
.socials a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(44,33,27,.16);background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease,transform .3s ease;}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px);}
.socials svg{width:19px;height:19px;color:var(--ink);transition:color .3s ease;}
.socials a:hover svg{color:#fff;}
/* Bottom row sits directly on the footer gradient, separated from the
   main footer content by a single hairline rule. */
.foot-bottom{
  margin-top:50px;padding-top:24px;
  border-top:1px solid rgba(44,33,27,.16);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
  font-size:13.5px;color:var(--ink-soft);
}

/* "Powered by Ascent" credit. The mark sits directly on the footer
   gradient; use the -g variant only on a dark surface. */
.foot-bottom .ascent{display:inline-flex;align-items:center;line-height:0;}
.foot-bottom .ascent img{
  height:32px;width:auto;display:block;opacity:.8;
  transition:opacity .25s ease,transform .25s ease;
}
.foot-bottom .ascent:hover img,
.foot-bottom .ascent:focus-visible img{opacity:1;transform:translateY(-2px);}
@media(max-width:560px){
  .foot-bottom{justify-content:center;text-align:center;gap:16px;padding-top:22px;}
}

/* ---------- back to top ---------- */
.totop{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;
  width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.totop.show{opacity:1;visibility:visible;transform:none;}
.totop svg{width:20px;height:20px;}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
  .reveal.d1{animation-delay:.08s}
  .reveal.d2{animation-delay:.16s}
  .reveal.d3{animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none;}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}

/* ==========================================================================
   MOBILE OPTIMISATION
   Appended last so it overrides the desktop rules above.
   Targets the three things that made phones scroll excessively:
     1. section padding never reduced below desktop values
     2. category grid collapsing to one column under 520px
     3. product grid collapsing to one column under 460px (68 items)
   ========================================================================== */

/* ---------- tablets and large phones ---------- */
@media(max-width:820px){
  .wrap{padding:0 20px;}

  /* section heights */
  .sec{padding:54px 0;}
  .sec-tight{padding:36px 0;}
  .catsec{padding:46px 0;}
  .page-head .wrap{padding:40px 20px 42px;}
  .foot .wrap{padding:48px 20px 24px;}
  .legacy .wrap{padding:54px 20px;}
  .signature .wrap{padding:54px 20px;}
  .outlets .wrap,.menus-sec .wrap{padding-top:0;padding-bottom:0;}

  /* type scale */
  .hero h1{font-size:clamp(31px,7.4vw,44px);}
  .page-head h1{font-size:clamp(27px,6.2vw,40px);}
  .sec-head h2{font-size:clamp(25px,5.4vw,34px);}
  .split h2,.signature h2,.outlets h2{font-size:clamp(24px,5vw,32px);}
  .catsec .hd h2{font-size:clamp(23px,4.8vw,30px);}
  .sec-head p{font-size:16.5px;margin-top:12px;}
  .lead{font-size:17px;}
  .hero .lead{margin-top:16px;}

  /* grid rhythm */
  .cat-grid,.prod-grid,.outlet-grid,.menu-grid,.values,.vid-grid{gap:14px;}
  .cat-grid,.menu-grid,.values,.vid-grid{margin-top:32px;}
  .strip{gap:8px;}
  .stats{gap:12px;}
  .split{gap:28px;}

  /* card padding */
  .stat{padding:18px;}
  .stat b{font-size:30px;}
  .menu-card,.value{padding:24px;}
  .outlet{padding:22px;}
  .form{padding:24px;}
  .info-card{padding:22px;}
  .proof{margin-top:26px;gap:22px;}
  .proof b{font-size:23px;}

  /* controls */
  .btn{padding:13px 24px;font-size:15.5px;}
  .hero .actions{margin-top:26px;}
  .mapframe iframe{height:300px;}
  .filterbar .wrap{padding-top:10px;padding-bottom:10px;}
  .filterbar a{padding:8px 15px;font-size:14px;}
  .crumbs{margin-bottom:26px;}
}

/* ---------- phones ---------- */
@media(max-width:600px){
  /* keep two columns: one column turns 68 products into 68 full-width blocks */
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px;}

  .sec{padding:42px 0;}
  .sec-tight{padding:28px 0;}
  .catsec{padding:34px 0;}
  .catsec .hd{margin-bottom:22px;}
  .page-head .wrap{padding:30px 20px 32px;}
  .legacy .wrap,.signature .wrap{padding:42px 20px;}
  .foot .wrap{padding:40px 20px 22px;}

  /* product cards: compact, description trimmed to two lines */
  .prod .bd{padding:12px 13px 15px;}
  .prod .bd h3{font-size:15px;line-height:1.24;}
  .prod .bd p{
    margin-top:6px;font-size:13px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-clamp:2;overflow:hidden;
  }
  .prod .tag{font-size:10px;padding:5px 9px;left:9px;top:9px;}

  /* category cards */
  .cat .bd{padding:14px 15px 17px;}
  .cat .bd h3{font-size:17px;}
  .cat .bd p{
    margin-top:6px;font-size:13px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-clamp:2;overflow:hidden;
  }
  .cat .bd .go{margin-top:11px;font-size:13.5px;}
  .cat.tile h3{font-size:19px;}
  .cat.tile .bd{padding:20px 16px;}

  /* hero collage */
  .hero .wrap{padding-top:26px;padding-bottom:34px;gap:24px;}
  .hero-art{max-width:400px;gap:10px;}
  .hero-art .tall{aspect-ratio:3/3.7;}
  .hero-art figure{border-radius:16px;}

  /* everything else */
  .sec-head p{font-size:16px;}
  .menu-card,.value{padding:20px;}
  .menu-card h3,.value h3,.outlet h3{font-size:18.5px;}
  .outlet{padding:18px;gap:9px;}
  .outlet address{font-size:14px;}
  .stat{padding:15px;}
  .stat b{font-size:26px;}
  .stat span{font-size:13.5px;}
  .form{padding:20px;}
  .form h2{font-size:23px;}
  .fr input,.fr select,.fr textarea{padding:12px 13px;font-size:16px;}
  .mapframe iframe{height:250px;}
  .foot-top{gap:26px;}
  .totop{width:42px;height:42px;right:16px;}
  .totop svg{width:18px;height:18px;}
  .strip figure{border-radius:11px;}
  .vid-grid{margin-top:26px;}
}

/* ---------- small phones ---------- */
@media(max-width:400px){
  .wrap{padding:0 16px;}
  .prod-grid,.cat-grid{gap:10px;}
  .prod .bd{padding:10px 11px 13px;}
  .prod .bd h3{font-size:14px;}
  .prod .bd p{font-size:12.5px;}
  .cat .bd{padding:12px 13px 15px;}
  .cat .bd h3{font-size:16px;}
  .sec{padding:36px 0;}
  .catsec{padding:30px 0;}
  .hero h1{font-size:clamp(28px,8.4vw,36px);}
  .filterbar a{padding:7px 13px;font-size:13.5px;}
}

/* Font size on form fields stays at 16px on phones: anything smaller makes
   iOS Safari zoom the viewport when the field is focused. */

/* ==========================================================================
   VIDEO - YouTube Shorts embeds
   Real iframes in the markup, no JavaScript: the player shows its own poster
   and starts on click. Containers use the 9:16 Shorts ratio.
   ========================================================================== */
.vid-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin-top:46px;justify-items:center;
}
.vid{margin:0;width:100%;max-width:330px;}
.vid-frame{
  position:relative;aspect-ratio:9/16;width:100%;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#161010;
  box-shadow:var(--shadow-sm);
  transition:transform .4s ease,box-shadow .4s ease;
}
.vid:hover .vid-frame{transform:translateY(-4px);box-shadow:var(--shadow);}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.vid figcaption{
  margin-top:13px;text-align:center;
  font-weight:700;font-size:15px;line-height:1.35;color:var(--ink);
}

@media(max-width:820px){
  .vid-grid{gap:16px;margin-top:32px;}
  .vid{max-width:270px;}
  .vid figcaption{font-size:14px;margin-top:10px;}
}

/* On phones the three Shorts become a swipeable row rather than a very tall
   stacked column. */
@media(max-width:600px){
  .vid-grid{
    display:flex;gap:12px;margin-top:26px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .vid-grid::-webkit-scrollbar{display:none;}
  .vid{flex:0 0 62%;max-width:none;scroll-snap-align:start;}
  .vid-frame{border-radius:16px;}
}
@media(max-width:400px){
  .vid{flex-basis:70%;}
}

/* ==========================================================================
   CONTACT FORM STATES

   Field-level errors, the honeypot, and the thank-you panel that replaces
   the form once a message has actually been sent.
   ========================================================================== */
.form .formnote{
  border-radius:10px;padding:12px 15px;margin:0 0 22px;
  font-size:14.5px;line-height:1.55;border:1px solid;
}
.form .formnote.is-error{background:#FDECEA;border-color:#F3C9C4;color:#98281D;}
.form .formnote.is-warn{background:#FBF3D8;border-color:#ECDCA0;color:#7A5E00;}
.form .formnote a{color:inherit;text-decoration:underline;}

.form .field .err{
  display:block;margin-top:6px;font-size:13.5px;color:#B42318;font-weight:600;
}
.form .field.has-error input,
.form .field.has-error textarea,
.form .field.has-error select{border-color:#D9534F;background:#FFFBFB;}
.form .field label .opt{
  font-weight:500;color:var(--ink-soft);font-size:13px;margin-left:5px;
}

/* Hidden from people and from screen readers. Only a script fills it in,
   and anything that does is dropped silently. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-done{text-align:left;}
.form-done .done-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#E7F6EC;color:#0A7D33;margin-bottom:20px;
}
.form-done .done-tick svg{width:28px;height:28px;}
.form-done h2{margin-bottom:12px;}
.form-done p{margin-bottom:12px;}
.form-done .btn + .btn{margin-left:10px;}

/* ==========================================================================
   OUTLET OPENING HOURS
   Only rendered for outlets that have confirmed hours in data.php.
   ========================================================================== */
.outlet .hours{
  display:flex;align-items:center;gap:7px;
  margin:10px 0 0;font-size:14px;font-weight:600;color:var(--cocoa-2);
}
.outlet .hours svg{width:16px;height:16px;flex:none;color:var(--red);}

/* ==========================================================================
   HERO, SECOND PASS

   Appended last, so everything here wins over the earlier hero rules.

   The brief was a bakery aimed at a young crowd, so this leans on warmth and
   movement rather than more photography: a soft colour wash behind the copy,
   a headline word that cycles through the range, photos tilted like they were
   dropped on a table, a rotating seal, and a counter ticker underneath.

   Nothing in here loads an extra image, and every animation is switched off
   under prefers-reduced-motion, which is handled in one block at the end.
   ========================================================================== */

/* ---------- hero shell ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;}
.hero .wrap{
  display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center;
  padding-top:64px;padding-bottom:88px;position:relative;z-index:2;
}

/* Soft colour wash. Three blurred shapes drifting very slowly, which gives
   the section depth without another photograph to download. */
.hero-glow{position:absolute;inset:-12% -6%;z-index:1;pointer-events:none;filter:blur(72px);opacity:.62;}
.hero-glow .blob{position:absolute;border-radius:50%;display:block;}
.hero-glow .blob-a{width:38vw;height:38vw;left:-6%;top:-12%;background:radial-gradient(circle,#FFD9A8,transparent 68%);animation:drift-a 22s ease-in-out infinite;}
.hero-glow .blob-b{width:32vw;height:32vw;right:2%;top:6%;background:radial-gradient(circle,#FFB3AE,transparent 68%);animation:drift-b 26s ease-in-out infinite;}
.hero-glow .blob-c{width:30vw;height:30vw;left:34%;bottom:-18%;background:radial-gradient(circle,#F7D9BC,transparent 70%);animation:drift-c 30s ease-in-out infinite;}
@keyframes drift-a{0%,100%{transform:translate(0,0)}50%{transform:translate(5%,6%)}}
@keyframes drift-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,4%)}}
@keyframes drift-c{0%,100%{transform:translate(0,0)}50%{transform:translate(4%,-6%)}}

/* ---------- headline ---------- */
.hero .kicker{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px 7px 13px;box-shadow:var(--shadow-sm);margin-bottom:26px;
}
.hero .kicker .dot{animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(237,28,36,.5)}70%{box-shadow:0 0 0 9px rgba(237,28,36,0)}}

/* Three deliberate lines. Letting the rotating word sit in the flow meant the
   line re-wrapped whenever a longer word came round, which threw the whole
   block about. Each line is its own block, so the shape never changes. */
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.015em;}
.hero h1 .h1-line{display:block;}
.hero h1 .h1-word{font-size:1.24em;line-height:1.12;margin:.04em 0 .06em;}

/* The cycling word. The track is as wide as the longest word so the rest of
   the line never shuffles sideways as it changes. */
.rotator{position:relative;display:inline-block;vertical-align:baseline;color:var(--red);}
.rotator-track{position:relative;display:inline-grid;justify-items:start;}
/* The outgoing word clears faster than the incoming one arrives, so the two
   are never both legible at once. Left-aligned in the cell so the underline
   always starts at the same place. */
.rotator em{
  grid-area:1/1;justify-self:start;
  font-style:italic;font-weight:600;white-space:nowrap;
  opacity:0;transform:translateY(.3em);
  transition:opacity .34s ease .1s, transform .38s cubic-bezier(.2,.8,.3,1.2) .1s;
}
.rotator em.is-on{opacity:1;transform:none;}
.rotator em.is-out{opacity:0;transform:translateY(-.3em);transition:opacity .16s ease, transform .22s ease;}

.hero .lead{margin-top:24px;font-size:19px;}
.hero .actions{margin-top:34px;}
.hero .btn-primary{box-shadow:0 14px 30px -14px rgba(237,28,36,.9);}
.hero .btn-primary:hover{transform:translateY(-2px);}

.proof b{font-size:34px;}

/* ---------- photos ---------- */
.hero-art{position:relative;display:block;aspect-ratio:1/1.02;max-width:560px;margin-left:auto;width:100%;}
.hero-art .shot{
  position:absolute;margin:0;border-radius:24px;overflow:hidden;
  background:var(--paper-2);box-shadow:0 34px 60px -30px rgba(80,30,20,.6);
  border:5px solid #fff;
}
.hero-art .shot img{width:100%;height:100%;object-fit:cover;display:block;}

/* Dropped on the table rather than lined up in a grid. */
.hero-art .shot-1{left:0;top:2%;width:57%;aspect-ratio:3/4;transform:rotate(-4deg);z-index:2;animation:bob 7s ease-in-out infinite;}
.hero-art .shot-2{right:0;top:0;width:44%;aspect-ratio:1/1;transform:rotate(5deg);z-index:3;animation:bob 8s ease-in-out .7s infinite;}
.hero-art .shot-3{right:4%;bottom:0;width:50%;aspect-ratio:1/1;transform:rotate(-3deg);z-index:1;animation:bob 9s ease-in-out 1.4s infinite;}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

.hero-art .shot{transition:transform .35s cubic-bezier(.2,.8,.3,1.2), box-shadow .35s ease;}
.hero-art .shot:hover{transform:rotate(0deg) scale(1.04);box-shadow:0 44px 70px -28px rgba(80,30,20,.65);z-index:6;}

/* ---------- rotating seal ---------- */
.seal{
  position:absolute;left:2%;bottom:6%;width:116px;height:116px;z-index:5;
  display:grid;place-items:center;
  background:var(--red);border-radius:50%;
  box-shadow:0 18px 34px -14px rgba(237,28,36,.8);
}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite;}
.seal text{font-family:"Mulish",sans-serif;font-size:10.4px;font-weight:800;letter-spacing:.14em;fill:#fff;}
.seal-mid{display:grid;place-items:center;width:40px;height:40px;color:#fff;}
.seal-mid svg{position:static;width:26px;height:26px;animation:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- floating chips ---------- */
.chip{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;font-size:13.5px;font-weight:700;color:var(--ink);
  box-shadow:0 16px 30px -16px rgba(80,30,20,.65);white-space:nowrap;
}
.chip i{width:8px;height:8px;border-radius:50%;background:#18a558;flex:none;}
.chip-1{left:-5%;top:26%;animation:bob 6s ease-in-out .3s infinite;}
.chip-2{right:-2%;bottom:24%;animation:bob 7.5s ease-in-out 1s infinite;}

/* ---------- counter ticker ---------- */
.ticker{
  background:var(--red);color:#fff;overflow:hidden;
  padding:13px 0;border-top:1px solid rgba(255,255,255,.18);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-row{display:flex;width:max-content;animation:slide 34s linear infinite;}
.ticker-set{display:flex;align-items:center;flex:none;}
.ticker-set span{
  font-family:"Fraunces",serif;font-weight:600;font-size:21px;
  padding:0 20px;white-space:nowrap;
}
.ticker-set i{font-style:normal;opacity:.6;font-size:13px;}
/* Two identical sets sit side by side, so when the first has scrolled fully
   out of view the second is exactly where it started. */
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* Pausing on hover is only meaningful with a real pointer. On a touch screen
   :hover latches on after a tap and never clears, which froze the ticker for
   good the first time anyone touched it. */
@media (hover:hover) and (pointer:fine){
  .ticker:hover .ticker-row{animation-play-state:paused;}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hero .wrap{gap:40px;}
  .seal{width:100px;height:100px;}
  .seal text{font-size:11px;}
}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:60px;gap:44px;}
  .hero-art{margin:0 auto;max-width:460px;}
  .hero-glow{filter:blur(56px);opacity:.5;}
}
@media(max-width:600px){
  /* On a phone the copy block was pushing the photography most of a screen
     down the page, so everything above it is tightened and the three figures
     go into one compact row instead of wrapping into a ragged two-plus-one. */
  .hero .wrap{padding-top:26px;padding-bottom:38px;gap:28px;}
  .hero h1{font-size:clamp(30px,8.6vw,40px);}
  .hero .kicker{margin-bottom:18px;font-size:13px;padding:6px 13px 6px 11px;}
  .hero .lead{font-size:16px;margin-top:16px;}
  .hero .actions{margin-top:22px;gap:10px;flex-wrap:nowrap;}
  .hero .actions .btn{flex:1 1 0;justify-content:center;padding-left:12px;padding-right:12px;font-size:14px;white-space:nowrap;}
  /* The arrow is decorative and is what tips the label onto a second line at
     this width, so it steps out and both buttons stay one line and level. */
  .hero .actions .btn svg{display:none;}
  .proof{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-size:12.5px;line-height:1.35;}
  .proof b{font-size:24px;margin-bottom:3px;}
  .hero-art{max-width:330px;}
  .hero-art .shot{border-width:4px;border-radius:18px;}
  /* The chips crowd the photos at this width and the seal carries the idea
     on its own, so they step out. */
  .chip{display:none;}
  .seal{width:74px;height:74px;left:0;bottom:2%;}
  .seal text{font-size:12.6px;letter-spacing:.1em;}
  .seal-mid svg{width:19px;height:19px;}
  .ticker-set span{font-size:17px;padding:0 14px;}
  .ticker{padding:10px 0;}
}

/* ---------- one switch for all of it ---------- */
@media (prefers-reduced-motion:reduce){
  .bnr-slide.is-on img,
  .bnr.is-running .bnr-timer span,
  .hero-glow .blob,
  .hero .kicker .dot,
  .hero-art .shot,
  .seal svg,
  .chip,
  .ticker-row{animation:none !important;}
  .bnr-timer{display:none;}
  .rotator em{transition:none;}
}

/* ==========================================================================
   CAMPAIGN BANNER STRIP

   Two things drove this rebuild.

   First, height. At the artwork's own 1440x820 proportions the banner filled
   the whole screen on a desktop, so the headline, the range and the outlets
   were all below the fold. It is now capped, and each banner carries its own
   focal point (set in data.php) so the crop keeps the part that matters. The
   bottom of this artwork is floor and table, which is what gets trimmed.

   Second, the controls. They used to fade in on hover, which almost nobody
   discovers, and sat straight on the photograph where they were hard to read.
   They now live in a bar along the foot over a soft scrim, always visible.
   ========================================================================== */

.bannerstrip{padding:22px 0 46px;}
@media(max-width:820px){.bannerstrip{padding:12px 0 28px;}}

.bnr{
  position:relative;
  width:min(100% - 36px, 1240px);
  margin-inline:auto;
}

/* The artwork is shown at its own proportions, 1440x820 on desktop and square
   on phones, so nothing is ever cut off. The frame reserves that shape before
   the image loads, which is what stops the page jumping as it arrives. */
.bnr-frame{
  position:relative;width:100%;aspect-ratio:1440/820;
  border-radius:26px;overflow:hidden;background:var(--cocoa-1);
  box-shadow:0 34px 70px -38px rgba(80,30,20,.7);
  isolation:isolate;
}

.bnr-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s ease, visibility .7s;
}
.bnr-slide.is-on{opacity:1;visibility:visible;}
.bnr-slide a{display:block;width:100%;height:100%;}
.bnr-slide picture{display:block;width:100%;height:100%;}
.bnr-slide img{
  width:100%;height:100%;display:block;
  object-fit:cover;                 /* object-position is set per banner */
  transform-origin:50% 40%;
}
/* The slow move runs inward, from very slightly enlarged to exactly 1. It
   used to zoom outward, which meant the resting state was always a little
   cropped; now every banner comes to rest showing the complete artwork. */
.bnr-slide.is-on img{animation:kenburns 9s ease-out forwards;}
@keyframes kenburns{from{transform:scale(1.045);}to{transform:scale(1);}}

/* Scrim under the control bar. Without it the controls disappear against a
   pale patch of artwork. */
/* The scrim that used to run across the foot of the banner is gone, along
   with the element that drew it. It existed to keep the controls legible over
   the artwork; now that they sit below the artwork, nothing needs dimming. */

/* ---------- the call to action drawn over the artwork ---------- */
.bnr-cta{
  position:absolute;left:34px;bottom:30px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;color:var(--ink);
  font-size:15px;font-weight:800;
  padding:13px 22px;border-radius:999px;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.7);
  transition:transform .28s cubic-bezier(.2,.8,.3,1.3), background .2s, color .2s;
}
.bnr-cta svg{width:17px;height:17px;transition:transform .28s ease;}
/* For artwork whose own wording sits bottom left. */
.bnr-cta-right{left:auto;right:34px;}
.bnr-slide a:hover .bnr-cta{background:var(--red);color:#fff;transform:translateY(-3px);}
.bnr-slide a:hover .bnr-cta svg{transform:translateX(4px);}

/* ---------- control bar ----------
   Below the artwork rather than over it.

   Overlaid controls kept colliding with the campaign artwork, which arrives
   with its headline baked in and never in the same corner twice. Sitting them
   underneath means no banner has to be designed around them, and it matches
   how they already behave on a phone. */
.bnr-bar{
  display:flex;align-items:center;gap:16px;
  padding:16px 6px 0;
}

/* One segment per banner. The active one fills across as its time runs down,
   so you can see when it is about to move rather than being surprised. */
.bnr-steps{display:flex;gap:9px;align-items:center;}
.bnr-step{
  width:42px;height:4px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(44,33,27,.2);overflow:hidden;transition:width .3s ease;
}
.bnr-step i{display:block;height:100%;width:0;background:var(--red);border-radius:999px;}
.bnr-step.is-on{width:72px;}
.bnr-step.is-on i{width:100%;}
.bnr.is-running .bnr-step.is-on i{width:0;animation:bnrfill 6s linear forwards;}
@keyframes bnrfill{from{width:0;}to{width:100%;}}
.bnr-step:hover{background:rgba(44,33,27,.36);}

.bnr-count{
  margin-left:auto;color:var(--ink-soft);font-size:13px;font-weight:700;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.bnr-count b{font-size:16px;font-weight:800;color:var(--ink);}

.bnr-nav{display:flex;gap:9px;}
.bnr-arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.bnr-arrow:hover{background:var(--red);color:#fff;border-color:var(--red);transform:scale(1.07);}
.bnr-arrow svg{width:19px;height:19px;}

.bnr-arrow:focus-visible,.bnr-step:focus-visible{outline:3px solid var(--red);outline-offset:3px;}

/* ---------- phones ----------
   The controls move out from under the artwork here and sit beneath it.
   The square banners carry their own line of Bengali across the bottom, and
   on a narrow screen the arrows landed straight on top of it. Artwork with
   text baked in is the norm for these campaigns and the text will not always
   be in the same corner, so rather than dodging it banner by banner the
   controls simply get their own strip. Nothing can collide with anything. */
@media(max-width:760px){
  .bnr{width:calc(100% - 24px);}
  /* The mobile artwork is square, so the frame follows it. */
  .bnr-frame{aspect-ratio:1/1;border-radius:18px;box-shadow:0 20px 44px -24px rgba(80,30,20,.65);}

  .bnr-bar{padding:14px 2px 0;gap:12px;}
  .bnr-step{width:30px;}
  .bnr-step.is-on{width:52px;}
  .bnr-arrow{width:38px;height:38px;}
  .bnr-arrow svg{width:16px;height:16px;}

  /* The counter is hidden at this width, and it was what pushed the arrows
     to the right edge, so that job passes to the arrows themselves. */
  .bnr-count{display:none;}
  .bnr-nav{margin-left:auto;}

  .bnr-cta{left:16px;bottom:16px;font-size:13.5px;padding:10px 16px;}
  .bnr-cta-right{left:auto;right:16px;}
  .bnr-cta svg{width:15px;height:15px;}
}
@media(max-width:400px){
  .bnr-cta{font-size:12.5px;padding:9px 14px;}
  .bnr-nav{gap:7px;}
}

@media (prefers-reduced-motion:reduce){
  .bnr-slide{transition:none;}
  .bnr-slide.is-on img{animation:none;}
  .bnr.is-running .bnr-step.is-on i{animation:none;width:100%;}
  .bnr-cta{transition:none;}
}

/* ==========================================================================
   OUTLET CARDS ON A PHONE

   In one column the old card was mostly empty space: a pin on its own line,
   a name, four short address lines and one small text link. The pin now sits
   beside the name, and the two actions become proper side-by-side buttons
   with the phone number on the card, so the card earns its height.
   ========================================================================== */
@media(max-width:620px){
  .outlet{padding:18px 18px 16px;gap:10px;border-radius:16px;}
  .outlet-head{gap:11px;}
  .outlet .pin{width:32px;height:32px;}
  .outlet .pin svg{width:17px;height:17px;}
  .outlet h3{font-size:18.5px;}
  .outlet address{font-size:14.5px;line-height:1.5;}
  .outlet .hours{font-size:13.5px;margin-top:6px;}

  /* Two tap targets of equal width, each comfortably over the 44px that a
     thumb needs. The phone number is the point of the second one. */
  .outlet .links{
    display:grid;grid-template-columns:1fr 1fr;gap:9px;
    padding-top:13px;margin-top:2px;border-top:1px solid var(--line);
  }
  .outlet .links a{
    justify-content:center;gap:7px;min-height:44px;
    border:1px solid var(--line);border-radius:10px;
    background:var(--paper);font-size:13.5px;font-weight:700;
    padding:9px 6px;text-align:center;line-height:1.2;
  }
  .outlet .links a:last-child{background:#FDE7E7;border-color:#F6C9C9;}
  .outlet .links svg{width:14px;height:14px;flex:none;}
  /* A single action stretches rather than sitting half-width and lonely. */
  .outlet .links a:only-child{grid-column:1 / -1;}
}
@media(max-width:380px){
  /* The longer numbers stop fitting beside the word Directions here. */
  .outlet .links{grid-template-columns:1fr;}
}

/* ==========================================================================
   TOUCH SCREENS

   :hover latches on after a tap on a touch screen and never clears, so every
   hover effect stays stuck on whatever was last touched. These reset the ones
   that are noticeable. The ticker's pause and the banner's autoplay are dealt
   with where they are defined.
   ========================================================================== */
@media (hover:none){
  .outlet:hover{transform:none;box-shadow:none;border-color:var(--line);}
  .cat:hover,.prod:hover,.menu-card:hover{transform:none;}
  .hero-art .shot:hover{transform:none;}
  .bnr-slide a:hover .bnr-cta{background:#fff;color:var(--ink);transform:none;}
  .bnr-slide a:hover .bnr-cta svg{transform:none;}
  .bnr-arrow:hover{transform:none;}
}