/* =====================================================================
   OUR STORY - DESKTOP (pulled forward out of Step 10a, Sept 15, 2026).

   Loaded only on the "Our Story" page template (inc/our-story.php).

   ★★ EVERY NUMBER BELOW WAS MEASURED FROM our-story-mockup.pdf, NOT CHOSEN.
   The mockup page is 792pt wide and its header nav is 18pt, which renders on
   the site at 24.4px - so 1pt in the mockup = 4/3 CSS px, and the mockup's
   page is a 1056px-wide browser. At that width the header's content box runs
   from 36px to 1020px, and the mockup's partner rows run from exactly 27.8pt
   to 766.3pt - the same two edges. So every horizontal number here is an
   offset from THE HEADER'S CONTENT EDGE, and the page lines up with the logo
   and the cart above it at any window width.

   Method: pdfplumber for text, rectangles and image boxes; a 150 DPI render,
   read pixel by pixel, for the hearts, the statue, the paws and the labels.
   Where a number is a judgment rather than a measurement, it says so.

   ★ THE BANDS RUN THE FULL BROWSER WIDTH (Damon, QA, Sept 16, 2026). Stopping
   them at the header's 1024px box was built and tried the same day, and he
   preferred full width - do not narrow them again.
   ===================================================================== */

.fdnc-os {
    /* Mockup colors, read from the PDF's own fill values. */
    --fdnc-os-green: #C5E0B4;
    --fdnc-os-yellow: #FFD757;
    --fdnc-os-open-fill: #FFEEBD;
    --fdnc-os-line: #172C51;          /* the nonprofit page's drawer line, same value */

    /* The drawer's columns. ★ THE NAME COLUMN IS SIZED TO THE LONGEST REAL NAME,
       NOT TO THE MOCKUP'S PLACEHOLDER. "Partner 3 name" is 151px at 24px Carlito
       and the mockup starts the description 36px after it; "Mission K9 Rescue"
       is 180px, which in the mockup's column would leave 7px between the name
       and the text. 11px inset + 180px keeps the mockup's 36px gap for every
       partner. */
    --fdnc-os-name-col: 191px;
    --fdnc-os-name-gap: 36px;
    --fdnc-os-chev-col: 70px;         /* description's right edge to the row's: 52.3pt */
    --fdnc-os-logo-w: 180px;          /* the name box, so a logo centers under the name */
    --fdnc-os-logo-h: 79px;           /* the mockup's logo box: 59.5pt */

    /* The photo. ★ 210px WIDE IS A JUDGMENT, not a measurement: the real photo
       is portrait (600 x 776) where the mockup's box was near-square. At the
       box's 227px width the photo would make the green band about 20px taller
       than the mockup; at 210px the band keeps the mockup's height. One number
       to change if the updated mockup says otherwise. */
    --fdnc-os-photo-w: 210px;
    /* ★ A PLAIN 1px BLACK BORDER (Damon, QA, Sept 16, 2026 - 2px first, then
       1px). It replaced two edge treatments that were built and rejected the
       same day - a fade into the green, then a dark vignette. Do not bring
       either back. */
    --fdnc-os-photo-border: 1px solid #000;

    /* ★ SECTION TEXT IS 15% ABOVE THE MOCKUP (QA, Sept 16, 2026): both sections'
       paragraphs ONLY. The quote was raised too and then taken back down to
       match its credit line (Damon, same day). The quote, its credit, the
       caption and the partner list stay at the mockup's sizes. */
    --fdnc-os-section-font: calc(16px * 1.15);

    /* Where #our-partners lands when the home page links to it. The header is
       sticky, so without this the "OUR PARTNERS" label scrolls up under it.
       ⚠ ESTIMATED, not measured - the header's rendered height was not read. */
    --fdnc-os-anchor-offset: 170px;

    font-family: Carlito, Calibri, sans-serif;
    color: #000;
}

/* Own visually-hidden rule rather than Storefront's .screen-reader-text, so
   the headings do not depend on the parent theme (the same call as the RMC
   filter's legend in style.css). */
