/* ══════════════════════════════════════════════════════════════════════════
   VC v2 — UTILITY PAGE SHELL
   ADMEN 2026-07-28. Powers the rebuilt utility/content pages (contact, faq,
   financing, support, requests, get-a-quote, …).

   Replaces the legacy Bootstrap 4 layer entirely. Nothing from understrap
   (bootstrap.min.css / vending.css / animate.css / aos.css) is used or wanted.
   Token set is copied verbatim from tpl-industry.css so utility pages and ICP
   pages render from one identical system.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PAGE SURFACES ── */
  --bg: #F8F2E6;
  --white: #ffffff;
  --surface-soft: #EDF0DE;
  --surface-stone: #E9DFC9;

  /* ── TEXT ── */
  --text-primary: #2A2825;
  --text-body: #5C5A55;
  --text-secondary: #5C5A55;
  --text-caption: #A19E97;

  /* ── BORDERS ── */
  --border: #E3DDD0;
  --border-light: #EDE7D9;
  --border-soft: rgba(42,40,37,0.08);

  /* ── SAGE SCALE ── */
  --sage: #8B9D6E;
  --accent: #5E6F47;
  --accent-hover: #4A5938;
  --accent-light: #EDF0DE;
  --sage-tint: #D4DCB9;

  /* ── WARM NEUTRALS ── */
  --stone: #E9DFC9;
  --sand: #C9B894;

  /* ── WARM ACCENT — clay (rare) ── */
  --clay: #B8765C;
  --clay-tint: #EBD0BF;

  /* ── DARK CONTRAST ── */
  --dark: #1B2330;
  --dark-soft: #2A3340;

  /* ── SHADOWS ── */
  --shadow-sm: 0 1px 3px rgba(42,40,37,0.06);
  --shadow-md: 0 4px 16px rgba(42,40,37,0.07);
  --shadow-lg: 0 12px 40px rgba(42,40,37,0.09);

  /* ── RADIUS — 4px surfaces · 999px pills. Nothing else. ── */
  --radius: 4px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* ── TYPE ── */
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* ── LAYOUT ── */
  --max-width: 1180px;
}

/* ─────────────────────────── BASE ─────────────────────────── */
.vc-util, .vc-util *, .vc-util *::before, .vc-util *::after { box-sizing: border-box; }
.vc-util {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.vc-util img { max-width: 100%; height: auto; display: block; }
/* Long unbreakable tokens (cookie names, IDs, URLs) overflow their box without
   widening it, which scrolls the document without any element reporting an
   over-wide rect. Measured 207px of horizontal scroll on /cookie-policy/ at 375px. */
.vc-util { overflow-wrap: break-word; word-break: break-word; }
.vc-util table { max-width: 100%; table-layout: fixed; }
.vc-util .u-info-val, .vc-util .u-faq-a-inner, .vc-util .vc-prose { overflow-wrap: anywhere; }
.vc-util a:not([class*="btn-"]) { color: var(--accent); text-decoration: none; }
.vc-util a:not([class*="btn-"]):hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.vc-util :focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* ─────────────────────────── HERO ─────────────────────────── */
.vc-util .u-hero {
  position: relative;
  background: var(--dark);
  color: var(--bg);
  padding: 84px 32px 76px;
  overflow: hidden;
}
.vc-util .u-hero-inner { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 2; }
.vc-util .u-hero-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 2px;
  border: 1px solid rgba(248,242,230,0.5); color: var(--bg);
  margin-bottom: 20px;
}
.vc-util .u-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--bg); margin: 0 0 18px;
}
/* Signature flourish: italic Playfair on the second clause, sage-tint on dark. */
.vc-util .u-hero h1 em { font-style: italic; font-weight: 400; color: var(--sage-tint); }
.vc-util .u-hero-sub {
  font-size: 18px; line-height: 1.65; color: rgba(248,242,230,0.82);
  max-width: 76ch; margin: 0;
}
.vc-util .u-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ─────────────────────────── SECTIONS ─────────────────────────── */
.vc-util .u-section { padding: 88px 40px; }
.vc-util .u-section-inner { max-width: var(--max-width); margin: 0 auto; }
.vc-util .u-section-narrow { max-width: 1040px; margin: 0 auto; }
.vc-util .u-cream  { background: var(--bg); }
.vc-util .u-white  { background: var(--white); }
.vc-util .u-soft   { background: var(--surface-soft); }
.vc-util .u-stone  { background: var(--surface-stone); }
.vc-util .u-dark   { background: var(--dark); color: var(--bg); }
.vc-util .u-dark h2, .vc-util .u-dark h3 { color: var(--bg); }
.vc-util .u-dark p  { color: rgba(248,242,230,0.82); }

