/* home.css: homepage */

/* ================= HERO ================= */
.hero {
  --g-light: var(--grad-hero-light);
  --g-dark: var(--grad-hero-dark);
  padding-block: clamp(2.75rem, 6vw, 5rem);
  color: var(--on-grad);
}

.hero__orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero__orb--a {
  top: -14rem;
  right: -9rem;
  width: 36rem;
  height: 36rem;
  background: radial-gradient(circle, rgba(54, 183, 216, 0.3), rgba(54, 183, 216, 0) 65%);
}
.hero__orb--b {
  bottom: -13rem;
  left: -9rem;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(197, 164, 109, 0.2), rgba(197, 164, 109, 0) 65%);
}

.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.hero .eyebrow { color: var(--c-cyan); }
.hero__title { max-width: 20ch; font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.03em; color: var(--on-grad); }
.hero__title-accent { color: #8fd3e8; }
.hero__lead { max-width: 34rem; font-size: var(--fs-lead); color: var(--on-grad-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-4); }

.hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-4); list-style: none; }
.hero__chips a {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero__chips a:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--c-gold); color: #ffffff; text-decoration: none; }
.hero :focus-visible { outline-color: var(--focus-on-dark); }

/* ---------- Hero visual: framed image slider ---------- */
.hero-visual { position: relative; padding: 0 0 1.25rem 1.25rem; }
.hero-visual__frame {
  position: absolute;
  inset: 1.25rem 1.25rem 0 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl);
}
.hero-visual::after { content: ''; position: absolute; left: 0; top: 3rem; width: 3px; height: 4.5rem; background: var(--c-gold); }

.hero-slider {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  isolation: isolate;
  background: #0e2238;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 39.99rem) { .hero-slider { aspect-ratio: 4 / 3; } }

.hero-slider__viewport { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 900ms var(--ease-out), visibility 0s linear 900ms;
}
.hero-slide.is-before { transform: translateX(-100%); }
.hero-slide.is-after { transform: translateX(100%); }
.hero-slide.is-active { visibility: visible; transform: none; transition-delay: 0s; }
.hero-slide.no-anim { transition: none; }

.hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.07);
  transition: transform 6.5s var(--ease-out);
}
.hero-slide.is-active .hero-slide__img { transform: none; }
.hero-slide__img[data-pos='top'] { object-position: center top; }
.hero-slide__img[data-pos='bottom'] { object-position: center bottom; }
.hero-slide__img[data-pos='left'] { object-position: left center; }
.hero-slide__img[data-pos='right'] { object-position: right center; }

.hero-slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.5rem 1.25rem 4.1rem;
  background: linear-gradient(to top, rgba(6, 14, 26, 0.82), rgba(6, 14, 26, 0));
  font-weight: 600;
  color: #ffffff;
}

