/* ==========================================================================
   VIR KANYA JEWELS PVT. LTD.
   Contact page - additive stylesheet.

   Loaded only by contact.html, after css/style.css. Every rule here is
   namespaced (.pagehead, .ctc__*, .gmap*) so nothing in the shared design
   system is overridden - tokens, header, footer and animations are inherited
   from style.css exactly as the rest of the site uses them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page head
   -------------------------------------------------------------------------- */
.pagehead{
  padding-block:clamp(38px,5vw,64px) 0;
  text-align:center;
}
.pagehead .section-head{margin-inline:auto}

/* Gilt flourish beneath the heading - same figure the testimonials use. */
.pagehead h2{position:relative;padding-bottom:1.7rem}
.pagehead h2::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:74px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent);
}

/* --------------------------------------------------------------------------
   2. Contact - two column layout
   -------------------------------------------------------------------------- */
.ctc__grid{
  display:grid;
  gap:clamp(2rem,4.4vw,4rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){
  .ctc__grid{grid-template-columns:1fr 1.05fr}
}

/* ---- Left: the house card ---- */
.ctc__name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.1rem,3.6vw,2.9rem);
  line-height:1.1;
  color:var(--ink);
  letter-spacing:.005em;
}
.ctc__tagline{
  margin-top:.9rem;
  max-width:38ch;
  color:var(--muted);
}

.ctc__rule{
  width:74px;height:1px;margin:clamp(1.5rem,2.6vw,2rem) 0;
  background:linear-gradient(90deg,var(--gold-500),transparent);
}

.ctc__list{display:grid;gap:clamp(1.4rem,2.4vw,1.9rem)}
.ctc__item{display:flex;gap:1rem;align-items:flex-start}
.ctc__ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-gold);
  background:var(--cream);
  color:var(--gold-700);
  transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
.ctc__ico svg{width:16px;height:16px}
.ctc__item:hover .ctc__ico{background:var(--plum-800);color:var(--gold-200)}

.ctc__label{
  display:block;
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--plum-900);
  margin-bottom:.35rem;
}
.ctc__value{color:var(--ink-soft);line-height:1.75}
.ctc__value a{
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.ctc__value a:hover,.ctc__value a:focus-visible{
  color:var(--plum-700);border-bottom-color:var(--line-gold);
}

/* --------------------------------------------------------------------------
   3. Contact - form card
   -------------------------------------------------------------------------- */
.ctc__card{
  padding:clamp(1.7rem,3.4vw,2.8rem);
  background:var(--ivory);
  border:1px solid var(--line-gold);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .5s var(--ease);
}
.ctc__card:hover{box-shadow:var(--shadow-md)}

.ctc__card-head{margin-bottom:clamp(1.5rem,2.6vw,2rem)}
.ctc__card-head h3{margin-top:.55rem}

.ctc__form{display:grid;gap:clamp(1.05rem,2vw,1.35rem)}

/* Name + phone sit side by side once there is room for them. */
.ctc__row{display:grid;gap:inherit;grid-template-columns:1fr}
@media (min-width:560px){
  .ctc__row{grid-template-columns:1fr 1fr}
}

.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field > label{
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--plum-900);
}
.field > label .req{color:var(--gold-700)}

.field input,
.field textarea{
  width:100%;
  padding:.85rem 1rem;
  font-family:var(--font-body);
  font-size:.95rem;font-weight:300;
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  transition:border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:132px;line-height:1.7}

.field input::placeholder,
.field textarea::placeholder{color:var(--muted);opacity:.72}

.field input:hover,
.field textarea:hover{border-color:var(--line-gold)}

.field input:focus,
.field textarea:focus{
  outline:none;
  background:var(--ivory);
  border-color:var(--gold-600);
  box-shadow:0 0 0 3px rgba(178,149,79,.14);
}

/* Validation only paints once the field has actually been touched. */
.field.is-invalid input,
.field.is-invalid textarea{border-color:#B4544E}
.field__err{
  font-size:.74rem;color:#B4544E;min-height:0;
  opacity:0;transform:translateY(-3px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.field.is-invalid .field__err{opacity:1;transform:none}

.ctc__actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-top:.4rem;
}
.ctc__note{font-size:.78rem;color:var(--muted)}

/* Submit feedback line. */
.ctc__status{
  font-size:.85rem;line-height:1.7;
  padding:.9rem 1.1rem;border-radius:10px;
  border:1px solid var(--line-gold);
  background:var(--cream);
  color:var(--ink-soft);
}
.ctc__status[hidden]{display:none}
.ctc__status.is-ok{border-color:var(--line-gold);color:var(--plum-900)}
.ctc__status.is-err{border-color:rgba(180,84,78,.4);color:#B4544E}

/* --------------------------------------------------------------------------
   4. Full-width map
   -------------------------------------------------------------------------- */
.gmap{
  padding-block:0;
  border-block:1px solid var(--line-gold);
  background:var(--cream);
}
.gmap__frame{
  position:relative;
  width:100%;
  height:clamp(300px,42vw,520px);
  overflow:hidden;
}
.gmap__frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  display:block;
  /* Warms the tiles a shade towards the ivory palette without touching
     anything outside this frame. */
  filter:grayscale(.28) contrast(1.02);
  transition:filter var(--t-slow) var(--ease);
}
.gmap__frame:hover iframe{filter:none}

/* A gilt hairline over the seam where the map meets the footer. */
.gmap__bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
  padding-block:clamp(1.1rem,2vw,1.5rem);
}
.gmap__bar p{font-size:.85rem;color:var(--muted);margin:0}
.gmap__bar strong{color:var(--plum-900);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .ctc__card,.ctc__ico,.gmap__frame iframe{transition:none}
}

/* --------------------------------------------------------------------------
   5. WhatsApp CTA
   -------------------------------------------------------------------------- */
.ctc__cta{
  display:flex;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-top:clamp(1.7rem,3vw,2.4rem);
  padding-top:clamp(1.5rem,2.6vw,2rem);
  border-top:1px solid var(--line);
}
/* Sits ahead of the label, so it must not inherit the arrow's hover slide. */
.ctc__cta .btn-wa{width:17px;height:17px;flex:0 0 auto}
.ctc__cta-note{font-size:.78rem;color:var(--muted)}