.fdnc-os-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------
   THE TWO BANDS - full window width. Same breakout as the reviews strip.
   --------------------------------------------------------------------- */

.fdnc-os-band {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* The content box - the header's own: 1024px max, 20px each side. */
.fdnc-os-inner {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.fdnc-os p {
    margin: 0;
}

/* =====================================================================
   ABOUT FD&C - the green band
   ===================================================================== */

.fdnc-os-about {
    /* ⚠ A JUDGMENT: the gap between the header and the band. The label overlaps
       the band's top by 22px, so this must stay comfortably above that. */
    margin-top: 40px;
    background: var(--fdnc-os-green);
}

/* Three columns: the art (143px - text starts at 134.4pt), the text (562px),
   and the photo - the mockup's 227px box (589.0pt to 759.4pt) plus the 8px it
   stops short of the content edge, which is the figure's right padding. */
.fdnc-os-about .fdnc-os-inner {
    display: grid;
    grid-template-columns: 143px minmax(0, 1fr) 235px;
    align-items: stretch;
}

/* The art column is a positioning box that runs the band's full height, so the
   label can sit across its top edge and the statue on its bottom edge. */
.fdnc-os-decor {
    position: relative;
}

/* Storefront gives every img max-width: 100% - harmless here, but pinned so a
   narrow column can never shrink the art. */
.fdnc-os-decor img {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
}

/* 33.1pt to 90.2pt across, top 16.7pt ABOVE the band.
   (Every art rule below is .fdnc-os-decor .x, not .x alone: the img rule above
   is 0,1,1 and would otherwise win on height.) */
.fdnc-os-decor .fdnc-os-about-label {
    top: -22px;
    left: 8px;
    width: 76px;
}

/* 31.7pt to 91.7pt across. ★ ANCHORED TO THE STATUE, NOT THE BAND'S TOP (Damon,
   Sept 16, 2026): the bottom heart sits 35px above the torch (25px, then bumped
   up 10px). The statue is 89px tall and sits on the band's bottom edge, so the
   hearts' bottom is 89 + 35 = 124px up from that edge. Measured from the bottom, the gap holds
   whatever height the text gives the band. (It was top: 59px, from the mockup,
   which drifted apart from the statue once the text grew 15%.) */
.fdnc-os-decor .fdnc-os-hearts {
    bottom: calc(89px + 35px);
    left: 6px;
    width: 80px;
}

/* ★ SEPARATE FROM THE HEARTS ON PURPOSE (Damon, Sept 16, 2026), so mobile can
   place it on its own. Its cut edge sits ON the band's bottom edge - the
   mockup's statue ends at 393.6pt against a band ending at 392.8pt. Sized by
   HEIGHT (66.7pt) so the bottom alignment holds whatever the width works out to.
   ⚠ The hearts' position is computed from this 89px - change both together. */
.fdnc-os-decor .fdnc-os-statue {
    bottom: 0;
    left: 18px;
    width: auto;
    height: 89px;
}

/* The text: 16px from the band's top, 11px from its bottom, 44px short of the
   photo (555.9pt to 589.0pt). 12pt Calibri = 16px in the mockup, raised 15%;
   14.5pt line pitch = 1.21. ★ LEFT-ALIGNED, not justified as in the mockup
   (QA, Sept 16, 2026) - here and everywhere else on the page. */
.fdnc-os-about-text {
    padding: 16px 44px 11px 0;
    font-size: var(--fdnc-os-section-font);
    line-height: 1.21;
    text-align: left;
}

.fdnc-os-about-text p + p {
    margin-top: 13px;                 /* 9.5pt between paragraphs */
}

/* Storefront styles <hr> with a gray background and a bottom margin. */
.fdnc-os-rule {
    height: 1px;
    margin: 15px 0 21px;              /* 10.9pt above, 15.6pt below */
    border: 0;
    background-color: #000;
}

/* Storefront indents blockquotes, rules them on the left and adds quote marks.
   The mockup has none of that - just italic, justified text. */
.fdnc-os-quote {
    margin: 0;
    padding: 0;
    border: 0;
    quotes: none;
    font-style: italic;
    /* The mockup's 16px, matching the credit line below it - NOT the 15%
       section size (Damon, QA, Sept 16, 2026). */
    font-size: 16px;
}

.fdnc-os-quote::before,
.fdnc-os-quote::after {
    content: none;
}

/* Two classes, to out-rank `.fdnc-os p { margin: 0 }`.
   ★ THE NEGATIVE LEFT MARGIN KEEPS THE CREDIT ON ONE LINE. The agreed, accurate
   credit (Sept 16, 2026) is longer than the mockup's and measures 572px at 16px
   Carlito against a 562px column, so it wrapped "pedestal" onto a line of its
   own. Widening the box to the LEFT keeps the right edge on the column's edge.
   ⚠ 13.6px: the mockup's 16px less 15% (Damon, Sept 17, 2026). The section
   text's 15% increase never applied to the credit (Sept 16, 2026). */
.fdnc-os .fdnc-os-quote-credit {
    margin-top: 11px;                 /* 8.5pt below the excerpt */
    margin-left: -24px;
    font-size: 13.6px;
    text-align: right;
}

/* The photo column: centered in the band, left to right and top to bottom. */
.fdnc-os-photo {
    align-self: center;
    margin: 16px 0;
    padding-right: 8px;
    text-align: center;
}

.fdnc-os-photo img {
    display: block;
    width: var(--fdnc-os-photo-w);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    /* border-box, so the border is drawn INSIDE the 210px and the photo's
       outer size does not change. */
    box-sizing: border-box;
    border: var(--fdnc-os-photo-border);
}

/* "Me and Dulci": 10pt, 7.7pt below the photo. */
.fdnc-os-photo figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.2;
}

/* =====================================================================
   OUR PARTNERS - the yellow band
   ===================================================================== */

.fdnc-os-partners {
    margin-top: 44px;                 /* 392.8pt to 425.9pt */
    background: var(--fdnc-os-yellow);
    scroll-margin-top: var(--fdnc-os-anchor-offset);
}

.fdnc-os-partners .fdnc-os-inner {
    padding-top: 28px;                /* band top to the first line: 21.1pt */
    padding-bottom: 33px;             /* last row to the band's bottom: 24.9pt */
}

/* Positioned against the content box's RIGHT edge, the side the art hangs from. */
.fdnc-os-decor--partners {
    position: absolute;
    top: 0;
    right: 20px;                      /* the inner's own padding */
    width: 0;
    height: 0;
}

/* 670.1pt to 757.0pt across, top 16pt ABOVE the band. */
.fdnc-os-decor .fdnc-os-partners-label {
    top: -21px;
    right: 11px;
    width: 116px;
}

/* 657.1pt to 736.3pt across, top 35.9pt below the band's top. */
.fdnc-os-decor .fdnc-os-paws {
    top: 48px;
    right: 38px;
    width: 106px;
}

/* 29.8pt to 623.0pt - stops well short of the paws. */
.fdnc-os-partners-text {
    width: 791px;
    max-width: 100%;
    padding-left: 4px;
    box-sizing: border-box;
    font-size: var(--fdnc-os-section-font);
    line-height: 1.21;
    text-align: left;
}

.fdnc-os-partners-text p + p {
    margin-top: 15px;                 /* 11.5pt */
}

/* ---------------------------------------------------------------------
   "back to top" - under the yellow section, bottom right (Damon, Sept 16,
   2026). Placed from his marked screenshot: the link's right edge about 30px
   in from the partner rows' right edge, just below the band.
   --------------------------------------------------------------------- */

.fdnc-os .fdnc-os-top {
    max-width: 1024px;
    margin: 10px auto 0;
    padding: 0 50px 0 20px;           /* 20px content inset + 30px */
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.21;
    text-align: right;
}

.fdnc-os-top a {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
   THE PARTNER LIST
   --------------------------------------------------------------------- */

/* Storefront indents lists and gives them a bottom margin. */
.fdnc-os-list {
    margin: 31px 0 0;                 /* last text line to the first row: 23.1pt */
    padding: 0;
    list-style: none;
}

.fdnc-os-item {
    display: grid;
    grid-template-columns: var(--fdnc-os-name-col) minmax(0, 1fr) var(--fdnc-os-chev-col);
    column-gap: 0;
    /* auto then 1fr: when the description is taller than name + logo, the extra
       height goes to the logo's row, so the name never moves. */
    grid-template-rows: auto 1fr;
    margin: 0;
    background: #fff;
    border: 2px solid var(--fdnc-os-line);
    border-radius: 7px;
}

/* A home page logo links to its organization's row (#<id>); this keeps the
   row clear of the sticky header when the page lands on it. */
.fdnc-os-item {
    scroll-margin-top: var(--fdnc-os-anchor-offset);
}

.fdnc-os-item + .fdnc-os-item {
    margin-top: 18px;                 /* 44pt pitch less the 30.3pt row */
}

.fdnc-os-item.is-open {
    background: var(--fdnc-os-open-fill);
}

.fdnc-os-item-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    font: inherit;
}

/* ★ A <button> STYLED AS A NON-BUTTON NEEDS FOUR OVERRIDES IN THIS THEME
   (rules.md #105): background and color on :hover/:focus/:active, and the
   pointer-only focus ring removed while the keyboard ring stays. */
.fdnc-os-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;                 /* + the 2px borders = the mockup's 40.4px row */
    padding: 4px 30px 4px 11px;       /* name inset 8.7pt; chevron centered 37px from the edge */
    background: none;
    border: 0;
    border-radius: 5px;
    box-shadow: none;
    text-shadow: none;
    font: inherit;
    font-weight: 400;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.fdnc-os-toggle:hover,
.fdnc-os-toggle:focus,
.fdnc-os-toggle:active {
    background: none;
    color: inherit;
}

.fdnc-os-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* 18pt Calibri, REGULAR weight - the mockup's names are not bold. */
.fdnc-os-name {
    font-size: 24px;
    line-height: 1.21;
}

/* ★ AN OPEN DRAWER'S NAME WRAPS INSIDE THE NAME COLUMN (Damon, Sep 24, 2026).
   The description starts beside the name, so a name wider than the column ran
   under it: "Semper K9 Assistance Dogs" is ~270px against a 180px box. Capped
   at the logo's width it breaks to two lines, and the logo row moves down with
   it. OPEN ONLY, so every closed row stays one line; DESKTOP ONLY, because the
   phone drawer puts the description below the name, not beside it. */
@media (min-width: 1024px) {
    .fdnc-os-item.is-open .fdnc-os-name {
        max-width: var(--fdnc-os-logo-w);
    }
}

/* U+276F, rotated - the nonprofit page's chevron, so the two lists match. */
.fdnc-os-chevron::before {
    content: "\276F";
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 120ms ease;
}

.fdnc-os-toggle[aria-expanded="true"] .fdnc-os-chevron::before {
    transform: rotate(-90deg);
}

/* ★ display: contents lets the logo and the text be placed in the ITEM's grid.
   ⚠ And because this rule gives the panel a display value, the [hidden] guard
   below is load-bearing (rules.md #104) - without it a closed panel shows. */
.fdnc-os-panel {
    display: contents;
}

.fdnc-os-panel[hidden] {
    display: none;
}

/* Under the name, centered on a name-sized box: logo top 34.1pt below the
   row's top, 22.7pt of space beneath it. Contained, so every logo fits the
   same box whatever its shape, wide or square. */
.fdnc-os-logo {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: var(--fdnc-os-logo-w);
    max-width: none;
    height: var(--fdnc-os-logo-h);
    margin: 4px 0 23px 11px;
    object-fit: contain;
    object-position: center center;
}

/* ★ TWO LOGOS SIZED UP (Damon, QA, Sept 16, 2026). A contained logo is capped
   by whichever side of the box it reaches first; these two are square-ish
   (Paws of War is 1:1, Mission K9 is about 5:4) so they hit the 79px height
   and rendered far smaller than the wide K9s for Warriors mark. Taller box,
   same width - their open drawers grow by about 26px. */
.fdnc-os-logo.fdnc-os-logo--mission-k9-rescue,
.fdnc-os-logo.fdnc-os-logo--paws-of-war {
    height: 105px;
}

/* Beside the name and the logo, from the row's top. It sits ABOVE the button's
   area, so clicking the text does not close the drawer - the name, the chevron
   and the empty space around them do. */
.fdnc-os-desc {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-left: var(--fdnc-os-name-gap);
    padding: 12px 0 12px;
}

/* 12.5pt on a 15pt pitch. */
.fdnc-os-desc-text {
    font-size: 17px;
    line-height: 1.2;
    text-align: left;
}

/* 12pt, centered under the description, 17pt below it. Two classes, to
   out-rank `.fdnc-os p { margin: 0 }`. */
.fdnc-os .fdnc-os-link {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.21;
    text-align: center;
}

.fdnc-os-link a {
    color: inherit;
    text-decoration: none;
}

.fdnc-os-link a:hover,
.fdnc-os-link a:focus-visible {
    text-decoration: underline;
}

/* =====================================================================
   ★★ OUR STORY - PHONES (below 1024px). Built Sept 17, 2026 from
   our-story-mobile-mockup.pdf, whose four pages are ONE continuous page
   (Damon). Everything above this block is desktop and is untouched by it.

   SCALE: the mockup's phone frame is 484.5pt wide and Damon hand-measured it
   against his phone, so 484.5pt = 393px (iPhone 16): 1pt = 0.811px. Every
   number below is a mockup measurement at that scale unless it says otherwise.
   Damon: "roughly the layout of the copy as seen in the mockup. It doesn't
   have to be exact."

   ★ TEXT IS 24px ON PHONES (Damon: "I don't want tiny text. Give it a shot at
   24. If it's too big, we can resize.") - larger than desktop's 18.4px. The
   size is one custom property, --fdnc-os-m-text.

   COPY IS THE SETTLED COPY, NOT THE MOCKUP'S: the corrected Lazarus quote and
   credit, italics on FD&C only, "to that!" not italic - all settled on desktop.
   ADDED OVER THE MOCKUP, AT DAMON'S CALL: the rule above the quote, and "back
   to top" below the yellow section.

   HOW THE GREEN SECTION IS REORDERED WITHOUT NEW MARKUP: on phones the art
   wrapper and the text wrapper become display: contents, so their children -
   the three paragraphs, the rule, the quote, the credit, the hearts, the
   statue - are placed directly in one two-column grid, in the mockup's order:
     paragraph 1 (label floated into its first lines)
     hearts | photo
     paragraph 2, paragraph 3, rule, quote
     statue | credit
   ===================================================================== */

@media (max-width: 1023.98px) {

    .fdnc-os {
        /* 24px (the mockup's 30pt) less 15% (Damon, Sept 17, 2026, after seeing
           24px on his iPhone). Paragraphs in both sections and the partner
           descriptions; the quote and credit are cut 15% on their own lines. */
        --fdnc-os-m-text: 20.4px;
        --fdnc-os-m-photo-w: min(241px, 62vw); /* 297.5pt box width */
        /* The mobile header is shorter than desktop's, so the anchor offset is
           too - the home page's own mobile anchor uses the same 110px. */
        --fdnc-os-anchor-offset: 110px;
    }

    /* ----- GREEN: ABOUT FD&C ------------------------------------------ */

    .fdnc-os-about {
        margin-top: 27px;                   /* header to band: 33.9pt */
    }

    /* ⚠ THE SECOND COLUMN IS THE PHOTO'S WIDTH, NOT auto. As auto, the credit
       (which shares that column further down) sized it to its whole sentence
       and squeezed the hearts and the statue out of the first column. */
    .fdnc-os-about .fdnc-os-inner {
        grid-template-columns: minmax(0, 1fr) var(--fdnc-os-m-photo-w);
        align-items: start;
        padding: 16px 16px 0;               /* statue sits on the bottom edge */
    }

    .fdnc-os-about .fdnc-os-decor,
    .fdnc-os-about .fdnc-os-about-text {
        display: contents;
    }

    .fdnc-os-about-text > p,
    .fdnc-os-about-text > .fdnc-os-quote,
    .fdnc-os-about-text > .fdnc-os-rule {
        grid-column: 1 / -1;
    }

    .fdnc-os-about-text > p:nth-of-type(1) { grid-row: 1; }
    .fdnc-os-decor .fdnc-os-hearts         { grid-row: 2; grid-column: 1; }
    .fdnc-os-photo                         { grid-row: 2; grid-column: 2; }
    .fdnc-os-about-text > p:nth-of-type(2) { grid-row: 3; }
    .fdnc-os-about-text > p:nth-of-type(3) { grid-row: 4; }
    .fdnc-os-about-text > .fdnc-os-rule    { grid-row: 5; }
    .fdnc-os-about-text > .fdnc-os-quote   { grid-row: 6; }
    .fdnc-os-decor .fdnc-os-statue         { grid-row: 7; grid-column: 1; }
    .fdnc-os .fdnc-os-quote-credit         { grid-row: 7; grid-column: 2; }

    .fdnc-os-about-text > p {
        font-size: var(--fdnc-os-m-text);
        line-height: 1.2;                   /* 36pt pitch */
        text-align: left;
    }

    /* Paragraph 1: its first two lines make room for the label. A float with a
       fixed size does it - 127px wide (the text starts 143px in), 45px tall
       (two lines at 24.5px, not three). The label itself is positioned on the
       band. ⚠ Tied to the text size: re-check if --fdnc-os-m-text changes. */
    .fdnc-os-about-text > p:nth-of-type(1)::before {
        content: "";
        float: left;
        width: 127px;
        height: 45px;
    }

    .fdnc-os-about-text > p:nth-of-type(3) {
        margin-top: 15px;                   /* 18pt extra between paragraphs */
    }

    .fdnc-os-about-text > p:nth-of-type(2) {
        margin-top: 27px;                   /* caption to paragraph: 33pt */
    }

    /* The art on phones: the label stays positioned (on the band, via the
       inner box), the hearts and statue join the grid. */
    .fdnc-os-decor .fdnc-os-about-label {
        top: -11px;                         /* 13.9pt above the band */
        left: 22px;
        width: 87px;
    }

    .fdnc-os-decor .fdnc-os-hearts,
    .fdnc-os-decor .fdnc-os-statue {
        position: static;
    }

    /* 100px wide, 12px from the band's edge, centered on the photo beside it
       (photo 241px wide = 312px tall; hearts 200px tall; (312 - 200) / 2). */
    .fdnc-os-decor .fdnc-os-hearts {
        bottom: auto;
        width: 100px;
        margin: calc((var(--fdnc-os-m-photo-w) * 776 / 600 - 200px) / 2 + 20px) 0 0 -4px;
    }

    .fdnc-os-photo {
        align-self: start;
        margin: 20px -4px 0 0;              /* 25pt below paragraph 1; 12px from the edge */
        padding: 0;
    }

    .fdnc-os-photo img {
        width: var(--fdnc-os-m-photo-w);
    }

    .fdnc-os-photo figcaption {
        margin-top: 21px;
        font-size: 19.5px;                  /* 24pt */
    }

    .fdnc-os-rule {
        margin: 15px 0;
    }

    .fdnc-os-quote {
        padding: 0 6px 0 10px;              /* indented from the paragraphs */
    }

    .fdnc-os-quote p {
        font-size: 19.1px;                  /* 28pt = 22.5px, less 15% */
        line-height: 1.2;
        text-align: left;
    }

    /* Statue on the band's bottom edge, 15px in; the credit beside it, bottom-
       aligned, 10px above the edge. */
    .fdnc-os-decor .fdnc-os-statue {
        align-self: end;
        height: 118px;                      /* 145pt */
        margin: 20px 0 0 -1px;
    }

    .fdnc-os .fdnc-os-quote-credit {
        align-self: end;
        margin: 20px 0 10px 10px;
        font-size: 17.85px;                 /* 26pt = 21px, less 15% */
        line-height: 1.19;
        text-align: left;
    }

    /* ----- YELLOW: OUR PARTNERS --------------------------------------- */

    .fdnc-os-partners {
        margin-top: 43px;                   /* 53.4pt */
    }

    .fdnc-os-partners .fdnc-os-inner {
        padding: 10px 16px 30px;
    }

    .fdnc-os-decor--partners {
        right: 16px;
    }

    .fdnc-os-decor .fdnc-os-partners-label {
        top: -26px;                         /* 32pt above the band */
        right: 1px;
        width: 133px;
    }

    /* The paws sit beside the END of paragraph 1, not beside its opening.
       They are positioned on the band; the text makes room for them with ONE
       float whose top 360px is cut out of its shape (shape-outside: inset), so
       the first lines run full width and only the lines beside the paws wrap.
       ⚠ 200px down the paragraph puts them beside its last few lines at the
       20.4px text size, on a 393px phone (the mockup's 360px was for 24px text).
       On a wider phone the paragraph is shorter and the second paragraph may wrap
       around the float's lower edge. Re-fit if the text size changes again. */
    .fdnc-os-decor .fdnc-os-paws {
        top: calc(10px + 200px);
        right: -2px;
        width: 120px;
    }

    .fdnc-os-partners-text {
        width: auto;
        padding-left: 0;
        font-size: var(--fdnc-os-m-text);
        line-height: 1.2;
    }

    /* The first two lines make room for the "OUR PARTNERS" label, which hangs
       over the band's top-right corner: a 140 x 50px float, ahead of the text. */
    .fdnc-os-partners-text::before {
        content: "";
        float: right;
        width: 140px;
        height: 45px;                       /* two lines at 24.5px */
    }

    /* The paws float. clear: right puts it BELOW the label's float (45px down),
       so its cut-out is 200 - 45 = 155px; without the clear it would sit to the
       LEFT of the label's float and wrap the wrong lines. */
    .fdnc-os-partners-text p:first-child::before {
        content: "";
        float: right;
        clear: right;
        width: 130px;
        height: calc(155px + 127px);
        shape-outside: inset(155px 0 0 0);
    }

    .fdnc-os-partners-text p + p {
        margin-top: 27px;                   /* 33pt */
    }

    .fdnc-os-list {
        margin: 31px -6px 0;                /* rows sit 10px from the band's edges */
    }

    .fdnc-os-item {
        display: block;
    }

    .fdnc-os-item + .fdnc-os-item {
        margin-top: 14px;                   /* 17.1pt */
    }

    .fdnc-os-toggle {
        min-height: 31px;
        padding: 1px 18px 1px 15px;
    }

    .fdnc-os-name {
        /* 32px (the mockup's 40pt) less 15% (Damon, Sept 17, 2026, on his iPhone). */
        font-size: 27.2px;
        line-height: 1.05;
    }

    .fdnc-os-chevron::before {
        font-size: 18px;
    }

    .fdnc-os-item.is-open .fdnc-os-toggle {
        padding-top: 10px;
    }

    /* The open drawer: logo on the left with the description wrapping around
       it, then the link, centered. */
    .fdnc-os-panel {
        display: block;
        padding: 0 20px 12px;
    }

    .fdnc-os-panel::after {
        content: "";
        display: block;
        clear: both;
    }

    .fdnc-os-logo,
    .fdnc-os-logo.fdnc-os-logo--mission-k9-rescue,
    .fdnc-os-logo.fdnc-os-logo--paws-of-war {
        float: left;
        width: 100px;
        height: 95px;                       /* 118pt */
        margin: 10px 25px 4px 18px;
    }

    .fdnc-os-desc {
        position: static;
        margin: 0;
        padding: 5px 0 0;
    }

    .fdnc-os-desc-text {
        font-size: var(--fdnc-os-m-text);
        line-height: 1.2;
    }

    .fdnc-os .fdnc-os-link {
        clear: both;
        margin-top: 23px;
        font-size: 16px;                    /* 20pt */
    }

    /* ----- back to top ------------------------------------------------ */

    .fdnc-os .fdnc-os-top {
        padding: 0 16px;
        font-size: 18px;
    }
}