/* A&N Overseas — Contact Our Team responsive one-screen layout, 2026-11-07.
   Scoped to the contact route. Existing map, social, enquiry and CMS hooks stay intact. */
body.an-contact-mode {
  display:flex!important;
  flex-direction:column!important;
  height:auto!important;
  min-height:100dvh!important;
  overflow-y:auto!important;
}
body.an-contact-mode .top,
body.an-contact-mode #app>.ticker {flex-shrink:0!important}
body.an-contact-mode #app{
  display:flex!important;
  flex-direction:column!important;
  flex:1 0 auto!important;
  min-height:0!important;
  overflow:visible!important;
}
body.an-contact-mode #app .an-contact-head{
  flex:0 0 auto!important;
  padding:5px 0!important;
  background:radial-gradient(ellipse at 87% 5%,#fe8c1b1c,transparent 54%),#10131a;
  border-bottom:1px solid #80502e;
}
body.an-contact-mode #app .an-contact-head .wrap{max-width:1400px}
body.an-contact-mode #app .an-contact-head h1{
  font-size:clamp(20px,2vw,26px)!important;
  line-height:1.12!important;
  margin:3px 0!important;
}
body.an-contact-mode #app .an-contact-head .bread{font-size:10px;line-height:1.2}
body.an-contact-mode #app .an-contact-head p{font-size:11px!important;line-height:1.3!important}
body.an-contact-mode #app>.an-contact-content{
  display:flex!important;
  flex-direction:column!important;
  flex:1 0 auto!important;
  min-height:0!important;
  min-width:0!important;
  height:auto!important;
  width:100%!important;
  max-width:1400px!important;
  padding:6px 14px 8px!important;
  overflow:visible!important;
}
body.an-contact-mode #app .an-contact-main{
  display:grid!important;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;
  align-items:stretch!important;
  gap:14px!important;
  flex:1 0 auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}
