/*
 * PTSB Precision About Us, v2 (2026-09-08).
 *
 * Same markup as v1. The desktop layout is rebuilt as flow layout with one
 * section rhythm (120px), one headline-to-content gap (64px) and one hairline
 * set, following the designer's original proportions at the approved type
 * scale. The v1 tablet and mobile blocks are appended unchanged below the
 * marker at the end of the desktop rules.
 */

.ptsb-precision-header--about {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  color: var(--ptsb-precision-cream);
}

.ptsb-precision-header--about .ptsb-precision-header__inner {
  border-bottom-color: rgba(252, 249, 244, .72);
}

.ptsb-about-page {
  min-width: 0;
  overflow: clip;
  background: var(--ptsb-precision-cream);
  font-size: 16px;
  line-height: 1.5;
}

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

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

.ptsb-about-kicker {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

/* Hero band. */
.ptsb-about-hero {
  min-height: var(--ptsb-precision-page-hero);
  padding: 236px 0 80px;
  background: var(--ptsb-precision-navy);
  color: var(--ptsb-precision-cream);
}

.ptsb-about-hero h1 {
  max-width: 660px;
  margin: 20px 0 0 -4px;
  font-size: 68px;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.04;
}

/* Section rhythm: 120px top and bottom on every section, so the gap between
   one section's content and the next is 240 everywhere, as on Home. Journey
   and Values used to drop their bottom padding, which left those two joins at
   120 and 157 while the rest sat at 240-277. */
.ptsb-about-journey { padding: var(--ptsb-precision-section) 0; }
.ptsb-about-credentials { padding: var(--ptsb-precision-section) 0; }
.ptsb-about-quality { padding: var(--ptsb-precision-section) 0; }
.ptsb-about-values { padding: var(--ptsb-precision-section) 0; }
.ptsb-about-people { padding: var(--ptsb-precision-section) 0; }
.ptsb-about-careers { padding: var(--ptsb-precision-section) 0; }
.ptsb-about-contact { padding: var(--ptsb-precision-section) 0; }

.ptsb-about-credentials > .ptsb-precision-rail > h2,
.ptsb-about-quality > .ptsb-precision-rail > h2,
.ptsb-about-values > .ptsb-precision-rail > h2,
.ptsb-about-people h2,
.ptsb-about-contact h2,
.ptsb-about-careers__inner h2 {
  margin: 20px 0 0;
  font-size: 56px;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.ptsb-about-dark {
  background: var(--ptsb-precision-charcoal);
  color: var(--ptsb-precision-cream);
}

/* Journey: statement left, prose right, mission / vision on one rule below. */
.ptsb-about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 570px;
  gap: 60px;
  margin-top: 20px;
}

.ptsb-about-split h2 {
  margin: 0;
  font-size: 36px;
  letter-spacing: -.03em;
  line-height: 1.12;
}

.ptsb-about-split h2 span {
  display: block;
}

.ptsb-about-prose p,
.ptsb-about-mission-grid p,
.ptsb-about-credentials p,
.ptsb-about-people-list p,
.ptsb-about-careers p {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.55;
}

.ptsb-about-prose p:last-child,
.ptsb-about-mission-grid p,
.ptsb-about-people-list p {
  margin-bottom: 0;
}

.ptsb-about-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--ptsb-precision-hairline-strong);
}

.ptsb-about-mission-grid article {
  position: relative;
  min-width: 0;
}

.ptsb-about-mission-grid article + article::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 1px;
  background: var(--ptsb-precision-hairline);
}

.ptsb-about-mission-grid h3,
.ptsb-about-credentials h3,
.ptsb-about-people-list h3 {
  margin: 0 0 20px;
  font-family: var(--ptsb-precision-display);
  font-size: 24px;
  font-weight: 450;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.ptsb-about-mission-grid p {
  max-width: 490px;
}

/* Credentials. */
.ptsb-about-credentials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  margin-top: var(--ptsb-precision-head-gap);
}

.ptsb-about-credentials-grid article {
  min-width: 0;
}

.ptsb-about-credentials-grid article > p {
  /* Adjacent margins collapse to the larger, so the heading's 20px is what sets
     this gap unless the paragraph asks for more. 32px drops it 12px clear of
     the panel edge in the next column. */
  margin-top: 32px;
  max-width: 490px;
}

