/* =============================================================
   SUCRÉ — Cake Shop / Patisserie
   Bespoke patisserie-counter design system
   Topic: BAKERY / CAKE SHOP. Authored fresh — no shared skeleton.
   Type: Fraunces (display, soft) · DM Sans (body) · Caveat (hand)
   Palette: Cream, cocoa, raspberry, butter, sugar
   ============================================================= */

:root{
  --cream:#FFF7EB;
  --cream-2:#FCEED5;
  --cream-3:#FFFDF6;
  --cocoa:#2B1A12;
  --cocoa-soft:#5A3A2A;
  --cocoa-mid:#7A5A40;
  --muted:#9A8A7A;
  --line:#E8D9C0;
  --line-strong:#D9C6A8;
  --raspberry:#D94F5A;
  --raspberry-deep:#B93A45;
  --butter:#F2C75C;
  --butter-deep:#E8B63A;
  --mint:#4DB6A6;
  --sugar:#FFF0F3;

  --font-display:"Fraunces", Georgia, serif;
  --font-body:"DM Sans", system-ui, -apple-system, sans-serif;
  --font-hand:"Caveat", cursive;

  --fs-hero: clamp(2.6rem, 6vw, 4.8rem);
  --fs-h2: clamp(1.8rem, 3.6vw, 2.6rem);
  --fs-h3: clamp(1.1rem, 2vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small:.88rem;
  --fs-micro:.72rem;

  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);
  --t:.36s cubic-bezier(.2,.7,.2,1);
  --sh: 0 18px 40px -18px rgba(43,26,18,.18);
  --sh-soft: 0 10px 28px -14px rgba(43,26,18,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream-3);
  color:var(--cocoa);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.05; margin:0; letter-spacing:-.015em}
p{margin:0 0 1rem}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}

/* ---------- Top ribbon ---------- */
.ribbon{
  background:var(--cocoa);
  color:var(--cream);
  font-size:.78rem;
}
.ribbon .container{display:flex; align-items:center; gap:1rem; min-height:34px; flex-wrap:wrap}
.ribbon .left{display:flex; gap:.8rem; align-items:center; color:#D9C6A8}
.ribbon .right{margin-left:auto; display:flex; gap:.7rem; align-items:center}
.ribbon a{color:var(--cream)}
.ribbon a:hover{color:var(--butter)}
.ribbon .dot{width:5px; height:5px; border-radius:50%; background:var(--raspberry); display:inline-block}

/* ---------- Header: patisserie counter ---------- */
.sitehead{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,246,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.sitehead .container{display:flex; align-items:center; gap:1.6rem; min-height:68px}
.mark{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
}
.mark .badge{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--raspberry); color:#fff;
  font-size:1.1rem; border:2px solid var(--cocoa);
  transform: rotate(-6deg);
}
.mark small{font-family:var(--font-hand); font-size:1rem; color:var(--raspberry); font-weight:700; display:block; margin-top:-4px; letter-spacing:.02em}
.navlinks{display:flex; gap:.15rem; flex-wrap:wrap}
.navlinks a{
  font-family:var(--font-body); font-weight:700; font-size:.84rem; letter-spacing:.02em;
  padding:.55rem .75rem; border-radius:var(--r-pill); transition:all var(--t);
}
.navlinks a:hover, .navlinks a.active{background:var(--cocoa); color:var(--cream)}
.head-cta{margin-left:auto; display:flex; gap:.6rem; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--font-body); font-weight:800; letter-spacing:.02em; font-size:.86rem;
  border-radius:var(--r-pill); padding:.75rem 1.2rem; cursor:pointer; transition:all var(--t); border:2px solid var(--cocoa); line-height:1;
}
.btn--rasp{background:var(--raspberry); color:#fff; border-color:var(--raspberry)}
.btn--rasp:hover{background:var(--raspberry-deep); transform: translateY(-1px)}
.btn--cocoa{background:var(--cocoa); color:var(--cream)}
.btn--cocoa:hover{background:#1A0F0A}
.btn--ghost{background:var(--cream); color:var(--cocoa)}
.btn--ghost:hover{background:var(--cocoa); color:var(--cream)}
.btn--sm{padding:.6rem 1rem; font-size:.8rem}
.burger{display:none; border:2px solid var(--line-strong); background:var(--cream); width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.1rem}

/* ---------- Hero: counter display ---------- */
.hero{
  position:relative; overflow:hidden;
  background: var(--cream);
  border-bottom:1px solid var(--line);
}
.hero::before{
  /* soft sugar sprinkle dots */
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.18;
  background-image: radial-gradient(var(--raspberry) 1.2px, transparent 1.2px), radial-gradient(var(--butter) 1px, transparent 1px), radial-gradient(var(--mint) 1px, transparent 1px);
  background-size: 28px 28px, 36px 36px, 44px 44px;
  background-position: 0 0, 14px 18px, 22px 8px;
}
.hero .container{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem,4vw,3rem);
  padding-block: clamp(2.2rem,5vw,3.6rem);
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-hand); font-size:1.15rem; color:var(--raspberry); font-weight:700;
}
.eyebrow::before{content:"✦"; color:var(--butter-deep)}
.hero h1{font-size:var(--fs-hero); line-height:.92}
.hero h1 em{font-style:normal; color:var(--raspberry); position:relative}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:.28em;
  background: var(--butter); opacity:.45; z-index:-1;
}
.hero .sub{color:var(--cocoa-soft); font-size:1.05rem; max-width:52ch; margin-top:.8rem}
.hero .actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.3rem}
.hero .meta-row{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; font-size:.82rem; color:var(--cocoa-mid)}
.hero .meta-row b{color:var(--cocoa)}

