:root{
    --bg:#F3EEE5;
    --paper:#FBF7EF;
    --paper-2:#EFE6DA;
    --ink:#292827;
    --muted:#6F675F;
    --soft:#B9AA98;
    --line:#D8CCBE;
    --dark:#292827;
    --accent:#A88758;
    --accent-soft:#D8C3A4;

    --max:1680px;
    --container:clamp(320px, 88vw, var(--max));
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at 18% 22%, rgba(168,135,88,.12), transparent 32%),
        radial-gradient(circle at 82% 78%, rgba(168,135,88,.08), transparent 34%),
        linear-gradient(180deg, #F7F1E8 0%, var(--bg) 48%, #EFE6DA 100%);
    color:var(--ink);
    font-family:"Inter",sans-serif;
    overflow-x:hidden;
}

body.modal-open{
    overflow:hidden;
}

/* HEADER */

.site-header{
    position:fixed;
    top:24px;
    left:50%;
    transform:translateX(-50%);
    z-index:50;

    width:var(--container);
    padding:18px 22px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    background:rgba(251,247,239,.78);
    border:1px solid rgba(216,204,190,.65);
    border-radius:999px;
    backdrop-filter:blur(18px);
    box-shadow:0 20px 60px rgba(41,40,39,.08);
}

.logo{
    color:var(--ink);
    text-decoration:none;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.site-nav{
    display:flex;
    gap:34px;
}

.site-nav a{
    color:var(--muted);
    text-decoration:none;
    font-size:.9rem;
    transition:.25s ease;
}

.site-nav a:hover{
    color:var(--ink);
}

.language{
    justify-self:end;
    display:flex;
    gap:8px;
    color:var(--muted);
    font-size:.85rem;
}

/* HERO */

.hero{
    min-height:100svh;
    padding:120px 0 80px;
    display:flex;
    align-items:center;
}

.hero-inner{
    width:var(--container);
    margin:0 auto;

    display:grid;
    grid-template-columns:minmax(0, 900px) minmax(460px, 620px);
    gap:clamp(48px, 5vw, 96px);
    align-items:center;

    position:relative;
}

.hero-inner::before{
    content:"";
    position:absolute;
    left:-3vw;
    top:10%;
    width:38%;
    height:74%;
    background:rgba(251,247,239,.32);
    border:1px solid rgba(216,204,190,.28);
    border-radius:44px;
    z-index:-1;
    box-shadow:0 30px 90px rgba(41,40,39,.035);
}

.hero-copy{
    padding:70px 0 40px;
    position:relative;
    z-index:2;
}

.eyebrow{
    display:inline-flex;
    margin-bottom:22px;
    color:var(--accent);
    font-size:.86rem;
    letter-spacing:.08em;
}

.hero h1{
    font-family:"Newsreader",serif;
    font-weight:500;
    font-size:clamp(4.2rem, 6.2vw, 8rem);
    line-height:.9;
    letter-spacing:-.068em;
    max-width:920px;
    margin-bottom:42px;
}

.hero-description{
    max-width:650px;
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.9;
}

.hero-actions{
    margin-top:42px;
    display:flex;
    gap:16px;
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 26px;
    border-radius:999px;
    font-size:.92rem;
    font-weight:700;
    text-decoration:none;
    transition:.25s ease;
}

.button-dark{
    background:var(--dark);
    color:var(--bg);
    box-shadow:0 18px 42px rgba(41,40,39,.18);
}

.button-dark:hover{
    transform:translateY(-3px);
}

.button-light{
    color:var(--ink);
    background:rgba(251,247,239,.78);
    border:1px solid var(--line);
}

.button-light:hover{
    border-color:var(--accent);
    color:var(--accent);
}

/* DARK ANCHOR */

.hero-note{
    width:100%;
    min-height:clamp(360px, 34vw, 500px);

    padding:48px;
    border-radius:42px;

    background:
        radial-gradient(circle at 84% 86%, rgba(168,135,88,.34), transparent 25%),
        linear-gradient(145deg, #31302F 0%, #222120 100%);

    color:var(--bg);
    box-shadow:0 46px 120px rgba(41,40,39,.28);

    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    transform:translateY(clamp(0px, 2vw, 28px));
    animation:fadeUpNote .75s ease .12s both;
}

.hero-note::before{
    content:"";
    position:absolute;
    inset:14px;
    border:1px solid rgba(243,238,229,.10);
    border-radius:32px;
    pointer-events:none;
}

.hero-note::after{
    content:"";
    position:absolute;
    right:-70px;
    bottom:-80px;
    width:230px;
    height:230px;
    border-radius:50%;
    background:var(--accent);
    opacity:.16;
}

.hero-note span{
    display:block;
    color:var(--accent-soft);
    font-size:.72rem;
    letter-spacing:.20em;
    text-transform:uppercase;
}

.hero-note p{
    position:relative;
    z-index:1;
    font-family:"Newsreader",serif;
    font-size:clamp(1.75rem, 2.15vw, 2.75rem);
    line-height:1.04;
    letter-spacing:-.035em;
    max-width:390px;
    opacity:.94;
}

/* SECTIONS */

.mindset,
.placeholder-section{
    width:var(--container);
    margin:0 auto;
    padding:95px 0;

    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:54px;
}

.section-meta span{
    display:block;
    font-family:"Newsreader",serif;
    font-size:5.3rem;
    line-height:.85;
    color:rgba(168,135,88,.28);
    margin-bottom:18px;
}

.section-meta p{
    color:var(--muted);
    font-size:.82rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    max-width:140px;
}

.mindset{
    position:relative;
}

.mindset::before{
    content:"";
    position:absolute;
    inset:32px -2vw;
    background:rgba(251,247,239,.32);
    border-top:1px solid rgba(216,204,190,.45);
    border-bottom:1px solid rgba(216,204,190,.45);
    z-index:-1;
}

.mindset-content h2,
.placeholder-content h2{
    font-family:"Newsreader",serif;
    font-weight:500;
    letter-spacing:-.055em;
}

.mindset-content h2{
    max-width:850px;
    font-size:clamp(2.3rem, 3.5vw, 4.2rem);
    line-height:1.02;
    margin-bottom:56px;
}

.mindset-list{
    display:grid;
    gap:0;
    max-width:1040px;
    border-top:1px solid rgba(216,204,190,.58);
    border-bottom:1px solid rgba(216,204,190,.58);
}

.mindset-list article{
    display:grid;
    grid-template-columns:54px 260px minmax(0,1fr);
    gap:30px;
    align-items:start;

    padding:30px 4px;
    background:transparent;
    border-bottom:1px solid rgba(216,204,190,.48);

    transition:.25s ease;
}

.mindset-list article:last-child{
    border-bottom:0;
}

.mindset-list article:hover{
    transform:translateX(12px);
}

.mindset-list article > span{
    color:var(--accent);
    font-size:.82rem;
    font-weight:700;
}

.mindset-list h3{
    font-family:"Newsreader",serif;
    font-size:1.65rem;
    font-weight:500;
    line-height:1.1;
}

.mindset-list p{
    max-width:660px;
    color:var(--muted);
    font-size:.98rem;
    line-height:1.75;
}

/* PROJECTS */

.projects-preview{
    display:block;
}

.projects-preview h2{
    margin-bottom:56px;
}

.project-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
    max-width:1180px;
}

.project-card{
    padding:30px;
    border-radius:30px;
    background:rgba(251,247,239,.68);
    border:1px solid rgba(216,204,190,.62);
    cursor:pointer;
    transition:.25s ease;
}

.project-card:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 70px rgba(41,40,39,.08);
}

