/* ------------------------------------------------------------------
   TEEARCH - services page

   Hand-written, loaded AFTER styles.css and only by services.html. It
   is not generated by Tailwind and Tailwind never needs to run for it.

   The palette, the type and the voice are the home page's. The FORM is
   its own: this page is a SPECIFICATION SHEET. Where the home page is a
   bento of rounded tiles and the about page is a ruled dossier, this one
   is a document with a contents page, four numbered chapters that keep a
   sticky header while you read them, coded scope rows, keyline stamps
   and a closing band in amber rather than ink.

   Every value below reads a brand token that styles.css already
   publishes on :root, so the pages cannot drift apart.
------------------------------------------------------------------ */

/* -------------------------------------------------------- full bleed */

/* Escape the shell and run to both screen edges. body has overflow-x:
   clip, so 100vw cannot open a horizontal scrollbar. */
.bleed {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* ------------------------------------------------------------- type */

/* The masthead h1 uses the home page's own `text-display` size from
   styles.css, so all three heroes set at the same scale. This is the
   size below it, shared by section headings and by the large statement
   that opens each chapter. */
.display-md {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--color-ink);
}

/* The serif italic accent, same role as on the other two pages. */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-brass);
}

/* ------------------------------------------------------------- stamp */

/* This page's section marker: a small keyline stamp, square-cornered,
   set against the full-round pills the rest of the site uses. The home
   page marks a section with a centred eyebrow, the about page with an
   eyebrow sitting on a rule; this one stamps it. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--color-line);
  padding: 0.5rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-brass);
}
.stamp::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--color-amber);
}
.stamp .sep { color: var(--color-line); }
.stamp .alt { color: var(--color-muted-2); }

/* ---------------------------------------------------------- contents */

/* The masthead is a spread, not a centred block: the headline on the
   left, the contents of the page on the right. The four rows are the
   only navigation this page needs.

   Named .toc, not .contents: styles.css already publishes a Tailwind
   `contents` utility (display: contents) that every <picture> on the
   site wears, and the two would collide. */
/* The headline runs the full width of the shell, exactly as the home and
   about heroes do, so all three set at the same text-display size without
   one of them wrapping into an extra line. Only what sits UNDER it is a
   spread: the lede and buttons on the left, the contents on the right. */
.mast { display: grid; gap: 3rem; }

@media (min-width: 1024px) {
  .mast {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4.5rem;
    align-items: start;
  }
}

/* The gap under the "On this page" label is set here rather than with
   a Tailwind mt- class in the markup: Tailwind v4 publishes utilities
   inside @layer utilities, and unlayered CSS beats a layer whatever the
   source order - so a `margin: 0` here silently threw away the mt-5 the
   markup asked for. */
.toc {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--color-ink);
}
.toc a {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1rem;
  align-items: center;
  gap: 1rem;
  padding: 1.0625rem 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  transition:
    background-color 0.35s var(--ease-out-soft),
    padding 0.35s var(--ease-out-soft);
}
.toc a:hover {
  background: var(--color-paper-3);
  padding-inline: 0.75rem;
}
.toc .n {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--color-brass);
}
.toc .t {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}
/* An <svg> with a viewBox and no width/height fills its box, so the box
   has to have one - the same trick the icon spans in styles.css use. */
.toc .arw {
  display: block;
  width: 1rem;
  height: 1rem;
  color: var(--color-muted-2);
  transition:
    transform 0.35s var(--ease-out-soft),
    color 0.35s var(--ease-out-soft);
}
.toc a:hover .arw {
  transform: translateX(4px);
  color: var(--color-brass);
}

/* ------------------------------------------------------------- tone */

/* The alternating band colour. Declared as a custom property and not
   only as a background, because the sticky chapter header and the dots
   on the spine both have to paint the exact colour of the section they
   sit in - anything else shows as a halo or a seam. */
.tone-2 {
  --band: var(--color-paper-2);
  background: var(--band);
}

/* ------------------------------------------------------------- spine */

/* How an engagement runs. One continuous hairline with an amber dot per
   stage - the home page numbers its PMC phases down a column, this reads
   across. On phones the rule turns vertical so the sequence still reads
   as one line rather than five loose blocks. */
.spine {
  display: grid;
  gap: 0;
  border-left: 1px solid var(--color-line);
  padding-left: 1.75rem;
}
.spine > li { position: relative; padding-bottom: 2rem; }
.spine > li:last-child { padding-bottom: 0; }
.spine > li::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: calc(-1.75rem - 5px);
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: var(--color-amber);
  /* the halo breaks the rule where the dot sits, so it has to be the
     band's colour rather than plain paper */
  box-shadow: 0 0 0 4px var(--band, var(--color-paper));
}
.spine .stage {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.spine h3 {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}
.spine p {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .spine {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2rem;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-line);
  }
  .spine > li { padding: 2.25rem 0 0; }
  .spine > li::before {
    top: -5px;
    left: 0;
  }
}

/* ---------------------------------------------------------- chapters */

/* Four numbered chapters. Each sets --band so its sticky header can
   paint the same colour as the section it belongs to; without that the
   copy would scroll visibly underneath it. */
.chapter {
  --band: var(--color-paper);
  background: var(--band);
  padding-block: 5.5rem;
}
.chapter-alt { --band: var(--color-paper-2); }

@media (min-width: 768px) {
  .chapter { padding-block: 7rem; }
}

/* The header stays with you for the length of its chapter, so the
   number and the name of what you are reading never leave the screen.
   Only from 900px: on a phone the floating nav already owns that strip.
   z-index sits under the nav's z-50. */