/* The designer draws these links as gold type on cream, which measures 3.16:1
   and is easy to miss - Shawn could not see the one on About. The gold stays;
   the underline that used to appear only on hover is now always there, so the
   link reads as a link at rest. Hover swaps that rule for the sweep in
   .ptsb-precision-textlink, which runs from the V to the tip of the arrow. */
.ptsb-about-text-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: var(--ptsb-precision-action);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

.ptsb-about-text-link .ptsb-precision-textlink__arrow {
  font-size: 20px;
  line-height: .8;
  transition: transform .2s ease;
}

/* The designer's solid gold panel belongs on the charcoal band it sits on over
   on Home: there the luminance runs dark section -> mid panel -> light text, all
   one direction. This page is cream, so the same panel made the eye jump light
   -> dark -> light again, and the figures inside read as glare rather than as
   text. The gold stays, as a wash, and the type goes dark - so the run is light
   page -> slightly darker panel -> darkest text. Contrast on the figures goes
   from 3.16:1 to about 12:1, which matters for a capital sum and a registration
   number that people copy down. */
.ptsb-about-facts {
  margin: 0;
  padding: 24px 32px;
  border-radius: var(--ptsb-precision-radius-md);
  background: color-mix(in srgb, var(--ptsb-precision-action) 14%, transparent);
  color: var(--ptsb-precision-charcoal);
}

.ptsb-about-facts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  padding: 16px 0;
  /* the old divider was cream at 35%, drawn for the dark panel; it vanished on
     the wash. Keeping it in the gold family rather than a neutral grey stops
     the rule reading cold against the warm panel. */
  border-bottom: 1px solid color-mix(in srgb, var(--ptsb-precision-action) 42%, transparent);
}

.ptsb-about-facts div:last-child {
  border-bottom: 0;
}

.ptsb-about-facts dt,
.ptsb-about-facts dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.ptsb-about-registration-table {
  margin-top: var(--ptsb-precision-head-gap);
  border-top: 1px solid var(--ptsb-precision-hairline-strong);
}

.ptsb-about-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr);
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ptsb-precision-hairline);
  font-size: 20px;
  line-height: 1.3;
}

.ptsb-about-table-head {
  padding: 18px 0;
  color: var(--ptsb-precision-grey);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Quality commitment cards. */
.ptsb-about-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: var(--ptsb-precision-head-gap);
}

/* Plain columns on a rule instead of gold cards: Home already owns that card
   style, and dropping it takes 68px off the band. */
.ptsb-about-quality-grid article {
  min-width: 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--ptsb-precision-hairline-light);
  color: var(--ptsb-precision-cream);
}

.ptsb-about-quality-grid h3 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 450;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.ptsb-about-quality-grid p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Core values: headline left, numbered list right. */
.ptsb-about-values > .ptsb-precision-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 570px;
  grid-template-rows: auto 1fr;
  gap: 20px 60px;
  align-items: start;
}

.ptsb-about-values .ptsb-about-kicker {
  grid-area: 1 / 1;
}

.ptsb-about-values > .ptsb-precision-rail > h2 {
  grid-area: 2 / 1;
  margin: 0;
}

.ptsb-about-values-list {
  grid-area: 1 / 2 / 3 / 3;
  margin: 0;
  border-top: 1px solid var(--ptsb-precision-hairline-strong);
}

.ptsb-about-values-list article {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0 30px;
  min-width: 0;
  padding: 32px 0 36px;
  border-bottom: 1px solid var(--ptsb-precision-hairline);
}

.ptsb-about-values-list article > span {
  grid-row: 1 / 3;
  padding-top: 3px;
  color: var(--ptsb-precision-grey);
  font-family: var(--ptsb-precision-display);
  font-size: 20px;
  letter-spacing: -.02em;
  line-height: 1;
}

.ptsb-about-values-list h3,
.ptsb-about-values-list p {
  grid-column: 2;
  margin: 0;
}

.ptsb-about-values-list h3 {
  font-size: 24px;
  font-weight: 450;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.ptsb-about-values-list p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.ptsb-about-credentials-break {
  display: block;
}

/* People rows. */
.ptsb-about-people-list {
  margin-top: var(--ptsb-precision-head-gap);
  border-top: 1px solid var(--ptsb-precision-hairline-strong);
}

.ptsb-about-people-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 570px;
  gap: 30px;
  padding: 36px 0;
  border-bottom: 1px solid var(--ptsb-precision-hairline);
}

.ptsb-about-people-list h3,
.ptsb-about-people-list p {
  margin: 0;
}

