/* ==========================================================================
   OCHS - public website
   ==========================================================================

   A complete design layer for the visitor-facing pages. This deliberately
   replaces the purchased theme's stylesheet on those pages rather than
   overriding it: the same theme is in use at another school, and layering
   tweaks on top of style.css would still read as that theme with different
   colours. Only Bootstrap's grid, Font Awesome and the lightbox are kept.

   Nothing here changes what the school edits. Every heading, paragraph and
   photograph still comes from the admin web panel - Sliders, Features,
   About Us, Call To Action, Testimonials, Courses, Events, News, Gallery,
   FAQ and Pages. This file only decides how that content is arranged.

   House style: an editorial one. Generous white space, a serif for display
   type against a plain sans body, hairline rules instead of boxes and drop
   shadows, photographs given room. Closer to a school prospectus than to a
   software marketing page.
   ========================================================================== */

:root {
    --w-ink:        #16212b;   /* body text                                  */
    --w-ink-soft:   #566472;   /* secondary text                             */
    --w-muted:      #8494a2;   /* captions, meta                             */
    --w-line:       #dde4ea;   /* hairlines                                  */
    --w-line-soft:  #edf1f4;
    --w-paper:      #ffffff;
    --w-paper-alt:  #f6f8f9;   /* alternating section ground                 */
    --w-primary:    #075272;   /* ochsng.org deep teal-blue                  */
    --w-primary-dk: #053c55;
    --w-accent:     #ff6334;   /* used sparingly - one call to action        */
    --w-accent-dk:  #e5501f;

    --w-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Iowan Old Style',
               'Times New Roman', serif;
    --w-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

    --w-gap:     clamp(3.5rem, 7vw, 7rem);   /* vertical section rhythm      */
    --w-gap-sm:  clamp(2.25rem, 4vw, 3.5rem);
    --w-shell:   1200px;
    --w-measure: 68ch;                        /* readable line length        */
}

/* ---------- 1. Base ------------------------------------------------------ */

.ochs-web * { box-sizing: border-box; }

.ochs-web {
    margin: 0;
    background: var(--w-paper);
    color: var(--w-ink);
    font-family: var(--w-sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.ochs-web h1, .ochs-web h2, .ochs-web h3,
.ochs-web h4, .ochs-web h5, .ochs-web h6 {
    font-family: var(--w-serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--w-ink);
    margin: 0 0 .6em;
}

.ochs-web h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.ochs-web h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.ochs-web h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.ochs-web h4 { font-size: 1.2rem; }

.ochs-web p { margin: 0 0 1.15em; }
.ochs-web p:last-child { margin-bottom: 0; }

.ochs-web a { color: var(--w-primary); text-decoration: none; }
.ochs-web a:hover { color: var(--w-accent-dk); }

.ochs-web img { max-width: 100%; height: auto; display: block; }

.ochs-web ul, .ochs-web ol { margin: 0 0 1.15em; padding-left: 1.2em; }

.ochs-web :focus-visible {
    outline: 2px solid var(--w-accent);
    outline-offset: 3px;
}

/* Screen-reader-only, for labels that must exist but not show. */
.w-sr {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 2. Shell and section furniture ------------------------------- */

.w-shell {
    width: 100%;
    max-width: var(--w-shell);
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.w-section { padding-block: var(--w-gap); }
.w-section--tight { padding-block: var(--w-gap-sm); }
.w-section--alt { background: var(--w-paper-alt); }
.w-section--ruled { border-top: 1px solid var(--w-line); }

/* The small letterspaced label that opens a section. */
.w-eyebrow {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--w-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--w-primary);
    margin: 0 0 1.1rem;
}
.w-eyebrow::after {
    content: "";
    flex: 0 0 clamp(1.5rem, 5vw, 3.5rem);
    height: 1px;
    background: var(--w-accent);
}

.w-lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--w-ink-soft);
    max-width: var(--w-measure);
}

.w-section__head { max-width: 46rem; margin-bottom: var(--w-gap-sm); }

/* ---------- 3. Buttons --------------------------------------------------- */

.w-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--w-sans);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Each of these is written with the body class so it outranks the
   `.ochs-web a` colour rule; a bare `.w-btn--solid` loses to it and the
   label renders link-blue on orange. */
