/* Pressure Systems service landing pages.
 *
 * The house chrome, the palette, the type scale and the buttons come from
 * /styles.css and are not restated here. This file adds only the components a
 * service landing page needs on top of it, and it takes every colour, radius,
 * shadow and easing from the tokens already declared in that file's :root. That
 * is the point: a service page cannot drift from the house on anything the house
 * has an opinion about, because it never holds its own copy of those values.
 *
 * Shared on purpose. /field/ is the first surface to load it. Further service
 * lines get the same components by linking the same file rather than by growing
 * a second stylesheet that slowly disagrees with this one.
 *
 * Layer numbers here sit inside the ladder /styles.css already establishes:
 * skip link 30, scroll progress 20, sticky header 15, shell 1, background 0.
 * The fixed contact bar takes 14, immediately below the header, so the sticky
 * header always covers it and nothing pokes through.
 */

/* Mobile interface standard I6. /styles.css carries no text-size-adjust, so a
   phone is free to re-scale body text on rotation. That gap is estate-wide and
   pre-existing; it is fixed here for the surfaces that load this file rather
   than by reaching into the house stylesheet in a service-page change. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* Phone floors. Named here because /styles.css predates the mobile interface
     standard and carries no token for them. */
  --svc-tap-min: 44px;
  --svc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --svc-safe-left: env(safe-area-inset-left, 0px);
  --svc-safe-right: env(safe-area-inset-right, 0px);
  --svc-callbar-clearance: 92px;
  --z-svc-callbar: 14;
}

/* ---------- page-level ---------- */

/* Room reserved under the page for the fixed bar, so the bar can never cover
   the last control on the page. Released at the width the bar is hidden. */
body.service-page {
  padding-bottom: calc(var(--svc-callbar-clearance) + var(--svc-safe-bottom));
}

/* The house sets `p { margin: 0 }` and gives its own prose components
 * `line-height: 1.68` through a long grouped selector in /styles.css. Neither
 * reaches a .svc- component, so without these rules the panels run their
 * paragraphs together and the body copy sets at the browser default leading,
 * which is visibly tighter than every other Pressure Systems surface. */
.svc-lede,
.svc-note,
.svc-micro,
.svc-card p,
.svc-boundary p,
.svc-capacity p,
.svc-proximity,
.svc-contrast-usual,
.svc-contrast-instead {
  line-height: 1.6;
}

.svc-card p,
.svc-boundary p,
.svc-capacity p {
  line-height: 1.68;
}

/* Paragraph separation inside the two panels. `p { margin: 0 }` upstream means
 * there is nothing for the :last-child reset below to reset without this. */
.svc-boundary p + p,
.svc-capacity p + p {
  margin-top: 13px;
}

/* .section-head p in /styles.css is more specific than .svc-lede and was
 * quietly winning, so the hero lede rendered at --muted with no tonal step away
 * from the body copy underneath it. Matched here rather than fought with
 * !important. */
.section-head .svc-lede,
.svc-lede {
  font-size: 1.06rem;
  color: var(--cream-soft);
}

.svc-note {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--micro);
}

.svc-micro {
  font-size: 0.88rem;
  color: var(--micro);
}

/* ---------- local grounding callout ---------- */

.svc-proximity {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--rust);
  border-radius: var(--radius-sm);
  background: var(--rust-soft);
  font-size: 0.96rem;
  color: var(--cream-soft);
}

/* ---------- service cards ---------- */

.svc-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 6px;
}

.svc-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.svc-card h3 {
  margin: 0 0 7px;
  font-size: 1.02rem;
  line-height: 1.3;
}

.svc-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.svc-card-index {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}

/* ---------- before and after contrast ---------- */

