/* ============================================================================
   VALYON — Contact page (template-contact.php). Scoped to .contact-page (layout)
   + .ff-scope (Fluent Forms markup). Enqueued only on this template — nothing
   global. Tokens scoped here so the file is self-contained (exact handoff values).
   ========================================================================== */
.contact-page {
  --gold: #B8923E;
  --gold-soft: rgba(184,146,62,.28);
  --dark: #1C1A16;
  --muted: #6E665B;
  --line: #E7DDCC;
  --cream-soft: #FBF7F0;
  --success: #2F7350;
  --shadow-sm: 0 2px 10px rgba(28,26,22,.05);
  --shadow-md: 0 14px 34px -12px rgba(28,26,22,.18);
}
.contact-page .wrap { max-width: 1316px; margin: 0 auto; padding: 0 24px; }

/* breadcrumb */
.contact-page .ct-breadcrumb { padding-top: 24px; }
.contact-page .breadcrumb { font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.contact-page .breadcrumb a { color: var(--muted); transition: color .2s; }
.contact-page .breadcrumb a:hover { color: var(--gold); }
.contact-page .breadcrumb .sep { margin: 0 8px; opacity: .5; }

/* hero */
.contact-page .ct-hero { text-align: center; padding: 46px 0 12px; }
.contact-page .ct-hero .eyebrow { color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.contact-page .ct-hero .eyebrow::before, .contact-page .ct-hero .eyebrow::after { content: ""; width: 26px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold)); }
.contact-page .ct-hero .eyebrow::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.contact-page .ct-hero h1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 46px; line-height: 1.08; letter-spacing: -.015em; color: var(--dark); margin: 0; }
.contact-page .ct-hero p { max-width: 560px; margin: 16px auto 0; color: var(--muted); font-size: 17px; line-height: 1.6; }

/* layout */
.contact-page .ct-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; padding: 40px 0 30px; align-items: start; max-width: 1140px; margin: 0 auto; }

