/* ==========================================================================
   FULLSTACK — Homepage
   Loaded only on the front page. Shared components live in components.css;
   this file holds only what is unique to the homepage.
   ========================================================================== */

/* ==========================================================================
   04. PRODUCTS
   ========================================================================== */

.fs-products__header { margin-bottom: var(--fs-section-gap); }

/* A dark card inside a light section: the ground changes, so the semantic
   aliases have to change with it. Without this the section's light values —
   accent ink, muted grey — are painted onto near-black and fail contrast. */
.fs-product {
  display: grid;
  background-color: var(--fs-dark-bg);
  color: var(--fs-text-on-dark);
  overflow: hidden;

  --fs-bg: var(--fs-dark-bg);
  --fs-bg-raised: var(--fs-dark-bg-raised);
  --fs-fg: var(--fs-text-on-dark);
  --fs-fg-body: var(--fs-text-on-dark-3);
  --fs-fg-muted: var(--fs-text-on-dark-muted);
  --fs-fg-faint: var(--fs-text-on-dark-faint);
  --fs-fg-display-2: var(--fs-text-on-dark-muted);
  --fs-border: var(--fs-dark-border);
  --fs-border-strong: var(--fs-dark-border-strong);
  --fs-hairline: var(--fs-dark-hairline);
  --fs-divider: var(--fs-dark-divider);
  --fs-accent-text: var(--fs-accent);
}

.fs-product + .fs-product,
.fs-products__grid { margin-top: var(--fs-grid-gap); }

.fs-product--featured { grid-template-columns: minmax(0, 26.25rem) minmax(0, 1fr); }

.fs-product__body {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
}

.fs-product__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-3);
}

.fs-product__name {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono-lg);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.fs-product__headline {
  margin-top: var(--fs-space-6);
  text-wrap: balance;
  font-size: var(--fs-text-h2-sm);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

.fs-product__headline--lead {
  font-size: var(--fs-text-h2);
  line-height: 1.1;
}

.fs-product__summary {
  margin-top: var(--fs-space-4);
  font-size: var(--fs-text-sm);
  line-height: 1.6;
  color: var(--fs-text-on-dark-3);
}

.fs-product__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-5);
  margin-top: var(--fs-space-6);
}

/* The featured product pushes its action to the foot of the tall column. */
.fs-product--featured .fs-product__actions { margin-top: auto; padding-top: var(--fs-space-8); }

.fs-product__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-bold);
  color: var(--fs-accent);
}

.fs-product__cta:hover .fs-btn__arrow,
.fs-product__cta:focus-visible .fs-btn__arrow { transform: translateX(4px); }

.fs-product__badge {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-text-on-dark-muted);
  border: var(--fs-border-width) solid var(--fs-dark-border-strong);
  padding: 5px 10px;
  transition:
    color var(--fs-duration-fast) var(--fs-ease),
    border-color var(--fs-duration-fast) var(--fs-ease);
}

.fs-product__badge:hover,
.fs-product__badge:focus-visible {
  color: var(--fs-text-on-dark);
  border-color: var(--fs-text-on-dark);
}

.fs-product__visual {
  position: relative;
  overflow: hidden;
  background-color: var(--fs-dark-bg-raised);
  min-height: 18.75rem;
}

.fs-product--featured .fs-product__visual { min-height: 32.5rem; }

@media (max-width: 1023px) {
  .fs-product--featured { grid-template-columns: minmax(0, 1fr); }
  .fs-product--featured .fs-product__visual { min-height: 20rem; }
  .fs-product--featured .fs-product__actions { margin-top: var(--fs-space-6); padding-top: 0; }
}

@media (max-width: 768px) {
  .fs-products__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   06. PRODUCT THINKING
   ========================================================================== */

.fs-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  margin-top: var(--fs-section-gap);
  padding: 0;
  list-style: none;
  border-top: var(--fs-border-emphasis) solid var(--fs-fg);
}

