/* ==========================================================================
   Stellar Signage Ltd. — public theme
   Bootstrap 5 is loaded first; everything below layers the premium
   manufacturing aesthetic on top of it.
   ========================================================================== */

:root {
    --ss-ink:            #0B1F3A;   /* deep navy — primary brand */
    --ss-ink-800:        #12294a;
    --ss-ink-600:        #1d3a63;
    --ss-accent:         #C8A15A;   /* brushed brass */
    --ss-accent-600:     #b08c45;
    --ss-body:           #3d4756;
    --ss-muted:          #6b7684;
    --ss-line:           #e4e8ee;
    --ss-surface:        #ffffff;
    --ss-surface-alt:    #f6f7f9;
    --ss-surface-dark:   #08182c;

    --ss-radius:         4px;
    --ss-radius-lg:      8px;
    --ss-shadow-sm:      0 1px 2px rgba(11, 31, 58, .06), 0 4px 14px rgba(11, 31, 58, .05);
    --ss-shadow-md:      0 8px 30px rgba(11, 31, 58, .10);
    --ss-shadow-lg:      0 24px 60px rgba(11, 31, 58, .14);

    --ss-ease:           cubic-bezier(.22, .61, .36, 1);
    --ss-header-h:       84px;

    --bs-primary:        #0B1F3A;
    --bs-primary-rgb:    11, 31, 58;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ss-header-h) + 16px); }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ss-body);
    background: var(--ss-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3 {
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    color: var(--ss-ink);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1, .h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2, .h2 { font-size: clamp(1.875rem, 3.6vw, 3rem); }
h3, .h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
h4, .h4 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--ss-ink); text-decoration: none; transition: color .25s var(--ss-ease); }
a:hover { color: var(--ss-accent-600); }

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

::selection { background: var(--ss-accent); color: #fff; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .875rem 1.5rem;
    background: var(--ss-ink);
    color: #fff;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.section        { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-sm     { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-tight  { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.bg-surface-alt { background: var(--ss-surface-alt); }
.bg-ink         { background: var(--ss-ink); color: rgba(255,255,255,.82); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }
.bg-ink-deep    { background: var(--ss-surface-dark); color: rgba(255,255,255,.82); }

.container-narrow { max-width: 820px; margin-inline: auto; }
.container-wide   { max-width: 1440px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: 'Sora', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ss-accent-600);
    margin-bottom: 1.125rem;
}
.eyebrow::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--ss-accent);
}
.bg-ink .eyebrow, .bg-ink-deep .eyebrow { color: var(--ss-accent); }

.lead-lg {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.65;
    color: var(--ss-muted);
}
.bg-ink .lead-lg { color: rgba(255,255,255,.72); }

.text-muted-soft { color: var(--ss-muted) !important; }

.rule { height: 1px; background: var(--ss-line); border: 0; opacity: 1; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-padding-y: .875rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-border-radius: var(--ss-radius);
    font-family: 'Sora', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: all .3s var(--ss-ease);
    border-width: 1px;
}

.btn-brand {
    background: var(--ss-ink);
    border-color: var(--ss-ink);
    color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
    background: var(--ss-ink-600);
    border-color: var(--ss-ink-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
}

.btn-accent {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: var(--ss-ink);
}
.btn-accent:hover, .btn-accent:focus {
    background: var(--ss-accent-600);
    border-color: var(--ss-accent-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
}

.btn-outline-brand {
    border-color: var(--ss-ink);
    color: var(--ss-ink);
    background: transparent;
}
.btn-outline-brand:hover {
    background: var(--ss-ink);
    color: #fff;
    transform: translateY(-2px);
}

.btn-outline-light-brand {
    border-color: rgba(255,255,255,.45);
    color: #fff;
    background: transparent;
}
.btn-outline-light-brand:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ss-ink);
    transform: translateY(-2px);
}

.btn-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Sora', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ss-ink);
}
.btn-link-arrow svg { transition: transform .3s var(--ss-ease); }
.btn-link-arrow:hover { color: var(--ss-accent-600); }
.btn-link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    height: var(--ss-header-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background .35s var(--ss-ease), box-shadow .35s var(--ss-ease), height .35s var(--ss-ease);
}
.site-header.is-solid,
.site-header.is-open,
body.has-solid-header .site-header {
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 var(--ss-line);
    height: 72px;
}

.site-header .navbar-brand { display: flex; align-items: center; gap: .75rem; }
.site-header .brand-mark {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #fff;
    transition: color .35s var(--ss-ease);
}
.site-header .brand-mark small {
    display: block;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .7;
}
.site-header .brand-logo { height: 42px; width: auto; }

