/* ============================================================
   ASCENT — Sub-pages (Services, About, Contact, Legal)
   ============================================================ */

/* ---------- Page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hairline); }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero__bg::before { content:""; position:absolute; top:-280px; left:50%; transform:translateX(-50%); width:1000px; height:600px; background: radial-gradient(50% 50% at 50% 50%, rgba(99,102,241,0.14) 0%, transparent 70%); }
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero--center .page-hero__inner { margin: 0 auto; text-align: center; }
.page-hero h1 { font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -0.035em; line-height: 1.04; margin-top: 18px; }
.page-hero h1 .grad { background: var(--indigo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero__sub { font-size: clamp(17px, 2vw, 20px); color: var(--slate-500); margin-top: 22px; line-height: 1.55; }
.page-hero--center .page-hero__sub { max-width: 600px; margin-left: auto; margin-right: auto; }

/* Breadcrumb-ish small label handled by .eyebrow */

/* ---------- Services page ---------- */
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.svc-detail + .svc-detail { margin-top: clamp(56px, 7vw, 96px); }
.svc-detail__media { order: 2; }
.svc-detail--rev .svc-detail__media { order: 0; }
.svc-detail__vis { aspect-ratio: 4/3; }
.svc-detail h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; margin: 18px 0 0; }
.svc-detail p { font-size: 16px; color: var(--slate-500); line-height: 1.6; margin-top: 16px; }
.svc-detail__list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.svc-detail__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--slate-700); }
.svc-detail__list svg { width: 20px; height: 20px; color: var(--indigo); flex: none; margin-top: 1px; }
.svc-num { font-family: var(--mono); font-size: 13px; color: var(--indigo); font-weight: 500; letter-spacing: 0.04em; }

/* ---------- About page ---------- */
.about-lead { font-size: clamp(20px, 2.6vw, 28px); color: var(--ink); line-height: 1.45; letter-spacing: -0.02em; max-width: 820px; font-weight: 500; }
.about-lead .grad { background: var(--indigo-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-grid p { font-size: 16px; color: var(--slate-500); line-height: 1.65; }
.about-grid p + p { margin-top: 18px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.value { padding: 28px; }
.value h3 { font-size: 18px; letter-spacing: -0.02em; margin: 16px 0 8px; }
.value p { font-size: 14.5px; color: var(--slate-500); line-height: 1.55; }
.about-cards { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top: 32px;}
.mini-stat { padding: 26px; }
.mini-stat .v { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); background: var(--indigo-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.mini-stat .k { font-size: 14px; color: var(--slate-500); margin-top: 10px; }

/* ---------- Contact page ---------- */
.contact-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-intro h1 { font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.035em; line-height: 1.05; margin-top: 16px; }
.contact-intro__sub { font-size: 17px; color: var(--slate-500); margin-top: 20px; line-height: 1.6; }
.contact-details { display: flex; flex-direction: column; gap: 4px; margin-top: 36px; }
.contact-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.contact-item:last-child { border-bottom: none; }
.contact-item__ic { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(160deg,#EEF0FF,#E0E3FF); color: var(--indigo-700); display: grid; place-items: center; flex: none; }
.contact-item__ic svg { width: 19px; height: 19px; }
.contact-item .k { font-size: 12.5px; color: var(--slate-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.contact-item .v { font-size: 15.5px; color: var(--ink); font-weight: 600; margin-top: 3px; }
.contact-item .v a { color: var(--indigo); }
.contact-reply { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding: 11px 16px; background: #ECFDF5; border: 1px solid #BBF7D0; border-radius: var(--r-pill); font-size: 13.5px; color: #15803D; font-weight: 600; }
.contact-reply svg { width: 16px; height: 16px; }

/* Form */
.form-card { padding: clamp(28px, 4vw, 44px); }
.form-card h2 { font-size: 22px; letter-spacing: -0.02em; }
.form-card > p { font-size: 14.5px; color: var(--slate-500); margin-top: 6px; }
.form { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--indigo); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--slate-200); border-radius: var(--r-md);
  background: var(--surface); transition: border-color .15s, box-shadow .15s; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
.field.has-error input, .field.has-error textarea { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
.field__err { font-size: 12.5px; color: #DC2626; font-weight: 500; display: none; }
.field.has-error .field__err { display: block; }
.form__submit { margin-top: 6px; }
.form__note { font-size: 12.5px; color: var(--slate-400); text-align: center; }
.form__note a { color: var(--indigo); }

/* Success state */
.form-success { display: none; flex-direction: column; align-items: center; text-align: center; padding: clamp(40px, 6vw, 64px) 32px; }
.form-success.is-shown { display: flex; }
.form-success__ic { width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(160deg,#34D399,#059669); display: grid; place-items: center; box-shadow: 0 12px 28px rgba(5,150,105,0.3); margin-bottom: 24px; animation: pop .5s cubic-bezier(.2,1.3,.4,1); }
.form-success__ic svg { width: 32px; height: 32px; color: #fff; }
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.form-success h2 { font-size: 24px; letter-spacing: -0.02em; }
.form-success p { font-size: 15.5px; color: var(--slate-500); margin-top: 12px; max-width: 380px; line-height: 1.55; }
.form-success .btn { margin-top: 28px; }
.form-card.is-submitted .form, .form-card.is-submitted h2, .form-card.is-submitted > p { display: none; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal__updated { font-size: 13.5px; color: var(--slate-400); font-family: var(--mono); }
.legal h2 { font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 14px; }
.legal h3 { font-size: 17px; margin: 24px 0 10px; }
.legal p { font-size: 15.5px; color: var(--slate-600); line-height: 1.7; margin-bottom: 14px; }
.legal ul { display: flex; flex-direction: column; gap: 9px; margin: 0 0 16px; padding-left: 4px; }
.legal ul li { position: relative; padding-left: 22px; font-size: 15.5px; color: var(--slate-600); line-height: 1.6; }
.legal ul li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.legal a { color: var(--indigo); }

/* CTA strip reused */
.cta-strip { background: var(--surface); border-top: 1px solid var(--hairline); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; gap: 40px; }
  .svc-detail, .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .svc-detail__media, .svc-detail--rev .svc-detail__media { order: -1; }
  .values { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .field--row { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: 1fr; }
}