/* ============================================================
   Forms — Artland Design (quote + contact pages)

   The form markup is generated by the Quform WordPress plugin
   and MUST stay untouched (so the WordPress migration is just
   "drop the plugin in and it works"). Everything below targets
   the .quform-* classes the plugin emits.

   Built on the tokens from style.css.
   ============================================================ */

.page-form {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(212, 164, 55, 0.10), transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(212, 164, 55, 0.05), transparent 40%),
    var(--bg);
  min-height: 100vh;
}

/* ============================================================
   Page hero (reuses portfolio's eyebrow + title pattern)
   ============================================================ */
.form-hero {
  padding: 140px 0 32px;
  position: relative;
}
/* The form's INPUT column stays at 980 px (see `.form-container` below)
   for comfortable reading — but the hero band uses the regular page
   container width (1280 px) so the title + eyebrow are visually as wide
   as Works / About / hub pages. Without this override the form-page hero
   was ~300 px narrower than every other page's hero. */
.form-hero .container { max-width: var(--container); }

/* --- Image-background variant of .form-hero --------------------------
   Added by page-with-hero.php when the page has a featured image. Promotes
   the image to a full-bleed background with the same dark gradient overlay
   .post-hero--image-bg uses, so the editorial .form-hero band (eyebrow +
   title + right-column subtitle) reads cleanly on top. form-page.php
   (Contact / Quote) never adds this modifier and so is unaffected. */
.form-hero--image-bg {
  /* Give the section a sensible floor so cover doesn't crop a wide image
     into a thin horizontal slice when the hero content is short (Contact
     and Quote have brief headlines). 60vh was excessive; ~420px gives
     the image its own visual presence while staying way shorter than the
     About hero. */
  min-height: 420px;
  overflow: hidden;
}

/* No-image form-hero (the plain version page-with-hero.php renders when
   the page has no featured image): without an image to bridge the hero
   and body visually, the body needs MORE breathing room rather than less,
   so the gap reads as intentional spacing instead of "the image failed
   to load". Only applies when the hero is NOT the image-bg variant. */
.form-hero:not(.form-hero--image-bg) + .page-body {
  padding-top: 64px;
}
.form-hero--image-bg::before,
.form-hero--image-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.form-hero--image-bg::before {
  background-image: var(--hero-bg);
  background-size: cover;
  /* Default to centered; the per-post Hero Image Position picker
     sets `--hero-focal` to "X% Y%" when an editor repositions. */
  background-position: var(--hero-focal, 50% 50%);
  background-repeat: no-repeat;
  z-index: 0;
}
/* Contact (#349) and Get-a-Free-Quote (#347) anchor to the image bottom so
   the kitchen/desk subjects in those photos sit at the visible bottom of
   the hero rather than being cropped above the fold. About (#327) and any
   other page-with-hero page stay center-anchored. */
body.page-id-347 .form-hero--image-bg::before,
body.page-id-349 .form-hero--image-bg::before {
  /* Anchor to image bottom as the page-specific DEFAULT, but defer to
     the editor's Hero Image Position picker when it has been set. */
  background-position: var(--hero-focal, 50% 100%);
}
.form-hero--image-bg::after {
  /* DEFAULT — original 3-stop vertical + horizontal-up-to-60%. */
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.30) 30%, rgba(10, 10, 10, 0.85) 100%),
    linear-gradient(90deg,  rgba(10, 10, 10, 0.65) 0%, rgba(10, 10, 10, 0.10) 60%);
  z-index: 1;
}
.form-hero--image-bg.has-hero-overlay::after {
  /* CUSTOM — per-edge alphas from CSS vars, applied only when post has
     saved values in `_artland_hero_overlay`. */
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, var(--hero-overlay-top,    0.55)) 0%,
      rgba(10, 10, 10, var(--hero-overlay-bottom, 0.85)) 100%),
    linear-gradient(90deg,
      rgba(10, 10, 10, var(--hero-overlay-left,   0.65)) 0%,
      rgba(10, 10, 10, var(--hero-overlay-right,  0.10)) 100%);
}
.form-hero--image-bg .container { position: relative; z-index: 2; }
.form-hero--image-bg .pf-title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.form-hero--image-bg .pf-eyebrow-text { color: #fff; }
.form-hero--image-bg .pf-eyebrow-line {
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.25) 55%,
    rgba(255, 255, 255, 0)    100%);
}
.form-hero--image-bg .pf-desc p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.form-hero--image-bg .pf-desc::before {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.35) 60%,
    rgba(255, 255, 255, 0)    100%);
}

