/* Home page sections. Loaded on the front page only. */

/* Shared pieces ------------------------------------------------------ */
.sec {
  padding: var(--section-gap) 0;
}

/* Sections on the same white background share a single gap: the lower one
   gives it, the next one starts flush. */
.projects,
.industries,
.process {
  padding-top: 0;
}

.dark {
  color: var(--sas-white);
}

.lab {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 400;
  color: var(--sas-navy);
}

.lab i {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--sas-sky);
}

.dark .lab {
  color: var(--sas-white);
}

.h2 {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.dark .h2,
.dark :is(h1, h2, h3) {
  color: var(--sas-white);
}

.body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sas-ink);
}

.dark .body {
  color: var(--sas-white);
}

.btn.o {
  background: transparent;
  color: var(--sas-white);
  border-color: var(--sas-white);
}

.dark .btn:hover {
  background: var(--sas-sky);
  border-color: var(--sas-sky);
  color: var(--sas-white);
}

.dark .btn.o:hover {
  background: var(--sas-white);
  border-color: var(--sas-white);
  color: var(--sas-navy);
}

.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--sas-sky);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--sas-sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}

.tlink:hover::after {
  transform: scaleX(1);
}

/* Photo frame: the image fills it and zooms slowly on hover */
.ph {
  overflow: hidden;
  background: var(--sas-navy);
}

.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.card:hover .ph img,
.zoom:hover img {
  transform: scale(1.04);
}

.arc {
  transition: transform 200ms ease;
}

.card:hover .arc,
.arc:hover {
  transform: scale(1.08);
}

/* Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 820px;
  background: var(--sas-ink);
}

.hero__img,
.band__img,
.cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__shade {
  position: absolute;
  inset: 0;
  background: #11111199;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 820px;
  padding-bottom: 120px;
}

.hero__title {
  max-width: 1120px;
  font-size: clamp(42px, 6.8vw, 104px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero__actions {
  margin-top: 44px;
}

.herobox {
  display: block;
  position: absolute;
  right: clamp(20px, 5vw, 80px);
  bottom: -64px;
  z-index: 3;
  width: 380px;
  padding: 40px 40px 36px;
  background: var(--sas-white);
  color: var(--sas-navy);
  text-decoration: none;
}

.herobox__title {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--sas-navy);
}

.herobox__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sas-sky);
}

/* Intro -------------------------------------------------------------- */
/* The hero card hangs 64px below the photo, so add that to the gap. */
.intro {
  padding-top: calc(var(--section-gap) + 64px);
}

.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.intro__grid {
  gap: clamp(40px, 6vw, 96px);
}

.intro__key {
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--sas-navy);
}

.intro__value {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--sas-ink);
}

/* Projects ----------------------------------------------------------- */
.projects__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}

.projects__title {
  max-width: 620px;
  margin-top: 32px;
  font-weight: 400;
}

.projects__all {
  justify-self: end;
}

.projects__grid {
  gap: 32px;
  margin-top: 80px;
}

.card {
  display: block;
  color: var(--sas-navy);
  text-decoration: none;
}

.card__media {
  position: relative;
}

.card__media .ph {
  aspect-ratio: 4 / 5;
}

.card__plus {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--sas-white);
  color: var(--sas-navy);
  font-size: 24px;
  font-weight: 300;
}

.card__cat {
  margin-top: 28px;
  font-size: 14px;
  color: var(--sas-sky);
}

.card__title {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
}

/* Industries --------------------------------------------------------- */
.industries__title {
  margin-top: 32px;
  font-weight: 400;
}

.industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 64px);
  margin-top: 88px;
}

.industry__icon {
  display: block;
  width: 78px;
  height: 75px;
}

.industry__title {
  /* 32px plus the 4px baseline gap the mockup's inline icon leaves */
  margin-top: 36px;
  font-size: 24px;
  font-weight: 300;
}

.industry__desc {
  margin-top: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.chip {
  display: inline-block;
  padding: 6px 12px;
  background: var(--sas-white);
  border: 1px solid #073b6340;
  font-size: 13px;
  color: var(--sas-navy);
}

/* How it works ------------------------------------------------------- */
.process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 128px);
  align-items: center;
}

