/*
 * =========================================================
 * OLYTIC SOLUTIONS - Buildline Service Page Styles
 * buildline.css  /  Route: /buildline
 *
 * Standalone, one-pager style landing page for Buildline, a
 * proprietary business system build engagement, built on the
 * same global primitives as every other page (.section,
 * .container, .callout, .btn, .label) but with a distinct
 * visual identity: a big product mark/wordmark ("Buildline")
 * lockup and a code-bracket brand mark.
 *
 * Components:
 *   - Buildline mark (inline SVG, duplicated per usage with
 *     hardcoded colors, no shared <symbol>/<use>)
 *   - Hero (dark, big logo lockup, teal-led petal composition)
 *   - Overview (problem summary, outcomes list beside a
 *     prose-stat card)
 *   - How We Work (open-shape card timeline, four steps, then
 *     a single closing sentence; its old "What You Get"
 *     three-card block was removed 2026-08-28, redundant with
 *     Overview's outcomes list)
 *   - Foundation (dark, continuous with How We Work above it,
 *     marked by a short gold divider rule; right-justified
 *     infrastructure value prop + three tier cards, each with
 *     its own gold line icon, added 2026-08-28)
 *   - FIT (who this is for, single column, full-bleed photo
 *     backdrop fading in from the right)
 *   - CTA band
 *   - Teal seam between hero and overview only
 *
 * CSS load order (must follow):
 *   tokens → typography → buttons → nav → footer → layout → buildline
 * =========================================================
 */

/* ─────────────────────────────────────────────────────── */
/* SEAM - angled color transition between bands             */
/* ─────────────────────────────────────────────────────── */

.bl-seam-top {
  position: relative;
}

.bl-seam-top::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 60px;
  border-bottom: 4px solid var(--color-teal);
  transform-origin: 0 0;
  transform: skewY(-1.25deg);
  z-index: 1;
}

.bl-seam-top--white::before  { background-color: #FFFFFF; }

@media (max-width: 640px) {
  .bl-seam-top::before {
    top: -24px;
    height: 36px;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 1: HERO                                          */
/* ─────────────────────────────────────────────────────── */

.bl-hero {
  background-color: var(--color-obsidian);
  color: #FFFFFF;
  padding-top: var(--space-12);
  padding-bottom: var(--space-24);
  position: relative;
}

.bl-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--space-16);
}

.bl-hero__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.bl-hero__wordmark {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
}

.bl-hero__wordmark em {
  font-style: normal;
  color: var(--color-gold);
}

.bl-hero__headline {
  font-size: clamp(2.5rem, 5.2vw, 4.1rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  max-width: 720px;
}

.bl-hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.76);
  line-height: var(--leading-body);
  max-width: 560px;
  margin-bottom: var(--space-8);
}

.bl-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

/* Locked shape composition, mirror of the home hero grammar and
   teal-led to match the services family. Same circle radii (152/80),
   flat brand colors, 8pt grid, every shape anchored to a photo edge.
   Signature: two teal discs of different sizes hugging the photo's
   squared corner from its adjacent edges (one along the bottom edge
   line, one along the left edge line), echoing the mark's own paired
   code brackets, instead of the other services' single-line steps. */
.bl-hero__composition {
  position: relative;
  width: 448px;
  height: 448px;
}

.bl-hero__shape {
  position: absolute;
}

/* Gold disc tucked behind the photo's shoulder, in place of the shared
   quarter-disc: the Buildline family variation, reading as a plain
   module/block rather than a pie-slice or dome, paired with a second
   teal disc lower in the frame (built from the same modular unit). */
.bl-hero__shape--gold {
  top: 15px;
  left: -35px;
  width: 150px;
  height: 150px;
  background-color: var(--color-gold);
  border-radius: 50%;
}

/* Teal disc, the second module, sitting free in the bottom band. */
.bl-hero__shape--teal {
  bottom: -10px;
  left: 190px;
  width: 130px;
  height: 130px;
  background-color: var(--color-teal);
  border-radius: 50%;
}

/* Buildline signature: a disc hanging off the photo's bottom edge
   line, just left of the squared corner. */
.bl-hero__shape--bracket-a {
  right: 332px;
  top: 332px;
  width: 56px;
  height: 56px;
  background-color: var(--color-teal);
  border-radius: 50%;
}

/* ...paired with a smaller disc on the photo's left edge line,
   just above the same corner, so the two discs flank it from its
   adjacent edges like the mark's own two brackets. */
.bl-hero__shape--bracket-b {
  right: 284px;
  top: 284px;
  width: 40px;
  height: 40px;
  background-color: var(--color-teal);
  border-radius: 50%;
}

/* Thin brand ring peeking from behind the photo's top-right curve. */
.bl-hero__shape--ring {
  right: -8px;
  top: 0;
  width: 96px;
  height: 96px;
  border: 2px solid var(--color-teal);
  border-radius: 50%;
  opacity: 0.8;
}

