/* ============================================================
   CONTACT — final section of the site
   Colors come from the shared .room palette (css/palette.css),
   the same room as Services/Projects/Footer. Two accents stay
   distinct on purpose: var(--color-red) (Hero's brand red, also
   the actual logo color) marks primary CTA buttons only
   ("Get a Quote", "Request Consultation"); var(--room-accent)
   (warm brown) handles every decorative/hover accent, matching
   Services and Projects. Section background is the shared
   .site-canvas image (css/palette.css) — this section stays
   transparent so that one backdrop shows straight through.
============================================================ */
#contact{
  position:relative;
  z-index:1;
  padding:7vh 6vw 6vh;
  overflow:hidden;
}

/* Very minimal ambient texture — a soft warm wash, echoing the
   accent color rather than an unrelated hue. */
#contact::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10%;
  width:70%;
  height:60%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, var(--room-accent-dim) 0%, rgba(140,98,57,0) 70%);
  pointer-events:none;
  z-index:0;
}

#contact .contact-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:40% 60%;
  gap:clamp(36px, 4.5vw, 72px);
  align-items:center;
}

/* ==================== LEFT — editorial company panel ==================== */
.contact-info{
  max-width:560px;
  /* Grid items default to min-width:auto — their track can never
     shrink below the content's own min-content size. .contact-heading
     is a big, bold, multi-word display heading with no wrap
     safeguard, so without this its longest line was quietly forcing
     the whole 40%/60% (and later 1fr) track wider than the actual
     column, pushing real horizontal overflow on narrow phones that
     never showed up as a scrollbar (body has overflow-x:hidden).
     min-width:0 lets the column — and the heading inside it — shrink
     and wrap to whatever width the grid track actually assigns. */
  min-width:0;
}

.contact-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--room-text-muted);
  margin-bottom:14px;
}
.contact-eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--room-accent);
  opacity:0.9;
}

.contact-heading{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.04;
  letter-spacing:-0.015em;
  color:var(--room-text);
}
.contact-heading .line{
  display:block;
}
.contact-heading .accent{
  position:relative;
  color:var(--room-accent);
}

/* -- Company meta: label/value rows, hairline separated -- */
.contact-meta{
  margin-top:18px;
  border-top:1px solid var(--room-border);
}
.contact-meta-row{
  display:grid;
  /* minmax instead of a bare 110px: the label column can still shrink
     on a very narrow phone instead of holding a hard 110px and
     crushing the value column against it. */
  grid-template-columns:minmax(80px, 110px) 1fr;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--room-border);
}
.contact-meta-row dt{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--room-text-faint);
  padding-top:1px;
}
.contact-meta-row dd{
  font-size:13.5px;
  line-height:1.4;
  color:var(--room-text);
  font-weight:500;
  /* The email address has no spaces/hyphens to wrap at — a genuinely
     unbreakable string that's wider than the value column on a narrow
     phone. anywhere lets it break mid-string as a last resort instead
     of forcing the column (and the grid track it sits in) wider than
     the viewport. */
  overflow-wrap:anywhere;
}
.contact-meta-row dd a{
  color:var(--room-text);
  transition:color 0.3s ease;
}
.contact-meta-row dd a:hover{
  color:var(--room-accent);
}
/* Moved out of an inline style="" attribute in index.html so the page
   has zero inline styles left — keeps it compatible with a strict
   CSP style-src that doesn't need 'unsafe-inline'. Also fixes a latent
   bug: the inline version referenced --contact-text-dim, a variable
   that was never actually defined anywhere in the codebase, so it was
   silently falling back to the parent's full-strength text color
   instead of ever actually looking muted. --room-text-muted is the
   real token used for this purpose everywhere else. */
.contact-meta-tagline{
  font-weight:400;
  color:var(--room-text-muted);
  font-size:13px;
}

/* -- Services capsule list: callback to the Services section's own
      content-caps treatment, for narrative continuity -- */
.contact-services{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--room-border);
}
.contact-services li{
  position:relative;
  font-size:11.5px;
  letter-spacing:0.02em;
  color:var(--room-text-muted);
  padding-right:14px;
  margin-right:14px;
}
.contact-services li::after{
  content:"";
  position:absolute;
  right:-8px; top:50%;
  width:1px; height:11px;
  background:var(--room-border);
  transform:translateY(-50%);
}
.contact-services li:last-child{ margin-right:0; padding-right:0; }
.contact-services li:last-child::after{ display:none; }

