/*
  Rajastars Company Profile - sections.css
  Version: 1.4.0 (2026-10-10)
  Features: Layout for hero (with SLA board and values strip), about,
  services, process steps, and contact sections.
  Changelog: 1.4.0 About photo aligned to the top of the text column.
  1.3.0 hero accent wraps normally again (long phrase squeezed
  the SLA board on desktop and overflowed on phones).
  1.2.0 hero accent words stay on one line.
  1.1.0 UI/UX review fixes: no lift on non-clickable service cards,
  stronger form focus ring, 44px map links, contact set apart from process.
*/

/* Hero */
.hero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(var(--header-h) + 72px) 0 56px;
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(0, 174, 239, .28), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(27, 117, 188, .35), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
}
/* Dot field echoing the globe in the Rajastars logo */
.hero-dots {
  position: absolute; right: -120px; top: 40px; width: 620px; height: 620px; border-radius: 50%;
  background-image: radial-gradient(circle, rgba(0, 174, 239, .55) 2px, transparent 2.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 40% 40%, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle at 40% 40%, #000 0%, transparent 68%);
  opacity: .5; pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--cyan); letter-spacing: .04em; margin-bottom: 20px; }
h1 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 800; letter-spacing: -.03em; }
h1 .accent { color: var(--cyan); }
.hero-lead { margin: 24px 0 36px; font-size: 19px; color: var(--on-navy-muted); max-width: 58ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

.board {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); border-radius: 20px; padding: 28px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
}
.board-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--on-navy-muted); margin-bottom: 14px; }
.live { display: inline-flex; align-items: center; gap: 8px; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: #3DDC84; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.kpi { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.kpi-head { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 10px; }
.kpi-head b { font-weight: 600; }
.kpi-head span { font-weight: 700; color: var(--cyan); }
.track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); position: relative; overflow: hidden; }
.fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
}
.board small { display: block; margin-top: 12px; font-size: 13px; color: var(--on-navy-muted); opacity: .8; }

.pillars {
  position: relative; list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.pillars li { padding: 24px 24px 0 0; }
.pillars b { display: block; font-size: 17px; margin-bottom: 4px; }
.pillars span { font-size: 15px; color: var(--on-navy-muted); }

/* About */
.about { display: grid; grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: start; }
.about-media { position: relative; margin: 0; }
.about-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
.about-media figcaption {
  position: absolute; right: -24px; bottom: 36px; background: var(--surface); border-radius: 14px;
  padding: 18px 22px; box-shadow: var(--shadow); display: grid; border-left: 4px solid var(--cyan);
}
.about-media figcaption b { font-size: 22px; }
.about-media figcaption span { font-size: 14px; color: var(--muted); }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.vm-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.vm-block h3 { font-size: 18px; margin-bottom: 8px; color: var(--blue); }
.vm-block p, .vm-block ul { color: var(--muted); font-size: 15px; }
.vm-block ul { margin: 0; padding-left: 18px; }
.vm-block li + li { margin-top: 6px; }

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
  display: flex; flex-direction: column; transition: box-shadow .25s, border-color .25s, background .25s;
}
/* Cards are not links, so hover only changes surface, no lift */
.svc:hover { box-shadow: var(--shadow); border-color: transparent; background: var(--surface); }
.svc-ic {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; margin-bottom: 22px;
  color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.svc h3 { font-size: 20px; margin-bottom: 10px; }
.svc p { color: var(--muted); font-size: 15px; }
.ticks { list-style: none; padding: 18px 0 0; margin: auto 0 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.svc p + .ticks { margin-top: 20px; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li + li { margin-top: 6px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}

/* Process */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 28px 24px; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.steps li::before {
  content: "0" counter(s); display: block; font-size: 15px; font-weight: 800; color: var(--cyan);
  letter-spacing: .1em; margin-bottom: 18px;
}
.steps h3 { font-size: 20px; margin-bottom: 8px; color: #fff; }
.steps p { color: var(--on-navy-muted); font-size: 15px; }

/* Contact */
/* Contact follows the navy process section, so it gets its own glow and a cyan top edge */
.contact {
  color: var(--on-navy); border-top: 3px solid var(--cyan);
  background:
    radial-gradient(800px 420px at 100% 0%, rgba(0, 174, 239, .22), transparent 60%),
    linear-gradient(200deg, #12345A 0%, var(--navy) 100%);
}
.contact .lead { color: var(--on-navy-muted); }
.c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.mail { display: inline-block; margin-top: 16px; padding: 8px 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; color: var(--cyan); text-decoration: none; word-break: break-word; }
.mail:hover { text-decoration: underline; }
.addr { display: grid; gap: 24px; margin-top: 36px; }
.addr > div { padding-left: 18px; border-left: 2px solid rgba(0, 174, 239, .5); }
.addr h3 { font-size: 16px; margin-bottom: 4px; color: #fff; }
.addr p { font-size: 15px; color: var(--on-navy-muted); }
.addr a { display: inline-block; margin-top: 2px; padding: 11px 0; font-size: 14px; font-weight: 600; color: var(--cyan); }
.card-form { background: var(--surface); color: var(--ink); border-radius: 20px; padding: 32px; display: grid; gap: 16px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.card-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.card-form input, .card-form textarea {
  font: inherit; font-size: 16px; font-weight: 400; padding: 13px 14px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); width: 100%;
}
.card-form input:focus, .card-form textarea:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(27, 117, 188, .3);
}
.card-form textarea { min-height: 130px; resize: vertical; }
.row2 { display: flex; gap: 10px; flex-wrap: wrap; }
.hint { font-size: 14px; color: var(--muted); }

@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero-grid, .about, .c-grid { grid-template-columns: 1fr; gap: 40px; }
  .pillars { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .about-media img { aspect-ratio: 4 / 3; }
  .about-media figcaption { right: 16px; bottom: 16px; }
  .hero-dots { width: 420px; height: 420px; right: -160px; }
}
@media (max-width: 560px) {
  .svc-grid, .steps, .vm { grid-template-columns: 1fr; }
  .pillars li { padding-right: 12px; }
  .card-form { padding: 24px; }
  .row2 .btn { flex: 1 1 100%; }
}