/* =============================================================================
   BuildX -- ADU Project Pillar Page
   /adu-projects/<slug>/  --  templates/project.php
   Added 2026-08-26.

   Adapted from Josh's Copeland draft, with three deliberate departures:

   1. NO :root BLOCK. global.css owns the brand tokens (added 2026-08-24 after
      three pages each invented their own near-black and left a visible seam
      under the header). This sheet CONSUMES var(--bx-black) / var(--bx-gold)
      and defines only the gold tints that exist nowhere else.
   2. NO FONT IMPORT. The draft pulled Inter from fonts.googleapis.com with two
      preconnects. Fonts are self-hosted site-wide; the system stack in
      global.css governs and those third-party round trips are removed.
   3. NO FIXED PIXEL WIDTH ON THE CENTERED COLUMN. The draft used
      max-width:1140px. Aaron's display is 2560px wide -- a fixed cap tuned at
      1440 leaves ~760px of dead white space per side there (learned the hard
      way on the Project Clarity hero, 2026-08-25). Widths use clamp() so the
      layout scales instead of stranding itself.

   US English throughout. ASCII only -- no em-dashes, no Unicode dashes.
   ============================================================================= */

.page-project-pillar {
    --pp-border: #E5E5E5;
    --pp-gold-soft: #F7D08A;
    --pp-gold-tint: #FFF7E8;
    --pp-shadow: 0 18px 44px -26px rgba(17, 17, 17, .30);

    /* THE RAIL -- ONE WIDTH, READ BY EVERY BLOCK THAT MUST AGREE.
       Aaron's requirement is that the hero cards, the pull quote, the review and
       the story block all share an edge. Three matching max-widths would drift
       the first time one was edited; a single custom property cannot. Change
       this one value and all four move together. */
    --pp-rail: clamp(980px, 72vw, 1500px);
}

/* MATCHES global.css .container EXACTLY (width:90%, no max-width).

   Measured at 2560 before this was fixed: .container and the breadcrumb bar sat
   at left:128 width:2304, while this wrapper sat at left:500 width:1560. The
   breadcrumb trail and the content beneath it were visibly out of line by 372px,
   and the page filled 61% of Aaron's screen. Structural elements align with the
   site's own gutter; READING WIDTH is then constrained further in, on the blocks
   that actually hold text, rather than by narrowing the whole page. */
.page-project-pillar .pp-wrap {
    width: 90%;
    margin: 0 auto;
}

/* CONTENT CAP -- separate from the gutter above.

   The wrapper aligns to the site gutter so nothing looks out of line, but the
   CONTENT inside it still needs a ceiling: at 2560 an uncapped container is
   2304px, which turns the hero video into a 2304x1296 wall and spreads three
   highlight cards so thin the text looks lost. Capping the content while keeping
   the wrapper aligned gives both -- correct alignment AND a sane measure.

   Applied to the blocks that hold content, not to the hero band or the section
   backgrounds, so the full-bleed color still runs edge to edge. */
/* EVERY BLOCK ON THE RAIL. All four read the same custom property, so "the
   same width as the cards" is structural rather than three numbers that happen
   to match today. (Aaron, 2026-08-26.) */
.pp-cards,
.pp-pull,
.pp-review,
.pp-article,
.pp-body > .pp-wrap > .pp-pill {
    max-width: var(--pp-rail);
    margin-left: auto;
    margin-right: auto;
}

/* The former hero-video cap is gone: the primary video is now a hero COLUMN,
   already far narrower than its 1280px source at every breakpoint, so there is
   nothing left to cap. The facade resolution test still guards against
   upscaling if that ever changes. */

/* The pill is an inline badge; centering its box would strand it mid-row. */
.pp-body > .pp-wrap > .pp-pill {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ---- HERO ----------------------------------------------------------------- */
.pp-hero {
    background: linear-gradient(160deg, #fbf7ef, #ffffff 62%);
    border-bottom: 1px solid var(--pp-border);
    padding: clamp(40px, 4vw, 64px) 0 clamp(44px, 4.5vw, 72px);
    text-align: center;
}

/* ---- HERO SPLIT: copy left, video right (Aaron, 2026-08-26) ----------------
   The video moved up out of the body and became the hero's second column.
   `align-items: center` rather than `start` so the copy block and the video
   read as a matched pair regardless of which is taller -- the headline wraps to
   a different number of lines at every breakpoint, so anchoring to the top left
   one of them visibly stranded. */
.pp-hero--split .pp-hero__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 3.4vw, 56px);
    align-items: center;
    text-align: left;
    max-width: var(--pp-rail);
    margin: 0 auto;
}