.ochs-web .w-btn--solid,
.ochs-web a.w-btn--solid  { background: var(--w-accent); color: #fff; }
.ochs-web .w-btn--solid:hover,
.ochs-web a.w-btn--solid:hover  { background: var(--w-accent-dk); color: #fff; }

.ochs-web .w-btn--ghost,
.ochs-web a.w-btn--ghost  { border-color: currentColor; color: var(--w-primary); background: transparent; }
.ochs-web .w-btn--ghost:hover,
.ochs-web a.w-btn--ghost:hover { background: var(--w-primary); border-color: var(--w-primary); color: #fff; }

.ochs-web .w-btn--onDark,
.ochs-web a.w-btn--onDark { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.ochs-web .w-btn--onDark:hover,
.ochs-web a.w-btn--onDark:hover { background: #fff; border-color: #fff; color: var(--w-ink); }

/* The quiet text link with a rule that grows on hover. */
.ochs-web .w-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w-primary);
}
.ochs-web .w-more:hover { color: var(--w-accent-dk); }
.w-more::after {
    content: "";
    width: 1.4rem; height: 1px;
    background: currentColor;
    transition: width .2s ease;
}
.w-more:hover::after { width: 2.4rem; }

/* ---------- 4. Header ---------------------------------------------------- */

.w-topbar {
    background: var(--w-primary);
    color: rgba(255,255,255,.85);
    font-size: .82rem;
}
.w-topbar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 42px;
    flex-wrap: wrap;
}
.w-topbar a { color: rgba(255,255,255,.85); }
.w-topbar a:hover { color: #fff; }
.w-topbar__contact { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.w-topbar__contact span { display: inline-flex; align-items: center; gap: .45rem; }
.w-topbar__social { display: flex; gap: 1rem; }

.w-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--w-paper);
    border-bottom: 1px solid var(--w-line);
}
.w-head__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 82px;
}
.w-head__logo img { max-height: 52px; width: auto; }

.w-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.w-nav a {
    position: relative;
    display: block;
    padding: .4rem 0;
    /* Nav labels must not wrap: "Obong University" breaking over two lines
       makes the whole header jump a row taller. */
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--w-ink-soft);
}
.w-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 2px;
    background: var(--w-accent);
    transition: right .22s ease;
}
.w-nav a:hover { color: var(--w-ink); }
.w-nav a:hover::after,
.w-nav li.is-current a::after { right: 0; }
.w-nav li.is-current a { color: var(--w-primary); }

.w-head__cta { display: flex; align-items: center; gap: 1rem; }

/* Outward links - Obong University, the school's own website. Marked so a
   visitor knows the tab is about to change institution, and set slightly
   quieter than the site's own sections. */
.w-out {
    display: inline-block;
    margin-left: .25em;
    font-size: .85em;
    opacity: .65;
}
.w-nav__out a { color: var(--w-muted); }
.w-nav__out a:hover { color: var(--w-primary); }


.w-burger {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--w-line);
    border-radius: 2px;
    color: var(--w-ink);
    font-size: 1.1rem;
    cursor: pointer;
}