body.an-contact-mode #app .an-contact-offices,
body.an-contact-mode #app .an-contact-enquiry{
  min-width:0!important;
  min-height:0!important;
  padding:9px!important;
  border:1px solid #8e5b32!important;
  border-radius:17px!important;
  background:linear-gradient(140deg,#1b1f28 0%,#10131c 72%,#111016 100%)!important;
  box-shadow:0 10px 30px #0005;
}
body.an-contact-mode #app .an-contact-offices{
  display:flex!important;
  flex-direction:column!important;
  overflow:visible!important;
}
body.an-contact-mode #app .an-contact-enquiry{
  display:flex!important;
  flex-direction:column!important;
  overflow:visible!important;
}
body.an-contact-mode #app .an-contact-main h2{
  font-size:clamp(17px,1.8vw,23px)!important;
  line-height:1.15!important;
  margin:0 0 11px!important;
  color:#fff!important;
}
body.an-contact-mode #app .an-contact-main h2 span{color:#ffa34a!important}
body.an-contact-mode #app .an-contact-office-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
body.an-contact-mode #app .an-contact-office{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden;
  padding:0 0 5px!important;
  min-width:0!important;
  border-radius:12px!important;
  background:#151922!important;
}
body.an-contact-mode #app .an-contact-office-photo{height:clamp(32px,7vh,58px)!important}
body.an-contact-mode #app .an-contact-office b{font-size:14px!important;margin:4px 8px 1px!important}
body.an-contact-mode #app .an-contact-office p{
  min-height:0!important;
  margin:2px 8px 3px!important;
  font-size:11px!important;
  line-height:1.35!important;
}
body.an-contact-mode #app .an-contact-map{
  align-self:flex-start;
  margin:auto 8px 0!important;
  padding:3px 5px!important;
  max-width:calc(100% - 20px);
  font-size:10px!important;
  overflow-wrap:anywhere;
}
body.an-contact-mode #app .an-contact-photo-credit{margin:3px 8px 0!important;font-size:8px!important}
body.an-contact-mode #app .an-contact-channels-title{
  margin:12px 0 7px;
  color:#ffae5b;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.2px;
}
body.an-contact-mode #app .an-contact-social{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0 0 7px!important;
}
body.an-contact-mode #app .an-contact-social a{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:2px!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:48px!important;
  padding:5px 2px!important;
  border-radius:9px!important;
  font-size:17px!important;
}
body.an-contact-mode #app .an-contact-social a small{font-size:clamp(7px,.65vw,9px)!important;white-space:nowrap}
body.an-contact-mode #app .an-contact-email{
  display:inline-flex!important;
  align-self:flex-start;
  padding:5px 7px!important;
  margin-top:1px!important;
  font-size:11px!important;
  overflow-wrap:anywhere;
}
body.an-contact-mode #app .an-contact-enquiry form{
  display:flex!important;
  flex-direction:column!important;
  flex:1 0 auto!important;
  min-height:0!important;
  overflow:visible!important;
}
body.an-contact-mode #app .an-contact-fields{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  flex:1 0 auto!important;
  min-height:0!important;
  overflow:visible!important;
  align-content:start!important;
}
body.an-contact-mode #app .an-contact-fields label{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  gap:4px!important;
  color:#ffca91!important;
  font-size:11px!important;
  font-weight:750!important;
}
body.an-contact-mode #app .an-contact-fields label:last-child{grid-column:1 / -1!important}
body.an-contact-mode #app .an-contact-fields input,
body.an-contact-mode #app .an-contact-fields textarea{
  width:100%!important;
  min-height:38px!important;
  padding:8px 10px!important;
  border:1px solid #87583a!important;
  border-radius:9px!important;
  background:#0c111b!important;
  color:#fff!important;
  font-size:13px!important;
  box-shadow:none!important;
}
body.an-contact-mode #app .an-contact-fields textarea{min-height:90px!important;resize:vertical!important}
body.an-contact-mode #app .an-contact-enquiry button[type=submit]{
  width:100%!important;
  align-self:stretch!important;
  min-height:39px!important;
  padding:8px 12px!important;
  margin:9px 0 0!important;
  flex:0 0 auto!important;
  border-radius:10px!important;
  font-size:12px!important;
}
body.an-contact-mode #app .an-contact-feedback{
  flex:0 0 auto!important;
  margin:5px 0 0!important;
  min-height:16px!important;
  font-size:10px!important;
  line-height:1.25!important;
}
body.an-contact-mode .footer{display:none!important}
@media(max-width:800px){
  body.an-contact-mode #app .an-contact-head{padding:4px 0!important}
  body.an-contact-mode #app .an-contact-head .wrap{padding-inline:12px}
  body.an-contact-mode #app .an-contact-head h1{font-size:19px!important;margin:3px 0 0!important}
  body.an-contact-mode #app .an-contact-head .bread{font-size:9px!important}
  body.an-contact-mode #app .an-contact-head p{display:none!important}
  body.an-contact-mode #app>.an-contact-content{padding:7px 9px calc(6px + env(safe-area-inset-bottom))!important}
  body.an-contact-mode #app .an-contact-main{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    gap:7px!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body.an-contact-mode #app .an-contact-offices{
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    padding:8px 9px!important;
    overflow:visible!important;
    border-radius:12px!important;
  }
  body.an-contact-mode #app .an-contact-main h2{
    font-size:14px!important;
    line-height:1.12!important;
    margin:0 0 5px!important;
  }
  body.an-contact-mode #app .an-contact-office-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body.an-contact-mode #app .an-contact-office{
    min-width:0!important;
    min-height:63px!important;
    padding:6px 7px!important;
    background:linear-gradient(125deg,#24212a,#121824)!important;
    border:1px solid #88552e!important;
    border-radius:10px!important;
  }
  body.an-contact-mode #app .an-contact-office-photo{display:none!important}
  body.an-contact-mode #app .an-contact-office b{
    font-size:clamp(10px,2.6vw,12px)!important;
    line-height:1.2!important;
    margin:0 0 2px!important;
  }
  body.an-contact-mode #app .an-contact-office p{
    min-height:0!important;
    margin:2px 0 3px!important;
    font-size:9px!important;
    line-height:1.17!important;
  }
  body.an-contact-mode #app .an-contact-map{
    display:inline-flex!important;
    min-height:0!important;
    padding:0!important;
    margin:1px 0 0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    color:#ffc27f!important;
    font-size:0!important;
    line-height:1.2!important;
    text-decoration:underline!important;
  }
  body.an-contact-mode #app .an-contact-map::before{content:"View on Google Maps ↗";font-size:9px!important}
  body.an-contact-mode #app .an-contact-photo-credit{display:none!important}
  body.an-contact-mode #app .an-contact-channels-title{
    margin:6px 0 4px!important;
    font-size:11px!important;
    line-height:1!important;
  }
  body.an-contact-mode #app .an-contact-social{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:4px!important;
    margin:0 0 4px!important;
  }
  body.an-contact-mode #app .an-contact-social a{
    height:33px!important;
    min-height:0!important;
    padding:2px 0!important;
    gap:0!important;
    border-radius:7px!important;
    font-size:14px!important;
  }
  body.an-contact-mode #app .an-contact-social a small{font-size:7px!important;line-height:1.1!important}
  body.an-contact-mode #app .an-contact-email{
    align-self:stretch!important;
    max-width:100%!important;
    min-height:0!important;
    padding:3px 5px!important;
    margin:0!important;
    border-radius:6px!important;
    font-size:10px!important;
    line-height:1.3!important;
  }
  body.an-contact-mode #app .an-contact-enquiry{
    flex:1 0 auto!important;
    min-height:0!important;
    padding:8px 9px!important;
    border-radius:12px!important;
  }
  body.an-contact-mode #app .an-contact-enquiry form{flex:1 0 auto!important;min-height:0!important}
  body.an-contact-mode #app .an-contact-fields{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px 7px!important;
    flex:1 0 auto!important;
    min-height:0!important;
  }
  body.an-contact-mode #app .an-contact-fields label{font-size:10px!important;gap:2px!important}
  body.an-contact-mode #app .an-contact-fields input,
  body.an-contact-mode #app .an-contact-fields textarea{
    min-height:30px!important;
    height:30px!important;
    padding:5px 7px!important;
    font-size:12px!important;
    border-radius:7px!important;
  }
  body.an-contact-mode #app .an-contact-fields textarea{
    min-height:54px!important;
    height:54px!important;
    resize:vertical!important;
  }
  body.an-contact-mode #app .an-contact-enquiry button[type=submit]{
    margin:5px 0 0!important;
    padding:5px 10px!important;
    min-height:33px!important;
  }
  body.an-contact-mode #app .an-contact-feedback{
    min-height:12px!important;
    font-size:9px!important;
    margin:3px 0 0!important;
  }
}
@media(max-width:360px){
  body.an-contact-mode #app>.an-contact-content{padding-inline:6px!important}
  body.an-contact-mode #app .an-contact-offices{padding:6px!important}
  body.an-contact-mode #app .an-contact-social{gap:2px!important}
  body.an-contact-mode #app .an-contact-social a small{font-size:6.5px!important}
}
@media(max-height:620px) and (max-width:800px){
  body.an-contact-mode #app .an-contact-head{padding:4px 0!important}
  body.an-contact-mode #app .an-contact-head .bread{display:none!important}
  body.an-contact-mode #app .an-contact-head h1{font-size:19px!important}
  body.an-contact-mode #app .an-contact-offices{padding:5px 7px!important}
  body.an-contact-mode #app .an-contact-main h2{margin-bottom:3px!important}
  body.an-contact-mode #app .an-contact-office{padding:5px!important;min-height:55px!important}
  body.an-contact-mode #app .an-contact-channels-title{margin:4px 0 3px!important}
  body.an-contact-mode #app .an-contact-social a{height:29px!important}
  body.an-contact-mode #app .an-contact-enquiry{padding:6px 8px!important}
}