.site-header .nav-link {
    font-family: 'Sora', sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.88);
    padding: .5rem .95rem !important;
    position: relative;
}
.site-header .nav-link::after {
    content: '';
    position: absolute;
    left: .95rem;
    right: .95rem;
    bottom: .1rem;
    height: 1px;
    background: var(--ss-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ss-ease);
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .nav-link:hover, .site-header .nav-link.active { color: #fff; }

.site-header.is-solid .brand-mark,
.site-header.is-open .brand-mark,
body.has-solid-header .site-header .brand-mark { color: var(--ss-ink); }
.site-header.is-solid .nav-link,
.site-header.is-open .nav-link,
body.has-solid-header .site-header .nav-link { color: var(--ss-body); }
.site-header.is-solid .nav-link:hover,
.site-header.is-solid .nav-link.active,
body.has-solid-header .site-header .nav-link:hover,
body.has-solid-header .site-header .nav-link.active { color: var(--ss-ink); }

.navbar-toggler {
    border: 0;
    padding: .5rem;
    width: 44px;
    height: 44px;
}
.navbar-toggler:focus { box-shadow: none; }
.burger { display: block; width: 24px; height: 14px; position: relative; }
.burger span {
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background: #fff;
    transition: all .3s var(--ss-ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }
.site-header.is-solid .burger span,
.site-header.is-open .burger span,
body.has-solid-header .site-header .burger span { background: var(--ss-ink); }
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mega-menu {
    border: 0;
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-lg);
    padding: 1.5rem;
    margin-top: .75rem;
    min-width: 620px;
}
.mega-menu .dropdown-item {
    border-radius: var(--ss-radius);
    padding: .625rem .875rem;
    font-size: .9375rem;
    white-space: normal;
    transition: background .2s var(--ss-ease);
}
.mega-menu .dropdown-item:hover { background: var(--ss-surface-alt); color: var(--ss-ink); }

@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        background: #fff;
        margin: 0 -12px;
        padding: 1.25rem 1.5rem 2rem;
        box-shadow: var(--ss-shadow-md);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
    .site-header .nav-link,
    .site-header.is-solid .nav-link { color: var(--ss-ink) !important; padding: .75rem 0 !important; }
    .site-header .nav-link::after { display: none; }
    .mega-menu { min-width: 0; box-shadow: none; padding: 0 0 0 .75rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; height: 100vh; min-height: 620px; max-height: 940px; }
.hero .swiper, .hero .swiper-wrapper, .hero .swiper-slide { height: 100%; }

.hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
}
.hero-slide__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    transition: transform 7s var(--ss-ease);
}
.swiper-slide-active .hero-slide__media { transform: scale(1); }
.hero-slide__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(8,24,44,.88) 0%, rgba(8,24,44,.62) 45%, rgba(8,24,44,.28) 100%);
}
.hero-slide__content { position: relative; z-index: 2; color: #fff; max-width: 780px; padding-top: var(--ss-header-h); }
.hero-slide__content .eyebrow { color: var(--ss-accent); }
.hero-slide__title {
    color: #fff;
    font-size: clamp(2.5rem, 6.2vw, 5rem);
    line-height: 1.04;
    margin-bottom: 1.5rem;
}
.hero-slide__text {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    color: rgba(255,255,255,.85);
    max-width: 620px;
    margin-bottom: 2.5rem;
}

.hero-controls {
    position: absolute;
    z-index: 5;
    bottom: 2.5rem;
    right: max(1.5rem, calc((100vw - 1320px) / 2));
    display: flex;
    align-items: center;
    gap: .75rem;
}
.hero-arrow {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    transition: all .3s var(--ss-ease);
    cursor: pointer;
}
.hero-arrow:hover { background: #fff; color: var(--ss-ink); border-color: #fff; }
.hero-pagination { display: flex; gap: .5rem; align-items: center; margin-right: .5rem; }
.hero-pagination .swiper-pagination-bullet {
    width: 28px; height: 2px; border-radius: 0;
    background: rgba(255,255,255,.4); opacity: 1;
    transition: background .3s var(--ss-ease), width .3s var(--ss-ease);
}
.hero-pagination .swiper-pagination-bullet-active { background: var(--ss-accent); width: 44px; }

.hero-scroll {
    position: absolute;
    left: max(1.5rem, calc((100vw - 1320px) / 2));
    bottom: 2.75rem;
    z-index: 5;
    color: rgba(255,255,255,.7);
    font-size: .6875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: .75rem;
}
.hero-scroll::after {
    content: '';
    width: 44px; height: 1px;
    background: rgba(255,255,255,.5);
    animation: scrollLine 2.2s var(--ss-ease) infinite;
}
@keyframes scrollLine { 0%,100% { transform: scaleX(.4); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } }

/* Inner page banner */
.page-hero {
    position: relative;
    padding: calc(var(--ss-header-h) + 5rem) 0 5rem;
    background: var(--ss-ink);
    color: #fff;
    overflow: hidden;
}
.page-hero__media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .38;
}
.page-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,24,44,.94), rgba(8,24,44,.55));
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: 1rem; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 700px; font-size: 1.125rem; }

