/* ============================================================
   LACRM.CSS — Less Annoying CRM shared design system
   One file to rule them all. All pages link to this.
   Do not add page-specific styles here.
============================================================ */

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

/* ── Tokens ── */
:root {
    --page:      #EEF2F7;
    --warm:      #F9F8F5;
    --white:     #FFFFFF;
    --primary:   #486581;
    --amber:     #F5A623;
    --dark:      #1A1A2E;
    --mid:       #6B7280;
    --coral:     #F2A59D;
    --lavender:  #B8B0D4;
    --teal:      #8ECAC1;
    --border:    #E2E8F0;
    --r:         8px;
    --serif:     'DM Serif Display', Georgia, serif;
    --sans:      'Instrument Sans', system-ui, sans-serif;
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.0625rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --tracking-tight: -0.03em;
    --tracking-snug:  -0.02em;
    --tracking-wide:   0.07em;
    --leading-display: 1.08;
    --leading-heading: 1.18;
    --leading-body:    1.7;
}

/* ── Base ── */
html, body {
    font-family: var(--sans);
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--dark);
    background: var(--page);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
}

/* ── Typography helpers ── */
.sec-title {
    font-family: var(--serif);
    font-size: clamp(var(--text-3xl), 3.5vw, 2.875rem);
    font-weight: 400;
    line-height: var(--leading-heading);
    letter-spacing: -0.035em;
    color: var(--dark);
    max-width: 680px;
    margin: 0 auto 1rem;
}
.eyebrow {
    display: inline-block;
    font-family: var(--sans);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.7;
    margin-bottom: 0.875rem;
}
.section-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.25rem;
}

/* Italic phrase with amber squiggle underline */
.italic-phrase { position: relative; display: inline-block; }
.italic-phrase em { font-style: italic; font-weight: 400; }
.squiggle {
    position: absolute; bottom: -11px; left: -3px;
    width: calc(100% + 6px); height: 14px;
    overflow: visible; pointer-events: none;
}

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-weight: 500; font-size: var(--text-sm);
    border-radius: var(--r); border: 2px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    letter-spacing: 0.01em;
    transition: opacity .15s, background .15s, color .15s;
}
.btn-lg  { font-size: 0.9375rem; padding: .75rem 1.625rem; }
.btn-sm  { font-size: var(--text-sm); padding: .5rem 1.125rem; }
.btn-amber   { background: var(--amber);   color: var(--dark);    border-color: var(--amber);   }
.btn-amber:hover   { opacity: .88; }
.btn-outline { background: var(--white);   color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-filled  { background: var(--primary); color: #fff;           border-color: var(--primary); }
.btn-filled:hover  { opacity: .88; }
.btn-ghost   { background: transparent;    color: var(--primary); border-color: transparent; }
.btn-ghost:hover   { background: rgba(72,101,129,.08); }
.btn-white   { background: var(--white);   color: var(--primary); border-color: var(--white); }
.btn-white:hover   { opacity: .88; }

/* ── Section wrappers ── */
.sec         { padding: 6.25rem clamp(1.5rem, 5vw, 4rem); }
.sec-warm    { background: var(--warm); }
.sec-page    { background: var(--page); }
.sec-white   { background: var(--white); }
.sec-primary { background: var(--primary); }
.sec-hd      { text-align: center; margin-bottom: 3.5rem; }
.sec-body {
    font-family: var(--sans); font-size: var(--text-md);
    font-weight: 400; color: var(--mid);
    line-height: var(--leading-body);
    max-width: 500px; margin: 0 auto;
}

/* ── Navbar ── */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: var(--white); border-bottom: 1px solid var(--border);
    height: 64px; display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.nav-brand-text { font-family: var(--sans); font-size: var(--text-base); font-weight: 500; color: var(--primary); letter-spacing: -0.015em; }
.nav-links {
    display: flex; align-items: center; list-style: none;
    position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links > li { position: relative; }
.nav-links > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 0 13px; height: 64px;
    font-family: var(--sans); font-size: var(--text-sm); font-weight: 500;
    color: var(--dark); text-decoration: none; white-space: nowrap;
}
.nav-links > li > a:hover { color: var(--primary); }
.nav-links > li > a.nav-active { color: var(--primary); }
.nav-caret { font-size: .6rem; opacity: .5; margin-top: 1px; transition: transform .15s; }
.has-dropdown:hover .nav-caret { transform: rotate(180deg); }
.dropdown {
    position: absolute; top: calc(100% - 1px); left: 50%;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r);
    box-shadow: 0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    padding: .4375rem 0; min-width: 190px;
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition: opacity .15s, transform .15s; z-index: 200;
}
.has-dropdown:hover .dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown a {
    display: block; padding: .5625rem 1.125rem;
    font-family: var(--sans); font-size: var(--text-sm); font-weight: 400;
    color: var(--dark); text-decoration: none; white-space: nowrap;
}
.dropdown a:hover { background: var(--page); color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--dark);
    flex-shrink: 0;
    line-height: 0;
}
.nav-hamburger .icon-close { display: none; }
.navbar.nav-open .nav-hamburger .icon-menu  { display: none; }
.navbar.nav-open .nav-hamburger .icon-close { display: block; }