/* info column */
.contact-page .ct-info { display: flex; flex-direction: column; gap: 16px; }
.contact-page .ct-card { background: var(--cream-soft); border: 1px solid var(--gold-soft); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 24px 26px; }
.contact-page .ct-card.dark { background: radial-gradient(130% 150% at 0% -20%, #272218, #1C1A16 60%); border: none; box-shadow: var(--shadow-md); }
.contact-page .ct-method { display: flex; align-items: flex-start; gap: 15px; }
.contact-page .ct-method + .ct-method { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.contact-page .ct-method .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(160deg, #FBEFDC, #F3E2C4); border: 1px solid var(--gold-soft); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.contact-page .ct-method .mc .k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.contact-page .ct-method .mc .v { font-weight: 700; font-size: 17px; color: var(--dark); line-height: 1.35; }
.contact-page .ct-method .mc .v a { color: var(--dark); transition: color .2s; }
.contact-page .ct-method .mc .v a:hover { color: var(--gold); }
.contact-page .ct-method .mc .sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* hours (dark card) */
.contact-page .ct-card.dark .hh { display: flex; align-items: center; gap: 11px; color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.contact-page .ct-hours { display: flex; flex-direction: column; gap: 12px; }
.contact-page .ct-hours .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contact-page .ct-hours .row .d { font-size: 15px; color: #cfc8bd; }
.contact-page .ct-hours .row .t { font-size: 14.5px; font-weight: 700; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.contact-page .ct-hours .row.off .t { color: #8a8276; font-weight: 600; }
.contact-page .ct-card.dark .resp { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(184,146,62,.3); display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #c9c3b8; }
.contact-page .ct-card.dark .resp svg { color: var(--gold); flex: 0 0 auto; }

/* social */
.contact-page .ct-social { display: flex; gap: 10px; }
.contact-page .ct-social a { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(180deg, #C8A24E, #B0883A); display: flex; align-items: center; justify-content: center; color: #1C1A16; transition: transform .2s; }
.contact-page .ct-social a:hover { transform: translateY(-2px); }
.contact-page .ct-card .sl { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

/* form card shell (the form itself = .ff-scope below) */
.contact-page .ct-form-card { background: var(--cream-soft); border: 1px solid var(--gold-soft); border-radius: 18px; box-shadow: var(--shadow-md); padding: 32px 34px 34px; }
.contact-page .ct-form-card h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 26px; margin-bottom: 5px; color: var(--dark); }
.contact-page .ct-form-card .fsub { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }

/* FAQ teaser */
.contact-page .ct-faq { max-width: 1140px; margin: 0 auto; padding: 14px 0 80px; }
.contact-page .ct-faq .fh { text-align: center; margin-bottom: 26px; }
.contact-page .ct-faq .fh h2 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 30px; color: var(--dark); }
.contact-page .ct-faq .fh p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.contact-page .ct-faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-page .ct-faq-card { background: var(--cream-soft); border: 1px solid var(--line); border-radius: 14px; padding: 24px; transition: border-color .25s, box-shadow .25s, transform .25s; }
.contact-page .ct-faq-card:hover { border-color: var(--gold-soft); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.contact-page .ct-faq-card .ic { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(160deg, #FBEFDC, #F3E2C4); border: 1px solid var(--gold-soft); display: flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 15px; }
.contact-page .ct-faq-card h4 { font-weight: 800; font-size: 15px; margin-bottom: 7px; color: var(--dark); }
.contact-page .ct-faq-card p { font-size: 13.5px; color: #4d4639; line-height: 1.55; margin-bottom: 12px; }
.contact-page .ct-faq-card a { font-size: 13.5px; font-weight: 700; color: var(--dark); border-bottom: 1.5px solid var(--gold-soft); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.contact-page .ct-faq-card a:hover { color: var(--gold); }

/* ============================================================================
   Fluent Forms × the design — scoped to .ff-scope (inside the form card).
   Maps the Fluent Forms markup to the checkout-field look. (Ported from
   contact-fluentforms.css.)
   ========================================================================== */
.ff-scope { --err: #B23A4E; --err-soft: rgba(178,58,78,.08); }
.ff-scope .frm-fluent-form, .ff-scope .fluentform { margin: 0; }
.ff-scope .fluentform .ff-el-group { margin: 0 0 18px; }

/* rows / columns (Fluent "columns" → 2-up) */
.ff-scope .ff-el-group.ff-el-column-container,
.ff-scope .ff_columns_container,
.ff-scope .ff-t-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.ff-scope .ff-t-cell { min-width: 0; }
.ff-scope .ff-t-cell .ff-el-group { margin-bottom: 18px; }

/* labels */
.ff-scope .ff-el-input--label label,
.ff-scope .ff-el-input--label { display: block; font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 8px; line-height: 1.3; }
.ff-scope .ff-el-input--label .ff-el-is-required,
.ff-scope .ff-el-input--label span.ff-el-is-required { color: var(--gold); margin-left: 2px; }

/* inputs / select / textarea — checkout style */
.ff-scope .ff-el-input--content input[type=text],
.ff-scope .ff-el-input--content input[type=email],
.ff-scope .ff-el-input--content input[type=tel],
.ff-scope .ff-el-input--content input[type=number],
.ff-scope .ff-el-input--content input[type=url],
.ff-scope .ff-el-input--content select,
.ff-scope .ff-el-input--content textarea,
.ff-scope .ff-el-input--content .ff-el-form-control {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 15px; color: var(--dark); background: #fff;
  transition: border-color .2s, box-shadow .2s; box-shadow: none;
}
.ff-scope .ff-el-input--content input[type=text],
.ff-scope .ff-el-input--content input[type=email],
.ff-scope .ff-el-input--content input[type=tel],
.ff-scope .ff-el-input--content input[type=number],
.ff-scope .ff-el-input--content input[type=url],
.ff-scope .ff-el-input--content select { height: 52px; padding: 0 15px; }
.ff-scope .ff-el-input--content textarea { min-height: 140px; resize: vertical; padding: 14px 15px; line-height: 1.6; }

/* focus — gold ring */
.ff-scope .ff-el-input--content input:focus,
.ff-scope .ff-el-input--content select:focus,
.ff-scope .ff-el-input--content textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,146,62,.14); }
.ff-scope .ff-el-input--content input::placeholder,
.ff-scope .ff-el-input--content textarea::placeholder { color: #a89e8d; }

/* custom select chevron */
.ff-scope .ff-el-input--content select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E665B' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}

/* GDPR / checkbox */
.ff-scope .ff-el-form-check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 11px; margin: 6px 0 22px; }
.ff-scope .ff-el-form-check .ff-el-form-check-label,
.ff-scope .ff-el-form-check label { font-size: 13.5px; color: #4d4639; line-height: 1.5; font-weight: 500; cursor: pointer; margin: 0; }
.ff-scope .ff-el-form-check input[type=checkbox] { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--gold); }
.ff-scope .ff-el-form-check a { color: var(--gold); font-weight: 600; }

/* submit — ink button, full width */
.ff-scope .ff-el-group.ff_submit_btn_wrapper { margin-bottom: 0; }
.ff-scope .ff-btn-submit,
.ff-scope button.ff-btn-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #2b2620, #1C1A16); color: #fff; border: none;
  font-family: inherit; font-weight: 800; font-size: 15px; letter-spacing: .04em;
  padding: 17px 24px; border-radius: 8px; cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(28,26,22,.6); transition: transform .2s, box-shadow .2s;
}
.ff-scope .ff-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(28,26,22,.7); }
.ff-scope .ff-btn-submit:active { transform: translateY(0); }

/* error states (branded red) */
.ff-scope .ff-el-group.ff-el-is-error input,
.ff-scope .ff-el-group.ff-el-is-error select,
.ff-scope .ff-el-group.ff-el-is-error textarea,
.ff-scope .ff-el-is-error .ff-el-form-control { border-color: var(--err); background: var(--err-soft); }
.ff-scope .ff-el-group.ff-el-is-error input:focus,
.ff-scope .ff-el-group.ff-el-is-error textarea:focus,
.ff-scope .ff-el-group.ff-el-is-error select:focus { box-shadow: 0 0 0 3px rgba(178,58,78,.14); }
.ff-scope .error.text-danger,
.ff-scope .ff-el-is-error .text-danger,
.ff-scope .ff-el-input--content + .error { display: flex; align-items: center; gap: 6px; color: var(--err); font-size: 12.5px; font-weight: 600; margin-top: 7px; line-height: 1.4; }
.ff-scope .error.text-danger::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B23A4E' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* form-level error banner */
.ff-scope .ff-errors-in-stack,
.ff-scope .error_index { background: var(--err-soft); border: 1px solid rgba(178,58,78,.3); border-radius: 10px; padding: 12px 15px; margin-bottom: 18px; color: var(--err); font-size: 13.5px; font-weight: 600; }

/* success message — green seal + check */
.ff-scope .ff-message-success,
.ff-scope .ff_message_success { text-align: center; padding: 24px 18px 8px; color: #3a342a; font-size: 15px; line-height: 1.6; }
.ff-scope .ff-message-success::before {
  content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: #2F7350 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: 0 10px 22px -8px rgba(47,115,80,.55);
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 920px) {
  .contact-page .ct-layout { grid-template-columns: 1fr; gap: 20px; }
  .contact-page .ct-info { order: 2; }
  .contact-page .ct-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .contact-page .ct-hero { padding: 30px 0 8px; }
  .contact-page .ct-hero h1 { font-size: 32px; }
  .contact-page .ct-hero p { font-size: 15px; }
  .contact-page .ct-form-card { padding: 26px 22px 28px; }
  .contact-page .ct-faq .fh h2 { font-size: 25px; }
  .ff-scope .ff-el-group.ff-el-column-container,
  .ff-scope .ff_columns_container,
  .ff-scope .ff-t-container { grid-template-columns: 1fr; gap: 0; }
}