/* =========================================================
   CONTACT PAGE — Apple-style light theme
   ========================================================= */

/* Honeypot — invisible to humans, irresistible to bots.
   `display:none` is too obvious to good bots; the off-screen
   trick works against more of them. */
.contact-honeypot{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Active nav state */
.ap-nav-links a.active{color:var(--ink);font-weight:500;position:relative}

/* Hero adjustments */
.contact-hero{padding:60px 0 30px}
.contact-hero .ap-display{margin-bottom:18px}

/* Quick contact methods row */
.contact-methods{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:36px;
}
.contact-method{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 20px;border-radius:14px;
  background:#fff;border:1px solid var(--hairline);
  color:var(--ink);text-align:left;
  transition:all .25s ease;
}
.contact-method:not(.static):hover{
  transform:translateY(-2px);
  border-color:var(--blue);
  box-shadow:0 12px 28px -12px rgba(0,113,227,.3);
}
.contact-method-icon{
  width:38px;height:38px;border-radius:10px;
  background:rgba(0,113,227,.08);
  color:var(--blue);
  display:grid;place-items:center;flex-shrink:0;
}
.contact-method-icon svg{width:18px;height:18px}
.contact-method-label{
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grey);
}
.contact-method-value{
  font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;margin-top:2px;
}

/* Form section */
.contact-form-section{padding-top:80px}
.contact-form-head{
  max-width:720px;margin:0 auto 50px;text-align:center;
}
.contact-form-head .ap-sub{margin-left:auto;margin-right:auto}

.contact-form{
  display:flex;flex-direction:column;gap:18px;
  max-width:720px;margin:0 auto;
  padding:36px;
  background:#fff;border:1px solid var(--hairline);
  border-radius:24px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.1);
}
.contact-form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.contact-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.contact-field > span{
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:-.005em;
}
.contact-field input,
.contact-field select,
.contact-field textarea{
  font-family:inherit;font-size:15px;color:var(--ink);
  padding:12px 14px;border-radius:10px;
  background:rgba(0,0,0,.025);
  border:1px solid var(--hairline);
  transition:border-color .2s,background-color .2s,box-shadow .2s;
  width:100%;
  -webkit-appearance:none;appearance:none;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{color:#a1a1a6}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,113,227,.15);
}
.contact-field textarea{
  min-height:100px;line-height:1.5;
  resize:vertical;font-family:inherit;
}
.contact-field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23424245' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:40px;
}

.contact-submit{
  align-self:flex-start;
  height:48px;padding:0 28px;
  margin-top:6px;
}
.contact-submit.success{background:#10b981;cursor:default}
.contact-trust{
  text-align:left;font-size:12.5px;color:var(--grey);
  margin:0;line-height:1.5;
}

/* Three contact cards */
.contact-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:50px;
}
.contact-card{
  background:#fff;border-radius:18px;
  padding:28px;border:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:8px;
  transition:.3s cubic-bezier(.2,.7,.3,1);
}
.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.12);
}
.contact-card-tag{
  font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--blue);
  margin-bottom:8px;
}
.contact-card h3{
  font-size:20px;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;margin:0;
}
.contact-card p{
  font-size:14.5px;color:var(--ink-2);line-height:1.5;
  margin:0 0 14px;
}
.contact-card-info{
  display:flex;flex-direction:column;gap:8px;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--hairline);
}
.contact-card-info a{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;color:var(--ink);font-weight:500;
  letter-spacing:-.005em;
  transition:color .2s ease;
}
.contact-card-info a:hover{color:var(--blue)}
.contact-card-info a svg{
  width:14px;height:14px;
  color:var(--grey);flex-shrink:0;
}