.project-card span{
    display:block;
    color:var(--accent);
    font-size:.78rem;
    font-weight:700;
    margin-bottom:18px;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.project-card h3{
    font-family:"Newsreader",serif;
    font-size:1.8rem;
    font-weight:500;
    line-height:1.1;
    margin-bottom:16px;
}

.project-card p{
    color:var(--muted);
    line-height:1.75;
    font-size:.98rem;
}

.project-link{
    margin-top:24px;
    border:0;
    background:transparent;
    color:var(--accent);
    font-weight:700;
    font-size:.9rem;
    cursor:pointer;
    padding:0;
}

.project-link:disabled{
    color:var(--soft);
    cursor:not-allowed;
}

/* CONTACT */

.contact-section{
    padding-bottom:130px;
}

.contact-content{
    display:block;
}

.contact-content h2{
    max-width:980px;
}

.contact-content > p{
    margin-top:26px;
    max-width:720px;
    color:var(--muted);
    font-size:1.06rem;
    line-height:1.8;
}

.contact-links{
    margin-top:54px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
    max-width:1080px;
}

.contact-card{
    position:relative;
    min-height:190px;
    padding:28px;
    border-radius:30px;

    background:rgba(251,247,239,.68);
    border:1px solid rgba(216,204,190,.62);

    text-decoration:none;
    color:var(--ink);

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    transition:.25s ease;
}

.contact-card:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 70px rgba(41,40,39,.08);
    border-color:rgba(168,135,88,.45);
}