.fs-principle {
  padding: var(--fs-space-6) var(--fs-space-6) var(--fs-space-2) 0;
  border-right: var(--fs-border-width) solid var(--fs-border);
}

.fs-principle:not(:first-child) { padding-left: var(--fs-space-6); }
.fs-principle:last-child { border-right: 0; padding-right: 0; }

.fs-principle__number { color: var(--fs-fg-muted); font-size: var(--fs-text-mono-lg); }

.fs-principle__title {
  margin-top: var(--fs-space-3);
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fs-principle__text {
  margin-top: var(--fs-space-2);
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--fs-fg-body);
}

/* Mobile turns the four columns into numbered rows. */
@media (max-width: 1023px) {
  .fs-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-principle:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fs-principle:nth-child(odd) { padding-left: 0; }
  .fs-principle:nth-child(n + 3) { border-top: var(--fs-border-width) solid var(--fs-border); }
}

@media (max-width: 560px) {
  .fs-principles { grid-template-columns: minmax(0, 1fr); }
  .fs-principle {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: var(--fs-space-3);
    padding: var(--fs-space-5) 0;
    border-right: 0;
    border-top: var(--fs-border-width) solid var(--fs-border);
  }
  .fs-principle:first-child { border-top: 0; }
  .fs-principle__number { grid-row: 1 / span 2; margin-top: 0.25rem; }
  .fs-principle__title { margin-top: 0; }
}

/* ==========================================================================
   07. AGENCY PARTNERS
   ========================================================================== */

.fs-partners { overflow: hidden; }



.fs-partners__title {
  margin-top: var(--fs-space-6);
  text-transform: uppercase;
}

.fs-partners__text { margin-top: var(--fs-space-6); max-width: 41.25rem; }

.fs-partners__grid { margin-top: var(--fs-section-gap); }

.fs-capability {
  min-height: 17.5rem;
  gap: 0;
  background-color: transparent;
}

.fs-capability__title {
  margin-top: var(--fs-space-6);
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fs-capability__text {
  margin-top: var(--fs-space-2);
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--fs-fg-muted);
}

.fs-capability__detail {
  margin-top: auto;
  padding-top: var(--fs-space-5);
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-text-on-dark-2);
}

.fs-partners__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-6);
  margin-top: var(--fs-section-gap);
}

.fs-partners__note { letter-spacing: 0.08em; color: var(--fs-fg-muted); }

@media (max-width: 1023px) {
  .fs-capability { min-height: 0; }
}

@media (max-width: 560px) {
  .fs-partners__footer .fs-btn { width: 100%; }
}

/* ==========================================================================
   08. PRODUCT STUDIO
   ========================================================================== */

.fs-studio__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-8);
  margin-top: var(--fs-section-gap);
}

.fs-studio__note {
  max-width: 41.25rem;
  letter-spacing: 0.06em;
  color: var(--fs-fg-muted);
}
@media (max-width: 560px) {
  .fs-studio__footer .fs-btn { width: 100%; }
}

/* ==========================================================================
   09. SELECTED WORK
   ========================================================================== */

.fs-work__title { margin-top: var(--fs-space-6); text-transform: uppercase; }
.fs-work__grid { margin-top: var(--fs-section-gap); }

.fs-work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--fs-light-bg);
  border: var(--fs-border-width) solid var(--fs-border);
  transition: transform var(--fs-duration) var(--fs-ease);
}

.fs-work-card.fs-card--interactive:hover,
.fs-work-card.fs-card--interactive:focus-within { transform: translateY(-4px); }

.fs-work-card__visual {
  display: grid;
  place-items: center;
  /* Matches the reference's 666 × 300 tile. Declared as a ratio rather than a
     fixed height so the tile keeps its proportion as the column narrows, and
     so the box is reserved before any real image loads — no layout shift. */
  aspect-ratio: 20 / 9;
  background-color: var(--fs-dark-bg);
  overflow: hidden;
}