.form-hero .pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.form-hero .pf-eyebrow-text {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.form-hero .pf-eyebrow-line {
  width: 90px;
  height: 1px;
  background: linear-gradient(to right,
    var(--gold) 0%,
    rgba(212, 164, 55, 0.55) 55%,
    rgba(212, 164, 55, 0) 100%);
  display: block;
}
.form-hero .pf-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}
.form-hero .pf-title span {
  color: var(--gold);
  font-weight: 400;
  font-style: italic;
  text-shadow:
    0 0 22px rgba(212, 164, 55, 0.22),
    0 0 55px rgba(212, 164, 55, 0.12);
}

/* Side-by-side layout — mirrors the portfolio's .pf-hero-head:
   eyebrow + title on the left, gold-accented description on the right.
   align-items: start anchors both columns to the row's TOP. With the old
   `end` setting, a two-line title (e.g. About) stretched the row tall and
   the subtitle got pushed all the way down to the bottom of that row —
   visually disconnected from the title. Top-alignment keeps the subtitle
   parallel to the eyebrow on every page regardless of how the title wraps. */
.form-hero .pf-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.form-hero .pf-intro { min-width: 0; }
.form-hero .pf-desc {
  position: relative;
  padding-left: 22px;
  padding-bottom: 4px;
  max-width: 460px;
  justify-self: end;
}
.form-hero .pf-desc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(212, 164, 55, 0.85) 0%,
    rgba(212, 164, 55, 0.35) 60%,
    rgba(212, 164, 55, 0) 100%);
}
.form-hero .pf-desc p {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 400;
}