.pp-hero--split .pp-hero__text h1,
.pp-hero--split .pp-hero__text .pp-hero__sub {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.pp-hero__video {
    margin: 0;
    min-width: 0;
}

.pp-hero__video .pp-cap {
    text-align: left;
}

/* HARMONIZE ON SMALLER SCREENS.
   Below 900px the two columns stack, and the whole hero returns to the centered
   treatment it had before -- a left-aligned headline over a full-width video
   reads as unbalanced on a phone, where there is no second column to balance
   against. So the split is a DESKTOP behavior, not a permanent one. */
@media (max-width: 900px) {
    .pp-hero--split .pp-hero__top {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 26px;
    }

    .pp-hero--split .pp-hero__text h1 {
        margin-left: auto;
        margin-right: auto;
    }

    .pp-hero--split .pp-hero__text .pp-hero__sub {
        margin-left: auto;
        margin-right: auto;
    }

    .pp-hero__video .pp-cap {
        text-align: center;
    }
}

.pp-kicker {
    font-weight: 800;
    font-size: 0.8125rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bx-gold-deep);
    margin: 0 0 16px;
}

.pp-hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 22ch;
    margin: 0 auto 18px;
}

.pp-hero__sub {
    font-size: clamp(1rem, 1.2vw, 1.1875rem);
    color: var(--bx-text-gray);
    max-width: 62ch;
    margin: 0 auto 18px;
    line-height: 1.5;
}

.pp-hero__told {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--bx-text-dark);
    margin: 0;
}

/* ---- HIGHLIGHT CARDS ------------------------------------------------------ */
.pp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 28px auto 0;
    text-align: left;
}

.pp-card {
    background: var(--bx-white);
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    padding: 20px 20px 18px;
    box-shadow: var(--pp-shadow);
}

.pp-card__chip {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--pp-gold-tint);
    border: 1px solid var(--pp-gold-soft);
    display: grid;
    place-items: center;
    color: var(--bx-gold-deep);
    margin-bottom: 12px;
}

.pp-card__chip svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp-card b {
    display: block;
    font-weight: 800;
    font-size: 1.09rem;
    line-height: 1.25;
    margin: 0 0 7px;
    color: var(--bx-black);
}

.pp-card span {
    font-size: 0.9rem;
    color: var(--bx-text-dark);
    line-height: 1.5;
    display: block;
}

/* ---- BODY ----------------------------------------------------------------- */
.pp-body {
    padding: clamp(36px, 3.4vw, 54px) 0 clamp(44px, 4.2vw, 66px);
}

/* ---- VIDEO + FRAME -------------------------------------------------------- */
.pp-video {
    margin: 0 0 26px;
}

.pp-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow);
    background: var(--bx-black);
    aspect-ratio: 16 / 9;
}

.pp-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pp-cap {
    font-size: 0.875rem;
    color: var(--bx-text-gray);
    text-align: center;
    margin: 10px 0 0;
}

.pp-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0 8px;
}

.pp-pair .pp-video {
    margin: 0;
}

/* ---- LITE VIDEO FACADE ------------------------------------------------------
   A real link + real 1280x720 <img>; JS swaps in the player on click. Replaced
   three eager iframes that cost 12.7 MB (79% of page weight) and, in the small
   frames, made the player fall back to a 120x90 poster. */
.pp-lite {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
    background: var(--bx-black);
}

.pp-lite img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.pp-lite__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    pointer-events: none;
    transition: transform .15s ease;
}

.pp-lite__play svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* YouTube red at rest, brand gold on hover -- it is our page, not theirs. */
.pp-lite__play .pp-lite__bg {
    fill: #212121;
    fill-opacity: .8;
    transition: fill .15s ease, fill-opacity .15s ease;
}

