/* ==========================================================================
   BOOK A DEMO AND CONTACT · V8, new design (19 Oct 2026)
   One deep hero with the promise on the left and the shared form on a
   white card on the right; the form's topic sets its button and prompt.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.dm-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); background: var(--deep); color: var(--on-deep); }
.dm-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.dm-hero__bg span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.dm-hero__bg span:first-child { width: 46%; padding-bottom: 46%; left: -10%; top: -6%; background: rgba(106, 70, 200, .5); }
.dm-hero__bg span:last-child { width: 40%; padding-bottom: 40%; right: -8%; bottom: -14%; background: rgba(16, 130, 124, .38); }
.dm-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.dm-title { margin: clamp(8px, 2vw, 24px) 0 0; font-size: 48px; line-height: 1.08; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.dm-title em { color: var(--accent-lift); }
.dm-lede { margin: 20px 0 0; max-width: 30em; font: 500 clamp(17px, 1.4vw, 20px)/1.55 var(--font); color: var(--on-deep-2); }

/* --- What the demo covers --- */
.dm-covers { margin-top: clamp(28px, 3.5vw, 40px); }
.dm-covers__t { margin: 0 0 14px; font: 700 18px/1.2 var(--font); color: #fff; }
.dm-covers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dm-covers__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-deep); font: 400 15.5px/1.5 var(--font); color: var(--on-deep-2); }
.dm-covers__list b { color: #fff; }
.dm-covers__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(142, 155, 255, .16); color: #C9CEFF; font-size: 22px; }

/* --- Ways to reach the team (Contact) --- */
.dm-ways { list-style: none; margin: clamp(28px, 3.5vw, 40px) 0 0; padding: 0; display: grid; gap: 10px; max-width: 480px; }
.dm-ways a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-deep); color: inherit; text-decoration: none; transition: background-color .25s, transform .25s var(--ease-soft); }
.dm-ways a:hover { background: rgba(255, 255, 255, .09); transform: translateX(4px); }
.dm-ways a:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }
.dm-ways__ic { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: rgba(142, 155, 255, .16); color: #C9CEFF; font-size: 22px; }
.dm-ways b { display: block; margin-bottom: 2px; font: 700 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--on-deep-3); }
.dm-ways a > span:last-child { font: 600 16px/1.35 var(--font); color: #fff; }

/* ==========================================================================
   THE FORM CARD · simple, on the dark page (19 Oct, after ada.cx/demo)
   ========================================================================== */
.dm-card { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -40px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dm-form { display: flex; flex-direction: column; gap: 18px; }
.dm-form[hidden] { display: none; }
.dm-form__title { margin: 0 0 4px; font: 700 clamp(22px, 2vw, 26px)/1.2 var(--font); letter-spacing: -.02em; color: #fff; }
.dm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dm-card .field { gap: 8px; }
.dm-card .field > label { font: 600 13.5px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--on-deep-2); }
.dm-card .field input, .dm-card .field select, .dm-card .field textarea { width: 100%; height: 48px; padding: 0 15px; border-radius: 12px; border: 1px solid rgba(190, 198, 245, .22); background: rgba(255, 255, 255, .06); font: 400 15px/1.4 var(--font); color: #fff; transition: border-color .2s, background-color .2s; }
.dm-card .field textarea { height: auto; min-height: 112px; padding: 13px 15px; resize: vertical; }
.dm-card .field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23B9B7BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; cursor: pointer; }
.dm-card .field select option { color: #17172B; }
.dm-card .field input:hover, .dm-card .field select:hover, .dm-card .field textarea:hover { border-color: rgba(190, 198, 245, .42); }
.dm-card .field input:focus, .dm-card .field select:focus, .dm-card .field textarea:focus { outline: none; border-color: var(--accent-lift); background-color: rgba(255, 255, 255, .09); }
.dm-card .field input:focus-visible, .dm-card .field select:focus-visible, .dm-card .field textarea:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }
/* An error line takes room only when it has something to say, so the rows stay evenly spaced. */
.dm-card .field .err { min-height: 0; margin: 0; font: 500 12.5px/1.3 var(--font); color: #FFB4B4; }
.dm-card .field .err:empty { display: none; }
.dm-card .field.is-invalid input { border-color: #FF8E8E; }
.dm-submit { width: 100%; justify-content: center; margin-top: 4px; }
.dm-privacy { margin: -4px 0 0; text-align: center; font: 500 13px/1.5 var(--font); color: var(--on-deep-3); }
.dm-done { display: grid; justify-items: center; gap: 10px; padding-block: 40px; text-align: center; }
.dm-done[hidden] { display: none; }
.dm-done__ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #22C08F; color: #fff; }
.dm-done__ic svg { width: 26px; height: 26px; }
.dm-done h2 { margin: 6px 0 0; font: 700 24px/1.2 var(--font); color: #fff; }
.dm-done p { margin: 0 0 8px; font: 500 15.5px/1.5 var(--font); color: var(--on-deep-2); }

/* --- Book a demo: one field per line, so the card runs the same height
   as the promise and the four points beside it --- */
.page-demo .dm-hero__grid { align-items: stretch; }
.page-demo .dm-card { display: flex; flex-direction: column; justify-content: center; }
.page-demo .dm-row { grid-template-columns: minmax(0, 1fr); }
.page-demo .dm-title { margin-top: 0; }

/* --- Contact: the logos sit on the same dark page --- */
.page-contact .dm-hero .logos { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 80px); padding: 0; background: none; border: 0; }
.page-contact .dm-hero .logos__title { color: #fff; }
.page-contact .dm-hero .logos img { filter: invert(1); opacity: .7; }

/* ==========================================================================
   PREFER TO EXPLORE FIRST?
   ========================================================================== */
.dm-exp { display: flex; align-items: center; gap: 22px; max-width: 980px; margin-inline: auto; padding: clamp(22px, 3vw, 34px) clamp(22px, 3.5vw, 40px); border-radius: var(--card-r); background: #fff; box-shadow: var(--card-shadow); }
.dm-exp__bot { display: block; width: 76px; height: 76px; flex: none; }
.dm-exp__bot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dm-exp__copy { flex: 1; }
.dm-exp__t { margin: 0; font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.dm-exp__copy p { margin: 6px 0 0; font: 500 16.5px/1.5 var(--font); color: var(--body); }
.dm-exp .btn { flex: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .dm-hero__grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; row-gap: 24px; }
  /* On one column the form comes straight after the promise; what the demo covers follows it. */
  .page-demo .dm-hero__copy { display: contents; }
  .page-demo .dm-title, .page-demo .dm-lede { margin-top: 0; }
  .page-demo .dm-covers { order: 2; margin-top: 8px; }
}
@media (max-width: 600px) {
  .dm-title { font-size: clamp(32px, 8.6vw, 48px); }
  .dm-row { grid-template-columns: minmax(0, 1fr); }
  .dm-card { border-radius: 24px; }
  .dm-submit { align-self: stretch; justify-content: center; }
  .dm-exp { flex-direction: column; align-items: flex-start; }
  .dm-exp .btn { width: 100%; justify-content: center; }
}

/* Contact is one dark page down to the footer: the hero matches the footer's
   deep colour, its glow stays clear of the bottom edge, and the logos get
   the same space below them as above. The logos are inverted, not flattened
   to white, so the ones with light inner detail (Shell, ADB, The College
   Tour) keep that detail. */
.page-contact .dm-hero { padding-bottom: clamp(56px, 6vw, 80px); background: var(--deep); }
.page-contact .dm-hero__bg span:last-child { bottom: 18%; }