.stack {
  position: relative;
  min-height: 680px;
}

.stack__a,
.stack__b {
  position: absolute;
}

.stack__a {
  top: 0;
  left: 0;
  z-index: 1;
  width: 70%;
  aspect-ratio: 4 / 5;
}

.stack__a img {
  object-position: 50.3% 50%;
}

.stack__b {
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 54%;
  aspect-ratio: 3 / 4;
}

.process__title {
  margin-top: 32px;
  font-weight: 400;
}

.process__intro {
  max-width: 480px;
  margin-top: 28px;
}

.steps {
  max-width: 480px;
  margin: 40px 0 0;
  border-bottom: 1px solid #073b631f;
}

.steps > li {
  border-top: 1px solid #073b631f;
}

.process__cta {
  margin-top: 44px;
}

/* Accordion rows share one chevron */
.chev {
  transition: transform 240ms ease;
}

[aria-expanded="true"] > .chev,
[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.stepbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--sas-navy);
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease;
}

.stepbtn:hover {
  color: var(--sas-sky);
}

.stepbtn__label {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stepnum {
  flex-shrink: 0;
  width: 24px;
  color: var(--sas-sky);
  font-size: 15px;
  font-weight: 600;
}

.steparr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  color: var(--sas-sky);
  transition: color 180ms ease;
}

.stepbtn:hover .steparr,
.stepbtn[aria-expanded="true"] .steparr {
  color: var(--sas-navy);
}

.stepbody {
  padding: 0 0 20px 48px;
}

.stepbody p {
  font-size: 15px;
  line-height: 1.7;
  color: #45607f;
}

.stepbody[hidden],
.capbody[hidden],
.accbody[hidden] {
  display: none;
}

/* Capabilities ------------------------------------------------------- */
.capabilities {
  padding: var(--section-gap) 0;
  background: var(--sas-ink);
}

.capabilities__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.capabilities__intro {
  max-width: 440px;
}

.capabilities__title {
  margin-top: 24px;
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 400;
  line-height: 1.12;
}

.capabilities__lead {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #9fb9d5;
}

.dark .capabilities__lead {
  color: #9fb9d5;
}

.capview {
  position: relative;
  width: 100%;
  margin-top: 28px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--sas-line-dark);
  background: #071a33;
}

.capview__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 300ms ease;
}

.capview__img.is-swapping {
  opacity: 0;
}

.capview__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 18px;
  background: linear-gradient(180deg, transparent, rgba(7, 26, 51, 0.92));
}

.capview__kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.capview__name {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  color: var(--sas-white);
}

.capitem {
  border-top: 1px solid var(--sas-line-dark);
}

.capitem:last-child {
  border-bottom: 1px solid var(--sas-line-dark);
}

.capbtn {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 27px 0;
  border: 0;
  background: none;
  color: var(--sas-white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease;
}

.capbtn:hover {
  color: var(--sas-sky);
}

.capnum {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--sas-sky);
}

.captitle {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: inherit;
}

.dark .capbtn:hover .captitle {
  color: var(--sas-sky);
}

.caparr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  color: var(--sas-sky);
  transition: color 180ms ease;
}

.caparr svg {
  transition: transform 240ms ease;
}

.capbtn:hover .caparr,
.capbtn[aria-expanded="true"] .caparr {
  color: var(--sas-white);
}

.capbtn[aria-expanded="true"] .caparr svg {
  transform: rotate(180deg);
}

.capbody {
  padding: 0 32px 20px 76px;
}

.capbody p {
  font-size: 15px;
  line-height: 1.7;
  color: #9fb9d5;
}

/* Built to last ------------------------------------------------------ */


.why__grid {
  display: grid;
  grid-template-columns: 4fr 4fr 3fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.why__title {
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 400;
}

.why__lead {
  max-width: 360px;
  margin-top: 32px;
}

.accs {
  margin-top: 40px;
}

.acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--sas-line-strong);
  background: none;
  color: var(--sas-navy);
  font-family: inherit;
  font-size: 22px;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
}

