:root{
      --bg:#fff8f2;
      --card:#fff;
      --accent:#FB95A0;   /* your pink */
      --muted:#7a6b67;
      --glass: rgba(255,255,255,0.6);
      --maxw:1200px;
      --radius:14px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: 'Alegreya', serif;
      background: linear-gradient(180deg, #fff8f2 0%, #fff5f0 100%);
      color:#2b2b2b;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
    }

    /* ====== Contact Banner ====== */
    .contact-banner {
    position: relative;
    width: 100%;
    min-height: 55vh; /* adjust for smaller hero */
    background: linear-gradient(135deg, #FB95A0 0%, #fce4ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px; /* offset for navbar */
    overflow: hidden;
    }

    .contact-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("images/contact-bg.jpg") center/cover no-repeat;
    opacity: 0.35; /* dim background image */
    z-index: 0;
    }

    .contact-inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 20px;
    color: #fff;
    }

    /* curved logo inside banner */
    .contact-logo img {
    height: 160px;
    width: auto;
    border-bottom-left-radius: 40% 50%;
    border-bottom-right-radius: 40% 50%;
    display: block;
    margin: 0 auto 20px;
    }

    /* title & subtitle */
    .contact-title {
    font-family: 'Alegreya', serif;
    font-size: 2.2rem;
    margin-bottom: 10px;
    color: #000;
    }
    .contact-subtitle {
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.5;
    }

    /* container */
    .wrap{ max-width:var(--maxw); margin:0 auto; padding:28px; }

    /* hero */
    .hero{
      display:grid;
      grid-template-columns: 1fr 460px;
      gap:32px;
      align-items:center;
      margin-bottom:28px;
    }
    .hero-card{
      background:var(--card);
      border-radius:var(--radius);
      padding:28px;
      box-shadow: 0 10px 30px rgba(10,10,10,0.06);
      position:relative;
      overflow:hidden;
    }
    .hero-title{
      font-size:2.2rem;
      color:#2b2b2b;
      margin:0 0 8px 0;
      letter-spacing: -0.5px;
    }
    .hero-sub{ color:var(--muted); margin:0 0 18px 0; font-size:1rem; }
    .bakery-pill{ display:inline-flex; gap:10px; align-items:center; background:linear-gradient(90deg, rgba(251,149,160,0.08), rgba(251,149,160,0.04)); color:var(--accent); padding:8px 12px; border-radius:999px; font-weight:500; font-size:0.95rem; border:1px solid rgba(251,149,160,0.06); }

    /* hero image card */
    .hero-image{
      border-radius:var(--radius);
      overflow:hidden;
      height:100%;
      box-shadow: 0 10px 30px rgba(10,10,10,0.06);
    }
    .hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }

    /* layout grid (main) */
    .grid{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:28px;
      align-items:start;
    }

    /* contact form */
    .card{
      background:var(--card);
      border-radius:var(--radius);
      padding:20px;
      box-shadow: 0 8px 22px rgba(10,10,10,0.05);
    }
    form .row{ display:flex; gap:10px; margin-bottom:12px; }
    form .col{ flex:1; }
    label{ display:block; font-size:0.9rem; color:var(--muted); margin-bottom:6px; }
    input[type="text"], input[type="email"], textarea, select{
      width:100%;
      padding:11px 12px;
      border-radius:10px;
      border:1px solid rgba(0,0,0,0.07);
      background:linear-gradient(180deg, #fff, #fff);
      font-family:inherit;
      font-size:0.98rem;
      color:#222;
      outline:none;
    }
    textarea{ min-height:140px; resize:vertical; }
    .form-help{ font-size:0.9rem; color:var(--muted); margin-top:8px; }

    .btn{
      display:inline-flex; gap:10px; align-items:center; justify-content:center;
      background:var(--accent); color:#fff; padding:12px 18px; border-radius:10px; border:none; cursor:pointer; font-weight:600;
      box-shadow: 0 8px 18px rgba(251,149,160,0.12);
    }
    .btn.ghost{
      background:transparent; color:var(--accent); border:1px solid rgba(251,149,160,0.12); box-shadow:none;
    }

    /* side info */
    .info-list{ display:flex; flex-direction:column; gap:12px; }
    .info-item{ display:flex; gap:12px; align-items:flex-start; }
    .info-item .ico{ width:44px; height:44px; border-radius:10px; background:linear-gradient(180deg, rgba(251,149,160,0.08), rgba(251,149,160,0.03)); display:grid; place-items:center; color:var(--accent); font-size:1.1rem; border:1px solid rgba(251,149,160,0.06); }
    .info-item .meta{ font-size:0.95rem; color:var(--muted); }
    .info-item h4{ margin:0; font-size:1rem; color:#222; }

    /* hours card */
    .hours{ display:grid; gap:6px; }
    .hours .hrow{ display:flex; justify-content:space-between; color:var(--muted); font-size:0.95rem; }

    /* map placeholder */
    .map{ border-radius:12px; overflow:hidden; height:220px; background:linear-gradient(180deg,#efe6e0,#f8f1ee); display:grid; place-items:center; color:var(--muted); font-weight:600; border:1px dashed rgba(0,0,0,0.04); }

    /* FAQ */
    .faq{ margin-top:12px; }
    .faq-item{ border-radius:10px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); margin-bottom:8px; background:linear-gradient(180deg, #fff, #fff); }
    .faq-head{ padding:12px 14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
    .faq-body{ padding:12px 14px; border-top:1px solid rgba(0,0,0,0.03); color:var(--muted); display:none; }

    /* footer contact & newsletter small */
    .mini-footer{ display:flex; gap:12px; margin-top:18px; align-items:center; }
    .mini-footer input{ padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,0.06); }

    /* sticky mobile bar */
    .mobile-bar{ display:none; position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#fff,#fff); border-radius:999px; box-shadow:0 18px 38px rgba(10,10,10,0.18); z-index:80; padding:8px; gap:10px; }
    .mobile-bar a{ display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--accent); color:#fff; text-decoration:none; box-shadow:0 8px 18px rgba(251,149,160,0.14); }

    
    /* responsive */
    @media (max-width:980px){
      .hero{ grid-template-columns: 1fr; }
      .grid{ grid-template-columns: 1fr; }
      .hero-image{ height:220px; }
      .mobile-bar{ display:flex; }
      .wrap{ padding:18px; }
    }
    @media (max-width:540px){
      input, textarea{ font-size:0.95rem; }
      .hero-title{ font-size:1.7rem; }
    }

    /* small helpers */
    .muted{ color:var(--muted); font-size:0.95rem; }
    a.link{ color:var(--accent); text-decoration:none; font-weight:600; }

    /* tiny success message */
    .success {
      background: linear-gradient(90deg, rgba(251,149,160,0.12), rgba(251,149,160,0.06));
      border-left: 4px solid var(--accent);
      padding:10px 12px;
      border-radius:8px;
      color: #2b2b2b;
      margin-top:10px;
    }

    /* contact us */
    @media (max-width: 768px) {
    .contact-title { font-size: 1.8rem; }
    .contact-subtitle { font-size: 1rem; }
    .contact-logo img { height: 120px; }
    }
    @media (max-width: 480px) {
    .contact-title { font-size: 1.5rem; }
    .contact-subtitle { font-size: 0.95rem; }
    .contact-logo img { height: 100px; }
    }