.contact-card span{
    display:block;
    color:var(--accent);
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.contact-card strong{
    display:block;
    margin-top:22px;
    font-family:"Newsreader",serif;
    font-size:1.9rem;
    font-weight:500;
    line-height:1.05;
}

.contact-card small{
    display:block;
    margin-top:16px;
    color:var(--muted);
    font-size:.92rem;
    line-height:1.5;
    word-break:break-word;
}

.contact-card em{
    position:absolute;
    right:26px;
    bottom:22px;

    color:var(--accent);
    font-style:normal;
    font-size:1.2rem;
}

/* CASE MODAL */

.case-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:32px;
}

.case-overlay.is-open{
    display:flex;
}

.case-backdrop{
    position:absolute;
    inset:0;
    background:rgba(41,40,39,.38);
    backdrop-filter:blur(10px);
}

.case-modal{
    position:relative;
    z-index:1;
    width:min(980px, 92vw);
    max-height:88vh;
    overflow-y:auto;

    background:var(--paper);
    color:var(--ink);
    border:1px solid rgba(216,204,190,.8);
    border-radius:36px;
    padding:58px;

    box-shadow:0 50px 140px rgba(41,40,39,.30);
    animation:caseIn .22s ease both;
}

.case-close{
    position:sticky;
    top:0;
    margin-left:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(251,247,239,.85);
    color:var(--ink);
    font-size:1.4rem;
    cursor:pointer;
}

.case-kicker{
    display:block;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:18px;
}

.case-modal h2{
    font-family:"Newsreader",serif;
    font-size:clamp(2.7rem, 5vw, 5.4rem);
    line-height:.96;
    letter-spacing:-.055em;
    font-weight:500;
    max-width:760px;
    margin-bottom:54px;
}

.case-modal section{
    border-top:1px solid rgba(216,204,190,.7);
    padding-top:28px;
    margin-top:36px;
}

.case-modal h3{
    font-family:"Newsreader",serif;
    font-size:1.8rem;
    font-weight:500;
    margin-bottom:18px;
}

.case-modal p,
.case-modal li{
    color:var(--muted);
    font-size:1rem;
    line-height:1.8;
    max-width:720px;
}

.case-modal p + p{
    margin-top:14px;
}

.case-modal ul{
    padding-left:20px;
}

.case-chapters{
    display:grid;
    border-top:1px solid rgba(216,204,190,.7);
    border-bottom:1px solid rgba(216,204,190,.7);
}

.case-chapters button{
    display:grid;
    grid-template-columns:60px 1fr;
    gap:20px;
    align-items:center;

    padding:22px 0;
    border:0;
    border-bottom:1px solid rgba(216,204,190,.55);
    background:transparent;

    color:var(--ink);
    font-family:"Inter",sans-serif;
    font-size:1rem;
    text-align:left;
    cursor:pointer;
}

.case-chapters button:last-child{
    border-bottom:0;
}

.case-chapters button:hover{
    color:var(--accent);
}

.case-chapters button:disabled{
    cursor:not-allowed;
    color:var(--soft);
}

.case-chapters span{
    color:var(--accent);
    font-weight:700;
    font-size:.82rem;
}

.case-view{
    display:none;
}

.case-view-active{
    display:block;
}

.case-back{
    border:0;
    background:transparent;
    color:var(--accent);
    font-weight:700;
    margin-bottom:34px;
    cursor:pointer;
}

@keyframes caseIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* ANIMATIONS */