.vc-util .u-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
}
.vc-util .u-dark .u-label { color: var(--sage-tint); }
.vc-util .u-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0 0 22px;
}
.vc-util .u-heading em { font-style: italic; font-weight: 400; color: var(--accent); }
.vc-util .u-dark .u-heading em { color: var(--sage-tint); }
.vc-util .u-sub { font-size: 17px; line-height: 1.7; color: var(--text-body); max-width: 80ch; margin: 0 0 8px; }

/* ─────────────────────────── PROSE ───────────────────────────
   The utility pages carry long-form copy the ICP pages never had — this block
   is why machine-condition-details and faq collapsed without it. */
.vc-util .vc-prose { max-width: 86ch; margin-top: 34px; }
.vc-util .vc-prose:first-child { margin-top: 0; }
.vc-util .vc-prose.wide { max-width: none; }
.vc-util .vc-prose p { font-size: 16px; line-height: 1.75; color: var(--text-body); margin: 0 0 20px; }
.vc-util .vc-prose > *:first-child { margin-top: 0; }
.vc-util .vc-prose h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  color: var(--text-primary); margin: 48px 0 16px; line-height: 1.25;
}
.vc-util .vc-prose h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
.vc-util .vc-prose h3 {
  font-family: var(--font-body); font-size: 19px; font-weight: 700;
  color: var(--text-primary); margin: 32px 0 10px;
}
.vc-util .vc-prose h4 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 28px 0 8px;
}
.vc-util .vc-prose ul, .vc-util .vc-prose ol { margin: 0 0 22px; padding-left: 22px; }
.vc-util .vc-prose ul { list-style: disc; }
.vc-util .vc-prose ol { list-style: decimal; }
.vc-util .vc-prose li { font-size: 16px; line-height: 1.75; color: var(--text-body); margin-bottom: 9px; }
.vc-util .vc-prose li::marker { color: var(--sage); }
.vc-util .vc-prose strong, .vc-util .vc-prose b { color: var(--text-primary); font-weight: 600; }
.vc-util .vc-prose a:not([class*="btn-"]) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vc-util .vc-prose hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

/* Checkmark list — sage ticks, used for benefit lists */
.vc-util .u-checks { list-style: none !important; padding-left: 0 !important; }
.vc-util .u-checks li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.vc-util .u-checks li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 15px; height: 9px; border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage);
  transform: rotate(-45deg);
}

