/* Home v2 (2026-09-08). Same markup as v1; the desktop layout is re-set to the
   designer's rhythm at the approved type scale. Tablet and mobile blocks below
   the marker are carried over from v1 unchanged. */
.ptsb-precision-header--home {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
}

.ptsb-home {
  min-width: 0;
  overflow: clip;
  font-size: 16px;
  line-height: 1.5;
}

.ptsb-home h1,
.ptsb-home h2,
.ptsb-home h3,
.ptsb-home p {
  margin-top: 0;
}

.ptsb-home h1,
.ptsb-home h2,
.ptsb-home h3 {
  font-family: var(--ptsb-precision-display);
  font-weight: 400;
}

/* Hero: headline anchored to the lower third, gradient starts earlier so the
   type always sits on a darkened band. */
.ptsb-home-hero {
  position: relative;
  height: 867px;
  overflow: hidden;
  background: var(--ptsb-precision-charcoal);
  color: var(--ptsb-precision-cream);
}

.ptsb-home-hero__image,
.ptsb-home-hero__shade {
  position: absolute;
  display: block;
}

/* The photo always covers the whole cover. The old rule carried the Figma crop
   as a fixed offset, so past about 1550px wide the picture ran out and the
   charcoal underneath showed as a band down the right. Cover guarantees the
   fill; the scale keeps the designer's framing, anchored to the right edge. */
.ptsb-home-hero__image {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.25);
  transform-origin: 100% 55%;
}

.ptsb-home-hero__shade {
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(33, 48, 77, 0) 48%,
    rgba(33, 48, 77, .16) 62%,
    rgba(33, 48, 77, .45) 78%,
    rgba(33, 48, 77, .72) 90%,
    rgba(33, 48, 77, .88) 100%
  );
}

.ptsb-home-hero__rail {
  position: absolute;
  z-index: 1;
  right: 0;
  /* Lifted off the bottom edge so the copy sits on the building's flank rather
     than in the strip of road at the very bottom of the frame. */
  bottom: 180px;
  left: 0;
}

.ptsb-home-hero h1 {
  margin: 0 0 0 -6px;
  font-size: 96px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}

/* The copy carries its own line break, so the box is sized to the longer line
   instead of forcing a third one. */
.ptsb-home-hero p {
  width: max-content;
  max-width: 100%;
  margin: 40px 0 0;
  padding-left: 18px;
  border-left: 1px solid rgba(252, 249, 244, .85);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
}

/* Facts + about statement. */
.ptsb-home-about {
  padding: 112px 0 var(--ptsb-precision-section);
  background: var(--ptsb-precision-cream);
}

.ptsb-home-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.ptsb-home-facts > div {
  min-width: 0;
}

.ptsb-home-facts span,
.ptsb-home-kicker,
.ptsb-home-section-heading > p,
.ptsb-home-projects__heading > p {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

.ptsb-home-facts strong {
  display: block;
  margin: 22px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ptsb-precision-hairline-strong);
  font-family: var(--ptsb-precision-display);
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

.ptsb-home-facts sup {
  position: relative;
  top: -.22em;
  margin-left: 2px;
  font-size: .7em;
  line-height: 0;
}

.ptsb-home-facts small {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.35;
}

.ptsb-home-about__copy {
  margin-top: 96px;
}

.ptsb-home-about__copy h2 {
  max-width: 800px;
  margin: 24px 0 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.5;
}

.ptsb-home-text-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-top: 36px;
  color: var(--ptsb-precision-action);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

.ptsb-home-text-link > img {
  width: 18px;
  height: 15px;
  transition: transform .2s ease;
}

/* Shared section heading: eyebrow, headline, optional lede. */
.ptsb-home-section-heading h2,
.ptsb-home-projects__heading h2 {
  margin: 20px 0 0;
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.ptsb-home-section-heading > span,
.ptsb-home-projects__heading > span {
  display: block;
  max-width: 640px;
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.5;
}

/* What sets us apart. */
.ptsb-home-value {
  padding: var(--ptsb-precision-section) 0;
  background: var(--ptsb-precision-charcoal);
  color: var(--ptsb-precision-cream);
}

.ptsb-home-value__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: var(--ptsb-precision-head-gap);
}

.ptsb-home-value__cards article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 32px 32px 36px;
  border-radius: var(--ptsb-precision-radius-md);
  background: var(--ptsb-precision-action);
  color: var(--ptsb-precision-cream);
}