/* Hero counter card — floating */
.counter{
  position:relative;
  background:var(--cream-3);
  border:2px solid var(--cocoa);
  border-radius:var(--r-lg);
  padding:1rem;
  box-shadow: 6px 6px 0 var(--cocoa);
  transform: rotate(.6deg);
}
.counter img{width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius: 12px; border:1px solid var(--line)}
.counter .price-tag{
  position:absolute; top:1.6rem; right:1.6rem;
  background:var(--butter); color:var(--cocoa);
  border:2px solid var(--cocoa); border-radius: var(--r-pill);
  font-family:var(--font-display); font-weight:800; padding:.35rem .7rem;
  transform: rotate(4deg);
}
.counter .foot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-top:.8rem; font-family:var(--font-hand); font-size:1.05rem; color:var(--cocoa-soft);
}
.float{animation: float 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform: rotate(.6deg) translateY(0)} 50%{transform: rotate(.6deg) translateY(-6px)}}

/* ---------- Section chrome ---------- */
.section{padding: clamp(2.6rem,5vw,4rem) 0}
.section--cream{background:var(--cream)}
.section--sugar{background:var(--sugar); border-block:1px solid var(--line)}
.section--cocoa{background:var(--cocoa); color:var(--cream)}
.section--cocoa .muted{color:#D9C6A8}
.kicker{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-hand); font-size:1.05rem; color:var(--raspberry); font-weight:700;
}
.kicker::before{content:"—"; color:var(--butter-deep)}
.section--cocoa .kicker{color:var(--butter)}
.head{display:flex; align-items:end; gap:1.2rem; flex-wrap:wrap; justify-content:space-between; margin-bottom:1.4rem}
.head h2{font-size:var(--fs-h2)}
.head p{color:var(--cocoa-soft); max-width:48ch; font-size:.98rem}
.section--cocoa .head p{color:#D9C6A8}
.underline{height:3px; width:56px; background:var(--raspberry); border-radius:999px; margin-top:.6rem}

/* ---------- Offer / promo band ---------- */
.offer{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:0;
  background:var(--cocoa); color:var(--cream);
  border:2px solid var(--cocoa); border-radius:var(--r-lg); overflow:hidden;
}
.offer .copy{padding: clamp(1.6rem,3vw,2.2rem)}
.offer .copy h2{color:#fff}
.offer .copy h2 em{color:var(--butter); font-style:normal}
.offer .media{position:relative; background:var(--cream)}
.offer .media img{width:100%; height:100%; object-fit:cover}
.offer .sticker{
  position:absolute; top:1rem; left:1rem;
  background:var(--raspberry); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:.9rem;
  padding:.4rem .7rem; border-radius:var(--r-pill); border:2px solid var(--cocoa);
  transform: rotate(-4deg);
}

/* ---------- Flavors / menu board ---------- */
.menu-board{
  background:var(--cream-3);
  border:2px solid var(--cocoa);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow: 6px 6px 0 var(--cocoa);
}
.menu-board .top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; background:var(--cream-2); border-bottom:2px solid var(--cocoa);
}
.menu-board .top h3{font-size:1.1rem}
.pill{
  font-family:var(--font-body); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--butter); color:var(--cocoa); border:2px solid var(--cocoa); padding:.25rem .55rem; border-radius:var(--r-pill);
}
.menu-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:0}
.menu-item{
  display:grid; gap:.7rem; padding:1.1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--cream-3);
}
.menu-item:nth-child(3n){border-right:0}
.menu-item img{width:100%; aspect-ratio:1; object-fit:cover; border-radius: 12px; border:1px solid var(--line); background:var(--cream)}
.menu-item h4{font-size:1.02rem}
.menu-item p{font-size:.88rem; color:var(--cocoa-soft); margin:0}
.menu-item .buy{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.2rem}
.price{font-family:var(--font-display); font-weight:800; color:var(--raspberry)}
.mini-btn{
  font-family:var(--font-body); font-weight:800; font-size:.78rem;
  background:var(--cocoa); color:var(--cream); border:2px solid var(--cocoa);
  padding:.4rem .7rem; border-radius:var(--r-pill); cursor:pointer; transition:all var(--t);
}
.mini-btn:hover{background:var(--raspberry); border-color:var(--raspberry)}