/* Careers: centred block. */
.ptsb-about-careers__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.ptsb-about-careers__inner h2 {
  margin-top: 20px;
}

.ptsb-about-careers__inner > div:last-child p {
  max-width: 760px;
  margin: 32px auto 0;
}

.ptsb-about-careers__button {
  width: 285px;
  margin-top: 40px;
}

/* Company details table. */
/* Charcoal, as drawn: it is the one dark object in a cream section, which is
   what makes it read as the thing to act on. The Careers band above is also
   charcoal but a full 280px of cream and a section heading separate them at
   this width, so nothing collides. On a phone they end up stacked with far
   less between them and the pale gold variant below takes over - the collision
   is a small-screen problem and the fix stays on small screens. */
.ptsb-about-enquiry {
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ptsb-precision-head-gap);
  padding: 44px 56px;
  border-radius: var(--ptsb-precision-radius-md);
  background: var(--ptsb-precision-charcoal);
  color: var(--ptsb-precision-cream);
}

/* Display face, because with the band gone this sentence is the call to
   action, not a caption. 32px sits clearly under the 56px section heading
   above it and clearly over the 20px table below. */
.ptsb-about-enquiry__copy {
  max-width: 640px;
  margin: 0;
  font-family: var(--ptsb-precision-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.18;
}

.ptsb-about-enquiry .ptsb-precision-button {
  flex: 0 0 auto;
  width: 197px;
}

.ptsb-about-contact-grid {
  margin-top: 48px;
}

.ptsb-about-contact-list {
  border-top: 1px solid var(--ptsb-precision-hairline-strong);
}

.ptsb-about-contact-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  /* One-line values (Working Hours) sat 28px shorter than two-line ones;
     the floor keeps every row of the table the same depth. */
  min-height: 145px;
  padding: 32px 0;
  border-bottom: 1px solid var(--ptsb-precision-hairline);
}

