/* Shared layouts for Services, Gallery and Contact. */
#service-page .sp-hero { min-height: 310px; }
#service-page .sp-hero h1 { font-size: clamp(30px, 4vw, 44px); }
#service-page .sp-hero p { max-width: 570px; }
#service-page .sp-hero .sp-eyebrow { color: #f1d58d; font-size: 12px; }
#service-page .sp-hero .sp-actions { margin-top: 22px; }
#service-page :focus-visible, .gallery-dialog :focus-visible { outline: 3px solid #d3ad47; outline-offset: 5px; }
#service-page [hidden], .gallery-dialog [hidden] { display: none !important; }
#service-page .page-heading { max-width: 740px; margin-bottom: 27px; }
#service-page .page-heading > p:last-child { margin-top: 10px; color: #536879; }
#service-page .page-link { display: inline-flex; align-items: center; gap: 12px; padding: 7px 0; color: #082b4c; font-weight: 500; text-decoration: none; border-bottom: 1px solid #c9a54b; }
#service-page .page-link:hover { color: #85621d; }
#service-page .page-link::after { content: '\2192'; }

/* Service banners use the customer's event and food photographs. */
#service-page .service-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#service-page .service-feature { background: #fff; border: 1px solid #e2e9ee; overflow: hidden; }
#service-page .service-feature-photo { position: relative; height: 255px; overflow: hidden; }
#service-page .service-feature-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
#service-page .service-feature:hover .service-feature-photo img { transform: scale(1.03); }
#service-page .service-feature-photo span { position: absolute; bottom: 17px; left: 22px; padding: 5px 13px; background: #082b4c; color: #f1d58d; font: 500 12px/1.7 'Prompt', sans-serif; }
#service-page .service-feature-copy { padding: 25px 27px 27px; }
#service-page .service-feature-copy h3 { color: #082b4c; font: 500 26px/1.4 'Prompt', sans-serif; }
#service-page .service-feature-copy p { margin: 10px 0 16px; color: #536879; }
#service-page .service-compact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
#service-page .service-compact { display: flex; flex-direction: column; align-items: flex-start; padding: 25px; background: #fff; border: 1px solid #e2e9ee; border-top: 3px solid #d3ad47; }
#service-page .service-compact h3 { margin: 15px 0 7px; color: #082b4c; font: 500 22px/1.4 'Prompt', sans-serif; }
#service-page .service-compact p { color: #536879; font-size: 14px; margin-bottom: 18px; }
#service-page .service-compact .page-link { margin-top: auto; font-size: 14px; }
#service-page .page-icon { display: flex; width: 46px; height: 46px; align-items: center; justify-content: center; background: #f7f2e7; color: #8d6b21; border-radius: 50%; }
#service-page .page-icon svg { width: 24px; height: 24px; }
#service-page .service-process { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
#service-page .service-process li { border-top: 1px solid #d8e1e7; padding-top: 23px; counter-increment: step; }
#service-page .service-process li::before { content: '0' counter(step); display: block; margin-bottom: 11px; color: #a37c24; font: 400 30px/1 'Prompt', sans-serif; }
#service-page .service-process h3 { font: 500 20px/1.5 'Prompt', sans-serif; }
#service-page .service-process p { margin-top: 7px; color: #536879; font-size: 14px; }
#service-page .service-offers { padding: 28px 30px; background: #f4efe4; border-left: 3px solid #d3ad47; }
#service-page .service-offers h2 { font-size: 25px; margin-top: 0; }
#service-page .service-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 0 14px; }
#service-page .service-offer-grid strong { display: block; font: 500 20px/1.5 'Prompt', sans-serif; }
#service-page .service-offer-grid span { color: #596974; font-size: 14px; }
#service-page .service-offers > p { color: #596974; font-size: 13px; }

