/* ==========================================================================
   Digital Maheshwari — Contact (/contact)
   Loaded only on the contact page, after landing.css. Uses the shared
   tokens in variables.css; no new colours.
   ========================================================================== */

/* ---- Shared heads ---- */
.ct-head { margin-bottom: var(--dm-space-8); }
.ct-head h2 { margin: 0; }
.ct-head p { color: var(--dm-text-muted); margin: 0; }
.ct-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dm-space-8); align-items: end; }
.section--ink .ct-head p { color: rgba(248, 248, 251, 0.72); }

/* ---- Hero ---- */
.ct-hero { padding-block: var(--dm-space-5) var(--dm-space-9); }
.ct-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--dm-space-9); align-items: center; }
.ct-hero__copy h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); line-height: 1.04; margin: 0 0 var(--dm-space-6); max-width: 13ch; }
.ct-hero__lead { font-size: 1.15rem; line-height: 1.7; color: var(--dm-text-muted); max-width: 54ch; margin-bottom: var(--dm-space-7); }
.ct-hero__actions { display: flex; flex-wrap: wrap; gap: var(--dm-space-3); }
.ct-hero__actions .btn svg { width: 16px; height: 16px; }
.ct-hero__note { margin: var(--dm-space-7) 0 0; padding-top: var(--dm-space-5); border-top: 1px solid var(--dm-border); font-size: var(--dm-body-sm); color: var(--dm-text-muted); max-width: 54ch; }

/* Contact lines — a single editorial list rather than icon cards */
.ct-lines { border-top: 1px solid var(--dm-ink); }
.ct-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--dm-space-5); align-items: center; padding: var(--dm-space-5) var(--dm-space-2); border-bottom: 1px solid var(--dm-border); color: inherit; transition: background var(--dm-duration) var(--dm-ease), padding var(--dm-duration) var(--dm-ease); }
.ct-line:hover, .ct-line:focus-visible { background: var(--dm-surface); padding-inline: var(--dm-space-4); }
.ct-line__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dm-border-strong); color: var(--dm-ink); transition: background var(--dm-duration) var(--dm-ease), color var(--dm-duration) var(--dm-ease), border-color var(--dm-duration) var(--dm-ease); }
.ct-line__icon svg { width: 18px; height: 18px; }
.ct-line:hover .ct-line__icon { background: var(--dm-ink); border-color: var(--dm-ink); color: var(--dm-gold-light); }
.ct-line--wa .ct-line__icon { background: var(--dm-gold); border-color: var(--dm-gold); }
.ct-line__body { display: grid; gap: 2px; min-width: 0; }
.ct-line__body strong { font-size: var(--dm-caption); font-weight: 700; color: var(--dm-gold-dark); }
.ct-line__value { font-family: var(--dm-font-display); font-size: 1.35rem; font-weight: 600; color: var(--dm-ink); overflow-wrap: anywhere; }
.ct-line__note { font-size: var(--dm-body-sm); color: var(--dm-text-muted); line-height: 1.5; }
.ct-line__go { color: var(--dm-ink); transition: transform var(--dm-duration) var(--dm-ease); }
.ct-line__go svg { width: 18px; height: 18px; }
.ct-line:hover .ct-line__go { transform: translateX(4px); }
.ct-line__go--text { font-size: var(--dm-caption); font-weight: 700; border-bottom: 1px solid var(--dm-border-strong); white-space: nowrap; }

/* ---- Enquiry: side story + form ---- */
.ct-enquiry { padding-top: 0; scroll-margin-top: 80px; }
.ct-enquiry__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--dm-space-9); align-items: start; }
.ct-enquiry__side { position: sticky; top: 110px; }
.ct-enquiry__side h2 { margin-bottom: var(--dm-space-4); }
.ct-enquiry__side > p { color: var(--dm-text-muted); line-height: 1.7; }
.ct-side__h { font-family: var(--dm-font-body, inherit); font-size: var(--dm-caption); font-weight: 700; color: var(--dm-gold-dark); margin: var(--dm-space-6) 0 var(--dm-space-3); }
.ct-audience { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ct-audience li { font-size: var(--dm-body-sm); padding: 0.35rem 0.8rem; border-radius: var(--dm-radius-full); border: 1px solid var(--dm-border-strong); color: var(--dm-ink); }
.ct-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dm-space-2); }
.ct-tips li { position: relative; padding-left: var(--dm-space-5); font-size: var(--dm-body-sm); color: var(--dm-text); line-height: 1.55; }
.ct-tips li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 10px; height: 1px; background: var(--dm-gold); }
.ct-logos { margin-top: var(--dm-space-7); padding-top: var(--dm-space-5); border-top: 1px solid var(--dm-border); }
.ct-logos p { font-size: var(--dm-caption); color: var(--dm-text-muted); margin-bottom: var(--dm-space-4); }
.ct-logos p a { color: var(--dm-ink); font-weight: 700; border-bottom: 1px solid var(--dm-border-strong); }
.ct-logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dm-space-5) var(--dm-space-6); list-style: none; margin: 0; padding: 0; }
.ct-logos img { max-height: 32px; max-width: 110px; width: auto; filter: grayscale(1); opacity: 0.7; transition: filter var(--dm-duration) var(--dm-ease), opacity var(--dm-duration) var(--dm-ease); }
.ct-logos img:hover { filter: none; opacity: 1; }

