/* Brixwood Builders — Privacy Policy */

/* A long document rather than a page of copy: ten sections, several of them
   lists. It earns its readability from one narrow measure and a clear step
   between a heading and the body under it, not from any structure. */
.pp {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pp-top {
  /* sticky, not fixed: it stays in the flow, so pinning the bar leaves no hole
     under it to patch. `is-scrolled` (nav-stick.js) paints the strip. */
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
}
/* holds the wordmark at --ink through the global a:hover, as the other pages do */
.pp-top .brand-logo-link { color: var(--ink); }

/* the copy and the top bar sit over the shared band field in main.css */
.pp-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 104px var(--page-pad-x-fluid) 120px;
}
.pp-flow {
  width: 100%;
  max-width: var(--measure-flow);
}

.pp-head {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

/* A hairline opens each section rather than closing it, so a rule reads as the
   start of something instead of hanging under the previous paragraph. */
.pp-block {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--hair);
}

.pp-block h2 {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.pp-block p {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Lists carry their own marker rather than a bullet glyph, so a long run of
   short items reads as a column instead of a speckled block. */
.pp-block ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}
.pp-block li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.pp-block li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--hair-2);
}

/* the two contact lines in the opening section sit as a pair, not as a list
   of points — no marker, and the label stays with its value */
.pp-block ul.pp-contact li { padding-left: 0; }
.pp-block ul.pp-contact li::before { content: none; }

.pp-block a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--hair-2);
  transition: text-decoration-color 0.2s ease;
}
.pp-block a:hover,
.pp-block a:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.pp-block p:last-child,
.pp-block ul:last-child { margin-bottom: 0; }

/* The same settle as the About page: the top of the document arrives in order
   rather than all at once — a short rise over a long run on the decelerating
   curve, with the gaps widening so the order reads.

   Only the parts a visitor has on screen at load take part: the headline and
   the first two sections. The other eight sections of a policy this long are
   below the fold, and giving them delays too would mean someone who scrolls
   straight down arrives at a section that has not appeared yet. They are
   simply there. main.css flattens all of this under prefers-reduced-motion. */
.pp-flow > :nth-child(-n+3) {
  animation: ppSettle 620ms var(--ease-out) both;
}
.pp-flow > :nth-child(2) { animation-delay: 140ms; }
.pp-flow > :nth-child(3) { animation-delay: 300ms; }

@keyframes ppSettle {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- phone (720) */
@media (max-width: 720px) {
  /* Must live here, not in main.css: the base `.pp-top { justify-content:
     center }` is in this file, which loads after main.css, so a
     same-specificity override there loses the cascade and the row stays
     centred — the wordmark ends up under the menu button. */
  .pp-top {
    justify-content: center;
    align-items: center;
    padding: 4px var(--page-pad-x-fluid) 0;
    gap: 12px;
  }
}