/* ============================================================
   Tiedrich Global — Section layouts
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   Hero — copy + CTA + glass quote card left, portrait video
   right with two tilted photos behind. Light theme.
   ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 4rem;
  min-height: 88vh;
  padding: 0 0 0 5%;
  background: var(--color-white);
  overflow: hidden;
}

.hero__watermark {
  position: absolute;
  left: 0;
  bottom: 4%;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.hero__watermark span {
  display: block;
  white-space: nowrap;
  padding-left: 3%;
  font-family: var(--font-heading);
  /* Sized so the full company name fits the viewport — at 8.4vw the
     wordmark ran off the right edge and read "Tiedrich Global Strategi". */
  font-size: 7.2vw;
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 0.8;
  color: rgba(23, 48, 97, 0.06);
}

.hero__copy {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  padding: 10.5rem 0 5rem;
  justify-self: end;
  align-self: center;
  animation: tgHeroPower 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tgHeroPower {
  from { opacity: 0; transform: translateY(28px) scale(1.04); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .hero__copy { animation: none; } }

.hero__eyebrow {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-teal);
  margin: 0 0 1.4rem;
}
.hero__title {
  font-size: 3.1rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--color-text);
  margin: 0 0 1.5rem;
}
.hero__title em { font-style: normal; color: var(--color-blue); }
.hero__sub {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 2.5rem;
}

.hero__quote {
  margin-top: 2.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(247,249,252,0.75));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 38, 77, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.hero__quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  line-height: 0.6;
  color: var(--color-teal);
  margin-bottom: 0.5rem;
}
.hero__quote-text {
  font-size: 1.0625rem;
  font-weight: var(--weight-medium);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}
.hero__quote-attr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.hero__quote-attr::before {
  content: "";
  flex-shrink: 0;
  width: 32px; height: 3px;
  border-radius: 2px;
  background: var(--color-teal);
}
.hero__quote-attr p {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.hero__media {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
}
.hero__video-frame {
  position: relative;
  z-index: 1;
  height: min(80vh, 700px);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(0, 38, 77, 0.10);
  box-shadow: 0 30px 80px rgba(0, 38, 77, 0.28);
}
.hero__video-frame video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: 0;
    padding: 0 6vw 4rem;
  }
  .hero__copy { padding: 8rem 0 0; max-width: none; justify-self: stretch; }
  .hero__title { font-size: 2.25rem; }
  .hero__eyebrow { font-size: 0.875rem; white-space: normal; }
  .hero__media { padding: 0; }
  .hero__video-frame { height: auto; width: min(100%, 22rem); }
  .hero__watermark { display: none; }
}
@media (max-width: 575px) {
  .hero__title { font-size: 1.875rem; }
  .hero__copy { padding-top: 6.5rem; }
  .hero .btn-row .btn { flex: 1 1 100%; }
}

/* ────────────────────────────────────────────────────────────
   Featured In press band
   ──────────────────────────────────────────────────────────── */

.press { background: var(--color-white); padding: 2.5rem var(--section-px); }
.press__inner { display: flex; align-items: center; gap: 2.5rem; }
.press__label {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.press .marquee { flex: 1; min-width: 0; }

@media (max-width: 767px) {
  .press__inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .press .marquee { width: 100%; }
  .marquee__track { gap: 2.5rem; }
  .marquee__track img { height: 30px; }
}

/* The five services read as a set, separated rather than run together as prose. */
.services__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.85rem;
  font-size: 1rem;
}
.services__list span { color: var(--color-border); }
@media (max-width: 575px) { .services__list { gap: 0.25rem 0.6rem; font-size: 0.9375rem; } }

/* ────────────────────────────────────────────────────────────
   Services — card grid; each card opens a detail modal
   ──────────────────────────────────────────────────────────── */

/* Six tracks so the trailing pair can sit centred beneath the first three
   at full card width (3-up row = span 2 each). */
