/* ===============================
   CONTACT PAGE — Clean, Uniform UI
   =============================== */

/* -------- Page hero -------- */
.contact-hero{
  position:relative;
  padding: clamp(56px, 6vw, 92px) 0 clamp(40px, 5vw, 64px);
  display:grid;
  place-items:center;
  text-align:center;
  min-height: 54vh;
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(1000px 540px at -10% 110%, rgba(241,196,15,.14), transparent 60%),
    #fafafa;
}
.contact-eyebrow{
  font-weight:800;
  color:var(--primary-dark);
  opacity:.9;
  margin-bottom:.5rem;
}
.contact-title{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.2px;
  color:var(--primary-dark);
  font-size: clamp(2.2rem, 1.2rem + 3.5vw, 3.8rem);
  margin:0 0 .75rem;
}
.contact-sub{
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(1rem, .25vw + .98rem, 1.1rem);
  color:#2E2E2E;
}

/* -------- Section gradient (matches hero) -------- */
.contact-section{
  padding: clamp(24px, 4vw, 50px) 0;
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(1000px 540px at -10% 110%, rgba(241,196,15,.14), transparent 60%),
    #fafafa;
}

/* -------- Form card (yellow accent) -------- */
.contact-card{
  max-width:1100px;
  margin: 0 auto clamp(28px, 4vw, 52px);
  background: var(--accent);
  color:#111;
  border: 1px solid rgba(0,0,0,.05);
  border-radius:24px;
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 3vw, 34px);
}

/* ===============================
   UNIFORM CONTROL SIZING
   =============================== */
:root{
  --field-h: 56px;                 /* single height for inputs and button */
  --radius: 14px;
  --field-bg: #fff;
  --field-br: 1px solid rgba(0,0,0,.08);
  --focus-ring: 0 0 0 3px rgba(17,17,17,.15);
}

/* Grid: two columns desktop, one column mobile */
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 2vw, 22px);
}
.form-grid .full{ grid-column: 1 / -1; }

/* Labels */
.contact-card label{
  display:block;
  font-weight:800;
  margin:0 0 .45rem;
  color:#111;
  font-size: 1rem;
}