/* ─────────────────────────── BUTTONS — pills only ─────────────────────────── */
.vc-util .btn-primary, .vc-util .btn-secondary, .vc-util .btn-ghost, .vc-util .btn-clay {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 14px 30px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; transition: all .2s;
  text-decoration: none !important; line-height: 1.2; text-align: center;
}
.vc-util .btn-primary   { background: var(--accent); color: var(--bg); }
.vc-util .btn-primary:hover   { background: var(--accent-hover); color: var(--bg); }
.vc-util .btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.vc-util .btn-secondary:hover { background: var(--text-primary); color: var(--bg); }
.vc-util .btn-ghost     { background: var(--surface-soft); color: var(--accent); }
.vc-util .btn-ghost:hover     { background: var(--sage-tint); color: var(--accent); }
.vc-util .btn-clay      { background: var(--clay); color: var(--bg); }
.vc-util .btn-clay:hover      { background: #A2634B; color: var(--bg); }
/* On dark surfaces an outlined-ink button vanishes — switch to a light fill. */
.vc-util .u-hero .btn-secondary, .vc-util .u-dark .btn-secondary {
  background: transparent; color: var(--bg); border-color: rgba(248,242,230,0.6);
}
.vc-util .u-hero .btn-secondary:hover, .vc-util .u-dark .btn-secondary:hover {
  background: var(--bg); color: var(--text-primary); border-color: var(--bg);
}

/* ─────────────────────────── TAGS — 5 variants ─────────────────────────── */
.vc-util .tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 2px; line-height: 1.2;
}
.vc-util .tag-sage    { background: var(--sage-tint); color: var(--accent); }
.vc-util .tag-stone   { background: var(--surface-stone); color: var(--text-primary); }
.vc-util .tag-clay    { background: var(--clay-tint); color: #8B4A2F; }
.vc-util .tag-ink     { background: var(--dark-soft); color: var(--bg); }
.vc-util .tag-outline { background: transparent; border: 1px solid var(--sage); color: var(--accent); }

/* ── CHIP + BUTTON GROUPING ──────────────────────────────────────────────
   Tag chips and button pairs are frequently authored inside a bare <p> with no
   flex container, which rendered them shoulder-to-shoulder with no breathing
   room. Give them spacing that works regardless of what wraps them, and use
   :has() to make any such container a proper wrapped row where supported. */
.vc-util .tag { margin: 0 9px 9px 0; }
.vc-util .tag:last-child { margin-right: 0; }
.vc-util p > a[class*="btn-"] { margin: 10px 14px 0 0; }
.vc-util p > a[class*="btn-"]:last-child { margin-right: 0; }

.vc-util p:has(> a[class*="btn-"]) {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px;
}
.vc-util p:has(> a[class*="btn-"]) > a[class*="btn-"] { margin: 0; }
.vc-util p:has(> .tag), .vc-util div:has(> .tag):not(.u-card):not([class*="u-grid"]) {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px;
}
.vc-util p:has(> .tag) > .tag, .vc-util div:has(> .tag):not(.u-card) > .tag { margin: 0; }
/* chips sitting directly in a card need to clear the text above them */
.vc-util .u-card > .tag { margin-bottom: 14px; }

.vc-util .u-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.vc-util .u-tags    { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.vc-util .u-tags .tag { margin: 0; }

/* ─────────────────────────── CARDS ─────────────────────────── */
.vc-util .u-grid   { display: grid; gap: 28px; margin-top: 44px; }
.vc-util .u-grid:first-child { margin-top: 0; }
.vc-util .u-grid-2 { grid-template-columns: repeat(2, 1fr); }
.vc-util .u-grid-3 { grid-template-columns: repeat(3, 1fr); }
.vc-util .u-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Split layout: compact detail column beside a tall media/map column.
   Used on Contact Us so address/phone/hours sit together and the reclaimed
   width goes to the map instead of three sparse cards. */
.vc-util .u-split {
  display: grid; grid-template-columns: minmax(300px, 0.82fr) 1.18fr;
  gap: 28px; align-items: stretch; margin-top: 44px;
}
.vc-util .u-split > * { min-width: 0; }
.vc-util .u-split .u-map,
.vc-util .u-split .u-map iframe { height: 100%; }
.vc-util .u-split .u-map iframe { min-height: 480px; }
.vc-util .u-contact-block { display: flex; flex-direction: column; gap: 4px; }
.vc-util .u-contact-block h3 {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin: 22px 0 6px;
}
.vc-util .u-contact-block h3:first-child { margin-top: 0; }
.vc-util .u-contact-block .u-contact-val { font-size: 17px; line-height: 1.55; color: var(--text-primary); }
.vc-util .u-contact-block .u-contact-val a { color: var(--text-primary); }
.vc-util .u-contact-block .u-contact-val a:hover { color: var(--accent); }
.vc-util .u-contact-block .u-hours { margin-top: 4px; }

@media (max-width: 900px) {
  .vc-util .u-split { grid-template-columns: 1fr; }
  .vc-util .u-split .u-map iframe { min-height: 340px; }
}

.vc-util .u-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px;
  transition: transform .2s, box-shadow .2s;
}
.vc-util .u-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vc-util .u-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: var(--text-primary); }
.vc-util .u-card p  { font-size: 15.5px; line-height: 1.7; color: var(--text-body); margin: 0 0 16px; }
.vc-util .u-card-flush:hover { transform: none; box-shadow: none; }
/* Sage top-stripe — the brand device (Sage+Cream pairing) */
.vc-util .u-card-stripe { position: relative; overflow: hidden; }
.vc-util .u-card-stripe::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sage); z-index: 2;
}
.vc-util .u-card-stripe.clay::before { background: var(--clay); }

