/* ==========================================================================
   SASA Packaging — CONTACT US + GET A QUOTE pages
   NEW file. Loaded after sasa-inner.css by those two pages only. Scoped to ".sxf".
   ========================================================================== */

.sxf {
  --f-ink: var(--sx-ink, #1f2b22);
  --f-muted: var(--sx-muted, #5b6b5f);
  --f-sage: var(--sx-sage, #b8cfb3);
  --f-deep: var(--sx-sage-deep, #84a282);
  --f-soft: var(--sx-sage-soft, #eef4ec);
  --f-ink2: var(--sx-sage-ink, #4d6b4f);
  --f-blush: var(--sx-blush, #f6e2e9);
  --f-line: var(--sx-line, rgba(31, 45, 34, 0.1));
  --f-line2: var(--sx-line-strong, rgba(31, 45, 34, 0.18));
}

.sxf-hero { padding-bottom: clamp(24px, 3vw, 40px); }
.sxf-lead { max-width: 62ch; margin: 16px 0 0; color: var(--f-muted); font-size: 1.08rem; line-height: 1.75; }

/* ----------------------------------------------------------- info cards */
.sxf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: clamp(28px, 4vw, 52px); }
.sxf-ic { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: 28px; background: #fff; border: 1px solid var(--f-line); box-shadow: 0 10px 28px rgba(31, 45, 34, 0.07); transition: transform 0.45s var(--ease, ease), box-shadow 0.45s var(--ease, ease), border-color 0.45s; }
.sxf-ic:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(31, 45, 34, 0.13); border-color: var(--f-sage); }
.sxf-ic i { flex: none; width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--f-soft); color: var(--f-ink2); }
.sxf-ic:nth-child(2) i { background: var(--f-blush); }
.sxf-ic i svg { width: 25px; height: 25px; }
.sxf-ic small { display: block; margin-bottom: 4px; color: var(--f-ink2); font: 700 0.7rem/1 var(--sx-font-body, inherit); letter-spacing: 0.16em; text-transform: uppercase; }
.sxf-ic strong, .sxf-ic a, .sxf-ic span.sxf-ic__t { display: block; color: var(--f-ink); font: 600 1.02rem/1.5 var(--sx-font-head, inherit); overflow-wrap: anywhere; }
.sxf-ic a:hover { color: var(--f-ink2); }

/* --------------------------------------------------------------- layout */
.sxf-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(22px, 3.5vw, 44px); align-items: start; }
.sxf-layout--quote { grid-template-columns: minmax(0, 1fr) 340px; }

.sxf-card { position: relative; padding: clamp(26px, 4.5vw, 54px); border-radius: 32px; background: #fff; border: 1px solid var(--f-line); box-shadow: 0 24px 60px rgba(31, 45, 34, 0.08); }
.sxf-card::before { content: ""; position: absolute; left: clamp(26px, 4.5vw, 54px); top: 0; width: 70px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--f-sage), var(--f-deep)); }
.sxf-head { margin-bottom: 28px; }
.sxf-head h2 { margin: 0 0 8px; color: var(--f-ink); font-family: var(--sxi-display, inherit); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.12; }
.sxf-head p { margin: 0; color: var(--f-muted); font-size: 1rem; line-height: 1.7; }

/* --------------------------------------------------------------- fields */
.sxf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.sxf-field--full { grid-column: 1 / -1; }
.sxf-field label { display: block; margin-bottom: 9px; color: var(--f-ink); font: 600 0.86rem/1 var(--sx-font-body, inherit); letter-spacing: 0.01em; }
.sxf input[type="text"],
.sxf input[type="email"],
.sxf input[type="tel"],
.sxf select,
.sxf textarea {
  display: block; width: 100%; margin: 0; padding: 15px 18px; border-radius: 16px;
  border: 1px solid var(--f-line2); background: #fff; color: var(--f-ink);
  font: 400 0.98rem/1.4 var(--sx-font-body, inherit); box-shadow: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.sxf input::placeholder, .sxf textarea::placeholder { color: #8e9a91; }
.sxf input:focus, .sxf select:focus, .sxf textarea:focus { outline: none; border-color: var(--f-deep); box-shadow: 0 0 0 4px rgba(132, 162, 130, 0.25); }
.sxf textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.sxf select {
  appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234d6b4f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px;
}
.sxf .field_error { border-color: #c0392b !important; box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12) !important; }

/* ----------------------------------------------------- quote form blocks */
.sxf-block { margin-top: 34px; padding-top: 34px; border-top: 1px dashed var(--f-line2); }
.sxf-block:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.sxf-block__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sxf-num { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #93b091, var(--f-deep)); color: #fff; font: 700 0.92rem/1 var(--sx-font-head, inherit); box-shadow: 0 8px 18px rgba(132, 162, 130, 0.35); }
.sxf-block__head h3 { margin: 0; color: var(--f-ink); font-family: var(--sxi-display, inherit); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }

/* file picker */
.sxf-drop { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 22px; border: 2px dashed var(--f-deep); background: var(--f-soft); cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.sxf-drop:hover, .sxf-drop:focus-within { background: #e6efe3; transform: translateY(-2px); }
.sxf-drop.field_error { border-color: #c0392b; }
.sxf-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sxf-drop__ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--f-ink2); box-shadow: 0 8px 18px rgba(31, 45, 34, 0.08); }
.sxf-drop__ico svg { width: 24px; height: 24px; }
.sxf-drop__txt strong { display: block; color: var(--f-ink); font: 600 1rem/1.3 var(--sx-font-head, inherit); overflow-wrap: anywhere; }
.sxf-drop__txt small { color: var(--f-muted); font-size: 0.85rem; }

/* submit row */
.sxf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.sxf-actions small { color: var(--f-muted); font-size: 0.88rem; }

/* Captcha (Cloudflare Turnstile) - sits between the fields and the submit button */
.sxf-captcha { margin-top: 26px; min-height: 65px; max-width: 420px; border-radius: 12px; }
.sxf-captcha .cf-turnstile { max-width: 100%; }
.sxf-captcha.field_error { outline: 2px solid rgba(176, 58, 46, 0.55); outline-offset: 4px; }
.sxf-captcha + .sxf-actions { margin-top: 22px; }
.sxf .sxi-btn[disabled], .sxf .sxi-btn.is-loading { opacity: 0.7; cursor: wait; pointer-events: none; }
.sxf-note { margin: 16px 0 0; font-size: 0.95rem; line-height: 1.5; }
.sxf-note:empty { display: none; }
.sxf-note.is-success { color: #2f6b3a; }
.sxf-note.is-error { color: #b03a2e; }

/* ----------------------------------------------------------- side panels */
.sxf-side { display: grid; gap: 18px; }
.sxf-side--sticky { position: sticky; top: calc(var(--sx-header-h, 72px) + 24px); }
.sxf-photo { position: relative; overflow: hidden; min-height: 340px; border-radius: 30px; background: linear-gradient(135deg, var(--f-sage), var(--f-deep)); box-shadow: 0 24px 56px rgba(31, 45, 34, 0.14); }
.sxf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sxf-panel { padding: 28px; border-radius: 28px; color: #fff; background: radial-gradient(240px 160px at 100% 0%, rgba(184, 207, 179, 0.35), transparent 70%), linear-gradient(135deg, #2b3f2f, #3f5a42); }
.sxf-panel h3 { margin: 0 0 8px; color: #fff; font-family: var(--sxi-display, inherit); font-size: 1.7rem; font-weight: 600; line-height: 1.15; }
.sxf-panel p { margin: 0 0 18px; color: rgba(255, 255, 255, 0.8); font-size: 0.97rem; line-height: 1.65; }
.sxf-box { padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--f-line); box-shadow: 0 10px 28px rgba(31, 45, 34, 0.07); }
.sxf-box h3 { margin: 0 0 16px; color: var(--f-ink); font: 600 1.05rem/1.2 var(--sx-font-head, inherit); }
.sxf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sxf-list li { display: flex; align-items: center; gap: 14px; }
.sxf-list i { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--f-soft); color: var(--f-ink2); }
.sxf-list li:nth-child(2) i { background: var(--f-blush); }
.sxf-list i svg { width: 22px; height: 22px; }
.sxf-list strong { display: block; color: var(--f-ink); font: 600 0.98rem/1.25 var(--sx-font-head, inherit); }
.sxf-list span { color: var(--f-muted); font-size: 0.88rem; }
.sxf-talk a { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: var(--f-ink); font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.sxf-talk a svg { flex: none; width: 20px; height: 20px; color: var(--f-deep); }
.sxf-talk a:hover { color: var(--f-ink2); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .sxf-layout, .sxf-layout--quote { grid-template-columns: 1fr; }
  .sxf-side--sticky { position: static; }
  .sxf-photo { min-height: 260px; }
}
@media (max-width: 820px) {
  .sxf-cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sxf-grid { grid-template-columns: 1fr; }
  .sxf-card { border-radius: 26px; }
  .sxf-drop { padding: 18px; }
}