/* Contact page: "Get In Touch" section and the contact form. */

.page-contact .page-banner { --banner-dim: .15; }

.contact {
  padding: 25px 0 75px;
  background: #f7ebe2 var(--tile) center / contain;
}
.contact__in {
  display: flex; flex-direction: column; gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
}

/* Red label heading (same style as the home page section titles) */
.label-title {
  align-self: center;
  max-width: 100%;
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--red);
  font: 400 42px/1 var(--tanker);
  letter-spacing: 3px;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
}

.contact__intro {
  padding-bottom: 30px;
  font: 400 21px/1.6 var(--ballinger);
  color: #000;
}

/* ---------- form ----------
   An "order slip" card in the site's own materials: a deep-green panel with the food
   line-art from the home page, torn into the paper-textured form; green Tanker labels with
   the original form's red asterisks; a perforated line above the red send button.
   contact.js adds the motion: the card rises in once when it scrolls into view, the
   button shows a spinner while sending, and on success the form side eases to a panel
   where a check mark draws itself. Without JavaScript the form posts normally. */

.contact-form {
  --cf-ink: #1d1d1b;
  --cf-muted: #5f5a52;
  --cf-line: #286330;
  --cf-focus: #364e38;
  --cf-focus-ring: rgba(54, 78, 56, .2);
  --cf-error: #b42318;
  --cf-gold: #e2a24f;
  --cf-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative;
  display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  width: 100%;
  border-radius: 14px;
  background: #ece6e0 var(--tile) 0 0 / 700px;
  box-shadow: 0 2px 4px rgba(19, 49, 21, .08), 0 30px 60px -30px rgba(19, 49, 21, .45);
  overflow: hidden;
}
.contact-form.is-resizing { transition: height .45s var(--cf-ease); }

/* ----- the green panel ----- */
.cf-aside {
  position: relative; z-index: 0;
  display: flex; flex-direction: column;
  padding: 52px 64px 48px 44px;
  background: var(--green-dark);
  color: #f3ebe1;
}
/* The home page's food line-art, faint and light on the green */
.cf-aside::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/media/textures/food-line-art-pattern.png") 0 0 / 560px repeat;
  filter: invert(1);
  opacity: .09;
}
/* Torn paper edge where the panel meets the form */
.cf-aside::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: 0;
  width: 26px;
  background: url("../img/torn-edge-v.png") right top / 26px auto repeat-y;
}
.cf-aside__title {
  margin: 0 0 16px;
  font: 400 46px/1 var(--tanker); letter-spacing: 1.5px;
  color: #fff;
}
.cf-aside__text {
  margin: 0 0 34px;
  font: 400 20px/1.5 var(--ballinger);
  color: rgba(243, 235, 225, .85);
}
.cf-aside__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.cf-aside__list li { display: flex; align-items: center; gap: 14px; font: 400 19px/1.35 var(--ballinger); }
.cf-aside__list a { color: #fff; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s var(--cf-ease); }
.cf-aside__list a:hover { background-size: 100% 1px; }
.cf-aside__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px;
  border: 1px solid rgba(226, 162, 79, .45); border-radius: 50%;
  background: rgba(226, 162, 79, .1);
}
.cf-aside__icon .icon { width: 17px; height: 17px; fill: var(--cf-gold); }
/* A bowl of hummus from the products page, peeking in from the bottom corner */
.cf-aside__dish {
  position: absolute; left: -84px; bottom: -96px; z-index: -1;
  width: 330px; height: auto;
  filter: drop-shadow(6px 12px 18px rgba(0, 0, 0, .45));
  pointer-events: none;
}
/* Tall enough that the bowl never reaches the details, even when the form side shrinks to
   the success message. */
@media (min-width: 1025px) { .cf-aside { min-height: 740px; } }

/* ----- the form side ----- */
.cf-main { position: relative; min-width: 0; padding: 44px 48px 40px 52px; }