/* Info rows — address / phone / hours */
.vc-util .u-info-row { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.vc-util .u-info-row:last-child { border-bottom: none; }
.vc-util .u-info-label {
  flex: 0 0 108px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); padding-top: 3px;
}
.vc-util .u-info-val { font-size: 16px; line-height: 1.6; color: var(--text-primary); }

/* Hours table */
.vc-util .u-hours { width: 100%; border-collapse: collapse; }
.vc-util .u-hours td { padding: 9px 0; font-size: 15.5px; border-bottom: 1px solid var(--border); color: var(--text-body); }
.vc-util .u-hours tr:last-child td { border-bottom: none; }
.vc-util .u-hours td:first-child { font-weight: 600; color: var(--text-primary); width: 46%; }
.vc-util .u-hours .closed { color: var(--text-caption); }

/* ─────────────────────────── PULL-QUOTE ─────────────────────────── */
.vc-util .pullquote { border-left: 3px solid var(--sage); padding: 8px 0 8px 24px; margin: 34px 0; }
.vc-util .pullquote p {
  font-family: var(--font-display); font-style: italic; font-size: 22px;
  line-height: 1.4; color: var(--text-primary); margin: 0;
}
.vc-util .pullquote-attr {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-caption); margin-top: 12px;
}

/* ─────────────────────────── FAQ ACCORDION ───────────────────────────
   Native <details>/<summary>. NO JavaScript — deliberately.
   WP Rocket's Delay-JS on this site both overrides addEventListener and
   re-runs work after its deferred scripts load, which killed a JS accordion
   in two different ways. Native disclosure has no such dependency, is
   keyboard-operable and screen-reader-correct for free. */
.vc-util .u-faq { border-top: 1px solid var(--border); margin-top: 40px; }
.vc-util .u-faq:first-child { margin-top: 0; }
.vc-util .u-faq-item { border-bottom: 1px solid var(--border); }
/* summary MUST stay display:block — overriding a <summary>'s display (e.g. to flex)
   can stop the browser treating it as the disclosure trigger, which silently kills
   the native toggle. The +/- icon is positioned instead of flexed for this reason. */