.pp-lite:hover .pp-lite__play,
.pp-lite:focus-visible .pp-lite__play {
    transform: translate(-50%, -50%) scale(1.06);
}

.pp-lite:hover .pp-lite__play .pp-lite__bg,
.pp-lite:focus-visible .pp-lite__play .pp-lite__bg {
    fill: var(--bx-gold-deep);
    fill-opacity: 1;
}

.pp-lite:focus-visible {
    outline: 3px solid var(--bx-gold);
    outline-offset: 2px;
}

/* The swapped-in player inherits the frame box. */
.pp-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- PULL QUOTE + REVIEW -------------------------------------------------- */
.pp-pull {
    margin: clamp(28px, 3vw, 42px) auto 26px;
    text-align: center;
}

/* The quote line itself still needs a readable measure -- a 1500px-wide pull
   quote is a banner, not a sentence. The BLOCK spans the rail (so it aligns
   with the cards, which is what Aaron asked for) while the text inside is
   constrained and centered within it. Width and measure are two different
   jobs. */
.pp-pull p {
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
}

.pp-pull p {
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2.125rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--bx-black);
    margin: 0 auto 10px;
}

.pp-pull cite {
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--bx-gold-deep);
}

.pp-review {
    background: var(--bx-white);
    border: 1px solid var(--pp-border);
    border-left: 4px solid var(--bx-gold);
    border-radius: 16px;
    /* Vertical padding unchanged -- Aaron confirmed top and bottom are fine.
       Horizontal trimmed slightly so the text reaches toward the edges.

       LEFT IS 3px LESS ON PURPOSE. The gold accent is a 4px border-left against
       1px elsewhere, so an equal padding value renders a 3px WIDER gap on the
       left. Subtracting the extra border thickness makes the VISIBLE inset
       match on both sides. (Measured 36 vs 33 before this.) */
    padding: clamp(22px, 2.2vw, 32px) clamp(22px, 1.8vw, 32px);
    padding-left: calc(clamp(22px, 1.8vw, 32px) - 3px);
    box-shadow: var(--pp-shadow);
    margin: 0 auto clamp(30px, 3.4vw, 46px);
}

/* Same split as the pull quote: the CARD spans the rail, the paragraph inside
   keeps a readable measure so a long Google review does not run to 1500px.

   CENTERED, not left-anchored. Measured after the first pass: at 2560 the text
   filled just 52% of the card and the right half sat empty, which reads as a
   broken card rather than a deliberate measure. The cap is the right call; the
   alignment was not. */
/* NO MEASURE CAP HERE, DELIBERATELY (Aaron, 2026-08-26).
   This card is a pull-out TESTIMONIAL, not body copy -- it is read once, as a
   block, so wide-and-short is the right treatment and a tall multi-line column
   is not. An earlier 88ch cap was a typographic reflex borrowed from the
   article body; it made the card unnecessarily tall and left the text sitting
   in a narrow channel inside a wide card.

   The text now fills the card's content box, and the CARD'S OWN PADDING is the
   small left/right inset. One source for that gap instead of a cap fighting a
   padding. */
.pp-review .pp-review__meta {
    display: block;
}

/* *** THE `auto` HERE IS LOAD-BEARING -- DO NOT WRITE `0`. ***
   This is the ONLY declaration that controls this paragraph's horizontal
   margins. An earlier attempt put `margin-left/right: auto` on the rule above
   and it silently did nothing, because this shorthand comes later at equal
   specificity and rewrites all four sides -- the text stayed pinned left at 52%
   of a 1500px card. Second time this exact trap bit on this page today (the CTA
   band was the first). Keep centering IN the shorthand. */
.pp-review p {
    font-size: 1.03rem;
    /* Fills the card. The auto margins are harmless now that there is no
       max-width to center against, and they are kept in the SHORTHAND on
       purpose: a margin longhand here would be silently overwritten by this
       very declaration, which is the trap that bit twice on this page today. */
    margin: 0 auto 8px;
}

.pp-review__meta {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bx-text-gray);
}

/* ---- SECTION PILL --------------------------------------------------------- */
.pp-pill {
    display: inline-block;
    font-weight: 800;
    font-size: 0.8125rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bx-gold-deep);
    background: var(--pp-gold-tint);
    border: 1px solid var(--pp-gold-soft);
    padding: 5px 12px;
    border-radius: 999px;
    margin: 0 0 20px;
}

