/* ourfirm.css - History of IPLG page */

body {
  background-color: #ffffff;
  color: #3a3a3a;
}

.ourfirm2-main {
  background-color: #ffffff;
  color: #3a3a3a;
}

/* ============ DRAFT NOTICE ============ */
.ourfirm-notice {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ourfirm-notice-inner {
  background: #fff8e1;
  border: 2px dashed #ffca28;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(255, 202, 40, 0.15);
}

.ourfirm-notice-badge {
  display: inline-block;
  background: #b86e00;
  color: #fff8e1;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

.ourfirm-notice p {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  color: #5a3a00;
  margin: 0;
  line-height: 1.5;
}

/* ============ ARTICLE ============ */
/* The page-title band already provides the top spacing, so the article sits
   close beneath it. */
.ourfirm2-main .iplg-page-title-band {
  padding-bottom: 1.5rem;
}
.ourfirm-article {
  max-width: 1320px;
  margin: 0.5rem auto 9rem;
  padding: 0 1.5rem;
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: #3a3a3a;
}

.ourfirm-section {
  margin-bottom: 3rem;
  /* flow-root contains the floated figure (clearfix) WITHOUT making the section
     a scroll container, so the reveal animation's transient translateY overflow
     never spawns a per-section scrollbar (overflow:auto did). */
  display: flow-root;
}

.ourfirm-section h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  line-height: 1.15;
  color: #0b336e;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.015em;
  margin: 0 0 1.75rem;
  text-align: center;
}

/* Era subsection headers. Left-aligned and sitting at the TOP of the era's text
   column so the photo (align-items:start in .ourfirm-era) lines its top edge up
   with the header. margin-top is 0 because the space ABOVE each header comes from
   the .ourfirm-era row's margin-top (which moves the photo down with it, keeping
   the two tops aligned). */
.ourfirm-section h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 500;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  color: #0b336e;
  text-align: center;
  margin: 0 0 3.5rem;
}

.ourfirm-section p {
  margin: 0 0 1rem;
  text-align: left;
}

/* Lead line directly under a section's h2 (a subtitle for the section). */
/* Subheader (lead) centered under its centered section heading; typography from
   the shared .iplg-section-sub component (added in the markup). */
.ourfirm-section p.ourfirm-section-lead {
  text-align: center;
  max-width: 680px;
  margin: -0.25rem auto 0.5rem;
}

/* Half-width centered divider between History and IPLG Today. */
.ourfirm-divider {
  border: 0;
  height: 1px;
  width: 50%;
  background: rgba(11, 51, 110, 0.18);
  margin: 3rem auto 1.5rem;
}

.ourfirm-section p:last-child { margin-bottom: 0; }

.ourfirm-section em {
  color: #5a5a5a;
}

.ourfirm-section strong {
  color: #0b336e;
}

/* ============ ERA ROWS (text column + photo column) ============ */
/* Each era is a two-column grid: the text column (left-aligned header above its
   paragraph) and the photo column. align-items:start pins both columns to the
   same top line, so the photo's TOP edge lines up with the header, not the body
   text. margin-top is the "space above the header" - because it shifts the whole
   row (header AND photo) down together, the two tops stay aligned. */
.ourfirm-era {
  display: grid;
  grid-template-columns: 1fr 38%;
  column-gap: 2.5rem;
  /* Top-align the second row so the paragraph's top lines up with the photo's
     top edge. */
  align-items: start;
  margin-top: 3.25rem;
  /* Same inset on every row (white and gray) so the columns line up down the
     page; the shaded rows just paint a background over this same box. */
  padding: 2rem;
}
.ourfirm-era:first-of-type {
  margin-top: 1.5rem;
}
/* Header spans the full width on the top row, above BOTH the paragraph and the
   photo; the paragraph + photo share the second row. */
