/**
 * Contact page overlay CSS — item-275 (com_contact, style 17)
 * Loaded on the Contact page via index.php pageCssMap (Itemid 275).
 * Design reference: lJvnj (light) / S6173E (dark) / M1j0j6 (mobile).
 *
 * Fixes:
 *   - P36 [FIELD-WIDTH-COLLAPSE]: all inputs/textarea width:100%, max-width:none
 *   - Form card + Details card: white/cream surface, radius 22, border, padding
 *   - Masthead: full-width bg, centered, correct eyebrow/title/subtitle values
 *   - Stacked field groups (voy-field-group) replacing stock Joomla grid layout
 *   - Contact info chips in Details card (icon + label + value)
 *   - Other Ways / CTA band dark overrides
 *   - Mobile: single-column layout, correct padding
 *   — 2026-06-20 REVIEW FIXES:
 *   - D1 [FULL-BLEED-CUT]: Other Ways + CTA band bleed via negative-margin + 100vw
 *   - D2: CTA band pt/pb 64→80px (shared scss leaks 64px, override here)
 *   - D3: CTA eyebrow color #FFF opacity0.7 + size 13px/ls2
 *   - D4/D5: label + bcCurrent color fixed to #2B2420
 *   - D6: submit button padding 28→26px horizontal
 *   - D7/D8: mobile chips → card style + details col side padding
 *   - D9: mobile label font 14/600 → 13/500
 *   - D10: mobile chip label→value gap 3→1px
 *   - D12: textarea height override (target textarea.voy-input directly)
 *   - D13: OW section head eyebrow→title gap 14→12px
 *   - D14: OW eyebrow size 12/ls1 → 13/ls2
 */

/* ────────────────────────────────────────────
   Hide T4 stock masthead (we have custom one)
   ──────────────────────────────────────────── */
body.item-275 .t4-section.t4-masthead { display: none !important; }

/* ────────────────────────────────────────────
   1. MASTHEAD
   Design: fill #FAF6F0, pad 90 48 28 48 (desktop); centred column w=760
   ──────────────────────────────────────────── */
/* Masthead must bleed full-viewport-width despite being inside .container.
   Pattern: negative margin + 100vw so it punches out of the 1140px container.
   Avoids JS; works because the T4 .t4-main-body is overflow:hidden or scroll. */
.voy-contact-masthead {
  background: var(--voy-bg, #FAF6F0);
  padding: 90px 48px 28px;
  /* Bleed out of .t4-section-inner.container */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.voy-contact-masthead-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
/* Override template.css `.voy-eyebrow { color: var(--voy-secondary) }` (equal spec)
   Use body.item-275 scope to add specificity (0,2,0 vs 0,1,0). */
body.item-275 .voy-eyebrow--terracotta {
  font-family: 'Geist Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--voy-primary, #C2562F) !important;
  text-transform: uppercase;
}
/* Desktop: show desktop text, hide mobile text */
body.item-275 .voy-eyebrow--terracotta .voy-eyebrow-text-mobile { display: none; }
body.item-275 .voy-eyebrow--terracotta .voy-eyebrow-text-desktop { display: inline; }
.voy-contact-masthead-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--voy-heading, #1A1512);
  margin: 0;
}
.voy-contact-masthead-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--voy-muted, #8A7E72);
  margin: 0;
}

/* ────────────────────────────────────────────
   2. BREADCRUMB BAND
   Design: same fill #FAF6F0, pad 0 48 28 48
   ──────────────────────────────────────────── */
