:root {
    --ebGaramond: 'EB Garamond', serif;
    --manrope: 'Manrope', sans-serif;
}
.font-headline-md { font-family: var(--ebGaramond); }
.font-headline-lg { font-family: var(--ebGaramond); }
.font-display-lg  { font-family: var(--ebGaramond); }
.font-body-md     { font-family: var(--manrope); }
.font-body-lg     { font-family: var(--manrope); }
.font-label-caps  { font-family: var(--manrope); text-transform: uppercase; }

.glass-nav     { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.organic-shadow{ box-shadow: 0 10px 30px -10px rgba(6,27,14,.05); }

.hero-scene {
    position: relative;
    height: 100svh;
}

.hero {
    position: relative;
    height: 100svh;
    overflow: hidden;
}

/* ── FULL-BLEED IMAGE ── */
.hero .visual {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero .visual .img-wrap {
    position: absolute;
    inset: -6% -4% -6% -2%;
}

.hero .visual img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 60%;
}

/* bottom vignette on the image */
.hero .visual::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(130% 100% at 70% 40%, transparent 55%, rgba(6,27,14,.22) 100%);
}

/* ── GRADIENT OVERLAY — cream bleeds seamlessly into image ── */
.hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        #fbf9f4                   0%,
        #fbf9f4                  30%,
        rgba(251,249,244,.97)    40%,
        rgba(251,249,244,.82)    50%,
        rgba(251,249,244,.45)    60%,
        rgba(251,249,244,.12)    70%,
        transparent              80%
    );
}

/* subtle grain texture over the reading area */
.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 2;
    width: 50%;
    background-image: radial-gradient(rgba(6,27,14,.045) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: .5;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    pointer-events: none;
}

/* ── LEFT COPY ── */
.hero .copy {
    position: relative;
    z-index: 3;
    height: 100%;
    width: 50%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px clamp(28px, 4.5vw, 80px) 80px;
}

.hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: Manrope, sans-serif;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #1b3022;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero .eyebrow .rule {
    width: 40px; height: 1.5px;
    background: #1b3022;
    display: inline-block;
    transform-origin: left;
}

.hero .headline {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-size: clamp(48px, 6.2vw, 96px);
    line-height: .98;
    letter-spacing: -.01em;
    color: #061b0e;
}