@media (max-width: 1100px) {
  .form-hero .pf-hero-head {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .form-hero .pf-desc {
    justify-self: start;
    max-width: 560px;
  }
}
@media (max-width: 720px) {
  .form-hero .pf-desc { padding-left: 18px; }
  .form-hero .pf-desc p { font-size: 14px; line-height: 1.7; }
}

/* Legacy stacked-intro style — kept in case any post hand-uses .form-intro. */
.form-intro {
  margin: 22px 0 0;
  max-width: 620px;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
}

/* ============================================================
   Form shell
   ============================================================ */
.form-section { padding: 28px 0 90px; }
.form-container { max-width: 980px; }

/* The <form> element we wrap around the quform-elements fragment */
.quform-form {
  display: block;
}

.quform-elements,
.quform-element-page > .quform-child-elements {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Reset Quform's default margin spacers — we drive spacing via gap */
.quform-spacer { display: block; }
.quform-cf::after { content: ""; display: table; clear: both; }

/* ============================================================
   Groups (visual sections)
   ============================================================ */
.quform-element-group {
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 26px 28px 22px;
  position: relative;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.quform-element-group.quform-group-style-plain {
  background: transparent;
  border: none;
  padding: 0;
}

/* GLOBAL Quform overrides — must run for every page that hosts a Quform form,
   not just the contact layout. The plugin paints a white inner card (#fff bg
   + #e3e3e3 border + 20px padding) inside every bordered group. Strip that
   inner box (our outer chrome handles the visual) but keep a 20px bottom
   margin on each bordered group as breathing room between stacked cards. */
.quform-element-group.quform-group-style-bordered {
  margin: 0 0 20px 0 !important;
}
.quform-element-group.quform-group-style-bordered > .quform-child-elements,
.quform-element-group.quform-group-style-bordered > .quform-spacer > .quform-child-elements {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.quform-element-group .quform-group-title-description {
  margin-bottom: 10px;
}
.quform-element-group .quform-group-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 164, 55, 0.18);
}

/* Child wrapper — vertical rhythm between sections inside a group. 20px is a
   comfortable middle ground: tight enough that adjacent field rows (Name/
   Email/Phone row → Phone/Company/Profession row) don't feel marooned, and
   roomy enough that conceptually-distinct sections (slider, checkbox group,
   dropdown row, textarea, file upload, captcha) still read as separate. */
.quform-element-group > .quform-spacer > .quform-child-elements,
.quform-element-group > .quform-child-elements {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================================
   Rows / columns (Quform's layout grid)
   ============================================================ */
/* Quform's own row/column CSS is a float-based grid (clearfix on .quform-row,
   columns float left with `width: 33.33%` + 10px side padding, row has
   `margin: 0 -10px !important` to compensate). We previously turned the row
   into `display: grid` with `1fr 1fr 1fr` tracks — but the plugin's
   `width: 33.33%` on each column then resolves to 33% of the grid CELL
   (which is already 33% of the row), shrinking every column to ~11% of the
   row. That is why every input was rendering as a tiny ~80px square.

   Leave Quform's float layout in place. Just normalize the row margin (the
   plugin's negative -10px makes the row stick out past our card padding) and
   ensure columns clear at the end. */
.quform-element-row {
  margin: 0 !important;
}
.quform-element-row > .quform-element-column {
  padding: 0 8px;
}
.quform-element-row > .quform-element-column:first-child { padding-left: 0; }
.quform-element-row > .quform-element-column:last-child  { padding-right: 0; }

/* ============================================================
   Labels
   ============================================================ */
.quform-label { margin-bottom: 8px; }
.quform-label-text {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.quform-required {
  color: #ff6060;
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-left: 6px;
  font-weight: 500;
  text-transform: none;
  opacity: 0.85;
}
/* Plugin's dark theme paints `.quform-required` red via
   `.quform-theme-dark .quform-label > .quform-label-text > .quform-required`
   (specificity 0,3,0). Re-assert our chosen #ff6060 at matching specificity. */
.quform-theme-dark .quform-label > .quform-label-text > .quform-required {
  color: #ff6060;
}

/* ============================================================
   Text inputs / email / textarea / select — shared. We have to outweigh
   `.quform-theme-dark .quform-field-text` from the plugin (specificity 2),
   so prefix our selectors with `.quform` to match it.
   ============================================================ */
.quform .quform-field-text,
.quform .quform-field-email,
.quform .quform-field-textarea,
.quform .quform-field-select,
.quform .quform-field-captcha {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text);
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 13px 16px;
  outline: none;
  transition:
    border-color .25s var(--ease),
    background-color .25s var(--ease),
    box-shadow .35s var(--ease);
}
.quform .quform-field-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}
.quform .quform-field-text::placeholder,
.quform .quform-field-email::placeholder,
.quform .quform-field-textarea::placeholder {
  color: var(--text-muted);
}

.quform .quform-field-text:hover,
.quform .quform-field-email:hover,
.quform .quform-field-textarea:hover,
.quform .quform-field-select:hover,
.quform .quform-field-captcha:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.quform .quform-field-text:focus,
.quform .quform-field-email:focus,
.quform .quform-field-textarea:focus,
.quform .quform-field-select:focus,
.quform .quform-field-captcha:focus {
  border-color: rgba(212, 164, 55, 0.6);
  background: rgba(10, 10, 10, 0.9);
  box-shadow:
    0 0 0 1px rgba(212, 164, 55, 0.15),
    0 0 22px -6px rgba(212, 164, 55, 0.25);
}

/* ============================================================
   Select — native (closed state only; OS controls the open panel)
   ============================================================ */
.quform-input-select {
  position: relative;
}
.quform-input-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  pointer-events: none;
  background-color: var(--gold);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.quform-field-select {
  padding-right: 40px;
  cursor: pointer;
}
.quform-field-select option {
  background: #141414;
  color: var(--text);
}

/* ============================================================
   Select — JS-enhanced custom dropdown (replaces the OS panel)
   ============================================================
   `quform-select.js` wraps every native <select> in an .als-wrap, hides
   the native control via .als-hidden-native, and renders a custom
   trigger + panel matching the dark/gold theme. The native select stays
   in the DOM so Quform's validation, conditional logic, and form
   submission keep working — selecting a custom option just updates the
   native value and dispatches a `change` event. */
.als-wrap {
  position: relative;
}
.als-hidden-native {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.als-wrap .als-trigger {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text);
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 13px 16px;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    border-color .25s var(--ease),
    background-color .25s var(--ease),
    box-shadow .35s var(--ease);
}
.als-wrap .als-trigger:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.als-wrap.is-open .als-trigger,
.als-wrap .als-trigger:focus-visible {
  border-color: rgba(212, 164, 55, 0.6);
  background: rgba(10, 10, 10, 0.9);
  box-shadow:
    0 0 0 1px rgba(212, 164, 55, 0.15),
    0 0 22px -6px rgba(212, 164, 55, 0.25);
}
.als-wrap .als-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.als-wrap .als-value.is-placeholder {
  color: var(--text-muted);
}
.als-wrap .als-caret {
  flex: 0 0 auto;
  display: inline-flex;
  width: 10px;
  height: 6px;
  color: var(--gold);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.als-wrap.is-open .als-caret {
  transform: rotate(180deg);
}

.als-wrap .als-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 80;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(13, 13, 13, 0.97);
  border: 1px solid rgba(212, 164, 55, 0.30);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 22px 40px -14px rgba(0, 0, 0, 0.7),
    0 0 22px -10px rgba(212, 164, 55, 0.22);
  max-height: 280px;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 14px;
  /* Open with a small fade-up */
  animation: als-pop 0.16s var(--ease);
}
@keyframes als-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.als-wrap .als-option {
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.als-wrap .als-option.is-active {
  color: var(--text);
  background: rgba(212, 164, 55, 0.10);
}
.als-wrap .als-option.is-selected {
  color: var(--gold);
}
.als-wrap .als-option.is-selected.is-active {
  background: rgba(212, 164, 55, 0.18);
}
.als-wrap .als-option.is-disabled {
  color: var(--text-muted);
  opacity: 0.5;
  cursor: not-allowed;
}
/* Scrollbar styling for the panel — dark + subtle */
.als-wrap .als-panel::-webkit-scrollbar { width: 8px; }
.als-wrap .als-panel::-webkit-scrollbar-thumb {
  background: rgba(212, 164, 55, 0.30);
  border-radius: 4px;
}
.als-wrap .als-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* Hide the now-redundant native caret pseudo on enhanced selects */
.als-wrap + .quform-input-select::after,
.quform-input-select:has(.als-hidden-native)::after {
  display: none;
}

/* ============================================================
   Checkboxes (inline option group)
   ============================================================ */
.quform-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Plugin tags `.quform-options` with `.quform-cf` (clearfix) which injects
   `::before { content: " "; display: table }` — in a float layout that's a
   no-op spacer, but in our flex layout it becomes a phantom flex ITEM at the
   start of row 1, pushing every pill right by ~5px. Row 2 of a wrapped group
   has no such pseudo, so its first pill starts at the true container edge —
   which is exactly the "wrap rows aren't aligned" symptom. Disable both
   pseudo-elements on the flex container; we don't need clearfix when we're
   not floating. */
.quform-options.quform-cf::before,
.quform-options.quform-cf::after {
  display: none !important;
  content: none !important;
}
.quform-options-inline { /* default — keep flex behavior */ }
.quform-option {
  position: relative;
  min-width: 0;
}
/* Plugin ships `.quform-options-inline > .quform-option { padding: 0 15px 5px
   2px }` — an asymmetric padding that pushes every pill 2px right of where
   the flex item starts. When a row wraps, the FIRST pill of the next line
   ends up 2px off the left edge while the row above had the same 2px applied
   inside a flex item that was already at flex-start, making the left edges
   look misaligned by a few pixels. Zero the plugin padding so our flex `gap`
   controls every gap and every row's first pill starts flush at the
   container edge. */
.quform-options-inline > .quform-option,
.quform-options > .quform-option {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide native checkbox — the plugin's `.quform input[type=checkbox]` rule
   (specificity 0,2,1) sets `width: auto`, and without `style-input-hidden`
   on the options wrapper the plugin doesn't hide the input itself. !important
   on opacity ensures the native control stays invisible no matter what. */
.quform-field-checkbox,
.quform-field-radio {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
  z-index: 2;
}

/* Style the label as a pill. The plugin's
   `.quform-options-simple .quform-option .quform-option-label { display: inline }`
   rule has specificity 0,3,0 — match it with `.quform` + double-class and let
   source order win (our forms.css loads after plugin's quform.css). */
.quform .quform-option-label.quform-option-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 10, 10, 0.75);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color .25s var(--ease),
    border-color .25s var(--ease),
    background-color .25s var(--ease),
    box-shadow .35s var(--ease);
  user-select: none;
}
.quform-option-text {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .25s var(--ease);
}

/* Custom checkbox indicator before the label text */
.quform-option-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  position: relative;
  flex-shrink: 0;
  transition:
    background-color .2s var(--ease),
    border-color .2s var(--ease);
}

/* Hover state */
.quform-option:hover .quform-option-label {
  border-color: rgba(212, 164, 55, 0.35);
}
.quform-option:hover .quform-option-text { color: var(--text); }

/* Checked state — gold pill + filled indicator */
.quform-field-checkbox:checked + .quform-option-label,
.quform-field-radio:checked + .quform-option-label {
  border-color: rgba(212, 164, 55, 0.65);
  background: rgba(212, 164, 55, 0.06);
  box-shadow:
    0 0 0 1px rgba(212, 164, 55, 0.15),
    0 0 18px -6px rgba(212, 164, 55, 0.25);
}
.quform-field-checkbox:checked + .quform-option-label .quform-option-text,
.quform-field-radio:checked + .quform-option-label .quform-option-text {
  color: var(--gold);
}
.quform-field-checkbox:checked + .quform-option-label::before {
  border-color: rgba(212, 164, 55, 0.85);
  background: var(--gold)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><path d='M1 5l3.5 3.5L11 1' stroke='%230a0a0a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat center / 10px 8px;
}

/* Keyboard focus on the underlying input → halo on the label */
.quform-field-checkbox:focus-visible + .quform-option-label {
  outline: 2px solid rgba(212, 164, 55, 0.45);
  outline-offset: 2px;
}

/* ============================================================
   File upload — Quform 2.22 ships an enhanced uploader. After its JS runs
   the raw `<input type="file">` is wrapped in a `<div class="quform-upload-
   file">` (the visible button) sitting inside `.quform-upload-dropzone`. The
   plugin paints both with white-on-light styling (and an aggressive
   `background-color: #89c712` lime-green on `.quform-theme-dark
   .quform-upload-file`), so we have to re-style with !important to win.
   ============================================================ */
.quform-input-file { position: relative; }

/* Container — mirrors the .btn-outline / submit button look: solid neutral
   border at rest, gold border + gold text + 4px lift + soft gold shadow on
   hover, plus the same left-to-right white shimmer sweep via `::before`.
   Both class names cover the pre-JS and post-JS markup. */
.quform-upload-dropzone,
.quform-upload-button,
.quform-upload-file {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 38px !important;
  border: 1px solid var(--border-strong) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  cursor: pointer;
  box-shadow: none !important;
  text-align: center !important;
  float: none !important;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    color 0.45s ease,
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}
/* White-sheen sweep — same shimmer the header .btn-outline and submit button
   use on hover. Pseudo sits above the bg, below the label/icon. */
.quform-upload-dropzone::before,
.quform-upload-button::before,
.quform-upload-file::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
  z-index: 0;
}
.quform-upload-dropzone:hover::before,
.quform-upload-button:hover::before,
.quform-upload-file:hover::before {
  transform: translateX(100%);
}
/* Keep label + icon above the shimmer. */
.quform-upload-dropzone > *,
.quform-upload-button > *,
.quform-upload-file > * {
  position: relative;
  z-index: 1;
}
.quform-upload-dropzone:hover,
.quform-upload-button:hover,
.quform-upload-file:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(212, 164, 55, 0.06) !important;
  background-color: rgba(212, 164, 55, 0.06) !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(212, 164, 55, 0.10) !important;
}
.quform-upload-button-text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: inherit;
}
.quform-upload-button-icon {
  display: inline-flex;
  color: inherit;
}
.quform-field-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}
/* Progress bar — was lime-green by default, recolor to gold. */
.quform-upload-progress-bar-wrap {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px;
  overflow: hidden;
}
.quform-upload-progress-bar {
  background-color: var(--gold) !important;
}