body.item-275 .t4-section.t4-breadcrumbs {
  background: var(--voy-bg, #FAF6F0);
}

/* ────────────────────────────────────────────
   3. CONTACT ROW — 2-col grid
   Design: fill #FAF6F0, pad 12 48 80 48, inner w=1140, gap=40
   Form Card: fill #FFFFFF, radius 22, stroke #E5DCD0 1px, pad 36
   Details Card: fill #F2EBE1, w=380, radius 22, stroke #E5DCD0 1px, pad 32
   ──────────────────────────────────────────── */
.voy-contact-row {
  background: var(--voy-bg, #FAF6F0);
  padding: 12px 0 80px;
  /* Bleed out of .t4-section-inner.container (same pattern as masthead) */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.voy-contact-row > .container {
  /* The row bleeds to 100vw (above), so its container must supply the canonical
     band itself: cap 1180 (=1140+40) + 20px gutter = content 1140 / gut 150 @wide,
     fluid + 20 below — matching every other content band (§5.14). Was max-width
     1140 + Bootstrap's 16px → content 1108 / gut 166 at ≥1140 (32px narrow). */
  max-width: 1180px;
  padding-left: 20px;
  padding-right: 20px;
}
/* Tablet full-width band (768–1139.98px): the Bootstrap `.container` default
   padding leaves the form row at ~16px — tighter than the mobile 20px gutter and
   the sibling ACM content bands (20px). Normalize to a 20px side gutter so the
   form/details band is consistent with the rest of the page and never sits under
   20px on tablet. At >=1140px the 1140 band centers (16px inner padding = part of
   the 1140 band) and desktop is left untouched. */
@media (min-width: 768px) and (max-width: 1139.98px) {
  .voy-contact-row > .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.voy-contact-grid {
  display: grid;
  /* 7fr 5fr approximation: form column fills, details = 380px */
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

/* Form card */
.voy-contact-form-col {
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid #E5DCD0;
  padding: 36px;
}

/* Details card */
.voy-contact-details-col {
  background: #F2EBE1;
  border-radius: 22px;
  border: 1px solid #E5DCD0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ────────────────────────────────────────────
   4. FORM CARD CONTENTS
   Design: form title "Send us a message" Playfair 24 700 #1A1512
   Fields: stacked, label Inter 14 600 #2B2420, input radius 8, pad 14 16,
           fill #FAF6F0, border #E5DCD0 1px. Gap between title+fields = 20.
   Submit: pill bg #C2562F, Inter 15 600 white, pad ~14 28
   ──────────────────────────────────────────── */
.voy-contact-form-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--voy-heading, #1A1512);
  margin: 0 0 20px;
}

/* Hide Joomla's default stock form and legend */
body.item-275 .contact-form-area .contact-form > form:not(.voy-contact-form) { display: none; }
body.item-275 .contact-form legend,
body.item-275 #contact-form legend { display: none; }

/* Voyara field groups */
.voy-contact-form .voy-field-group,
.voy-form-wrap .voy-field-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.voy-contact-form .voy-field-group:last-of-type { margin-bottom: 0; }

/* D-FORM: .pen Form Card lays Full name + Email on ONE 2-col row (Y99gE7, gap 16),
   then Destination, Message full-width. Live markup is 4 flat .voy-field-group siblings;
   pair the first two via a 2-col grid (desktop only). */
@media (min-width: 768px) {
  .voy-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
  }
  /* Name (1st) + Email (2nd) share the top row; the rest span both columns */
  .voy-contact-form > .voy-field-group:nth-of-type(1) { grid-column: 1; }
  .voy-contact-form > .voy-field-group:nth-of-type(2) { grid-column: 2; }
  .voy-contact-form > .voy-field-group:nth-of-type(n+3),
  .voy-contact-form > .voy-field-submit { grid-column: 1 / -1; }
}

/* Labels — D4: color #2B2420 (not heading token #1A1512) */
.voy-contact-form .voy-field-label,
.voy-form-wrap .voy-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2B2420;
  margin: 0;
  display: block;
}
/* D-REQ: .pen labels show NO required asterisk (QpBHH/mzTdR/rqwc7/yZEF3 are plain
   "Full name"/"Email"/… with no "*" child). Hide the override's required marker. */
.voy-contact-form .voy-required,
.voy-form-wrap .voy-required { display: none !important; }

/* P36 FIX — Input/textarea: full-width, no max-width collapse */
.voy-contact-form .voy-input,
.voy-form-wrap .voy-input,
body.item-275 .voy-contact-form input[type=text],
body.item-275 .voy-contact-form input[type=email],
body.item-275 .voy-contact-form textarea {
  width: 100% !important;
  max-width: none !important;
  display: block;
  box-sizing: border-box;
  background: var(--voy-bg, #FAF6F0);
  border: 1px solid var(--voy-border, #E5DCD0);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--voy-heading, #2B2420);
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* D12: Textarea height — target textarea.voy-input directly (no .voy-textarea class added) */
.voy-contact-form textarea.voy-input,
.voy-form-wrap textarea.voy-input,
body.item-275 .voy-contact-form textarea {
  min-height: 120px !important;
  height: 120px !important;
  resize: vertical;
}

/* Placeholder */
.voy-contact-form .voy-input::placeholder,
.voy-form-wrap .voy-input::placeholder {
  color: var(--voy-muted, #8A7E72);
}

/* Focus ring — P36.4 fix: pin with !important to beat BS (0,2,0) + validated selectors.
   Use explicit element selectors to exceed BS specificity. */
body.item-275 .voy-contact-form input.voy-input:focus,
body.item-275 .voy-contact-form textarea.voy-input:focus,
body.item-275 .voy-contact-form .form-control.voy-input:focus,
body.item-275 .voy-contact-form .form-control.voy-input.is-valid:focus,
body.item-275 .voy-contact-form .form-control.voy-input.is-invalid:focus,
body.item-275 .was-validated .voy-contact-form .voy-input:focus,
body.item-275 .was-validated .form-control.voy-input:valid:focus {
  border-color: var(--voy-primary, #C2562F) !important;
  box-shadow: 0 0 0 3px rgba(194,86,47,0.15) !important;
  outline: none !important;
}

/* Submit button */
.voy-field-submit { margin-top: 4px; }
/* D6: padding 14px 26px matches pen Button/Primary [14,26] */
.voy-btn-submit,
body.item-275 .voy-contact-form button[type=submit] {
  background: var(--voy-primary, #C2562F) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 14px 26px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}
.voy-btn-submit:hover,
body.item-275 .voy-contact-form button[type=submit]:hover {
  background: var(--voy-primary-hover, #A8462A) !important;
}

/* Hide Joomla's "Send an Email" section heading and "Required" legend */
body.item-275 .contact-form .form-title,
body.item-275 .contact-form h2,
body.item-275 .contact-form h3 { display: none; }

/* Validation feedback messages styling */
body.item-275 .invalid-feedback { color: var(--voy-danger, #C0392B); font-size: 13px; }
body.item-275 .form-control.is-valid { border-color: var(--voy-secondary, #1F6F6B) !important; }
body.item-275 .form-control.is-invalid { border-color: var(--voy-danger, #C0392B) !important; }

/* ────────────────────────────────────────────
   4b. BREADCRUMB ROW (custom, below masthead)
   Design: fill #FAF6F0, pad 0 48 28 48 (same bg as masthead/row)
   ──────────────────────────────────────────── */
.voy-contact-breadcrumb {
  background: var(--voy-bg, #FAF6F0);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding: 0 0 28px;
}
/* Breadcrumb bleeds to 100vw (above), so — like the contact row — its container
   supplies the canonical band itself: cap 1180 + 20px gutter = content 1140 / gut
   150 @wide, fluid + 20 below (§5.14). Was max-width 1140 + padding 0 → content
   filled the viewport edge-to-edge (gut 0) below 1140. */
.voy-contact-breadcrumb > .container { max-width: 1180px; padding-left: 20px; padding-right: 20px; }
.voy-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.voy-bc-link {
  color: var(--voy-muted, #8A7E72);
  text-decoration: none;
}
.voy-bc-link:hover { color: var(--voy-primary, #C2562F); }
.voy-bc-sep { color: var(--voy-muted, #8A7E72); flex-shrink: 0; }
/* D5: bcCurrent color #2B2420 exactly (not heading token) */
.voy-bc-current { color: #2B2420; font-weight: 600; }
/* Hide T4 breadcrumb section — we render our own */
body.item-275 .t4-section.t4-breadcrumbs { display: none !important; }

/* ────────────────────────────────────────────
   5. DETAILS CARD CONTENTS
   Design: title "Other ways to reach us" Playfair 22 700 #1A1512
   Contact chips: icon chip (40×42, radius 14, fill #FFFFFF, #C2562F icon)
                  label Geist Mono 11 #8A7E72 ls=1 / value Inter 15 #2B2420
   ──────────────────────────────────────────── */
.voy-contact-details-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--voy-heading, #1A1512);
  margin: 0 0 4px;
}

/* Contact icon chips — design: icon in white circle (42×42, r14), label Geist Mono 11 muted, value Inter 15 #2B2420 */
.voy-detail-chip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 14px;
}
.voy-detail-chip:first-of-type { padding-top: 0; }
.voy-detail-chip-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--voy-primary, #C2562F);
}
.voy-detail-chip-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.voy-detail-chip-label {
  font-family: 'Geist Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--voy-muted, #8A7E72);
  text-transform: uppercase;
}
/* D-chip-value: color #2B2420 exactly (pen VRJhZ) */
.voy-detail-chip-value {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #2B2420;
}

/* Contact address info styling */
body.item-275 .contact-address strong,
body.item-275 .contact-phone strong {
  display: none; /* hide "Address:", "Telephone:" labels */
}
body.item-275 .contact-address address,
body.item-275 .contact-address p,
body.item-275 .contact-phone {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--voy-text, #2B2420);
  line-height: 1.6;
  margin: 0;
}

/* Hide default "Voyara HQ" contact name heading */
body.item-275 .contact-name { display: none; }

/* Misc info / custom fields — teal info box matching the design "hours" chip area */
body.item-275 .contact-miscinfo,
body.item-275 .contact-misc,
.voy-contact-misc {
  background: var(--voy-secondary, #1F6F6B);
  border-radius: var(--voy-r-lg, 16px);
  padding: 20px 24px;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
body.item-275 .contact-miscinfo h4,
body.item-275 .contact-misc h4,
.voy-contact-misc h4 {
  color: #FFFFFF;
  font-size: 16px;
  margin-bottom: 8px;
}

/* ────────────────────────────────────────────
   6. OTHER WAYS BAND (ACM features / contact-extra)
   D1 [FULL-BLEED-CUT]: break out of .com-contact container via negative margin + 100vw.
   The ACM modules in contact-extra are rendered inside .voy-contact-page which sits in
   .t4-section-inner.container — so they need the same bleed trick as masthead/contact-row.
   Design: fill #F2EBE1, pad 80 48. Head gap eyebrow→title = 12px. OW eyebrow 13/ls2.
   ──────────────────────────────────────────── */
body.item-275 .ja-acm.acm-features.voy-section--elevated,
body.item-275 .ja-acm.acm-features {
  background: #F2EBE1;
  /* D1: full-bleed breakout */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  box-sizing: border-box;
  /* D-OW-PAD: pen pb667/Ivlhr padding:[80,48]. style-1 inherits global 88px; override to 80. */
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
/* D13: OW section head eyebrow→title gap = 12px (pen ZvzON gap:12, not global 14) */
/* Also: head mb 44→32px (pen Ivlhr gap:32 between head and card row; style-1 inherits global 44px) */
body.item-275 .acm-features .voy-section__head {
  gap: 12px !important;
  margin-bottom: 32px !important;
}
/* D14: OW eyebrow = 13px / ls 2px (pen u2Hn7n fontSize:13 letterSpacing:2) */
body.item-275 .acm-features .voy-eyebrow {
  font-size: 13px !important;
  letter-spacing: 2px !important;
}
/* D-OW-SUB: .pen ZvzON head has NO subtitle — hide the fallback sub text from style-1 */
body.item-275 .acm-features .acm-features-sub {
  display: none !important;
}

/* D-OW-CARD: feature card styling — pen Card/Feature (wwueo):
   cornerRadius $radius-lg=22px, fill $surface=#FFF, gap 14, padding 26, stroke $border 1px.
   style-1 renders .voy-grid--3 > .acm-feature but the ACM css only sets flex+gap+padding:4.
   Must add white card surface, radius, border, correct padding. */
body.item-275 .acm-features .voy-grid--3 .acm-feature {
  background: var(--voy-surface, #FFFFFF);
  border-radius: 22px;
  border: 1px solid var(--voy-border, #E5DCD0);
  padding: 26px;
  gap: 14px;
}
/* D-OW-CHIP: icon chip inside feature card — pen x04sqW: $elevated fill, 48×48, r=$radius-md=14px */
body.item-275 .acm-features .voy-grid--3 .acm-feature .voy-icon-chip {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  background: var(--voy-elevated, #F2EBE1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--voy-primary, #C2562F);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────
   7. CTA BAND (ACM cta / voy-section--terracotta)
   D1 [FULL-BLEED-CUT]: break out of container (same technique as OW above).
   D2: pt/pb 64→80px (shared scss sets 64px; pen d6zuW shows padding:[80,48]).
   D3: CTA eyebrow color #FFF opacity 0.7, size 13px/ls2.
   ──────────────────────────────────────────── */
body.item-275 .ja-acm.acm-cta {
  /* D1: full-bleed breakout */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  box-sizing: border-box;
  /* D2: correct padding */
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
/* D3: CTA eyebrow = white + 70% opacity + 13px/ls2 (pen sfipn) */
body.item-275 .acm-cta .voy-eyebrow {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  opacity: 1 !important; /* color already has alpha; keep opacity:1 */
}

/* ────────────────────────────────────────────
   8. DARK MODE — contact-specific overrides
   Hook: html.t4-dark
   ──────────────────────────────────────────── */

/* Masthead dark */
html.t4-dark .voy-contact-masthead {
  background: var(--voy-bg, #15110E);
}
html.t4-dark .voy-contact-masthead-title { color: var(--voy-heading, #FBF6EF); }
html.t4-dark body.item-275 .voy-eyebrow--terracotta,
html.t4-dark .voy-eyebrow--terracotta { color: var(--voy-primary, #D86A3F) !important; }
html.t4-dark .voy-contact-masthead-subtitle { color: var(--voy-muted, #9C9085); }

/* Breadcrumb dark */
html.t4-dark .voy-contact-breadcrumb { background: var(--voy-bg, #15110E); }
html.t4-dark .voy-bc-link { color: var(--voy-muted, #9C9085); }
html.t4-dark .voy-bc-sep { color: var(--voy-muted, #9C9085); }
html.t4-dark .voy-bc-current { color: var(--voy-heading, #FBF6EF); }

/* Details chip dark — D-DK-4: .pen dark chip fill = $surface #211B16 (f9J1m),
   NOT elevated #1C1712 (the card itself is #1C1712, the chip sits one level up). */
html.t4-dark .voy-detail-chip-icon {
  background: var(--voy-surface, #211B16);
  color: var(--voy-primary, #D86A3F);
}
html.t4-dark .voy-detail-chip-label { color: var(--voy-muted, #9C9085); }
html.t4-dark .voy-detail-chip-value { color: var(--voy-text, #E8DFD4); }
html.t4-dark .voy-contact-details-title { color: var(--voy-heading, #FBF6EF) !important; }

/* Contact Row dark */
html.t4-dark .voy-contact-row {
  background: var(--voy-bg, #15110E);
}

/* Form card dark: fill #211B16, stroke #352C24 */
html.t4-dark .voy-contact-form-col {
  background: var(--voy-surface, #211B16) !important;
  border-color: var(--voy-border, #352C24) !important;
}

/* Form title dark */
html.t4-dark .voy-contact-form-title { color: var(--voy-heading, #FBF6EF); }

/* Field labels dark — D-DK-3: .pen dark label fill = $text #E8DFD4 (szcTG/tDKmt),
   NOT heading #FBF6EF. */
html.t4-dark .voy-contact-form .voy-field-label,
html.t4-dark .voy-form-wrap .voy-field-label {
  color: var(--voy-text, #E8DFD4) !important;
}

/* P36.3 — Input dark: surface bg, strong border, text token */
html.t4-dark .voy-contact-form .voy-input,
html.t4-dark .voy-form-wrap .voy-input,
html.t4-dark body.item-275 .voy-contact-form input[type=text],
html.t4-dark body.item-275 .voy-contact-form input[type=email],
html.t4-dark body.item-275 .voy-contact-form textarea {
  /* D-DK-1: .pen dark Input fill = $bg #15110E (NOT elevated #1C1712).
     D-DK-2: .pen dark Input stroke = $border #352C24 (NOT #4A3F35). */
  background: var(--voy-bg, #15110E) !important;
  border-color: var(--voy-border, #352C24) !important;
  color: var(--voy-text, #E8DFD4) !important;
}
html.t4-dark .voy-contact-form .voy-input::placeholder,
html.t4-dark .voy-form-wrap .voy-input::placeholder {
  color: var(--voy-muted, #9C9085) !important;
}

/* Dark focus ring — P36.4: needs high specificity to beat BS .form-control:focus + darkmode input rule */
html.t4-dark .voy-contact-form .form-control.voy-input:focus,
html.t4-dark .voy-form-wrap .form-control.voy-input:focus,
html.t4-dark .voy-contact-form input.voy-input:focus,
html.t4-dark .voy-contact-form textarea.voy-input:focus,
html.t4-dark body.item-275 .voy-contact-form .voy-input:focus {
  border-color: var(--voy-primary, #D86A3F) !important;
  box-shadow: 0 0 0 3px rgba(216,106,63,0.2) !important;
}

/* Details card dark: fill #1C1712, stroke #352C24 */
html.t4-dark .voy-contact-details-col {
  background: var(--voy-elevated, #1C1712) !important;
  border-color: var(--voy-border, #352C24) !important;
}
html.t4-dark .voy-contact-details-title { color: var(--voy-heading, #FBF6EF); }
html.t4-dark body.item-275 .contact-address address,
html.t4-dark body.item-275 .contact-address p,
html.t4-dark body.item-275 .contact-phone {
  color: var(--voy-text, #E8DFD4);
}

/* Other Ways band dark: fill #1C1712 (S6173E RpcqC) */
html.t4-dark body.item-275 .ja-acm.acm-features.voy-section--elevated,
html.t4-dark body.item-275 .ja-acm.acm-features {
  background: var(--voy-elevated, #1C1712) !important;
}
/* OW feature card dark: surface #211B16, border #352C24 (pen wwueo dark fill $surface, stroke $border) */
html.t4-dark body.item-275 .acm-features .voy-grid--3 .acm-feature {
  background: var(--voy-surface, #211B16) !important;
  border-color: var(--voy-border, #352C24) !important;
}
/* OW chip dark: elevated #1C1712, icon terracotta #D86A3F */
html.t4-dark body.item-275 .acm-features .voy-grid--3 .acm-feature .voy-icon-chip {
  background: var(--voy-elevated, #1C1712) !important;
  color: var(--voy-primary, #D86A3F) !important;
}

/* CTA band dark: design shows #D86A3F in dark */
html.t4-dark body.item-275 .ja-acm.acm-cta.voy-section--terracotta,
html.t4-dark body.item-275 .ja-acm.acm-cta {
  background: var(--voy-primary, #D86A3F) !important;
}
/* D3 dark: CTA eyebrow stays white/70% in dark (CTA still terracotta) */
html.t4-dark body.item-275 .acm-cta .voy-eyebrow {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ────────────────────────────────────────────
   8b. SUBTITLE DESKTOP/MOBILE SWAP
   Desktop sub (pen O1c6oA) shown on ≥768px; mobile sub (pen jnaZA) shown on <768px.
   ──────────────────────────────────────────── */
.voy-contact-sub-mobile { display: none; }
.voy-contact-sub-desktop { display: block; }

/* ────────────────────────────────────────────
   9. MOBILE (≤767.98px)
   Design M1j0j6: single column, masthead pad 40 20 28 20,
   title Playfair 28 700 / sub 15px, eyebrow 11px/ls1 "GET IN TOUCH",
   form stacked in flat bg (#FAF6F0), details as separate #F2EBE1 band.
   D7: chips become card style (white bg, border, r14, p16, gap12).
   D8: details col gets 20px side padding so chips align with edges.
   D9: label font 13px/500 on mobile (pen M1j0j6 labels).
   D10: chip label→value gap 1px (pen KEZXO gap:1).
   ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* D-MOB-4: .pen mobile frame M1j0j6 has NO breadcrumb (Header→Masthead→Form→
     Details→Footer only). Hide the custom breadcrumb band on mobile. */
  .voy-contact-breadcrumb { display: none !important; }
  .voy-breadcrumb-nav { padding: 0 20px; }
  /* D-MOB-1: .pen mobile masthead inner gap = 12px (DkhZE), not desktop 18px. */
  .voy-contact-masthead-inner { gap: 12px; }
  /* Mobile eyebrow: design shows "GET IN TOUCH" (vs "CONTACT" desktop).
     Must use body.item-275 scope (0,3,0) to beat the desktop rule (0,3,0 same; source-order wins here). */
  body.item-275 .voy-eyebrow--terracotta { font-size: 11px; letter-spacing: 1px; }
  body.item-275 .voy-eyebrow--terracotta .voy-eyebrow-text-mobile { display: inline !important; }
  body.item-275 .voy-eyebrow--terracotta .voy-eyebrow-text-desktop { display: none !important; }
  /* Mobile subtitle: show mobile text, hide desktop text (pen jnaZA vs O1c6oA) */
  .voy-contact-sub-mobile { display: block !important; }
  .voy-contact-sub-desktop { display: none !important; }
  /* .pen M1j0j6: no OW band, no CTA band on mobile — hidden entirely */
  body.item-275 .ja-acm.acm-features { display: none !important; }
  body.item-275 .ja-acm.acm-cta { display: none !important; }
  .voy-contact-masthead {
    padding: 40px 20px 28px;
  }
  .voy-contact-masthead-title {
    font-size: 28px;
  }
  .voy-contact-masthead-subtitle {
    font-size: 15px;
  }
  .voy-contact-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Mobile: form col has no card (flat bg), details col is a band */
  .voy-contact-form-col {
    background: var(--voy-bg, #FAF6F0);
    border: none;
    border-radius: 0;
    padding: 8px 0 40px;
  }
  /* D-MOB-5: .pen mobile Form (JZuVk) has NO "Send us a message" title —
     it goes straight to the Full name field. Hide the form title on mobile. */
  .voy-contact-form-title { display: none !important; }
  /* D8: details col gets side padding 20px (pen J8K0Ba padding:[40,20]) */
  .voy-contact-details-col {
    background: #F2EBE1;
    border: none;
    border-radius: 0;
    padding: 40px 20px;
    gap: 12px;
  }
  .voy-contact-row {
    padding: 0;
  }
  .voy-contact-row > .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.item-275 .voy-contact-form button[type=submit],
  .voy-btn-submit {
    width: 100% !important;
  }
  /* D7: chips become individual cards on mobile
     pen M1j0j6: Ypshx/YU2LE/ETko0/funaz — cornerRadius:14, fill:#FFFFFF,
     gap:12, padding:16, stroke:#E5DCD0/1px */
  .voy-detail-chip {
    background: #FFFFFF;
    border: 1px solid #E5DCD0;
    border-radius: 14px;
    padding: 16px;
    gap: 12px;
  }
  /* Reset desktop :first-of-type 0 padding — mobile chips are cards with uniform padding */
  .voy-detail-chip:first-of-type {
    padding-top: 16px;
  }
  /* D7: chip icon bg changes to cream on mobile (pen rX4tC fill:#F2EBE1) */
  .voy-detail-chip-icon {
    background: #F2EBE1;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
  }
  /* D10: chip label→value gap 1px (pen KEZXO gap:1) */
  .voy-detail-chip-text {
    gap: 1px;
  }
  /* D9: label font 13px/500 on mobile (pen M1j0j6 labels h60ukD/cmuRY: fontSize:13, fontWeight:500) */
  body.item-275 .voy-field-label {
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  /* Mobile field input bg: white on mobile (pen eDF5o/rIW8C: fill:#FFFFFF) */
  body.item-275 .voy-contact-form input.voy-input,
  body.item-275 .voy-contact-form textarea.voy-input {
    background: #FFFFFF !important;
  }
  /* D-MOB-2: .pen mobile Input padding = 12/14 (eDF5o/rIW8C), not desktop 14/16. */
  body.item-275 .voy-contact-form .voy-input,
  body.item-275 .voy-contact-form input.voy-input,
  body.item-275 .voy-contact-form textarea.voy-input {
    padding: 12px 14px !important;
  }
  /* D-MOB-3: .pen mobile Message height = 110px (Qr5Wo), not desktop 120px. */
  body.item-275 .voy-contact-form textarea.voy-input {
    min-height: 110px !important;
    height: 110px !important;
  }
  /* D-FORM: revert the desktop 2-col grid on mobile — fields stack single column. */
  .voy-contact-form { display: flex; flex-direction: column; }
}

/* ────────────────────────────────────────────
   10. MOBILE DARK
   ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
  html.t4-dark .voy-contact-form-col {
    background: var(--voy-bg, #15110E) !important;
    border: none !important;
  }
  html.t4-dark .voy-contact-details-col {
    background: var(--voy-elevated, #1C1712) !important;
    border: none !important;
  }
  /* D7 dark: mobile chip cards use elevated surface */
  html.t4-dark .voy-detail-chip {
    background: var(--voy-surface, #211B16) !important;
    border-color: var(--voy-border, #352C24) !important;
  }
  /* D7 dark: chip icon bg — dark elevated */
  html.t4-dark .voy-detail-chip-icon {
    background: var(--voy-elevated, #1C1712) !important;
  }
  /* Mobile field input bg dark: elevated surface */
  html.t4-dark body.item-275 .voy-contact-form input.voy-input,
  html.t4-dark body.item-275 .voy-contact-form textarea.voy-input {
    background: var(--voy-elevated, #1C1712) !important;
  }
}