/* ==========================================================================
   OMEIDA TRADING 105 — Page-level sections
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    background: var(--navy);
    color: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
/*
 * Scrim over the hero photograph. Alphas are 15% lighter than the original
 * 1.0 / 0.9 / 0.62, letting more of the image through.
 *
 * Worst case for legibility is a blown-out sky directly under the text. Modelled
 * against pure white at every stop, white text still measures 12.55:1 / 11.67:1 /
 * 9.43:1 — all AAA. Lightening these further starts to eat into that margin.
 */
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                rgba(11, 46, 66, 0.85) 8%,
                rgba(11, 46, 66, 0.765) 45%,
                rgba(11, 46, 66, 0.527) 100%);
}
.hero .wrap {
    position: relative;
    z-index: 2;
    padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(5rem, 3rem + 7vw, 9rem);
}
.hero h1 { color: #fff; max-width: 17ch; font-size: var(--fs-display); }
.hero h1 .accent { color: var(--green); }
.hero .lead { color: rgba(255, 255, 255, 0.84); max-width: 52ch; }

/* Compact hero for interior pages — centred page header. */
.hero--page .wrap {
    padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem) clamp(2.75rem, 2rem + 3vw, 4.75rem);
    text-align: center;
}
.hero--page h1 { font-size: var(--fs-h1); max-width: 22ch; margin-inline: auto; }
.hero--page .lead { margin-inline: auto; }
/* The zig-zag accent centres with the heading it sits under. */
.hero--page h1::after { margin-inline: auto; }

/* ── Feature cards overlapping the hero ────────────────────────────────── */

.feat { position: relative; z-index: 3; margin-top: clamp(-4.5rem, -3rem - 2vw, -3rem); }
.feat-grid { display: grid; gap: 2px; background: var(--line); grid-template-columns: 1fr; }
@media (min-width: 760px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }
.feat-card { background: var(--white); padding: 2.2rem 1.9rem; }
.feat-card .n {
    font-family: var(--head);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--green-d);
}
.feat-card h3 { margin: 0.85rem 0 0.55rem; }
.feat-card p  { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* ── Card grids ────────────────────────────────────────────────────────── */

.grid-4 { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.grid-3 { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-2 { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ── Stats band ────────────────────────────────────────────────────────── */

.stats { display: grid; gap: 2px; background: rgba(255, 255, 255, 0.15); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--navy); padding: 2.4rem 1.5rem; text-align: center; }
.stat b {
    display: block;
    font-family: var(--head);
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: 800;
    line-height: 1;
    color: var(--green);
}
.stat span {
    display: block;
    margin-top: 0.6rem;
    /* An uppercase, letter-spaced micro-label — set in --head like every other
       one on the site, and like the numeral it sits directly beneath. */
    font-family: var(--head);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
}

/* ── Split sections ────────────────────────────────────────────────────── */

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--flip .split-media { order: 2; }
}
.split-media { position: relative; }
.split-media .f { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--grey); }
.split-media .f img { width: 100%; height: 100%; object-fit: cover; }

/* ── Section note ──────────────────────────────────────────────────────── */

/*
 * Standalone explanatory paragraph sitting under a section's main content.
 * Runs the full container width and is justified to both edges.
 *
 * hyphens: auto is not decoration here — justifying a long measure without it
 * stretches the word spacing into visible rivers. The document carries lang="en-ZA",
 * which is what lets the browser hyphenate correctly.
 */
.section-note {
    margin-top: var(--sp-6);
    max-width: none;
    text-align: justify;
    hyphens: auto;
}
/* Justification needs room to distribute space; on a phone it would leave gappy
   lines, so the note reverts to a normal ragged right edge. */
@media (max-width: 639.98px) {
    .section-note { text-align: left; hyphens: manual; }
}

/* ── Registration panel ────────────────────────────────────────────────── */

.reg-panel {
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--green);
    border-radius: var(--radius);
}
.reg-panel h3 {
    margin: 0 0 var(--sp-4);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    color: var(--olive);
}
.reg-list { margin: 0; }
.reg-list > div {
    padding: 0.85rem 0;
    border-top: 1px solid var(--line);
}
.reg-list > div:first-of-type { border-top: 0; padding-top: 0; }
.reg-list > div:last-of-type { padding-bottom: 0; }
.reg-list dt {
    font-family: var(--head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}
.reg-list dd {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ink);
}

/* ── Portfolio ─────────────────────────────────────────────────────────── */

.port-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    background: var(--grey);
}
.port-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.port-item:hover img { transform: scale(1.07); }
.port-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem 1.3rem 1.2rem;
    background: linear-gradient(transparent, rgba(11, 46, 66, 0.94));
    color: #fff;
}
.port-cap .cat {
    display: block;
    margin-bottom: 0.3rem;
    font-family: var(--head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green);
}
.port-cap strong { font-family: var(--head); font-size: 1.02rem; font-weight: 700; color: #fff; }
.port-cap .yr { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); }

