/* =============================================
   Alio Foundry — Design System v2
   Warm editorial aesthetic / Cormorant + DM Sans
   ============================================= */

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

:root{
    --ink:#0a0f1a;
    --paper:#f8f6f2;
    --warm:#eee9e0;
    --warm-deep:#e3ddd2;
    --accent:#b8860b;
    --accent-light:#d4a843;
    --accent-dim:rgba(184,134,11,0.10);
    --muted:#6b6560;
    --muted-light:#8a8580;
    --border:#d5d0c8;
    --glass:rgba(248,246,242,0.88);
}

html{scroll-behavior:smooth}
body{
    font-family:'DM Sans',sans-serif;
    background:var(--paper);
    color:var(--muted);
    line-height:1.7;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
}

.container{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---- Entry Animations ---- */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
}
.fade-up{animation:fadeUp 0.6s ease both}
.fade-up-1{animation-delay:0.1s}
.fade-up-2{animation-delay:0.2s}
.fade-up-3{animation-delay:0.3s}
.fade-up-4{animation-delay:0.4s}
.fade-up-5{animation-delay:0.5s}

/* =============================================
   NAVIGATION
   ============================================= */
nav{
    position:fixed;top:0;width:100%;
    background:var(--glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    z-index:200;
    padding:18px 0;
}
.nav-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{
    font-family:'Cormorant Garamond',serif;
    font-size:1.4rem;
    font-weight:500;
    color:var(--ink);
    text-decoration:none;
    letter-spacing:0.02em;
}
.logo span{color:var(--accent)}
.nav-links{
    display:flex;
    gap:28px;
    list-style:none;
    align-items:center;
}
.nav-links a{
    font-family:'DM Sans',sans-serif;
    color:var(--muted);
    text-decoration:none;
    font-size:0.85rem;
    font-weight:400;
    letter-spacing:0.01em;
    transition:color 0.2s;
}
.nav-links a:hover{color:var(--ink)}
.nav-btn{
    background:var(--ink);
    color:var(--paper);
    border:none;
    padding:10px 22px;
    border-radius:2px;
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    cursor:pointer;
    transition:all 0.2s;
}
.nav-btn:hover{background:var(--accent);transform:translateY(-1px)}
.mobile-btn{
    display:none;
    background:none;
    border:none;
    color:var(--ink);
    font-size:1.5rem;
    cursor:pointer;
    line-height:1;
}
/* Mobile nav open state */
nav.nav-open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:var(--paper);border-bottom:1px solid var(--border);padding:16px 32px 24px;gap:16px}
nav.nav-open .nav-btn{display:block;margin:8px 32px 0;width:calc(100% - 64px)}

/* =============================================
   HERO
   ============================================= */
.hero{
    padding:140px 0 100px;
}
.hero .container{position:relative;z-index:1}
.hero-content{max-width:860px}
.hero-eyebrow{
    display:inline-block;
    font-family:'DM Sans',sans-serif;
    font-size:0.7rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.22em;
    color:var(--accent);
    background:var(--accent-dim);
    border:1px solid rgba(184,134,11,0.2);
    padding:6px 14px;
    border-radius:2px;
    margin-bottom:28px;
}
.hero h1{
    font-size:clamp(2.4rem, 5vw, 3.8rem);
    font-weight:300;
    color:var(--ink);
    line-height:1.1;
    margin-bottom:20px;
    letter-spacing:-0.01em;
}
.hero h1 em{
    font-style:italic;
    color:var(--accent);
}
.hero-subtitle{
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;
    font-style:italic;
    font-weight:400;
    color:var(--ink);
    opacity:0.8;
    margin-bottom:20px;
    line-height:1.5;
}
.hero p{
    font-size:1rem;
    color:var(--muted);
    margin-bottom:36px;
    max-width:760px;
    line-height:1.8;
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* =============================================
   BUTTONS
   ============================================= */
.btn{
    display:inline-block;
    padding:13px 26px;
    border-radius:2px;
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.08em;
    text-decoration:none;
    transition:all 0.2s;
    cursor:pointer;
    border:none;
    line-height:1;
}
.btn-primary{
    background:var(--ink);
    color:var(--paper);
}
.btn-primary:hover{
    background:var(--accent);
    transform:translateY(-2px);
}
.btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--ink);
}
.btn-ghost:hover{
    border-color:var(--accent);
    color:var(--accent);
}
.btn-ghost-light{
    background:transparent;
    color:var(--paper);
    border:1px solid rgba(248,246,242,0.4);
}
.btn-ghost-light:hover{
    border-color:var(--accent-light);
    color:var(--accent-light);
}