/* Offices with live clocks */
.contact-offices{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:50px;
}
.office{
  background:var(--bg-grey);border-radius:18px;
  padding:28px;border:1px solid var(--hairline);
  position:relative;overflow:hidden;
}
.office::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0071e3,#7e57ff,#ff5b7c);
}
.office-time{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:36px;font-weight:600;color:var(--ink);
  letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.office-status{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:6px;
  background:#fff;border:1px solid var(--hairline);
  font-size:11.5px;font-weight:600;color:var(--ink-2);
  margin-top:10px;
  text-transform:uppercase;letter-spacing:.05em;
}
.office-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--grey);
  transition:background-color .3s ease;
}
.office-dot.open{
  background:#10b981;
  box-shadow:0 0 8px rgba(16,185,129,.6);
  animation:office-pulse 2s ease-in-out infinite;
}
@keyframes office-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}
  50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
}
.office h4{
  font-size:18px;font-weight:600;color:var(--ink);
  margin:18px 0 6px;letter-spacing:-.015em;
}
.office p{
  font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0;
}

/* FAQ */
.contact-faq{
  display:flex;flex-direction:column;gap:10px;
  max-width:780px;margin:50px auto 0;
}
.contact-faq details{
  background:#fff;border-radius:14px;
  border:1px solid var(--hairline);
  overflow:hidden;transition:.2s ease;
}
.contact-faq details[open]{border-color:var(--blue);box-shadow:0 6px 20px -10px rgba(0,113,227,.2)}
.contact-faq summary{
  list-style:none;padding:18px 22px;cursor:pointer;
  font-weight:600;font-size:15.5px;color:var(--ink);
  letter-spacing:-.01em;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.contact-faq summary::-webkit-details-marker{display:none}
.contact-faq-icon{
  width:24px;height:24px;border-radius:6px;
  background:var(--bg-grey);
  display:grid;place-items:center;color:var(--grey-2);
  font-size:18px;font-weight:300;line-height:1;
  transition:.2s ease;flex-shrink:0;
}
.contact-faq details[open] .contact-faq-icon{
  transform:rotate(45deg);
  background:var(--blue);color:#fff;
}
.contact-faq-body{
  padding:0 22px 20px;color:var(--ink-2);
  font-size:14.5px;line-height:1.6;letter-spacing:-.005em;
}

/* Responsive */
@media (max-width:900px){
  .contact-cards,.contact-offices{grid-template-columns:1fr}
  .contact-form-row{grid-template-columns:1fr}
  .contact-form{padding:28px}
  .contact-methods{flex-direction:column;align-items:stretch}
  .contact-method{justify-content:flex-start}
}
@media (max-width:600px){
  .contact-hero{padding:36px 0 18px}
  .contact-form-section{padding-top:48px}
  .contact-form-head{margin-bottom:32px}
  .contact-form{padding:20px;border-radius:18px;gap:14px}
  .contact-field input,
  .contact-field select,
  .contact-field textarea{padding:12px 12px;border-radius:10px}
  .contact-field > span{font-size:12px}
  .contact-submit{align-self:stretch;width:100%}
  .contact-methods{margin-top:24px;gap:10px}
  .contact-method{padding:12px 14px;gap:12px;border-radius:12px}
  .contact-method-icon{width:34px;height:34px}
  .contact-method-value{font-size:14px}
  .contact-cards{margin-top:36px;gap:14px}
  .contact-card{padding:22px}
  .contact-card h3{font-size:18px}
  .contact-card p{font-size:13.5px}
  .contact-card-info a{font-size:13.5px}
  .contact-offices{margin-top:36px;gap:14px}
  .office{padding:22px;border-radius:16px}
  .office-time{font-size:28px}
  .office h4{font-size:16px;margin:14px 0 4px}
  .office p{font-size:13px}
  .contact-faq{margin-top:36px;gap:8px}
  .contact-faq summary{padding:14px 16px;font-size:14.5px;gap:10px}
  .contact-faq-icon{width:22px;height:22px;font-size:16px}
  .contact-faq-body{padding:0 16px 16px;font-size:13.5px}
}
@media (max-width:380px){
  .contact-form{padding:16px;border-radius:14px}
  .contact-form-row{gap:12px}
  .contact-card{padding:18px}
  .office{padding:18px}
  .office-time{font-size:24px}
}