.acc__sign {
  width: 24px;
  font-size: 22px;
  font-weight: 300;
  text-align: center;
  color: var(--sas-sky);
}

.accbody {
  padding: 20px 0 8px;
}

.statsimg {
  align-self: start;
  aspect-ratio: 3 / 4;
}

.stat {
  padding: 32px 0;
  border-bottom: 1px solid var(--sas-line);
}

.stat__value {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--sas-navy);
}

.stat__key {
  margin-top: 12px;
  font-size: 15px;
  color: var(--sas-ink);
}

/* Image band --------------------------------------------------------- */
.band {
  position: relative;
  display: flex;
  align-items: center;
  height: 440px;
  overflow: hidden;
  background: var(--sas-navy);
  color: var(--sas-white);
}

.band__shade {
  position: absolute;
  inset: 0;
  background: #073b6373;
}

.band__inner {
  position: relative;
  width: 100%;
}

.band__title {
  max-width: 900px;
  font-size: clamp(44px, 5.6vw, 80px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sas-white);
}

/* Founder ------------------------------------------------------------ */
.founder {
  background: var(--sas-white);
  border-top: 1px solid var(--sas-line);
}

.founder__grid {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.founder__title {
  font-weight: 400;
}

.founder__cta {
  margin-top: 40px;
}

.founder__photo {
  aspect-ratio: 4 / 5;
}

.founder__photo img {
  filter: grayscale(1) contrast(1.05);
}

.founder__name {
  font-size: 30px;
  font-weight: 400;
}

.founder__role {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sas-ink);
}

.founder__bio {
  margin-top: 24px;
}

/* Call to action ----------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--sas-ink);
  border-bottom: 4px solid var(--sas-sky);
}

.cta__shade {
  position: absolute;
  inset: 0;
  background: #111111d9;
}

.cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(48px, 8vw, 128px);
  align-items: end;
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.cta__title {
  margin-top: 24px;
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 400;
}

.cta__lead {
  max-width: 520px;
  margin-top: 20px;
  font-size: 17px;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.ctarow {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #ffffff26;
  color: var(--sas-white);
  text-decoration: none;
}

.ctarow:last-child {
  border-bottom: 1px solid #ffffff26;
}

.ck {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sas-sky);
}

.cv {
  font-size: 18px;
  font-weight: 300;
}

/* Carousel controls: built by main.js, shown only where a section scrolls */
.carousel-ctrl {
  display: none;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.carousel-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--sas-line-strong);
  transform: translate(-50%, -50%);
  transition: background-color 200ms ease, width 200ms ease;
}

.carousel-dot[aria-current="true"]::before {
  width: 20px;
  background: var(--sas-navy);
}

.carousel-arrows {
  display: flex;
  gap: 8px;
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--sas-navy);
  background: var(--sas-white);
  color: var(--sas-navy);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.carousel-btn:hover:not(:disabled) {
  background: var(--sas-navy);
  color: var(--sas-white);
}

.carousel-btn:disabled {
  border-color: var(--sas-line-strong);
  color: var(--sas-line-strong);
  cursor: default;
}

.carousel-btn svg {
  transition: none;
}

.carousel-btn--prev svg {
  transform: scaleX(-1);
}