.services__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}
.services__grid > .service-card { grid-column: span 2; }
.services__grid > .service-card:nth-child(4) { grid-column: 2 / span 2; }
.services__grid > .service-card:nth-child(5) { grid-column: 4 / span 2; }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-align: left;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0, 38, 97, 0.16); }
/* The band carries the service's own supplied photograph, under a navy-to-teal
   scrim and the hex-mark lattice — so five different photographs still read as
   one set, and the band keeps the colour and pattern of the rest of the page. */
.service-card__crest {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-navy-900);
  border-bottom: 3px solid var(--color-teal);
}
.service-card__crest img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .service-card__crest img { transform: scale(1.05); }
.service-card__crest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(3, 17, 33, 0.42) 0%, rgba(3, 17, 33, 0.06) 55%),
    linear-gradient(118deg, rgba(10, 36, 71, 0.52) 0%, rgba(20, 64, 111, 0.26) 46%, rgba(37, 138, 160, 0.30) 100%);
}
.service-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.375rem 1.5rem; }
/* ────────────────────────────────────────────────────────────
   Service areas — the subheadings sit on the face of the card;
   each one opens its detail in place.
   ──────────────────────────────────────────────────────────── */

.svc-areas { display: flex; flex-direction: column; }

.svc-area { border-top: 1px solid var(--color-border); }
.svc-area:first-child { border-top: 0; }

.svc-area__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-navy);
}
.svc-area__trigger:hover .svc-area__name { color: var(--color-teal); }

.svc-area__name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--color-navy);
  transition: color 0.15s ease;
}
.svc-area__chev {
  flex-shrink: 0;
  width: 12px; height: 12px;
  margin-top: 0.3rem;
  color: var(--color-teal);
  transition: transform 0.3s ease;
}
.svc-area__trigger[aria-expanded="true"] .svc-area__chev { transform: rotate(180deg); }
.svc-area__trigger[aria-expanded="true"] .svc-area__name { color: var(--color-teal); }

.svc-area__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.svc-area__trigger[aria-expanded="true"] + .svc-area__panel { grid-template-rows: 1fr; }
.svc-area__panel > div { overflow: hidden; }

.svc-area__items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.125rem 0 0.875rem;
}
.svc-area__items li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.svc-area__items li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 1.5px;
  background: var(--color-teal);
}

/* Internal review marker for unapproved copy. UNUSED as of 11 Aug — Ed had
   every chip removed ahead of sending the site out. Kept so the marker can be
   dropped back in with one <p class="svc-draft"> if another round needs it. */
.svc-draft {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(192, 117, 105, 0.12);
  color: #8A4B3E;
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 991px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__grid > .service-card,
  .services__grid > .service-card:nth-child(4),
  .services__grid > .service-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 575px) {
  .services__grid { grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────────────────────────
   Brand beat + revolutions timeline
   ──────────────────────────────────────────────────────────── */

.beat__lede {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 52rem;
  margin: 0 auto;
}
.beat__lede strong { color: var(--color-teal); font-weight: var(--weight-semibold); }

.timeline { max-width: 74rem; margin: 4.5rem auto 0; }
.timeline__title {
  max-width: 44rem;
  margin: 0 auto 3.25rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.32;
  color: var(--color-text);
}
.timeline__track { position: relative; }
.timeline__track::before {
  content: "";
  position: absolute;
  top: 7px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, rgba(23,48,97,0.15), rgba(37,138,160,0.7));
  z-index: 0;
}
.timeline__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.timeline__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }
.timeline__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 4px rgba(23, 48, 97, 0.06);
}
.timeline__era {
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* the technologies that belong to each band */
.timeline__techs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 15rem;
}
.timeline__techs li {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--color-text);
}
.timeline__step--current .timeline__dot {
  width: 20px; height: 20px;
  margin-top: -2px;
  background: var(--color-teal);
  box-shadow: 0 0 0 5px rgba(37, 138, 160, 0.22);
}
.timeline__step--current .timeline__era { color: var(--color-teal); }
.timeline__step--current .timeline__techs li { color: var(--color-teal); }

.timeline__note {
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .timeline__steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .timeline__track::before { display: none; }
}

/* On phones the four bands stack, so the connecting rule turns and runs down
   the left of the copy instead of across the top — Lee reported the section
   reading as having no line at all (1 Sept). The dots sit on the rule, the era
   and its technologies sit to the right of it. Shared with the About page. */
