/*
 * =========================================================
 * OLYTIC SOLUTIONS - Buildline Service Page Styles
 * buildline.css  /  Route: /buildline
 *
 * Standalone, one-pager style landing page for Buildline
 * (Custom Web Application Build), 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
 *     "What You Get" as three teal cards below a gold dashed
 *     divider, the FieldCraft golden-template pattern)
 *   - 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;
  }
}


/* ─────────────────────────────────────────────────────── */
/* WHAT YOU GET (lives inside SECTION 3, HOW WE WORK):      */
/* a centered lead-in below a gold dashed divider, then      */
/* three deliverables in teal cards (three rounded corners,  */
/* one squared/angled). Mirrors FieldCraft's .fr-gets grid   */
/* so both golden-template pages share the pattern.          */
/* ─────────────────────────────────────────────────────── */

.bl-gets {
  margin-top: var(--space-12);
}

.bl-gets__intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-8);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.bl-gets__intro::before {
  content: '';
  display: block;
  width: 48px;
  margin: 0 auto var(--space-6);
  border-top: 2px dashed var(--color-gold);
}

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

.bl-get {
  background-color: var(--color-teal);
  border-radius: 24px 24px 0 24px;
  padding: var(--space-8);
}

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

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

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


/* ─────────────────────────────────────────────────────── */
/* SECTION 4: 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 5: 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;
  }
}