.chead {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1rem 0;
  background: var(--band);
  border-bottom: 1px solid var(--color-ink);
}
.chead .no {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  color: var(--color-brass);
}
.chead h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--color-ink);
}
.chead .tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}

@media (max-width: 767px) {
  .chead .tag { display: none; }
}

@media (min-width: 900px) {
  .chead {
    position: sticky;
    /* exactly the height of the compressed nav (0.625rem of padding plus
       a 4.25rem pill), so nothing scrolls through a gap between them */
    top: 4.875rem;
    z-index: 20;
  }
}

/* The statement and the description, side by side under the header. */
.chapter-intro { display: grid; gap: 2rem; margin-top: 2.75rem; }

@media (min-width: 900px) {
  .chapter-intro {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Square-cornered mono chips. The site's pills are full-round; these are
   not, because they are labels on a spec sheet, not buttons. */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.chips li {
  border: 1px solid var(--color-line);
  border-left: 2px solid var(--color-brass);
  background: var(--color-paper);
  padding: 0.45rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ------------------------------------------------------- figure band */

/* A wide band held to the right nine columns, with its caption set in
   the gutter beside it. Nine columns of the 80rem shell is about 900px,
   which is the widest source in media/ - so the band never upscales. */
.band-row { display: grid; gap: 1rem; margin-top: 3rem; }

.band {
  position: relative;
  overflow: hidden;
  background: var(--color-paper-3);
  aspect-ratio: 16 / 10;
}
.band img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.band-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--color-line);
  padding-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
/* the figure number never breaks, however narrow the screen gets */
.band-cap > span:first-child { white-space: nowrap; }

@media (min-width: 900px) {
  .band-row {
    grid-template-columns: 3fr 9fr;
    gap: 2.5rem;
    align-items: start;
  }
  .band { aspect-ratio: 2.4 / 1; }
  .band-cap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    border-top-color: var(--color-ink);
  }
}

/* --------------------------------------------------------- scope rows */

/* The scope of each service, coded like a drawing schedule. Two columns
   on a wide screen, one on a phone, hairline between every row. */
.spec {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  display: grid;
  border-bottom: 1px solid var(--color-line);
}
.spec > li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 1.25rem;
  row-gap: 0.35rem;
  padding: 1.375rem 0;
  border-top: 1px solid var(--color-line);
}
.spec .code {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--color-brass);
  padding-top: 0.35em;
}
.spec h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}
.spec p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .spec {
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
  }
  .spec > li { padding: 1.625rem 0; }
}

/* ---------------------------------------------------------- sectors */

/* The sector register. A hairline mosaic rather than a row of rounded
   cards: the gaps ARE the rules, drawn by the grid's own background. */
.sectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.sector {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-paper-3);
  aspect-ratio: 4 / 3;
}
.sector img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition:
    filter 0.6s var(--ease-out-soft),
    transform 0.9s var(--ease-out-soft);
}
.sector:hover img {
  filter: none;
  transform: scale(1.04);
}
.sector figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(47, 33, 31, 0.88), transparent);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .sectors { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------- routes */

/* Where to start: a plain table, because that is what it is. On phones
   the head row is dropped and each cell carries its own label, so the
   rows stay readable instead of squeezing into three columns. */
.routes {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.routes th {
  padding: 0 1.5rem 0.9rem 0;
  border-bottom: 1px solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-muted-2);
}
.routes td {
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
  vertical-align: top;
}
.routes td:first-child {
  font-weight: 600;
  color: var(--color-ink);
}
.routes a {
  font-weight: 600;
  color: var(--color-brass);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-brass) 35%, transparent);
  transition: color 0.3s var(--ease-out-soft), border-color 0.3s var(--ease-out-soft);
}
.routes a:hover {
  color: var(--color-brass-lift);
  border-bottom-color: var(--color-brass-lift);
}

@media (max-width: 767px) {
  .routes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .routes tr {
    display: block;
    border-bottom: 1px solid var(--color-line);
    padding: 1.25rem 0;
  }
  .routes tr:first-child { border-top: 1px solid var(--color-ink); }
  .routes td {
    display: block;
    padding: 0;
    border: 0;
  }
  .routes td + td { margin-top: 0.5rem; }
  .routes td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted-2);
  }
}

/* ----------------------------------------------------- closing band */

/* Amber, not ink. The home page closes on a rounded ink panel and the
   about page on a full-bleed ink band, so this one takes the brand's
   other strong colour. Amber carries no type anywhere else on the site
   because it is 1.98:1 on paper - but ink ON amber is 7.25:1, which is
   why the whole band is set in ink, accent word included. */
.close {
  background: var(--color-amber);
  color: var(--color-ink);
}
.close .accent { color: var(--color-ink); }
.close .lede { color: color-mix(in srgb, var(--color-ink) 80%, transparent); }

.close-facts {
  display: grid;
  gap: 0;
  margin: 3.5rem 0 0;
  border-top: 1px solid rgba(47, 33, 31, 0.25);
}
.close-facts > div {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(47, 33, 31, 0.25);
}
.close-facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(47, 33, 31, 0.6);
}
.close-facts dd {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--color-ink);
}
.close-facts a { color: var(--color-ink); }

@media (min-width: 768px) {
  .close-facts {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.5rem;
  }
  .close-facts > div { border-bottom: 0; }
  .close-facts > div + div {
    border-left: 1px solid rgba(47, 33, 31, 0.25);
    padding-left: 2.5rem;
  }
}

/* Reveals reuse the home page's .reveal contract - app.js adds .is-in. */