/* =============================================
   INTELLIGENCE BANNER
   ============================================= */
.intel-banner{
    background:var(--ink);
    padding:14px 0;
    text-align:center;
}
.intel-banner-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}
.intel-badge{
    font-family:'DM Sans',sans-serif;
    font-size:0.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--ink);
    background:var(--accent);
    padding:3px 8px;
    border-radius:2px;
}
.intel-banner a{
    font-family:'DM Sans',sans-serif;
    font-size:0.85rem;
    color:rgba(248,246,242,0.85);
    text-decoration:none;
    transition:color 0.2s;
}
.intel-banner a:hover{color:var(--accent-light)}

/* =============================================
   STATS BAR
   ============================================= */
.stats-bar{
    background:var(--paper);
    border-bottom:1px solid var(--border);
}
.stats-bar-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.stat-item{
    padding:36px 32px;
    text-align:center;
    border-right:1px solid var(--border);
}
.stat-item:last-child{border-right:none}
.stat-num{
    font-family:'Cormorant Garamond',serif;
    font-size:2.6rem;
    font-weight:300;
    color:var(--ink);
    line-height:1;
    margin-bottom:8px;
}
.stat-lbl{
    font-family:'DM Sans',sans-serif;
    font-size:0.72rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--muted-light);
}

/* =============================================
   SECTION SHARED STYLES
   ============================================= */
section{padding:80px 0;position:relative}
.sec-label{
    font-family:'DM Sans',sans-serif;
    font-size:0.7rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.22em;
    color:var(--accent);
    margin-bottom:14px;
}
.sec-title{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.8rem, 4vw, 2.8rem);
    font-weight:300;
    color:var(--ink);
    line-height:1.2;
    margin-bottom:16px;
}
.sec-title em{font-style:italic}
.sec-sub{
    font-size:1rem;
    color:var(--muted);
    max-width:640px;
    line-height:1.75;
}
.sec-head{margin-bottom:48px}
.sec-head-center{text-align:center}
.sec-head-center .sec-sub{margin:0 auto}

/* =============================================
   INTRO BLURB
   ============================================= */
.intro-section{
    padding:32px 0 72px;
    background:var(--paper);
}
.intro-inner{
    max-width:860px;
    text-align:left;
}
.intro-inner p.intro-serif{
    font-family:'Cormorant Garamond',serif;
    font-size:1.35rem;
    font-weight:400;
    color:var(--ink);
    line-height:1.65;
    margin-bottom:20px;
}
.intro-inner p{
    font-size:1rem;
    color:var(--muted);
    line-height:1.8;
}

/* =============================================
   FOUR STEPS TO TRANSFORMATION (dark)
   ============================================= */
.steps-section{
    background:var(--ink);
    padding:80px 0;
}
.steps-section .sec-label{color:var(--accent-light)}
.steps-section .sec-title{color:var(--paper)}
.steps-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:rgba(255,255,255,0.1);
}
.step-card{
    background:var(--ink);
    padding:36px 28px;
    transition:background 0.2s;
}
.step-card:hover{background:rgba(255,255,255,0.04)}
.step-num{
    font-family:'Cormorant Garamond',serif;
    font-size:3.5rem;
    font-weight:300;
    color:rgba(184,134,11,0.25);
    line-height:1;
    margin-bottom:16px;
    letter-spacing:-0.02em;
}
.step-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem;
    font-weight:400;
    color:var(--paper);
    margin-bottom:10px;
    line-height:1.3;
}
.step-desc{
    font-family:'DM Sans',sans-serif;
    font-size:0.82rem;
    color:rgba(248,246,242,0.5);
    font-style:italic;
    line-height:1.55;
    margin-bottom:16px;
}
.step-card ul{
    list-style:none;
    padding:0;
}
.step-card li{
    font-family:'DM Sans',sans-serif;
    font-size:0.85rem;
    color:rgba(248,246,242,0.65);
    line-height:1.65;
    padding:5px 0 5px 16px;
    position:relative;
}
.step-card li::before{
    content:'';
    position:absolute;
    left:0;top:12px;
    width:5px;height:5px;
    background:var(--accent);
    border-radius:50%;
}