/* Filterable gallery with a native dialog lightbox. */
#service-page .gallery-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 27px; flex-wrap: wrap; }
#service-page .gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; }
#service-page .gallery-filters button { min-height: 44px; padding: 8px 20px; border: 1px solid #d4dfe7; background: #fff; color: #314b5e; font: 400 14px/1.7 'Noto Sans Thai', sans-serif; cursor: pointer; border-radius: 3px; }
#service-page .gallery-filters button[aria-pressed='true'] { color: #fff; background: #082b4c; border-color: #082b4c; }
#service-page .gallery-filters button:hover { border-color: #9d781d; }
#service-page .gallery-count { color: #647789; font-size: 13px; }
#service-page .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 22px; }
#service-page .gallery-item { margin: 0; background: #fff; border: 1px solid #e2e9ee; }
#service-page .gallery-item a { display: block; position: relative; overflow: hidden; aspect-ratio: 4/3; text-decoration: none; background: #dce3e8; }
#service-page .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
#service-page .gallery-item a:hover img { transform: scale(1.035); }
#service-page .gallery-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #ffffff8a; border-radius: 50%; color: #fff; background: #082b4ca6; font: 400 24px/1 sans-serif; }
#service-page .gallery-item figcaption { padding: 15px 18px 17px; }
#service-page .gallery-item figcaption span { font-size: 11px; color: #926d24; }
#service-page .gallery-item figcaption h3 { margin-top: 2px; font: 500 17px/1.5 'Prompt', sans-serif; }
#service-page .gallery-section { padding-bottom: 50px; }
.gallery-dialog { width: min(1080px, 94vw); max-width: 94vw; max-height: 94dvh; padding: 0; border: 1px solid #688195; background: #061d33; color: #fff; border-radius: 5px; overflow: auto; box-sizing: border-box; }
.gallery-dialog::backdrop { background: #010e1eeb; }
.gallery-dialog-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 15px 8px 22px; font: 400 13px/1.6 'Noto Sans Thai', sans-serif; color: #cad8e3; }
.gallery-dialog button { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; background: transparent; border: 1px solid #547086; border-radius: 50%; color: #fff; cursor: pointer; font: 400 27px/1 sans-serif; }
.gallery-dialog button:hover { background: #224058; }
.gallery-dialog figure { margin: 0; }
.gallery-dialog-image-wrap { display: grid; place-items: center; min-height: 120px; background: #031527; }
.gallery-dialog img { display: block; max-width: 100%; max-height: 66dvh; width: auto; height: auto; object-fit: contain; }
.gallery-dialog figcaption { padding: 17px 80px; text-align: center; font: 400 17px/1.6 'Prompt', sans-serif; }
.gallery-dialog-controls { display: flex; justify-content: center; gap: 16px; padding: 0 15px 18px; }

/* Contact links work directly, with no form or backend required. */
#service-page .contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 45px; }
#service-page .contact-card { padding: 27px 24px; border: 1px solid #e2e9ee; background: #fff; display: flex; flex-direction: column; align-items: flex-start; }
#service-page .contact-card h2 { margin-top: 15px; font-size: 23px; }
#service-page .contact-card > p { color: #536879; font-size: 14px; margin: 9px 0 18px; }
#service-page .contact-card .page-link { margin-top: auto; }
#service-page .contact-card .contact-number { display: block; color: #082b4c; font: 500 22px/1.9 'Prompt', sans-serif; text-decoration: none; }
#service-page .contact-card .contact-number:hover { color: #9d781d; }
#service-page .contact-card .contact-numbers { margin-bottom: 17px; }
#service-page .contact-line { border-top: 3px solid #d3ad47; }
#service-page .contact-line .page-icon { color: #198b34; background: #eff8ef; font: 600 10px/1 'Prompt', sans-serif; }
#service-page .contact-line .contact-qr { width: 122px; height: 122px; object-fit: contain; margin: 2px 0 14px; }
#service-page .contact-card .sp-button { font-size: 14px; margin-top: auto; }
#service-page .contact-address { display: grid; grid-template-columns: .8fr 1.2fr; background: #fff; border: 1px solid #e2e9ee; margin-bottom: 50px; }
#service-page .contact-address-copy { padding: 33px 30px; }
#service-page .contact-address h2 { font-size: 26px; }
#service-page .contact-address address { font-style: normal; margin: 16px 0 20px; color: #536879; }
#service-page .contact-address .address-note { font-size: 13px; color: #647789; margin-top: 17px; }
#service-page .contact-map { min-height: 330px; border: 0; width: 100%; height: 100%; display: block; background: #e3e9ed; }
#service-page .contact-ready { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
#service-page .contact-ready h2 { font-size: 28px; }
#service-page .contact-ready p { margin-top: 10px; color: #536879; }
#service-page .contact-checklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid #d8e1e7; counter-reset: checklist; }
#service-page .contact-checklist li { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid #d8e1e7; counter-increment: checklist; }
#service-page .contact-checklist li::before { content: '0' counter(checklist); color: #a37c24; font: 500 20px/1 'Prompt', sans-serif; }
#service-page .contact-checklist strong { font-weight: 500; }
#service-page .contact-checklist span { display: block; color: #647789; font-size: 13px; }
#service-page .contact-faq { margin-top: 42px; }
#service-page .contact-faq h2 { font-size: 28px; margin-bottom: 20px; }
#service-page .contact-faq details { border-top: 1px solid #d8e1e7; padding: 0 2px; }
#service-page .contact-faq details:last-child { border-bottom: 1px solid #d8e1e7; }
#service-page .contact-faq summary { position: relative; cursor: pointer; padding: 17px 34px 17px 0; color: #082b4c; font-weight: 500; list-style: none; }
#service-page .contact-faq summary::-webkit-details-marker { display: none; }
#service-page .contact-faq summary::after { content: '+'; position: absolute; right: 6px; top: 15px; color: #9d781d; font-size: 22px; }
#service-page .contact-faq details[open] summary::after { content: '\2212'; }
#service-page .contact-faq details p { max-width: 850px; padding: 0 25px 20px 0; color: #536879; font-size: 14px; }

@media (max-width: 900px) {
  #service-page .service-feature-photo { height: 220px; }
  #service-page .service-compact-grid, #service-page .contact-grid { gap: 13px; }
  #service-page .service-compact, #service-page .contact-card { padding: 22px 18px; }
  #service-page .contact-card .contact-number { font-size: 19px; }
  #service-page .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #service-page .sp-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  #service-page .sp-hero { min-height: 295px; }
  #service-page .sp-hero-copy { padding: 38px 0; }
  #service-page .sp-hero h1 { font-size: 32px; }
  #service-page .sp-hero p { font-size: 14px; }
  #service-page .sp-hero .sp-actions { margin-top: 18px; }
  #service-page .service-feature-grid, #service-page .service-compact-grid, #service-page .service-process, #service-page .service-offer-grid, #service-page .contact-grid, #service-page .contact-address, #service-page .contact-ready { grid-template-columns: 1fr; }
  #service-page .service-feature-copy { padding: 23px; }
  #service-page .service-compact-grid { gap: 16px; }
  #service-page .service-compact { padding: 23px; }
  #service-page .service-process { gap: 22px; }
  #service-page .service-offer-grid { gap: 13px; }
  #service-page .service-offers { padding: 24px; }
  #service-page .contact-grid { gap: 17px; }
  #service-page .contact-card { padding: 25px; }
  #service-page .contact-card .contact-number { font-size: 24px; }
  #service-page .contact-address-copy { padding: 26px; }
  #service-page .contact-map { min-height: 285px; }
  #service-page .contact-ready { gap: 24px; }
  #service-page .gallery-toolbar { gap: 14px; }
  #service-page .gallery-filters button { padding: 8px 15px; }
  #service-page .gallery-grid { gap: 17px; }
  #service-page .gallery-item figcaption { padding: 12px; }
  #service-page .gallery-item figcaption h3 { font-size: 15px; }
  .gallery-dialog figcaption { padding: 15px 20px; font-size: 15px; }
}

@media (max-width: 480px) {
  #service-page .gallery-grid { grid-template-columns: 1fr; }
  #service-page .gallery-item figcaption h3 { font-size: 18px; }
  #service-page .gallery-item figcaption { padding: 15px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #service-page .service-feature-photo img, #service-page .gallery-item img { transition: none; }
}
#service-page .bf-price-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
#service-page .bf-price-card{display:flex;flex-direction:column;min-height:205px;padding:21px 18px;background:#fff;border:1px solid #e2e9ee;border-top:3px solid #d3ad47}
#service-page .bf-price-card .bf-price{color:#a57e25;font:500 28px/1.25 'Prompt',sans-serif}
#service-page .bf-price-card .bf-price small{font:400 12px/1.5 'Noto Sans Thai',sans-serif}
#service-page .bf-price-card strong{margin-top:13px;color:#082b4c;font:500 18px/1.45 'Prompt',sans-serif}
#service-page .bf-price-card p{margin-top:5px;color:#647789;font-size:13px}
#service-page .bf-price-card a,#service-page .bf-card-link{display:inline-flex;margin-top:auto;padding-top:14px;color:#8c681e;font-size:13px;text-decoration:none}
#service-page .bf-price-card a:hover,#service-page .bf-card-link:hover{color:#082b4c}
#service-page .bf-menu{border-top:1px solid #d8e1e7}
#service-page .bf-menu:last-child{border-bottom:1px solid #d8e1e7}
#service-page .bf-menu summary{cursor:pointer;padding:16px 30px 16px 2px;color:#082b4c;font:500 17px/1.5 'Prompt',sans-serif;list-style:none;position:relative}
#service-page .bf-menu summary::-webkit-details-marker{display:none}
#service-page .bf-menu summary:after{content:'+';position:absolute;right:8px;color:#9d781d;font-size:22px}
#service-page .bf-menu[open] summary:after{content:'−'}
#service-page .bf-menu p{padding:0 30px 18px 2px;color:#536879;font-size:13px;line-height:1.9}
#service-page .bf-card-link{display:block;margin-top:10px;padding-top:0}
@media(max-width:900px){#service-page .bf-price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#service-page .bf-price-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#service-page .bf-price-card{min-height:190px;padding:17px 14px}#service-page .bf-price-card .bf-price{font-size:24px}}

#service-page .bf-service-terms{margin:0 0 45px;padding:27px 30px;background:#f7f2e7;border-top:3px solid #d3ad47}
#service-page .bf-service-terms h2{margin:0;color:#082b4c;font:500 26px/1.4 Prompt,sans-serif}
#service-page .bf-service-terms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}
#service-page .bf-service-terms-grid>div{padding:15px 17px;background:#fff;border:1px solid #e2e9ee}
#service-page .bf-service-terms-grid strong{color:#082b4c;font:500 16px/1.5 Prompt,sans-serif}
#service-page .bf-service-terms-grid p{margin-top:5px;color:#536879;font-size:13px;line-height:1.8}
@media(max-width:700px){#service-page .bf-service-terms{padding:22px 20px}.bf-service-terms-grid{grid-template-columns:1fr!important}}