/* =================================================================
   SANGGAR NUSANTARA — Design System
   Cinematic · Editorial · Nusantara · Modern
   Bootstrap 5 sebagai grid/utility; file ini yang memberi karakter.
   ================================================================= */

:root {
    --sn-primary:  #171512;
    --sn-dark:     #0D0C0B;
    --sn-bg:       #121110;
    --sn-cream:    #F1EBDD;
    --sn-accent:   #B8894B;
    --sn-accent-2: #d8a969;
    --sn-muted:    #8C857B;
    --sn-line:     rgba(241, 235, 221, 0.14);
    --sn-line-strong: rgba(241, 235, 221, 0.28);

    --sn-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --sn-nav-h: 84px;
    --sn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.sn-body {
    margin: 0;
    background-color: var(--sn-bg);
    color: var(--sn-cream);
    font-family: var(--sn-font-body);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

::selection { background: var(--sn-accent); color: var(--sn-dark); }

a { color: inherit; text-decoration: none; transition: color .3s var(--sn-ease); }

.container-xxl { max-width: 1360px; padding-inline: 24px; }

.sn-skip-link {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: var(--sn-accent); color: var(--sn-dark);
    padding: 12px 20px; font-weight: 600;
}
.sn-skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
    outline: 2px solid var(--sn-accent-2);
    outline-offset: 3px;
}

/* -------------------------------------------------- Film grain --- */
.sn-grain {
    position: fixed; inset: 0; z-index: 900; pointer-events: none;
    opacity: .045; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------- Typography --- */
.sn-h2 {
    font-family: var(--sn-font-head);
    font-weight: 600;
    font-size: clamp(2rem, 4.6vw, 4.25rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--sn-cream);
    margin: 0 0 1.1rem;
}
.sn-h2 em { font-style: italic; color: var(--sn-accent-2); font-weight: 500; }
.sn-h2--xl { font-size: clamp(2.4rem, 6vw, 5.5rem); }

.sn-body-lg {
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    color: color-mix(in srgb, var(--sn-cream) 78%, transparent);
    max-width: 54ch;
    margin: 0;
}

.sn-eyebrow {
    font-size: .72rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--sn-accent);
    font-weight: 600;
    margin: 0 0 1.4rem;
}

.sn-divider {
    display: inline-flex; align-items: center; gap: .9rem;
    font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
    color: var(--sn-muted); font-weight: 600;
    margin-bottom: 2.4rem;
}
.sn-divider::before {
    content: ""; width: 46px; height: 1px; background: var(--sn-accent);
}

/* -------------------------------------------------- Buttons ------ */
.sn-btn {
    --bs-btn-focus-shadow-rgb: 184, 137, 75;
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--sn-font-body);
    font-size: .82rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    padding: 1rem 1.9rem;
    border-radius: 0;
    border: 1px solid transparent;
    transition: all .35s var(--sn-ease);
}
.sn-btn--sm { padding: .7rem 1.3rem; font-size: .72rem; }

.sn-btn--solid { background: var(--sn-accent); color: var(--sn-dark); border-color: var(--sn-accent); }
.sn-btn--solid:hover { background: var(--sn-accent-2); border-color: var(--sn-accent-2); color: var(--sn-dark); transform: translateY(-2px); }

.sn-btn--outline { background: transparent; color: var(--sn-cream); border-color: var(--sn-line-strong); }
.sn-btn--outline:hover { border-color: var(--sn-accent); color: var(--sn-accent-2); }

.sn-btn--ghost { background: rgba(241,235,221,.06); color: var(--sn-cream); border-color: var(--sn-line); backdrop-filter: blur(4px); }
.sn-btn--ghost:hover { background: rgba(241,235,221,.12); border-color: var(--sn-line-strong); }