/* Tonal variation across the row, as in the reference. */
.fs-work-card__visual--tone-2 { background-color: var(--fs-dark-bg-raised); }
.fs-work-card__visual--tone-3 { background-color: var(--fs-dark-grid); }
.fs-work-card__visual--tone-4 { background-color: #0e1114; }

.fs-work-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Silent placeholder until real project imagery is supplied. */
.fs-work-card__mark {
  width: 22%;
  height: auto;
  color: var(--fs-text-on-dark);
  opacity: 0.12;
}

.fs-work-card__body { padding: 1.625rem 1.75rem 1.875rem; }

.fs-work-card__title {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
}

.fs-work-card__kind {
  margin-top: var(--fs-space-2);
  letter-spacing: 0.12em;
  color: var(--fs-fg-muted);
}

.fs-work-card__summary {
  margin-top: var(--fs-space-3);
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--fs-fg-body);
}

.fs-work__more { margin-top: var(--fs-section-gap); }

/* ==========================================================================
   11. WHY FULLSTACK
   ========================================================================== */

.fs-why__title { margin-top: var(--fs-space-6); text-transform: uppercase; }

.fs-reasons {
  margin: var(--fs-section-gap) 0 0;
  padding: 0;
  list-style: none;
}

.fs-reason { padding: clamp(1.5rem, 0.8rem + 2.4vw, 2.5rem); }

.fs-reason__number { color: var(--fs-fg-muted); font-size: var(--fs-text-mono-lg); }

.fs-reason__title {
  margin-top: var(--fs-space-3);
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  text-transform: uppercase;
}

.fs-reason__text {
  margin-top: var(--fs-space-3);
  max-width: 27.5rem;
  font-size: 0.96875rem;
  line-height: 1.65;
  color: var(--fs-fg-body);
}

/* ==========================================================================
   12. STORY
   ========================================================================== */

.fs-story__text > p + p { margin-top: var(--fs-space-4); }

.fs-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: var(--fs-section-gap) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--fs-border-emphasis) solid var(--fs-fg);
}

.fs-timeline__item {
  position: relative;
  padding: var(--fs-space-6) var(--fs-space-6) var(--fs-space-2) 0;
}

.fs-timeline__item:not(:first-child) { padding-left: var(--fs-space-6); }
.fs-timeline__item:last-child { padding-right: 0; }

/* The connecting arrows are decoration between cells, so they are drawn
   rather than marked up. */
.fs-timeline__item + .fs-timeline__item::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  color: #9a9e9a;
}

.fs-timeline__value {
  overflow-wrap: anywhere;
  font-size: var(--fs-text-h2-sm);
  font-weight: var(--fs-weight-black);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.fs-timeline__arrow { color: var(--fs-accent-text); }

.fs-timeline__label {
  margin-top: var(--fs-space-2);
  font-size: 0.84375rem;
  color: var(--fs-fg-muted);
}

.fs-story__more { margin-top: var(--fs-section-gap); }

@media (max-width: 1023px) {
  .fs-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-timeline__item { padding: var(--fs-space-5) var(--fs-space-4) var(--fs-space-4) 0; }
  .fs-timeline__item:nth-child(odd) { padding-left: 0; }
  .fs-timeline__item:nth-child(n + 3) { border-top: var(--fs-border-width) solid var(--fs-border); }
  .fs-timeline__item + .fs-timeline__item::before { display: none; }
}

@media (max-width: 560px) {
  .fs-timeline { grid-template-columns: minmax(0, 1fr); }
  .fs-timeline__item { padding: var(--fs-space-4) 0; border-top: var(--fs-border-width) solid var(--fs-border); }
  .fs-timeline__item:first-child { border-top: 0; }
}

/* ==========================================================================
   13. INSIGHTS
   ========================================================================== */

.fs-insights__title { margin-top: var(--fs-space-6); text-transform: uppercase; }

.fs-insights__list {
  margin-top: var(--fs-section-gap);
  border-top: var(--fs-border-emphasis) solid var(--fs-fg);
}

.fs-insights__more { margin-top: var(--fs-section-gap); }