/* =========================================================
   BSD Strategic Advisors — Scope of Engagements page
   Builds on styles.css (tokens, type, nav, menu, buttons, footer).

    1. Hero + area index
    2. Areas (sticky rail + reading column)
    3. Ways to work together
    4. Phone area switcher
   ========================================================= */

/* =========================================================
   1. HERO
   ========================================================= */
.sp-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(to bottom, #161b21 0%, #22303b 60%, #3d4f5e 100%);
}
.sp-hero__grid { inset: -24px; opacity: 0; transition: opacity 2s ease .4s; }
body.is-ready .sp-hero__grid { opacity: 1; }
/* Brighter copy of the grid, revealed around the cursor (same as the homepage hero) */
.sp-hero__glow {
  -webkit-mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), #000, transparent 80%);
  mask-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), #000, transparent 80%);
}
body.is-ready .sp-hero .sp-hero__glow { opacity: 0; transition: opacity 1.4s ease .15s; }
body.is-ready .sp-hero.is-pointer .sp-hero__glow { opacity: 1; }

.sp-hero__inner {
  position: relative;
  display: grid;
  gap: 56px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 140px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
/* Grid gradient from the design: lines barely there (5%) over the lower left,
   coming up to full strength toward the top right */
.sp-hero__grid:not(.sp-hero__glow) {
  -webkit-mask-image: linear-gradient(16deg, rgba(0, 0, 0, .05) 43%, #000 83%);
  mask-image: linear-gradient(16deg, rgba(0, 0, 0, .05) 43%, #000 83%);
}
.sp-hero__head { display: grid; gap: 28px; }
.sp-hero__title { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem); line-height: 1.1; }
.sp-hero__intro { max-width: 34ch; color: var(--off-white); }

/* Index: six cells sharing hairlines, like a page from the grid behind them */
.sp-index {
  --rule: rgba(255, 255, 255, .16);
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  border-top: 1px solid var(--rule);
  transition: --rule .6s ease;
}
.sp-index li { border-bottom: 1px solid var(--rule); transition: border-color .6s ease; }
.sp-index__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  gap: 8px;
  min-height: 56px;
  padding: 14px 0;
  font-family: var(--f-display);
  font-size: var(--t-list);
  line-height: 1.15;
  transition: background-color .9s var(--ease-smooth), color .9s var(--ease-smooth);
}
.sp-index__num { font-size: 13px; letter-spacing: .04em; color: var(--grey-400); transition: color .9s var(--ease-smooth); }
.sp-index__arrow {
  width: 14px; height: 14px;
  align-self: center;
  transition: transform .7s var(--ease-out), opacity .5s ease;
}
.sp-index__arrow img { width: 100%; height: 100%; filter: invert(1); transform: rotate(90deg); }

@media (hover: hover) {
  .sp-index:hover { --rule: rgba(255, 255, 255, .42); }
  .sp-index:hover .sp-index__item { color: rgba(255, 255, 255, .55); }
  .sp-index .sp-index__item:hover { color: var(--white); background: rgba(255, 255, 255, .025); }
  .sp-index__item:hover .sp-index__num { color: var(--white); }
  .sp-index__item:hover .sp-index__arrow { transform: translateY(4px); }
}

@media (min-width: 900px) {
  .sp-hero { min-height: max(100svh, 760px); max-height: 1100px; display: flex; align-items: flex-end; }
  .sp-hero__inner { width: 100%; gap: clamp(72px, 9svh, 120px); padding-top: 200px; }
  .sp-hero__head { grid-template-columns: 1fr 1fr; align-items: start; gap: 0; }   /* title and intro start on the same line (2026-10-29) */
  .sp-hero__intro { max-width: 538px; margin-top: .45em; }   /* optical: lines its first line up with the top of the title capitals */

  .sp-index {
    grid-template-columns: repeat(3, 1fr);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
  .sp-index li {
    border-top: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    border-bottom: 0;
  }
  .sp-index li:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .sp-index__item {
    grid-template-columns: 1fr auto;
    grid-template-areas: "num arrow" "name name";
    align-content: space-between;
    row-gap: 40px;
    height: 100%;
    min-height: clamp(130px, 9vw, 168px);
    padding: 22px 26px 24px;
  }
  .sp-index__num { grid-area: num; }
  .sp-index__name { grid-area: name; max-width: 14em; }
  .sp-index__arrow { grid-area: arrow; opacity: 0; transform: translate(-6px, -6px); }
  .sp-index__item:hover .sp-index__arrow { opacity: 1; transform: none; }
}

/* =========================================================
   2. AREAS
   The background takes a faint tint from the area being read.
   ========================================================= */
@property --area-tint {
  syntax: "<color>";
  inherits: false;
  initial-value: #f1f0ec;
}
.sp-areas {
  --area-tint: var(--bg);
  background: linear-gradient(to bottom,
    var(--bg) 0,
    var(--area-tint) 60svh,
    var(--area-tint) calc(100% - 40svh),
    var(--bg) 100%);
  transition: --area-tint 1.4s var(--ease-inout);
}
.sp-areas[data-active="1"] { --area-tint: #efe7dc; }  /* warm stone */
.sp-areas[data-active="2"] { --area-tint: #e8ecee; }  /* cool slate */
.sp-areas[data-active="3"] { --area-tint: #e5eaed; }  /* deep slate */
.sp-areas[data-active="4"] { --area-tint: #ecebe8; }  /* neutral grey */
.sp-areas[data-active="5"] { --area-tint: #e6ecea; }  /* sea grey */
.sp-areas[data-active="6"] { --area-tint: #eee8df; }  /* warm sand */

.sp-areas__inner { display: grid; }

/* Each area */
.sp-area {
  display: grid;
  gap: 24px;
  justify-items: start;
  padding-block: clamp(72px, 8vw, 128px);
}
.sp-area + .sp-area { border-top: 1px solid rgba(12, 15, 17, .14); }
.sp-area .h2 { max-width: 14em; }
.sp-area__lead { color: var(--grey-warm); max-width: 32ch; }

.sp-area__card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sp-area__card > img { width: 100%; height: 100%; object-fit: cover; }

/* Items: ruled rows; the hovered row comes forward, the rest step back */
.sp-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid rgba(12, 15, 17, .14);
}
.sp-list li {
  position: relative;
  padding: 16px 0 16px 30px;
  border-top: 1px solid rgba(12, 15, 17, .14);
  font-size: var(--t-body);
  line-height: 1.35;
  transition: color .5s var(--ease-out), padding-left .7s var(--ease-out), opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
/* Once the rows have arrived, hover responds without the entrance delay */
.sp-list.is-settled > li { transition-delay: 0s !important; }
.sp-list li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(16px + .42em);
  width: 9px; height: 9.5px;
  background: var(--ink);
  transform: scale(.45);
  opacity: .35;
  transition: transform .6s var(--ease-out), opacity .5s ease;
}
/* Rows past the first few arrive one after another */
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: .5s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: .6s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: .7s; }
@media (hover: hover) {
  .sp-list:hover li { color: var(--grey-500); }
  .sp-list li:hover { color: var(--ink); padding-left: 38px; }
  .sp-list li:hover::before { transform: rotate(90deg) scale(1); opacity: 1; }
}

/* Rail (desktop only) */
.sp-rail { display: none; }

@media (min-width: 900px) {
  .sp-areas__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 120px);
  }
  .sp-area__card { display: none; }
  .sp-area { padding-block: clamp(110px, 9vw, 150px); }
  .sp-area:last-child { padding-bottom: clamp(140px, 11vw, 190px); }
  .sp-list { margin-top: 36px; }
  .sp-list li { padding-block: 20px; }
  .sp-list li::before { top: calc(20px + .42em); }

  .sp-rail { display: block; }
  .sp-rail__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-content: center;
    gap: 32px;
    padding-block: 110px 48px;
  }
  .sp-rail__img {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4 / 4.2;
    max-height: 44svh;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #2b3945;
  }
  .sp-rail__img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity .9s ease, transform 2s var(--ease-out);
  }
  .sp-areas[data-active="1"] .sp-rail__img img[data-i="1"],
  .sp-areas[data-active="2"] .sp-rail__img img[data-i="2"],
  .sp-areas[data-active="3"] .sp-rail__img img[data-i="3"],
  .sp-areas[data-active="4"] .sp-rail__img img[data-i="4"],
  .sp-areas[data-active="5"] .sp-rail__img img[data-i="5"],
  .sp-areas[data-active="6"] .sp-rail__img img[data-i="6"] { opacity: 1; transform: scale(1); }
  .sp-rail__counter {
    position: absolute;
    z-index: 2;
    left: 22px; bottom: 20px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .7);
  }
  .sp-rail__now { color: var(--white); }

  .sp-rail__list { list-style: none; margin: 0; padding: 0; display: grid; max-width: 440px; }
  .sp-rail__list a {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: baseline;
    padding-block: 6px;
    font-family: var(--f-display);
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.25;
    color: var(--grey-500);
    transition: color .5s var(--ease-out), transform .7s var(--ease-out);
  }
  .sp-rail__list a span { font-size: 12px; letter-spacing: .04em; }
  .sp-rail__list a:hover { color: var(--ink); transform: translateX(4px); }
  .sp-rail__list a.is-active { color: var(--ink); font-weight: 600; }

  .sp-rail__progress { max-width: 440px; height: 1px; background: rgba(12, 15, 17, .14); overflow: hidden; }
  .sp-rail__progress span {
    display: block; height: 100%;
    background: var(--ink);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
  }
}

/* 3. Ways to work together: shared with the stage pages, now in styles.css */

/* =========================================================
   4. PHONE AREA SWITCHER
   ========================================================= */
.sp-switch { display: none; }
@media (max-width: 899px) {
  .sp-switch {
    display: block;
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(14px + var(--safe-b));
    z-index: 41;
    transform: translateY(calc(100% + 30px));
    transition: transform .7s var(--ease-out);
  }
  .sp-switch.is-visible { transform: none; }
  body.switch-visible .dock { transform: translateY(calc(100% + 30px)); }

  .sp-switch__bar {
    display: grid;
    grid-template-columns: 30px 1fr 14px;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    background: rgba(12, 15, 17, .82);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    color: var(--white);
    text-align: left;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
    -webkit-tap-highlight-color: transparent;
  }
  .sp-switch__num { font-family: var(--f-display); font-size: 12px; letter-spacing: .06em; color: var(--grey-400); }
  .sp-switch__name { font-family: var(--f-display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-switch__chev {
    width: 8px; height: 8px;
    border-left: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: translateY(2px) rotate(45deg);
    transition: transform .5s var(--ease-out);
  }
  .sp-switch.is-open .sp-switch__chev { transform: translateY(-2px) rotate(225deg); }

  .sp-switch__sheet {
    list-style: none;
    margin: 0 0 8px;
    padding: 10px 8px;
    border-radius: 24px;
    background: rgba(12, 15, 17, .9);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.98);
    transform-origin: bottom center;
    transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s linear .5s;
  }
  .sp-switch.is-open .sp-switch__sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s; }
  .sp-switch__sheet a {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: baseline;
    gap: 6px;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 14px;
    font-family: var(--f-display);
    font-size: 16px;
    color: rgba(255, 255, 255, .7);
  }
  .sp-switch__sheet a span { font-size: 12px; color: var(--grey-400); }
  .sp-switch__sheet a.is-active { color: var(--white); background: rgba(255, 255, 255, .08); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sp-rail__img img { transform: none !important; }
}