/* Lattouf Co. — site-wide additions layered on lattouf-custom.css:
   hero flow fix, the "what we do" row, and the cart control in the navbar. */

/* ------------------------------------------------------------ hero layout */
/* On narrow screens the stock theme parks the sub-headline outside the hero
   (position:absolute; top:100%). Put it back into normal flow. */
@media screen and (max-width: 767px) {
  .header.is-home {
    margin-bottom: 0;
  }

  .text-size-medium.is-hero {
    position: static;
    display: block;
    height: auto;
    margin-top: 20px;
    margin-bottom: 48px;
    padding-right: 6vw;
  }

  .heading-xlarge.is-home {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .heading-xlarge.is-home {
    margin-bottom: 28px;
  }

  .text-size-medium.is-hero {
    max-width: 46ch;
  }
}

/* --------------------------------------------------------- what we do row */
.lc-capability_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: #ffffff2e;
  border: 1px solid #ffffff2e;
}

.lc-capability {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--color--accent, #2a2a86);
  transition: background-color 300ms ease;
}

.lc-capability:hover {
  background: #222270;
}

.lc-capability_no {
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #ffffffa6;
}

.lc-capability_name {
  margin: 0;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color--neutral-light, #fff);
}

.lc-capability_text {
  margin: 0;
  font-family: var(--font--primary), sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffd6;
}

/* ------------------------------------------------------------ footer note */
.footer_tagline {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
}

/* ------------------------------------------------------------ cart in nav */
.nav_cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  margin-left: 16px;
  padding: 8px 16px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color--accent, #2a2a86);
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 200ms ease, color 200ms ease;
}

/* mirrors the logo: light type once the nav sits over an accent section */
.nav_cart.is-negative {
  color: var(--color--neutral-light, #fff);
}

.nav_cart:hover,
.nav_cart:focus-visible {
  background: var(--color--accent, #2a2a86);
  color: var(--color--neutral-light, #fff);
  outline: none;
}

.nav_cart.is-negative:hover,
.nav_cart.is-negative:focus-visible {
  background: var(--color--neutral-light, #fff);
  color: var(--color--accent, #2a2a86);
}

.nav_cart_badge {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  background: #e0562f;
  border-radius: 999px;
}

@media (max-width: 767px) {
  .nav_cart {
    margin-left: 10px;
    padding: 7px 12px;
    font-size: 11px;
  }
}

/* ------------------------------------------------------- about: what we do */
.lc-about_cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--color--neutral, #c1c4c7);
  border: 1px solid var(--color--neutral, #c1c4c7);
}

.lc-about_col {
  padding: clamp(24px, 3vw, 40px);
  background: var(--color--neutral-light, #fff);
}

.lc-about_title {
  margin: 0 0 18px;
  font-family: var(--font--tertiary), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color--accent, #2a2a86);
}

.lc-about_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-about_list li {
  padding: 11px 0;
  font-family: var(--font--secondary), sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--color--text-primary, #000);
  border-bottom: 1px solid var(--color--neutral, #c1c4c7);
}

.lc-about_list li:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------- about: readability
   The theme sets the offset copy in viewport units (.phrase 3vw, .paragraph
   30vw wide at 35vw indent). That holds around 1440px but the line length runs
   away on wide monitors and the type outgrows its column. Cap the measure and
   the display size without touching the editorial left-offset composition. */
.phrase {
  max-width: 22ch;
  font-size: clamp(24px, 3vw, 46px);
}

.paragraph {
  max-width: 62ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
}

/* the timeline carries eight milestones rather than the sixteen the theme was
   built around, so each description has room to breathe */
.flusso_item-description .tab-01_container {
  max-width: 46ch;
}

.flusso_item-description .text-size-small {
  margin-bottom: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color--text-body, #5e666f);
}