/* =============================================
   TOOLS / ACCELERATORS
   ============================================= */
.tools-section{
    background:var(--paper);
    padding:80px 0;
}
.tools-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.tool-card{
    background:var(--paper);
    border:1px solid var(--border);
    padding:32px;
    position:relative;
    transition:border-color 0.2s;
    overflow:hidden;
}
.tool-card::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    height:2px;width:0;
    background:var(--accent);
    transition:width 0.3s ease;
}
.tool-card:hover{border-color:var(--accent)}
.tool-card:hover::after{width:100%}
.tool-card.full-width{
    grid-column:1/-1;
}
.tool-badge{
    display:inline-block;
    font-family:'DM Sans',sans-serif;
    font-size:0.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--accent);
    background:var(--accent-dim);
    border:1px solid rgba(184,134,11,0.2);
    padding:3px 8px;
    border-radius:2px;
    margin-bottom:14px;
}
.tool-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:12px;
    line-height:1.3;
}
.tool-card p{
    font-size:0.9rem;
    color:var(--muted);
    line-height:1.75;
}
.tool-card ul{
    list-style:none;
    padding:0;
    margin-top:12px;
}
.tool-card li{
    font-size:0.88rem;
    color:var(--muted);
    line-height:1.65;
    padding:4px 0 4px 16px;
    position:relative;
}
.tool-card li::before{
    content:'';
    position:absolute;
    left:0;top:11px;
    width:4px;height:4px;
    background:var(--accent);
    border-radius:50%;
}

/* =============================================
   PROTOTYPE & R&D (warm)
   ============================================= */
.proto-section{
    background:var(--warm);
    padding:80px 0;
}
.proto-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:40px;
}
.proto-card{
    background:var(--paper);
    border:1px solid var(--border);
    padding:28px;
    transition:border-color 0.2s;
    position:relative;
    overflow:hidden;
}
.proto-card::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    height:2px;width:0;
    background:var(--accent);
    transition:width 0.3s ease;
}
.proto-card:hover{border-color:var(--accent)}
.proto-card:hover::after{width:100%}
.proto-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:1.1rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:10px;
}
.proto-card p{
    font-size:0.88rem;
    color:var(--muted);
    line-height:1.7;
}
.proto-commitment{
    max-width:700px;
    margin:0 auto;
    text-align:center;
    font-size:0.95rem;
    color:var(--muted);
    line-height:1.8;
    padding:28px;
    border:1px solid var(--border);
    background:rgba(248,246,242,0.6);
}

/* =============================================
   PRINCIPLES (3-col)
   ============================================= */
.principles-section{
    background:var(--paper);
    padding:80px 0;
}
.principles-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.principle-card{
    background:var(--paper);
    border:1px solid var(--border);
    border-top:3px solid transparent;
    padding:28px;
    transition:border-top-color 0.2s, border-color 0.2s;
}
.principle-card:hover{
    border-color:var(--border);
    border-top-color:var(--accent);
}
.principle-card h4{
    font-family:'Cormorant Garamond',serif;
    font-size:1.1rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:10px;
}
.principle-card p{
    font-size:0.88rem;
    color:var(--muted);
    line-height:1.7;
}

/* =============================================
   RESULTS — TABBED (warm)
   ============================================= */