/* Photo petal: three corners on the ring radius, one squared. */
.bl-hero__photo-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 304px;
  height: 360px;
  border-radius: 152px 152px 152px 24px;
  overflow: hidden;
  background-color: var(--color-obsidian);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.bl-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Narrow desktops: scale the whole composition, never reflow it. */
@media (max-width: 1160px) {
  .bl-hero__composition {
    transform: scale(0.82);
    transform-origin: center;
  }
}

@media (max-width: 900px) {
  .bl-hero__inner {
    grid-template-columns: 1fr;
  }

  .bl-hero__visual {
    display: none;
  }
}

@media (max-width: 640px) {
  .bl-hero__sub {
    font-size: var(--text-base);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 2: OVERVIEW (problem summary + outcomes + stats)  */
/* ─────────────────────────────────────────────────────── */

.bl-overview {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  position: relative;
}

.bl-overview__headline {
  text-align: right;
  margin-bottom: var(--space-8);
}

.bl-overview__headline::after {
  left: auto;
  right: 0;
}

.bl-overview__row {
  align-items: center;
}

.bl-overview__intro {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.bl-overview__intro p {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
}

.bl-overview__tee {
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
}

/* ── Outcomes list ── */

.bl-outcomes {
  max-width: 640px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bl-outcomes li {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  line-height: var(--leading-body);
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: 0;
}

.bl-outcomes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 2px;
  background-color: var(--color-gold);
}

/* ── Statistic card: a short unified narrative citing two figures. */
.bl-stats {
  background-color: var(--color-surface);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  max-width: 320px;
  justify-self: start;
}

.bl-stats__narrative {
  font-size: var(--text-base);
  color: rgba(26, 26, 26, 0.76);
  line-height: var(--leading-body);
  margin-bottom: var(--space-5);
}

.bl-stats__narrative:last-child {
  margin-bottom: 0;
}

.bl-stats__narrative strong {
  color: var(--color-obsidian);
  font-weight: var(--weight-bold);
}

.bl-stats__cite {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  color: rgba(26, 26, 26, 0.55);
  margin-left: 1px;
}

@media (max-width: 768px) {
  .bl-stats {
    max-width: none;
    padding: var(--space-6);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 3: HOW WE WORK                                    */
/* (vertical spine + node timeline on mobile, horizontal      */
/*  timeline from 1200px up)                                 */
/* ─────────────────────────────────────────────────────── */

.bl-how {
  position: relative;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.bl-how__intro {
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.bl-how__intro .section-title {
  margin-bottom: var(--space-4);
}

.bl-how__intro p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
  margin: 0;
}

/* Vertical spine connecting each node, centered on the node column */
.bl-steps {
  max-width: 640px;
  position: relative;
}

.bl-steps::before {
  content: '';
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  background-color: rgba(200, 169, 110, 0.3);
}

.bl-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--space-6);
  align-items: start;
  padding: var(--space-5) 0;
  position: relative;
}

.bl-step:first-of-type {
  padding-top: 0;
}

.bl-step__node-col {
  display: flex;
  justify-content: center;
}

.bl-step__icon {
  width: 26px;
  height: 26px;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

/* .bl-card__outline is the decorative open-shape background used
   only in the desktop card layout below; hidden here so it doesn't
   render as an unstyled, unsized box in the plain mobile list. */
.bl-card__outline {
  display: none;
}

.bl-step__node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-obsidian);
  border: 1.5px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-gold);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.bl-step__content h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  margin-bottom: var(--space-1);
}

.bl-step__content p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .bl-step {
    grid-template-columns: 40px 1fr;
    column-gap: var(--space-4);
  }

  .bl-steps::before {
    left: 19px;
  }

  .bl-step__node {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }
}

/* ── Open-shape card timeline (desktop): four identical gold-outlined */
/* cards, all at the same height (no stagger). Each is an open shape  */
/* (border-top + border-right only, no fill, no shadow, no tail) with */
/* an outlined icon circle straddling its top edge and its own title  */
/* and copy inside.                                                   */
@media (min-width: 1200px) {
  .bl-steps {
    max-width: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0 24px;
  }

  .bl-steps::before {
    display: none;
  }

  .bl-step {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 270px;
    padding: 0;
    text-align: center;
  }

  .bl-step:not(:first-of-type) {
    margin-left: 15px;
  }

  .bl-step__node-col {
    display: none;
  }

  .bl-card {
    position: relative;
    display: block;
    width: 270px;
    height: 195px;
    margin: 0 auto;
    color: var(--color-gold);
  }

  .bl-card__outline {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 270px;
    height: 195px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-bottom: none;
    border-left: none;
    border-radius: 0 97.5px 97.5px 0;
  }

  /* Circle straddles the card's top edge: half floats above it.
     Background matches the section's own dark bg so it reads as a
     cutout sitting on the outline, not a light patch floating on it. */
  .bl-card__icon {
    position: absolute;
    top: -24px;
    left: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    background-color: var(--color-obsidian);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
  }

  .bl-card__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
  }

  .bl-card__body {
    position: relative;
    text-align: left;
    max-width: 172px;
    padding: 26px 0 0 22px;
  }

  .bl-step__content .bl-card__title {
    font-size: 16px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 var(--space-2);
  }

  .bl-step__content .bl-card__text {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.4;
    margin: 0;
  }
}