/* Category filter */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-7); }
.filter {
    padding: 0.6rem 1.1rem;
    background: var(--white);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    font-family: var(--head);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--body);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter:hover { border-color: var(--navy); color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── CTA band ──────────────────────────────────────────────────────────── */

.cta-band { background: var(--green); }
.cta-band .wrap {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
    grid-template-columns: 1fr;
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: 1.5fr auto; gap: var(--sp-9); } }
/*
 * The heading fills its grid column rather than being capped at a measure —
 * a 22ch cap made it wrap early and left a long dead run before the button.
 * text-wrap: balance (set globally on headings) evens the lines when it does wrap.
 *
 * The paragraph keeps a cap, but a generous one: it still needs to be readable,
 * and letting it run the full column would push it past 100 characters a line.
 */
.cta-band h2 { color: var(--green-ink); margin: 0; max-width: none; }
.cta-band p  { color: rgba(27, 46, 8, 0.84); margin: 0.7rem 0 0; max-width: 72ch; }
.cta-band .eyebrow { color: var(--green-ink); }
/* The band is green, so the accent switches to the dark ink or it disappears. */
.cta-band .eyebrow + h2::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 6 L3 2 L6 6 L9 2 L12 6' fill='none' stroke='%231B2E08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Profile download ──────────────────────────────────────────────────── */

.profile-box {
    display: grid;
    gap: var(--sp-5);
    align-items: center;
    grid-template-columns: 1fr;
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--green);
    border-radius: var(--radius);
}
@media (min-width: 820px) { .profile-box { grid-template-columns: auto 1fr auto; gap: var(--sp-6); } }
.profile-icon {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    background: var(--green-tint);
    border-radius: var(--radius);
    color: var(--olive);
}
.profile-icon svg { width: 26px; height: 26px; }
.profile-box h3 { margin-bottom: 0.35rem; }
.profile-box p  { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr 0.85fr; } }

.contact-card {
    padding: var(--sp-6);
    background: var(--grey);
    border-radius: var(--radius);
}
.contact-card + .contact-card { margin-top: var(--sp-5); }
.contact-row { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.contact-row:last-child { margin-bottom: 0; }
.contact-row svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--olive); margin-top: 3px; }
.contact-row .k {
    display: block;
    font-family: var(--head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}
.contact-row .v { font-weight: 600; color: var(--ink); }
.contact-row a { color: var(--navy-2); font-weight: 600; text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }

/* Form */
.field { margin-bottom: var(--sp-5); }
.field label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--head);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}
.field .req { color: var(--olive); }
.field .hint { display: block; margin-top: 6px; font-size: 0.83rem; color: var(--muted); }

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 0.95rem;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--green-d);
    box-shadow: 0 0 0 3px rgba(138, 194, 75, 0.28);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }
.field .err { display: block; margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: #B3261E; }

.grid-fields { display: grid; gap: 0 var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid-fields { grid-template-columns: 1fr 1fr; } }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
    border-radius: var(--radius);
    border-left: 4px solid;
    font-size: var(--fs-sm);
}
.alert-success { background: var(--green-tint); border-color: var(--green-d); color: #234209; }
.alert-error   { background: #FDECEA; border-color: #B3261E; color: #7A1C15; }
.alert strong { display: block; margin-bottom: 3px; }

/* Map */
.map-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--grey);
    border: 1px solid var(--line);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/*
 * Full-bleed map. The section is a direct child of <main>, which is unconstrained,
 * so it reaches the viewport edges without any negative-margin trick.
 *
 * Height is fixed rather than a 16:9 ratio — at full width that ratio would make
 * the map over 1000px tall on a desktop monitor.
 */
.map-full { display: block; width: 100%; }
.map-frame--full {
    aspect-ratio: auto;
    height: clamp(320px, 46vh, 520px);
    border: 0;
    border-radius: 0;
    border-top: 3px solid var(--green);
}

/* ── Content pages (privacy, terms) ────────────────────────────────────── */

.prose { max-width: var(--measure); }

/*
 * Legal-page variant: the content block occupies 70% of the container and is
 * centred, rather than being capped at a reading measure.
 *
 * The 70% only applies from the tablet breakpoint up. On a phone the container
 * padding is already doing that job, and taking a further 30% off a 375px screen
 * would leave the text in a needlessly narrow column.
 */
.prose--70 {
    max-width: none;
    margin-inline: auto;
}
.prose--70 .lead { max-width: none; }

@media (min-width: 768px) {
    .prose--70 { width: 70%; }
}
.prose h2 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem); margin-top: var(--sp-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.02rem; margin-top: var(--sp-6); }
.prose ul { padding-left: 1.2em; }

/* ── Error + stub pages ────────────────────────────────────────────────── */

.error-page { text-align: center; }
.error-code {
    display: block;
    font-family: var(--head);
    font-size: clamp(4rem, 3rem + 8vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--navy-tint);
}
.error-page h1 { margin-top: calc(var(--sp-5) * -1); }
.error-page .lead { margin-inline: auto; }
.error-page .btns { justify-content: center; }

.stub-note {
    padding: var(--sp-7);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    background: var(--grey);
    color: var(--muted);
}