/* Controls (shown only when JavaScript is running) */
.hero-slider__controls {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.hero-slider.is-ready .hero-slider__controls { display: flex; }

.hero-slider__dots { display: flex; }
.hero-slider__dot { position: relative; width: 1.9rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-slider__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  transition: width var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.hero-slider__dot[aria-current='true']::before { width: 1.5rem; background: #ffffff; }

.hero-slider__buttons { display: flex; gap: 0.4rem; }
.hero-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  background: rgba(6, 14, 26, 0.6);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero-slider__btn:hover { background: rgba(6, 14, 26, 0.85); border-color: #ffffff; }
.hero-slider__btn svg { width: 1.15rem; height: 1.15rem; }
.hero-slider__pause .icon-play { display: none; }
.hero-slider.is-paused .hero-slider__pause .icon-play { display: block; }
.hero-slider.is-paused .hero-slider__pause .icon-pause { display: none; }
.hero-slider :focus-visible { outline-color: #ffffff; }

/* Progress line: also drives the automatic advance (see hero-slider.js) */
.hero-slider__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: none; height: 3px; background: rgba(255, 255, 255, 0.25); }
.hero-slider.is-ready .hero-slider__progress { display: block; }
.hero-slider__bar { display: block; height: 100%; background: var(--c-gold); transform: scaleX(0); transform-origin: left; }
.hero-slider__bar.is-running { animation: hero-progress var(--hero-interval, 6500ms) linear forwards; }
@keyframes hero-progress { to { transform: scaleX(1); } }

.hero-slider:hover .hero-slider__bar,
.hero-slider:focus-within .hero-slider__bar,
.hero-slider.is-paused .hero-slider__bar,
.hero-slider.is-hidden .hero-slider__bar { animation-play-state: paused; }

/* Visitors who ask for less motion get no automatic sliding */
.hero-slider.is-static .hero-slider__progress,
.hero-slider.is-static .hero-slider__pause { display: none; }

/* Without JavaScript only the first slide shows */
.hero-slider:not(.is-ready) .hero-slide:not(.is-active) { display: none; }

/* ================= INTRODUCTION ================= */
.intro { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 56rem) { .intro { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4.5rem; } }

.media-frame { position: relative; padding: 0 1.25rem 1.25rem 0; }
.media-frame::before {
  content: '';
  position: absolute;
  inset: 1.25rem 0 0 1.25rem;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.media-frame__img,
.media-frame__placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.media-frame__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px dashed var(--accent);
  color: var(--text-muted);
}
.media-frame__placeholder .icon { width: 3rem; height: 3rem; color: var(--accent); }

/* ================= SERVICES ================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
  list-style: none;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.service-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 1.6rem;
  right: 1.6rem;
  height: 2px;
  background: linear-gradient(90deg, var(--c-blue-2), var(--c-cyan), var(--c-teal));
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
@media (hover: hover) {
  .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
  .service-card:hover::before { opacity: 1; }
}
.service-card__icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 1.1rem;
  background: var(--tile-bg);
  color: var(--tile-text);
  border-radius: 12px;
  transition: background-color var(--t-med) var(--ease);
}
.service-card__icon .icon { width: 1.5rem; height: 1.5rem; }
.service-card__title { margin-bottom: 0.4rem; font-size: 1.2rem; }
.service-card__title a { color: inherit; text-decoration: none; }
/* Makes the whole card clickable through the title link */
.service-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.service-card__title a:focus-visible { outline: none; }
.service-card__title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.service-card__text { flex: 1; color: var(--text-2); }
.service-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--link); }

/* ================= APPROACH (deep gradient) ================= */
.approach { --g-light: var(--grad-deep-light); --g-dark: var(--grad-deep-dark); color: var(--on-grad-2); }
.approach h2,
.approach h3 { color: var(--on-grad); }
.approach .eyebrow { color: var(--c-gold); }
.approach .section__intro { color: var(--on-grad-2); }
.approach a { color: #ffffff; }
.approach :focus-visible { outline-color: var(--focus-on-dark); }

.approach-layout { display: grid; gap: var(--space-5); }
@media (min-width: 56rem) { .approach-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; } }

.principles__row { padding: 1rem 0; border-top: 1px solid var(--border); }
.principles__row:last-child { border-bottom: 1px solid var(--border); }
.principles dt { margin-bottom: 0.25rem; font-size: 1.08rem; font-weight: 700; color: var(--heading); }
.principles dd { margin: 0; color: var(--text-2); }

.approach .principles__row { border-color: rgba(255, 255, 255, 0.2); }
.approach .principles dt { color: #ffffff; }
.approach .principles dd { color: var(--on-grad-2); }

.work-steps-wrap { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.work-steps__heading { margin-bottom: 1.25rem; }
.work-steps { display: grid; gap: 1.25rem; list-style: none; }
@media (min-width: 40rem) { .work-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .work-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-steps__item { padding: 1.25rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-lg); }
.work-steps__item p { margin: 0; color: var(--on-grad-2); }
.work-steps__num { display: block; margin-bottom: 0.5rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-gold); }
.work-steps__title { margin-bottom: 0.35rem; font-size: 1.05rem; }

/* ================= KNOWLEDGE CENTER PREVIEW ================= */
.kc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-4); }
.kc__title { margin-bottom: 0; }

.resource-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  list-style: none;
}
.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
@media (hover: hover) {
  .resource-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
}
.resource-card__meta { margin-bottom: 0.5rem; font-size: var(--fs-small); color: var(--text-muted); }
.resource-card__cat { display: inline-block; margin-right: 0.5rem; padding: 0.1rem 0.55rem; background: var(--bg-tint); border-radius: var(--radius-sm); font-weight: 700; color: var(--accent); }
.resource-card__title { margin-bottom: 0.5rem; font-size: 1.15rem; }
.resource-card__title a { color: inherit; text-decoration: none; }
.resource-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.resource-card__title a:focus-visible { outline: none; }
.resource-card__title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.resource-card p:last-child { margin: 0; color: var(--text-2); }

/* ================= CONTACT ================= */
.contact-section { background: var(--bg-tint); }
.contact-layout-home { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 56rem) { .contact-layout-home { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; } }

.contact-cards { display: grid; gap: 1rem; list-style: none; }
@media (min-width: 40rem) { .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-card { padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.contact-card__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.75rem; background: var(--tile-bg); color: var(--tile-text); border-radius: 10px; }
.contact-card__label { display: block; margin-bottom: 0.2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.contact-card__value { margin: 0; overflow-wrap: anywhere; }
/* ---------- Hallmark tags and three-phase steps (homepage approach section) ---------- */
.hallmark-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; list-style: none; }
.hallmark-tags li { padding: 0.3rem 0.8rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 600; color: #ffffff; }
@media (min-width: 64rem) { .work-steps.work-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }