/* ===================================================================
   /company-profile — corporate reference page
   -------------------------------------------------------------------
   Only the three things the shared system in site.css does not already
   provide: the brand identity plate in the hero, the office address
   block, and the generations list.

   Everything else on the page is reused from site.css unchanged —
   .pd-toc (jump nav pills, 40px tall, own focus ring), .pd-facts
   (definition rows), .pd-contact (48px tap targets), .spec-table,
   .stat-band, .source-note, .card-grid, .s-card, .faq-list, .cta-band.
   Do not duplicate any of those here.
   =================================================================== */

/* ------------------------------------------------------------------
   1. Hero — text column + brand identity plate
   ------------------------------------------------------------------ */
/* The plate is a card, not a decoration: on a corporate reference page
   the mark, the legal name and the registration facts are the content.
   Centred against the text column so neither side dangles at lg+. */
.cp-hero-row { align-items: center; row-gap: clamp(28px, 4vw, 40px); }

.cp-plate {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.cp-plate-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: clamp(26px, 3.4vw, 38px) clamp(20px, 2.6vw, 30px);
    /* The mark is magenta script over black sub-lettering on a
       transparent background. A flat white field leaves it floating;
       the tint-to-white wash gives it a surface to sit on without
       putting a colour behind the black lines. */
    background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--line);
}

/* Intrinsic size is 306x70; capped so it is never upscaled past its
   own pixels on a 1x display. Explicit width/height on the <img> keeps
   the box reserved, so the plate does not reflow as the file arrives. */
.cp-plate-logo {
    width: min(210px, 70%);
    height: auto;
    border-radius: 0;
}

.cp-plate-legal {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem);
    line-height: 1.35;
    color: var(--ink);
}

.cp-plate-tag {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* #a81264 on #fdf2f8 — 7.4:1 */
    color: var(--brand-700);
}

.cp-plate-body { padding: 4px clamp(20px, 2.6vw, 30px) clamp(18px, 2.2vw, 24px); }

.cp-plate-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px clamp(20px, 2.6vw, 30px);
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

.cp-plate-since {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-50);
}
.cp-plate-since strong { color: var(--ink); }

/* ------------------------------------------------------------------
   2. Offices
   ------------------------------------------------------------------ */
.cp-address {
    font-style: normal;
    font-size: .93rem;
    line-height: 1.75;
    color: var(--ink-70);
    margin: 0 0 16px;
}
.cp-address strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------
   3. Generations
   ------------------------------------------------------------------ */
.cp-gens { list-style: none; margin: 0; padding: 0; }
.cp-gens > li {
    display: grid;
    grid-template-columns: minmax(96px, 22%) 1fr;
    gap: clamp(12px, 2vw, 24px);
    padding: clamp(16px, 2vw, 22px) 0;
    border-top: 1px solid var(--line);
}
.cp-gens > li:first-child { border-top: 0; padding-top: 0; }

.cp-gen-no {
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* #a81264 on #ffffff — 7.9:1 */
    color: var(--brand-700);
    margin: 0;
    line-height: 1.5;
}
.cp-gen-body { margin: 0; font-size: .98rem; line-height: 1.75; color: var(--ink-70); }
.cp-gen-body strong { color: var(--ink); font-weight: 600; }

/* Stacked below lg, the list runs straight on from the intro column above it.
   The rule it drops on desktop comes back as a divider between the two. */
@media (max-width: 991.98px) {
    .cp-gens > li:first-child {
        padding-top: clamp(16px, 2vw, 22px);
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 575.98px) {
    .cp-gens > li { grid-template-columns: 1fr; gap: 4px; }
}

/* ------------------------------------------------------------------
   4. Page furniture
   ------------------------------------------------------------------ */
/* Bootstrap rows carry no row-gap, so a stacked intro column and its content
   column butt straight up against each other below lg. (.mb-8, used for this
   elsewhere in the project, is not a class this stylesheet defines.) */
.cp-split { row-gap: clamp(26px, 3.5vw, 42px); }

/* --ink-40 (#8b909c) is 2.9:1 on white and this line is 13px, so it would
   fail 1.4.3 outright. --ink-50 clears 4.5:1 at this size. */
.cp-updated { font-size: .82rem; color: var(--ink-50); margin: 18px 0 0; }
.cp-updated time { color: var(--ink-70); font-weight: 600; }

/* The jump nav sits directly under the hero on a surface-2 band, where
   .pd-toc's white pills read as raised rather than as flat boxes. */
.cp-jump { padding: clamp(18px, 2.4vw, 26px) 0; background: var(--surface-2); border-block: 1px solid var(--line); }
.cp-jump .pd-toc { margin: 0; }

/* ------------------------------------------------------------------
   5. The snapshot table
   ------------------------------------------------------------------ */
.cp-record .spec-table th { width: 34%; }

/* The shared .spec-table is a 520px-wide sideways scroller — correct for a
   spec comparison, wrong for a key/value record: the head office address
   would sit off-screen behind a horizontal scroll on every phone. Below the
   sm breakpoint each row becomes label-over-value and the scroller, along
   with its fade hint, has nothing left to do. */
@media (max-width: 575.98px) {
    .cp-record { overflow-x: visible; }
    .cp-record::after { display: none; }
    .cp-record .spec-table { min-width: 0; }
    .cp-record .spec-table tr { display: block; border-bottom: 1px solid var(--line); }
    .cp-record .spec-table tbody tr:last-child { border-bottom: 0; }
    .cp-record .spec-table th,
    .cp-record .spec-table td { display: block; width: auto; border-bottom: 0; }
    .cp-record .spec-table th { padding: 14px 18px 2px; }
    .cp-record .spec-table td { padding: 0 18px 14px; }
}