/* -------------------------------------------------- Navbar ------- */
.sn-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 1000;
    transition: background .4s var(--sn-ease), border-color .4s var(--sn-ease), backdrop-filter .4s var(--sn-ease);
    border-bottom: 1px solid transparent;
}
.sn-nav.is-solid {
    background: color-mix(in srgb, var(--sn-dark) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--sn-line);
}
.sn-navbar { padding-block: 20px; }
.sn-nav.is-solid .sn-navbar { padding-block: 12px; }
.sn-navbar { transition: padding .4s var(--sn-ease); }

.sn-brand { display: inline-flex; align-items: center; gap: .8rem; }
.sn-brand__mark {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--sn-accent);
    font-family: var(--sn-font-head); font-weight: 700; font-size: .95rem;
    color: var(--sn-accent-2); letter-spacing: .02em;
}
.sn-brand__text {
    font-family: var(--sn-font-head); font-weight: 600;
    font-size: 1.12rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sn-cream);
}
.sn-brand__accent { color: var(--sn-accent-2); }

.sn-menu { gap: .35rem; align-items: center; }
.sn-menu__link {
    font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 500; color: color-mix(in srgb, var(--sn-cream) 72%, transparent) !important;
    padding: .5rem .95rem !important;
    position: relative;
}
.sn-menu__link::after {
    content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .3rem;
    height: 1px; background: var(--sn-accent); transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--sn-ease);
}
.sn-menu__link:hover, .sn-menu__link.active { color: var(--sn-cream) !important; }
.sn-menu__link:hover::after, .sn-menu__link.active::after { transform: scaleX(1); }

.sn-nav__cta { margin-left: 1.4rem; }

.sn-toggler {
    border: 0; padding: 8px; width: 44px; height: 44px;
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
}
.sn-toggler:focus { box-shadow: none; }
.sn-toggler__bar {
    display: block; width: 26px; height: 2px; background: var(--sn-cream);
    transition: transform .3s var(--sn-ease), opacity .3s var(--sn-ease);
}
.sn-toggler[aria-expanded="true"] .sn-toggler__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sn-toggler[aria-expanded="true"] .sn-toggler__bar:nth-child(2) { opacity: 0; }
.sn-toggler[aria-expanded="true"] .sn-toggler__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .sn-collapse {
        background: color-mix(in srgb, var(--sn-dark) 97%, transparent);
        margin-top: 16px; padding: 20px; border: 1px solid var(--sn-line);
    }
    .sn-menu { gap: 0; align-items: stretch; }
    .sn-menu__link { padding: .9rem .2rem !important; border-bottom: 1px solid var(--sn-line); }
    .sn-menu__link::after { display: none; }
    .sn-nav__cta { margin: 1.2rem 0 0; width: 100%; justify-content: center; }
}

/* -------------------------------------------------- Sections ----- */
.sn-section { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.sn-section__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.sn-section__head .sn-h2 { margin-bottom: 1.2rem; }

/* -------------------------------------------------- Hero -------- */
.sn-hero {
    position: relative; min-height: 100svh; display: flex; align-items: flex-end;
    padding-block: clamp(120px, 18vh, 200px) clamp(64px, 10vh, 110px);
    overflow: hidden;
}
.sn-hero__media { position: absolute; inset: 0; z-index: 0; }
.sn-hero__img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(.35) contrast(1.05) brightness(.62);
    animation: sn-hero-zoom 18s ease-out forwards;
}
@keyframes sn-hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }

.sn-hero__overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(13,12,11,.55) 0%, rgba(13,12,11,.15) 35%, rgba(13,12,11,.85) 100%),
        radial-gradient(120% 80% at 15% 90%, rgba(13,12,11,.7), transparent 60%);
}
.sn-hero__frame {
    position: absolute; inset: 22px; border: 1px solid rgba(241,235,221,.16); pointer-events: none;
}
.sn-hero__inner { position: relative; z-index: 2; width: 100%; }

