/* shareholders.css
   The share price is the reason most people open this page, so it gets the
   page's one oversized numeral. Everything for existing shareholders is kept
   deliberately small and sits below the form. */

.ownership,
.interest-section,
.services-section { padding: var(--section-y) 0; }

/* --- Local ownership + share price --- */
.ownership-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 11%;
    align-items: start;
}

.ownership-copy h2 {
    max-width: 620px;
    font-size: clamp(2.25rem, 3.8vw, 3.55rem);
    font-weight: 700;
}

.ownership-copy p {
    max-width: 620px;
    margin-top: 22px;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.share-price {
    padding: 34px 0 0;
    border-top: 4px solid var(--blue);
}

.share-price-label {
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.share-price-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 14px 0 18px;
    font-family: var(--font-heading);
    font-size: clamp(4.5rem, 9vw, 7.5rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -2px;
    color: var(--ink);
}

.share-price-currency {
    font-size: .45em;
    font-weight: 700;
    letter-spacing: 0;
}

.share-price-unit {
    margin-left: 10px;
    font-family: var(--font-body);
    font-size: .16em;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.share-price-note {
    max-width: 420px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.6;
}

/* --- Purchase interest --- */
.interest-section { background: var(--surface); }

.interest-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 9%;
    align-items: start;
}

.interest-copy h2 {
    max-width: 520px;
    font-size: clamp(2.05rem, 3.3vw, 3rem);
    font-weight: 700;
}

.interest-copy p {
    max-width: 460px;
    margin-top: 20px;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.interest-aside {
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: .92rem;
}

.interest-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-content: start;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }

.field label {
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 48px;
}

.field textarea { resize: vertical; line-height: 1.6; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 1px;
    border-color: var(--blue);
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs. Never focusable, never announced. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-error {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border-left: 4px solid var(--danger);
    background: var(--paper);
    color: var(--ink);
    font-size: .94rem;
}

.interest-form .btn-action { grid-column: 1 / -1; justify-self: start; }

.form-legal {
    grid-column: 1 / -1;
    color: var(--ink-soft);
    font-size: .84rem;
}

.form-legal a { color: var(--blue); }

.interest-success {
    grid-column: 2;
    padding: 34px;
    background: var(--paper);
    border-top: 4px solid var(--blue);
}

.interest-success h3 { font-size: 1.35rem; font-weight: 700; }
.interest-success p { margin-top: 12px; color: var(--ink-soft); }

/* --- Existing shareholders (intentionally small) --- */
.services-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 9%;
    align-items: start;
}

.services-layout h2 {
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    font-weight: 700;
}

.services-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.services-list li {
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: .98rem;
}

.services-note,
.services-contact {
    margin-top: 20px;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.7;
}

.services-contact a { color: var(--blue); }

@media (max-width: 900px) {
    .ownership-grid,
    .interest-grid,
    .services-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .share-price { margin-top: 8px; }
    .interest-form { grid-template-columns: 1fr; }
    .interest-success { grid-column: 1; }
}

/* --- Annual report cover -------------------------------------------------
   The one shadow in the system. It is not decorative depth: it depicts a
   printed document sitting on the page, which is the whole point of the
   tilt. Kept to two soft layers so it reads as paper, not as a UI card. */
.shareholder-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: clamp(32px, 6vw, 84px);
    align-items: center;
}

.report-cover {
    justify-self: end;
    width: min(290px, 100%);
    margin: 0;
    /* Room for the rotated corners so nothing clips or forces a scrollbar. */
    padding: 18px 14px 0;
}

.report-cover img {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(-3deg);
    box-shadow:
        0 22px 44px rgba(20, 20, 20, .22),
        0 4px 12px rgba(20, 20, 20, .12);
}


@media (max-width: 820px) {
    .shareholder-header-grid { grid-template-columns: 1fr; gap: 40px; }
    .report-cover { justify-self: start; width: min(220px, 60%); }
}