/* ── Footer ── */
.footer { background: var(--dark); padding: 4.5rem clamp(1.5rem, 5vw, 4rem) 3rem; }
.footer-inner {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 3rem; align-items: start;
    max-width: 1160px; margin: 0 auto 3rem;
}
.ft-logo    { height: 28px; width: auto; filter: brightness(0) invert(1); display: block; margin-bottom: .75rem; }
.ft-tagline { font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: rgba(255,255,255,.5); line-height: 1.6; max-width: 180px; }
.ft-cols    { display: flex; gap: 3rem; justify-content: center; }
.ft-col h4  { font-family: var(--sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 1rem; }
.ft-col ul  { list-style: none; }
.ft-col li  { margin-bottom: .5625rem; }
.ft-col a   { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: rgba(255,255,255,.6); text-decoration: none; }
.ft-col a:hover { color: #fff; }
.ft-right   { font-family: var(--sans); font-size: var(--text-sm); font-weight: 400; color: rgba(255,255,255,.65); line-height: 1.6; text-align: right; max-width: 200px; }
.ft-right-links { margin-top: .875rem; display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; }
.ft-right-links a { font-size: var(--text-xs); color: rgba(255,255,255,.32); text-decoration: none; }
.ft-right-links a:hover { color: rgba(255,255,255,.65); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.10); padding-top: 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1160px; margin: 0 auto;
    font-family: var(--sans); font-size: var(--text-xs); font-weight: 400; color: rgba(255,255,255,.3);
}

/* ── Responsive ── */
@media (max-width: 960px) {
    /* Navbar — hamburger drawer */
    .navbar { height: auto; min-height: 64px; flex-wrap: wrap; }
    .nav-brand { height: 64px; }
    .nav-hamburger { display: flex; align-items: center; justify-content: center; height: 64px; margin-left: auto; }
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        position: static;
        transform: none;
        left: auto;
        padding: .375rem 0 .5rem;
        border-top: 1px solid var(--border);
    }
    .nav-links > li > a { height: auto; padding: .6875rem clamp(1.5rem, 5vw, 2.5rem); }
    .nav-actions {
        display: none;
        width: 100%;
        padding: .875rem clamp(1.5rem, 5vw, 2.5rem) 1.25rem;
        border-top: 1px solid var(--border);
    }
    .navbar.nav-open .nav-links { display: flex; }
    .navbar.nav-open .nav-actions { display: flex; }
    .nav-actions .btn { flex: 1; }
    /* Dropdowns always visible inside open mobile menu */
    .navbar.nav-open .dropdown {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        min-width: unset;
        background: var(--white);
    }
    .navbar.nav-open .dropdown a {
        padding: .5rem clamp(1.5rem, 5vw, 2.5rem);
        padding-left: calc(clamp(1.5rem, 5vw, 2.5rem) + 1.25rem);
    }

    /* Footer */
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
    .ft-right { text-align: left; }
    .ft-right-links { align-items: flex-start; }
    .ft-cols { flex-wrap: wrap; gap: 2rem; justify-content: flex-start; }
}