/* Inputs / textarea */
.contact-card input,
.contact-card textarea{
  width:100%;
  background:var(--field-bg);
  color:#111;
  border:var(--field-br);
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:1rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-card input{
  height: var(--field-h);             /* equal height */
  line-height: calc(var(--field-h) - 28px);
}
.contact-card input::placeholder,
.contact-card textarea::placeholder{ color:#666; }
.contact-card textarea{
  min-height: 140px;
  resize: vertical;
}
.contact-card input:focus,
.contact-card textarea:focus{
  border-color:#111;
  box-shadow: var(--focus-ring);
}

/* -------- Submit button (white on yellow) -------- */
.form-actions .contact-submit{
  height: var(--field-h);
  padding: 0 22px;
  font-weight:800;
  background:#fff !important;
  border:1px solid #fff !important;
  color:#111 !important;
}
.form-actions .contact-submit:hover{
  background:#f2f2f2 !important;
  border-color:#f2f2f2 !important;
  color:#000 !important;
}

/* ===============================
   TAG MULTI-SELECT (Services)
   =============================== */

/* Tag box equal to inputs when empty, grows with chips */
.tagbox{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  background:var(--field-bg);
  border:var(--field-br);
  border-radius:var(--radius);
  min-height: var(--field-h);
  padding:10px 12px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tagbox:focus-within{
  border-color:#111;
  box-shadow: var(--focus-ring);
}
.tagbox input{
  border:0;
  outline:0;
  background:transparent;
  flex:1 1 180px;
  min-width: 120px;
  font-size:1rem;
  color:#111;
  padding:6px 2px;
}

/* Tags */
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  line-height:1;
}
.tag button{
  all:unset;
  cursor:pointer;
  font-weight:900;
  line-height:1;
}

/* Dropdown */
.multi-list{
  position:absolute;
  left:0; right:0;
  top:100%;
  margin-top:6px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  max-height: 260px;
  overflow:auto;
  list-style:none;
  padding:6px;
  z-index:20;
  display:none;
}
.multi-list.show{ display:block; }
.multi-list li{
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.multi-list li:hover{ background:#f5f5f5; }

/* ===============================
   CONTACT DETAILS TILES
   =============================== */
.contact-details{
  max-width:1100px;
  margin: 0 auto clamp(22px, 4vw, 44px);
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px, 2.2vw, 24px);
}
.c-tile{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: var(--shadow-soft);
}
.c-tile h3{
  margin:0 0 .4rem;
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800;
  color:var(--primary-dark);
  font-size: clamp(1.2rem, .5vw + 1rem, 1.5rem);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.c-tile a{ color:var(--primary-dark); text-decoration:none; }
.c-tile a:hover{ color:var(--accent); }

/* -------- Follow us row -------- */
.contact-follow{
  max-width:1100px;
  margin: 0 auto clamp(40px, 5vw, 70px);
  text-align:left;
}
.contact-follow h3{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:800;
  color:var(--primary-dark);
  font-size: clamp(1.3rem, .6vw + 1.1rem, 1.6rem);
  margin: 0 0 .5rem;
}
.socials-inline{
  display:flex; gap:12px;
}
.socials-inline a{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #eee; background:#fff; color:#1c1c1c;
  transition: all .18s ease;
}
.socials-inline a:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform: translateY(-1px);
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 991.98px){
  .form-grid{ grid-template-columns: 1fr; }
  .contact-details{ grid-template-columns: 1fr; }
}
/* Layout for services + message + submit */
.services-row{
  display:grid;
  grid-template-columns: 1fr 1fr auto;  /* services, message, button */
  gap: 14px;
  align-items:end;
}
.services-row label{ font-weight:800; margin:0 0 .45rem; color:#111; }

/* Message field same as input */
.message-wrap input{
  height: var(--field-h);
  background:#fff;
  border:var(--field-br);
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:1rem;
  color:#111;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.message-wrap input:focus{
  border-color:#111;
  box-shadow: var(--focus-ring);
}

/* Limit dropdown size neatly under field */
.multi-list{
  max-height: 240px;       /* not full screen */
  overflow-y: auto;
  width: 100%;             /* match input width */
  box-sizing: border-box;
}

/* Mobile stacking */
@media (max-width: 767.98px){
  .services-row{
    grid-template-columns: 1fr;
    align-items:stretch;
  }
  .form-actions .contact-submit{ width:100%; }
}

/* Anchor dropdown to the services container */
.multi-wrap{ position: relative; }

/* Let the card show the dropdown outside its bounds if needed */
.contact-card{ overflow: visible; }

/* Two fields side by side; submit spans next line */
.services-row{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* services | message */
  gap: 14px;
  align-items:end;
}
.form-actions{ grid-column: 1 / -1; }  /* button on its own row */

/* Keep dropdown neat, not full screen */
.multi-list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 240px;
  overflow-y: auto;
  width: auto;              /* match tagbox width */
  box-sizing: border-box;
  z-index: 999;             /* above neighbors */
}

/* Mobile stack */
@media (max-width: 767.98px){
  .services-row{ grid-template-columns: 1fr; }
  .form-actions .contact-submit{ width:100%; }
}


/* Add horizontal breathing room on smaller screens */
.contact-section{
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

/* Ensure cards don’t stick to viewport edges */
.contact-card,
.contact-details,
.contact-follow{
  width: 100%;
  box-sizing: border-box;
}

/* Add safe side padding to hero */
.contact-hero{
  padding-left: clamp(16px, 5vw, 40px);
  padding-right: clamp(16px, 5vw, 40px);
  box-sizing: border-box;
}