/* Responsive --------------------------------------------------------- */
/* Tablet and below: one column, calmer vertical rhythm */
@media (max-width: 1000px) {
  /* No hanging card on tablet and phone: the plain gap applies. */
  .intro {
    padding-top: var(--section-gap);
  }

  .g3,
  .projects__head,
  .process__grid,
  .capabilities__grid,
  .why__grid,
  .founder__grid,
  .cta__grid {
    grid-template-columns: 1fr;
  }

  .intro__grid {
    gap: 40px;
  }

  .projects__all {
    justify-self: start;
  }

  .projects__head {
    gap: 8px;
  }

  .projects__grid,
  .industries__grid {
    margin-top: 48px;
  }

  /* Carousel: a swipeable row that snaps card by card, with the next card
     peeking in so it reads as scrollable. */
  .carousel {
    display: flex;
    gap: 24px;
    margin-right: calc(-1 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .carousel::-webkit-scrollbar {
    display: none;
  }

  .carousel > * {
    flex: 0 0 min(46%, 340px);
    scroll-snap-align: start;
  }

  .industries__grid.carousel > * {
    flex-basis: min(40%, 280px);
  }

  .carousel-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
  }

  /* On tablet and phone the card sits fully on the photo, under the button. */
  .herobox {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin: -32px var(--gutter) 0;
  }

  .hero {
    min-height: 0;
    padding-bottom: clamp(24px, 5vw, 40px);
  }

  .hero__inner {
    min-height: 640px;
    padding-bottom: 96px;
  }

  .stack {
    min-height: 0;
    max-width: 560px;
  }

  .stack__b {
    display: none;
  }

  .stack__a {
    position: relative;
    width: 100%;
  }

  .process__grid {
    gap: 48px;
  }

  .capabilities__intro {
    max-width: none;
  }

  .statsimg {
    display: none;
  }

  .why__grid {
    gap: 40px;
  }

  .why__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    border-top: 1px solid var(--sas-line);
  }

  .why__stats .stat {
    padding: 24px 0 0;
    border-bottom: 0;
  }

  .stat__value {
    font-size: clamp(40px, 8vw, 56px);
  }

  .band {
    height: clamp(300px, 52vw, 440px);
  }

  .founder__grid {
    gap: 32px;
  }

  .founder__photo {
    max-width: 440px;
  }

  .cta__grid {
    gap: 40px;
    align-items: start;
  }
}