/* The form panel */
.ct-form-wrap { background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: var(--dm-space-8); box-shadow: var(--dm-shadow); }
.ct-form-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--dm-space-4); flex-wrap: wrap; padding-bottom: var(--dm-space-5); margin-bottom: var(--dm-space-6); border-bottom: 1px solid var(--dm-border); }
.ct-form-head__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin: 0; }
.ct-form-head p { margin: 0; font-size: var(--dm-caption); color: var(--dm-text-muted); }
.ct-req { color: var(--dm-oxblood); }
.ct-optional { font-weight: 500; font-size: var(--dm-caption); color: var(--dm-text-muted); margin-left: 4px; }

.ct-group { border: 0; margin: 0 0 var(--dm-space-7); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dm-space-5) var(--dm-space-5); }
.ct-group legend { grid-column: 1 / -1; float: left; width: 100%; padding: 0; margin-bottom: var(--dm-space-4); font-family: var(--dm-font-display); font-size: 1.15rem; font-weight: 600; color: var(--dm-ink); }
.ct-group legend + * { clear: both; }
.ct-field { display: flex; flex-direction: column; gap: var(--dm-space-2); min-width: 0; }
.ct-field--full { grid-column: 1 / -1; }
.ct-field label, .ct-label { font-size: var(--dm-body-sm); font-weight: 600; color: var(--dm-ink); }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--dm-border-strong);
  border-radius: var(--dm-radius);
  background: var(--dm-bg, #fff);
  font: inherit;
  font-size: 1rem;
  color: var(--dm-ink);
  transition: border-color var(--dm-duration-fast) var(--dm-ease), box-shadow var(--dm-duration-fast) var(--dm-ease), background var(--dm-duration-fast) var(--dm-ease);
}
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--dm-text-muted); opacity: 0.7; }
.ct-field input:hover, .ct-field select:hover, .ct-field textarea:hover { border-color: var(--dm-ink); }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--dm-gold-dark); box-shadow: 0 0 0 3px rgba(198, 149, 47, 0.18); }
.ct-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.ct-field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1220' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; cursor: pointer; }
.ct-field.has-error input, .ct-field.has-error select, .ct-field.has-error textarea { border-color: var(--dm-error); }
.ct-field__error { color: var(--dm-error); font-size: var(--dm-caption); font-weight: 600; }

/* Preferred contact — segmented choices */
.ct-choices { display: flex; flex-wrap: wrap; gap: var(--dm-space-2); }
.ct-choice { position: relative; cursor: pointer; }
.ct-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ct-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: var(--dm-radius-full); border: 1px solid var(--dm-border-strong); font-size: var(--dm-body-sm); font-weight: 600; color: var(--dm-ink); transition: background var(--dm-duration-fast) var(--dm-ease), border-color var(--dm-duration-fast) var(--dm-ease), color var(--dm-duration-fast) var(--dm-ease); }
.ct-choice:hover span { border-color: var(--dm-ink); }
.ct-choice input:checked + span { background: var(--dm-ink); border-color: var(--dm-ink); color: var(--dm-text-inverse); }
.ct-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(198, 149, 47, 0.35); }

.ct-submit { display: flex; align-items: center; gap: var(--dm-space-5); flex-wrap: wrap; padding-top: var(--dm-space-6); border-top: 1px solid var(--dm-border); }
.ct-submit__btn { min-height: 54px; padding-inline: 2rem; }
.ct-submit__btn svg { width: 16px; height: 16px; }
.ct-submit p { margin: 0; font-size: var(--dm-body-sm); color: var(--dm-text-muted); }
.ct-submit p a { color: var(--dm-ink); font-weight: 700; border-bottom: 1px solid var(--dm-border-strong); }