/* ---------- Service trio ---------- */
.trio{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
.card{
  background:var(--cream-3); border:2px solid var(--cocoa); border-radius:var(--r-lg); overflow:hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.card:hover{transform: translateY(-4px); box-shadow: 6px 10px 0 rgba(43,26,18,.12)}
.card img{width:100%; aspect-ratio: 16/10; object-fit:cover; border-bottom:2px solid var(--cocoa)}
.card .body{padding:1rem}
.card h3{font-size:var(--fs-h3)}
.card p{font-size:.9rem; color:var(--cocoa-soft); margin-top:.35rem}
.card .link{margin-top:.7rem; display:inline-flex; align-items:center; gap:.35rem; font-weight:800; font-size:.84rem}
.card .link:hover{color:var(--raspberry)}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.6rem,4vw,3rem); align-items:center}
.about .frame{position:relative; background:var(--cream-2); border:2px solid var(--cocoa); border-radius:var(--r-lg); padding:.7rem; transform: rotate(-.7deg)}
.about .frame img{width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
.about .note{
  position:absolute; right:.9rem; bottom:.9rem;
  background:var(--butter); color:var(--cocoa); border:2px solid var(--cocoa);
  font-family:var(--font-hand); font-weight:700; font-size:1rem;
  padding:.45rem .6rem; border-radius: var(--r); transform: rotate(2deg);
}
.checks{display:grid; gap:.6rem; margin:1rem 0}
.check{display:flex; gap:.6rem; align-items:start; background:var(--cream); border:1px solid var(--line); border-radius: var(--r); padding:.75rem .85rem}
.check i{width:26px; height:26px; border-radius:50%; background:var(--mint); color:#fff; display:grid; place-items:center; flex:none; font-size:.8rem; font-style:normal}
.check b{font-size:.92rem}
.check span{font-size:.85rem; color:var(--cocoa-soft)}

/* ---------- Team ---------- */
.team{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
.person{
  background:var(--cream-3); border:2px solid var(--cocoa); border-radius:var(--r-lg); overflow:hidden; text-align:center;
}
.person img{width:100%; aspect-ratio: 1; object-fit:cover; border-bottom:2px solid var(--cocoa)}
.person .meta{padding:.9rem}
.person h4{font-size:1rem}
.person .role{font-family:var(--font-hand); font-size:1rem; color:var(--raspberry); font-weight:700}
.person .line{height:3px; background:var(--butter); border-radius:999px; margin-top:.6rem}

/* ---------- Testimonials ---------- */
.quotes{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
.quote{
  background:var(--cream-3); border:2px solid var(--cocoa); border-radius:var(--r-lg); padding:1.1rem;
  position:relative;
}
.quote::before{content:"“"; position:absolute; top:.2rem; right:.7rem; font-family:var(--font-display); font-size:3rem; color:var(--butter); line-height:1; opacity:.9}
.quote p{font-size:.92rem; color:var(--cocoa-soft); margin-top:.4rem}
.quote .who{display:flex; gap:.6rem; align-items:center; margin-top:.8rem}
.quote .who img{width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line-strong)}
.quote .who b{font-size:.9rem}
.quote .who span{font-size:.78rem; color:var(--muted)}
.stars{color:var(--butter-deep); letter-spacing:.06em; font-size:.9rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.6rem,4vw,3rem)}
.info{
  background:var(--cocoa); color:var(--cream); border:2px solid var(--cocoa); border-radius:var(--r-lg); padding:1.2rem;
}
.info h3{color:#fff}
.info .row{display:flex; gap:.7rem; align-items:start; padding:.85rem 0; border-top:1px solid #3D2A1E}
.info .row:first-of-type{border-top:0}
.info .ic{width:34px; height:34px; border-radius:50%; background:var(--butter); color:var(--cocoa); display:grid; place-items:center; flex:none; font-weight:800}
.info a{color:var(--cream)} .info a:hover{color:var(--butter)}
.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem}
.field label{font-family:var(--font-body); font-size:.76rem; font-weight:800; letter-spacing:.02em; color:var(--cocoa-soft)}
.field input, .field textarea, .field select{
  background:var(--cream-3); border:2px solid var(--line-strong); border-radius:12px; padding:.8rem 1rem;
  font-family:var(--font-body); font-size:.98rem; width:100%; transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--raspberry); box-shadow:0 0 0 3px rgba(217,79,90,.14)}
.field textarea{resize:vertical; min-height:118px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.form-err{color:var(--raspberry); font-weight:800; font-size:.82rem; margin-top:.5rem}
.form-ok{color:#1E7A3A; font-weight:800; font-size:.82rem; margin-top:.5rem}

/* ---------- Footer: bakery box ---------- */
.footer{background:var(--cocoa); color:var(--cream); border-top:4px solid var(--butter)}
.footer .container{padding-block: clamp(2rem,4vw,2.8rem); display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:1.6rem}
.footer .brand{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#fff}
.footer .brand em{font-style:normal; color:var(--butter)}
.footer p{color:#D9C6A8; font-size:.88rem}
.footer h4{font-family:var(--font-hand); font-size:1.1rem; color:var(--butter); margin-bottom:.6rem}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.footer ul a{color:var(--cream); font-size:.88rem}
.footer ul a:hover{color:var(--butter)}
.footer .base{grid-column:1/-1; border-top:1px solid #3D2A1E; margin-top:.6rem; padding-top:1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:#B8A090}
.footer .base a{color:#E8D9C0}

/* ---------- Reveal (sugar pop) ---------- */
.reveal{opacity:0; transform: translateY(14px) scale(.98); transition: opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.07s} .reveal.d2{transition-delay:.14s} .reveal.d3{transition-delay:.21s}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero .container{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr}
  .menu-grid{grid-template-columns: repeat(2,1fr)}
  .menu-item:nth-child(3n){border-right:1px solid var(--line)}
  .menu-item:nth-child(2n){border-right:0}
  .trio{grid-template-columns: repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .team{grid-template-columns: repeat(2,1fr)}
  .quotes{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer .container{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .navlinks{display:none}
  .burger{display:inline-grid; place-items:center}
  .navlinks.open{display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:var(--cream-3); border-bottom:2px solid var(--cocoa); padding:1rem var(--gutter)}
  .menu-grid{grid-template-columns:1fr}
  .menu-item{border-right:0 !important}
  .trio{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer .container{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .float{animation:none !important}
}