.ourfirm-era__head {
  grid-column: 1 / -1;
  grid-row: 1;
}
/* Photo on the RIGHT (default): text in column 1, figure in column 2. */
.ourfirm-era__text {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.ourfirm-era .ourfirm-fig {
  grid-column: 2;
  grid-row: 2;
}
/* Photo on the LEFT: swap the columns and which side each item occupies. */
.ourfirm-era--imgleft {
  grid-template-columns: 38% 1fr;
}
.ourfirm-era--imgleft .ourfirm-era__text {
  grid-column: 2;
  grid-row: 2;
}
.ourfirm-era--imgleft .ourfirm-fig {
  grid-column: 1;
  grid-row: 2;
}

/* Justify the body paragraphs so each line stretches to fill the column width. */
.ourfirm-era__text p {
  text-align: justify;
}
.ourfirm-era__text p:last-child {
  margin-bottom: 0;
}

/* Alternating rows sit in a contained gray panel (not full-bleed) for visual
   rhythm down the page; the un-shaded rows stay on the white article ground. */
.ourfirm-era--shaded {
  background: var(--iplg-bg-gray);
  border-radius: 8px;
}

.ourfirm-fig {
  margin: 0;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(11, 51, 110, 0.1);
  overflow: hidden;
}

.ourfirm-fig img {
  display: block;
  width: 100%;
  /* Match the firm team photo's 3:2 proportions so every figure renders at the
     same height (the team shot is 1200x800). cover crops the off-ratio shots,
     anchored to the TOP so the tops of buildings stay in frame. */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center top;
}
/* "Looking ahead" gets a slightly taller frame than the 3:2 default to better
   fill the longer text beside it; center-anchored so the shot stays balanced. */
.ourfirm-fig--tall img {
  aspect-ratio: 4 / 3;
  object-position: center;
}

/* ============ LISTS ============ */
.ourfirm-list {
  margin: 0.5rem 0 1rem;
  padding-left: 1.5rem;
}

.ourfirm-list li {
  margin-bottom: 0.35rem;
}

.ourfirm-list strong { color: #0b336e; }

/* ============ TIMELINE ============ */
.ourfirm-timeline-section {
  clear: both;
  background: #fff;
  border-radius: 6px;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 2px 12px rgba(11, 51, 110, 0.08);
  margin-top: 3.5rem;
}

.ourfirm-timeline-section h2 {
  margin-bottom: 1.5rem;
}

.ourfirm-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  padding-left: 2.5rem;
}

/* continuous rail the year-dots sit on */
.ourfirm-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  background: linear-gradient(rgba(182, 152, 84, 0.55), rgba(11, 51, 110, 0.18));
}

.ourfirm-timeline li {
  display: block;
  position: relative;
  padding: 0 0 1.6rem;
}

.ourfirm-timeline li:last-child { padding-bottom: 0; }

/* gold node on the rail */
.ourfirm-timeline li::before {
  content: "";
  position: absolute;
  left: calc(-2.5rem + 1px);
  top: 0.3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #b69854;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(11, 51, 110, 0.18);
}

.ourfirm-year {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #b69854;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.ourfirm-event {
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3a3a3a;
}

.ourfirm-event em { color: #5a5a5a; }

/* ============ SOURCES ============ */
.ourfirm-sources {
  clear: both;
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(11, 51, 110, 0.04);
  border-left: 3px solid #0b336e;
  border-radius: 0 4px 4px 0;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #5a5a5a;
}

.ourfirm-sources p { margin: 0; }

.ourfirm-sources strong { color: #0b336e; }

/* ============ RESPONSIVE ============ */
@media (max-width: 767px) {
  .ourfirm-article {
    margin: 3.5rem auto 5rem;
    font-size: 16px;
    line-height: 1.7;
  }

  .ourfirm-section h2 { font-size: 28px; }

  /* Less space under the section headers on mobile than the desktop 3.5rem,
     with a little more above them. */
  .ourfirm-section h3 { margin: 0.75rem 0 1.75rem; }

  /* Stack each era into a single column on phones: header, then paragraph, then
     photo - regardless of the desktop imgleft/imgright side. */
  .ourfirm-era,
  .ourfirm-era--imgleft {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
    margin-top: 2.25rem;
    /* White rows carry no inset on mobile; shaded rows re-add it below as a
       full-bleed band. */
    padding: 0;
  }
  .ourfirm-era__head {
    grid-column: 1;
    grid-row: 1;
  }
  .ourfirm-era__text,
  .ourfirm-era--imgleft .ourfirm-era__text {
    grid-column: 1;
    grid-row: 2;
  }
  .ourfirm-era .ourfirm-fig,
  .ourfirm-era--imgleft .ourfirm-fig {
    grid-column: 1;
    grid-row: 3;
  }
  /* Full-bleed on mobile: break out of the article's 1.5rem side padding so
     the gray band spans edge to edge, then re-inset the content. */
  .ourfirm-era--shaded {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 1.5rem;
    border-radius: 0;
  }

  .ourfirm-section p { text-align: left; }

  .ourfirm-timeline-section { padding: 1.5rem 1.25rem 1rem; }
  .ourfirm-timeline li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.75rem 0;
  }
}