/* ---- How can we help: numbered index list ---- */
.ct-svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dm-space-8); border-top: 1px solid var(--dm-ink); }
.ct-svc__link { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; grid-template-areas: "num name go" "num desc go"; column-gap: var(--dm-space-4); row-gap: 2px; align-items: center; padding: var(--dm-space-5) 0; border-bottom: 1px solid var(--dm-border); color: inherit; }
.ct-svc__num { grid-area: num; align-self: start; padding-top: 4px; font-size: var(--dm-caption); font-weight: 700; color: var(--dm-text-muted); transition: color var(--dm-duration) var(--dm-ease); }
.ct-svc__name { grid-area: name; font-family: var(--dm-font-display); font-size: 1.35rem; font-weight: 600; color: var(--dm-ink); transition: color var(--dm-duration) var(--dm-ease), transform var(--dm-duration) var(--dm-ease); }
.ct-svc__desc { grid-area: desc; font-size: var(--dm-body-sm); color: var(--dm-text-muted); transition: transform var(--dm-duration) var(--dm-ease); }
.ct-svc__go { grid-area: go; color: var(--dm-border-strong); transition: color var(--dm-duration) var(--dm-ease), transform var(--dm-duration) var(--dm-ease); }
.ct-svc__go svg { width: 18px; height: 18px; }
.ct-svc__link:hover .ct-svc__num, .ct-svc__link:focus-visible .ct-svc__num { color: var(--dm-gold-dark); }
.ct-svc__link:hover .ct-svc__name, .ct-svc__link:focus-visible .ct-svc__name { color: var(--dm-gold-dark); transform: translateX(4px); }
.ct-svc__link:hover .ct-svc__desc { transform: translateX(4px); }
.ct-svc__link:hover .ct-svc__go { color: var(--dm-ink); transform: translateX(4px); }
.ct-services__foot { margin: var(--dm-space-6) 0 0; color: var(--dm-text-muted); }
.ct-services__foot a { color: var(--dm-ink); font-weight: 700; border-bottom: 1px solid var(--dm-border-strong); }

/* ---- Why ---- */
.ct-why__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--dm-space-9); align-items: start; }
.ct-why__head { position: sticky; top: 110px; }
.ct-why__head h2 { margin-bottom: var(--dm-space-4); }
.ct-why__head p { color: var(--dm-text-muted); margin-bottom: var(--dm-space-5); }
.ct-why__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dm-border); }
.ct-why__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--dm-space-4); padding-block: var(--dm-space-5); border-bottom: 1px solid var(--dm-border); }
.ct-why__num { font-family: var(--dm-font-display); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--dm-gold-dark); }
.ct-why__list h3 { font-size: 1.2rem; margin: 0 0 var(--dm-space-1); }
.ct-why__list p { margin: 0; font-size: var(--dm-body-sm); color: var(--dm-text-muted); }

/* ---- Enquiry flow: horizontal timeline ---- */
.ct-flow__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dm-space-6); }
.ct-flow__step { position: relative; padding-top: var(--dm-space-7); }
.ct-flow__step::before { content: ''; position: absolute; left: 0; right: calc(-1 * var(--dm-space-6)); top: 0; height: 1px; background: rgba(248, 248, 251, 0.2); }
.ct-flow__step:last-child::before { right: 0; }
.ct-flow__step::after { content: ''; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--dm-gold); }
.ct-flow__num { display: block; font-family: var(--dm-font-display); font-size: 3rem; font-weight: 600; line-height: 1; color: var(--dm-gold-light); margin-bottom: var(--dm-space-4); }
.ct-flow__step h3 { font-size: 1.2rem; color: var(--dm-text-inverse); margin-bottom: var(--dm-space-2); }
.ct-flow__step p { margin: 0; font-size: var(--dm-body-sm); line-height: 1.65; color: rgba(248, 248, 251, 0.72); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .ct-hero__grid, .ct-enquiry__grid, .ct-why__grid { grid-template-columns: minmax(0, 1fr); gap: var(--dm-space-7); }
  .ct-head--split { grid-template-columns: minmax(0, 1fr); gap: var(--dm-space-3); }
  .ct-enquiry__side, .ct-why__head { position: static; }
  .ct-enquiry__grid { display: flex; flex-direction: column-reverse; }
  .ct-flow__track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--dm-space-8); }
  .ct-flow__step:nth-child(2)::before { right: 0; }
}
@media (max-width: 640px) {
  .ct-hero { padding-bottom: var(--dm-space-8); }
  .ct-hero__actions .btn { flex: 1 1 100%; justify-content: center; min-height: 52px; }
  .ct-line { grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--dm-space-4); }
  .ct-line__icon { width: 40px; height: 40px; }
  .ct-line__value { font-size: 1.15rem; }
  .ct-line__go--text { display: none; }
  .ct-form-wrap { padding: var(--dm-space-5); border-radius: var(--dm-radius); }
  .ct-group { grid-template-columns: minmax(0, 1fr); }
  .ct-submit { flex-direction: column; align-items: stretch; }
  .ct-submit__btn { width: 100%; justify-content: center; }
  .ct-svc { grid-template-columns: minmax(0, 1fr); }
  .ct-svc__name { font-size: 1.2rem; }
  .ct-why__list li { grid-template-columns: 44px minmax(0, 1fr); }
  .ct-flow__track { grid-template-columns: minmax(0, 1fr); row-gap: var(--dm-space-7); }
  .ct-flow__step::before { right: 0; }
}
.ct-submit p a { white-space: nowrap; }
@media (max-width: 640px) { .ct-line__value { font-size: 1.05rem; } }