.sn-hero__title {
    font-family: var(--sn-font-head);
    font-weight: 600;
    font-size: clamp(3rem, 8.5vw, 7.5rem);
    line-height: .98;
    letter-spacing: -0.02em;
    margin: 0 0 1.6rem;
    max-width: 16ch;
}
.sn-hero__title span { display: block; }
.sn-hero__title em { font-style: italic; color: var(--sn-accent-2); font-weight: 500; }

.sn-hero__lead {
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    color: color-mix(in srgb, var(--sn-cream) 84%, transparent);
    max-width: 52ch; margin: 0 0 2.2rem;
}
.sn-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.sn-hero__meta {
    list-style: none; display: flex; flex-wrap: wrap; gap: 2.4rem;
    padding: 1.4rem 0 0; margin: 0; border-top: 1px solid var(--sn-line);
}
.sn-hero__meta li {
    font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--sn-muted); font-weight: 600;
}

.sn-hero__vertical {
    position: absolute; right: 30px; top: 50%; z-index: 2;
    transform: rotate(90deg) translateX(50%); transform-origin: right center;
    font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--sn-muted);
}
.sn-hero__scroll {
    position: absolute; left: 24px; bottom: 26px; z-index: 2;
    font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sn-muted);
    display: inline-flex; align-items: center; gap: .7rem;
}
.sn-hero__scroll span {
    width: 1px; height: 42px; background: var(--sn-accent); position: relative; overflow: hidden;
}
.sn-hero__scroll span::after {
    content: ""; position: absolute; inset: 0; background: var(--sn-cream);
    animation: sn-scroll-line 2.2s var(--sn-ease) infinite;
}
@keyframes sn-scroll-line { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

@media (max-width: 575.98px) {
    .sn-hero__vertical { display: none; }
    .sn-hero__meta { gap: 1.2rem; }
    .sn-hero__actions .sn-btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------- Figure ------ */
.sn-figure { margin: 0; position: relative; }
.sn-figure img { width: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.03); }
.sn-figure--framed::before {
    content: ""; position: absolute; inset: -14px; border: 1px solid var(--sn-line-strong);
    pointer-events: none;
}
.sn-figure figcaption {
    margin-top: 1rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--sn-muted);
}

/* -------------------------------------------------- Stats ------- */
.sn-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin-top: clamp(56px, 8vw, 96px);
    background: var(--sn-line); border: 1px solid var(--sn-line);
}
.sn-stats__item { background: var(--sn-bg); padding: 2.2rem 1.4rem; text-align: center; }
.sn-stats__num {
    display: block; font-family: var(--sn-font-head); font-weight: 600;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--sn-accent-2); line-height: 1;
}
.sn-stats__label {
    display: block; margin-top: .7rem; font-size: .72rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--sn-muted);
}
@media (max-width: 767.98px) { .sn-stats { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------- Talent grid - */
.sn-talent-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.sn-talent {
    position: relative; overflow: hidden; background: var(--sn-primary);
    aspect-ratio: 4 / 5;
}
.sn-talent__media { position: absolute; inset: 0; }
.sn-talent__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(.55) contrast(1.05) brightness(.82);
    transition: transform .8s var(--sn-ease), filter .6s var(--sn-ease);
}
.sn-talent__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(13,12,11,.92) 100%);
}
.sn-talent__base {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.4rem;
    transition: transform .5s var(--sn-ease);
}
.sn-talent__name {
    font-family: var(--sn-font-head); font-weight: 600; font-size: 1.5rem;
    margin: 0; letter-spacing: .02em; text-transform: uppercase;
}
.sn-talent__role {
    margin: .1rem 0 0; font-size: .72rem; letter-spacing: .22em;
    text-transform: uppercase; color: var(--sn-accent-2);
}
.sn-talent__hover {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 1.4rem;
    opacity: 0; transform: translateY(18px);
    transition: opacity .45s var(--sn-ease), transform .45s var(--sn-ease);
}
.sn-talent__hover .sn-tags { margin-bottom: .9rem; }
.sn-talent__exp {
    font-size: .8rem; color: color-mix(in srgb, var(--sn-cream) 80%, transparent); margin: 0 0 1rem;
}
.sn-talent__exp span {
    display: block; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--sn-muted); margin-bottom: .2rem;
}
.sn-talent:hover .sn-talent__media img,
.sn-talent:focus-within .sn-talent__media img { transform: scale(1.07); filter: grayscale(.15) contrast(1.08) brightness(.9); }
.sn-talent:hover .sn-talent__base,
.sn-talent:focus-within .sn-talent__base { transform: translateY(-118px); }
.sn-talent:hover .sn-talent__hover,
.sn-talent:focus-within .sn-talent__hover { opacity: 1; transform: translateY(0); }