/* Replace Quform's icon font with an inline SVG via mask */
.qicon-file_upload {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>") no-repeat center / contain;
}
.quform-description {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ============================================================
   CAPTCHA
   ============================================================ */
.quform-captcha {
  margin-top: 10px;
}
.quform-captcha-image {
  display: inline-block;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.quform-captcha-image-img {
  display: block;
  border-radius: 4px;
  /* CAPTCHA images have a white background — invert to fit the dark theme */
  filter: invert(1) hue-rotate(180deg) brightness(0.95);
}

/* ============================================================
   Submit button + loading spinner — Quform's dark theme paints this lime
   green with a 4-class chain
   (`.quform-theme-dark .quform-element-submit.quform-button-style-theme >
   .quform-button-submit-default > button`), so our overrides need matching
   specificity *and* !important on the colors to win.
   ============================================================ */
.quform-element-submit {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 !important;
}
.quform-button-submit { display: inline-flex; }
/* Kill the float + 5px margins Quform adds around the submit wrapper. */
.quform-button-submit-default {
  float: none !important;
  margin: 0 !important;
}

/* Theme-matching submit button — mirrors .btn-outline (neutral base → gold
   border + gold text + lift + soft gold shadow + white shimmer sweep). The
   compound selector below matches the plugin's specificity. */
.quform .quform-element-submit > .quform-button-submit-default > button.quform-submit,
.quform-submit {
  position: relative;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-strong) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  box-shadow: none !important;
  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    color 0.45s ease,
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}
.quform-submit > * { position: relative; z-index: 1; }
.quform-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.quform-submit:hover::before { transform: translateX(100%); }

.quform .quform-element-submit > .quform-button-submit-default > button.quform-submit:hover,
.quform-submit:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(212, 164, 55, 0.06) !important;
  background-color: rgba(212, 164, 55, 0.06) !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(212, 164, 55, 0.10) !important;
}
.quform-submit:active { transform: translateY(0); }

