/*
Theme Name: Elourdi Studio
Author: Elourdi Studio
Description: Luxe, responsive website voor marketing, webdesign en zakelijke diensten.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: elourdi-studio
*/
:root{color-scheme:dark;--bg:#11110f;--panel:#1a1916;--paper:#f4efe4;--muted:#b8b0a2;--gold:#e5c183;--line:#39352e;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--paper);font:15px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{opacity:.45;cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.045em}
h1{font-size:clamp(3rem,7vw,6.6rem)}
h2{font-size:clamp(2rem,4.8vw,4rem)}
h3{font-size:1.15rem;font-weight:600;line-height:1.3}
em{color:var(--gold);font-weight:400}
small{color:var(--muted)}
p{overflow-wrap:anywhere}
.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}
.top{position:sticky;top:0;z-index:5;background:#11110ff7;border-bottom:1px solid #2d2a25}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:7px;font-family:var(--serif);font-size:1.42rem;white-space:nowrap}
.brand-studio{color:var(--gold);font-style:italic}
.mark{display:inline-grid;place-items:center;width:35px;height:35px;border:1px solid #6f5937;color:var(--gold);margin-right:5px;font-size:1.25rem;line-height:1}
nav{display:flex;gap:clamp(12px,2.4vw,35px);align-items:center;color:var(--muted);font-size:.85rem}
nav a:hover,nav [aria-current]{color:var(--gold)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:11px 16px;min-height:44px;border:1px solid transparent;font-weight:650;font-size:.85rem;line-height:1.35;border-radius:3px}
.gold{background:var(--gold);color:#20180e}
.gold:hover{background:#f2d39c}
.line{background:transparent;border-color:#50463a}
.line:hover{border-color:var(--gold);color:var(--gold)}
.hero{display:grid;grid-template-columns:1.06fr 1fr;gap:clamp(25px,5vw,74px);align-items:center;padding-block:clamp(54px,8vw,108px)}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:.69rem;font-weight:700;letter-spacing:.2em;color:var(--gold)}
.eyebrow i{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);display:inline-block}
.intro{color:var(--muted);font-size:1.02rem;max-width:510px;margin-block:25px 30px}
.hero-actions,.actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-art{aspect-ratio:1.08;position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid #5d4c37;background:radial-gradient(ellipse at 49% 52%,#64472b 0%,#38291d 45%,#211b15 80%);isolation:isolate}
.hero-art::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 23px,#fff1 24px 25px),repeating-linear-gradient(0deg,transparent 0 23px,#fff1 24px 25px);mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.art-letter{font:italic clamp(120px,24vw,340px)/.8 var(--serif);letter-spacing:-.19em;margin:-12% 14% 0 0;color:#f0cc8d;text-shadow:0 14px 32px #1d140d;transform:rotate(-9deg)}
.art-letter span{color:#ae824e}
.orbit{position:absolute;width:75%;height:47%;border:1px solid #d8ad6f66;border-radius:50%;transform:rotate(-33deg);z-index:-1}
.orbit-2{width:84%;height:51%;transform:rotate(-23deg)}
.orbit-3{width:70%;height:58%;transform:rotate(-53deg)}
.art-top,.art-bottom{position:absolute;left:5%;right:5%;display:flex;justify-content:space-between;color:#e2be86;font-size:clamp(.52rem,1vw,.72rem);letter-spacing:.16em}
.art-top{top:5%;align-items:center}.art-top span:first-child{font-size:1.5rem}.art-bottom{bottom:5%}
.section{padding-block:clamp(52px,7vw,90px)}
.services{background:#181713;border-block:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.section-head>p{max-width:345px;color:var(--muted)}
.service-grid,.process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.service-card{min-height:235px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);background:#201e19;padding:22px}
.card-top,.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--gold);font-size:.77rem}
.service-icon{font-size:1.45rem;line-height:1}
.service-card p,.process p{color:var(--muted);font-size:.9rem}
.card-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.card-bottom a{display:grid;place-items:center;width:38px;height:38px;border:1px solid #695336;font-size:1.12rem}
.card-bottom a:hover{background:var(--gold);color:var(--bg)}
.process{margin-bottom:30px}
.process article{border-top:1px solid var(--line);padding:20px 0}
.process small{color:var(--gold)}
.process h3{margin-block:10px}
main{min-height:calc(100vh - 175px)}
footer{border-top:1px solid var(--line)}
.footer{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:.8rem}
.footer .brand{color:var(--paper)}
.inner{padding-block:50px 75px}
.inner h1{font-size:clamp(2.7rem,7vw,5.7rem);margin-bottom:22px}
.inner h2{font-size:clamp(1.6rem,4vw,2.7rem)}
.panel{border:1px solid var(--line);background:var(--panel);padding:clamp(15px,3vw,25px);border-radius:4px}
.form{display:grid;gap:16px;max-width:740px;margin-block:20px}
.form .button{justify-self:start}
label{display:grid;gap:5px;color:var(--muted);font-size:.85rem;font-weight:550;min-width:0}
input,select,textarea{width:100%;color:var(--paper);background:#11110f;border:1px solid #5b5144;border-radius:3px;padding:10px;min-height:44px}
textarea{min-height:95px;resize:vertical}
.fields,.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.filters{grid-template-columns:minmax(0,2fr) minmax(0,1fr);margin-block:20px 8px}
.check{display:flex;align-items:center;gap:8px}
.check input{width:18px;min-height:18px;accent-color:var(--gold)}
.flash{padding-top:15px}
.notice{background:#1d3126;color:#cbefd9;border:1px solid #4f775d;padding:10px 15px}
.error{background:#382018;color:#ffd3bc;border-color:#794634}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-block:20px}
.metric{display:grid;text-align:left;gap:6px}
.metric:hover,.project:hover{border-color:#9a7a4d}
.metric strong{font-family:var(--serif);font-size:clamp(1.25rem,3vw,2.3rem);font-weight:400;color:var(--gold);line-height:1.1}
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin-block:24px}
.tabs button{min-height:42px;padding:7px 13px;background:transparent;border:1px solid var(--line);border-radius:3px}
.tabs button[aria-pressed=true]{background:var(--gold);color:var(--bg)}
.project-list{display:grid;gap:8px;margin-top:15px}
.project{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px;text-align:left;background:#201f1a;border:1px solid var(--line);border-radius:3px}
.project strong,.project small{display:block;overflow-wrap:anywhere}
.project>span:last-child{color:var(--gold);white-space:nowrap;font-size:.8rem}
.badge{font-size:.7rem;font-weight:650;padding:4px 8px;background:#2f2b24;color:#eee4d1;border-radius:3px;white-space:nowrap}
.stage-1{background:#3d301d;color:#f8d690}.stage-2{background:#26333b;color:#c6e8fc}.stage-3{background:#25382b;color:#c7edd1}
.empty{padding:25px 0;color:var(--muted)}.empty.panel{padding:25px}
.empty h3{color:var(--paper);margin-bottom:6px}
.detail{display:grid;gap:15px;margin-top:16px;max-width:850px}
.detail .form{max-width:none;margin:0}
.detail p,.print-doc p{margin-block:10px}
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;gap:8px;margin-block:24px}
.timeline li{display:flex;align-items:flex-start;gap:6px;color:var(--muted);font-size:.75rem}
.timeline b{flex:none;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.timeline .done b{background:var(--gold);color:var(--bg)}.timeline small{display:block}
.preserve{white-space:pre-wrap}
.print-doc{display:none}
@media(max-width:850px){.wrap{width:calc(100% - 44px)}.top-cta{display:none}.hero{gap:22px}.service-card{padding:16px}}
@media(max-width:600px){html{scroll-padding-top:112px}.wrap{width:calc(100% - 32px)}.nav{flex-wrap:wrap;justify-content:flex-start;gap:8px;padding-block:10px}.nav nav{width:100%;gap:14px;flex-wrap:wrap}.nav nav a{padding-block:4px}.hero,.service-grid,.process,.fields{grid-template-columns:1fr}.hero{padding-block:40px;gap:30px}.hero-art{aspect-ratio:1.35}.art-letter{font-size:55vw}.service-card{min-height:195px}.footer{flex-wrap:wrap;padding-block:14px}.metrics,.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.inner{padding-top:35px}.project{gap:8px;padding-inline:10px}.project .badge{white-space:normal}.filters{grid-template-columns:1fr}.button,input,select,textarea{font-size:16px}}
@media print{body{color:#151515;background:#fff}header,main,footer{display:none!important}.print-doc{display:block;margin:20px}.print-doc h1,.print-doc h2{font-size:30px}.print-doc h2{margin-top:25px}}
@media(min-width:851px){.process-four{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:601px) and (max-width:850px){.process-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stage-3{background:#26333b;color:#c6e8fc}
.stage-4{background:#352b42;color:#e8d0ff}
.stage-5{background:#25382b;color:#c7edd1}
.case{border:1px solid var(--line);background:#201e19;overflow:hidden}
.case-art{position:relative;display:grid;place-items:center;aspect-ratio:1.7;background:radial-gradient(ellipse at center,#624435,#261b16 70%);color:#f4cc90}
.case-art::after{content:"";position:absolute;inset:14%;border:1px solid currentColor;opacity:.24;transform:skewX(-12deg)}
.case-1{background:radial-gradient(ellipse at center,#434657,#171b26 70%);color:#ded9ff}
.case-2{background:radial-gradient(ellipse at center,#3d5347,#142821 70%);color:#d9e4bd}
.case-art span{position:absolute;top:10%;left:7%;font-size:.68rem;letter-spacing:.16em}
.case-art b{font:italic clamp(3.7rem,8vw,7rem)/1 var(--serif)}
.case-copy{padding:20px}
.case-copy small{color:var(--gold);text-transform:uppercase;letter-spacing:.14em}
.case-copy h3{margin-block:5px 8px}
.case-copy p{color:var(--muted)}
.portfolio-cta{margin-top:24px}
@media(max-width:600px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}

.skip-link{position:absolute;top:-100px;background:var(--gold);color:#111;padding:14px;z-index:100}
.skip-link:focus{top:5px}
.service-text{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.case-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.check input{width:20px;flex-shrink:0}
.form .check{display:flex}
.entry-content{margin-top:30px}
.entry-content img{max-width:100%;height:auto}
.entry-content a{color:var(--gold);text-decoration:underline}
.screen-reader-text{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}
body.admin-bar .top{top:32px}
@media(max-width:782px){body.admin-bar .top{top:46px}}

/* Contactpagina en ruime footer. */
.contact-hero {
    padding-block: 75px 45px;
}
.contact-hero h1 {
    font-size: clamp(2.8rem, 6vw, 5.8rem);
}
.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(30px, 6vw, 90px);
    padding-block: 15px 90px;
}
.contact-info h2,
.contact-form-area h2 {
    font-size: clamp(2rem, 3.5vw, 3.1rem);
    margin-bottom: 22px;
}
.contact-form-area > p,
.contact-location {
    color: var(--muted);
}
.contact-links {
    display: grid;
    gap: 12px;
    margin-block: 28px;
}
.contact-link {
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 4px;
}
.contact-link strong {
    overflow-wrap: anywhere;
    color: var(--gold);
    font-size: 1.05rem;
}
.contact-link:hover {
    border-color: var(--gold);
}
.contact-edit-note,
.footer-setup {
    color: var(--muted);
    font-size: .8rem;
    margin-block: 20px;
}
.studio-footer {
    padding-top: 65px;
    background: #171612;
    border-top: 1px solid #9d7a47;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
    gap: 35px;
    padding-bottom: 50px;
}
.footer-about p {
    color: var(--muted);
    margin-block: 20px;
    max-width: 290px;
}
.footer-cta {
    display: inline-block;
    color: var(--gold);
    border-bottom: 1px solid #9d7a47;
    padding-bottom: 8px;
}
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.footer-column h2 {
    font: 650 .8rem/1.4 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 9px;
}
.footer-column a,
.footer-column span {
    font-size: .9rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.footer-column a:hover {
    color: var(--gold);
}
.footer-social {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 9px 12px;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    border-top: 1px solid var(--line);
    padding-block: 22px;
    font-size: .76rem;
    color: var(--muted);
}
.footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
@media (max-width: 1000px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .nav {
        flex-wrap: wrap;
        padding-block: 12px;
    }
    .nav nav {
        flex-wrap: wrap;
    }
}
@media (max-width: 650px) {
    .contact-layout {
        grid-template-columns: 1fr;
        padding-bottom: 50px;
    }
    .contact-hero {
        padding-top: 45px;
    }
    .studio-footer {
        padding-top: 45px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 35px;
    }
}