/* Mobile drawer */
.w-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    z-index: 90;
    background: var(--w-paper);
    border-left: 1px solid var(--w-line);
    padding: 1.5rem 1.5rem 2.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s ease;
}
.w-drawer.is-open { transform: translateX(0); }
.w-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.w-drawer__close {
    background: none; border: 0; font-size: 1.5rem; line-height: 1;
    color: var(--w-ink-soft); cursor: pointer;
}
.w-drawer ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.w-drawer li + li { border-top: 1px solid var(--w-line-soft); }
.w-drawer a {
    display: block;
    padding: .95rem 0;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--w-ink);
}
.w-drawer .w-btn { width: 100%; justify-content: center; }
.w-scrim {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(10,20,28,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.w-scrim.is-open { opacity: 1; visibility: visible; }

/* ---------- 5. Hero ------------------------------------------------------ */

.w-hero { position: relative; background: #0d1b24; }

/* Every slide occupies the same grid cell, so they overlap without being
   taken out of flow. The track is therefore as tall as the tallest slide
   from the first paint - no absolute positioning, no jump when the script
   runs, and no risk of one slide pushing another down the page. */
.w-hero__track {
    position: relative;
    display: grid;
}
.w-slide {
    grid-area: 1 / 1;
    display: flex;
    /* Centred, not bottom-aligned. Every slide shares one grid cell, so the
       cell is as tall as the wordiest slide; aligning to the end would drop a
       short slide's heading to the bottom of that band and, on a laptop,
       below the fold. */
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
    background-size: cover;
    background-position: center;
    background-color: #0d1b24;   /* if a slide has no image of its own */
}
.w-slide.is-active { opacity: 1; visibility: visible; }

/* Before the script has marked one active, show the first. */
.w-hero__track > .w-slide:first-child { opacity: 1; visibility: visible; }
.w-hero__track > .w-slide:first-child:not(.is-active) { opacity: 0; visibility: hidden; }
.w-hero__track.is-ready > .w-slide:first-child { opacity: 0; visibility: hidden; }
.w-hero__track.is-ready > .w-slide.is-active { opacity: 1; visibility: visible; }

.w-slide::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(6,20,28,.88) 0%, rgba(6,20,28,.62) 45%, rgba(6,20,28,.22) 100%);
}
.w-slide__in {
    position: relative;
    width: 100%;
    padding-block: clamp(3.5rem, 12vh, 7rem);
}
.w-slide__body { max-width: 40rem; color: #fff; }
.w-slide__body h2 {
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.9rem);
    margin-bottom: .55em;
}
.w-slide__rule {
    width: 4rem; height: 2px;
    background: var(--w-accent);
    margin-bottom: 1.6rem;
}
.w-slide__body p {
    color: rgba(255,255,255,.86);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    max-width: 34rem;
}
.w-slide__btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.w-hero__dots {
    position: absolute;
    left: 0; right: 0; bottom: clamp(1.2rem, 3vh, 2.2rem);
    z-index: 3;
}
.w-hero__dots ul {
    display: flex; gap: .55rem; list-style: none; margin: 0; padding: 0;
}
.w-hero__dots button {
    width: 2.2rem; height: 3px;
    border: 0; padding: 0;
    background: rgba(255,255,255,.35);
    cursor: pointer;
    transition: background-color .2s ease;
}
.w-hero__dots button[aria-current="true"] { background: var(--w-accent); }

/* Fallback when the school has no slider rows configured. */
.w-hero--bare { padding-block: clamp(4rem, 12vh, 7rem); }
.w-hero--bare .w-slide__body { color: #fff; }

/* ---------- 6. Features -------------------------------------------------- */

/* auto-fit rather than a fixed three, because the school controls how many
   Features exist. With one row configured a fixed grid would leave two
   thirds of the section empty; this lets however many there are share the
   width evenly. */
.w-features {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.w-feature {
    padding: 2.2rem 0;
    border-top: 1px solid var(--w-line);
}
@media (min-width: 800px) {
    .w-feature { padding: 2.4rem 2.2rem 2.4rem 0; }
    .w-feature + .w-feature { border-left: 1px solid var(--w-line); padding-left: 2.2rem; }
}
.w-feature__no {
    display: block;
    font-family: var(--w-serif);
    font-size: .95rem;
    font-weight: 600;
    color: var(--w-accent);
    margin-bottom: .8rem;
}
.w-feature h3 { margin-bottom: .5rem; }
.w-feature p { color: var(--w-ink-soft); font-size: .96rem; max-width: 46rem; }

/* ---------- 7. About ----------------------------------------------------- */

.w-about { display: grid; gap: var(--w-gap-sm); align-items: start; }
@media (min-width: 900px) {
    .w-about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
/* isolate, so the offset frame below (z-index -1) is painted behind the
   photograph but still in front of the section's own background. Without a
   stacking context here it disappears underneath that background entirely. */
.w-about__fig { position: relative; margin: 0; isolation: isolate; }
.w-about__fig img { width: 100%; }
/* A thin offset frame - the one decorative flourish on the page. */
.w-about__fig::after {
    content: "";
    position: absolute;
    inset: 1.1rem -1.1rem -1.1rem 1.1rem;
    border: 1px solid var(--w-accent);
    z-index: -1;
}
.w-about__body p { color: var(--w-ink-soft); max-width: var(--w-measure); }

.w-pillars { list-style: none; margin: 2rem 0 0; padding: 0; }
.w-pillar { padding: 1.4rem 0; border-top: 1px solid var(--w-line); }
.w-pillar h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.w-pillar p { font-size: .95rem; color: var(--w-ink-soft); }

/* ---------- 8. Call to action -------------------------------------------- */

.w-cta { background: var(--w-primary); color: #fff; }
.w-cta__in {
    display: grid;
    gap: 1.8rem;
    align-items: center;
    padding-block: clamp(2.75rem, 6vw, 4.25rem);
}
@media (min-width: 860px) {
    .w-cta__in { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}
.w-cta h2 { color: #fff; margin-bottom: .4rem; }
.w-cta p { color: rgba(255,255,255,.82); max-width: var(--w-measure); }

/* ---------- 9. Testimonials ---------------------------------------------- */

.w-quotes { display: grid; gap: 0; }
@media (min-width: 820px) {
    .w-quotes { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
}
.w-quote {
    padding: 2.1rem 0;
    border-top: 1px solid var(--w-line);
}
.w-quote blockquote {
    margin: 0 0 1.3rem;
    font-family: var(--w-serif);
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    line-height: 1.5;
    color: var(--w-ink);
}
.w-quote blockquote::before {
    content: "\201C";
    display: block;
    font-size: 2.6rem;
    line-height: .6;
    color: var(--w-accent);
    margin-bottom: .5rem;
}
.w-quote__who { display: flex; align-items: center; gap: .9rem; }
.w-quote__who img {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.w-quote__name { font-weight: 600; font-size: .95rem; }
.w-quote__role { font-size: .82rem; color: var(--w-muted); }

/* ---------- 10. Page header (inner pages) -------------------------------- */

.w-pagehead {
    background: var(--w-paper-alt);
    border-bottom: 1px solid var(--w-line);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.w-pagehead h1 { margin-bottom: .3rem; }
.w-crumbs {
    display: flex; flex-wrap: wrap; gap: .5rem;
    list-style: none; margin: 0; padding: 0;
    font-size: .82rem; color: var(--w-muted);
}
.w-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--w-line); }
.w-crumbs a { color: var(--w-ink-soft); }

/* ---------- 11. Cards (course / event / news) ---------------------------- */

.w-grid { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); }
@media (min-width: 700px)  { .w-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .w-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .w-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.w-card { display: flex; flex-direction: column; }
.w-card__fig {
    margin: 0 0 1.15rem;
    overflow: hidden;
    background: var(--w-paper-alt);
    aspect-ratio: 3 / 2;
}
.w-card__fig img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.w-card:hover .w-card__fig img { transform: scale(1.04); }
.w-card__meta {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--w-muted);
    margin-bottom: .55rem;
}
.w-card h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.w-card h3 a { color: inherit; }
.w-card h3 a:hover { color: var(--w-primary); }
.w-card p { font-size: .95rem; color: var(--w-ink-soft); margin-bottom: 1rem; }
.w-card .w-more { margin-top: auto; align-self: flex-start; }

/* The date block on event cards. */
.w-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .85rem;
    border: 1px solid var(--w-line);
    border-top: 2px solid var(--w-accent);
    line-height: 1.1;
}
.w-date b { font-family: var(--w-serif); font-size: 1.5rem; font-weight: 600; }
.w-date span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--w-muted); }

.w-empty {
    padding: 3rem 0;
    color: var(--w-muted);
    border-top: 1px solid var(--w-line);
}

/* ---------- 12. Article (single post / page) ----------------------------- */

.w-article { display: grid; gap: var(--w-gap-sm); }
@media (min-width: 940px) {
    .w-article { grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.w-article__body { max-width: var(--w-measure); font-size: 1.03rem; }
.w-article__body img { margin-block: 1.6rem; }
.w-article__body h2 { font-size: 1.7rem; margin-top: 1.8em; }
.w-article__body h3 { margin-top: 1.6em; }
.w-article__hero { margin: 0 0 var(--w-gap-sm); }

.w-aside { font-size: .93rem; }
.w-aside__block + .w-aside__block { margin-top: 2rem; }
.w-aside h2 {
    font-family: var(--w-sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--w-primary);
    padding-bottom: .7rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--w-line);
}
.w-facts { list-style: none; margin: 0; padding: 0; }
.w-facts li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--w-line-soft);
}
.w-facts dt, .w-facts .k { color: var(--w-muted); }
.w-facts .v { font-weight: 600; text-align: right; }

/* ---------- 13. Gallery -------------------------------------------------- */

.w-gallery {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .w-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .w-gallery { grid-template-columns: repeat(4, 1fr); } }
.w-gallery a {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--w-paper-alt);
}
.w-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.w-gallery a::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(7,82,114,.55);
    opacity: 0;
    transition: opacity .25s ease;
}
.w-gallery a:hover img { transform: scale(1.06); }
.w-gallery a:hover::after { opacity: 1; }

/* ---------- 14. FAQ ------------------------------------------------------ */

.w-faq { max-width: 52rem; }
.w-faq__item { border-top: 1px solid var(--w-line); }
.w-faq__item:last-child { border-bottom: 1px solid var(--w-line); }
.w-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 1.4rem 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--w-serif);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 600;
    color: var(--w-ink);
    cursor: pointer;
}
.w-faq__q:hover { color: var(--w-primary); }
.w-faq__q .sign {
    flex: 0 0 auto;
    width: 1.4rem; height: 1.4rem;
    position: relative;
    margin-top: .25rem;
}
.w-faq__q .sign::before,
.w-faq__q .sign::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    background: var(--w-accent);
    transform: translate(-50%, -50%);
    transition: transform .22s ease, opacity .22s ease;
}
.w-faq__q .sign::before { width: 1.1rem; height: 2px; }
.w-faq__q .sign::after  { width: 2px; height: 1.1rem; }
.w-faq__q[aria-expanded="true"] .sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.w-faq__a { padding: 0 0 1.5rem; color: var(--w-ink-soft); max-width: var(--w-measure); }
.w-faq__a[hidden] { display: none; }