/* ---- ARTICLE GRID --------------------------------------------------------- */
/* The story column IS the reading measure, rather than being a wide column with
   a narrower paragraph floating inside it. Capping the <p> instead left a ~380px
   band of dead space between the text and the sidebar at 2560 -- the text looked
   stranded even though the measure itself was correct. Sizing the COLUMN means
   the grid centers as a unit and the gap goes to the outside where it belongs. */
/* THE STORY BLOCK IS CENTERED ON PURPOSE, AT EVERY WIDTH.
   Aaron asked for the body copy and the floating info box, TOGETHER, centered
   below the rail. `justify-content: center` was already here and produced equal
   204px gutters at 2560 -- but at 1440 the gutters measured 0/0, meaning the
   pair was merely filling the rail and only looked centered where the
   arithmetic happened to agree.

   `width: fit-content` + auto margins centers the PAIR as a unit regardless of
   how much rail is left over, so the behavior is the same at 1440 as at 2560.
   Capped at the rail so it can never exceed the blocks above it. */
.pp-article {
    display: grid;
    grid-template-columns: minmax(0, 76ch) clamp(300px, 24vw, 380px);
    gap: clamp(28px, 3vw, 56px);
    justify-content: center;
    align-items: start;
    width: fit-content;
    max-width: var(--pp-rail);
    margin-left: auto;
    margin-right: auto;
}

.pp-story h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: clamp(30px, 3vw, 44px) 0 14px;
}

.pp-story > *:first-child {
    margin-top: 0;
}

.pp-story p {
    font-size: 1.0625rem;
    line-height: 1.65;
}

.pp-story a,
.pp-local a {
    color: var(--bx-gold-deep);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--pp-gold-soft);
    transition: border-color .15s;
}

.pp-story a:hover,
.pp-local a:hover {
    border-color: var(--bx-gold-deep);
}

/* ---- INLINE CALLOUT QUOTE ------------------------------------------------- */
.pp-bq {
    background: var(--pp-gold-tint);
    border: 1px solid var(--pp-gold-soft);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 22px 0;
}

.pp-bq p {
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.45;
    color: var(--bx-black);
    margin: 0 0 8px;
    max-width: none;
}

.pp-bq cite {
    font-style: normal;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bx-gold-deep);
}

/* ---- LOCAL / NEXT-STEP BOX ------------------------------------------------ */
.pp-local {
    background: var(--pp-gold-tint);
    border: 1px solid var(--pp-gold-soft);
    border-radius: 14px;
    padding: 22px 24px;
    margin: clamp(30px, 3.4vw, 44px) 0 0;
}

.pp-local h2 {
    font-size: 1.375rem;
    margin: 0 0 8px;
}

.pp-local p {
    margin: 0 0 0.6em;
    font-size: 1.03rem;
}

.pp-local p:last-child {
    margin-bottom: 0;
}

/* ---- FAQ ------------------------------------------------------------------ */
.pp-faq {
    margin-top: clamp(32px, 3.4vw, 46px);
}

.pp-faq h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    margin: 0 0 12px;
}

.pp-faq h3 {
    font-weight: 700;
    font-size: 1.1875rem;
    color: var(--bx-black);
    line-height: 1.3;
    padding: 18px 0 6px;
    border-top: 1px solid var(--pp-border);
    margin: 0;
}

.pp-faq h3:first-of-type {
    border-top: 0;
    padding-top: 6px;
}

.pp-faq p {
    color: var(--bx-text-dark);
    font-size: 1.03rem;
    padding: 0 0 14px;
    margin: 0;
}

/* ---- AT A GLANCE (sticky sidebar) ----------------------------------------- */
/* STICKY OFFSET MUST CLEAR THE HEADER.
   `.header` is position:sticky, top:0, height 70px, z-index 1000 -- and `top`
   on a sticky element is measured from the VIEWPORT, not from the content
   below the header. The previous 24px therefore pinned this card 46px INSIDE
   the header, so its top rows were covered on scroll.

   100px is the site's existing answer to exactly this problem, not a number I
   picked: .fp-sidebar (floor-plans.css) and .lc-sidebar
   (learning-center-page.css) both use top:100px -- the 70px header plus 30px of
   breathing room. Keep these three in step if the header height ever changes. */