/* One-sentence close, replacing the old "What You Get" three-card
   block: a plain statement, not another heading or card. */
.bl-how__close {
  max-width: 640px;
  margin: var(--space-10) 0 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: #FFFFFF;
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 4: FOUNDATION (infrastructure + tiers)            */
/* Dark band, continuous with the How We Work timeline above */
/* it (no visual seam, same obsidian bg), so the two read as  */
/* one section. Intro copy is right-justified to distinguish  */
/* it from How We Work's left-aligned copy above. Tier cards  */
/* use the page's own "three rounded, one squared" card shape */
/* (matching .bl-get's old shape) plus a gold line icon per   */
/* tier, not a generic bordered-box pricing table.            */
/* ─────────────────────────────────────────────────────── */

.bl-foundation {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Short gold rule marking the boundary with How We Work above,
   since the two sections otherwise share one continuous dark bg
   with no seam. Centered, independent of the intro's right-justified
   alignment below it. */
.bl-foundation__divider {
  display: block;
  width: 64px;
  height: 2px;
  background-color: var(--color-gold);
  margin: 0 auto var(--space-10);
}

.bl-foundation__intro {
  max-width: 880px;
  margin: 0 0 var(--space-10) auto;
  text-align: right;
}

.bl-foundation__intro .section-title {
  margin-bottom: var(--space-4);
}

.bl-foundation__intro .section-title::after {
  left: auto;
  right: 0;
}

.bl-foundation__intro p {
  max-width: none;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
}

.bl-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

/* Same "three rounded corners, one squared" shape as the golden
   template's deliverable cards (.bl-get, retired 2026-08-28, and
   FieldCraft's .fr-get), just on a dark tint instead of solid teal. */
.bl-tier {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 24px 24px 0 24px;
  padding: var(--space-8);
}

.bl-tier__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bl-tier__icon {
  width: 28px;
  height: 28px;
  color: var(--color-gold);
  flex-shrink: 0;
}

.bl-tier__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  margin: 0;
}

.bl-tier__desc {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-3);
}

.bl-tier__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bl-tier__list li {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-normal);
  padding-left: var(--space-5);
  position: relative;
}

/* Gold dash marker, matching .bl-outcomes elsewhere on this page,
   instead of a generic round bullet. */
.bl-tier__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 2px;
  background-color: var(--color-gold);
}

@media (max-width: 860px) {
  .bl-tiers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .bl-foundation__intro {
    text-align: left;
    margin-left: 0;
  }

  .bl-foundation__intro .section-title::after {
    left: 0;
    right: auto;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 5: FIT (full-bleed photo backdrop, FieldCraft-   */
/* style: photo bleeds in from the right, mask-fades into   */
/* the section's own surface color, text column sits on it) */
/* ─────────────────────────────────────────────────────── */

.bl-case {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.bl-case .container {
  position: relative;
  z-index: 1;
}

.bl-case__main {
  max-width: 54%;
}

.bl-case__head {
  max-width: 760px;
  margin-bottom: var(--space-6);
}

.bl-case__headline {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0;
}

.bl-case__story {
  max-width: 760px;
}

.bl-case__problem {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-5);
}

.bl-case__solutions-intro {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-obsidian);
  margin: 0 0 var(--space-3);
}

.bl-case__solutions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bl-case__solutions li {
  font-size: var(--text-md);
  color: var(--color-body-steel);
  line-height: var(--leading-normal);
  padding-left: var(--space-6);
  position: relative;
  margin: 0;
}

.bl-case__solutions li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: var(--weight-bold);
}

.bl-case__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  margin: 0;
  z-index: 0;
}

.bl-case__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to left, #000 42%, transparent 100%);
  mask-image: linear-gradient(to left, #000 42%, transparent 100%);
}

@media (max-width: 860px) {
  .bl-case {
    overflow: visible;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .bl-case__main {
    max-width: none;
  }

  .bl-case__photo {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: var(--space-8);
  }

  .bl-case__photo img {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 12px;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 6: CTA                                           */
/* ─────────────────────────────────────────────────────── */

.bl-cta {
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
  position: relative;
}

.bl-cta__mark {
  display: block;
  margin-bottom: var(--space-5);
}

.bl-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
}

.bl-cta__inner h2 {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.bl-cta__inner p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--leading-body);
  max-width: 52ch;
  margin-bottom: 0;
}

.bl-cta__inner .bl-cta__refs {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.4);
  max-width: none;
}

.bl-cta__refs sup {
  margin-right: 2px;
}

.bl-cta__inner .btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .bl-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .bl-cta__inner .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ── Mobile lockup: smaller mark + wordmark so long names breathe ── */

@media (max-width: 560px) {
  .bl-hero__lockup svg {
    width: 52px;
    height: 52px;
  }

  .bl-hero__lockup {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .bl-hero__wordmark {
    font-size: 1.4rem;
  }
}