/* ---------- 15. Pagination ----------------------------------------------- */

.w-pager { margin-top: var(--w-gap-sm); border-top: 1px solid var(--w-line); padding-top: 1.6rem; }
.w-pager .pagination { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.w-pager .page-item .page-link,
.w-pager .page-link {
    display: block;
    min-width: 2.4rem;
    padding: .5rem .7rem;
    border: 1px solid var(--w-line);
    border-radius: 2px;
    background: var(--w-paper);
    color: var(--w-ink-soft);
    font-size: .88rem;
    text-align: center;
}
.w-pager .page-item.active .page-link {
    background: var(--w-primary);
    border-color: var(--w-primary);
    color: #fff;
}
.w-pager .page-item.disabled .page-link { opacity: .45; }
.w-pager .page-link:hover { border-color: var(--w-primary); color: var(--w-primary); }

/* ---------- 16. Footer --------------------------------------------------- */

.w-foot {
    background: #0d1b24;
    color: rgba(255,255,255,.72);
    font-size: .92rem;
    padding-top: var(--w-gap);
}
.w-foot a { color: rgba(255,255,255,.72); }
.w-foot a:hover { color: #fff; }
.w-foot__cols {
    display: grid;
    gap: 2.5rem;
    padding-bottom: var(--w-gap-sm);
}
@media (min-width: 760px)  { .w-foot__cols { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 3rem; } }
.w-foot h2 {
    font-family: var(--w-sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.2rem;
}
.w-foot__mark { font-family: var(--w-serif); font-size: 1.35rem; color: #fff; margin-bottom: .6rem; }
.w-foot ul { list-style: none; margin: 0; padding: 0; }
.w-foot li { padding: .35rem 0; }
.w-foot__contact li { display: flex; gap: .7rem; align-items: flex-start; }
.w-foot__contact i { color: var(--w-accent); margin-top: .35rem; }
.w-foot__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.w-foot__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
}
.w-foot__social a:hover { background: var(--w-accent); border-color: var(--w-accent); color: #fff; }

.w-foot__base {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-block: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .85rem;
    color: rgba(255,255,255,.55);
}
.w-foot__base .dropdown-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 2px;
    color: rgba(255,255,255,.72);
    padding: .35rem .8rem;
    font-size: .85rem;
}

/* ---------- 17. Responsive ----------------------------------------------- */

/* The bar carries eight links plus two buttons once Careers and the
   university are on it, which is more than fits comfortably below a wide
   desktop. Hand over to the drawer earlier rather than letting it crowd. */
@media (max-width: 1199px) {
    .w-nav, .w-head__cta { display: none; }
    .w-burger { display: inline-flex; }
}
@media (max-width: 767px) {
    .w-topbar { display: none; }
    .ochs-web { font-size: 16px; }
    .w-about__fig::after { inset: .7rem -.7rem -.7rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ochs-web *,
    .ochs-web *::before,
    .ochs-web *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------- 18. Lightbox (gallery) --------------------------------------- */

.w-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1rem, 5vw, 3rem);
    background: rgba(8, 16, 22, .93);
}
.w-lightbox.is-open { display: flex; }
.w-lightbox img {
    max-width: min(100%, 1100px);
    max-height: 86vh;
    object-fit: contain;
}
.w-lightbox__x,
.w-lightbox__nav {
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background-color .18s ease, border-color .18s ease;
}
.w-lightbox__x:hover,
.w-lightbox__nav:hover { background: var(--w-accent); border-color: var(--w-accent); }
.w-lightbox__x {
    position: absolute;
    top: clamp(.75rem, 3vw, 1.75rem);
    right: clamp(.75rem, 3vw, 1.75rem);
    width: 44px; height: 44px;
    font-size: 1.6rem;
}
.w-lightbox__nav { flex: 0 0 auto; width: 46px; height: 46px; font-size: 1.7rem; }
@media (max-width: 600px) {
    .w-lightbox { flex-wrap: wrap; }
    .w-lightbox img { order: -1; flex: 1 0 100%; }
}

/* ---------- 19. Small menus (language switcher) -------------------------- */

.w-menu { position: relative; }
.w-menu__list {
    position: absolute;
    bottom: calc(100% + .4rem);
    left: 0;
    min-width: 11rem;
    z-index: 20;
    display: none;
    margin: 0;
    padding: .35rem 0;
    list-style: none;
    background: var(--w-paper);
    border: 1px solid var(--w-line);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(8, 20, 28, .16);
}
.w-menu__list.is-open { display: block; }
.w-menu__list a {
    display: block;
    padding: .5rem 1rem;
    font-size: .88rem;
    color: var(--w-ink);
}
.w-menu__list a:hover { background: var(--w-paper-alt); color: var(--w-primary); }

/* ---------- 20. Careers -------------------------------------------------- */

.w-posts { border-top: 1px solid var(--w-line); }

.w-post {
    display: grid;
    gap: 1.2rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--w-line);
}
@media (min-width: 780px) {
    .w-post {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2.5rem;
    }
}
.w-post h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: .45rem; }
.w-post h3 a { color: inherit; }
.w-post h3 a:hover { color: var(--w-primary); }
.w-post p { color: var(--w-ink-soft); font-size: .96rem; max-width: 46rem; }

.w-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    margin-bottom: .7rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--w-muted);
}
.w-post__meta span { display: inline-flex; align-items: center; }
.w-post__meta span + span::before {
    content: "";
    width: 4px; height: 4px;
    margin-right: 1.1rem;
    border-radius: 50%;
    background: var(--w-line);
}

