/* Services, Our network, About us and Contact.
 *
 * These sit between the home page and the legal pages: they carry the full site
 * header and footer, but open with a lede rather than a full-height hero, so a
 * reader who clicked a nav item lands on the answer instead of on another
 * splash. Everything here reuses the type scale and colours already in
 * styles.css; only the layout is new. */

.page-lede {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vh, 60px) 4.2vw clamp(24px, 3.5vh, 40px);
}

.page-lede-copy {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.page-lede h1 {
  font: clamp(38px, 4.4vw, 68px) / 0.95 var(--display);
  letter-spacing: -0.068em;
  margin: 0;
  font-weight: 500;
}

.page-lede h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.1em;
  color: var(--red);
}

.page-sub {
  width: 520px;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.75;
  color: #575757;
  margin: 20px 0 0;
}

/* --- A block of the page ---------------------------------------------------- */

.page-block { position: relative; }

/* These pages are read, not scrolled through. The shared .section-pad opens at
   up to 178px top and bottom, which suits the home page's full-height bands and
   makes a page of four short blocks three screens long for no added meaning. */
.page-block.section-pad { padding: clamp(40px, 4.4vw, 72px) 4.2vw; }

/* The last band on the page sits directly above the footer, with no following
   block to breathe into, so it keeps a little more under it. */
main > section:last-child { padding-bottom: clamp(56px, 6vw, 92px); }

.page-block-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 5vw;
  margin-bottom: 30px;
}

.page-block-head h2 {
  font: clamp(28px, 3vw, 44px) / 0.98 var(--display);
  letter-spacing: -0.058em;
  margin: 0;
  font-weight: 500;
}

.page-block-head h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.09em;
  color: var(--red);
}

.page-block-head > p {
  width: 300px;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.8;
  color: #5e5e5e;
  margin: 0 0 6px;
}

/* The dark bands, which alternate with the paper ones down the page. */
.dark-block {
  background: var(--black);
  color: #fff;
}

.dark-block .page-block-head > p { color: #aaa; }

/* --- Lists of points and ports ---------------------------------------------- */

.page-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-points li {
  background: var(--paper);
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-points b {
  font: 500 clamp(17px, 1.6vw, 21px) var(--display);
  letter-spacing: -0.04em;
}

.page-points span {
  font-size: 12px;
  line-height: 1.75;
  color: #666;
}

/* Lifted off the band rather than matching it: cards the same colour as the
   section behind them read as a grid of lines, not as cards. */
.dark-block .page-points { background: #2e2e2f; border-color: #2e2e2f; }
.dark-block .page-points li { background: #141416; }
.dark-block .page-points span { color: #a4a4a4; }

.page-ports {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px 24px;
}

.page-ports li {
  border-top: 1px solid #3a3a3b;
  padding-top: 15px;
}

.page-ports b {
  display: block;
  font: 500 15px var(--display);
  letter-spacing: 0.04em;
}

.page-ports span {
  display: block;
  margin-top: 7px;
  font: 9px var(--mono);
  letter-spacing: 0.07em;
  color: #8d8d8d;
}

/* --- What to do next -------------------------------------------------------- */

.page-cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 27px;
  flex-wrap: wrap;
}

.dark-block .page-cta .text-link { color: #fff; border-color: #fff; }

/* --- Meet our team -----------------------------------------------------------
   Rendered by src/pages.js from src/team.js. Nothing is emitted while that list
   is empty, so this styles a section that may legitimately never appear.

   Two columns rather than as many as fit: each card carries a title, a line of
   its own and two paragraphs, and at four across that is a column of text two
   words wide. */

.expert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.expert-grid article {
  background: var(--paper);
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
}

.expert-grid b {
  display: block;
  font: 500 21px var(--display);
  letter-spacing: -.04em;
}

.expert-role {
  display: block;
  margin-top: 9px;
  font: 9px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}

/* Qualified so it outranks the .expert-grid p rule below, which would otherwise
   set this line in the same grey as the biography and flatten the card. */
.expert-grid .expert-tagline {
  font: 500 15px var(--display);
  letter-spacing: -.02em;
  color: #1a1a1b;
  margin: 22px 0 0;
}

.expert-grid p {
  font-size: 12px;
  line-height: 1.8;
  color: #666;
  margin: 14px 0 0;
}

/* Pushed to the foot of the card so the direct lines sit level across a row,
   however long the two biographies above them run.

   Qualified by .expert-grid because the paragraph rule above it is, and a bare
   .expert-contact loses to it -- which left the contact line floating halfway up
   the shorter card of each pair. */
.expert-grid .expert-contact {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.expert-contact a {
  font: 10px var(--mono);
  letter-spacing: .04em;
  color: #333;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}

.expert-contact a:hover { color: var(--red); border-color: var(--red); }

/* --- Dark mode -------------------------------------------------------------- */

.dark .page-sub,
.dark .page-block-head > p { color: #aaa; }
.dark .page-lede,
.dark .page-block { background: #161617; color: #f4f3f1; }
.dark .page-points { background: #313132; border-color: #313132; }
.dark .page-points li { background: #1d1d1e; }
.dark .page-points span { color: #a0a0a0; }
.dark .expert-grid { background: #313132; border-color: #313132; }
.dark .expert-grid article { background: #1d1d1e; }
.dark .expert-grid p { color: #a0a0a0; }
/* Qualified for the same reason as the rule in the light theme: the paragraph
   rule beside it is, and the tagline has to outrank it to stay brighter than the
   biography underneath. */
.dark .expert-grid .expert-tagline { color: #f1f0ee; }
.dark .expert-contact a { color: #ddd; border-color: #3a3a3b; }
.dark .hero-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); }

/* --- Phones ----------------------------------------------------------------- */

@media (max-width: 800px) {
  .page-lede { padding: 44px 20px 40px; }
  .page-block-head { display: block; }
  .page-block-head > p { width: auto; margin: 22px 0 0; }
  .page-points li { padding: 24px 20px 26px; }
  /* One card at a time on a phone; two columns of twelve-point text is not a
     column, it is a crossword. */
  .expert-grid { grid-template-columns: minmax(0, 1fr); }
  .expert-grid article { padding: 26px 20px 30px; }
  /* Wrapped side by side, each direct line was 17px tall and 8px from the
     next: a coin toss between ringing someone and writing to them. One to a
     row on a phone, each 44px, the underline kept tight under its text. */
  .expert-grid .expert-contact { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 12px; }
  .expert-contact a { display: inline-flex; align-items: flex-end; min-height: 44px; }
  .page-cta { margin-top: 32px; gap: 18px; }
}