.results-section{
    background:var(--warm);
    padding:80px 0;
}
.tabs{
    display:flex;
    gap:0;
    border-bottom:1px solid var(--border);
    margin-bottom:40px;
}
.tab-btn{
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    font-weight:400;
    color:var(--muted);
    background:none;
    border:none;
    padding:12px 28px;
    cursor:pointer;
    position:relative;
    transition:color 0.2s;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{
    color:var(--ink);
    border-bottom-color:var(--accent);
    font-weight:500;
}
.tab-content{display:none}
.tab-content.active{display:block}

/* Recent Work tab */
.cases-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:48px;
}
.case-card{
    background:var(--paper);
    border:1px solid var(--border);
    padding:32px;
    position:relative;
    overflow:hidden;
    transition:border-color 0.2s;
}
.case-card::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    height:2px;width:0;
    background:var(--accent);
    transition:width 0.3s ease;
}
.case-card:hover{border-color:var(--accent)}
.case-card:hover::after{width:100%}
.case-industry{
    font-family:'DM Sans',sans-serif;
    font-size:0.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:var(--accent);
    background:var(--accent-dim);
    border:1px solid rgba(184,134,11,0.2);
    padding:3px 8px;
    border-radius:2px;
    display:inline-block;
    margin-bottom:14px;
}
.case-card h4{
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:20px;
    line-height:1.3;
}
.case-block{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.case-block:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.case-block-label{
    font-family:'DM Sans',sans-serif;
    font-size:0.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--muted-light);
    display:block;
    margin-bottom:5px;
}
.case-block p{
    font-size:0.85rem;
    color:var(--muted);
    line-height:1.65;
}
.case-metrics{
    display:flex;
    gap:24px;
    padding-top:20px;
    border-top:1px solid var(--border);
    margin-top:20px;
}
.case-metric-num{
    font-family:'Cormorant Garamond',serif;
    font-size:1.6rem;
    font-weight:300;
    color:var(--ink);
    line-height:1;
    display:block;
    margin-bottom:3px;
}
.case-metric-lbl{
    font-family:'DM Sans',sans-serif;
    font-size:0.65rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--muted-light);
}

/* Products tab */
.products-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:48px;
}
.product-card{
    background:var(--paper);
    border:1px solid var(--border);
    padding:32px;
    display:flex;
    flex-direction:column;
    transition:border-color 0.2s;
    position:relative;
    overflow:hidden;
}
.product-card::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    height:2px;width:0;
    background:var(--accent);
    transition:width 0.3s ease;
}
.product-card:hover{border-color:var(--accent)}
.product-card:hover::after{width:100%}
.product-icon{
    width:44px;height:44px;
    background:var(--accent-dim);
    border-radius:2px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
}
.product-icon svg{width:22px;height:22px;stroke:var(--accent)}
.product-badge{
    display:inline-block;
    font-family:'DM Sans',sans-serif;
    font-size:0.6rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.12em;
    padding:2px 8px;
    border-radius:2px;
    margin-bottom:12px;
}
.product-badge.flagship{
    color:var(--accent);
    background:var(--accent-dim);
    border:1px solid rgba(184,134,11,0.2);
}
.product-badge.new{
    color:#fff;
    background:var(--accent);
}
.product-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:10px;
    line-height:1.3;
}
.product-card p{
    font-size:0.87rem;
    color:var(--muted);
    line-height:1.7;
    flex:1;
    margin-bottom:20px;
}
.product-stats{
    display:flex;
    gap:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
    flex-wrap:wrap;
}
.product-stat-num{
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;
    font-weight:300;
    color:var(--ink);
    display:block;
    margin-bottom:2px;
}
.product-stat-lbl{
    font-family:'DM Sans',sans-serif;
    font-size:0.62rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--muted-light);
}

/* Bottom CTA in results */
.results-cta{
    text-align:center;
}
.results-cta h3{
    font-family:'Cormorant Garamond',serif;
    font-size:1.8rem;
    font-weight:300;
    color:var(--ink);
    margin-bottom:20px;
}

/* =============================================
   HOW ENGAGEMENTS BEGIN
   ============================================= */
.engage-section{
    background:var(--paper);
    padding:80px 0;
}
.engage-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.engage-card{
    text-align:center;
    padding:24px 20px;
}
.engage-icon{
    width:56px;height:56px;
    background:var(--accent-dim);
    border-radius:2px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;
    position:relative;
}
.engage-icon svg{width:28px;height:28px;stroke:var(--accent)}
.engage-dot{
    position:absolute;
    top:-3px;right:-3px;
    width:10px;height:10px;
    background:var(--accent);
    border-radius:50%;
    border:2px solid var(--paper);
}
.engage-card h4{
    font-family:'Cormorant Garamond',serif;
    font-size:1.1rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:10px;
}
.engage-card p{
    font-size:0.87rem;
    color:var(--muted);
    line-height:1.7;
}

/* =============================================
   CONTACT (dark)
   ============================================= */
.contact-section{
    background:var(--ink);
    padding:80px 0;
}
.contact-section .sec-label{color:var(--accent-light)}
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
}
.contact-info p{
    font-size:1rem;
    color:rgba(248,246,242,0.7);
    line-height:1.8;
    margin-bottom:28px;
    max-width:360px;
}
.contact-email{
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;
    font-weight:400;
    color:var(--accent-light);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
    transition:color 0.2s;
}
.contact-email:hover{color:var(--paper)}
.contact-email svg{width:20px;height:20px;stroke:currentColor;flex-shrink:0}