.pp-glance {
    background: var(--bx-white);
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--pp-shadow);
    position: sticky;
    top: 100px;
}

/* Same root cause, prevented cheaply: an in-page anchor would otherwise land
   underneath the sticky header too. */
.page-project-pillar :target,
.pp-story h2[id] {
    scroll-margin-top: 100px;
}

.pp-glance h3 {
    font-weight: 800;
    font-size: 0.8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bx-gold-deep);
    margin: 0 0 12px;
}

.pp-glance__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--pp-border);
}

.pp-glance__row:first-of-type {
    border-top: 0;
}

.pp-glance svg {
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 2px;
    fill: none;
    stroke: var(--bx-gold-deep);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp-glance span {
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--bx-text-dark);
}

.pp-glance b {
    font-weight: 800;
    color: var(--bx-black);
}

/* ---- CTA BAND ------------------------------------------------------------- */
/* CTA BAND -- centered, and sharing an edge with Meet the Builder.
   1260px is not arbitrary: it is `.buz-bio`'s own max-width (includes/buz-bio.php),
   so the band and the bio block below it line up exactly rather than both being
   loosely centered. Verified at 2560 (both left=650) and 1440 (both left=90).

   *** THE `auto` IN THE SHORTHAND BELOW IS LEAD-BEARING -- DO NOT WRITE `0`. ***
   This band was previously listed in the shared centering block above with
   margin-left/right:auto, and it still rendered hard left with a computed
   ml=0px. Cause: this rule comes LATER in the file and its `margin` SHORTHAND
   rewrote all four sides, silently beating the longhand at equal specificity.
   Keeping the centering in the shorthand means one rule owns the box and there
   is nothing for a later shorthand to quietly undo. */
.pp-band {
    background: var(--bx-black);
    color: #ececec;
    border-radius: 24px;
    padding: clamp(34px, 3.6vw, 50px) clamp(24px, 3vw, 42px);
    box-shadow: var(--pp-shadow);
    position: relative;
    overflow: hidden;
    max-width: 1260px;
    margin: clamp(40px, 4vw, 56px) auto 0;
}

.pp-band::after {
    content: "";
    position: absolute;
    left: -90px;
    bottom: -110px;
    width: 300px;
    height: 300px;
    border: 2px solid #ffffff12;
    border-radius: 50%;
}

.pp-band > p {
    color: #cfcfcf;
    max-width: 54ch;
    font-size: 1.125rem;
    margin: 0 0 26px;
    position: relative;
}

.pp-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    position: relative;
}

.pp-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    background: var(--bx-gold);
    color: var(--bx-black);
    border-radius: 14px;
    padding: 20px 22px;
    font-weight: 800;
    font-size: 1.125rem;
    transition: transform .18s, box-shadow .18s;
}

.pp-btn small {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(17, 17, 17, .62);
    margin-top: 3px;
}

.pp-btn__arrow {
    font-size: 1.375rem;
    flex: none;
    transition: transform .18s;
}

.pp-btn--alt {
    background: #fff;
}

.pp-btn--alt small {
    color: var(--bx-text-gray);
}

.pp-btn--alt .pp-btn__arrow {
    color: var(--bx-gold-deep);
}

.pp-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -16px #000a;
    color: var(--bx-black);
}

.pp-btn:hover .pp-btn__arrow {
    transform: translateX(4px);
}

/* ---- RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1000px) {
    .pp-article {
        grid-template-columns: 1fr;
    }

    .pp-glance {
        position: static;
    }
}

@media (max-width: 860px) {
    .pp-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .pp-pair,
    .pp-btns {
        grid-template-columns: 1fr;
    }
}

/* ---- PRINT ---------------------------------------------------------------- */
@media print {
    .pp-hero,
    .pp-band,
    .pp-bq,
    .pp-local {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pp-card,
    .pp-bq,
    .pp-review,
    .pp-glance {
        break-inside: avoid;
    }

    .pp-glance {
        position: static;
    }
}