.vc-util .u-faq-q {
  list-style: none; cursor: pointer;
  display: list-item; position: relative; padding: 22px 46px 22px 0;
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  color: var(--text-primary); line-height: 1.45;
}
.vc-util .u-faq-q::-webkit-details-marker { display: none; }
.vc-util .u-faq-q::marker { content: ""; }
.vc-util .u-faq-q:hover { color: var(--accent); }
.vc-util .u-faq-q:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.vc-util .u-faq-toggle { position: absolute; right: 0; top: 24px; width: 22px; height: 22px; }
.vc-util .u-faq-toggle::before, .vc-util .u-faq-toggle::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 1px; transition: opacity .2s, transform .2s;
}
.vc-util .u-faq-toggle::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.vc-util .u-faq-toggle::after  { left: 10px; top: 3px; width: 2px; height: 16px; }
.vc-util .u-faq-item[open] .u-faq-toggle::after { opacity: 0; transform: rotate(90deg); }
.vc-util details.u-faq-item:not([open]) > *:not(summary) { display: none; }
.vc-util .u-faq-a-inner { padding: 0 0 26px; max-width: 92ch; }
.vc-util .u-faq-a-inner p  { font-size: 16px; line-height: 1.75; color: var(--text-body); margin: 0 0 14px; }
.vc-util .u-faq-a-inner p:last-child { margin-bottom: 0; }
.vc-util .u-faq-a-inner ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; }
.vc-util .u-faq-a-inner li { font-size: 16px; line-height: 1.75; color: var(--text-body); margin-bottom: 8px; }
.vc-util .u-faq-a-inner li::marker { color: var(--sage); }
.vc-util .u-faq-a-inner a:not([class*="btn-"]) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────── CTA BANNER ─────────────────────────── */
.vc-util .u-cta { background: var(--accent); padding: 80px 40px; text-align: center; }
.vc-util .u-cta-inner { max-width: 760px; margin: 0 auto; }
.vc-util .u-cta h2 {
  font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700; color: var(--bg); margin: 0 0 14px; line-height: 1.22;
}
.vc-util .u-cta h2 em { font-style: italic; font-weight: 400; color: var(--sage-tint); }
.vc-util .u-cta p { font-size: 17px; line-height: 1.65; color: rgba(248,242,230,0.85); margin: 0 0 28px; }
.vc-util .u-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* Clay+Cream — the single punctuation button per page */
.vc-util .u-cta .btn-clay { background: var(--clay); color: var(--bg); }
.vc-util .u-cta .btn-secondary { background: transparent; color: var(--bg); border-color: rgba(248,242,230,0.6); }
.vc-util .u-cta .btn-secondary:hover { background: var(--bg); color: var(--accent); border-color: var(--bg); }

/* ─────────────────────────── MAP ─────────────────────────── */
.vc-util .u-map {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; line-height: 0; background: var(--surface-stone);
}
.vc-util .u-map iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMS — Gravity Forms + HubSpot, restyled to brand.
   Quiet inputs, hairline border, focus shifts to sage. Errors in CLAY, never red.
   ══════════════════════════════════════════════════════════════════════════ */