/* Form */
form{display:flex;flex-direction:column;gap:12px}
input,select,textarea{
    width:100%;
    padding:13px 16px;
    border:1px solid rgba(213,208,200,0.25);
    border-radius:2px;
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    background:rgba(255,255,255,0.06);
    color:var(--paper);
    transition:border-color 0.2s;
    -webkit-appearance:none;
}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--accent);
}
input::placeholder,textarea::placeholder{color:rgba(248,246,242,0.4)}
select{color:rgba(248,246,242,0.7)}
select option{background:var(--ink);color:var(--paper)}
textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.submit-btn{
    background:var(--paper);
    color:var(--ink);
    border:none;
    padding:14px 28px;
    border-radius:2px;
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    cursor:pointer;
    transition:all 0.2s;
    text-align:center;
}
.submit-btn:hover{background:var(--accent);color:#fff}
.submit-btn:disabled{opacity:0.6;cursor:not-allowed}
.form-status{
    padding:12px 16px;
    border-radius:2px;
    font-size:0.88rem;
    margin-top:4px;
    display:none;
    font-family:'DM Sans',sans-serif;
}
.form-status.success{
    display:block;
    background:rgba(184,134,11,0.15);
    color:var(--accent-light);
    border:1px solid rgba(184,134,11,0.3);
}
.form-status.error{
    display:block;
    background:rgba(220,38,38,0.1);
    color:#f87171;
    border:1px solid rgba(220,38,38,0.25);
}

/* =============================================
   SCROLLING TICKER
   ============================================= */
.ticker-section{
    background:var(--warm);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:20px 0;
    overflow:hidden;
}
.ticker-track{
    display:flex;
    gap:0;
    width:max-content;
    animation:ticker 50s linear infinite;
}
@keyframes ticker{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}
.ticker-item{
    display:flex;
    align-items:center;
    gap:0;
    white-space:nowrap;
    font-family:'DM Sans',sans-serif;
    font-size:0.82rem;
    font-weight:400;
    color:var(--muted);
    letter-spacing:0.02em;
    padding:0 32px;
}
.ticker-item::after{
    content:'·';
    margin-left:32px;
    color:var(--accent);
    font-size:1.2rem;
}

/* =============================================
   FOOTER
   ============================================= */
footer{
    background:var(--paper);
    border-top:1px solid var(--border);
    padding:48px 0 24px;
}
.foot-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:32px;
    margin-bottom:36px;
}
.foot-brand .logo{
    display:inline-block;
    margin-bottom:12px;
}
.foot-brand p{
    font-size:0.85rem;
    color:var(--muted-light);
    max-width:240px;
    line-height:1.65;
}
.foot-col h4{
    font-family:'DM Sans',sans-serif;
    font-size:0.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--ink);
    margin-bottom:16px;
}
.foot-col a{
    display:block;
    font-family:'DM Sans',sans-serif;
    color:var(--muted-light);
    text-decoration:none;
    font-size:0.85rem;
    margin-bottom:10px;
    transition:color 0.2s;
}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    border-top:1px solid var(--border);
}
.foot-bottom p{
    font-size:0.78rem;
    color:var(--muted-light);
}
.foot-legal{display:flex;gap:20px}
.foot-legal a{
    color:var(--muted-light);
    text-decoration:none;
    font-size:0.75rem;
    transition:color 0.2s;
}
.foot-legal a:hover{color:var(--accent)}

/* =============================================
   ABOUT PAGE
   ============================================= */