.ptsb-home-value__cards article > span {
  display: block;
  font-size: 16px;
  line-height: 1;
  opacity: .85;
}

/* Two of the three titles run to one line and the third to two, so the
   paragraphs below them started 28px apart across the row. Holding two lines
   of space makes every paragraph start level. The row does not get taller for
   it: the two-line card was already the tallest and the grid was stretching
   the other two up to meet it. */
.ptsb-home-value__cards h3 {
  --value-title-size: 24px;
  --value-title-leading: 1.15;
  min-height: calc(2 * var(--value-title-size) * var(--value-title-leading));
  /* 16px was drawn for a one-line title. On the card whose title actually fills
     both lines it left the descender of 'Discipline' almost touching the
     paragraph, and next to the two cards that keep a blank line there it read
     as a mistake. 24px still sits inside the 28px above the title, so the
     title stays grouped with the paragraph it introduces rather than floating
     between the number and the text. */
  margin: 28px 0 24px;
  font-size: var(--value-title-size);
  letter-spacing: -.02em;
  line-height: var(--value-title-leading);
}

.ptsb-home-value__cards p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Services row: heading with the button on the same baseline, then a card
   track that runs off the right edge and can be scrolled sideways. */
.ptsb-home-services {
  position: relative;
  padding: var(--ptsb-precision-section) 0;
  background: var(--ptsb-precision-cream);
}

.ptsb-home-services__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.ptsb-home-services__button {
  flex: 0 0 auto;
  width: 215px;
  margin-bottom: 6px;
}

.ptsb-home-services__viewport {
  position: relative;
  width: 100%;
  margin-top: var(--ptsb-precision-head-gap);
}

.ptsb-home-services__viewport::-webkit-scrollbar {
  display: none;
}

/* All four cards sit inside the rail and read as one centred row. */
.ptsb-home-services__track {
  display: grid;
  width: min(var(--ptsb-precision-rail), calc(100% - (2 * var(--ptsb-precision-gutter))));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-inline: auto;
}

.ptsb-home-service-card {
  position: relative;
  width: auto;
}

.ptsb-home-service-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  bottom: 0;
  width: 1px;
  background: var(--ptsb-precision-hairline);
}

.ptsb-home-service-card:last-child::after {
  display: none;
}

/* The photo sits in a crop frame - same utility the project cards use - so the
   hover zoom happens inside the frame instead of pushing the card around. */
.ptsb-home-service-card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--ptsb-precision-radius-sm);
}

.ptsb-home-service-card__media > img {
  transition: transform .5s ease;
}

/* The arrow only shares the title's row, so the paragraph keeps the full card
   width. Reserving it across the whole block cost a quarter of the column and
   turned four lines of copy into eight. */
/* Title and circle share one grid row, so the circle is centred on the title's
   own rectangle rather than on a number I worked out by hand. Whichever of the
   two is taller sets the row height and the other centres against it, which
   holds when the title drops to a single line on a phone. The paragraph spans
   both columns underneath, so it still gets the full card width. */
.ptsb-home-service-card__copy {
  --title-size: 30px;
  --title-leading: 1.08;
  --arrow-size: 44px;
  --title-gap: 28px;
  --arrow-gutter: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--arrow-size);
  align-items: center;
  column-gap: var(--arrow-gutter);
  padding: var(--title-gap) 0 0;
}

