/* Brixwood Builders — About us */

/* One column of reading with the top bar above it. No grid: there is one thing
   to read here and nothing to set beside it, and the page earns its calm from
   the measure and the whitespace rather than from any structure. */
.abt {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.abt-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, the same way the
   enquire page does — the hover-to-accent belongs to the hero alone. */
.abt-top .brand-logo-link { color: var(--ink); }

.abt-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 104px var(--page-pad-x-fluid) 120px;
}
.abt-flow {
  width: 100%;
  max-width: var(--measure-flow);
}

.abt-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-eyebrow);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.abt-head {
  margin: 14px 0 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 the rule reads as
   the start of something instead of a divider hanging under the last
   paragraph. The first one carries the gap under the headline. */
.abt-block {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--hair);
}

.abt-block h2 {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.abt-block p {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}
.abt-block p:last-child { margin-bottom: 0; }

/* The one piece of movement: the page settles rather than arrives. Each part
   takes its turn — a short rise over a long run on the decelerating curve, so
   it settles into place rather than sliding into it, and the gaps widen down
   the page so the order is legible instead of everything moving at once.
   main.css already flattens every animation under prefers-reduced-motion. */
.abt-flow > * {
  animation: abtSettle 620ms var(--ease-out) both;
}
.abt-flow > :nth-child(2) { animation-delay: 90ms; }
.abt-flow > :nth-child(3) { animation-delay: 240ms; }
.abt-flow > :nth-child(4) { animation-delay: 380ms; }

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

/* the copy and the top bar sit over the shared band field in main.css */
.abt-main { position: relative; z-index: 1; }

/* ----------------------------------------------------------- phone (720) */
@media (max-width: 720px) {
  /* Must live here, not in main.css: the base `.abt-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. */
  .abt-top {
    justify-content: center;
    align-items: center;
    padding: 4px var(--page-pad-x-fluid) 0;
    gap: 12px;
  }

  .abt-main { padding: 72px var(--page-pad-x-fluid) 88px; }
  .abt-eyebrow { font-size: 12px; }
  .abt-block { margin-top: 44px; padding-top: 32px; }
  .abt-block h2 { font-size: 19px; margin-bottom: 16px; }
  .abt-block p { font-size: 16px; line-height: 1.68; margin-bottom: 16px; }
}