.hero-copy,
.mindset-content{
    animation:fadeUp .75s ease both;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(22px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeUpNote{
    from{
        opacity:0;
        transform:translateY(calc(clamp(0px, 2vw, 28px) + 22px));
    }

    to{
        opacity:1;
        transform:translateY(clamp(0px, 2vw, 28px));
    }
}

/* LARGE DESKTOP */

@media(min-width:1800px){
    .hero-inner{
        grid-template-columns:920px 660px;
    }

    .hero h1{
        font-size:8.4rem;
    }

    .hero-note{
        min-height:500px;
    }
}

/* LAPTOP / SMALL DESKTOP */

@media(max-width:1300px){
    .hero-inner{
        grid-template-columns:minmax(0, 760px) minmax(420px, 560px);
        gap:48px;
    }

    .hero h1{
        font-size:clamp(4rem, 6.4vw, 7rem);
        max-width:820px;
    }

    .hero-note{
        padding:42px;
    }

    .project-list{
        grid-template-columns:1fr;
        max-width:760px;
    }

    .contact-links{
    grid-template-columns:1fr;
    max-width:760px;
}
}

/* TABLET */

@media(max-width:1050px){
    .hero{
        align-items:flex-start;
        min-height:auto;
        padding:130px 0 88px;
    }

    .hero-inner{
        grid-template-columns:1fr;
        gap:48px;
    }

    .hero-inner::before{
        width:100%;
        left:0;
        top:5%;
        height:45%;
    }

    .hero-copy{
        padding:48px 0 0;
    }

    .hero h1{
        max-width:820px;
    }

    .hero-note{
        max-width:720px;
        min-height:340px;
        transform:none;
    }

    @keyframes fadeUpNote{
        from{
            opacity:0;
            transform:translateY(22px);
        }

        to{
            opacity:1;
            transform:translateY(0);
        }
    }

    .mindset,
    .placeholder-section{
        grid-template-columns:1fr;
        gap:42px;
    }

    .mindset-list article{
        grid-template-columns:60px 1fr;
    }

    .mindset-list p{
        grid-column:2;
    }
}

/* MOBILE */

@media(max-width:760px){
    :root{
        --container:calc(100vw - 32px);
    }

    .site-header{
        top:14px;
        width:calc(100vw - 28px);
        grid-template-columns:1fr auto;
        padding:15px 17px;
    }

    .site-nav{
        display:none;
    }

    .logo{
        font-size:.72rem;
        letter-spacing:.16em;
    }

    .language{
        font-size:.78rem;
    }

    .hero{
        min-height:auto;
        padding:110px 0 72px;
    }

    .hero-copy{
        padding:34px 0 0;
    }

    .eyebrow{
        font-size:.78rem;
        margin-bottom:18px;
    }

    .hero h1{
        font-size:clamp(3.35rem, 15.5vw, 5.2rem);
        line-height:.92;
        letter-spacing:-.06em;
        max-width:100%;
        margin-bottom:32px;
    }

    .hero-description{
        font-size:1rem;
        line-height:1.75;
    }

    .hero-actions{
        margin-top:34px;
        flex-direction:column;
        align-items:flex-start;
    }

    .button{
        padding:14px 22px;
    }

    .hero-note{
        min-height:280px;
        padding:32px;
        border-radius:30px;
    }

    .hero-note::before{
        inset:10px;
        border-radius:22px;
    }

    .hero-note p{
        font-size:clamp(1.8rem, 8.6vw, 2.35rem);
        max-width:320px;
    }

    .mindset,
    .placeholder-section{
        padding:82px 0;
    }

    .section-meta span{
        font-size:4.4rem;
    }

    .mindset-content h2,
    .placeholder-content h2{
        font-size:clamp(2.3rem, 10vw, 3.5rem);
    }

    .mindset-list article{
        grid-template-columns:1fr;
        gap:14px;
        padding:24px 0;
    }

    .mindset-list p{
        grid-column:1;
    }

    .case-overlay{
        padding:14px;
    }

    .case-modal{
        padding:34px 26px;
        border-radius:28px;
    }

    .case-close{
        width:36px;
        height:36px;
    }

    .case-chapters button{
        grid-template-columns:44px 1fr;
    }

    .contact-section{
        padding-bottom:90px;
    }

    .contact-links{
        margin-top:38px;
    }

    .contact-card{
        min-height:160px;
        padding:24px;
    }
}

/* SMALL MOBILE */

@media(max-width:420px){
    .hero h1{
        font-size:clamp(3rem, 15vw, 4.2rem);
    }

    .hero-note{
        padding:28px;
    }

    .hero-note p{
        font-size:1.75rem;
    }
}