:root {
  --canvas-w: 1672;
  --canvas-h: 941;
  --green: #0b3327;
  --green-2: #102f26;
  --copper: #b56434;
  --cream: #f7f2e9;
  --cream-2: #fffaf1;
  --ink: #1d2d25;
  --line: rgba(34, 55, 45, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #0b271f; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #0b271f; color: var(--ink); }
.desktop-site, .desktop-site * { user-select: none; -webkit-user-select: none; }
.modal, .modal *, .mobile-site, .mobile-site * { user-select: auto; -webkit-user-select: auto; }
.desktop-site ::selection { background: transparent; }
a { color: inherit; }

/* DESKTOP EXACT ARTBOARD */
.site-canvas { position: relative; width: min(100vw, 1672px); margin: 0 auto; background: var(--cream); overflow: hidden; box-shadow: 0 20px 55px rgba(0,0,0,.28); }
.homepage-art { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hotspot, .anchor { position: absolute; display: block; }
.hotspot { position: absolute; display: block; border: 0; background: rgba(255,255,255,0); cursor: pointer; z-index: 30; appearance: none; -webkit-appearance: none; padding: 0; margin: 0; color: transparent; font-size: 0; line-height: 0; pointer-events: auto; }
.hotspot:hover { background: rgba(181,100,52,.045); }
.hotspot:focus-visible, .field:focus-visible { outline: 2px solid rgba(181,100,52,.95); outline-offset: 2px; border-radius: 7px; }
.logo-link { left: 3.8%; top: 1.0%; width: 27.0%; height: 6.3%; }
.nav { top: 1.1%; height: 6.2%; }
.nav.home { left: 37.3%; width: 4.1%; }
.nav.services { left: 42.4%; width: 5.9%; }
.nav.about { left: 49.2%; width: 5.0%; }
.nav.areas { left: 55.3%; width: 8.2%; }
.nav.team { left: 64.4%; width: 4.6%; }
.nav.contact { left: 69.9%; width: 5.6%; }
.phone { left: 82.0%; top: 1.6%; width: 12.0%; height: 4.8%; border-radius: 8px; }
.facebook-link { left: 29.1%; top: 87.4%; width: 17.5%; height: 4.7%; border-radius: 8px; }
.hero-quote { left: 5.2%; top: 31.6%; width: 14.2%; height: 6.0%; border-radius: 10px; }
.hero-walkthrough { left: 19.1%; top: 31.6%; width: 16.3%; height: 6.0%; border-radius: 10px; }
.services-anchor { left: 0; top: 38.5%; width: 1px; height: 1px; }
.about-anchor { left: 0; top: 55.0%; width: 1px; height: 1px; }
.team-anchor { left: 0; top: 55.0%; width: 1px; height: 1px; }
.areas-anchor { left: 0; top: 55.0%; width: 1px; height: 1px; }
.contact-anchor { left: 0; top: 83.0%; width: 1px; height: 1px; }
.desktop-message-open { left: 45.8%; top: 84.5%; width: 32.2%; height: 15.1%; border-radius: 10px; z-index: 35; }
.inline-form { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.inline-form .field, .inline-form .send-message { position: absolute; pointer-events: none; border: 0; background: transparent; color: #222; font-size: clamp(7px, .62vw, 11px); font-family: Arial, Helvetica, sans-serif; padding: .25em .55em; outline-offset: 0; }
.inline-form .field { caret-color: var(--copper); }
.inline-form .field:focus { background: rgba(255,255,255,.42); box-shadow: 0 0 0 1px rgba(181,100,52,.35) inset; }
.inline-form .name { left: 48.2%; top: 87.8%; width: 13.6%; height: 2.7%; }
.inline-form .email { left: 62.2%; top: 87.8%; width: 15.2%; height: 2.7%; }
.inline-form .phone-input { left: 48.2%; top: 90.9%; width: 13.6%; height: 2.7%; }
.inline-form .service { left: 62.2%; top: 90.9%; width: 15.2%; height: 2.7%; appearance: none; color: transparent; }
.inline-form .service:focus, .inline-form .service:valid { color: #222; background: rgba(255,255,255,.62); }
.inline-form .message { left: 48.2%; top: 94.1%; width: 19.5%; height: 4.9%; resize: none; }
.inline-form .send-message { left: 69.2%; top: 94.1%; width: 7.2%; height: 4.5%; border-radius: 8px; cursor: pointer; }

/* MOBILE RESPONSIVE SITE */
.mobile-site { display: none; min-height: 100vh; background: var(--cream); color: var(--ink); }
.mobile-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; background: linear-gradient(135deg, #07261d, #0f3a2e); color: #fffaf1; border-bottom: 3px solid var(--copper); }
.mobile-brand { display: flex; gap: 10px; align-items: center; text-decoration: none; min-width: 0; }
.mobile-brand .mark { width: 42px; height: 42px; border: 1px solid rgba(209, 156, 96, .55); border-radius: 12px; display: grid; place-items: center; color: #dfb471; font-size: 20px; transform: rotate(-12deg); }
.mobile-brand strong { display: block; font: 700 22px/1 Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.mobile-brand small { display: block; color: #dfb471; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.mobile-call { text-decoration: none; background: var(--copper); color: #fff; font-weight: 900; border-radius: 999px; padding: 11px 14px; }
.mobile-nav { display: grid; grid-template-columns: repeat(3, 1fr); position: sticky; top: 71px; z-index: 29; background: #fffaf1; border-bottom: 1px solid #dfd2c0; }
.mobile-nav a { text-align: center; padding: 11px 6px; text-decoration: none; color: var(--green); font-weight: 800; font-size: 12px; border-right: 1px solid #eadfce; }
.mobile-hero { min-height: 640px; display: flex; align-items: flex-end; background: linear-gradient(rgba(6,25,20,.25), rgba(6,25,20,.78)), url('/assets/cabin-caterers-homepage-v25-no-inline-form.jpg') center top / cover no-repeat; color: #fffaf1; }
.mobile-hero-overlay { padding: 56px 20px 28px; width: 100%; background: linear-gradient(transparent, rgba(5,20,16,.86) 28%, rgba(5,20,16,.96)); }
.eyebrow { color: var(--copper); text-transform: uppercase; font-weight: 900; letter-spacing: .14em; font-size: 12px; margin: 0 0 8px; }
.mobile-hero h1, .mobile-section h2 { font-family: Georgia, 'Times New Roman', serif; margin: 0 0 12px; color: inherit; letter-spacing: -.02em; }
.mobile-hero h1 { font-size: clamp(40px, 12vw, 58px); line-height: .96; max-width: 560px; }
.mobile-hero p { max-width: 560px; margin: 0; font-size: 16px; line-height: 1.52; color: #f4eadc; }
.mobile-actions { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 20px; max-width: 460px; }
.mobile-actions button, .mobile-contact-form button { appearance: none; border: 0; border-radius: 12px; padding: 15px 18px; background: var(--copper); color: #fff; font-weight: 900; letter-spacing: .02em; cursor: pointer; }
.mobile-actions .outline { background: transparent; border: 1px solid rgba(255,255,255,.65); color: #fffaf1; }
.mobile-section { padding: 36px 18px; background: var(--cream); border-top: 1px solid rgba(29,45,37,.08); }
.mobile-section:nth-of-type(odd) { background: #fffaf1; }
.mobile-section h2 { color: var(--green); font-size: clamp(28px, 7vw, 40px); line-height: 1.03; }
.mobile-section > p:not(.eyebrow) { color: #4d5a53; line-height: 1.6; }
.mobile-grid { display: grid; gap: 13px; margin-top: 20px; }
.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-grid article { background: #fffdf8; border: 1px solid #e1d5c7; border-radius: 18px; padding: 16px; box-shadow: 0 12px 28px rgba(48, 37, 22, .08); }
.mobile-grid span { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #eef3ee; margin-bottom: 10px; font-size: 22px; }
.mobile-grid h3 { color: var(--green); margin: 0 0 6px; font: 700 17px/1.1 Georgia, 'Times New Roman', serif; }
.mobile-grid p { margin: 0; color: #4f5d56; font-size: 14px; line-height: 1.45; }
.promise-section { background: linear-gradient(135deg, #0c2e24, #123f32) !important; color: #fffaf1; }
.promise-section h2 { color: #fffaf1; }
.promise-section .eyebrow { color: #dfb471; }
.mobile-checks { display: grid; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; }
.mobile-checks li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 13px 14px 13px 40px; position: relative; line-height: 1.45; }
.mobile-checks li::before { content: '✓'; position: absolute; left: 15px; top: 12px; color: #dfb471; font-weight: 900; }
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-grid article { min-height: 116px; background: linear-gradient(180deg, #fffdf8, #f2eadf); }
.area-section { background: #f3eadf !important; }
.area-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.area-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 999px; background: #fffaf1; border: 1px solid #dbcbb8; color: var(--green); font-weight: 800; }
.area-pills span::before { content: '●'; color: var(--copper); font-size: 10px; }
.contact-section { background: #fffaf1 !important; }
.mobile-contact-form { display: grid; gap: 12px; margin-top: 18px; }
.mobile-contact-form .mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mobile-contact-form input, .mobile-contact-form select, .mobile-contact-form textarea { width: 100%; border: 1px solid #dbcdbd; border-radius: 12px; background: #fffdf8; padding: 14px 13px; color: var(--ink); font: inherit; }
.mobile-contact-form .choice-card { background: #fffdf8; border-color: #dbcdbd; }
.mobile-contact-form .check-grid { grid-template-columns: 1fr; }
.mobile-contact-form .check-option { font-size: 14px !important; }
.mobile-contact-form textarea { min-height: 104px; resize: vertical; }
.mobile-footer { display: grid; gap: 5px; padding: 26px 18px 34px; background: #0b2b22; color: #fffaf1; text-align: center; }
.mobile-footer strong { font: 700 26px/1 Georgia, 'Times New Roman', serif; }
.mobile-footer span { color: #dfb471; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.mobile-footer a { color: #fffaf1; margin-top: 10px; }

/* MODAL / TOAST shared by desktop and mobile */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5, 17, 14, .76); backdrop-filter: blur(3px); z-index: 50; padding: 20px; }
.modal[aria-hidden="false"] { display: flex; }
.modal-panel { width: min(94vw, 840px); max-height: 92vh; overflow-y: auto; background: #f8f2e8; border: 1px solid rgba(181,100,52,.35); border-radius: 18px; padding: 28px; box-shadow: 0 28px 80px rgba(0,0,0,.45); position: relative; }
.modal-close { position: absolute; right: 16px; top: 14px; width: 34px; height: 34px; border-radius: 99px; border: 1px solid rgba(11,51,39,.18); background: #fff7ee; color: var(--green); font-size: 25px; line-height: 1; cursor: pointer; }
.modal h2 { margin: 0 0 8px; font-size: 32px; color: var(--green); font-family: Georgia, 'Times New Roman', serif; }
.modal p { margin: 0 0 20px; color: #405047; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-form label { display: grid; gap: 6px; color: #21372e; font-weight: 700; font-size: 13px; }
.modal-form label.full { grid-column: 1 / -1; }
.modal-form input, .modal-form select, .modal-form textarea { width: 100%; border: 1px solid rgba(23,52,42,.18); border-radius: 10px; padding: 12px 13px; background: #fffdf8; color: #1f3028; font: inherit; font-weight: 400; }

.choice-card { border: 1px solid rgba(23,52,42,.16); border-radius: 14px; background: rgba(255,253,248,.82); padding: 14px; margin: 0; min-width: 0; }
.choice-card legend { padding: 0 6px; color: var(--green); font: 800 15px/1.2 Georgia, 'Times New Roman', serif; }
.choice-card legend small { display: block; color: #765f4e; font: 700 11px/1.35 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; margin-top: 3px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; margin-top: 10px; }
.check-option { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 8px !important; min-height: 0; padding: 9px 10px; border: 1px solid rgba(23,52,42,.12); border-radius: 11px; background: #fffaf1; font-weight: 700 !important; font-size: 13px !important; line-height: 1.25; cursor: pointer; }
.check-option input { width: 18px !important; min-width: 18px; height: 18px; margin: 0; accent-color: var(--copper); border-radius: 4px; }
.check-option span { display: block; min-width: 0; }
.stacked-note { display: grid; gap: 6px; margin-top: 11px; color: #21372e; font-weight: 700; font-size: 13px; }
.choice-card textarea { width: 100%; border: 1px solid rgba(23,52,42,.18); border-radius: 10px; padding: 12px 13px; background: #fffdf8; color: #1f3028; font: inherit; font-weight: 400; resize: vertical; }
.modal-form button { grid-column: 1 / -1; border: 0; border-radius: 10px; padding: 14px 18px; background: var(--copper); color: white; font-weight: 800; letter-spacing: .02em; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120px); background: #102f26; color: #fffaf3; border: 1px solid rgba(181,100,52,.7); border-radius: 999px; box-shadow: 0 15px 45px rgba(0,0,0,.35); padding: 12px 18px; z-index: 90; opacity: 0; transition: .22s ease; max-width: min(94vw, 680px); text-align: center; font-size: 15px; line-height: 1.35; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 760px) {
  html, body { background: var(--cream); }
  .toast { bottom: max(16px, env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); border-radius: 18px; padding: 12px 14px; font-size: 14px; }
  .desktop-site { display: none; }
  .mobile-site { display: block; }
  .modal-form { grid-template-columns: 1fr; }
  .modal-panel { padding: 22px; border-radius: 16px; }
  .modal-form .check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .mobile-contact-form .mini-grid { grid-template-columns: 1fr; }
  .mobile-brand small { max-width: 168px; }
  .mobile-call { padding: 10px 12px; }
  .service-grid, .team-grid { grid-template-columns: 1fr; }
  .mobile-hero { min-height: 590px; background-position: 56% top; }
  .mobile-hero-overlay { padding-top: 44px; }
}

.footer-email-overlay {
  position: absolute;
  left: 30.6%;
  top: 89.35%;
  width: 13.4%;
  height: 1.75%;
  z-index: 11;
  background: #f2ebe0;
  color: #20372e;
  display: flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(7px, .63vw, 11px);
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.mobile-email-line { font-weight: 800; color: var(--ink); }
.mobile-email-line a { color: var(--copper); text-decoration: none; overflow-wrap: anywhere; }
.modal-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px; }
.availability-alert { position:fixed; left:18px; right:18px; bottom:18px; z-index:80; max-width:860px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:12px 14px; background:rgba(11,51,39,.96); color:#fffaf1; border:1px solid rgba(181,100,52,.72); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.32); text-align:center; }
.availability-alert strong { font-family:Georgia,'Times New Roman',serif; font-size:18px; }
.availability-alert span { font-size:13px; color:#f1e1cb; }
.availability-alert button { border:0; border-radius:999px; background:var(--copper); color:#fff; padding:9px 13px; font-weight:900; cursor:pointer; }
@media (max-width: 760px) {
  .availability-alert { left:10px; right:10px; bottom:82px; border-radius:16px; padding:10px 12px; font-size:13px; }
  .availability-alert strong { width:100%; font-size:16px; }
  .availability-alert button { width:100%; }
  .mobile-hero { position:relative; overflow:hidden; background:#0b2b22 !important; }
  .mobile-hero::before { content:''; position:absolute; inset:0; background:url('/assets/cabin-caterers-homepage-v25-no-inline-form.jpg') 68% top / auto 100% no-repeat; opacity:.44; }
  .mobile-hero-overlay { position:relative; z-index:1; background:linear-gradient(transparent, rgba(5,20,16,.88) 18%, rgba(5,20,16,.98)); }
  .modal-mini-grid { grid-template-columns:1fr; }
}

/* CAREERS / EMPLOYMENT APPLICATION */
.careers-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 85;
  display: grid;
  gap: 2px;
  align-items: center;
  justify-items: center;
  min-width: 162px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(11, 51, 39, .96);
  color: #fffaf1;
  border: 1px solid rgba(181,100,52,.82);
  box-shadow: 0 18px 42px rgba(0,0,0,.34);
  text-decoration: none;
  text-align: center;
  user-select: auto;
  -webkit-user-select: auto;
}
.careers-float strong { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1; }
.careers-float span { color: #dfb471; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.careers-float:hover { background: #123f32; transform: translateY(-1px); }
.mobile-apply-action, .apply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  padding: 15px 18px;
  background: #0b3327;
  color: #fffaf1;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid rgba(223,180,113,.5);
}
.hire-section { background: linear-gradient(135deg, #fffaf1, #f0e5d6) !important; }
.apply-body { background: linear-gradient(180deg, #0b2b22 0, #0b2b22 280px, #f8f2e8 280px); color: var(--ink); }
.apply-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px clamp(16px,4vw,58px); background:linear-gradient(135deg,#07261d,#123f32); color:#fffaf1; border-bottom:4px solid var(--copper); position:sticky; top:0; z-index:20; }
.apply-brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:#fffaf1; }
.apply-brand .mark { width:46px; height:46px; border:1px solid rgba(223,180,113,.55); border-radius:14px; display:grid; place-items:center; color:#dfb471; font-size:22px; }
.apply-brand strong { display:block; font:700 28px/1 Georgia,'Times New Roman',serif; }
.apply-brand small { display:block; color:#dfb471; text-transform:uppercase; letter-spacing:.1em; font-size:10px; margin-top:3px; }
.apply-header-actions { display:flex; gap:10px; flex-wrap:wrap; }
.apply-header-actions a { color:#fff; background:var(--copper); text-decoration:none; padding:10px 13px; border-radius:10px; font-weight:900; }
.application-page { width:min(1120px, calc(100vw - 28px)); margin:0 auto; padding:38px 0 70px; }
.apply-hero-card { border-radius:26px; background:linear-gradient(rgba(5,20,16,.72),rgba(5,20,16,.88)), url('/assets/cabin-caterers-homepage-v25-no-inline-form.jpg') center top / cover no-repeat; color:#fffaf1; padding:clamp(26px,5vw,54px); box-shadow:0 22px 60px rgba(0,0,0,.28); border:1px solid rgba(223,180,113,.35); }
.apply-hero-card h1 { margin:0 0 12px; max-width:760px; font:700 clamp(40px,7vw,72px)/.94 Georgia,'Times New Roman',serif; letter-spacing:-.03em; }
.apply-hero-card p:not(.eyebrow) { max-width:740px; color:#f4eadc; font-size:18px; line-height:1.55; }
.application-card { margin-top:24px; background:#fffdf8; border:1px solid #dfd2c0; border-radius:24px; padding:clamp(18px,3vw,32px); box-shadow:0 18px 48px rgba(51,38,24,.12); }
.application-form { display:grid; gap:18px; }
.application-form fieldset { border:1px solid #e1d5c7; border-radius:18px; padding:18px; background:#fffaf1; }
.application-form legend { padding:0 8px; font:800 18px/1.2 Georgia,'Times New Roman',serif; color:var(--green); }
.application-form legend small { display:block; font:700 12px/1.2 Arial,Helvetica,sans-serif; color:#6b5b4d; margin-top:3px; }
.application-form .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:12px; }
.application-form label { display:grid; gap:6px; color:#20372e; font-weight:800; font-size:13px; }
.application-form input, .application-form select, .application-form textarea { width:100%; border:1px solid #dbcdbd; border-radius:12px; background:#fffdf8; padding:13px; color:var(--ink); font:inherit; }
.application-form textarea { resize:vertical; min-height:92px; }
.application-form .wide { grid-column:1/-1; }
.application-checks { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; }
.application-checks.single-column { grid-template-columns:1fr; }
.submit-application { width:100%; border:0; border-radius:14px; background:var(--copper); color:#fff; padding:16px 18px; font-weight:900; font-size:17px; cursor:pointer; }
.application-note { margin:12px 0 0; color:#5f6a62; line-height:1.5; font-size:13px; }
@media (max-width: 760px) {
  .careers-float { display:none; }
  .mobile-nav { grid-template-columns: repeat(5, 1fr); top:71px; }
  .mobile-nav a { font-size:11px; padding:10px 4px; }
  .apply-header { align-items:flex-start; flex-direction:column; }
  .apply-brand strong { font-size:24px; }
  .application-page { width:calc(100vw - 22px); padding:22px 0 50px; }
  .apply-hero-card { border-radius:20px; padding:26px 20px; }
  .apply-hero-card h1 { font-size:40px; }
  .application-form .form-grid { grid-template-columns:1fr; }
  .application-checks { grid-template-columns:1fr; }
  .application-card { border-radius:20px; padding:16px; }
}

/* v15 reliability fixes: make the desktop contact form truly usable without changing the artwork */
.inline-form { pointer-events: auto; z-index: 44; }
.inline-form .field, .inline-form .send-message { pointer-events: auto; z-index: 45; }
.inline-form .field { background: rgba(255,255,255,0.01); color: #23312a; }
.inline-form .field::placeholder { color: transparent; }
.inline-form .field:hover, .inline-form .field:focus { background: rgba(255,255,255,.54); box-shadow: 0 0 0 1px rgba(181,100,52,.36) inset; }
.inline-form .service { appearance: auto; -webkit-appearance: menulist; color: transparent; }
.inline-form .service:focus, .inline-form .service:valid { color: #23312a; }
.inline-form .send-message { background: rgba(181,100,52,0.01); }
.inline-form .send-message:hover, .inline-form .send-message:focus-visible { background: rgba(181,100,52,.12); }
.desktop-message-open { left: 45.8%; top: 83.35%; width: 32.2%; height: 3.8%; z-index: 32; }
.desktop-message-open:hover { background: rgba(181,100,52,.025); }

/* v15 mobile polish: no huge blocking toast and cleaner hero crop */
.toast { width: auto; max-width: min(92vw, 540px); }
@media (max-width: 760px) {
  .toast { left: 14px; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateY(120px); max-width: none; width: auto; border-radius: 14px; padding: 11px 12px; font-size: 13px; line-height: 1.35; }
  .toast.show { transform: translateY(0); }
  .mobile-hero { min-height: 540px; background:#0b2b22 !important; }
  .mobile-hero::before { background-position: 78% top; opacity: .30; }
  .mobile-hero-overlay { background: linear-gradient(rgba(5,20,16,.40), rgba(5,20,16,.90) 34%, rgba(5,20,16,.98)); padding-top: 34px; }
  .mobile-hero h1 { font-size: clamp(34px, 10vw, 48px); line-height: 1.02; }
  .mobile-hero p { font-size: 15px; }
}

.application-message { grid-column: 1/-1; margin: 0 0 12px; border-radius: 14px; padding: 14px; display: none; }
.application-message.ok, .application-message.error { display: block; }
.application-message.ok { background: #eaf4ed; color: #123b2a; border: 1px solid #b8d8c2; }
.application-message.error { background: #fff0eb; color: #8f2f20; border: 1px solid #e1b2a6; }


/* v15 reliability + mobile polish */
html, body { max-width: 100%; overflow-x: hidden; }
button, a, input, select, textarea { -webkit-tap-highlight-color: rgba(181,100,52,.18); }
.application-message { margin-top: 16px; border-radius: 14px; padding: 14px 16px; display: none; font-weight: 800; line-height: 1.45; }
.application-message.ok { display: block; background: #eaf4ed; color: #123b2a; border: 1px solid #b8d8c2; }
.application-message.error { display: block; background: #fff0eb; color: #8f2f20; border: 1px solid #e1b2a6; }
.submit-application:disabled, .modal-form button:disabled, .mobile-contact-form button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 760px) {
  .mobile-site { overflow-x: hidden; }
  .mobile-header { min-width: 0; }
  .mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; }
  .mobile-nav a { white-space: nowrap; }
  .mobile-hero { min-height: auto; background-position: 60% top; }
  .mobile-hero-overlay { padding: 72px 18px 28px; }
  .mobile-hero h1 { font-size: clamp(32px, 10vw, 46px); line-height: .98; max-width: 100%; overflow-wrap: normal; }
  .mobile-hero p { font-size: 15.5px; line-height: 1.48; max-width: 100%; }
  .mobile-section h2 { font-size: clamp(27px, 8.4vw, 38px); line-height: 1.04; overflow-wrap: break-word; }
  .toast { width: calc(100vw - 28px); max-width: 420px; border-radius: 18px; font-size: 14px; padding: 12px 14px; }
}
@media (max-width: 420px) {
  .mobile-brand strong { font-size: 20px; }
  .mobile-brand small { max-width: 150px; }
  .mobile-hero-overlay { padding-top: 54px; }
  .mobile-hero h1 { font-size: clamp(31px, 9.5vw, 40px); }
}

/* v25 hard fixes: desktop actions must not be blocked by the transparent inline form */
.inline-form { pointer-events: none !important; z-index: 44 !important; }
.inline-form .field, .inline-form .send-message { pointer-events: auto !important; z-index: 46 !important; }
.hero-quote, .hero-walkthrough { z-index: 86 !important; pointer-events: auto !important; }
.desktop-message-open { z-index: 87 !important; pointer-events: auto !important; }
.phone, .facebook-link, .nav, .logo-link { z-index: 70 !important; pointer-events: auto !important; }
.careers-float { z-index: 90 !important; }
.modal { z-index: 1000 !important; }
.modal-panel { z-index: 1001 !important; }

/* v25 mobile: keep the same approved desktop image as the first mobile visual, then make actions readable */
.mobile-exact-hero { display: grid; gap: 12px; padding: 12px; background: #0b271f; border-bottom: 3px solid var(--copper); }
.mobile-exact-hero img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(223,180,113,.45); box-shadow: 0 16px 44px rgba(0,0,0,.35); background: #0b271f; }
.mobile-exact-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.mobile-exact-actions button, .mobile-exact-actions a { appearance: none; border: 0; border-radius: 13px; padding: 15px 16px; text-align: center; text-decoration: none; background: var(--copper); color: #fff; font-weight: 900; letter-spacing: .02em; box-shadow: 0 10px 22px rgba(0,0,0,.20); cursor: pointer; }
.mobile-exact-actions .outline { background: transparent; border: 1px solid rgba(255,255,255,.65); color: #fffaf1; }
.mobile-exact-actions a { background: #fffaf1; color: var(--green); border: 1px solid rgba(223,180,113,.55); }
.mobile-intro-card { background: linear-gradient(135deg, #0b3327, #123f32) !important; color: #fffaf1; }
.mobile-intro-card h1 { margin: 0 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(32px, 10vw, 50px); line-height: .98; color: #fffaf1; letter-spacing: -.03em; }
.mobile-intro-card p:not(.eyebrow) { color: #f4eadc; line-height: 1.55; }
@media (max-width: 760px) {
  .mobile-hero { display: none; }
  .mobile-actions { display: none; }
}
@media (min-width: 761px) {
  .mobile-exact-hero, .mobile-intro-card { display: none !important; }
}

/* v25 click-through and mobile polish fixes */
.hero-quote, .hero-walkthrough, .desktop-message-open, .phone, .facebook-link, .nav, .logo-link, .careers-float {
  z-index: 90;
  pointer-events: auto !important;
  touch-action: manipulation;
}
.inline-form {
  pointer-events: none !important;
  z-index: 40;
}
.inline-form .field, .inline-form .send-message {
  pointer-events: auto !important;
  z-index: 45;
}
.inline-form .field {
  background: rgba(255,255,255,0.01);
  color: #23312a;
}
.inline-form .send-message {
  background: rgba(181,100,52,0.01);
}
.inline-form .send-message:hover, .inline-form .send-message:focus-visible {
  background: rgba(181,100,52,.14);
}
.mobile-actions a, .mobile-actions button {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 15px 18px;
  background: var(--copper);
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.mobile-actions a.outline, .mobile-actions button.outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.65);
  color: #fffaf1;
}
@media (max-width: 760px) {
  .mobile-hero {
    min-height: 680px;
    background-image: linear-gradient(rgba(6,25,20,.08), rgba(6,25,20,.72)), url('/assets/cabin-caterers-homepage-v25-no-inline-form.jpg') !important;
    background-size: auto 100%, auto 100% !important;
    background-position: center top, 64% top !important;
    background-repeat: no-repeat !important;
  }
  .mobile-hero::before { display:none !important; }
  .mobile-hero-overlay {
    background: linear-gradient(transparent 0, rgba(5,20,16,.82) 18%, rgba(5,20,16,.98));
    padding-top: 80px;
  }
}

/* v25 standalone quote/walkthrough/contact pages */
.form-page-body { background: linear-gradient(180deg, #0b2b22 0, #0b2b22 250px, #f8f2e8 250px); color: var(--ink); }
.form-page { width: min(1120px, calc(100vw - 28px)); margin: 0 auto; padding: 34px 0 70px; }
.form-hero-card { border-radius: 26px; background: linear-gradient(rgba(5,20,16,.68),rgba(5,20,16,.88)), url('/assets/cabin-caterers-homepage-v25-no-inline-form.jpg') center top / cover no-repeat; color: #fffaf1; padding: clamp(26px,5vw,54px); box-shadow: 0 22px 60px rgba(0,0,0,.28); border: 1px solid rgba(223,180,113,.35); }
.form-hero-card h1 { margin: 0 0 12px; max-width: 780px; font: 700 clamp(40px,7vw,72px)/.94 Georgia,'Times New Roman',serif; letter-spacing: -.03em; }
.form-hero-card p:not(.eyebrow) { max-width: 780px; color: #f4eadc; font-size: 18px; line-height: 1.55; }
.standalone-lead-card { margin-top: 24px; background: #fffdf8; border: 1px solid #dfd2c0; border-radius: 24px; padding: clamp(18px,3vw,32px); box-shadow: 0 18px 48px rgba(51,38,24,.12); }
.standalone-lead-form { display: grid; gap: 18px; }
.standalone-lead-form fieldset { border: 1px solid #e1d5c7; border-radius: 18px; padding: 18px; background: #fffaf1; }
.standalone-lead-form legend { padding: 0 8px; font: 800 18px/1.2 Georgia,'Times New Roman',serif; color: var(--green); }
.standalone-lead-form legend small { display: block; font: 700 12px/1.2 Arial,Helvetica,sans-serif; color: #6b5b4d; margin-top: 3px; }
.standalone-lead-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 12px; }
.standalone-lead-form label { display: grid; gap: 6px; color: #20372e; font-weight: 800; font-size: 13px; }
.standalone-lead-form input, .standalone-lead-form select, .standalone-lead-form textarea { width: 100%; border: 1px solid #dbcdbd; border-radius: 12px; background: #fffdf8; padding: 13px; color: var(--ink); font: inherit; }
.standalone-lead-form textarea { resize: vertical; min-height: 94px; }
.standalone-lead-form .wide { grid-column: 1/-1; }
.submit-lead-page { width: 100%; border: 0; border-radius: 14px; background: var(--copper); color: #fff; padding: 16px 18px; font-weight: 900; font-size: 17px; cursor: pointer; }
.submit-lead-page:disabled { opacity: .65; cursor: wait; }
.application-message { min-height: 20px; padding: 0; margin: 0; font-weight: 800; }
.application-message.ok, .application-message.error { padding: 12px 14px; border-radius: 12px; }
.application-message.ok { background: #eaf6ee; border: 1px solid #b7d8c2; color: #16422b; }
.application-message.error { background: #fff0ed; border: 1px solid #e2afa4; color: #7a241d; }
@media (max-width: 760px) {
  .form-page { width: calc(100vw - 22px); padding: 22px 0 50px; }
  .form-hero-card { border-radius: 20px; padding: 26px 20px; background-position: 60% top; }
  .form-hero-card h1 { font-size: 40px; }
  .standalone-lead-card { border-radius: 20px; padding: 16px; }
  .standalone-lead-form .form-grid { grid-template-columns: 1fr; }
}


/* v25 footer/contact repair: clean artwork alignment + precise clickable rows */
.footer-email-link { left: 29.2%; top: 87.25%; width: 17.9%; height: 3.0%; border-radius: 8px; z-index: 92 !important; }
.footer-website-link { left: 29.2%; top: 90.20%; width: 17.9%; height: 3.0%; border-radius: 8px; z-index: 92 !important; }
.facebook-link { left: 29.2% !important; top: 93.15% !important; width: 17.9% !important; height: 3.0% !important; border-radius: 8px; z-index: 92 !important; }
.footer-email-link:hover, .footer-website-link:hover, .facebook-link:hover { background: rgba(181,100,52,.06); }
@media (max-width: 760px) { .footer-email-link, .footer-website-link, .facebook-link { display:none !important; } }

/* v25 actual footer repair: new image filename avoids browser cache; rows realigned for clean contact block */
.footer-email-link { left: 29.4% !important; top: 86.95% !important; width: 18.8% !important; height: 2.75% !important; border-radius: 8px; z-index: 96 !important; }
.footer-website-link { left: 29.4% !important; top: 90.25% !important; width: 18.8% !important; height: 2.75% !important; border-radius: 8px; z-index: 96 !important; }
.facebook-link { left: 29.4% !important; top: 93.55% !important; width: 18.8% !important; height: 2.75% !important; border-radius: 8px; z-index: 96 !important; }

/* ================================================================
   v25 FINAL ALIGNMENT REPAIR
   Purpose: refine desktop footer/contact alignment, center hover targets,
   and tighten the clickable layer so the visual and active areas match.
   ================================================================ */
.hotspot { transition: background .14s ease, box-shadow .14s ease, transform .14s ease; }
.hotspot:hover,
.hotspot:focus-visible,
.careers-float:hover,
.careers-float:focus-visible {
  background: rgba(181,100,52,.08);
  box-shadow: inset 0 0 0 1px rgba(181,100,52,.55);
}
.nav:hover, .nav:focus-visible,
.logo-link:hover, .logo-link:focus-visible,
.phone:hover, .phone:focus-visible {
  background: rgba(181,100,52,.04);
}

/* keep all major desktop actions on the highest safe layer */
.logo-link, .nav, .phone, .hero-quote, .hero-walkthrough,
.footer-email-link, .footer-website-link, .facebook-link,
.desktop-message-open, .careers-float {
  z-index: 98 !important;
}

/* footer contact rows: centered to the visible wording block */
.footer-email-link {
  left: 29.55% !important;
  top: 85.95% !important;
  width: 18.25% !important;
  height: 2.95% !important;
  border-radius: 8px;
}
.footer-website-link {
  left: 29.55% !important;
  top: 89.18% !important;
  width: 18.25% !important;
  height: 2.95% !important;
  border-radius: 8px;
}
.facebook-link {
  left: 29.55% !important;
  top: 92.42% !important;
  width: 18.25% !important;
  height: 2.95% !important;
  border-radius: 8px;
}
.footer-email-link:hover,
.footer-website-link:hover,
.facebook-link:hover,
.footer-email-link:focus-visible,
.footer-website-link:focus-visible,
.facebook-link:focus-visible {
  background: rgba(181,100,52,.065) !important;
  box-shadow: inset 0 0 0 1px rgba(181,100,52,.48);
}

/* send-us-a-message title clickable band */
.desktop-message-open {
  left: 60.95% !important;
  top: 83.88% !important;
  width: 19.40% !important;
  height: 2.55% !important;
  border-radius: 8px;
}

/* inline form: align real fields tighter to the artwork */
.inline-form {
  pointer-events: none !important;
  z-index: 46 !important;
}
.inline-form .field,
.inline-form .send-message {
  pointer-events: auto !important;
  z-index: 99 !important;
  font-size: clamp(10px, .72vw, 13px) !important;
  line-height: 1.15 !important;
  color: #243129 !important;
  border-radius: 8px;
}
.inline-form .field {
  background: rgba(255,255,255,.07);
  padding: .38em .72em !important;
}
.inline-form .field:hover,
.inline-form .field:focus-visible {
  background: rgba(255,255,255,.62) !important;
  box-shadow: 0 0 0 1px rgba(181,100,52,.38) inset !important;
}
.inline-form .field::placeholder { color: transparent !important; }
.inline-form .name {
  left: 52.75% !important;
  top: 87.12% !important;
  width: 17.55% !important;
  height: 2.82% !important;
}
.inline-form .email {
  left: 70.65% !important;
  top: 87.12% !important;
  width: 17.55% !important;
  height: 2.82% !important;
}
.inline-form .phone-input {
  left: 52.75% !important;
  top: 90.28% !important;
  width: 17.55% !important;
  height: 2.82% !important;
}
.inline-form .service {
  left: 70.65% !important;
  top: 90.28% !important;
  width: 17.55% !important;
  height: 2.82% !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  color: transparent !important;
}
.inline-form .service:focus,
.inline-form .service:valid {
  color: #243129 !important;
  background: rgba(255,255,255,.68) !important;
}
.inline-form .message {
  left: 52.75% !important;
  top: 93.52% !important;
  width: 24.80% !important;
  height: 4.46% !important;
  resize: none;
}
.inline-form .send-message {
  left: 78.55% !important;
  top: 93.48% !important;
  width: 10.35% !important;
  height: 4.52% !important;
  cursor: pointer;
  background: rgba(181,100,52,.02) !important;
}
.inline-form .send-message:hover,
.inline-form .send-message:focus-visible {
  background: rgba(181,100,52,.15) !important;
}

/* slightly better small-laptop fit while preserving artwork scale */
@media (min-width: 761px) and (max-width: 1420px) {
  .site-canvas {
    width: min(100vw, 1600px);
  }
  .inline-form .field,
  .inline-form .send-message {
    font-size: clamp(9px, .75vw, 12px) !important;
  }
}


/* ================================================================
   v25 FINAL CLICK-LAYER CLEANUP
   Purpose: keep every desktop hotspot fully clickable while removing
   the visible tan/orange hover/focus rectangles that were showing over
   the contact rows, email, website, Facebook, title band, and buttons.
   Now Hiring remains visually styled. Forms still submit normally.
   ================================================================ */
.hotspot,
.hotspot:hover,
.hotspot:focus,
.hotspot:focus-visible,
.hotspot:active,
.hero-quote,
.hero-quote:hover,
.hero-quote:focus,
.hero-quote:focus-visible,
.hero-quote:active,
.hero-walkthrough,
.hero-walkthrough:hover,
.hero-walkthrough:focus,
.hero-walkthrough:focus-visible,
.hero-walkthrough:active,
.desktop-message-open,
.desktop-message-open:hover,
.desktop-message-open:focus,
.desktop-message-open:focus-visible,
.desktop-message-open:active,
.footer-email-link,
.footer-email-link:hover,
.footer-email-link:focus,
.footer-email-link:focus-visible,
.footer-email-link:active,
.footer-website-link,
.footer-website-link:hover,
.footer-website-link:focus,
.footer-website-link:focus-visible,
.footer-website-link:active,
.facebook-link,
.facebook-link:hover,
.facebook-link:focus,
.facebook-link:focus-visible,
.facebook-link:active,
.nav,
.nav:hover,
.nav:focus,
.nav:focus-visible,
.nav:active,
.logo-link,
.logo-link:hover,
.logo-link:focus,
.logo-link:focus-visible,
.logo-link:active,
.phone,
.phone:hover,
.phone:focus,
.phone:focus-visible,
.phone:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
  color: transparent !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.inline-form .field,
.inline-form .field:hover,
.inline-form .field:focus,
.inline-form .field:focus-visible,
.inline-form .field:active,
.inline-form .send-message,
.inline-form .send-message:hover,
.inline-form .send-message:focus,
.inline-form .send-message:focus-visible,
.inline-form .send-message:active {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}

.inline-form .field:focus,
.inline-form .field:focus-visible {
  background: rgba(255,255,255,.10) !important;
}

.inline-form .service,
.inline-form .service:hover,
.inline-form .service:focus,
.inline-form .service:focus-visible,
.inline-form .service:active,
.inline-form .service:valid {
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
}

.inline-form .service:focus,
.inline-form .service:valid {
  color: #243129 !important;
  background: rgba(255,255,255,.10) !important;
}

.careers-float,
.careers-float:focus,
.careers-float:focus-visible {
  color: #fffaf1 !important;
  outline: none !important;
}
.careers-float:hover,
.careers-float:focus-visible {
  background: #123f32 !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
  transform: translateY(-1px);
}


/* ================================================================
   v25 FINAL FIX: remove desktop inline form controls from the artboard.
   The bug was native input/select/textarea controls being placed directly
   over the screenshot artwork. When users typed or focused fields, text,
   caret, spellcheck, and browser focus UI appeared on top of the design.
   Desktop now uses one invisible hotspot over the message artwork that
   opens the proper modal form. Mobile and standalone forms remain real.
   ================================================================ */
@media (min-width: 761px) {
  #inlineContactForm,
  .desktop-site .inline-form,
  .desktop-site .inline-form * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  .desktop-message-open,
  .desktop-message-open:hover,
  .desktop-message-open:focus,
  .desktop-message-open:focus-visible,
  .desktop-message-open:active {
    left: 49.0% !important;
    top: 83.35% !important;
    width: 42.0% !important;
    height: 16.35% !important;
    z-index: 96 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
    color: transparent !important;
  }
  .careers-float {
    z-index: 140 !important;
  }
}