/* -- Action buttons -- */
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.btn-whatsapp, .btn-call{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  border-radius:11px;
  transition:transform 0.35s var(--ease-premium), box-shadow 0.35s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-whatsapp{
  background:var(--room-text);
  color:#FBF8F3;
}
.btn-whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -10px rgba(47,36,27,0.32);
}
.btn-whatsapp .icon-whatsapp{ width:17px; height:17px; flex-shrink:0; }
.btn-whatsapp .icon-whatsapp path{ fill:#2FAE60; } /* the one place green is allowed */

.btn-call{
  background:transparent;
  color:var(--room-text);
  border:1px solid rgba(47,36,27,0.28);
}
.btn-call:hover{
  border-color:var(--room-accent);
  color:var(--room-accent);
  transform:translateY(-2px);
}
.btn-call svg{ width:15px; height:15px; }
.btn-call svg path{ stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ==================== RIGHT — premium enquiry form (glass card) ==================== */
.contact-form-panel{
  /* Same grid min-width:auto issue as .contact-info — without this
     the form's own inputs/labels can hold the right-hand track wider
     than its assigned share of the grid on a narrow screen. */
  min-width:0;
  /* No backdrop-filter here on purpose: the backdrop is a near-solid
     color by this point in the page, so a blur would cost real paint
     time for a practically invisible effect. The translucent tint +
     border + shadow alone already read as "glass". */
  background:var(--room-card);
  border:1px solid var(--room-border);
  border-radius:22px;
  padding:clamp(20px, 2.6vw, 34px);
  box-shadow:
    0 40px 80px -32px rgba(47,36,27,0.18),
    0 10px 24px -14px rgba(47,36,27,0.08),
    0 1px 0 rgba(255,255,255,0.6) inset;
}

.contact-form-eyebrow{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--room-text-faint);
}
.contact-form-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(19px, 1.8vw, 23px);
  letter-spacing:-0.01em;
  margin-top:6px;
  color:var(--room-text);
}

.contact-form{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 12px;
}
.form-field{ display:flex; flex-direction:column; gap:5px; }
.form-field.full{ grid-column:1 / -1; }

.form-field label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--room-text-faint);
  transition:color 0.3s ease;
}
.form-field:focus-within label{ color:var(--room-accent); }

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--room-text);
  background:rgba(255,255,255,0.55);
  border:1.5px solid var(--room-border);
  border-radius:11px;
  padding:10px 13px;
  transition:border-color 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), background 0.3s ease;
}
.form-field textarea{
  resize:vertical;
  min-height:60px;
  line-height:1.45;
}
.form-field input::placeholder,
.form-field textarea::placeholder{
  color:var(--room-text-faint);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--room-accent);
  background:rgba(255,255,255,0.85);
  box-shadow:0 0 0 4px var(--room-accent-dim);
}

/* Honeypot field — invisible to real visitors, still present + focusable
   in the DOM order for bots that blindly fill every input. Not display:none
   (some bots skip those); clipped off-screen instead. */
.form-field--honeypot{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  pointer-events:none;
}