.breadcrumb-bar { --bs-breadcrumb-divider-color: rgba(255,255,255,.4); }
.breadcrumb-bar .breadcrumb { margin: 0 0 1.25rem; font-size: .8125rem; letter-spacing: .04em; }
.breadcrumb-bar .breadcrumb-item, .breadcrumb-bar .breadcrumb-item a { color: rgba(255,255,255,.65); }
.breadcrumb-bar .breadcrumb-item a:hover { color: #fff; }
.breadcrumb-bar .breadcrumb-item.active { color: var(--ss-accent); }
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card-elegant {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius-lg);
    overflow: hidden;
    transition: transform .45s var(--ss-ease), box-shadow .45s var(--ss-ease), border-color .45s var(--ss-ease);
}
.card-elegant:hover {
    transform: translateY(-6px);
    box-shadow: var(--ss-shadow-lg);
    border-color: transparent;
}
.card-elegant__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ss-surface-alt); }
.card-elegant__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ss-ease);
}
.card-elegant:hover .card-elegant__media img { transform: scale(1.06); }
.card-elegant__body { padding: 1.75rem; }
.card-elegant__title { font-size: 1.1875rem; margin-bottom: .625rem; }
.card-elegant__text { font-size: .9375rem; color: var(--ss-muted); margin-bottom: 1.25rem; }

.card-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 2;
    background: rgba(255,255,255,.94);
    color: var(--ss-ink);
    font-family: 'Sora', sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .375rem .75rem;
    border-radius: 2px;
}

/* Service card with icon */
.service-card { display: block; height: 100%; padding: 2.25rem 1.875rem; background: #fff;
    border: 1px solid var(--ss-line); border-radius: var(--ss-radius-lg);
    transition: all .4s var(--ss-ease); position: relative; overflow: hidden; }
.service-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--ss-accent); transform: scaleY(0); transform-origin: top;
    transition: transform .45s var(--ss-ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--ss-shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleY(1); }
.service-card__icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    background: var(--ss-surface-alt);
    color: var(--ss-ink);
    border-radius: var(--ss-radius);
    margin-bottom: 1.5rem;
    transition: all .4s var(--ss-ease);
}
.service-card:hover .service-card__icon { background: var(--ss-ink); color: var(--ss-accent); }
.service-card h3 { font-size: 1.125rem; margin-bottom: .625rem; }
.service-card p { font-size: .9375rem; color: var(--ss-muted); margin-bottom: 1.25rem; }

/* Project tile — large photography */
.project-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--ss-radius-lg);
    background: var(--ss-ink);
}
.project-tile--wide { aspect-ratio: 16 / 10; }
.project-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ss-ease), opacity .5s var(--ss-ease);
}
.project-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,24,44,.92) 0%, rgba(8,24,44,.35) 45%, rgba(8,24,44,0) 75%);
    transition: opacity .5s var(--ss-ease);
}
.project-tile:hover img { transform: scale(1.06); }
.project-tile__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 2rem 1.875rem;
    color: #fff;
    transform: translateY(8px);
    transition: transform .5s var(--ss-ease);
}
.project-tile:hover .project-tile__body { transform: translateY(0); }
.project-tile__cat {
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ss-accent); display: block; margin-bottom: .5rem;
}
.project-tile__title { color: #fff; font-size: 1.25rem; margin: 0; }

/* Process steps */
.process-step { position: relative; padding-top: 2.25rem; }
.process-step__num {
    font-family: 'Sora', sans-serif;
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200,161,90,.55);
    display: block;
    margin-bottom: 1rem;
}
.process-step h3 { font-size: 1.125rem; margin-bottom: .625rem; }
.process-step p { font-size: .9375rem; color: var(--ss-muted); }
.bg-ink .process-step p, .bg-ink-deep .process-step p { color: rgba(255,255,255,.65); }
.process-step::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 1rem;
    height: 1px; background: var(--ss-line);
}
.bg-ink .process-step::before, .bg-ink-deep .process-step::before { background: rgba(255,255,255,.15); }