.page-hero{
    padding:140px 0 72px;
    background:var(--paper);
    border-bottom:1px solid var(--border);
}
.page-hero .sec-label{margin-bottom:12px}
.page-hero h1{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:300;
    color:var(--ink);
    margin-bottom:12px;
}
.page-hero p{
    font-size:1rem;
    color:var(--muted);
    max-width:560px;
    line-height:1.75;
}
.expertise-tag{
    display:inline-block;
    font-family:'DM Sans',sans-serif;
    font-size:0.8rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--ink);
    border:1px solid var(--border);
    padding:10px 20px;
    border-radius:2px;
    background:var(--paper);
}
.about-layout{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:48px;
    align-items:start;
}
.about-text p{
    font-size:0.95rem;
    color:var(--muted);
    line-height:1.8;
    margin-bottom:14px;
}
.about-text p:last-child{margin-bottom:0}
.about-text strong{color:var(--ink);font-weight:500}
.about-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.stat-box{
    background:var(--warm);
    border:1px solid var(--border);
    padding:20px;
    text-align:center;
}
.stat-box-val{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    font-weight:300;
    color:var(--ink);
    line-height:1;
    margin-bottom:6px;
}
.stat-box-lbl{
    font-family:'DM Sans',sans-serif;
    font-size:0.7rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--muted-light);
}
.team-card{
    background:var(--paper);
    border:1px solid var(--border);
    border-top:3px solid var(--accent);
    padding:36px;
}
.team-avatar{
    width:72px;height:72px;
    background:var(--accent-dim);
    border-radius:2px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem;
    font-weight:400;
    color:var(--accent);
}
.team-card h4{
    font-family:'Cormorant Garamond',serif;
    font-size:1.3rem;
    font-weight:400;
    color:var(--ink);
    margin-bottom:4px;
}
.team-role{
    font-family:'DM Sans',sans-serif;
    font-size:0.8rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--accent);
    margin-bottom:18px;
}
.team-card p{
    font-size:0.9rem;
    color:var(--muted);
    line-height:1.8;
    margin-bottom:20px;
}
.team-links{display:flex;gap:12px}
.team-links a{
    font-family:'DM Sans',sans-serif;
    font-size:0.78rem;
    font-weight:500;
    color:var(--accent);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:0.08em;
    border-bottom:1px solid var(--accent);
    padding-bottom:1px;
    transition:color 0.2s,border-color 0.2s;
}
.team-links a:hover{color:var(--ink);border-color:var(--ink)}
.cta-block{
    background:var(--warm);
    border:1px solid var(--border);
    padding:48px;
    text-align:center;
}
.cta-block h2{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.5rem,3vw,2.2rem);
    font-weight:300;
    color:var(--ink);
    margin-bottom:12px;
}
.cta-block p{
    font-size:0.95rem;
    color:var(--muted);
    margin-bottom:28px;
    line-height:1.7;
}

@media(max-width:768px){
    .about-layout{grid-template-columns:1fr}
    .cta-block{padding:32px 20px}
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1000px){
    .steps-grid{grid-template-columns:repeat(2,1fr)}
    .proto-grid{grid-template-columns:repeat(2,1fr)}
    .principles-grid{grid-template-columns:repeat(2,1fr)}
    .engage-grid{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
    .nav-links{display:none}
    .nav-btn{display:none}
    .mobile-btn{display:block}

    .hero{padding:100px 0 60px}

    .stats-bar-grid{grid-template-columns:repeat(2,1fr)}
    .stat-item:nth-child(2){border-right:none}
    .stat-item:nth-child(3){border-right:1px solid var(--border)}
    .stat-item:nth-child(3),.stat-item:nth-child(4){border-top:1px solid var(--border)}

    .steps-grid{grid-template-columns:1fr}
    .tools-grid{grid-template-columns:1fr}
    .tool-card.full-width{grid-column:auto}
    .proto-grid{grid-template-columns:1fr}
    .principles-grid{grid-template-columns:1fr}
    .cases-grid{grid-template-columns:1fr}
    .products-grid{grid-template-columns:1fr}
    .engage-grid{grid-template-columns:repeat(2,1fr)}
    .contact-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr;text-align:center}
    .foot-brand p{max-width:100%}
    .foot-bottom{flex-direction:column;gap:12px;text-align:center}
    .foot-legal{flex-direction:column;gap:8px;text-align:center}
}

@media(max-width:480px){
    .container{padding:0 20px}
    section{padding:56px 0}
    .hero h1{font-size:2.2rem}
    .hero-btns{flex-direction:column}
    .btn{padding:12px 20px}
    .stats-bar-grid{grid-template-columns:1fr}
    .stat-item{border-right:none;border-bottom:1px solid var(--border);padding:24px}
    .stat-item:last-child{border-bottom:none}
    .engage-grid{grid-template-columns:1fr}
    .tabs{overflow-x:auto}
    .tab-btn{padding:10px 16px;font-size:0.82rem}
}