/* ===== Contact ===== */
.ct-hero { background: linear-gradient(160deg,var(--navy),var(--navy-2)); color:#dbe7f7; padding: var(--s-8) 0 var(--s-6); }
.ct-hero h1 { color:#fff; max-width:16ch; }
.ct-hero .lead { color:#c2d3ea; }

.ct-grid { display:grid; grid-template-columns: 1.2fr .9fr; gap:2rem; align-items:start; }
@media (max-width:880px){ .ct-grid { grid-template-columns:1fr; } }

/* form */
.ct-form { padding:1.8rem; }
.ct-form h2 { margin-top:0; }
.field { margin-bottom:1rem; }
.field label { display:block; font-weight:700; font-size:.85rem; margin-bottom:.35rem; color:var(--slate); }
.field label .req { color:var(--stop); }
.field input, .field select, .field textarea {
  width:100%; font:inherit; padding:.75rem .85rem; border-radius:10px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.field textarea { min-height:120px; resize:vertical; }
.field select { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2345566E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(46,134,230,.15); }
.field.two { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .field.two { grid-template-columns:1fr; } }
.ct-form__actions { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:.4rem; }
.ct-confirm { display:none; margin-top:1rem; padding:.8rem 1rem; border-radius:10px; background:#e9f9ef; border:1px solid #bfe9cf; color:#12693a; font-size:.9rem; }
.ct-confirm.show { display:block; animation: pop .35s var(--ease); }
@keyframes pop { from{opacity:0;transform:translateY(6px)} }

/* contact cards */
.ct-cards { display:grid; gap:1rem; }
.ct-card { display:flex; gap:1rem; align-items:center; padding:1.2rem 1.3rem; }
.ct-card .ic { flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.ct-card .ic svg { width:22px; height:22px; }
.ct-card .k { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--steel); }
.ct-card .v { font-weight:700; color:var(--navy); font-size:1.02rem; }
/* The card is a flex row, and a flex item's default min-width is auto = its
   min-content — so info@artmechatronics.com (unbreakable, beside a fixed 46px
   icon) set a floor the card could not go under, and contact.html scrolled
   sideways below 335px. Let the text column shrink and the address wrap.
   The icon keeps flex:0 0 auto and is untouched. Measured 2026-08-22. */
.ct-card > :not(.ic) { min-width: 0; }
.ct-card .v { overflow-wrap: anywhere; }
.ct-card.wa { background:#eafaf0; border-color:#c7ecd5; }
.ct-card.wa .ic { background:#25D366; color:#073b1e; }

.ct-presence { padding:1.3rem 1.4rem; }
.ct-presence h3 { margin:0 0 .8rem; }
.ct-presence ul { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.ct-presence li { display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:.5rem; }
.ct-presence li b { color:var(--navy); } .ct-presence li span { color:var(--slate); font-size:.9rem; }

.ct-foot { text-align:center; margin-top:2.5rem; color:var(--slate); }
.ct-foot .btns { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }

/* ===== Contact — locations, service network, social =====
   .sec-head lives only in home.css, so it does nothing here; .ct-sec-head
   carries the declarations instead. Transitions below are transform, colour
   and border-colour only — never box-shadow, filter or a layout property. */
.ct-sec-head { max-width: 62ch; margin: 0 0 2.2rem; }
.ct-sec-head h2 { margin: 0 0 .5rem; }
.ct-sec-head .lead { margin-bottom: 0; }
.ct-sec-head .lead + .lead { margin-top: .7rem; }

/* --- A · Where to find us --- */
.ct-loc-group__h { margin: 0 0 .9rem; font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--navy); }
.ct-loc-group__h span { margin-left: .55rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--steel); }
/* 320px, so the panel runs three across: nine offices land 3+3+3 and five
   units land 3+2, instead of the 4+1 orphan rows a 260px track produces.
   min() guards the 320px floor so nothing overflows below ~360px. */
.ct-loc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.ct-loc-list li { padding-left: .85rem; border-left: 2px solid var(--line); }
.ct-loc-list b { display: block; color: var(--ink); font-size: .92rem; line-height: 1.3; }
.ct-loc-list address { font-style: normal; font-size: .85rem; line-height: 1.5; color: var(--slate); }

@media (max-width: 620px) {
}

/* --- B · Service on the ground --- */
.ct-social { margin-bottom: .5rem; }
.ct-social__h { margin: 0 0 .35rem; font-size: 1.6rem; color: var(--navy); }
.ct-social__note { margin: 0 0 1.2rem; font-size: .86rem; color: var(--steel); }
.ct-social__row { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .ct-social__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .ct-social__row { grid-template-columns: 1fr; } }
.ct-social__link {
  display: flex; align-items: center; gap: .8rem; height: 100%; padding: .85rem 1rem;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.ct-social__link:hover { transform: translateY(-2px); border-color: var(--blue); background: var(--blue-soft); }
.ct-social__link:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: var(--r); }
.ct-social__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); transition: background .2s var(--ease), color .2s var(--ease); }
.ct-social__ic svg { width: 19px; height: 19px; }
.ct-social__link:hover .ct-social__ic { background: var(--blue); color: #fff; }
.ct-social__t b { display: block; font-size: .95rem; line-height: 1.2; }
.ct-social__t span { display: block; margin-top: .1rem; font-size: .76rem; line-height: 1.3; color: var(--steel); }

/* clear the 78px sticky header on an anchor jump, matching .cg-group */
#locations, #service-network { scroll-margin-top: 96px; }

/* base.css hides .reveal until layout.js adds .in; with scripting off nothing
   ever does. Page-scoped safety net — see build notes for the site-wide lift.
   Only the three headline cards use .reveal here, and the lead above them
   already names all three cities in prose, so nothing is lost even where this
   query is unsupported. */
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ct-social__link, .ct-social__ic { transition: none; }
  .ct-social__link:hover { transform: none; }
  /* state, not decoration */
}

/* ============================================================
   MOBILE — 2026-08-01 audit at 375px. No overflow anywhere; two real defects.

   1. THE THREE PHONE NUMBERS WERE 26px TALL. On a contact page, a tel: link is
      the single most important thing a thumb has to hit, and these are the
      regional numbers for India, the UAE and Thailand. Now 44px.

   2. THE FOURTEEN ADDRESSES WERE 13.6px. Someone reads these to find a plant or
      copies one into Maps — the smallest text on the page should not be the
      part with the street numbers in it. Raised, with the supporting labels
      around them brought up to match.

   Both are tracked-out uppercase labels, not prose.
   ============================================================ */
@media (max-width: 620px) {
  .ct-presence a[href^="tel:"] {
    min-height: 44px; display: inline-flex; align-items: center;
    font-size: 1rem;
  }
  .ct-loc-list address { font-size: .95rem; line-height: 1.55; }
  .ct-loc-list b { font-size: 1rem; }
  .ct-social__note { font-size: .95rem; }
}


/* ============================================================
   NETWORK CHART — Anurag's sketch, 2026-08-07: counts first, one open table.
   ============================================================ */
.ct-counts {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  text-align: center;
}
.ct-counts li { display: grid; gap: .3rem; justify-items: center; }
.ct-counts b {
  font-size: clamp(2.3rem, 4.2vw, 3.4rem); line-height: 1; font-weight: 700;
  color: var(--navy); white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.ct-counts span { font-size: .84rem; color: var(--steel); }

.ct-chart {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 1.1rem;
  align-items: start;
}
.ct-chart__col {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.3rem 1.3rem 1.2rem;
}
.ct-chart .ct-loc-list { grid-template-columns: 1fr; }
.ct-team { margin: 0 0 1rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.ct-team img { display: block; width: 100%; height: auto; }
.ct-team figcaption { padding: .5rem .8rem; font-size: .78rem; color: var(--steel); background: var(--mist); }
.ct-cities { margin: 0 0 1rem; font-size: .9rem; line-height: 1.75; color: var(--slate); }
.ct-hq { margin: 0 0 1rem; font-size: .85rem; line-height: 1.5; color: var(--slate); }
.ct-hq b { color: var(--ink); }
.ct-note { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--steel); }
.ct-note a { color: var(--blue); text-decoration: underline; text-underline-offset: .16em; }

@media (max-width: 1050px) { .ct-chart { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .ct-counts { grid-template-columns: repeat(2, 1fr); gap: 1.3rem .8rem; }
  .ct-chart { grid-template-columns: 1fr; }
}

/* Phone floor: no body text under 15px (same rule as the 2026-08-02 pass). */
@media (max-width: 640px) {
  .ct-cities, .ct-hq { font-size: .95rem; }
  .ct-note { font-size: .9rem; }
}