.ptsb-about-contact-label {
  font-family: var(--ptsb-precision-display);
  font-size: 24px;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.ptsb-about-contact-data {
  min-width: 0;
}

.ptsb-about-contact-sublabel {
  display: block;
  margin-bottom: 10px;
  color: var(--ptsb-precision-grey);
  font-size: 14px;
  line-height: 1;
}

.ptsb-about-contact-data strong,
.ptsb-about-contact-data a,
.ptsb-about-contact-data p,
.ptsb-about-contact-data address {
  display: block;
  margin: 0;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ptsb-about-contact-data address {
  margin-top: 8px;
}

.ptsb-about-contact-data a:hover,
.ptsb-about-contact-data a:focus-visible {
  color: var(--ptsb-precision-action);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The map is a grid cell like any other: its left edge lines up with the
   Email / Hours / CIDB column below it, its right edge with the rail. It was
   358px pinned right, so it started 82px inside its own column. */
.ptsb-about-map {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 358 / 185;
  overflow: hidden;
  border-radius: var(--ptsb-precision-radius-md);
  background: var(--ptsb-precision-blue-grey);
}

.ptsb-about-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ===== 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-about-split,
  .ptsb-about-values > .ptsb-precision-rail,
  .ptsb-about-people-list article { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .ptsb-about-contact-row { grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); }
  .ptsb-about-map { width: 100%; height: auto; aspect-ratio: 358 / 185; }
}

@media (max-width: 767px) {
  .ptsb-about-page { font-size: 16px; }
  .ptsb-about-kicker { font-size: 12px; }
  /* The hero kept a 495px floor at every width - that number is the desktop
     frame's - while the phone rules cut the padding from 236 to 132 and the
     headline from 68px to 40px. The box stayed put and the contents shrank, so
     half the band was empty.

     Shawn's call is to keep the headline at the smaller size and take the space
     out instead, so the floor goes entirely: padding alone decides the height
     and there is no number left that can be too big for what is inside it. The
     designer's 402px frame solves the same emptiness the other way, with a much
     larger headline; that was tried and read as too big. */
  .ptsb-about-hero { min-height: 0; padding: 132px 0 56px; }
  /* 14px of box gap left only 6px between the ink: a 40px face on a 1.04
     line-height overflows its line box by about 5px at each end, so the
     measured gap and the seen gap are not the same number. 24px reads as the
     16px it actually is. */
  .ptsb-about-hero h1 { margin: 24px 0 0 -2px; font-size: 40px; }
  /* Every section was 72 top and bottom, so any two of them sat 144px apart
     before the type even started - a sixth of a 852px phone screen given to
     nothing, eight times down the page. Desktop can afford its 120 because the
     content is 1170px wide and sections read as wide and shallow; stacked in a
     334px column the vertical rhythm is all there is, and 144 reads as the page
     having stopped.

     56 puts the boundary at 112, which is still 2.8x the 40px step the footer
     uses between its own blocks, so a new section is in no danger of reading as
     a continuation. One rule for all seven, since they were split across two
     selectors that set the same number. */
  .ptsb-about-journey,
  .ptsb-about-credentials,
  .ptsb-about-quality,
  .ptsb-about-values,
  .ptsb-about-people,
  .ptsb-about-careers,
  .ptsb-about-contact { padding: 56px 0; }
  .ptsb-about-credentials > .ptsb-precision-rail > h2,
  .ptsb-about-quality > .ptsb-precision-rail > h2,
  .ptsb-about-values > .ptsb-precision-rail > h2,
  .ptsb-about-people h2,
  .ptsb-about-contact h2,
  .ptsb-about-careers__inner h2 { margin-top: 14px; font-size: 32px; line-height: 1.08; }
  .ptsb-about-split { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 14px; }
  .ptsb-about-split h2 { font-size: 26px; }
  .ptsb-about-prose p,
  .ptsb-about-mission-grid p,
  .ptsb-about-credentials p,
  .ptsb-about-people-list p,
  .ptsb-about-careers p { margin-bottom: 18px; font-size: 16px; line-height: 1.55; }
  /* That 18px is for the space between two paragraphs. On the last one in a
     block it stacked on top of whatever the next block brings - a 40 or 56px
     margin, or a grid gap - so a sub-heading ended up 69 to 93px below the
     prose above it, which was closing in on the 112 between whole sections.
     The separation is the next block's job; this one only separates its own
     siblings. */
  .ptsb-about-prose p:last-child,
  .ptsb-about-mission-grid p:last-child,
  .ptsb-about-credentials p:last-child,
  .ptsb-about-people-list p:last-child,
  .ptsb-about-careers p:last-child { margin-bottom: 0; }
  /* This block is introduced by a rule line, so its spacing is really two
     numbers: the margin sits above the line and the padding below it. 40 + 28
     made it the widest gap inside any section on the page. */
  .ptsb-about-mission-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; padding-top: 24px; }
  .ptsb-about-mission-grid article + article { padding-top: 28px; border-top: 1px solid var(--ptsb-precision-hairline); }
  .ptsb-about-mission-grid article + article::before { display: none; }
  .ptsb-about-mission-grid h3,
  .ptsb-about-credentials h3,
  .ptsb-about-people-list h3 { margin-bottom: 12px; font-size: 20px; }
  .ptsb-about-credentials-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
  .ptsb-about-text-link { font-size: 14px; }
  .ptsb-about-facts { padding: 8px 20px; }
  .ptsb-about-facts div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 12px 0; }
  .ptsb-about-facts dt,
  .ptsb-about-facts dd { font-size: 14px; }
  .ptsb-about-registration-table { margin-top: 32px; }
  .ptsb-about-table-row { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 18px 0; font-size: 16px; }
  .ptsb-about-table-head { padding: 12px 0; font-size: 12px; }
  .ptsb-about-quality-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
  .ptsb-about-quality-grid article { padding: 20px 0 0; }
  .ptsb-about-quality-grid h3 { margin-bottom: 12px; font-size: 20px; }
  .ptsb-about-quality-grid p { font-size: 16px; }
  .ptsb-about-values > .ptsb-precision-rail { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; }
  .ptsb-about-values .ptsb-about-kicker { grid-area: auto; }
  .ptsb-about-values > .ptsb-precision-rail > h2 { grid-area: auto; }
  .ptsb-about-values-list { grid-area: auto; margin-top: 26px; }
  .ptsb-about-values-list article { grid-template-columns: 48px minmax(0, 1fr); gap: 0 16px; padding: 22px 0 26px; }
  .ptsb-about-values-list article > span { font-size: 16px; }
  .ptsb-about-values-list h3 { font-size: 20px; }
  .ptsb-about-values-list p { margin-top: 8px; font-size: 16px; }
  .ptsb-about-people-list { margin-top: 40px; }
  .ptsb-about-people-list article { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
  .ptsb-about-careers__inner > div:last-child p { margin-top: 20px; }
  .ptsb-about-careers__button { width: min(285px, 100%); margin-top: 28px; }
  /* Stacked on a phone, this panel and the Careers band above it put two filled
     gold CTAs on one screen in two separate cards - and the panel's button went
     to the same mailto as the Email address in the contact list below it. Three
     things competing to do one job.

     It belongs with that address. The panel is not a sibling of the contact
     rows though - it sits two levels up - so the two wrappers between them are
     dissolved with display: contents, which puts the rows and the panel in one
     flex context and lets order interleave them. The markup never moves, which
     is the point: desktop keeps the panel exactly as it was signed off.

     display: contents destroys the wrapper's own box, so the list's top rule
     and the grid's margin are re-hung on the first row. */
  .ptsb-about-contact > .ptsb-precision-rail { display: flex; flex-direction: column; }
  .ptsb-about-contact-grid,
  .ptsb-about-contact-list { display: contents; }
  /* Contact first. Anyone arriving here has come off a "Contact Us" link, and
     what they came for is the phone number and the email address - but the
     table opened with Company: the name, the postal address and a 170px map,
     which on a phone pushed the email off the bottom of the screen. Measured at
     the height Safari actually leaves on an iPhone 15 Pro, 659px rather than the
     full 852: the email address sat at 683 and was not on screen at all.

     So the row order is reversed on a phone - the two contact methods and the
     note, then the company's details, then hours and registration. Reference
     information reads perfectly well further down; a phone number does not.

     The rules move with it. Contact now opens the table and takes the strong
     rule and the 40px above it, and Company picks up a hairline to separate it
     from the note above. Working Hours gives its top rule back, because Company
     now sits directly on it and its own bottom rule already does that job - two
     borders meeting would have drawn the line twice. */
  .ptsb-about-contact-list > .ptsb-about-contact-row:nth-child(2) {
    order: 1;
    margin-top: 40px;
    padding-top: 24px;
    padding-bottom: 0;
    border-top: 1px solid var(--ptsb-precision-hairline-strong);
    border-bottom: 0;
  }
  .ptsb-about-contact-list > .ptsb-about-contact-row:nth-child(1) {
    order: 3;
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid var(--ptsb-precision-hairline);
  }
  .ptsb-about-contact-list > .ptsb-about-contact-row:nth-child(3) { order: 4; border-top: 0; }
  .ptsb-about-contact-list > .ptsb-about-contact-row:nth-child(4) { order: 5; }
  /* Between the Contact row and Working Hours, so it lands directly under the
     email address - the last thing in the row above it.

     Shawn's pick: an aside, the sentence set behind a 2px gold rule. No box -
     the contact table is hairlines and text and nothing else, and a filled
     block dropped into it was the one object in a different vocabulary.

     The rule hangs in the margin. The block pulls 14px left of the rail, the
     rule takes 2 of those, 12px of padding brings the text back to the rail -
     so the sentence starts at the same x as the address, the labels and every
     value above it, and only the rule sits outside the column. Indenting the
     text instead would have made this the one thing in the table that does not
     share its left edge.

     The rule is exactly as tall as the sentence: there is no vertical padding
     inside the border, and the distance down to Working Hours is margin, which
     is outside it. Before, 24px of bottom padding had the gold line running on
     under the words into empty space. */
  .ptsb-about-enquiry {
    display: block;
    order: 2;
    margin: 12px 0 24px -14px;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--ptsb-precision-action);
    border-radius: 0;
    background: none;
    color: var(--ptsb-precision-charcoal);
    text-align: left;
  }
  /* The address is the mailto - tapping it opens the mail app exactly as the
     button did. It takes the page's action colour so it reads as the thing to
     use, against the phone numbers which stay as values. */
  .ptsb-about-contact-data a[href^="mailto"] { color: var(--ptsb-precision-action); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  /* 15px, charcoal, capped at 30ch so it breaks where it was written to. */
  .ptsb-about-enquiry__copy { max-width: 30ch; font-size: 15px; line-height: 1.45; }
  /* The block's own button is gone on a phone: it was a second link to the
     same mailto as the address one line above it. */
  .ptsb-about-enquiry .ptsb-precision-button { display: none; }
  .ptsb-about-contact-grid { margin-top: 32px; }
  .ptsb-about-contact-row { grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; padding: 24px 0; }
  .ptsb-about-contact-label { font-size: 20px; }
  .ptsb-about-contact-data strong,
  .ptsb-about-contact-data a,
  .ptsb-about-contact-data address { font-size: 16px; }
  .ptsb-about-map { justify-self: start; }
}