/* Feature / why-choose-us */
.feature-item { display: flex; gap: 1.25rem; }
.feature-item__icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--ss-accent);
    color: var(--ss-accent-600);
    border-radius: 50%;
}
.bg-ink .feature-item__icon { color: var(--ss-accent); }
.feature-item h3 { font-size: 1.0625rem; margin-bottom: .375rem; }
.feature-item p { font-size: .9375rem; color: var(--ss-muted); margin: 0; }
.bg-ink .feature-item p { color: rgba(255,255,255,.68); }

/* Stats */
.stat-block { text-align: center; padding: 1.25rem .5rem; }
.stat-block__value {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 700;
    color: var(--ss-ink);
    line-height: 1;
    letter-spacing: -.03em;
}
.bg-ink .stat-block__value { color: var(--ss-accent); }
.stat-block__label {
    font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ss-muted); margin-top: .625rem;
}
.bg-ink .stat-block__label { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonial-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius-lg);
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
}
.testimonial-card__stars { color: var(--ss-accent); font-size: .9375rem; letter-spacing: .1em; margin-bottom: 1.25rem; }
.testimonial-card__quote { font-size: 1.0625rem; line-height: 1.7; color: var(--ss-body); flex: 1 1 auto; margin-bottom: 1.75rem; }
.testimonial-card__person { display: flex; align-items: center; gap: .875rem; padding-top: 1.5rem; border-top: 1px solid var(--ss-line); }
.testimonial-card__person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial-card__name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: .9375rem; color: var(--ss-ink); line-height: 1.3; }
.testimonial-card__company { font-size: .8125rem; color: var(--ss-muted); }

/* --------------------------------------------------------------------------
   Instagram grid
   -------------------------------------------------------------------------- */

.ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 576px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ig-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.ig-tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ss-radius);
    background: var(--ss-surface-alt);
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ss-ease); }
.ig-tile__overlay {
    position: absolute; inset: 0;
    background: rgba(8,24,44,.78);
    color: #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .625rem; padding: 1rem; text-align: center;
    opacity: 0; transition: opacity .35s var(--ss-ease);
}
.ig-tile:hover img { transform: scale(1.07); }
.ig-tile:hover .ig-tile__overlay { opacity: 1; }
.ig-tile__caption { font-size: .8125rem; line-height: 1.45; color: rgba(255,255,255,.9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.ig-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ig-filter {
    border: 1px solid var(--ss-line);
    background: #fff;
    color: var(--ss-body);
    border-radius: 999px;
    padding: .5rem 1.125rem;
    font-size: .8125rem;
    font-weight: 500;
    transition: all .25s var(--ss-ease);
    cursor: pointer;
}
.ig-filter:hover { border-color: var(--ss-ink); color: var(--ss-ink); }
.ig-filter.active { background: var(--ss-ink); border-color: var(--ss-ink); color: #fff; }

.ig-placeholder-note {
    font-size: .8125rem;
    color: var(--ss-muted);
}

/* --------------------------------------------------------------------------
   Gallery / lightbox triggers
   -------------------------------------------------------------------------- */

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gallery-item {
    position: relative; display: block; aspect-ratio: 4/3;
    overflow: hidden; border-radius: var(--ss-radius); background: var(--ss-surface-alt);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ss-ease); }
.gallery-item::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(8,24,44,.35);
    opacity: 0; transition: opacity .35s var(--ss-ease);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */

.accordion-clean .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--ss-line);
    background: transparent;
}
.accordion-clean .accordion-button {
    font-family: 'Sora', sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ss-ink);
    background: transparent;
    padding: 1.5rem 3rem 1.5rem 0;
    box-shadow: none;
}
.accordion-clean .accordion-button:not(.collapsed) { color: var(--ss-accent-600); background: transparent; }
.accordion-clean .accordion-button:focus { box-shadow: none; }
.accordion-clean .accordion-button::after { margin-left: auto; }
.accordion-clean .accordion-body { padding: 0 3rem 1.75rem 0; color: var(--ss-muted); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-label {
    font-family: 'Sora', sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ss-ink);
    margin-bottom: .5rem;
}
.form-control, .form-select {
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    padding: .875rem 1.125rem;
    font-size: .9375rem;
    background-color: #fff;
    transition: border-color .25s var(--ss-ease), box-shadow .25s var(--ss-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ss-ink);
    box-shadow: 0 0 0 3px rgba(11,31,58,.08);
}
.form-control::placeholder { color: #a7b0bc; }
textarea.form-control { min-height: 150px; resize: vertical; }
.form-check-input:checked { background-color: var(--ss-ink); border-color: var(--ss-ink); }
.form-text { font-size: .8125rem; color: var(--ss-muted); }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

.form-panel {
    background: #fff;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--ss-shadow-sm);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
    position: relative;
    background: var(--ss-surface-dark);
    color: #fff;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0;
}
.cta-band__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; }
.cta-band::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(1000px 400px at 15% 20%, rgba(200,161,90,.16), transparent 65%);
}
.cta-band > .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.75); }