.ptsb-home-service-card__copy h3 {
  grid-area: 1 / 1;
  min-height: calc(2 * var(--title-size) * var(--title-leading));
  margin: 0;
  font-size: var(--title-size);
  letter-spacing: -.025em;
  line-height: var(--title-leading);
}

/* The title carries the card's one real link; the photo and the circle repeat it
   for the mouse only. */
.ptsb-home-service-card__copy h3 a {
  color: inherit;
  text-decoration: none;
}

.ptsb-home-service-card__copy h3 a:hover,
.ptsb-home-service-card__copy h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.ptsb-home-service-card__copy > a {
  grid-area: 1 / 2;
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  transition: transform .2s ease;
}

.ptsb-home-service-card__copy > a:hover,
.ptsb-home-service-card__copy > a:focus-visible {
  transform: translateX(4px);
}

.ptsb-home-service-card__copy > a img {
  display: block;
  width: 100%;
  height: 100%;
}

.ptsb-home-service-card__copy p {
  grid-area: 2 / 1 / 2 / -1;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.45;
}

/* Hover singles one card out of the four: its photo eases in a touch, its arrow
   leans forward, and the ones the pointer is not on step back. The dimming is
   gated on :has() so crossing the 30px gap between cards never fades all four at
   once, and on a hover-capable pointer so a tap on a phone cannot leave a card
   stuck at half strength. :focus-within gives the keyboard the same emphasis. */
@media (hover: hover) {
  .ptsb-home-service-card {
    transition: opacity .28s ease;
  }

  .ptsb-home-services__track:has(.ptsb-home-service-card:is(:hover, :focus-within))
    .ptsb-home-service-card:not(:hover):not(:focus-within) {
    opacity: .45;
  }

  .ptsb-home-service-card:is(:hover, :focus-within) .ptsb-home-service-card__media > img {
    transform: scale(1.04);
  }

  .ptsb-home-service-card:hover .ptsb-home-service-card__copy > a {
    transform: translateX(4px);
  }
}

/* Fading is fine without motion; the zoom is not. */
@media (prefers-reduced-motion: reduce) {
  .ptsb-home-service-card__media > img { transition: none; }
  .ptsb-home-service-card:is(:hover, :focus-within) .ptsb-home-service-card__media > img,
  .ptsb-home-service-card:hover .ptsb-home-service-card__copy > a { transform: none; }
}

/* Featured projects. */
.ptsb-home-projects {
  padding: var(--ptsb-precision-section) 0;
  background: var(--ptsb-precision-charcoal);
  color: var(--ptsb-precision-cream);
}

.ptsb-home-projects > .ptsb-precision-rail {
  position: relative;
}

.ptsb-home-projects__heading {
  text-align: center;
}

.ptsb-home-projects__heading > span {
  width: 565px;
  max-width: 100%;
  margin: 28px auto 0;
}

.ptsb-home-projects__rule {
  width: 100%;
  height: 1px;
  margin-top: 56px;
  background: var(--ptsb-precision-hairline-light);
}

.ptsb-home-projects__layout {
  position: relative;
  display: grid;
  grid-template-columns: 552px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 48px 62px;
  margin-top: 32px;
}

.ptsb-home-projects__layout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 583px;
  width: 1px;
  background: var(--ptsb-precision-hairline-light);
}

.ptsb-home-project-card {
  min-width: 0;
}

.ptsb-home-project-card--lead {
  grid-row: 1 / 3;
}

.ptsb-home-project-card--side {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 32px;
}

.ptsb-home-project-card--side:nth-of-type(2) {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ptsb-precision-hairline-light);
}

.ptsb-home-project-card__image,
.ptsb-home-project-card__image picture,
.ptsb-home-project-card__image img,
.ptsb-home-project-card__fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.ptsb-home-project-card__image {
  overflow: hidden;
  border-radius: var(--ptsb-precision-radius-lg);
  background: #45546b;
}

.ptsb-home-project-card__image img {
  object-fit: cover;
  transition: transform .5s ease;
}