/* -- Validation error state -- */
.form-error{
  font-size:11px;
  line-height:1.3;
  color:var(--color-red, #B3241C);
  min-height:0;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.form-error.visible{
  opacity:1;
  transform:translateY(0);
  margin-top:1px;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color:var(--color-red, #B3241C);
  background:rgba(179,36,28,0.05);
}
.form-field.is-valid input,
.form-field.is-valid select,
.form-field.is-valid textarea{
  border-color:rgba(56,142,60,0.55);
}

/* Custom select chevron (native <select> styled to match inputs) */
.select-wrap{ position:relative; }
.select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
  cursor:pointer;
}
.select-wrap::after{
  content:"";
  position:absolute;
  right:17px;
  top:50%;
  width:9px;
  height:9px;
  border-right:1.5px solid var(--room-text-muted);
  border-bottom:1.5px solid var(--room-text-muted);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
  transition:border-color 0.3s ease;
}
.select-wrap:focus-within::after{
  border-color:var(--room-accent);
}

.form-submit{
  position:relative;
  grid-column:1 / -1;
  margin-top:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:13px 24px;
  background:var(--color-red);
  color:#FFFFFF;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  border-radius:12px;
  cursor:pointer;
  transition:background 0.3s ease, transform 0.35s var(--ease-premium), box-shadow 0.35s ease, letter-spacing 0.3s ease, opacity 0.3s ease;
}
.form-submit:hover{
  background:var(--color-red-light);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -12px rgba(179,36,28,0.38);
  letter-spacing:0.045em;
}
.form-submit .arrow{ width:13px; height:13px; transition:transform 0.35s var(--ease-premium); }
.form-submit .arrow path{ stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.form-submit:hover .arrow{ transform:translateX(3px); }

/* -- Loading state: label + arrow fade out, spinner fades in. Button
      stays the same size throughout (no layout shift) and is disabled
      via the [disabled] attribute in JS so it can't be double-submitted. -- */
.form-submit:disabled{
  cursor:default;
  opacity:0.88;
}
.form-submit:disabled:hover{
  transform:none;
  box-shadow:none;
  letter-spacing:0.03em;
}
.form-submit-spinner{
  display:none;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#FFFFFF;
  animation:formSpin 0.7s linear infinite;
}
.form-submit.is-loading .form-submit-label,
.form-submit.is-loading .arrow{
  display:none;
}
.form-submit.is-loading .form-submit-spinner{
  display:inline-block;
}
@keyframes formSpin{
  to{ transform:rotate(360deg); }
}

.form-status{
  grid-column:1 / -1;
  font-size:12.5px;
  color:var(--room-text-muted);
  text-align:center;
  min-height:16px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.form-status.visible{ opacity:1; transform:translateY(0); }
.form-status.success{ color:#2E7D32; font-weight:600; }
.form-status.error{ color:var(--color-red, #B3241C); font-weight:600; }

/* ==================== RESPONSIVE ====================
   1023px, not 1100px: matches contact.js's own isDesktop check
   (min-width:1024px) so the 2-col -> 1-col layout switch and the
   GSAP-timeline -> reveal-lite animation switch happen at the exact
   same width. They used to be 76px apart, which meant a real (if
   narrow) band ran the stacked mobile layout under desktop's GSAP
   ScrollTrigger timeline instead of its own lighter path. */
@media (max-width:1023px){
  #contact .contact-inner{
    grid-template-columns:1fr;
    gap:56px;
  }
  .contact-info{ max-width:640px; }
}

@media (max-width:640px){
  /* Mobile density pass — ~30% tighter than the tablet/desktop values
     above, matching the same treatment applied everywhere else on
     the page rather than just inheriting the wider-screen rhythm. A
     second pass on top cuts a further ~15-20% throughout. */
  #contact{ padding:3.6vh 5vw 2.6vh; }
  #contact .contact-inner{ gap:16px; }
  .contact-heading{ font-size:clamp(24px, 7vw, 32px); line-height:1.02; }
  .contact-eyebrow{ margin-bottom:9px; }
  .contact-meta{ margin-top:8px; }
  .contact-meta-row{ grid-template-columns:minmax(64px, 92px) 1fr; gap:12px; padding:5px 0; }
  .contact-meta-row dt{ font-size:9.5px; }
  .contact-meta-row dd{ font-size:12.5px; }
  .contact-services{ margin-top:7px; padding-top:6px; }
  .contact-services li{ font-size:10.5px; padding-right:12px; margin-right:12px; }
  .contact-actions{ flex-direction:column; margin-top:9px; gap:8px; }
  .btn-whatsapp, .btn-call{ justify-content:center; padding:10px 16px; font-size:12px; }
  .contact-form-panel{ padding:14px 12px; }
  .contact-form-eyebrow{ font-size:10px; }
  .contact-form-title{ font-size:clamp(17px, 5vw, 19px); }
  .contact-form{ grid-template-columns:1fr; margin-top:8px; gap:7px; }
  .form-field input,
  .form-field select,
  .form-field textarea{ padding:9px 12px; font-size:13px; }
  .form-submit{ padding:12px 20px; }
}

@media (prefers-reduced-motion:reduce){
  .btn-whatsapp, .btn-call, .form-submit{ transition-duration:0.01ms !important; }
}