
:root{
  --chocolate:#5A2E1F;
  --deep:#3d1c14;
  --rose:#E75480;
  --rose2:#f33872;
  --blush:#FFC1CC;
  --pale:#fff0f4;
  --cream:#FFF5E6;
  --leaf:#6CAD6B;
  --ink:#3b2721;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fffaf8;line-height:1.6}
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 5.5vw;background:rgba(255,250,248,.96);border-bottom:1px solid #f3dfe4;backdrop-filter:blur(10px)}
.brand-lockup{display:block;width:360px;max-width:42vw}
.brand-lockup img{display:block;width:100%;height:86px;object-fit:contain;object-position:left center;border-radius:0}
nav{display:flex;gap:26px;align-items:center}
nav a{text-decoration:none;color:var(--chocolate);font-weight:800}
.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:linear-gradient(135deg,var(--rose2),var(--rose));color:white;text-decoration:none;padding:14px 22px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(231,84,128,.22);transition:.2s transform,.2s box-shadow}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(231,84,128,.28)}
.button.small{padding:10px 16px}
.button.ghost{background:white;color:var(--chocolate);border:2px solid var(--rose);box-shadow:none}
.hero{min-height:690px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:34px;padding:64px 6vw;background:radial-gradient(circle at 80% 20%,#ffd6e1 0%,transparent 33%),linear-gradient(135deg,#fff5f0,#ffe9ef 52%,#fff4e8)}
.hero-copy{max-width:760px}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-weight:900;color:var(--rose2);font-size:.78rem}
.hero h1{font-family:Georgia,serif;font-size:clamp(3.5rem,6.4vw,6.6rem);line-height:.94;margin:.18em 0 .28em;color:var(--chocolate);letter-spacing:-.035em}
.hero h1 .sweet-script{font-family:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive;color:var(--rose2);font-weight:400;letter-spacing:-.025em;display:inline-block;margin-top:.02em;line-height:.95;transform:rotate(-1deg)}
.lead{font-size:1.18rem;max-width:670px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.quick-points{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;font-weight:700;color:#72584d;font-size:.92rem}
.hero-visual{position:relative;min-height:560px;display:grid;grid-template-rows:auto 1fr;gap:18px;align-items:center;justify-items:center;padding-top:8px}

.hero-photo{width:100%;height:400px;object-fit:cover;border-radius:36px;border:7px solid rgba(255,255,255,.92);box-shadow:0 24px 60px rgba(90,46,31,.15)}
.section{padding:78px 6vw}
.center{text-align:center}
.section h2{font-family:Georgia,serif;font-size:clamp(2.4rem,4vw,4rem);line-height:1.05;margin:.15em 0 .3em;color:var(--chocolate)}
.intro{margin-top:0;color:#70594f}
.treats-section{background:#fffaf8}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.card{background:white;border-radius:24px;padding:26px;border:1px solid #f2d6df;box-shadow:0 14px 35px rgba(90,46,31,.07);transition:.2s transform,.2s box-shadow}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(90,46,31,.11)}
.card h3{margin:.3em 0;color:var(--chocolate);font-size:1.25rem}
.card p{color:#70594f}
.card a{font-weight:900;color:var(--rose2);text-decoration:none}

.pricing-box{margin-top:36px;background:linear-gradient(135deg,#fff0f4,#fff7eb);border:2px solid var(--blush);border-radius:28px;padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pricing-box>div{background:white;border-radius:18px;padding:20px;border:1px solid #f3dfe4}
.pricing-box h3{margin:.2em 0;color:var(--chocolate)}
.pricing-box small{grid-column:1/-1;color:#735c53}
.custom{display:grid;grid-template-columns:1fr 1fr;gap:46px;background:var(--cream);align-items:center}
.feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feature-list li{background:white;padding:18px;border-radius:16px;border-left:6px solid var(--rose);font-weight:800;box-shadow:0 8px 20px rgba(90,46,31,.05)}
.order-section{background:linear-gradient(#fff,#fff8fa)}
.order-heading{max-width:760px}
form{max-width:920px;margin-top:24px;background:white;border:1px solid #f2d6df;border-radius:28px;padding:30px;box-shadow:0 20px 55px rgba(90,46,31,.08)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
label{display:flex;flex-direction:column;font-weight:800;color:var(--chocolate)}
input,select,textarea{margin-top:7px;padding:14px 15px;border-radius:13px;border:1px solid #d9c8c1;font:inherit;background:#fffdfc;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(231,84,128,.1)}
.full{grid-column:1/-1}
.estimate-card{display:flex;flex-direction:column;gap:4px;background:linear-gradient(135deg,#fff0f4,#fff8e9);border:2px solid var(--blush);border-radius:18px;padding:20px;margin:10px 0 20px}
.estimate-card span{font-weight:900;color:var(--chocolate)}
.estimate-card strong{font-size:2.2rem;color:var(--rose2)}
.estimate-card small{color:#735c53}
.submit-button{min-width:245px}
.form-help{font-size:.9rem;color:#735c53;max-width:760px}
.hidden-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
footer{display:flex;justify-content:center;gap:26px;align-items:center;padding:30px 6vw;background:var(--chocolate);color:white;text-align:left}
footer img{width:92px;height:92px;object-fit:contain;background:white;border-radius:50%;padding:4px}
footer div{display:flex;flex-direction:column}
footer strong{font-size:1.2rem}
footer p{margin-left:auto}
.success-wrap{min-height:80vh;display:grid;place-items:center;padding:50px 8vw;background:linear-gradient(135deg,#fffaf7 0%,#ffe7ee 55%,#fff5e6 100%)}
.success-card{max-width:680px;text-align:center;background:#fff;border:2px solid var(--blush);border-radius:30px;padding:42px;box-shadow:0 18px 45px rgba(90,46,31,.1)}
.success-card .big{font-size:4rem}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:44px}
  .hero-visual{min-height:480px}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .site-header{padding:10px 18px}
  .brand-lockup{width:175px}
  nav{gap:10px}
  nav a:not(.button){display:none}
  .hero{min-height:auto;padding:48px 22px}
  .hero h1{font-size:3.5rem}
  .quick-points{gap:12px}
  .hero-visual{min-height:auto;display:grid;grid-template-columns:1fr;gap:18px;padding-top:10px}
  .hero-photo{grid-column:1;height:300px}
  .section{padding:58px 22px}
  .cards{grid-template-columns:1fr}
  .pricing-box,.custom,.feature-list,.form-grid{grid-template-columns:1fr}
  .pricing-box small,.full{grid-column:auto}
  form{padding:22px}
  footer{flex-direction:column;text-align:center}
  footer p{margin-left:0}
}


@media (max-width:720px){
  .hero-logo{
    position:static;
    width:170px;
    max-width:170px;
    justify-self:center;
    order:2;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,193,204,.85);
    border-radius:20px;
    padding:8px;
  }
  .hero-photo{order:1}
}

.treat-thumb{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:14px;
  display:block;
}
.card{overflow:hidden}
.card .treat-thumb + h3{margin-top:0}

.hero h1 .sweet-script{position:relative}
.hero h1 .sweet-script::after{
  content:"";
  position:absolute;
  left:8%;
  right:2%;
  bottom:-4px;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--rose2),transparent);
  border-radius:999px;
  opacity:.65;
  transform:rotate(-1deg);
}

@media (max-width:720px){
  .brand-lockup{width:235px;max-width:62vw}
  .brand-lockup img{height:70px}
  .hero-visual{min-height:auto;display:flex;padding-top:0}
  .hero-photo{width:100%;height:310px}
}

.hero-brand-display{
  width:min(500px,88%);
  height:185px;
  object-fit:cover;
  object-position:center;
  border-radius:24px;
  border:1px solid rgba(255,193,204,.75);
  box-shadow:0 12px 30px rgba(90,46,31,.10);
  background:white;
}
@media (max-width:720px){
  .hero-visual{min-height:auto;grid-template-rows:auto auto;gap:14px}
  .hero-brand-display{width:92%;height:150px}
  .hero-photo{height:300px}
}

/* Website v5.7 — Recent Creations + QR order card */
.section-heading-centered{max-width:820px;margin:0 auto 34px;text-align:center}
.recent-section{background:linear-gradient(180deg,#fffaf8 0%,#fff5f7 100%)}
.recent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.recent-card{margin:0;overflow:hidden;background:white;border:1px solid #f2d6df;border-radius:22px;box-shadow:0 12px 30px rgba(90,46,31,.07)}
.recent-card img{display:block;width:100%;height:290px;object-fit:cover}
.recent-card figcaption{padding:14px 16px 16px;font-weight:900;color:var(--chocolate)}
.more-creations{margin:24px auto 0}
.more-creations summary{width:max-content;max-width:100%;margin:0 auto;cursor:pointer;color:var(--rose2);font-weight:900;padding:10px 18px;border:1px solid var(--blush);border-radius:999px;background:white}
.more-grid{margin-top:20px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-left:auto;margin-right:auto}

.order-layout{display:grid;grid-template-columns:minmax(0,920px) minmax(280px,360px);gap:32px;align-items:start}
.order-layout form{margin-top:24px}
.qr-order-card{margin-top:24px;position:sticky;top:110px;text-align:center;background:linear-gradient(145deg,#fff,#fff4f7);border:2px solid var(--blush);border-radius:28px;padding:26px 24px;box-shadow:0 18px 45px rgba(90,46,31,.09)}
.qr-order-card h3{color:var(--chocolate);font-family:Georgia,serif;font-size:1.65rem;line-height:1.1;margin:.2em 0 .7em}
.qr-order-card img{display:block;width:min(230px,85%);aspect-ratio:1;object-fit:contain;margin:0 auto 18px;padding:10px;background:white;border-radius:18px;border:1px solid #ead7dc}
.qr-order-card p{color:#70594f}
.qr-order-card small{display:block;margin-top:10px;color:var(--rose2);font-weight:900;word-break:break-word}

@media (max-width:1050px){
  .order-layout{grid-template-columns:1fr}
  .qr-order-card{position:static;max-width:520px;width:100%}
}
@media (max-width:800px){
  .recent-grid,.more-grid{grid-template-columns:1fr}
  .recent-card img{height:300px}
}