.svc-contrast {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.svc-contrast-row {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.svc-contrast-usual {
  font-size: 0.89rem;
  color: var(--micro);
  text-decoration: line-through;
  text-decoration-color: rgba(166, 166, 166, 0.45);
  text-underline-offset: 2px;
}

.svc-contrast-instead {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
}

/* ---------- capacity and boundary ---------- */

.svc-capacity {
  margin-top: 6px;
  padding: 22px;
  border: 1px solid rgba(228, 107, 30, 0.34);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(228, 107, 30, 0.08), rgba(228, 107, 30, 0.02));
}

.svc-boundary {
  margin-top: 6px;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
}

.svc-boundary p {
  font-size: 0.96rem;
  color: var(--cream-soft);
}

.svc-capacity p:last-child,
.svc-boundary p:last-child {
  margin-bottom: 0;
}

/* ---------- operator bio ---------- */

/* A face is worth more than any amount of bio copy on a local trade page, so
 * the slot is built and left empty rather than deferred: the operator drops a
 * square image in and uncomments one line. Until then the text simply fills the
 * row, because the image is the flex item that is absent, not a gap held open. */
.svc-bio {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* A head-and-shoulders crop needs the frame a standing figure did not. The image
 * is a cut-out, so its lower edge passes through his chest: unframed that reads
 * as amputation rather than as a crop. Sitting it on a panel with the same
 * border and radius the cards use makes the edge deliberate, and matches the
 * treatment of every other boxed thing on the page.
 *
 * The intrinsic width and height on the element reserve this box before the
 * bytes land, so the bio text beside it cannot reflow as the image arrives. */
.svc-portrait {
  flex: none;
  width: clamp(120px, 16vw, 160px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.svc-bio-text {
  flex: 1 1 260px;
  min-width: 0;
}

.svc-bio-text p + p {
  margin-top: 13px;
}

/* ---------- fixed contact bar (mobile interface standard I3) ---------- */

.svc-callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-svc-callbar);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding:
    10px
    max(12px, var(--svc-safe-right))
    calc(10px + var(--svc-safe-bottom))
    max(12px, var(--svc-safe-left));
  background: var(--panel-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-strong);
}

.svc-callbar .button {
  flex: 1 1 140px;
  min-height: var(--svc-tap-min);
  padding: 10px 14px;
  font-size: 0.95rem;
}

/* ---------- widths ---------- */

@media screen and (min-width: 640px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 900px) {
  body.service-page {
    padding-bottom: 0;
  }

  .svc-callbar {
    display: none;
  }

  .svc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .svc-contrast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- phone floors for the house chrome ---------- */

/* Measured in Chromium at 360, 412, 768 and 1440px on 2026-09-19. The house
 * chrome in /styles.css predates the mobile interface standard and misses I4 at
 * every width: the skip link at 39px, the brand lockup at 40px, the navigation
 * links at 34 to 36px and the footer links at 18px. That gap is estate wide and
 * pre-existing. It is corrected here for the surfaces that load this file, at
 * phone widths only, rather than by editing the house stylesheet from a service
 * page change and moving every other surface at the same time.
 *
 * Above the breakpoint nothing below applies, so a desktop visitor gets the
 * house chrome pixel for pixel. */
@media screen and (max-width: 900px) {
  body.service-page .skip-link,
  body.service-page .site-header .brand-mark,
  body.service-page .site-header .site-nav a,
  body.service-page .site-footer .footer-links a {
    min-height: var(--svc-tap-min);
    display: inline-flex;
    align-items: center;
  }

  /* Reached through the control's own box, never a negative margin (I7). */
  body.service-page .site-header .site-nav a {
    padding-block: 5px;
  }

  body.service-page .site-footer .footer-links a {
    padding-block: 11px;
  }

  /* The hero has to put the call to action on the first screen. At 360px the
   * measured position was 690px down a 780px viewport, which put it underneath
   * the fixed bar. Tightening the first section is the other half of that fix;
   * the shortened lede is the first. */
  body.service-page .section:first-of-type {
    padding-top: 22px;
  }

  body.service-page .svc-lede {
    font-size: 1.02rem;
    line-height: 1.5;
  }
}

/* ---------- the phone header is one row ---------- */

/* Operator ruling, 2026-09-19, on a Chromium render at 360px.
 *
 * The house navigation is four links in a wrapping flex row. At 360px it wrapped
 * to three rows and took about 150px of a 780px screen, which is the same failure
 * the mobile interface standard was written about, arriving from the marketing
 * stylesheet instead of the console one. On a surface whose only job is to get a
 * text sent, that block also put four ways to leave above the first word of copy.
 *
 * So below 720px the navigation is not rendered and the header is the brand
 * lockup alone, which is already a link to pressuresystems.au. Nothing becomes
 * unreachable: the footer carries DispatchTalon, Sales Academy, Contact and the
 * privacy policy on every width, and the footer links meet the touch floor.
 *
 * At 721px and above the house navigation is back, unchanged. A tablet held wide
 * and every laptop see the estate header exactly as the other surfaces draw it. */
@media screen and (max-width: 720px) {
  body.service-page .site-header .site-nav {
    display: none;
  }

  body.service-page .site-header {
    padding: 10px 14px;
  }
}