@media (max-width: 991.98px) { .sn-talent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) {
    /* di layar sentuh info langsung terlihat */
    .sn-talent__base { transform: translateY(-118px); }
    .sn-talent__hover { opacity: 1; transform: none; }
}
@media (max-width: 519.98px) { .sn-talent-grid { grid-template-columns: 1fr; } .sn-talent { aspect-ratio: 3 / 4; } }

/* -------------------------------------------------- Tags -------- */
.sn-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.sn-tags li {
    font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
    padding: .38rem .7rem; border: 1px solid var(--sn-line-strong); color: var(--sn-muted);
}
.sn-tags--lg li { font-size: .72rem; padding: .5rem .95rem; color: var(--sn-cream); }

/* -------------------------------------------------- Groups ------ */
.sn-groups .sn-h2 { max-width: 20ch; margin-bottom: clamp(40px, 6vw, 70px); }
.sn-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sn-group { position: relative; border: 1px solid var(--sn-line); background: var(--sn-primary); }
.sn-group__index {
    position: absolute; top: 1rem; left: 1rem; z-index: 3;
    font-family: var(--sn-font-head); font-size: 1rem; color: var(--sn-accent-2);
    mix-blend-mode: difference;
}
.sn-group__media { overflow: hidden; aspect-ratio: 5 / 3.4; }
.sn-group__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(.5) contrast(1.05) brightness(.8);
    transition: transform .8s var(--sn-ease);
}
.sn-group:hover .sn-group__media img { transform: scale(1.06); }
.sn-group__body { padding: 1.6rem; }
.sn-group__name { font-family: var(--sn-font-head); font-weight: 600; font-size: 1.5rem; margin: 0; }
.sn-group__type {
    font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--sn-accent-2); margin: .3rem 0 1.2rem;
}
.sn-group__meta { display: flex; gap: 2rem; margin: 0; }
.sn-group__meta dt {
    font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sn-muted);
}
.sn-group__meta dd { margin: .2rem 0 0; font-size: .9rem; color: var(--sn-cream); }
@media (max-width: 991.98px) { .sn-group-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------- Filters ----- */
.sn-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.6rem; }
.sn-filter {
    background: transparent; border: 1px solid var(--sn-line-strong); color: var(--sn-muted);
    font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    padding: .7rem 1.15rem; cursor: pointer; transition: all .3s var(--sn-ease);
}
.sn-filter:hover { color: var(--sn-cream); border-color: var(--sn-line-strong); }
.sn-filter.is-active { background: var(--sn-accent); border-color: var(--sn-accent); color: var(--sn-dark); }