.cf__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px;
  transition: opacity .2s;
}
.cf-field { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-field--half { grid-column: auto; }

.cf-field__label {
  display: block; margin-bottom: 7px; padding: 0;
  font: 400 19px/1.2 var(--tanker); letter-spacing: .5px;
  color: var(--green-dark);
}
.cf-field__req { padding-left: .2em; color: #e00; }
.cf-field__hint { font: 400 16px/1 var(--ballinger); letter-spacing: 0; color: var(--cf-muted); }

.cf-field__input {
  display: block; width: 100%; min-height: 50px;
  padding: 10px 16px;
  border: 1px solid var(--cf-line); border-radius: 6px;
  background: #fff;
  font: 400 19px/1.4 var(--ballinger); color: var(--cf-ink);
  transition: border-color .15s, box-shadow .15s;
}
.cf-field__input::placeholder { color: #9b958c; opacity: 1; }
.cf-field__input:focus { outline: none; border-color: var(--cf-focus); box-shadow: 0 0 0 4px var(--cf-focus-ring); }
textarea.cf-field__input { min-height: 140px; resize: vertical; }
.cf-field.is-invalid .cf-field__input { border-color: var(--cf-error); }
.cf-field.is-invalid .cf-field__input:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .15); }

.cf-field__meta { display: flex; align-items: flex-start; gap: 12px; }
.cf-field__error {
  margin: 7px 0 0;
  font: 400 15px/1.35 Roboto, sans-serif; color: var(--cf-error);
  animation: cf-drop .2s var(--cf-ease);
}
.cf-field__count {
  margin: 7px 0 0 auto; flex-shrink: 0;
  font: 400 15px/1.35 var(--ballinger); color: var(--cf-muted);
  font-variant-numeric: tabular-nums;
}
.cf-field__count.is-near { color: #9a5a06; }

/* Services: real checkboxes, drawn as tags */
.cf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cf-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 11px;
  border: 1px solid var(--cf-line); border-radius: 6px;
  background: #fff;
  font: 400 18px/1.2 var(--ballinger); color: var(--cf-ink);
  cursor: pointer; user-select: none;
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .15s, transform .15s;
}
.cf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-chip__box {
  display: grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid var(--cf-line); border-radius: 4px;
  background: #fff;
  transition: background-color .18s, border-color .18s;
}
.cf-chip__box svg {
  width: 12px; height: 12px;
  fill: none; stroke: var(--green-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16;
  transition: stroke-dashoffset .22s var(--cf-ease) .05s;
}
.cf-chip:hover { box-shadow: 0 2px 0 rgba(40, 99, 48, .35); transform: translateY(-1px); }
.cf-chip:active { transform: none; box-shadow: none; }
.cf-chip:has(input:checked) { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
.cf-chip:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--cf-focus-ring); }
.cf-chip input:checked + .cf-chip__box { border-color: #fff; background: #fff; }
.cf-chip input:checked + .cf-chip__box svg { stroke-dashoffset: 0; }

/* Perforated line, like a tear-off order slip */
.cf__footer {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 30px; padding-top: 28px;
  border-top: 2px dashed rgba(40, 99, 48, .35);
}
.cf-field--captcha { grid-column: auto; transition: opacity .2s; }

.cf-submit {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 230px; min-height: 58px;
  margin-left: auto; padding: 0 34px;
  border: 0; border-radius: 6px;
  background: var(--red);
  font: 400 27px/1 var(--tanker); letter-spacing: 1.5px; color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #6f1111, 0 14px 24px -14px rgba(111, 17, 17, .9);
  transition: background-color .2s, transform .15s, box-shadow .15s;
}
.cf-submit:hover { background: var(--red-hover); transform: translateY(-1px); box-shadow: 0 5px 0 #6f1111, 0 18px 28px -14px rgba(111, 17, 17, .9); }
.cf-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 #6f1111, 0 6px 14px -10px rgba(111, 17, 17, .9); }
.cf-submit:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 4px; }
.cf-submit__label { transition: opacity .2s, transform .2s; }
.cf-submit__spinner {
  position: absolute;
  width: 24px; height: 24px;
  border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%;
  opacity: 0;
  transition: opacity .2s;
}
.cf.is-sending .cf-submit { cursor: progress; transform: translateY(3px); box-shadow: 0 1px 0 #6f1111; }
.cf.is-sending .cf-submit__label { opacity: 0; transform: translateY(-6px); }
.cf.is-sending .cf-submit__spinner { opacity: 1; animation: cf-spin .8s linear infinite; }
.cf.is-sending .cf__grid, .cf.is-sending .cf-field--captcha { opacity: .5; pointer-events: none; }

.cf__banner {
  margin: 0 0 24px; padding: 14px 16px;
  border-left: 4px solid var(--red); border-radius: 6px;
  background: rgba(155, 25, 25, .07);
  font: 400 18px/1.4 var(--ballinger); color: #6d1414;
  animation: cf-drop .25s var(--cf-ease);
}
.cf__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----- success ----- */
.cf-success {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100%; padding: 30px 10px;
  text-align: center;
  outline: none;
}
.cf-success[hidden] { display: none; }
.cf-success__mark { width: 92px; height: 92px; margin-bottom: 22px; overflow: visible; }
.cf-success__circle { fill: var(--green-dark); stroke: var(--green-dark); stroke-width: 2; stroke-dasharray: 151; }
.cf-success__tick {
  fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36;
}
.cf-success__title { margin: 0 0 12px; font: 400 52px/1 var(--tanker); letter-spacing: 2px; color: var(--red); }
.cf-success__text { max-width: 420px; margin: 0 0 28px; font: 400 21px/1.5 var(--ballinger); color: var(--cf-ink); }
.cf-success__again {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 24px;
  border: 2px solid var(--green-dark); border-radius: 6px;
  font: 400 21px/1 var(--tanker); letter-spacing: 1px; color: var(--green-dark); text-decoration: none;
  transition: background-color .18s, color .18s;
}
.cf-success__again:hover { background: var(--green-dark); color: #fff; }
.cf-success__again:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--cf-focus-ring); }

/* Played only when contact.js shows the panel (a page that loads already-sent just shows it). */
.cf-success.is-in .cf-success__circle { animation: cf-draw-circle .7s var(--cf-ease) both, cf-fill .45s .45s both; }
.cf-success.is-in .cf-success__tick { animation: cf-draw-tick .4s var(--cf-ease) .7s both; }
.cf-success.is-in .cf-success__mark { animation: cf-pop .5s var(--cf-ease) .65s both; }
.cf-success.is-in .cf-success__title { animation: cf-rise .5s var(--cf-ease) .3s both; }
.cf-success.is-in .cf-success__text { animation: cf-rise .5s var(--cf-ease) .4s both; }
.cf-success.is-in .cf-success__again { animation: cf-rise .5s var(--cf-ease) .5s both; }

/* ----- entrance when the card first scrolls into view ----- */
.contact-form.is-pre { opacity: 0; transform: translateY(22px); }
.contact-form.is-revealing { transition: opacity .6s var(--cf-ease), transform .6s var(--cf-ease); }
.contact-form.is-revealing .cf-aside > :not(.cf-aside__dish) { animation: cf-slide .6s var(--cf-ease) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.contact-form.is-revealing .cf-aside__dish { animation: cf-dish 1.1s var(--cf-ease) .25s both; }
.contact-form.is-revealing .cf-main .cf-field,
.contact-form.is-revealing .cf__footer { animation: cf-rise .55s var(--cf-ease) both; animation-delay: calc(var(--i, 0) * 45ms + 200ms); }

@keyframes cf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cf-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes cf-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes cf-draw-circle { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 0; } }
@keyframes cf-draw-tick { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
@keyframes cf-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes cf-dish { from { opacity: 0; transform: translate(-30px, 40px) rotate(-28deg); } to { opacity: 1; transform: none; } }
@keyframes cf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .contact-form, .contact-form *, .contact-form *::before, .contact-form *::after { animation: none !important; transition: none !important; }
  .contact-form.is-pre { opacity: 1; transform: none; }
  .cf.is-sending .cf-submit__spinner { animation: cf-spin 1.6s linear infinite !important; }
}

@media (max-width: 1200px) {
  .cf-aside { padding: 44px 52px 40px 34px; }
  .cf-aside__title { font-size: 40px; }
  .cf-main { padding: 40px 36px 36px 40px; }
}
@media (max-width: 1024px) {
  .label-title { font-size: 40px; }
  .contact-form { grid-template-columns: minmax(0, 1fr); margin: 0 20px; width: auto; }
  /* Stacked: the green panel on top, torn along its bottom edge into the form */
  .cf-aside { padding: 40px 36px 58px; }
  .cf-aside::after {
    top: auto; right: 0; bottom: -1px; left: 0;
    width: auto; height: 30px;
    background: url("/media/textures/torn-paper-edge.png") center bottom / auto 60px repeat-x;
  }
  .cf-aside__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .cf-aside__dish { display: none; }
  .cf-main { padding: 26px 36px 36px; }
  .contact-form.is-revealing .cf-aside > :not(.cf-aside__dish) { animation-name: cf-rise; }
}
@media (max-width: 767px) {
  .label-title { font-size: 32px; }
  .contact-form { margin: 0 12px; border-radius: 12px; }
  .cf-aside { padding: 32px 22px 50px; }
  .cf-aside__title { font-size: 38px; }
  .cf-aside__text { font-size: 19px; margin-bottom: 26px; }
  .cf-aside__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cf-main { padding: 20px 18px 28px; }
  .cf__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cf-field--half { grid-column: 1 / -1; }
  .cf__footer { flex-direction: column; align-items: stretch; }
  .cf-field--captcha { align-self: center; }
  .cf-submit { width: 100%; margin-left: 0; }
  .cf-success__title { font-size: 44px; }
}
/* reCAPTCHA's box is a fixed 304px; shrink it on the narrowest phones. */
@media (max-width: 359px) {
  .cf-field--captcha .g-recaptcha { transform: scale(.9); transform-origin: 50% 0; }
}

/* The shared banner shrinks on phones (About's look); Contact's stays full size. */
@media (max-width: 767px) {
  .page-contact .page-banner { min-height: 500px; z-index: auto; background-position: center bottom; }
  .page-contact .page-banner__title { font-size: 72px; }
}