/*
Theme Name: Beyond Frames V2
Theme URI: https://beyondframes.nl/
Author: Beyond Frames
Description: Cinematic premium WordPress theme. Dark hero, dark portfolio, light services, light process, dark about, dark contact, dark footer.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: beyond-frames-v2
*/
:root{
  --dark:#0a0a0a;--dark-soft:#11110f;--light:#f1eee7;--light-soft:#e6e1d7;
  --text-dark:#f3f1ec;--text-light:#181715;--muted-dark:#aaa59b;--muted-light:#6c6860;
  --line-dark:#2a2925;--line-light:#d3cec4;--max:1180px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--dark);color:var(--text-dark);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}.bf-wrap{max-width:var(--max);margin:auto;padding:0 28px}
.bf-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(#0a0a0add,transparent);backdrop-filter:blur(8px)}
.bf-nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between}
.bf-logo{font-size:18px;font-weight:800;letter-spacing:-.04em}.bf-logo span{font-weight:400;color:#aaa}
.bf-links{display:flex;gap:30px;font-size:13px;color:#d0cdc6}.bf-links a:hover{color:#fff}
.bf-navcta{border:1px solid #77736b;padding:10px 15px;border-radius:999px;font-size:12px}
.bf-hero{min-height:92vh;display:flex;align-items:end;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 30%,#4b453a55,transparent 28%),linear-gradient(115deg,#101010 15%,#181714 48%,#080808 85%)}
.bf-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0002 20%,#0a0a0a 94%)}
.bf-hero-content{position:relative;z-index:2;padding:160px 0 90px;max-width:920px}
.bf-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px}
.bf-hero .bf-eyebrow,.bf-dark .bf-eyebrow{color:#aaa59b}.bf-light .bf-eyebrow{color:#77736b}
.bf-hero h1{font-size:clamp(58px,9vw,128px);line-height:.86;letter-spacing:-.075em;margin:0 0 32px;font-weight:700}.bf-hero h1 em{font-family:Georgia,serif;font-weight:400}
.bf-hero-copy{max-width:570px;color:#bbb7af;font-size:18px}.bf-buttons{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.bf-btn{padding:14px 20px;border-radius:999px;border:1px solid #57544e;font-size:13px;display:inline-block}.bf-btn-primary{background:#f3f1ec;color:#111;border-color:#f3f1ec}
.bf-section{padding:120px 0;border-top:1px solid}.bf-dark{background:var(--dark);color:var(--text-dark);border-color:var(--line-dark)}.bf-light{background:var(--light);color:var(--text-light);border-color:var(--line-light)}
.bf-dark .bf-lead{color:var(--muted-dark)}.bf-light .bf-lead{color:var(--muted-light)}
.bf-section-head{display:flex;justify-content:space-between;gap:30px;margin-bottom:45px;align-items:end}
.bf-section-head h2,.bf-contact-box h2{font-size:clamp(40px,6vw,76px);line-height:.92;letter-spacing:-.06em;margin:0}.bf-lead{max-width:470px;font-size:16px}
.bf-work{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.bf-work-stack{display:grid;gap:18px}
.bf-card{background:#111;min-height:360px;position:relative;overflow:hidden;border:1px solid #1e1d1b}.bf-card.tall{min-height:620px}
.bf-visual{position:absolute;inset:0;background:radial-gradient(circle at 70% 35%,#aaa084 0 1%,transparent 20%),linear-gradient(135deg,#25231f,#6e6658 46%,#191817 47%,#0c0c0c)}
.bf-visual.two{background:radial-gradient(ellipse at 30% 30%,#b0a38d,transparent 24%),linear-gradient(150deg,#121212,#4c4840 52%,#171717)}
.bf-visual.three{background:radial-gradient(circle at 72% 65%,#8b7c68,transparent 20%),linear-gradient(120deg,#302c27,#0e0e0e 60%)}
.bf-shade{position:absolute;inset:0;background:linear-gradient(transparent 30%,#000b)}.bf-card-copy{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#f3f1ec}.bf-tag{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#cbc5ba}.bf-card h3{font-size:29px;letter-spacing:-.04em;margin:6px 0}
.bf-services{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-light)}.bf-service{padding:34px 10px 38px;border-bottom:1px solid var(--line-light)}.bf-service:nth-child(odd){border-right:1px solid var(--line-light);padding-right:45px}.bf-service:nth-child(even){padding-left:45px}.bf-num{color:#858078;font-size:12px}.bf-service h3{font-size:27px;letter-spacing:-.04em;margin:25px 0 8px}.bf-service p{color:var(--muted-light);max-width:460px}
.bf-process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light)}.bf-step{background:var(--light);padding:28px;min-height:220px}.bf-step strong{font-size:13px;color:#77736b}.bf-step h3{font-size:22px;margin:35px 0 8px}.bf-step p{color:var(--muted-light);font-size:14px}
.bf-about{display:grid;grid-template-columns:1fr 1fr;gap:80px}.bf-quote{font-family:Georgia,serif;font-size:clamp(34px,4vw,58px);line-height:1.02;letter-spacing:-.04em}.bf-about p{color:var(--muted-dark);font-size:17px}
.bf-contact-box{display:flex;justify-content:space-between;align-items:end;gap:30px;background:#121210;border:1px solid #2a2925;padding:55px;color:var(--text-dark)}.bf-contact-box .bf-eyebrow{color:#aaa59b}.bf-contact-box h2{max-width:760px}.bf-contact .bf-btn-primary{background:#f3f1ec;color:#111;border-color:#f3f1ec}
.bf-footer{background:var(--dark);color:#77736b;border-top:1px solid var(--line-dark);padding:28px 0;font-size:12px}.bf-footer-inner{display:flex;justify-content:space-between;gap:20px}
@media(max-width:760px){.bf-links{display:none}.bf-nav-inner{height:70px}.bf-hero{min-height:88vh}.bf-hero-content{padding-top:150px}.bf-section{padding:80px 0}.bf-section-head,.bf-about{display:grid;grid-template-columns:1fr}.bf-work{grid-template-columns:1fr}.bf-card.tall{min-height:430px}.bf-card{min-height:330px}.bf-services{grid-template-columns:1fr}.bf-service:nth-child(odd){border-right:0;padding-right:10px}.bf-service:nth-child(even){padding-left:10px}.bf-process{grid-template-columns:1fr}.bf-contact-box{display:block;padding:34px 26px}.bf-contact-box .bf-btn{margin-top:25px}.bf-footer-inner{flex-direction:column}}