.hero .headline .accent-word { font-style: italic; color: #1f4d2f; }
.hero .headline .amp         { font-weight: 400; font-style: italic; }

.hero .subline {
    margin-top: 28px;
    max-width: 44ch;
    font-family: Manrope, sans-serif;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.7;
    font-weight: 300;
    color: #3a4a3f;
}

.hero .actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* Hero buttons */
.hero-btn {
    font-family: Manrope, sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    cursor: pointer; border-radius: 44px;
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; border: none;
    transition: transform .25s cubic-bezier(.22,.61,.36,1),
                background .4s cubic-bezier(.22,.61,.36,1),
                color .4s cubic-bezier(.22,.61,.36,1),
                box-shadow .4s cubic-bezier(.22,.61,.36,1);
}

.hero-btn-primary {
    background: #1b3022; color: #fbf9f4;
    border: 1.5px solid #1b3022; padding: 15px 30px;
    box-shadow: 0 10px 26px -10px rgba(27,48,34,.65);
}
.hero-btn-primary:hover {
    background: #061b0e; border-color: #061b0e;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(6,27,14,.75);
}
.hero-btn-primary .arrow { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.hero-btn-primary:hover .arrow { transform: translateX(5px); }

.hero-btn-ghost { background: transparent; color: #061b0e; padding: 15px 6px; }
.hero-btn-ghost .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2f6b42;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.hero-btn-ghost:hover .dot { transform: scale(1.8); }
.hero-btn-ghost u {
    text-decoration: none;
    background: linear-gradient(#061b0e, #061b0e) 0 100% / 0 1.5px no-repeat;
    transition: background-size .35s cubic-bezier(.22,.61,.36,1);
    padding-bottom: 3px;
}
.hero-btn-ghost:hover u { background-size: 100% 1.5px; }

/* Trust strip */
.hero .trust {
    display: flex; gap: 28px; margin-top: 56px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(6,27,14,.14);
    padding-top: 24px; max-width: 500px;
}
.hero .trust .item { display: flex; flex-direction: column; gap: 3px; }
.hero .trust .num {
    font-family: 'EB Garamond', serif;
    font-size: 28px; font-weight: 600; line-height: 1; color: #061b0e;
}
.hero .trust .lbl {
    font-family: Manrope, sans-serif;
    font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
    color: #4e616a; font-weight: 600;
}

/* Scroll cue */
.hero .scroll-cue {
    position: absolute; z-index: 4;
    left: clamp(28px, 4.5vw, 80px); bottom: 34px;
    display: flex; align-items: center; gap: 12px;
    font-family: Manrope, sans-serif; font-size: 10px;
    letter-spacing: .24em; text-transform: uppercase; color: #4e616a;
}
.hero .scroll-cue .track {
    width: 1.5px; height: 34px;
    background: rgba(6,27,14,.14);
    position: relative; overflow: hidden;
}
.hero .scroll-cue .track::after {
    content: ""; position: absolute; left: 0; top: 0;
    width: 100%; height: 10px; background: #1b3022;
    animation: heroTrack 1.9s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes heroTrack {
    0%        { transform: translateY(-10px); }
    60%, 100% { transform: translateY(34px); }
}

/* ── ENTRANCE ANIMATIONS ── */

.hero .reveal { opacity: 0; transform: translateY(26px); filter: blur(4px); }
.hero.is-in .reveal {
    opacity: 1; transform: none; filter: blur(0);
    transition: opacity 1.1s cubic-bezier(.22,.61,.36,1),
                transform 1.1s cubic-bezier(.22,.61,.36,1),
                filter 1.1s cubic-bezier(.22,.61,.36,1);
}
.hero.is-in .d2 { transition-delay: .18s; }
.hero.is-in .d4 { transition-delay: .42s; }
.hero.is-in .d5 { transition-delay: .56s; }
.hero.is-in .d6 { transition-delay: .70s; }
.hero.is-in .d7 { transition-delay: .70s; }

/* Headline per-line clip reveal */
.hero .h-line { display: block; overflow: hidden; }
.hero .h-line span { display: block; transform: translateY(110%); transition: transform 1.3s cubic-bezier(.22,.61,.36,1); }
.hero.is-in .h-line span { transform: none; }
.hero.is-in .h-line:nth-child(1) span { transition-delay: .22s; }
.hero.is-in .h-line:nth-child(2) span { transition-delay: .36s; }
.hero.is-in .h-line:nth-child(3) span { transition-delay: .50s; }

/* Image slides in from the right — matches text completion at ~1.8s */
.hero .visual { clip-path: inset(0 0 0 100%); transition: clip-path 1.8s cubic-bezier(.22,.61,.36,1); }
.hero.is-in .visual { clip-path: inset(0 0 0 0%); }

/* Eyebrow rule */
.hero .reveal-rule { transform: scaleX(0); }
.hero.is-in .reveal-rule { transform: scaleX(1); transition: transform 1s cubic-bezier(.22,.61,.36,1) .18s; }

/* ── HEADER ── */
header {
    transition: all 1s cubic-bezier(0, 0, .2, 1);
}

/* ── MOBILE NAV MENU ── */
/* Smooth entrance when the panel opens */
#mobile-menu { overflow: hidden; }
#mobile-menu:not(.hidden) {
    animation: mobileMenuIn .34s cubic-bezier(.22, .61, .36, 1);
}
@keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Inner list — give rows a little breathing room from the edges */
#mobile-menu > div {
    gap: 2px;
    padding-left: 6px;
    padding-right: 6px;
}

/* Each nav row as a tappable pill */
#mobile-menu .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 10px;
    color: #4e616a;
    letter-spacing: .12em;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .25s ease, color .25s ease,
                padding-left .25s cubic-bezier(.22, .61, .36, 1);
}

/* Hairline divider between rows */
#mobile-menu .nav-link:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 1px;
    background: rgba(115, 121, 115, .14);
}

/* Hover + tap feedback */
#mobile-menu .nav-link:hover {
    background: rgba(208, 233, 212, .45);
    color: #061b0e;
}
#mobile-menu .nav-link:active {
    background: rgba(208, 233, 212, .75);
    transform: scale(.99);
}

/* Active page — replace the desktop underline with a left accent bar + tint */
#mobile-menu .nav-link.text-primary {
    background: rgba(208, 233, 212, .55);
    color: #061b0e !important;
    font-weight: 700;
    padding-left: 24px;
    border-bottom: 0 !important;
    padding-bottom: 14px !important;
}
#mobile-menu .nav-link.text-primary::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: #061b0e;
}

@media (prefers-reduced-motion: reduce) {
    #mobile-menu:not(.hidden) { animation: none; }
    #mobile-menu .nav-link { transition: none; }
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .hero .copy {
        width: 100%;
        padding-top: 110px; padding-bottom: 50px;
        justify-content: flex-start;
        /* cream top fades to transparent so image shows through below */
        background: linear-gradient(180deg, #fbf9f4 55%, rgba(251,249,244,.6) 80%, transparent 100%);
    }
    .hero::after {
        background: linear-gradient(180deg,
            rgba(251,249,244,.98) 0%,
            rgba(251,249,244,.85) 50%,
            rgba(251,249,244,.2)  80%,
            transparent 100%
        );
    }
    .hero::before { width: 100%; }
    .hero .scroll-cue { display: none; }
}

@media (max-width: 520px) {
    .hero .headline { font-size: clamp(40px, 12vw, 58px); }
    .hero .trust { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero .reveal, .hero .h-line span {
        opacity: 1 !important; transform: none !important; filter: none !important;
    }
    .hero .visual { clip-path: none !important; }
    .hero .scroll-cue .track::after { animation: none !important; }
}