/* ==========================================================================
   Cannon & Crumb — shared design system
   Extracted from the original concept <style> block, unchanged, with a
   small set of additions at the end for the new multi-page components
   (breadcrumb, compact page hero, teasers, FAQ, CTA band, area/contact
   layouts, upgraded footer). All additions reuse the existing palette vars.
   ========================================================================== */

  :root{
    --cream: #fdf6ea;
    --cream-2: #f7ecd9;
    --butter: #f4c95d;
    --raspberry: #b8355f;
    --raspberry-dark: #8f2547;
    --espresso: #3a2620;
    --espresso-soft: #5c4033;
    --teal: #2f6f68;
    --teal-dark: #204d47;
    --ink: #2a1f1a;
    --line: rgba(58,38,32,0.14);
    --white: #fffdf8;
    --shadow: 0 20px 50px -20px rgba(58,38,32,0.35);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 10px;
    --maxw: 1200px;
    --ff-head: 'Outfit', sans-serif;
    --ff-serif: 'Instrument Serif', serif;
    --ff-mono: 'JetBrains Mono', monospace;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  body{
    margin:0;
    font-family:var(--ff-head);
    color:var(--ink);
    background:var(--cream);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%; display:block;}
  a{color:inherit;}
  button{font-family:inherit;}

  h1,h2,h3,h4{
    font-family:var(--ff-head);
    margin:0 0 0.5em;
    line-height:1.1;
    font-weight:700;
    letter-spacing:-0.01em;
  }

  .serif{font-family:var(--ff-serif); font-style:italic; font-weight:400;}
  .mono{font-family:var(--ff-mono);}

  .container{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem;}

  /* Skip link */
  .skip-link{
    position:absolute; left:-999px; top:auto;
    background:var(--espresso); color:var(--cream);
    padding:0.85rem 1.4rem; border-radius:0 0 10px 0;
    z-index:9999; font-weight:600;
  }
  .skip-link:focus{
    left:0; top:0;
  }

  :focus-visible{
    outline:3px solid var(--raspberry);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- Header ---------- */
  header.site-header{
    position:sticky; top:0; z-index:500;
    background:rgba(253,246,234,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:0.85rem 1.25rem;
    max-width:var(--maxw); margin:0 auto;
    gap:1rem;
  }
  .brand{
    display:flex; align-items:center; gap:0.65rem;
    text-decoration:none; color:var(--espresso);
    font-weight:800; font-size:1.25rem;
  }
  .brand-mark{
    width:42px; height:42px; border-radius:50%;
    background:var(--raspberry);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand-mark svg{width:24px; height:24px;}
  .brand-name{white-space:nowrap;}
  .brand-name .amp{color:var(--raspberry); font-family:var(--ff-serif); font-style:italic;}

  nav.main-nav{
    display:flex; align-items:center; gap:1.75rem;
  }
  nav.main-nav a{
    text-decoration:none; font-weight:600; font-size:0.95rem; color:var(--espresso-soft);
    padding:0.4rem 0.1rem; position:relative;
  }
  nav.main-nav a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background:var(--raspberry); transition:width 0.25s ease;
  }
  nav.main-nav a:hover::after, nav.main-nav a:focus-visible::after{width:100%;}
  nav.main-nav a.is-active{color:var(--espresso);}
  nav.main-nav a.is-active::after{width:100%;}

  .header-actions{display:flex; align-items:center; gap:0.6rem;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    font-family:var(--ff-head); font-weight:700; font-size:0.92rem;
    padding:0.75rem 1.35rem; border-radius:999px;
    border:2px solid transparent; cursor:pointer;
    text-decoration:none; transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{
    background:var(--raspberry); color:var(--white);
    box-shadow:0 10px 24px -8px rgba(184,53,95,0.55);
  }
  .btn-primary:hover{background:var(--raspberry-dark);}
  .btn-outline{
    background:transparent; border-color:var(--espresso);
    color:var(--espresso);
  }
  .btn-outline:hover{background:var(--espresso); color:var(--cream);}
  .btn-teal{
    background:var(--teal); color:var(--white);
    box-shadow:0 10px 24px -8px rgba(47,111,104,0.5);
  }
  .btn-teal:hover{background:var(--teal-dark);}
  .btn-sm{padding:0.5rem 0.9rem; font-size:0.82rem;}
  .btn:disabled{opacity:0.45; cursor:not-allowed; transform:none;}

  .icon-btn{
    background:var(--espresso); color:var(--cream);
    border:none; border-radius:50%;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; position:relative;
    flex-shrink:0;
    text-decoration:none;
  }
  .icon-btn svg{width:20px; height:20px;}
  .icon-btn .count-badge{
    position:absolute; top:-4px; right:-4px;
    background:var(--butter); color:var(--espresso);
    font-family:var(--ff-mono); font-weight:700; font-size:0.68rem;
    min-width:19px; height:19px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    padding:0 3px;
    border:2px solid var(--cream);
  }

  .hamburger{
    display:none;
    background:none; border:2px solid var(--espresso); border-radius:10px;
    width:44px; height:44px; cursor:pointer;
    align-items:center; justify-content:center;
    flex-direction:column; gap:5px;
  }
  .hamburger span{
    display:block; width:20px; height:2px; background:var(--espresso);
    transition:transform 0.25s ease, opacity 0.25s ease;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media (max-width: 880px){
    nav.main-nav{
      position:fixed; inset:0 0 0 auto; top:73px;
      width:min(320px, 82vw); height:calc(100vh - 73px);
      background:var(--cream); flex-direction:column; align-items:flex-start;
      padding:2rem 1.5rem; gap:1.5rem; border-left:1px solid var(--line);
      transform:translateX(100%); transition:transform 0.3s ease;
      overflow-y:auto;
    }
    nav.main-nav.open{transform:translateX(0); box-shadow:-20px 0 40px -20px rgba(0,0,0,0.3);}
    nav.main-nav a{font-size:1.15rem;}
    .hamburger{display:flex;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:min(88vh, 780px);
    display:flex; align-items:flex-end;
    color:var(--white);
    overflow:hidden;
    isolation:isolate;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:-2;
    background:linear-gradient(135deg, #7a2244 0%, #b8355f 45%, #d98a3c 100%);
  }
  .hero-bg img{
    width:100%; height:100%; object-fit:cover;
    position:absolute; inset:0;
    mix-blend-mode:luminosity; opacity:0.55;
  }
  .hero::after{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(58,20,30,0.35) 0%, rgba(45,15,25,0.55) 55%, rgba(30,10,18,0.88) 100%);
  }
  .hero-content{
    position:relative; z-index:1;
    max-width:var(--maxw); margin:0 auto;
    padding:7rem 1.25rem 4.5rem;
    width:100%;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--ff-mono); font-size:0.78rem; letter-spacing:0.14em;
    text-transform:uppercase; background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.3);
    padding:0.4rem 0.9rem; border-radius:999px; margin-bottom:1.25rem;
  }
  .hero h1{
    font-size:clamp(2.6rem, 7vw, 4.6rem);
    max-width:16ch; margin-bottom:0.4rem;
  }
  .hero h1 .serif{font-size:1.05em; display:block; color:var(--butter);}
  .hero-sub{
    font-size:clamp(1.05rem, 2vw, 1.25rem);
    max-width:46ch; color:rgba(255,255,255,0.92);
    margin-bottom:2rem;
  }
  .hero-actions{display:flex; flex-wrap:wrap; gap:1rem;}
  .hero-meta{
    display:flex; flex-wrap:wrap; gap:1.75rem;
    margin-top:2.75rem; padding-top:1.75rem;
    border-top:1px solid rgba(255,255,255,0.25);
    font-family:var(--ff-mono); font-size:0.82rem; color:rgba(255,255,255,0.85);
  }
  .hero-meta strong{display:block; color:var(--white); font-family:var(--ff-head); font-size:0.95rem; margin-bottom:0.15rem;}

  /* ---------- Section basics ---------- */
  section{padding:5.5rem 0;}
  .section-head{
    max-width:640px; margin:0 auto 3rem;
    text-align:center;
  }
  .eyebrow{
    display:inline-block; font-family:var(--ff-mono); font-size:0.76rem;
    letter-spacing:0.16em; text-transform:uppercase;
    color:var(--raspberry); font-weight:600; margin-bottom:0.9rem;
  }
  .section-head h2{font-size:clamp(2rem, 4vw, 2.85rem);}
  .section-head p{color:var(--espresso-soft); font-size:1.08rem;}

  .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.in-view{opacity:1; transform:translateY(0);}

  /* ---------- Menu section ---------- */
  .menu-section{background:var(--cream);}
  .menu-tabs{
    display:flex; flex-wrap:wrap; gap:0.6rem;
    justify-content:center; margin-bottom:1.75rem;
  }
  .menu-tab{
    background:var(--white); border:2px solid var(--line);
    padding:0.65rem 1.3rem; border-radius:999px; cursor:pointer;
    font-weight:700; font-size:0.92rem; color:var(--espresso-soft);
    transition:all 0.2s ease;
  }
  .menu-tab:hover{border-color:var(--raspberry);}
  .menu-tab[aria-selected="true"]{
    background:var(--espresso); border-color:var(--espresso); color:var(--cream);
  }

  .menu-filters{
    display:flex; flex-wrap:wrap; gap:0.55rem;
    justify-content:center; margin-bottom:3rem;
  }
  .filter-chip{
    background:transparent; border:1.5px dashed var(--teal);
    color:var(--teal-dark); padding:0.4rem 0.95rem;
    border-radius:999px; cursor:pointer; font-size:0.82rem; font-weight:600;
    font-family:var(--ff-mono);
    transition:all 0.2s ease;
    display:inline-flex; align-items:center; gap:0.4rem;
  }
  .filter-chip::before{
    content:''; width:8px; height:8px; border-radius:50%;
    border:1.5px solid var(--teal); background:transparent;
    transition:background 0.2s ease;
  }
  .filter-chip[aria-pressed="true"]{
    background:var(--teal); color:var(--white); border-style:solid;
  }
  .filter-chip[aria-pressed="true"]::before{background:var(--butter); border-color:var(--white);}

  .menu-panel{display:none;}
  .menu-panel.active{display:block;}

  .menu-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:1.5rem;
  }
  .menu-card{
    background:var(--white); border-radius:var(--radius-md);
    padding:1.5rem; border:1px solid var(--line);
    display:flex; flex-direction:column; gap:0.75rem;
    box-shadow:0 10px 30px -18px rgba(58,38,32,0.25);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .menu-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px -16px rgba(58,38,32,0.3);}
  .menu-card.hide{display:none;}
  .card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem;}
  .card-top h3{font-size:1.18rem; margin-bottom:0;}
  .card-price{
    font-family:var(--ff-mono); font-weight:700; color:var(--raspberry);
    font-size:1.05rem; white-space:nowrap;
  }
  .card-desc{color:var(--espresso-soft); font-size:0.93rem; flex-grow:1; margin:0;}
  .card-tags{display:flex; flex-wrap:wrap; gap:0.4rem;}
  .tag{
    font-family:var(--ff-mono); font-size:0.68rem; text-transform:uppercase;
    letter-spacing:0.05em; padding:0.22rem 0.55rem; border-radius:6px;
    background:var(--cream-2); color:var(--teal-dark); font-weight:600;
  }
  .tag.veg{background:#e6f2e0; color:#3c6e2e;}
  .tag.vgn{background:#dcefe9; color:var(--teal-dark);}
  .tag.gf{background:#fbe9d7; color:#9a5b1f;}

  .card-actions{
    display:flex; align-items:center; justify-content:space-between;
    gap:0.75rem; margin-top:0.25rem; padding-top:0.9rem;
    border-top:1px dashed var(--line);
  }
  .stepper{
    display:flex; align-items:center; gap:0.5rem;
    background:var(--cream-2); border-radius:999px; padding:0.25rem;
  }
  .stepper button{
    width:28px; height:28px; border-radius:50%; border:none;
    background:var(--white); cursor:pointer; font-weight:700; font-size:1rem;
    display:flex; align-items:center; justify-content:center; color:var(--espresso);
    box-shadow:0 1px 3px rgba(0,0,0,0.12);
  }
  .stepper span{
    font-family:var(--ff-mono); font-weight:700; min-width:1.3ch; text-align:center;
    font-size:0.9rem;
  }
  .add-btn{
    background:var(--raspberry); color:var(--white); border:none;
    padding:0.55rem 1.1rem; border-radius:999px; cursor:pointer;
    font-weight:700; font-size:0.85rem; white-space:nowrap;
    transition:background 0.2s ease, transform 0.15s ease;
  }
  .add-btn:hover{background:var(--raspberry-dark);}
  .add-btn.added{background:var(--teal);}

  .empty-note{
    text-align:center; color:var(--espresso-soft); padding:2.5rem 1rem;
    font-family:var(--ff-mono); font-size:0.9rem; display:none;
  }
  .empty-note.show{display:block;}

  /* ---------- Order panel (cart) ---------- */
  .cart-toggle-wrap{position:relative;}

  .order-overlay{
    position:fixed; inset:0; background:rgba(30,15,18,0.5);
    z-index:800; opacity:0; pointer-events:none; transition:opacity 0.3s ease;
  }
  .order-overlay.open{opacity:1; pointer-events:auto;}

  .order-panel{
    position:fixed; top:0; right:0; height:100%;
    width:min(420px, 100vw);
    background:var(--white); z-index:900;
    box-shadow:-20px 0 50px -20px rgba(0,0,0,0.4);
    transform:translateX(100%); transition:transform 0.35s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
  }
  .order-panel.open{transform:translateX(0);}
  .order-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem 1.5rem; border-bottom:1px solid var(--line);
  }
  .order-header h2{font-size:1.4rem; margin:0;}
  .order-close{
    background:var(--cream-2); border:none; border-radius:50%;
    width:36px; height:36px; cursor:pointer; font-size:1.1rem; color:var(--espresso);
    display:flex; align-items:center; justify-content:center;
  }
  .order-body{flex:1; overflow-y:auto; padding:1.25rem 1.5rem;}
  .order-empty{text-align:center; color:var(--espresso-soft); padding:3rem 1rem;}
  .order-empty svg{width:56px; height:56px; margin:0 auto 1rem; opacity:0.4;}

  .order-item{
    display:flex; gap:0.85rem; padding:0.9rem 0; border-bottom:1px solid var(--line);
  }
  .order-item-info{flex:1;}
  .order-item-info h4{font-size:0.98rem; margin:0 0 0.15rem;}
  .order-item-price{font-family:var(--ff-mono); font-size:0.82rem; color:var(--espresso-soft);}
  .order-item-controls{display:flex; align-items:center; gap:0.6rem;}
  .order-item-remove{
    background:none; border:none; color:var(--raspberry); cursor:pointer;
    font-size:0.78rem; font-weight:600; text-decoration:underline;
    padding:0; margin-top:0.3rem;
  }

  .fulfillment-toggle{
    display:flex; background:var(--cream-2); border-radius:999px; padding:0.3rem;
    margin-bottom:1.25rem;
  }
  .fulfillment-toggle button{
    flex:1; border:none; background:transparent; padding:0.55rem 0.5rem;
    border-radius:999px; cursor:pointer; font-weight:700; font-size:0.85rem;
    color:var(--espresso-soft); transition:all 0.2s ease;
  }
  .fulfillment-toggle button[aria-pressed="true"]{
    background:var(--espresso); color:var(--cream);
  }

  .order-summary{
    border-top:1px solid var(--line); padding:1.25rem 1.5rem;
    background:var(--cream-2);
  }
  .summary-row{
    display:flex; justify-content:space-between; font-size:0.92rem;
    margin-bottom:0.5rem; color:var(--espresso-soft);
  }
  .summary-row.total{
    font-size:1.15rem; font-weight:800; color:var(--ink);
    margin-top:0.6rem; padding-top:0.6rem; border-top:1px dashed var(--line);
  }
  .summary-row .mono{font-family:var(--ff-mono);}
  .checkout-btn{width:100%; margin-top:1rem; padding:0.9rem; font-size:1rem;}

  .confirmation{
    text-align:center; padding:2rem 0.5rem;
  }
  .confirmation .check-circle{
    width:64px; height:64px; border-radius:50%; background:var(--teal);
    display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;
  }
  .confirmation .check-circle svg{width:32px; height:32px; color:white;}
  .confirmation h3{font-size:1.5rem;}
  .confirmation .order-number{
    font-family:var(--ff-mono); font-size:1.1rem; background:var(--cream-2);
    display:inline-block; padding:0.5rem 1rem; border-radius:10px; margin:0.75rem 0;
    font-weight:700; color:var(--raspberry);
  }

  /* ---------- Story ---------- */
  .story{background:var(--white);}
  .story-grid{
    display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center;
  }
  @media(min-width:840px){ .story-grid{grid-template-columns:1fr 1fr; gap:4rem;} }
  .story-photo{
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    aspect-ratio:4/3; box-shadow:var(--shadow);
    background:linear-gradient(135deg, var(--teal), var(--espresso));
  }
  .story-photo img{width:100%; height:100%; object-fit:cover;}
  .story-photo .badge-corner{
    position:absolute; bottom:1rem; left:1rem;
    background:rgba(253,246,234,0.95); color:var(--espresso);
    padding:0.6rem 1rem; border-radius:12px; font-family:var(--ff-mono);
    font-size:0.78rem; font-weight:600;
  }
  .story-text .eyebrow{margin-bottom:0.75rem;}
  .story-text h2{font-size:clamp(1.9rem, 4vw, 2.6rem);}
  .story-text p{color:var(--espresso-soft); font-size:1.05rem; margin-bottom:1.1rem;}
  .story-stats{display:flex; gap:2rem; margin-top:1.75rem; flex-wrap:wrap;}
  .story-stats div strong{
    display:block; font-size:1.9rem; font-family:var(--ff-serif); font-style:italic; color:var(--raspberry);
  }
  .story-stats div span{font-size:0.82rem; color:var(--espresso-soft); font-family:var(--ff-mono);}

  /* ---------- Catering callout ---------- */
  .callout{
    background:linear-gradient(120deg, var(--espresso) 0%, #4a2e26 100%);
    color:var(--cream); border-radius:var(--radius-lg);
    padding:3rem 2rem; margin:0 1.25rem;
    max-width:calc(var(--maxw) - 2.5rem);
    display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between;
    position:relative; overflow:hidden;
  }
  .callout::before{
    content:''; position:absolute; top:-40px; right:-40px; width:220px; height:220px;
    border-radius:50%; background:radial-gradient(circle, rgba(244,201,93,0.25), transparent 70%);
  }
  .callout-text{max-width:520px; position:relative;}
  .callout-text .eyebrow{color:var(--butter);}
  .callout-text h2{font-size:clamp(1.7rem, 3.5vw, 2.3rem); color:var(--white);}
  .callout-text p{color:rgba(253,246,234,0.85);}
  .callout-actions{position:relative;}

  /* ---------- Hours & location ---------- */
  .hours-section{background:var(--cream-2);}
  .hours-grid{
    display:grid; grid-template-columns:1fr; gap:2.5rem;
  }
  @media(min-width:840px){ .hours-grid{grid-template-columns:1fr 1.1fr;} }
  .hours-card{
    background:var(--white); border-radius:var(--radius-md); padding:2rem;
    box-shadow:0 10px 30px -18px rgba(58,38,32,0.2);
  }
  .hours-card h3{font-size:1.3rem;}
  table.hours-table{width:100%; border-collapse:collapse; margin-top:1rem;}
  table.hours-table td{
    padding:0.6rem 0; border-bottom:1px solid var(--line); font-size:0.95rem;
  }
  table.hours-table td:first-child{font-weight:700; color:var(--espresso);}
  table.hours-table td:last-child{text-align:right; font-family:var(--ff-mono); color:var(--espresso-soft);}
  table.hours-table tr.today td{color:var(--raspberry); font-weight:700;}

  .contact-line{
    display:flex; align-items:center; gap:0.75rem; margin-top:1.25rem;
    font-size:0.95rem;
  }
  .contact-line svg{width:20px; height:20px; color:var(--raspberry); flex-shrink:0;}
  .contact-line a{color:inherit; text-decoration:none;}
  .contact-line a:hover{color:var(--raspberry);}

  .map-card{
    border-radius:var(--radius-md); overflow:hidden; position:relative;
    min-height:340px;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(58,38,32,0.08) 38px, rgba(58,38,32,0.08) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(58,38,32,0.08) 38px, rgba(58,38,32,0.08) 40px),
      linear-gradient(135deg, #e9dcc2, #dcefe9);
    box-shadow:0 10px 30px -18px rgba(58,38,32,0.2);
    display:flex; align-items:center; justify-content:center;
  }
  .map-road{
    position:absolute; background:#fff9ec; box-shadow:0 0 0 1px rgba(58,38,32,0.15);
  }
  .map-road.h{height:22px; left:0; right:0; top:52%;}
  .map-road.v{width:22px; top:0; bottom:0; left:38%;}
  .map-pin{
    position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  }
  .map-pin svg{width:44px; height:44px; color:var(--raspberry); filter:drop-shadow(0 6px 10px rgba(0,0,0,0.3));}
  .map-pin .pin-label{
    background:var(--espresso); color:var(--cream); font-family:var(--ff-mono);
    font-size:0.75rem; padding:0.45rem 0.8rem; border-radius:8px; margin-top:0.4rem;
    white-space:nowrap;
  }

  /* ---------- Testimonials ---------- */
  .testimonials{background:var(--white);}
  .testi-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:1.75rem;
  }
  .testi-card{
    background:var(--cream); border-radius:var(--radius-md); padding:2rem;
    border:1px solid var(--line);
  }
  .stars{display:flex; gap:0.2rem; margin-bottom:1rem;}
  .stars svg{width:18px; height:18px; color:var(--butter);}
  .testi-card p.quote{
    font-family:var(--ff-serif); font-style:italic; font-size:1.35rem;
    color:var(--ink); margin:0 0 1.25rem; line-height:1.4;
  }
  .testi-author{display:flex; align-items:center; gap:0.75rem;}
  .testi-avatar{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--ff-head); font-weight:700; color:white; font-size:0.95rem;
  }
  .testi-author strong{display:block; font-size:0.92rem;}
  .testi-author span{font-size:0.8rem; color:var(--espresso-soft); font-family:var(--ff-mono);}

  /* ---------- Footer ---------- */
  footer{
    background:var(--espresso); color:var(--cream); padding:4rem 0 2rem;
  }
  .footer-grid{
    display:grid; grid-template-columns:1fr; gap:2.5rem;
  }
  @media(min-width:720px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr;} }
  .footer-brand{display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; font-weight:800; font-size:1.2rem;}
  .footer-brand .brand-mark{width:36px; height:36px;}
  footer p{color:rgba(253,246,234,0.7); font-size:0.92rem;}
  footer h4{color:var(--cream); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.08em; font-family:var(--ff-mono); margin-bottom:1rem;}
  footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.65rem;}
  footer ul a{color:rgba(253,246,234,0.8); text-decoration:none; font-size:0.93rem;}
  footer ul a:hover{color:var(--butter);}
  .social-row{display:flex; gap:0.75rem; margin-top:1.25rem;}
  .social-row a{
    width:38px; height:38px; border-radius:50%; background:rgba(253,246,234,0.1);
    display:flex; align-items:center; justify-content:center; color:var(--cream);
    transition:background 0.2s ease;
  }
  .social-row a:hover{background:var(--raspberry);}
  .social-row svg{width:18px; height:18px;}
  .footer-bottom{
    border-top:1px solid rgba(253,246,234,0.15); margin-top:3rem; padding-top:1.5rem;
    display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
    font-size:0.82rem; color:rgba(253,246,234,0.55);
  }

  /* ---------- Concept badge ---------- */
  .concept-badge{
    position:fixed; left:1rem; bottom:1rem; z-index:700;
    background:rgba(58,38,32,0.88); color:var(--cream);
    padding:0.6rem 1.05rem; border-radius:999px; font-family:var(--ff-mono);
    font-size:0.75rem; text-decoration:none; backdrop-filter:blur(6px);
    border:1px solid rgba(253,246,234,0.25);
    box-shadow:0 8px 20px -8px rgba(0,0,0,0.4);
  }
  .concept-badge:hover{background:rgba(184,53,95,0.9);}
  @media (max-width:600px){
    .concept-badge{font-size:0.68rem; padding:0.5rem 0.85rem; left:0.6rem; bottom:0.6rem;}
  }

  /* Cart FAB for small screens spacing consideration */
  .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  @media (max-width:600px){
    section{padding:3.5rem 0;}
    .hero-content{padding:6rem 1.1rem 3.5rem;}
    .callout{margin:0 0.75rem; padding:2.25rem 1.5rem;}
  }

/* ==========================================================================
   ADDITIONS — new multi-page components (same palette, same tokens)
   ========================================================================== */

  /* ---------- Breadcrumb ---------- */
  .breadcrumb{
    background:var(--cream);
    border-bottom:1px solid var(--line);
    font-family:var(--ff-mono);
  }
  .breadcrumb ol{
    max-width:var(--maxw); margin:0 auto; padding:0.85rem 1.25rem;
    list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem;
    font-size:0.78rem; color:var(--espresso-soft);
  }
  .breadcrumb a{color:var(--raspberry); text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}
  .breadcrumb li[aria-current="page"]{color:var(--espresso); font-weight:600;}
  .breadcrumb .sep{opacity:0.5;}

  /* ---------- Compact page hero (interior pages) ---------- */
  .page-hero{
    position:relative; color:var(--white); overflow:hidden; isolation:isolate;
    background:linear-gradient(135deg, #7a2244 0%, #b8355f 45%, #d98a3c 100%);
  }
  .page-hero::after{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(58,20,30,0.30) 0%, rgba(30,10,18,0.72) 100%);
  }
  .page-hero .container{position:relative; z-index:1; padding-top:3.75rem; padding-bottom:3.5rem;}
  .page-hero h1{font-size:clamp(2.1rem, 5vw, 3.25rem); max-width:20ch;}
  .page-hero p{font-size:clamp(1.02rem, 2vw, 1.18rem); max-width:56ch; color:rgba(255,255,255,0.92); margin:0;}
  .page-hero .eyebrow{color:var(--butter);}

  /* ---------- Teaser cards (homepage) ---------- */
  .teaser-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1.5rem;
  }
  .teaser-card{
    display:flex; flex-direction:column; gap:0.6rem;
    background:var(--white); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:1.75rem;
    box-shadow:0 10px 30px -18px rgba(58,38,32,0.25);
    text-decoration:none; color:var(--ink);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .teaser-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px -16px rgba(58,38,32,0.3);}
  .teaser-icon{
    width:48px; height:48px; border-radius:14px; flex-shrink:0;
    background:var(--cream-2); color:var(--raspberry);
    display:flex; align-items:center; justify-content:center;
  }
  .teaser-icon svg{width:24px; height:24px;}
  .teaser-card h3{font-size:1.25rem; margin:0.4rem 0 0;}
  .teaser-card p{color:var(--espresso-soft); font-size:0.95rem; margin:0; flex-grow:1;}
  .teaser-card .teaser-link{
    color:var(--raspberry); font-weight:700; font-size:0.9rem; margin-top:0.4rem;
    display:inline-flex; align-items:center; gap:0.35rem;
  }

  /* ---------- Prose / long-form local content ---------- */
  .prose{max-width:70ch; margin:0 auto;}
  .prose p{color:var(--espresso-soft); font-size:1.05rem; margin:0 0 1.15rem;}
  .prose h3{font-size:1.4rem; margin:2rem 0 0.6rem; color:var(--ink);}
  .prose ul{color:var(--espresso-soft); font-size:1.02rem; padding-left:1.2rem; margin:0 0 1.2rem;}
  .prose li{margin-bottom:0.4rem;}
  .prose strong{color:var(--espresso);}

  /* ---------- Info / area cards ---------- */
  .info-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:1.5rem;
  }
  .info-card{
    background:var(--white); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:1.75rem;
    box-shadow:0 10px 30px -18px rgba(58,38,32,0.2);
  }
  .info-card h3{font-size:1.2rem; display:flex; align-items:center; gap:0.5rem;}
  .info-card h3 svg{width:20px; height:20px; color:var(--raspberry); flex-shrink:0;}
  .info-card p{color:var(--espresso-soft); font-size:0.96rem; margin:0.4rem 0 0;}
  .info-card ul{list-style:none; padding:0; margin:0.6rem 0 0; display:flex; flex-direction:column; gap:0.45rem;}
  .info-card ul li{color:var(--espresso-soft); font-size:0.95rem; display:flex; gap:0.5rem;}
  .info-card ul li::before{content:'›'; color:var(--raspberry); font-weight:700;}

  /* ---------- Town chips ---------- */
  .town-list{display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.25rem; justify-content:center;}
  .town-chip{
    font-family:var(--ff-mono); font-size:0.82rem; font-weight:600;
    background:var(--white); border:1px solid var(--line);
    color:var(--espresso); padding:0.5rem 1rem; border-radius:999px;
  }

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:1rem;}
  .faq-item{
    background:var(--white); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:1.4rem 1.6rem;
  }
  .faq-item h3{font-size:1.1rem; margin:0 0 0.5rem;}
  .faq-item p{color:var(--espresso-soft); font-size:0.98rem; margin:0;}

  /* ---------- CTA band ---------- */
  .cta-band{
    background:linear-gradient(120deg, var(--raspberry) 0%, var(--raspberry-dark) 100%);
    color:var(--white); text-align:center;
  }
  .cta-band h2{font-size:clamp(1.8rem, 4vw, 2.6rem); color:var(--white); max-width:20ch; margin:0 auto 0.75rem;}
  .cta-band p{color:rgba(255,255,255,0.9); max-width:52ch; margin:0 auto 1.75rem; font-size:1.08rem;}
  .cta-band .hero-actions{justify-content:center;}
  .cta-band .btn-outline{color:#fff; border-color:rgba(255,255,255,0.75);}
  .cta-band .btn-outline:hover{background:#fff; color:var(--raspberry-dark);}

  /* ---------- Two-column feature row ---------- */
  .feature-list{list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-direction:column; gap:1rem;}
  .feature-list li{display:flex; gap:0.85rem; align-items:flex-start;}
  .feature-list .fl-icon{
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:var(--cream-2); color:var(--teal-dark);
    display:flex; align-items:center; justify-content:center;
  }
  .feature-list .fl-icon svg{width:18px; height:18px;}
  .feature-list strong{display:block; font-size:1rem; color:var(--ink);}
  .feature-list span{font-size:0.93rem; color:var(--espresso-soft);}

  /* ---------- Contact form ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr; gap:2.5rem;}
  @media(min-width:840px){ .contact-grid{grid-template-columns:1.1fr 0.9fr;} }
  .contact-form{
    background:var(--white); border:1px solid var(--line);
    border-radius:var(--radius-md); padding:2rem;
    box-shadow:0 10px 30px -18px rgba(58,38,32,0.2);
  }
  .form-field{margin-bottom:1.15rem;}
  .form-field label{display:block; font-weight:700; font-size:0.9rem; margin-bottom:0.4rem; color:var(--espresso);}
  .form-field input, .form-field textarea, .form-field select{
    width:100%; padding:0.75rem 0.9rem; border-radius:var(--radius-sm);
    border:1.5px solid var(--line); background:var(--cream); color:var(--ink);
    font-family:var(--ff-head); font-size:0.95rem;
  }
  .form-field textarea{resize:vertical; min-height:120px;}
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus{
    outline:none; border-color:var(--raspberry);
  }
  .form-note{font-size:0.82rem; color:var(--espresso-soft); font-family:var(--ff-mono); margin-top:0.75rem;}
  .form-success{
    display:none; margin-top:1rem; padding:0.9rem 1.1rem;
    background:#dcefe9; color:var(--teal-dark); border-radius:var(--radius-sm);
    font-weight:600; font-size:0.95rem;
  }
  .form-success.show{display:block;}

  /* ---------- Footer: 4-column variant + NAP block ---------- */
  @media(min-width:720px){
    .footer-grid.cols-4{grid-template-columns:1.5fr 1fr 1fr 1fr;}
  }
  .footer-nap{font-style:normal;}
  .footer-nap p, .footer-nap a{color:rgba(253,246,234,0.8); font-size:0.93rem; margin:0 0 0.5rem; text-decoration:none; display:block;}
  .footer-nap a:hover{color:var(--butter);}
  .footer-hours{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.45rem;}
  .footer-hours li{display:flex; justify-content:space-between; gap:1rem; color:rgba(253,246,234,0.8); font-size:0.88rem; font-family:var(--ff-mono);}
  .footer-service-area{margin-top:2.25rem; color:rgba(253,246,234,0.6); font-size:0.88rem;}