.quform-loading { display: none; }
.quform-loading.is-active { display: inline-flex; }
.quform-loading-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(212, 164, 55, 0.25);
  border-top-color: var(--gold);
  animation: quformSpin .8s linear infinite;
}
@keyframes quformSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Honeypot (anti-spam) — must stay visually hidden,
   keep the inline Quform style as a safety net.
   ============================================================ */
.quform-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
}

/* ============================================================
   Ion Range Slider — themed "Modern" skin overrides
   The plugin loads ion.rangeSlider.min.css globally; we restyle
   it to match the dark gold palette.
   ============================================================ */
.iphorm_1_14-outer-label {
  display: block;
  margin-bottom: 58px;  /* room for the floating value pills that protrude ~52px above the bar */
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.irs--modern {
  position: relative;
  height: 22px;        /* same height as the .irs sub-container — they're co-extensive */
  margin-bottom: 30px; /* room for the min/max labels under the slider */
}

/* CRITICAL: make .irs fill .irs--modern so .irs-line (child of .irs) and
   .irs-bar / .irs-handle (children of .irs--modern) share one coordinate
   system. Otherwise top: 50% lands at two different y-positions. */
.irs--modern .irs {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  height: auto !important;
  display: block !important;
}

/* Line spans full container width — its ends align with the handle outer
   edges at extremes when force_edges: true is set on the IRS instance
   (which clamps handle outer edges to 0 and container_width). */
.irs--modern .irs-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 4px !important;
  margin-top: -2px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 999px !important;
}
.irs--modern .irs-bar {
  position: absolute !important;
  top: 50% !important;
  height: 4px !important;
  margin-top: -2px !important;
  background: linear-gradient(to right, var(--gold-soft), var(--gold-bright)) !important;
  border: none !important;
  border-radius: 999px !important;
  /* No box-shadow halo — its 14px glow extends past the handle's outer
     edge (which sits at container_width+11px at the max extreme), making
     it look like the bar overshoots the right handle. */
}
/* The "modern" skin paints its teardrop handle through three <i> children
   plus background-image on .irs-handle itself. We override all of it with
   !important — without it the skin's :nth-child selectors out-specify us
   and the default teardrops remain visible behind our circles.

   box-sizing: border-box so width=22 includes the 2px border (visible width).
   margin-left: 0 so IRS's force_edges clamp ([0, container − width]) lands
   the handle's outer edges exactly at 0 and container_width at extremes.
   IRS already positions the handle by its LEFT edge using the handle width
   to keep it centered on the value — no margin offset is needed. */
