:root {
    --ease-out: cubic-bezier(.22, .8, .24, 1);
}

/* Visible keyboard focus everywhere */
:focus-visible {
    outline: 3px solid var(--amber-light);
    outline-offset: 3px;
}

::selection {
    background: var(--amber);
    color: var(--ink);
}

/* Header: gains depth once the page is scrolled */
.site-header {
    transition: box-shadow .3s ease, background .3s ease;
}

.site-header.scrolled {
    background: rgba(17, 20, 22, .985);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

/* Active section in the navigation */
.nav-links a.active {
    color: var(--amber-light);
}

.nav-links a.active::after {
    transform: scaleX(1);
}

/* Scroll progress bar (created by enhancements.js) */
.scroll-progress {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--amber), var(--amber-light));
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* Hero: one orchestrated entrance, like metal being poured */
.hero-section::before {
    position: absolute;
    inset: -20%;
    background: radial-gradient(40% 45% at 78% 70%, rgba(213, 138, 50, .22), transparent 70%);
    content: "";
    animation: ember-drift 9s ease-in-out infinite alternate;
    pointer-events: none;
}

.hero-section::after {
    transform-origin: left;
    animation: pour-line 1.6s var(--ease-out) .5s both;
}

.hero-content > * {
    animation: rise-in .9s var(--ease-out) both;
}

.hero-content > h1 { animation-delay: .1s; }
.hero-content > p { animation-delay: .3s; }
.hero-content > .hero-buttons { animation-delay: .5s; }
.hero-content > .hero-caption { animation-delay: .7s; }

.hero-caption::before {
    width: 36px;
    height: 1px;
    background: var(--amber);
    content: "";
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@keyframes pour-line {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes ember-drift {
    from { transform: translate3d(-3%, 2%, 0) scale(1); }
    to { transform: translate3d(3%, -3%, 0) scale(1.12); }
}

/* Scroll reveals (only active when JS is running) */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: var(--d, 0s);
}

.js .reveal.in {
    opacity: 1;
    transform: none;
}

/* Section titles: amber rule draws itself once visible */
.js .section-title::after {
    transform: scaleX(0);
    transition: transform .8s var(--ease-out) .25s;
}

.js .in .section-title::after,
.js .section-title.in::after {
    transform: scaleX(1);
}

/* Hover refinements */
.service-tile:hover img,
.service-tile.active img {
    transform: scale(1.06);
}

.btn-primary,
.submit-btn {
    position: relative;
    overflow: hidden;
}

.btn-primary::after,
.submit-btn::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    content: "";
    transform: translateX(-120%);
    transition: transform .6s ease;
}

.btn-primary:hover::after,
.submit-btn:hover::after {
    transform: translateX(120%);
}

.value-card .value-icon,
.summary-icon {
    transition: transform .3s var(--ease-out);
}

.value-card:hover .value-icon,
.summary-item:hover .summary-icon {
    transform: translateY(-4px) scale(1.12);
}

/* Back to top button (created by enhancements.js) */
.to-top {
    position: fixed;
    z-index: 15;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--amber);
    border-radius: 50%;
    background: var(--graphite);
    color: var(--amber-light);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
}

.to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.to-top:hover {
    background: var(--amber);
    color: var(--ink);
}

/* Slightly tighter, more readable body copy in dense cards */
.card p,
.principle-card p,
.value-card p {
    max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
    .hero-section::before { animation: none; }
    .hero-content > * { animation: none; }
    .js .reveal { opacity: 1; transform: none; }
    .scroll-progress { display: none; }
}