@media (max-width: 767px) {
  .timeline { margin-top: 3rem; }
  .timeline__title { margin-bottom: 2.25rem; text-align: left; }
  .timeline__steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .timeline__track::before {
    display: block;
    top: 8px;
    bottom: 8px;
    left: 9px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(23,48,97,0.15), rgba(37,138,160,0.7));
  }
  .timeline__step {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.4rem;
    align-items: start;
    text-align: left;
  }
  .timeline__dot { grid-column: 1; grid-row: 1; justify-self: center; margin-top: 3px; }
  .timeline__era { grid-column: 2; grid-row: 1; }
  .timeline__techs { grid-column: 2; grid-row: 2; max-width: none; }
  .timeline__step--current .timeline__dot { margin-top: 1px; }
  .timeline__note { text-align: left; }
}

/* ────────────────────────────────────────────────────────────
   Problems We Solve — flip-card grid on a fixed photo backdrop
   ──────────────────────────────────────────────────────────── */

/* Ground supplied by .band--dark — no photograph behind this section. */
.problems { position: relative; }
.problems__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0.875rem;
}
.problems__grid > .flip { height: 100%; }
.problems__hint { color: rgba(255, 255, 255, 0.55); }

/* Teal carries this section: a rule across the top of every card, a stronger
   wash behind the copy, and a teal edge on the answer face. Teal only — the
   brand rule forbids pairing it with oxblood. */
.problems .flip__face--front {
  border-top: 3px solid var(--color-teal);
}
.problems .flip__face--front::before {
  background: linear-gradient(120deg, rgba(37,138,160,0.26) 0%, rgba(26,98,168,0.14) 38%, rgba(127,201,216,0.07) 62%, rgba(255,255,255,0) 82%);
  background-size: 240% 240%;
}
.problems .flip__face--back {
  border-top: 3px solid var(--color-teal);
  border-color: rgba(37, 138, 160, 0.45);
  border-top-color: var(--color-teal);
}
.problems .flip__title {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(37, 138, 160, 0.28);
}

@media (max-width: 1100px) { .problems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .problems__grid { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────────────────────────
   How It Works — 01/02/03 with a dashed connector
   ──────────────────────────────────────────────────────────── */

.steps { position: relative; max-width: 76rem; margin: 4rem auto 0; }
.steps::before {
  content: "";
  position: absolute;
  top: 68px; left: 16.66%; right: 16.66%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(37,138,160,0.5) 0 9px, transparent 9px 18px);
  z-index: 0;
}
.steps__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.step { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* The circle carries the numeral and the verb together. */
.step__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 136px; height: 136px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid rgba(37, 138, 160, 0.4);
  box-shadow: 0 14px 36px rgba(23, 48, 97, 0.10);
  color: var(--color-teal);
}
.step__digits {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  line-height: 1;
}
.step__verb {
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.step__label {
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-teal);
  margin: 0 0 0.75rem;
}
.step__text { font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 20rem; }
.steps__note {
  max-width: 44rem;
  margin: 3.5rem auto 0;
  text-align: center;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text);
}

@media (max-width: 991px) {
  .steps::before { display: none; }
  .steps__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ────────────────────────────────────────────────────────────
   Credentials — bio + stat strip left, portrait right,
   faded brand mark washed in behind the copy.
   ──────────────────────────────────────────────────────────── */

.credentials__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5rem;
  align-items: center;
}
.credentials__copy { position: relative; }
.credentials__mark {
  position: absolute;
  top: 50%; left: -2rem;
  transform: translateY(-50%);
  width: 30rem;
  max-width: 120%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}
.credentials__mark.is-visible { opacity: 0.16; }
.credentials__copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Scrim that softens the faded mark behind the copy. Tinted to --color-surface
     (#F7F9FC) so it disappears into the off-white band. */
  background: linear-gradient(180deg, rgba(247,249,252,0.82), rgba(247,249,252,0.72));
  pointer-events: none;
}
.credentials__inner { position: relative; z-index: 1; }
.credentials__bio {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin: 0 0 2rem;
}
.credentials__bio + .credentials__bio { margin-top: -1rem; }

.stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}
.stat {
  flex: 1;
  min-width: 120px;
  padding: 0 1.25rem;
  border-right: 1px solid var(--color-border);
  transition: transform 0.2s ease;
}
.stat:first-child { padding-left: 0; }
.stat:last-child  { border-right: 0; }
.stat:hover { transform: translateY(-3px); }
.stat:hover .stat__value { color: var(--color-teal); }
.stat__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  margin: 0 0 0.375rem;
  transition: color 0.2s ease;
}
.stat__label { font-size: 0.75rem; line-height: 1.4; color: var(--color-text-secondary); }

.credentials__portrait { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.credentials__portrait .portrait-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }

/* The summit photograph runs at its natural aspect ratio — no crop, so every
   person in it stays in frame. */
.credentials__still {
  margin: 0;
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-white);
}
.credentials__still img { display: block; width: 100%; height: auto; }
.credentials__still figcaption {
  padding: 0.75rem 1rem 0.875rem;
  border-top: 3px solid var(--color-teal);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

@media (max-width: 991px) {
  .credentials__grid { grid-template-columns: 1fr; gap: 3rem; }
  .credentials__mark { left: 0; width: 100%; max-width: 100%; }
  .stats { gap: 1.5rem 0; }
  .stat { flex: 1 1 45%; }
  .stat:nth-child(2) { border-right: 0; }
}

/* On phones the portrait leads the section, above the "Meet Lee Tiedrich"
   eyebrow, and the summit photograph stays below the copy where it was
   (Lee, 1 Sept). display:contents lifts the two photographs out of their
   wrapper so they can be ordered independently around the copy. */
@media (max-width: 767px) {
  .credentials__grid { display: flex; flex-direction: column; gap: 2rem; }
  .credentials__portrait { display: contents; }
  .credentials__portrait .portrait-frame { order: 1; }
  .credentials__copy { order: 2; }
  .credentials__still { order: 3; }
}

/* ────────────────────────────────────────────────────────────
   Testimonials — rounded inset band on a blurred backdrop
   ──────────────────────────────────────────────────────────── */

.testimonials {
  position: relative;
  padding: var(--section-py-lg) var(--section-px);
}
.testimonials__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
}
/* the intro lede only — the eyebrow added 24 Aug must keep the sitewide
   .eyebrow size and colour, and this rule outranks it on specificity. */
.testimonials__intro p:not(.eyebrow) { font-size: 1.0625rem; color: var(--color-white); }

@media (max-width: 991px) {
  .testimonials__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ────────────────────────────────────────────────────────────
   Timing (When Leaders Call) + CTA + Insights
   ──────────────────────────────────────────────────────────── */

.timing__cta { display: flex; justify-content: center; margin-top: 4rem; }

.cta { background: var(--color-white); padding: 4.5rem var(--section-px); }
.cta__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-cta);
  background: linear-gradient(120deg, #031121 0%, #0A345F 100%);
  box-shadow: 0 40px 90px rgba(3, 17, 33, 0.32);
}
.cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 85% 20%, rgba(37, 138, 160, 0.28), transparent 70%);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding: 5.5rem 4rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4.5rem;
  align-items: center;
}
.cta__title { font-size: 3rem; letter-spacing: -0.03em; line-height: 1.08; color: var(--color-white); margin: 0 0 1.25rem; }
.cta__text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 2.5rem;
  max-width: 34rem;
}
.cta__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

/* form variant of the closing CTA (About / Services / Resources) */
.cta__inner--form { grid-template-columns: 1fr 1.15fr; }

@media (max-width: 991px) {
  .cta__inner,
  .cta__inner--form { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 2rem; }
  .cta__title { font-size: 2rem; }
  .cta__portrait { order: -1; }
}
@media (max-width: 575px) { .cta { padding-left: 1rem; padding-right: 1rem; } .cta__inner { padding: 2.5rem 1.5rem; } }

.insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.insight { display: flex; flex-direction: column; min-width: 0; }
.insight__media {
  height: 240px;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--color-surface);
}
.insight__media img { width: 100%; height: 100%; object-fit: cover; }
/* placeholder used where no article image has been supplied yet */
.insight__media--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.insight__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; }
.insight__source { font-size: 0.875rem; color: var(--color-text-secondary); }
.insight__title { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 1rem; }
.insight__link {
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-blue);
  text-decoration: none;
}
.insight__link:hover { color: var(--color-teal); text-decoration: underline; }
.insights__all { display: flex; justify-content: center; margin-top: 3.5rem; }

@media (max-width: 991px) { .insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .insights__grid { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────────────────────────
   FAQ layout
   ──────────────────────────────────────────────────────────── */

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 991px) { .faq__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ────────────────────────────────────────────────────────────
   Subpage hero — About / Services / Resources
   ──────────────────────────────────────────────────────────── */

.page-hero {
  position: relative;
  padding: 12rem var(--section-px) var(--section-py-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}
.page-hero__title { font-size: 3.25rem; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 1.25rem; }
.page-hero__text { font-size: 1.125rem; line-height: 1.75; color: var(--color-text-secondary); }
.page-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
}
@media (max-width: 991px) {
  .page-hero { padding-top: 8.5rem; }
  .page-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .page-hero__title { font-size: 2.125rem; }
}

/* generic two-column prose + media block used on subpages */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}
.split__text p + p { margin-top: 1rem; }
@media (max-width: 991px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split__media { order: 0; }
}

/* simple card grids used on subpages */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 991px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.panel {
  position: relative;
  padding: 1.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Same logo lattice as the service crests, faded in from the top right so the
   service blocks carry the brand pattern rather than reading as plain boxes. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url('../assets/img/texture-diamond-teal.svg') right -18px top -26px / 68px 93px repeat,
    linear-gradient(120deg, rgba(216,217,217,0) 40%, rgba(37,138,160,0.13) 100%);
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(120deg, transparent 38%, #000 94%);
  mask-image: linear-gradient(120deg, transparent 38%, #000 94%);
}
.panel > * { position: relative; z-index: 1; }
.panel__title { font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 0.625rem; }
.panel__text  { font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-secondary); }
.panel__list  { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.panel__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.panel__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 2px;
  background: var(--color-teal);
}

/* publication / press list rows */
.pub-list { display: flex; flex-direction: column; }
.pub {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
}
.pub:last-child { border-bottom: 1px solid var(--color-border); }
.pub__title { font-size: 1.0625rem; letter-spacing: -0.01em; margin: 0 0 0.25rem; }
.pub__meta  { font-size: 0.8125rem; color: var(--color-text-secondary); }
.pub__link  { font-size: 0.875rem; font-weight: var(--weight-semibold); white-space: nowrap; text-decoration: none; }
@media (max-width: 767px) {
  .pub { grid-template-columns: 1fr; gap: 0.75rem; }
  .pub__link { justify-self: start; }
}

/* gallery strip used on the About page */
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.photo-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-image); }
@media (max-width: 991px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .photo-grid { grid-template-columns: 1fr; } }

/* The card title is the link to the service page. Lee asked whether the
   separate "Explore ..." line was needed; it repeated the title directly
   beneath itself, so the title carries the link instead. */
.service-card__title a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}
.service-card__title a:hover { color: var(--color-teal-ink); }
.service-card__title a:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 4px; border-radius: 2px; }
.service-card__arrow { color: var(--color-teal); transition: transform 0.25s ease; }
.service-card__title a:hover .service-card__arrow { transform: translateX(3px); }

/* One-line summary on the Services landing cards. Restored 18 Aug when the
   per-service accordions came off that page — Lee asked for a clean landing
   that routes to the service pages rather than repeating them. The line is
   built from her own subheadings for that service. */
.service-card__line {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted, #5A6472);
}

/* The whole card is the link on the Services landing (24 Aug). It used to carry
   `cursor: pointer` from when a click opened a modal, while the only real link
   was the title text — so the card looked clickable and mostly wasn't. */
.service-card { text-decoration: none; color: inherit; }
.service-card:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 3px; }