/* --------------------------------------------------------------------------
   Article / prose
   -------------------------------------------------------------------------- */

.prose { font-size: 1.0625rem; line-height: 1.8; color: var(--ss-body); }
.prose h2 { font-size: 1.75rem; margin: 2.75rem 0 1rem; }
.prose h3 { font-size: 1.375rem; margin: 2.25rem 0 .875rem; }
.prose p { margin-bottom: 1.5rem; }
.prose ul, .prose ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.prose li { margin-bottom: .625rem; }
.prose img { border-radius: var(--ss-radius-lg); margin: 2rem 0; }
.prose blockquote {
    margin: 2rem 0;
    padding: .25rem 0 .25rem 1.75rem;
    border-left: 3px solid var(--ss-accent);
    font-size: 1.1875rem;
    font-style: italic;
    color: var(--ss-ink);
}
.prose a { color: var(--ss-accent-600); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; margin: 2rem 0; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: .875rem 1rem; border: 1px solid var(--ss-line); text-align: left; }
.prose th { background: var(--ss-surface-alt); font-family: 'Sora', sans-serif; font-weight: 600; color: var(--ss-ink); }

.post-meta { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-muted); }

.tag-pill {
    display: inline-block;
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    padding: .375rem .875rem;
    font-size: .75rem;
    color: var(--ss-muted);
    transition: all .25s var(--ss-ease);
}
.tag-pill:hover, .tag-pill.active { background: var(--ss-ink); border-color: var(--ss-ink); color: #fff; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ss-surface-dark); color: rgba(255,255,255,.62); padding-top: clamp(3.5rem, 7vw, 6rem); }
.site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; }
.site-footer .footer-heading {
    font-family: 'Sora', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ss-accent);
    margin-bottom: 1.375rem;
}
.site-footer a { color: rgba(255,255,255,.62); font-size: .9375rem; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .75rem; }
.site-footer .footer-brand { font-family: 'Sora', sans-serif; font-size: 1.375rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: 1.75rem 0;
    font-size: .8125rem;
}

.social-link {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: rgba(255,255,255,.72);
    transition: all .3s var(--ss-ease);
}
.social-link:hover { background: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-ink); transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.alert { border: 0; border-left: 3px solid; border-radius: var(--ss-radius); font-size: .9375rem; padding: 1rem 1.25rem; }
.alert-success { border-left-color: #1a7f5a; background: #e9f6f1; color: #146245; }
.alert-danger  { border-left-color: #b3261e; background: #fdeceb; color: #8c1d18; }

.page-link { border-color: var(--ss-line); color: var(--ss-ink); padding: .625rem 1rem; }
.page-item.active .page-link { background: var(--ss-ink); border-color: var(--ss-ink); }
.page-link:hover { background: var(--ss-surface-alt); color: var(--ss-ink); }

.back-to-top {
    position: fixed;
    right: 1.5rem; bottom: 1.5rem;
    z-index: 1020;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--ss-ink);
    color: #fff;
    border: 0; border-radius: 50%;
    box-shadow: var(--ss-shadow-md);
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: all .35s var(--ss-ease);
    cursor: pointer;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--ss-accent); color: var(--ss-ink); }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--ss-muted); }
.empty-state svg { color: var(--ss-line); margin-bottom: 1.25rem; }

/* Skeleton for lazily loaded images */
img[loading="lazy"] { background: var(--ss-surface-alt); }

/* AOS — keep motion subtle and respect user preference */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-aos] { opacity: 1 !important; transform: none !important; }
    .hero-slide__media { transform: none !important; }
}

@media print {
    .site-header, .site-footer, .back-to-top, .cta-band, .hero-controls { display: none !important; }
    body { color: #000; }
}