/* =============================================
   OCF Agency 1 — Template Styles
   =============================================
   Monochrome, minimal, techy agency template.
   All colors via var(--ocf-*). Prefix: ag1-
   ============================================= */


/* =============================================
   BASE OVERRIDES — Differentiate from base2
   =============================================
   Rewrites base.css typography, radius, nav,
   buttons, eyebrows, labels.
   ============================================= */

/* --- Tighter radius globally --- */
:root {
    --radius-sm: 4px;
    --radius: 4px;
    --radius-lg: 8px;
}

/* --- Eyebrow: no ALL CAPS, clean --- */
.eyebrow {
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--ocf-label);
}

/* --- Headings: lighter weight, tighter --- */
.heading-section {
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* --- Nav links: normal case --- */
.nav-link {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
    font-size: var(--text-sm);
}

.nav-link::after {
    height: 1.5px;
    background: var(--ocf-heading);
}

/* --- Nav CTA: normal case, sharper --- */
.nav-cta {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    padding: 0.5rem 1.25rem;
}

/* --- Logo text --- */
.nav-logo-text {
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: 1.375rem;
}

@media (min-width: 1024px) {
    .nav-logo-text { font-size: 1.5rem; }
}

.nav-logo-img {
    height: 2.75rem;
    width: auto;
    display: block;
    max-height: 100%;
}

@media (min-width: 1024px) {
    .nav-logo-img { height: 3.25rem; }
}

.footer-logo-img {
    height: 2.75rem;
    width: auto;
    display: block;
    margin-bottom: 1rem;
    background: var(--ocf-bg);
    padding: 0.375rem;
    border-radius: 8px;
    max-height: 100%;
}

@media (min-width: 1024px) {
    .footer-logo-img { height: 3.25rem; }
}

/* --- Buttons: no uppercase --- */
.btn-primary {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius);
}

.btn-ghost {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    padding: 0.875rem 1.75rem;
}

.btn-secondary {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* --- Text label: no uppercase --- */
.text-label {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
}

/* --- Cards: sharper --- */
.card { border-radius: var(--radius); }
.card:hover { transform: translateY(-1px); }

/* --- Trust stats: normal case --- */
.trust-stat-value {
    font-weight: 500;
    letter-spacing: -0.03em;
}

.trust-stat-label {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
}

/* --- Footer headings: normal case --- */
.footer-heading {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    font-size: var(--text-sm);
}

.footer-brand-name {
    letter-spacing: -0.02em;
    font-weight: 700;
}

.footer-brand-location {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: var(--text-xs);
    font-weight: 500;
}

/* --- Dropdown items --- */
.dropdown-item { font-weight: 500; }

/* --- Mobile menu: normal case --- */
.mobile-link {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
    font-size: var(--text-sm);
}

.mobile-accordion-trigger {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
    font-size: var(--text-sm);
}

/* --- Page header on dark --- */
.page-header .heading-section { font-weight: 500; }

/* --- Post card meta --- */
.post-card-meta {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* --- Booking wizard --- */
.bw-step-badge {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.bw-title {
    font-weight: 500;
    letter-spacing: -0.03em;
}

.bw-field-label {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.bw-btn--next {
    text-transform: none;
    letter-spacing: 0.01em;
}

.bw-logo-text {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* --- Form submit --- */
.form-submit-btn,
.hero-form-card .form-submit-btn {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
    border-radius: var(--radius);
}

.hero-form-card .hero-form-title {
    font-weight: 600;
    letter-spacing: -0.02em;
}


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

.ag1-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ocf-bg-dark);
    margin-top: -5rem;
}

@media (min-width: 1024px) {
    .ag1-hero { margin-top: -6rem; }
}

/* ─── Hero background image ─── */

.ag1-hero-bg {
    position: absolute;
    inset: 0;
}

.ag1-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.ag1-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(9, 9, 11, 0.94) 0%,
        rgba(9, 9, 11, 0.85) 40%,
        rgba(9, 9, 11, 0.70) 100%
    );
    z-index: 1;
}

/* trimmed for brevity in this interface */