.w-post__side {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.w-post__close { text-align: right; line-height: 1.3; }
.w-post__close small {
    display: block;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--w-muted);
}
.w-post__close b { font-family: var(--w-serif); font-size: 1.05rem; }

.w-rule { border: 0; border-top: 1px solid var(--w-line); margin: 2.5rem 0; }

/* ---------- 21. Notices -------------------------------------------------- */

.w-notice {
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.8rem;
    border-left: 3px solid var(--w-primary);
    background: var(--w-paper-alt);
    font-size: .96rem;
}
.w-notice h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.w-notice ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.w-notice--good { border-left-color: #1c7a4b; }
.w-notice--bad  { border-left-color: #b3261e; }
.w-notice__hint { color: var(--w-muted); font-size: .88rem; margin-top: .4rem; }
.w-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.1rem;
    letter-spacing: .04em;
    color: var(--w-primary);
}

/* ---------- 22. Public forms --------------------------------------------- */

.w-form { max-width: 46rem; margin-top: 1.5rem; }

.w-form fieldset {
    border: 0;
    border-top: 1px solid var(--w-line);
    margin: 0 0 1.8rem;
    padding: 1.4rem 0 0;
}
.w-form legend {
    padding: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--w-primary);
}

.w-grid2 { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .w-grid2 { grid-template-columns: repeat(2, 1fr); } }

.w-form label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--w-ink-soft);
}
.w-form label.w-wide { margin-top: 1.1rem; }
.w-form label span { color: var(--w-accent); }
.w-form small {
    display: block;
    margin-top: .3rem;
    font-weight: 400;
    font-size: .78rem;
    color: var(--w-muted);
}

.w-form input[type="text"],
.w-form input[type="email"],
.w-form input[type="date"],
.w-form input[type="file"],
.w-form select,
.w-form textarea {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .7rem .85rem;
    border: 1px solid var(--w-line);
    border-radius: 2px;
    background: var(--w-paper);
    color: var(--w-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 400;
}
.w-form textarea { resize: vertical; }
.w-form input:focus,
.w-form select:focus,
.w-form textarea:focus {
    border-color: var(--w-primary);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(7, 82, 114, .12);
}
.w-form input[type="file"] { padding: .55rem .6rem; font-size: .88rem; }

.w-form__note {
    margin: 0 0 1.5rem;
    font-size: .88rem;
    color: var(--w-muted);
    max-width: 42rem;
}