/* Brings the site in line with the approved Claude Design handoff. Loads after each page's own styles. */

.brand-lockup {
  display: block;
  height: 42px;
  width: auto;
}

.foot-lockup {
  display: block;
  height: 52px;
  width: auto;
}

.navbar {
  background: rgba(11, 11, 12, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* !important because the page styles set these through more specific nested rules. */
.btn,
.ghost {
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
}

.btn:not(.btnsm),
.ghost:not(.btnsm) {
  font-size: 13px !important;
}

/* Button red is a touch darker than the accent so white text meets WCAG AA (4.64:1). */
.btn,
.ula-btn {
  background: #d8382d !important;
  border-color: #d8382d !important;
  color: #fff !important;
}

.btn:hover,
.ula-btn:hover {
  background: #f5f3f0 !important;
  border-color: #f5f3f0 !important;
  color: #0b0b0c !important;
}

/*
 * Visual hierarchy:
 *   solid red pill   = commit (book, apply, ask, submit)
 *   outlined pill    = go to another page
 *   red arrow / underline = link to read more
 *   card without arrow    = information only
 */
.ghost {
  background: transparent !important;
  border: 1px solid #5a5a5f !important;
  color: #f5f3f0 !important;
}

.ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Contrast: red body text and figure captions meet WCAG AA on the dark backgrounds. */
.client-gap,
.client-gap * {
  color: #e2483e !important;
}

.fig {
  color: #808083 !important;
}

/* Information cards: no outline, so they don't read as buttons. */
.chip {
  border-color: transparent !important;
}

/* Clickable rows and teasers: accent arrow that responds on hover. */
.prow .arrow,
.faqtease .arrow {
  color: var(--accent);
  transition: transform 0.15s ease-out;
}

.prow:hover .arrow,
.faqtease:hover .arrow,
.prow:focus-visible .arrow,
.faqtease:focus-visible .arrow {
  transform: translateX(4px);
}

.prow:hover .pname {
  color: var(--accent);
}

.faqtease:hover,
.faqtease:focus-visible {
  border-color: var(--accent) !important;
}

/* Inline text links. */
main p a:not(.btn):not(.ghost):hover,
main li a:not(.btn):not(.ghost):hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Photos added from the design fill their container instead of showing at full size. */
img.frame-fill,
img.bleed-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.frame-fill {
  border-radius: 20px;
}

img.cine {
  filter: grayscale(0.25) contrast(1.07) brightness(0.9);
}

.scrim2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(11, 11, 12, 0.94) 0, rgba(11, 11, 12, 0.68) 50%, rgba(11, 11, 12, 0.82) 100%);
}

.ctaglow {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 48px;
}

.ctaglow .sechead,
.ctaglow .lead {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 8px 30px rgba(0, 0, 0, 0.55);
}

.ctaglow .eyebrow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Discovery flight form: the design's hero above now carries the photo and the key facts. */
.discovery-request::before {
  display: none !important;
}

.discovery-request__left {
  display: none !important;
}

.discovery-request__shell {
  grid-template-columns: minmax(0, 560px) !important;
}

.discovery-request__primary-btn {
  background: #d8382d !important;
  border-color: #d8382d !important;
  color: #fff !important;
}

.discovery-request__primary-btn:hover {
  background: #f5f3f0 !important;
  border-color: #f5f3f0 !important;
  color: #0b0b0c !important;
}

/* Path cards sit side by side as in the design, instead of stacking. */
.fx.gap12:has(> .path) {
  flex-direction: row !important;
  flex-wrap: wrap;
}

.path {
  min-width: 270px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

/* Card buttons line up along the bottom, whatever the length of the text above them. */
.path > .ghost,
.path > .btn {
  margin-top: auto !important;
  align-self: flex-start;
}

.path > :nth-last-child(2) {
  margin-bottom: 26px;
}

.cx {
  font-size: 14.5px;
  line-height: 1.55;
  color: #8a8580;
  margin: 0;
}

/* Numbered steps (International). Scoped, because other pages use .step for other layouts. */
.ula-steps .step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid #222226;
}

.ula-steps .stepnum {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #e2483e;
  padding-top: 4px;
}

.ula-steps .steptitle {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
}

.ula-steps .steptext {
  font-size: 15.5px;
  line-height: 1.6;
  color: #8a8580;
  margin: 8px 0 0;
  max-width: 680px;
}

@media (max-width: 640px) {
  .ula-steps .step {
    grid-template-columns: 40px 1fr;
    gap: 14px;
  }
}

@media (min-width: 901px) {
  .navcta-full {
    display: inline !important;
  }

  .navcta-short {
    display: none !important;
  }
}

@media (max-width: 640px) {
  /* The Book link is in the phone menu, and the full logo needs the room. */
  .nav-mobile-book {
    display: none !important;
  }

  .ctaglow {
    padding: 40px 0;
  }
}