/* -------------------------------------------------- Masonry ----- */
.sn-masonry {
    columns: 3; column-gap: 1.5rem;
}
.sn-work {
    display: block; position: relative; overflow: hidden; margin-bottom: 1.5rem;
    break-inside: avoid; background: var(--sn-primary);
}
.sn-work img {
    width: 100%; object-fit: cover;
    filter: grayscale(.5) contrast(1.05) brightness(.82);
    transition: transform .9s var(--sn-ease), filter .6s var(--sn-ease);
}
.sn-work__overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
    padding: 1.6rem;
    background: linear-gradient(180deg, transparent 45%, rgba(13,12,11,.9) 100%);
    opacity: 0; transition: opacity .45s var(--sn-ease);
}
.sn-work__title { font-family: var(--sn-font-head); font-weight: 600; font-size: 1.4rem; margin: 0; }
.sn-work__meta {
    font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sn-accent-2); margin: 0;
}
.sn-work__cta {
    margin-top: .6rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--sn-cream); display: inline-flex; align-items: center; gap: .4rem;
}
.sn-work:hover img, .sn-work:focus-visible img { transform: scale(1.05); filter: grayscale(.1) contrast(1.08) brightness(.95); }
.sn-work:hover .sn-work__overlay, .sn-work:focus-visible .sn-work__overlay { opacity: 1; }
.sn-work.is-hidden { display: none; }

@media (max-width: 991.98px) { .sn-masonry { columns: 2; } }
@media (max-width: 575.98px) {
    .sn-masonry { columns: 1; }
    .sn-work__overlay { opacity: 1; } /* mobile: selalu tampil */
}

/* -------------------------------------------------- Timeline --- */
.sn-timeline { list-style: none; padding: 0; margin: clamp(30px,5vw,50px) 0 0; border-top: 1px solid var(--sn-line); }
.sn-timeline__item {
    display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: baseline;
    padding: 2rem 0; border-bottom: 1px solid var(--sn-line);
    transition: background .4s var(--sn-ease), padding-left .4s var(--sn-ease);
}
.sn-timeline__item:hover { background: rgba(241,235,221,.03); padding-left: 1rem; }
.sn-timeline__year {
    font-family: var(--sn-font-head); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--sn-accent-2); line-height: 1;
}
.sn-timeline__title { font-family: var(--sn-font-head); font-weight: 600; font-size: 1.35rem; margin: 0; }
.sn-timeline__role {
    margin: .3rem 0 0; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sn-muted);
}
@media (max-width: 575.98px) {
    .sn-timeline__item { grid-template-columns: 1fr; gap: .6rem; }
}

/* -------------------------------------------------- Values ----- */
.sn-values .sn-h2 { max-width: 22ch; margin-bottom: clamp(44px, 6vw, 76px); }
.sn-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sn-line); border: 1px solid var(--sn-line); }
.sn-value { background: var(--sn-bg); padding: 2.4rem 1.8rem; position: relative; }
.sn-value__index {
    position: absolute; top: 1.4rem; right: 1.4rem;
    font-size: .7rem; letter-spacing: .2em; color: var(--sn-muted);
}
.sn-value__icon { font-size: 1.9rem; display: block; margin-bottom: 1.2rem; }
.sn-value__title { font-family: var(--sn-font-head); font-weight: 600; font-size: 1.35rem; margin: 0 0 .7rem; }
.sn-value__desc { font-size: .9rem; color: color-mix(in srgb, var(--sn-cream) 72%, transparent); margin: 0; }
@media (max-width: 991.98px) { .sn-value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 519.98px) { .sn-value-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------- Nusantara -- */
.sn-nusantara { background: var(--sn-primary); overflow: hidden; }
.sn-nusantara__pattern {
    position: absolute; inset: 0; z-index: 0; opacity: .06; pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg, var(--sn-accent) 0 2px, transparent 2px 22px),
        repeating-linear-gradient(-45deg, var(--sn-accent) 0 2px, transparent 2px 22px);
    -webkit-mask-image: radial-gradient(circle at 80% 20%, #000, transparent 70%);
            mask-image: radial-gradient(circle at 80% 20%, #000, transparent 70%);
}
.sn-nusantara .container-xxl { position: relative; z-index: 1; }
.sn-nusantara .sn-divider { margin-top: 0; }

/* -------------------------------------------------- Featured --- */
.sn-featured { background: var(--sn-dark); }
.sn-featured__grid { border: 1px solid var(--sn-line); }
.sn-featured__media { position: relative; margin: 0; height: 100%; min-height: 420px; overflow: hidden; }
.sn-featured__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(.4) contrast(1.05) brightness(.82);
}
.sn-featured__tag {
    position: absolute; top: 1.4rem; left: 1.4rem;
    font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
    background: var(--sn-accent); color: var(--sn-dark); padding: .5rem .9rem; font-weight: 700;
}
.sn-featured__body { padding: clamp(2.4rem, 5vw, 4.5rem); }
.sn-featured__body .sn-eyebrow { margin-bottom: 1rem; }
.sn-featured__name {
    font-family: var(--sn-font-head); font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .98; margin: 0 0 .6rem;
    letter-spacing: -0.01em;
}
.sn-featured__role {
    font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--sn-accent-2); margin: 0 0 1.6rem;
}
.sn-featured__body .sn-tags { margin: 1.6rem 0; }
.sn-featured__meta { display: flex; gap: 3rem; margin: 0 0 2rem; }
.sn-featured__meta dt { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sn-muted); }
.sn-featured__meta dd {
    margin: .3rem 0 0; font-family: var(--sn-font-head); font-size: 1.4rem; color: var(--sn-accent-2);
}
@media (max-width: 991.98px) { .sn-featured__media { min-height: 340px; } }