/* Phone */
@media (max-width: 620px) {
  .hero__inner {
    min-height: 500px;
    padding-bottom: 88px;
  }

  .hero__actions {
    margin-top: 32px;
  }

  .herobox {
    padding: 28px 24px;
  }

  .herobox__title {
    font-size: 26px;
  }

  .herobox__link {
    margin-top: 28px;
  }

  .intro__value {
    font-size: 20px;
  }

  .carousel {
    gap: 16px;
  }

  .carousel > * {
    flex-basis: 78%;
  }

  .industries__grid.carousel > * {
    flex-basis: 72%;
  }

  .industry__title {
    margin-top: 28px;
  }

  .capbtn {
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    padding: 22px 0;
  }

  .captitle {
    font-size: 20px;
  }

  .capbody {
    padding: 0 8px 18px 50px;
  }

  .stepbody {
    padding-left: 0;
  }

  .acc {
    font-size: 20px;
    padding: 20px 0;
  }

  .why__stats {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 0;
  }

  .why__stats .stat {
    padding: 24px 0;
    border-bottom: 1px solid var(--sas-line);
  }

  .why__stats .stat:first-child {
    border-top: 1px solid var(--sas-line);
  }

  .founder__photo {
    max-width: none;
  }

  .cta__actions .btn {
    flex: 1 1 100%;
  }

  .ctarow {
    grid-template-columns: 76px 1fr auto;
    gap: 12px;
  }

  .cv {
    font-size: 16px;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc,
  .ph img,
  .tlink::after,
  .chev,
  .capview__img {
    transition: none !important;
  }

  .card:hover .arc,
  .arc:hover,
  .card:hover .ph img,
  .zoom:hover img {
    transform: none !important;
  }
}

/* ---------- Hero intro animation ---------- */

/* Background: slow zoom-out */
.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero__media .hero__img {
	transform-origin: center;
	animation: hero-zoom 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__shade {
	animation: hero-fade 1.2s ease both;
}

/* Title: word-by-word rise from a mask */
.hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.1em 0 0.18em;
	margin: -0.1em 0 -0.18em;
}

.hero__word > span {
	display: inline-block;
	transform: translate3d(0, 110%, 0);
	animation: hero-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: calc(0.25s + var(--i, 0) * 90ms);
}

/* Button + herobox */
.hero__actions {
	animation: hero-fade-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s both;
}

.herobox {
	animation: hero-box-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s both;
}

@keyframes hero-zoom {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

@keyframes hero-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes hero-rise {
	to { transform: translate3d(0, 0, 0); }
}

@keyframes hero-fade-up {
	from { opacity: 0; transform: translate3d(0, 30px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes hero-box-in {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__media .hero__img,
	.hero__shade,
	.hero__word > span,
	.hero__actions,
	.herobox {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/*----------------Hero Intro ANimation END ------------------------*/

/* START: "Built to last" section (template: Home "why"), stats numbers (30+, 4, 1).
   Purpose: tabular-nums makes every digit the same width, so the layout does not
   shift or jitter while the numbers count up from 0 (counter.js). */
.stat__value {
    font-variant-numeric: tabular-nums;
}
/* END: "Built to last" section, stats numbers. */

/* START: Home "band" section (full-width photo + statement): image + title animation.
   Template: band.php | Script: assets/js/home.js -> initBand()
   Responsive: scroll-linked zoom on ALL devices, parallax only on desktop with a mouse,
   headline slides up word by word when it scrolls into view.
   IMPORTANT: delete the older "band" CSS block before pasting this one. */

/* Section: positioned and clipped so the zoom/parallax never spills outside the band.
   --band-zoom-start = how zoomed-in the image is when the band first appears (1.15 = 115%).
   --band-word-delay = pause between one word and the next in the headline. */
.band {
	position: relative;
	overflow: hidden;
	--band-zoom-start: 1.15;
	--band-word-delay: 90ms;
}

/* Phones and small tablets: smaller zoom and quicker word stagger, calmer on small screens. */
@media (max-width: 767px) {
	.band {
		--band-zoom-start: 1.1;
		--band-word-delay: 70ms;
	}
}

/* Layer 1: crops the image to the band size. */
.band__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Layer 2: the part that moves for parallax. Same size as the band on phones/tablets
   (no movement); the desktop rule below makes it taller. */
.band__parallax {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Layer 3a: the photo always covers the area on every screen size. */
.band__media .band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Layer 3b: scroll-linked zoom. home.js updates --band-scale (1.15 down to 1) while scrolling.
   Falls back to 1 (no zoom) if JavaScript is not running. */
.band .band__img {
	transform: scale(var(--band-scale, 1));
	transform-origin: center;
	will-change: transform; /* Smoother animation on mobile GPUs. */
}

/* Parallax (desktop only: wide screen + mouse + motion allowed).
   The layer is 20% taller (10% spare above and below) so it can slide without showing
   empty edges. --band-shift is set by home.js while scrolling. */
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.band__parallax {
		top: -10%;
		height: 120%;
		transform: translate3d(0, var(--band-shift, 0px), 0);
		will-change: transform;
	}
}

/* Title: word-by-word "slide up" reveal.
   home.js splits the headline into words:
     <span class="band__word"><span class="band__word-inner">Word</span></span>
   - .band__word       = the mask (clips the word so it appears from a hidden line)
   - .band__word-inner = the part that slides up and fades in
   home.js adds .is-ready when it starts (so the title is never hidden without JavaScript)
   and .is-visible when the headline scrolls into view.
   Padding + negative margin = extra room so tall/low letters (g, y, accents) are not clipped
   by the mask, without changing the line spacing. */
.band__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.1em 0.04em 0.18em;
	margin: -0.1em -0.04em -0.18em;
}

.band__word-inner {
	display: inline-block;
}

/* Hidden start state (only when JavaScript is running). */
.band.is-ready .band__word-inner {
	opacity: 0;
	transform: translate3d(0, 110%, 0);
	transition:
		transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--i, 0) * var(--band-word-delay)),
		opacity 0.7s ease calc(var(--i, 0) * var(--band-word-delay));
}

/* Visible end state: words slide up one after another. */
.band.is-ready.is-visible .band__word-inner {
	opacity: 1;
	transform: none;
}

/* Reduced motion (accessibility): no zoom, title always visible. */
@media (prefers-reduced-motion: reduce) {
	.band .band__img {
		transform: none;
	}

	.band.is-ready .band__word-inner {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* END: Home "band" section image + title animation. */

/* START: Home "founder" section (template: founder.php).
   Purpose: the line under "Bart Baker" draws left to right on mouse hover.
   Responsive: works on phones, tablets and desktop.
   IMPORTANT: delete the older "founder" CSS block before pasting this one. */

/* inline-block makes the box exactly as wide as the name (not the whole column), so the
   hover area and the line match the text and scale with the font size on every screen. */
.founder__name {
	position: relative;
	display: inline-block;
}

/* The line itself. scaleX(0) = hidden. transform-origin: right means that when the mouse
   leaves, the line shrinks toward the right (it "wipes away" in the same left-to-right direction). */
.founder__name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.2em; /* Gap below the name. Increase it if the line touches the text. */
	width: 100%;
	height: 2px; /* Line thickness. */
	background: var(--founder-line-color, currentColor); /* Change the color with --founder-line-color. */
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); /* 0.45s = line speed. */
	pointer-events: none;
}

/* Hover only on devices that really have a mouse (desktop, laptop). Touch screens skip this,
   because on phones "hover" gets stuck after a tap.
   transform-origin: left means the line grows from the left edge to the right. */
@media (hover: hover) {
	.founder__name:hover::after {
		transform: scaleX(1);
		transform-origin: left;
	}
}

/* Touch screens (phones, tablets): the line shows while the name is pressed. */
@media (hover: none) {
	.founder__name:active::after {
		transform: scaleX(1);
		transform-origin: left;
	}
}

/* Reduced motion (accessibility): the line appears with no transition. */
@media (prefers-reduced-motion: reduce) {
	.founder__name::after {
		transition: none;
	}
}
/* END: Home "founder" section animation. */

/* START: Section heading animation (reusable).
   Same effect as the reference site:
     - small label ("Capabilities")  -> slides up      (Elementor "slideInUp", 1s)
     - heading                       -> fades in after 0.5s (Elementor "fadeIn", delay 500ms)
   Script: assets/js/home.js -> initReveal() (no JS change needed; the wrapper just needs
   the class "reveal-trigger", which adds .is-visible when it scrolls into view).

   HTML:
     <div class="sec-head reveal-trigger">
         <p class="sec-head__eyebrow anim-eyebrow">Capabilities</p>
         <h2 class="sec-head__title anim-title">What we build, start to finish.</h2>
     </div>

   The hidden start state is used only when JavaScript is enabled, so visitors without
   JavaScript (and old browsers without "scripting" media support) always see the text. */

/* Note: the label must be a block, flex or inline-block element (not a plain inline
   <span>), otherwise transform has no effect. A <p> or <div> is fine. */

@media (scripting: enabled) {
	/* Start state (hidden). */
	.reveal-trigger .anim-eyebrow {
		opacity: 0;
		transform: translate3d(0, 100%, 0); /* Starts one label-height below its final place. */
		transition:
			transform 1s ease,
			opacity 0.3s ease;
		will-change: transform;
	}

	.reveal-trigger .anim-title {
		opacity: 0;
		transition: opacity 1s ease 0.5s; /* 0.5s delay: label goes first, then the heading. */
	}

	/* End state: home.js adds .is-visible to the wrapper when it scrolls into view. */
	.reveal-trigger.is-visible .anim-eyebrow {
		opacity: 1;
		transform: none;
	}

	.reveal-trigger.is-visible .anim-title {
		opacity: 1;
	}
}

/* OPTIONAL: to match the reference exactly (it has NO animation on tablet and mobile),
   uncomment this block. Leave it commented to animate on all screen sizes.
@media (max-width: 1024px) {
	.reveal-trigger .anim-eyebrow,
	.reveal-trigger .anim-title {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
*/

/* Reduced motion (accessibility): show everything straight away, no movement. */
@media (prefers-reduced-motion: reduce) {
	.reveal-trigger .anim-eyebrow,
	.reveal-trigger .anim-title {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* END: Section heading animation. */