.vc-util .u-form-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 38px;
}
.vc-util .gform_wrapper { margin: 0 !important; }
.vc-util .gform_wrapper form { margin: 0; }
.vc-util .gform_wrapper .gform_fields {
  display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 20px !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.vc-util .gform_wrapper .gfield { grid-column: span 12; margin: 0 !important; padding: 0 !important; list-style: none; }
.vc-util .gform_wrapper .gfield.gf_left_half,
.vc-util .gform_wrapper .gfield.gf_right_half { grid-column: span 6; }

.vc-util .gform_wrapper .gfield_label,
.vc-util .gform_wrapper legend.gfield_label {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 8px !important; line-height: 1.4;
}
.vc-util .gform_wrapper .gfield_required { color: var(--clay); margin-left: 3px; }

.vc-util .gform_wrapper input[type=text],
.vc-util .gform_wrapper input[type=email],
.vc-util .gform_wrapper input[type=tel],
.vc-util .gform_wrapper input[type=url],
.vc-util .gform_wrapper input[type=number],
.vc-util .gform_wrapper input[type=date],
.vc-util .gform_wrapper select,
.vc-util .gform_wrapper textarea {
  width: 100% !important; font-family: var(--font-body); font-size: 15.5px;
  color: var(--text-primary); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.vc-util .gform_wrapper textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.vc-util .gform_wrapper select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6F47' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
.vc-util .gform_wrapper input:focus,
.vc-util .gform_wrapper select:focus,
.vc-util .gform_wrapper textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(139,157,110,0.18);
}
.vc-util .gform_wrapper ::placeholder { color: var(--text-caption); opacity: 1; }

.vc-util .gform_wrapper .ginput_complex { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.vc-util .gform_wrapper .ginput_complex > span { display: block; }
.vc-util .gform_wrapper .ginput_complex label {
  display: block; font-size: 12px; color: var(--text-caption); margin-top: 6px; letter-spacing: 0;
  text-transform: none; font-weight: 400;
}
.vc-util .gform_wrapper .ginput_full { grid-column: 1 / -1; }

.vc-util .gform_wrapper .gfield_radio,
.vc-util .gform_wrapper .gfield_checkbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vc-util .gform_wrapper .gfield_radio label,
.vc-util .gform_wrapper .gfield_checkbox label {
  font-size: 15.5px; color: var(--text-body); text-transform: none; letter-spacing: 0;
  font-weight: 400; margin: 0 0 0 9px; cursor: pointer;
}
.vc-util .gform_wrapper .gfield_radio input,
.vc-util .gform_wrapper .gfield_checkbox input { accent-color: var(--accent); width: 17px; height: 17px; }

/* File upload / drag-drop */
.vc-util .gform_wrapper .gform_drop_area,
.vc-util .gform_wrapper .gform_fileupload_multifile .gform_drop_area {
  background: var(--surface-soft); border: 1.5px dashed var(--sage);
  border-radius: var(--radius); padding: 28px; text-align: center;
  color: var(--text-body); font-size: 15px;
}
.vc-util .gform_wrapper .gform_button_select_files {
  background: var(--white); color: var(--accent); border: 1px solid var(--sage);
  border-radius: var(--radius-pill); padding: 9px 20px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.vc-util .gform_wrapper input[type=file] { font-size: 14px; color: var(--text-body); }

/* Section breaks — these were invisible on the old pages */
.vc-util .gform_wrapper .gsection {
  grid-column: span 12; border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 14px 0 0 !important; padding: 30px 0 0 !important;
}
.vc-util .gform_wrapper .gsection_title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--text-primary); margin: 0 0 6px;
}
.vc-util .gform_wrapper .gsection_description { font-size: 15px; color: var(--text-body); margin: 0; }
.vc-util .gform_wrapper .gfield_description { font-size: 13.5px; color: var(--text-caption); margin-top: 6px; }
.vc-util .gform_wrapper .gfield_html { grid-column: span 12; }

/* Submit */
.vc-util .gform_wrapper .gform_footer {
  margin: 30px 0 0 !important; padding: 0 !important; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.vc-util .gform_wrapper .gform_button,
.vc-util .gform_wrapper input[type=submit] {
  background: var(--accent); color: var(--bg);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 15px 38px; border: none; border-radius: var(--radius-pill);
  cursor: pointer; transition: background .2s; -webkit-appearance: none; appearance: none;
}
.vc-util .gform_wrapper .gform_button:hover,
.vc-util .gform_wrapper input[type=submit]:hover { background: var(--accent-hover); }
.vc-util .gform_wrapper .gform_ajax_spinner { margin-left: 12px; }

/* Validation — CLAY, never red (brand rule) */
.vc-util .gform_wrapper .gfield_error input,
.vc-util .gform_wrapper .gfield_error select,
.vc-util .gform_wrapper .gfield_error textarea { border-color: var(--clay) !important; background: #FCF6F3; }
.vc-util .gform_wrapper .validation_message,
.vc-util .gform_wrapper .gfield_validation_message {
  color: #8B4A2F !important; background: var(--clay-tint) !important;
  border: none !important; border-left: 3px solid var(--clay) !important;
  font-size: 13.5px; padding: 9px 12px !important; margin-top: 8px !important; border-radius: 0 var(--radius) var(--radius) 0;
}
.vc-util .gform_wrapper .validation_error,
.vc-util .gform_wrapper .gform_validation_errors {
  color: #8B4A2F !important; background: var(--clay-tint) !important;
  border: none !important; border-left: 3px solid var(--clay) !important;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px !important; margin: 0 0 26px !important; font-size: 15px;
}
.vc-util .gform_wrapper .gform_validation_errors h2 { font-size: 16px; color: #8B4A2F; margin: 0 0 4px; font-family: var(--font-body); }
.vc-util .gform_confirmation_message {
  background: var(--surface-soft); border-left: 3px solid var(--sage);
  padding: 22px 26px; font-size: 16.5px; color: var(--text-primary); border-radius: 0 var(--radius) var(--radius) 0;
}
.vc-util .gform_wrapper .gform_required_legend { font-size: 13px; color: var(--text-caption); margin-bottom: 18px; }
/* GF's honeypot must stay hidden */
.vc-util .gform_wrapper .gform_validation_container,
.vc-util .gform_wrapper .gfield--type-honeypot { display: none !important; position: absolute !important; left: -9999px !important; }

/* HubSpot embeds — same visual language */
.vc-util .hbspt-form { font-family: var(--font-body) !important; }
.vc-util .hbspt-form .hs-form-field { margin-bottom: 20px !important; }
.vc-util .hbspt-form label {
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: var(--accent) !important; margin-bottom: 8px !important; display: block;
}
.vc-util .hbspt-form input[type=text], .vc-util .hbspt-form input[type=email],
.vc-util .hbspt-form input[type=tel],  .vc-util .hbspt-form input[type=number],
.vc-util .hbspt-form select, .vc-util .hbspt-form textarea {
  width: 100% !important; font-family: var(--font-body) !important; font-size: 15.5px !important;
  color: var(--text-primary) !important; background: var(--bg) !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
  padding: 12px 14px !important;
}
.vc-util .hbspt-form input:focus, .vc-util .hbspt-form select:focus, .vc-util .hbspt-form textarea:focus {
  outline: none !important; border-color: var(--sage) !important; box-shadow: 0 0 0 3px rgba(139,157,110,0.18) !important;
}
.vc-util .hbspt-form .hs-button {
  background: var(--accent) !important; color: var(--bg) !important;
  font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 600 !important;
  padding: 15px 38px !important; border: none !important; border-radius: var(--radius-pill) !important;
  cursor: pointer; transition: background .2s;
}
.vc-util .hbspt-form .hs-button:hover { background: var(--accent-hover) !important; }
.vc-util .hbspt-form .hs-error-msg, .vc-util .hbspt-form .hs-error-msgs label {
  color: #8B4A2F !important; font-size: 13.5px !important; text-transform: none !important;
  letter-spacing: 0 !important; font-weight: 400 !important;
}

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */
@media (max-width: 1023px) {
  .vc-util .u-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .vc-util .u-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .vc-util .u-hero { padding: 58px 20px 52px; }
  .vc-util .u-section { padding: 56px 20px; }
  .vc-util .u-cta { padding: 56px 20px; }
  .vc-util .u-grid-2, .vc-util .u-grid-3, .vc-util .u-grid-4 { grid-template-columns: 1fr; }
  .vc-util .u-form-card { padding: 24px 20px; }
  .vc-util .gform_wrapper .gfield.gf_left_half,
  .vc-util .gform_wrapper .gfield.gf_right_half { grid-column: span 12; }
  .vc-util .gform_wrapper .ginput_complex { grid-template-columns: 1fr; }
  .vc-util .u-info-row { flex-direction: column; gap: 4px; }
  .vc-util .u-info-label { flex: none; }
  .vc-util .u-map iframe { height: 320px; }
  .vc-util .vc-prose h2 { font-size: 25px; margin-top: 38px; }
  .vc-util .u-cta-row, .vc-util .u-hero-cta { flex-direction: column; }
  .vc-util .u-cta-row .btn-primary, .vc-util .u-cta-row .btn-secondary,
  .vc-util .u-cta-row .btn-clay, .vc-util .u-hero-cta .btn-primary,
  .vc-util .u-hero-cta .btn-secondary { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHOTOGRAPHY — ADMEN 2026-07-28
   Hero background photo + in-body figure/media blocks. Mirrors the
   .hero-bg / .hero-overlay pattern already used by tpl-industry.css so the
   utility pages and the ICP pages read as one system.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HERO BACKGROUND PHOTO ──────────────────────────────────────────────────
   Only rendered when the page carries a _vc_hero_image meta value. Without it
   the hero stays the flat --dark band and nothing below applies.
   The overlay is ink-navy (--dark #1B2330) at 74–82%. Worst case — a pure
   white photo behind the lightest stop — the cream H1 (#F8F2E6) still lands
   at ~6.5:1 against it, so AA holds regardless of what image is assigned. */
.vc-util .u-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.vc-util .u-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(27,35,48,0.74) 0%,
    rgba(27,35,48,0.78) 50%,
    rgba(27,35,48,0.82) 100%);
}

/* ── IN-BODY FIGURES ────────────────────────────────────────────────────────
   4px radius, hairline --border, no shadow. Same surface language as .u-card. */
.vc-util .u-figure { margin: 44px 0 0; }
.vc-util .u-figure:first-child { margin-top: 0; }
.vc-util .u-figure img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.vc-util .u-figure figcaption {
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-caption);
  margin-top: 12px;
}

/* ── MEDIA + COPY ───────────────────────────────────────────────────────────
   Photo beside the copy it supports. Source images vary from 400×600 to
   2560×1429, so the frame is normalised to 4:3 and cover-cropped — that keeps
   every media block the same shape whatever it was fed. */
.vc-util .u-media {
  display: grid; grid-template-columns: 1fr 0.92fr;
  gap: 40px; align-items: center; margin-top: 44px;
}
.vc-util .u-media:first-child { margin-top: 0; }
.vc-util .u-media > * { min-width: 0; }
.vc-util .u-media .u-figure { margin: 0; }
.vc-util .u-media .u-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.vc-util .u-media-copy > :first-child { margin-top: 0; }
.vc-util .u-media-copy .vc-prose { margin-top: 0; }
/* .u-media-flip pulls the photo to the LEFT column on desktop while the source
   order stays copy-then-photo, so small screens still get heading, copy, photo. */
.vc-util .u-media-flip .u-figure { order: -1; }

/* ── BANNER ─────────────────────────────────────────────────────────────────
   Full-width landscape strip inside a section. */
.vc-util .u-banner { margin-top: 44px; }
.vc-util .u-banner:first-child { margin-top: 0; }
.vc-util .u-banner img {
  width: 100%; height: clamp(200px, 26vw, 340px);
  object-fit: cover; object-position: center;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.vc-util .u-banner figcaption {
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-caption); margin-top: 12px;
}

/* ── FIGURE INSIDE PROSE ────────────────────────────────────────────────────
   .vc-prose is capped at 86ch, so an unconstrained portrait source would render
   ~800x1200 and swamp the text it is breaking up. Normalise to 16:9. */
.vc-util .vc-prose .u-figure { margin: 36px 0; }
.vc-util .vc-prose .u-figure img { aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 900px) {
  .vc-util .u-media { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .vc-util .vc-prose .u-figure { margin: 28px 0; }
  .vc-util .u-media-flip .u-figure { order: 0; }
  .vc-util .u-figure { margin-top: 32px; }
  .vc-util .u-banner { margin-top: 32px; }
  .vc-util .u-banner img { height: clamp(180px, 40vw, 260px); }
}

/* ── BUTTON COLOUR IS FINAL ─────────────────────────────────────────────
   Buttons are frequently authored inside .vc-prose or a FAQ answer, whose
   descendant link rules out-specify the button rules and were repainting the
   label sage-deep on a sage-deep fill (invisible until hover). These win. */
.vc-util a.btn-primary   { background: var(--accent); color: var(--bg); text-decoration: none; }
.vc-util a.btn-primary:hover { background: var(--accent-hover); color: var(--bg); }
.vc-util a.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--text-primary); text-decoration: none; }
.vc-util a.btn-secondary:hover { background: var(--text-primary); color: var(--bg); }
.vc-util a.btn-ghost     { background: var(--surface-soft); color: var(--accent); text-decoration: none; }
.vc-util a.btn-ghost:hover { background: var(--sage-tint); color: var(--accent); }
.vc-util a.btn-clay      { background: var(--clay); color: var(--bg); text-decoration: none; }
.vc-util a.btn-clay:hover { background: #A2634B; color: var(--bg); }
.vc-util .u-hero a.btn-secondary, .vc-util .u-dark a.btn-secondary, .vc-util .u-cta a.btn-secondary {
  background: transparent; color: var(--bg); border-color: rgba(248,242,230,0.6);
}
.vc-util .u-hero a.btn-secondary:hover, .vc-util .u-dark a.btn-secondary:hover, .vc-util .u-cta a.btn-secondary:hover {
  background: var(--bg); color: var(--text-primary);
}