.irs--modern .irs-handle {
  position: absolute !important;
  box-sizing: border-box !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: -11px !important;
  margin-left: 0 !important;
  background: #0a0a0a !important;
  background-image: none !important;
  border: 2px solid var(--gold) !important;
  border-radius: 50% !important;
  cursor: grab;
  box-shadow:
    0 0 0 1px rgba(212, 164, 55, 0.20),
    0 0 16px -2px rgba(212, 164, 55, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform .15s var(--ease), box-shadow .25s var(--ease);
  z-index: 2;
}
.irs--modern .irs-handle:hover,
.irs--modern .irs-handle.state_hover {
  transform: scale(1.10);
  box-shadow:
    0 0 0 1px rgba(212, 164, 55, 0.30),
    0 0 22px -2px rgba(212, 164, 55, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.55);
}
.irs--modern .irs-handle.state_active,
.irs--modern .irs-handle:active { cursor: grabbing; }

/* Kill every internal piece the modern skin paints inside the handle */
.irs--modern .irs-handle > i,
.irs--modern .irs-handle > i:nth-child(1),
.irs--modern .irs-handle > i:nth-child(2),
.irs--modern .irs-handle > i:nth-child(3) {
  display: none !important;
  background: none !important;
  border: none !important;
}
.irs--modern .irs-handle::before,
.irs--modern .irs-handle::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

.irs--modern .irs-min,
.irs--modern .irs-max,
.irs--modern .irs-from,
.irs--modern .irs-to,
.irs--modern .irs-single {
  position: absolute;
  display: block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  white-space: nowrap;
  pointer-events: none;
}
.irs--modern .irs-min,
.irs--modern .irs-max {
  top: 28px;
  /* The plugin paints a dark pill bg + #999 text that disappear on our dark
     theme — override both with !important since the plugin CSS loads after
     ours and otherwise wins on equal specificity. */
  color: var(--text-dim) !important;
  background: transparent !important;
  padding: 0 !important;
}
.irs--modern .irs-min { left: 0; }
.irs--modern .irs-max { right: 0; }
.irs--modern .irs-from,
.irs--modern .irs-to,
.irs--modern .irs-single {
  top: -28px;
  color: var(--gold);
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(212, 164, 55, 0.45);
  /* No transform — IRS pre-centers tooltips by computing
     left = handle% − tooltipWidth/2 inline. Adding our own
     translateX(-50%) would double-center and shift them off. */
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
  overflow: visible;
}

/* Tooltip arrow — small gold triangle under each tooltip pointing
   down at the handle. --arrow-x is a JS-set offset (in px) from the
   tooltip's center; it stays at 0 in the middle of the range, shifts
   negative at the left extreme, and shifts positive at the right
   extreme — so the arrow always sits over the handle even when
   force_edges has clamped the tooltip to a slider edge. */
.irs--modern .irs-from::before,
.irs--modern .irs-to::before,
.irs--modern .irs-single::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: -5px !important;
  left: calc(50% + var(--arrow-x, 0px)) !important;
  margin-left: -5px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 5px solid rgba(212, 164, 55, 0.65) !important;
  background: none !important;
  overflow: visible !important;
  pointer-events: none;
  transition: left .12s linear;
}