/* Scoped to the anchor: with the detail pages closed the wrapper renders as a
   div, and a photo that lifts under the cursor would promise a click that is
   not there. */
a.ptsb-home-project-card__image:hover img {
  transform: scale(1.03);
}

.ptsb-home-project-card__fallback {
  background: linear-gradient(135deg, #6f7a88, #33425e);
}

.ptsb-home-project-card--lead .ptsb-home-project-card__image {
  width: 552px;
  height: 427px;
}

.ptsb-home-project-card--side .ptsb-home-project-card__image {
  width: 224px;
  height: 306px;
  border-radius: var(--ptsb-precision-radius-md);
}

.ptsb-home-project-card__details {
  position: relative;
  padding: 24px 64px 0 0;
}

.ptsb-home-project-card--side .ptsb-home-project-card__details {
  padding-top: 4px;
}

/* Project name: the designer sets this at about 34px, not the 24px the
   working file had cut it to. */
.ptsb-home-project-card h3 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -.025em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.ptsb-home-project-card h3 a {
  text-decoration: none;
}

.ptsb-home-project-card h3 a:hover,
.ptsb-home-project-card h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ptsb-home-project-card__arrow {
  position: absolute;
  top: 24px;
  right: 0;
  display: block;
  width: 44px;
  height: 44px;
  transition: transform .2s ease;
}

.ptsb-home-project-card--side .ptsb-home-project-card__arrow {
  top: 2px;
}

.ptsb-home-project-card__arrow:hover,
.ptsb-home-project-card__arrow:focus-visible {
  transform: translateX(4px);
}

.ptsb-home-project-card__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.ptsb-home-project-card__category {
  display: inline-flex;
  height: 40px;
  align-items: center;
  margin-top: 20px;
  padding: 0 30px;
  border: 1px solid rgba(252, 249, 244, .8);
  border-radius: var(--ptsb-precision-radius-pill);
  color: var(--ptsb-precision-cream);
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.ptsb-home-projects__rule--bottom {
  margin-top: 32px;
}

.ptsb-home-projects__button {
  display: flex;
  width: 475px;
  margin: 56px auto 0;
}

.ptsb-home-projects__empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 18px;
}

/* Testimonial: big quotation mark in its own column, quote at lede size. */
.ptsb-home-testimonials {
  padding: var(--ptsb-precision-section) 0;
  background: var(--ptsb-precision-cream);
}

.ptsb-home-testimonials blockquote {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  max-width: 1100px;
  margin: var(--ptsb-precision-head-gap) 0 0;
}

.ptsb-home-testimonials blockquote > span {
  margin-top: -6px;
  color: var(--ptsb-precision-blue-grey);
  font-family: var(--ptsb-precision-serif);
  font-size: 170px;
  font-weight: 700;
  line-height: .5;
}

.ptsb-home-testimonials blockquote p {
  margin: 0;
  font-family: var(--ptsb-precision-display);
  font-size: 24px;
  letter-spacing: -.01em;
  line-height: 1.45;
}

/* A grid item stretches to its column unless told otherwise, and that beats the
   inline-flex on .ptsb-home-text-link - a grid item is blockified, so the link
   measured 1004px wide while its label and arrow together are 171px. Invisible
   until the hover rule drew a line across the element, at which point the rule
   ran 833px past the arrow. */
.ptsb-home-testimonials blockquote .ptsb-home-text-link {
  grid-column: 2;
  justify-self: start;
  margin-top: 36px;
}

/* Pinned cover (every width, motion allowed).

   The photo is taken out of the flow and fixed to the viewport, so scrolling
   moves the headline, the shade and every section below it while the picture
   stays where it is. The hero keeps its own stacking context at z-index 0 and
   the sections after it sit at 1, so they slide up over the photo and hide it
   once the cover has passed. The header starts fixed and home-hero.js hands it
   back to the document once the headline reaches it - on desktop only.

   The pin itself is not width-dependent: nothing here measures the viewport,
   and no ancestor of the photo carries a transform, filter or containment that
   would demote position: fixed back to absolute. On iOS the containing block
   for a fixed element is the layout viewport, which does not resize when the
   URL bar collapses, so the photo holds still through that too. */
@media (prefers-reduced-motion: no-preference) {
  .ptsb-home-hero { z-index: 0; overflow: visible; }
  .ptsb-home-hero__image { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; }
  /* home-hero.js adds this once the cover has scrolled by. visibility rather
     than display so the element keeps its box and nothing reflows. */
  .ptsb-home-hero.is-covered .ptsb-home-hero__image { visibility: hidden; }
  .ptsb-home-hero__shade { z-index: 1; }
  .ptsb-home-hero__rail { z-index: 2; }
  .ptsb-home > *:not(.ptsb-home-hero) { position: relative; z-index: 1; }

  /* The CTA and the footer sit outside <main>. Without a stacking position the
     pinned photo paints over their backgrounds; this keeps them opaque and on
     top, so the cover stays behind them exactly as it does behind the sections
     inside <main>. */
  .ptsb-precision-cta,
  .ptsb-precision-footer { position: relative; z-index: 1; }

  /* The header holds its place at every width now, and home-hero.js hands it
     back to the document at the point the headline would otherwise run into
     it. */
  .ptsb-precision-header--home { position: fixed; }
  .ptsb-precision-header--home.is-released { position: absolute; }
}

/* ===== v2 responsive (2026-09-08): fluid below the 1600 anchor, stacked below 768.
   Written against the v2 desktop base; the v1 frozen mobile frames are not used. ===== */
@media (max-width: 1199px) {
  .ptsb-home-hero { height: 720px; }
  .ptsb-home-hero h1 { font-size: clamp(56px, 7.5vw, 96px); white-space: normal; }
  /* Below the desktop anchor four cards no longer fit; the row scrolls sideways again. */
  .ptsb-home-services { overflow: hidden; }
  .ptsb-home-services__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .ptsb-home-services__track { width: max-content; grid-template-columns: repeat(4, 300px); gap: 40px; margin-inline: 0; padding-inline: var(--ptsb-precision-gutter); }
  .ptsb-home-service-card { width: 300px; }
  .ptsb-home-service-card::after { right: -20px; }
  .ptsb-home-service-card:last-child::after { display: block; }
  .ptsb-home-service-card__media { aspect-ratio: 4 / 3; }
  .ptsb-home-projects__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
  .ptsb-home-projects__layout::before { display: none; }
  .ptsb-home-project-card--lead .ptsb-home-project-card__image { width: 100%; height: auto; aspect-ratio: 552 / 427; }
  .ptsb-home-project-card h3 { font-size: 26px; }
  .ptsb-home-project-card--side { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 20px; }
  .ptsb-home-project-card--side .ptsb-home-project-card__image { width: 100%; height: auto; aspect-ratio: 224 / 306; }
  .ptsb-home-projects__button { width: min(475px, 100%); }
  .ptsb-home-testimonials blockquote { max-width: none; }
}

@media (max-width: 767px) {
  .ptsb-home { font-size: 16px; }
  .ptsb-home-hero { height: 640px; }
  .ptsb-home-hero__rail { bottom: 56px; }
  /* 40px, the size About and Services open at. Four different sizes were in use
     for the same job across the five pages - 48, 40, 36, 30 - which is drift
     rather than hierarchy. Two tiers now: 40 for a page's opening statement,
     32 for a page title. */
  .ptsb-home-hero h1 { margin-left: -2px; font-size: 40px; letter-spacing: -.03em; line-height: 1.06; }
  .ptsb-home-hero p { margin-top: 24px; padding-left: 14px; font-size: 16px; }
  .ptsb-home-about { padding: 64px 0 72px; }
  /* Desktop lays these four out in one row, so it never needed a row gap. Folded
     into two rows the 32px it inherited is only a little over twice the 14px
     between a label and its own number, so the four facts read as one running
     column instead of two pairs. 48 against that 14 puts the break where the
     row break is. */
  .ptsb-home-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
  .ptsb-home-kicker,
  .ptsb-home-section-heading > p,
  .ptsb-home-projects__heading > p { font-size: 12px; }
  /* A fact's three lines were all charcoal, so the only things separating the
     label from the sentence above it were 2px of size and the uppercase. Read
     at a glance down a stacked column that is not enough, and the last line of
     one fact ran into the first line of the next.

     The quiet line is the label, and the sentence underneath stays charcoal:
     the label only names the fact, while the sentence is the part meant to be
     read. So the column now goes light at the top and dark down the middle and
     bottom, which is also the order the eye wants - key, value, explanation.

     Tracking does the rest. The theme's own eyebrow is 12px at .12em; these
     were at .02em, barely wider than body text, so they read as short sentences
     set in caps rather than as keys. .08em is the ceiling here - "FOUNDER
     LEADERSHIP" measures 144px of ink at it, and .12em would put it at 153px in
     a 155px column. */
  /* A step lighter than the house grey rather than a new colour: the same token,
     thinned against the ground it sits on, so it stays tied to the palette. */
  .ptsb-home-facts span { color: color-mix(in srgb, var(--ptsb-precision-grey) 85%, var(--ptsb-precision-cream)); font-size: 12px; letter-spacing: .08em; }

  /* 40, the size of the page's own headline. On desktop these numbers are 64
     against a 96px headline - two thirds of it - and at 48 against a 40px
     headline they had become the loudest thing on the page, which is not what a
     supporting fact panel is for. They still run 2.9x their own description, so
     nothing about the panel goes quiet.

     The weight stays 500 and is real: this DM Sans is a variable face with a
     400-700 axis, so 500 is interpolated rather than silently rounded the way
     Tinos rounds 600 up to 700. */
  .ptsb-home-facts strong { margin-top: 14px; padding-bottom: 10px; font-size: 40px; }
  .ptsb-home-facts small { margin-top: 10px; font-size: 14px; }
  .ptsb-home-about__copy { margin-top: 56px; }
  .ptsb-home-about__copy h2 { margin-top: 16px; font-size: 19px; line-height: 1.45; }
  .ptsb-home-text-link { margin-top: 24px; font-size: 14px; }
  .ptsb-home-section-heading h2,
  .ptsb-home-projects__heading h2 { margin-top: 14px; font-size: 32px; line-height: 1.08; }
  .ptsb-home-section-heading > span,
  .ptsb-home-projects__heading > span { margin-top: 18px; font-size: 16px; }
  .ptsb-home-value,
  .ptsb-home-services,
  .ptsb-home-projects,
  .ptsb-home-testimonials { padding: 72px 0; }
  .ptsb-home-value__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
  .ptsb-home-value__cards article { padding: 24px 24px 28px; }
  .ptsb-home-value__cards h3 { min-height: 0; margin: 20px 0 16px; --value-title-size: 20px; }
  .ptsb-home-value__cards p { font-size: 16px; }
  /* The button belongs after the cards on a phone - you look at the services,
     then you get an exit. It cannot simply be reordered, because it lives inside
     the heading wrapper while the cards are that wrapper's sibling, and order
     only sorts among siblings. display: contents dissolves the wrapper so its
     two children become items of the section itself and can be sorted with the
     card track; the wrapper also carried the rail, so the rail moves onto the
     children that still need it. The track is deliberately not railed - it
     bleeds off the right edge and scrolls. */
  .ptsb-home-services { display: flex; flex-direction: column; }
  .ptsb-home-services__heading { display: contents; }
  .ptsb-home-services .ptsb-home-section-heading,
  .ptsb-home-services__button { width: min(var(--ptsb-precision-rail), calc(100% - (2 * var(--ptsb-precision-gutter)))); margin-inline: auto; }
  /* Two cues that the row slides, because the 52px of the next card peeking past
     the screen edge was reading as the edge of the section rather than as a
     second card.

     The fade is the same signal the Services scope row already uses; here it is
     a mask rather than a gradient overlay, because the only element positioned
     over this row is the scroller itself and an ::after inside a scroller
     travels with the content instead of staying at the edge. A mask is applied
     to the element's own box, so it holds still.

     Both edges, and softly: the mask stops at 40% rather than running to
     nothing, so the card at the edge is veiled rather than erased. A row that
     softens on both sides reads as a window onto something wider than the
     screen, which is the thing being signalled; a hard fade on one side only
     reads as damage.

     The snap is the other half: it is felt rather than seen, but it turns a
     vague drag into a row that lands on a card, which is what tells you the row
     was built to be moved. */
  .ptsb-home-services__viewport {
    order: 1;
    margin-top: 40px;
    scroll-snap-type: x mandatory;
    --edge: 40px;
    --edge-veil: rgba(0, 0, 0, .4);
    -webkit-mask-image: linear-gradient(to right, var(--edge-veil) 0, #000 var(--edge), #000 calc(100% - var(--edge)), var(--edge-veil) 100%);
    mask-image: linear-gradient(to right, var(--edge-veil) 0, #000 var(--edge), #000 calc(100% - var(--edge)), var(--edge-veil) 100%);
  }
  .ptsb-home-service-card { scroll-snap-align: center; }
  .ptsb-home-services__button { order: 2; height: 48px; margin-top: 40px; margin-bottom: 0; font-size: 14px; }
  .ptsb-home-services__track { grid-template-columns: repeat(4, 280px); gap: 40px; }
  .ptsb-home-service-card { width: 280px; }
  .ptsb-home-service-card::after { right: -20px; }
  .ptsb-home-service-card__media { width: 280px; height: 210px; aspect-ratio: auto; }
  .ptsb-home-service-card__copy { --title-size: 22px; --arrow-size: 40px; --title-gap: 20px; --arrow-gutter: 12px; min-height: 0; }
  .ptsb-home-service-card__copy h3 { min-height: 0; }
  .ptsb-home-service-card__copy p { margin-top: 14px; font-size: 16px; }
  .ptsb-home-projects__heading > span { width: auto; }
  .ptsb-home-projects__rule { margin-top: 36px; }
  .ptsb-home-projects__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; margin-top: 28px; }
  .ptsb-home-project-card--lead { grid-row: auto; }
  .ptsb-home-project-card--side { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ptsb-home-project-card--side:nth-of-type(2) { padding-bottom: 40px; }
  .ptsb-home-project-card--lead .ptsb-home-project-card__image { aspect-ratio: 342 / 311; }
  .ptsb-home-project-card--side .ptsb-home-project-card__image { aspect-ratio: 342 / 215; border-radius: var(--ptsb-precision-radius-md); }
  .ptsb-home-project-card__details,
  .ptsb-home-project-card--side .ptsb-home-project-card__details { padding: 16px 56px 0 0; }
  .ptsb-home-project-card h3 { font-size: 20px; }
  .ptsb-home-project-card__arrow,
  .ptsb-home-project-card--side .ptsb-home-project-card__arrow { top: 14px; width: 40px; height: 40px; }
  .ptsb-home-project-card__category { height: 32px; margin-top: 14px; padding: 0 16px; font-size: 12px; }
  .ptsb-home-projects__rule--bottom { margin-top: 24px; }
  .ptsb-home-projects__button { width: 100%; height: 48px; margin-top: 36px; font-size: 14px; }
  .ptsb-home-testimonials blockquote { grid-template-columns: 56px minmax(0, 1fr); margin-top: 40px; }
  .ptsb-home-testimonials blockquote > span { margin-top: -4px; font-size: 96px; }
  .ptsb-home-testimonials blockquote p { font-size: 19px; line-height: 1.45; }
  .ptsb-home-testimonials blockquote .ptsb-home-text-link { margin-top: 24px; }
}