/* -------------------------------------------------- CTA -------- */
.sn-cta { position: relative; padding-block: clamp(90px, 16vw, 200px); overflow: hidden; text-align: center; }
.sn-cta__media { position: absolute; inset: 0; z-index: 0; }
.sn-cta__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.4) contrast(1.1); }
.sn-cta__overlay {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(13,12,11,.4), rgba(13,12,11,.86));
}
.sn-cta__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.sn-cta__inner .sn-body-lg { margin: 0 auto 2.4rem; }
.sn-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@media (max-width: 575.98px) { .sn-cta__actions .sn-btn { flex: 1 1 100%; justify-content: center; } }

/* -------------------------------------------------- Footer ---- */
.sn-footer { background: var(--sn-dark); border-top: 1px solid var(--sn-line); padding-block: clamp(64px, 9vw, 110px) 2.4rem; }
.sn-footer__top {
    display: grid; grid-template-columns: 1.4fr 2fr; gap: 3rem;
    padding-bottom: 3.4rem; border-bottom: 1px solid var(--sn-line);
}
.sn-footer__logo {
    font-family: var(--sn-font-head); font-weight: 700; font-size: 1.4rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--sn-cream);
}
.sn-footer__tagline {
    font-family: var(--sn-font-head); font-style: italic; font-size: 1.05rem;
    color: var(--sn-accent-2); margin: .8rem 0 1rem;
}
.sn-footer__note { font-size: .85rem; color: var(--sn-muted); max-width: 38ch; margin: 0; }
.sn-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.sn-footer__heading {
    font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--sn-muted); margin: 0 0 1.2rem;
}
.sn-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.sn-footer__col a { font-size: .88rem; color: color-mix(in srgb, var(--sn-cream) 76%, transparent); }
.sn-footer__col a:hover { color: var(--sn-accent-2); }

.sn-footer__bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-top: 2.4rem; flex-wrap: wrap;
}
.sn-footer__vertical { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sn-muted); }
.sn-footer__copy { font-size: .78rem; color: var(--sn-muted); margin: 0; }
.sn-footer__totop { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sn-muted); }
.sn-footer__totop:hover { color: var(--sn-accent-2); }

@media (max-width: 767.98px) {
    .sn-footer__top { grid-template-columns: 1fr; }
    .sn-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 479.98px) { .sn-footer__cols { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------- Reveal anim - */
.sn-reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s var(--sn-ease), transform .8s var(--sn-ease);
    transition-delay: var(--d, 0s);
}
.sn-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
    .sn-reveal { opacity: 1; transform: none; }
    .sn-hero__img { animation: none; transform: none; }
}