/* The hidden <input> ion-rangeslider injects for keyboard control */
.irs-hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   Contact page — form (left) + info card (right) layout
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 36px;
  align-items: start;
}

/* Both columns wear identical card chrome at the OUTER level — this is what
   guarantees the top edges align. Previously the form col was a transparent
   wrapper and the Quform bordered group inside it acted as the visible card,
   but that nesting (.quform → form → .quform-form-inner → .quform-elements →
   .quform-element-page → .quform-child-elements → .quform-element-group)
   meant any tiny offset on any wrapper would drop the visible card below the
   info card. By moving the chrome to .contact-form-col itself the form card
   IS the column wrapper — no offset is possible. */
.contact-form-col,
.contact-info-col {
  padding: 28px 28px 24px;
  background: rgba(20, 20, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(212, 164, 55, 0.08),
    0 14px 30px -18px rgba(0, 0, 0, 0.6);
  min-width: 0;
}
.contact-info-col {
  position: sticky;
  top: 110px;
}

/* Strip the bordered group's own outer chrome on the contact layout — the
   .contact-form-col wrapper is the visible card there, so we don't want a
   second card nested inside it. (The white-inner-box strip is handled by the
   global override block above and applies on every page.) */
.contact-form-col > .quform .quform-element-group.quform-group-style-bordered {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.contact-info-block + .contact-info-block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-info-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.contact-info-value {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  text-decoration: none;
  transition: color .25s var(--ease);
  word-break: break-word;
}
.contact-info-value:hover { color: var(--gold); }

.contact-info-text {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}

.contact-social {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-social li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.contact-social a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.contact-social-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--text-muted);
  transition: color .25s var(--ease);
}
.contact-social-label {
  flex: 1 1 auto;
  min-width: 0;
}
.contact-social a .arrow {
  color: var(--text-muted);
  font-size: 14px;
  margin-left: auto;
  transition: transform .3s var(--ease), color .25s var(--ease);
}
.contact-social a:hover {
  color: var(--gold);
  padding-left: 4px;
}
.contact-social a:hover .contact-social-icon,
.contact-social a:hover .arrow {
  color: var(--gold);
}
.contact-social a:hover .arrow {
  transform: translateX(4px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-info-col {
    position: static;
    /* In single-column mode the form should appear first (it's the primary
       action), socials/contact info second. HTML already has form-col before
       info-col, so we just drop the sticky positioning and let natural order
       win — no `order` override needed. */
  }
}
@media (max-width: 900px) {
  .quform-element-row.quform-3-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .form-hero { padding-top: 120px; }
  .quform-element-group { padding: 22px 20px 18px; }
  .quform-element-row.quform-2-columns,
  .quform-element-row.quform-3-columns,
  .quform-element-row.quform-4-columns { grid-template-columns: 1fr; }
  .quform-element-submit { flex-wrap: wrap; }
  .quform-submit { width: 100%; }
}