:root { --ink:#20201d; --muted:#6e665f; --cream:#f2e9dc; --paper:#fffaf3; --gold:#d4af37; --gold-soft:#eadca9; --line:rgba(32,32,29,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; line-height:1.6; }
body.menu-open { overflow:hidden; }
section[id] { scroll-margin-top:82px; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.shell { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.eyebrow { margin:0 0 16px; color:#8d6d32; font-size:.76rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Playfair Display",serif; line-height:1.08; margin:0; font-weight:600; }
h1 { max-width:780px; font-size:clamp(3.4rem,8vw,7.15rem); letter-spacing:-.055em; }
h2 { font-size:clamp(2.4rem,5vw,4.4rem); letter-spacing:-.04em; }
p { margin:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border:1px solid var(--ink); border-radius:100px; font-weight:600; transition:.25s ease; }
.btn-dark { color:white; background:var(--ink); }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(32,32,29,.12); }
.btn-light { border-color:var(--line); background:rgba(255,255,255,.65); }
header { position:fixed; z-index:20; top:0; width:100%; border-bottom:1px solid transparent; transition:.25s; }
header.scrolled { background:rgba(255,253,248,.9); border-color:var(--line); backdrop-filter:blur(16px); }
nav { height:82px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:11px; font-family:"Playfair Display",serif; font-size:1.25rem; letter-spacing:.12em; }
.brand img { width:48px; height:48px; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:32px; font-size:.9rem; }
.nav-links a:not(.btn) { position:relative; }
.nav-links a:not(.btn)::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transition:.2s; }
.nav-links a:hover::after { transform:scaleX(1); }
.menu { display:none; border:0; background:none; font:inherit; font-weight:600; }
.hero { min-height:100vh; padding:170px 0 80px; position:relative; overflow:hidden; background:radial-gradient(circle at 85% 20%, #eee4d0 0, transparent 31%), var(--cream); }
.hero::after { content:"BR"; position:absolute; right:-3vw; bottom:-17vw; color:transparent; -webkit-text-stroke:1px rgba(182,149,85,.2); font-family:"Playfair Display"; font-size:43vw; line-height:1; pointer-events:none; }
.hero-inner { position:relative; z-index:1; }
.hero h1 em { color:var(--gold); font-weight:500; }
.hero-copy { width:min(500px,100%); margin:30px 0 34px; color:var(--muted); font-size:1.12rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.trust { display:flex; gap:36px; margin-top:84px; color:var(--muted); font-size:.84rem; }
.trust span { display:flex; align-items:center; gap:9px; }
.trust span::before { content:""; width:6px; height:6px; background:var(--gold); border-radius:50%; }
section { padding:120px 0; }
.section-head { display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; align-items:end; margin-bottom:58px; }
.section-head p { max-width:550px; color:var(--muted); justify-self:end; }
.services { background:var(--paper); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.service-card { padding:38px 32px 42px; border-right:1px solid var(--line); transition:.3s; }
.service-card:last-child { border-right:0; }
.service-card:hover { background:var(--cream); transform:translateY(-6px); }
.num { display:block; margin-bottom:68px; color:var(--gold); font-family:"Playfair Display"; font-style:italic; }
.service-card h3 { font-size:1.7rem; margin-bottom:15px; }
.service-card p { color:var(--muted); }
.packages { background:var(--cream); }
.package-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.package-card { min-height:650px; perspective:1200px; cursor:pointer; outline:none; touch-action:manipulation; }
.package-inner { position:relative; width:100%; height:100%; min-height:inherit; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.75,.25,1); }
.package-card.is-flipped .package-inner { -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }
.package-card:focus-visible .package-inner { outline:3px solid var(--gold); outline-offset:5px; }
.package-face { position:absolute; inset:0; display:flex; flex-direction:column; padding:34px; border:1px solid var(--gold-soft); background:var(--paper); -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden; }
.package-front { -webkit-transform:rotateY(0deg); transform:rotateY(0deg); }
.package-front::after { content:"BR"; position:absolute; right:-18px; bottom:-42px; color:rgba(182,149,85,.08); font-family:"Playfair Display"; font-size:10rem; line-height:1; pointer-events:none; }
.package-card.featured .package-front { color:#f8f4eb; border-color:var(--ink); background:var(--ink); }
.package-label { align-self:flex-start; margin:-34px 0 28px -34px; padding:9px 16px; color:var(--ink); background:var(--gold-soft); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.package-number { position:relative; z-index:1; margin-bottom:auto; color:var(--gold); font-family:"Playfair Display"; font-style:italic; }
.package-name { position:relative; z-index:1; margin-top:45px; font-family:"Playfair Display"; font-size:2rem; line-height:1.1; }
.package-price { position:relative; z-index:1; margin:12px 0 18px; font-family:"Playfair Display"; font-size:2.15rem; line-height:1; }
.package-prefix { display:block; margin-bottom:8px; color:var(--muted); font-family:"DM Sans"; font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.package-price small { margin-left:5px; color:var(--muted); font-family:"DM Sans"; font-size:.72rem; font-weight:500; }
.featured .package-price small { color:#bbb7ad; }
.package-summary { position:relative; z-index:1; max-width:290px; color:var(--muted); font-size:.92rem; }
.featured .package-summary { color:#ccc7bb; }
.flip-cue { position:relative; z-index:1; margin-top:28px; color:var(--gold); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.package-back { -webkit-transform:rotateY(180deg); transform:rotateY(180deg); background:#eee6d7; }
.package-back ul { display:grid; gap:9px; margin:8px 0 22px; padding:0; color:var(--muted); font-size:.83rem; line-height:1.4; list-style:none; }
.package-back li { border-bottom:1px solid rgba(32,32,29,.1); padding-bottom:8px; }
.package-back li::before { content:"✓"; margin-right:9px; color:var(--gold); font-weight:600; }
.package-back .btn { flex-shrink:0; align-self:flex-start; min-height:46px; padding-inline:18px; font-size:.78rem; }
.package-back .flip-cue { flex-shrink:0; margin-top:22px; }
.package-note { margin-top:24px; color:var(--muted); font-size:.76rem; text-align:center; }
.content-creation { color:#f8f4eb; background:var(--ink); overflow:hidden; }
.content-intro { display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:end; margin-bottom:58px; }
.content-intro .eyebrow { color:var(--gold-soft); }
.content-intro-copy>p { max-width:540px; color:#bbb7ad; }
.content-devices { display:flex; align-items:end; gap:16px; margin-top:28px; }
.content-device { display:grid; place-items:center; color:var(--gold-soft); border:1px solid rgba(232,221,198,.55); background:rgba(255,255,255,.025); font-size:.5rem; font-weight:600; letter-spacing:.04em; line-height:1; }
.device-laptop { width:86px; height:52px; border-bottom-width:6px; border-radius:4px; }
.device-tablet { width:48px; height:62px; border-radius:7px; }
.device-phone { width:31px; height:55px; border-radius:8px; }
.content-tier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.content-tier { min-height:560px; display:flex; flex-direction:column; position:relative; padding:34px; color:var(--ink); background:var(--paper); border:1px solid rgba(232,221,198,.35); overflow:hidden; }
.content-tier-featured { color:#fffaf0; border-color:var(--gold); background:linear-gradient(145deg,#806536,#4d3b21); }
.content-tier-label { position:absolute; top:0; left:0; padding:9px 16px; color:var(--ink); background:var(--gold-soft); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.content-tier-number { margin-bottom:70px; color:var(--gold); font-family:"Playfair Display"; font-style:italic; }
.content-tier-featured .content-tier-number { margin-top:28px; color:var(--gold-soft); }
.content-tier-name { font-family:"Playfair Display"; font-size:2rem; }
.content-tier-price { margin-top:10px; font-family:"Playfair Display"; font-size:2.15rem; line-height:1; }
.content-tier-price small { margin-left:5px; color:var(--muted); font-family:"DM Sans"; font-size:.72rem; font-weight:500; }
.content-tier-featured .content-tier-price small { color:#ded5c5; }
.video-count { display:flex; align-items:end; gap:13px; margin:24px 0 25px; padding-top:22px; border-top:1px solid var(--line); }
.content-tier-featured .video-count { border-color:rgba(255,255,255,.14); }
.video-count strong { font-family:"Playfair Display"; font-size:4.2rem; font-weight:600; line-height:.85; letter-spacing:-.05em; }
.video-count span { color:var(--muted); font-size:.72rem; font-weight:600; letter-spacing:.08em; line-height:1.35; text-transform:uppercase; }
.content-tier-featured .video-count span { color:#ded5c5; }
.content-tier ul { display:grid; gap:10px; margin:0 0 28px; padding:0; color:var(--muted); font-size:.86rem; list-style:none; }
.content-tier-featured ul { color:#e7dfcf; }
.content-tier li { padding-bottom:9px; border-bottom:1px solid var(--line); }
.content-tier-featured li { border-color:rgba(255,255,255,.14); }
.content-tier li::before { content:"✓"; margin-right:8px; color:var(--gold); }
.content-tier-featured li::before { color:var(--gold-soft); }
.content-tier-cta { align-self:flex-start; margin-top:auto; color:inherit; border-color:currentColor; font-size:.82rem; }
.content-tier-featured .content-tier-cta { color:var(--ink); border-color:var(--gold-soft); background:var(--gold-soft); }
.content-note { margin-top:24px; color:#9f9a90; font-size:.76rem; text-align:center; }
.about { background:var(--ink); color:#f8f4eb; overflow:hidden; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }
.about-mark { aspect-ratio:1; border:1px solid rgba(232,221,198,.28); border-radius:50%; display:grid; place-items:center; position:relative; }
.about-mark::before,.about-mark::after { content:""; position:absolute; inset:10%; border:1px solid rgba(232,221,198,.15); border-radius:50%; }
.about-mark::after { inset:21%; }
.about-mark span { color:var(--gold-soft); font-family:"Playfair Display"; font-size:clamp(4rem,10vw,8rem); }
.about h2 { margin-bottom:25px; }
.about-copy>p { color:#bbb7ad; font-size:1.05rem; }
.team { display:grid; grid-template-columns:repeat(2,1fr); margin-top:38px; gap:16px 30px; }
.team div { border-top:1px solid rgba(255,255,255,.14); padding-top:12px; font-size:.86rem; color:#ddd8cc; }
.premium { background:var(--cream); }
.premium-box { display:grid; grid-template-columns:1.3fr .7fr; gap:60px; padding:65px; border:1px solid var(--gold-soft); background:rgba(255,255,255,.56); }
.premium h2 { margin-bottom:20px; }
.premium-copy p:not(.eyebrow) { max-width:600px; color:var(--muted); }
.premium-side { border-left:1px solid var(--line); padding-left:50px; }
.premium-side strong { display:block; font-family:"Playfair Display"; font-size:2.5rem; margin-bottom:12px; }
.premium-side p { color:var(--muted); margin-bottom:24px; font-size:.9rem; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; }
.contact h2 { margin-bottom:20px; }
.contact-intro { color:var(--muted); }
.contact-detail { margin-top:48px; }
.contact-detail small { display:block; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); margin-bottom:6px; }
form { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1/-1; }
label { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
input,textarea { width:100%; border:0; border-bottom:1px solid #aaa69c; padding:13px 2px; background:transparent; color:var(--ink); font:inherit; outline:none; }
input:focus,textarea:focus { border-color:var(--gold); }
textarea { min-height:110px; resize:vertical; }
form .btn { justify-self:start; margin-top:8px; cursor:pointer; }
form .btn:disabled { cursor:wait; opacity:.72; }
.form-trap { position:absolute; left:-9999px; }
.form-status { grid-column:1/-1; min-height:1.5em; color:var(--muted); font-size:.86rem; }
footer { padding:34px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
.foot { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.legal-links { height:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; }
.legal-links a { text-decoration:underline; text-decoration-color:var(--gold-soft); text-underline-offset:4px; }
.legal-links a:hover { color:var(--ink); text-decoration-color:var(--gold); }
.social-links { display:flex; align-items:center; gap:9px; }
.social-links a { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); font-size:1rem; transition:color .2s,border-color .2s,background .2s,transform .2s; }
.social-links a:hover { color:#fff; border-color:var(--ink); background:var(--ink); transform:translateY(-2px); }
.social-links a:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.legal-page { min-height:calc(100vh - 150px); padding:155px 0 100px; background:var(--cream); }
.legal-layout { display:grid; grid-template-columns:minmax(190px,.45fr) minmax(0,1fr); gap:clamp(45px,8vw,110px); align-items:start; }
.legal-aside { position:sticky; top:115px; }
.legal-aside h1 { max-width:420px; font-size:clamp(2.8rem,6vw,5.5rem); }
.legal-updated { margin-top:18px; color:var(--muted); font-size:.84rem; }
.legal-content { max-width:760px; }
.legal-content section { padding:0; scroll-margin-top:110px; }
.legal-content section+section { margin-top:44px; padding-top:44px; border-top:1px solid var(--line); }
.legal-content h2 { margin-bottom:15px; font-size:clamp(1.65rem,3vw,2.35rem); letter-spacing:-.025em; }
.legal-content h3 { margin:24px 0 8px; font-size:1.15rem; }
.legal-content p,.legal-content li { color:var(--muted); }
.legal-content p+p { margin-top:14px; }
.legal-content ul { display:grid; gap:8px; padding-left:20px; }
.legal-content a { color:#7d5e27; text-decoration:underline; text-underline-offset:3px; }
.company-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }
.company-fact { padding:20px; border:1px solid var(--gold-soft); background:var(--paper); }
.company-fact small { display:block; margin-bottom:5px; color:#8d6d32; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.reveal { opacity:0; transform:translateY(22px); transition:.7s ease; }
.reveal.visible { opacity:1; transform:none; }
@media(max-width:800px) {
    .shell { width:min(100% - 28px,1180px); }
    .menu { display:block; z-index:2; }
    .menu-open header,.menu-open header.scrolled { height:100dvh; background:var(--cream); backdrop-filter:none; -webkit-backdrop-filter:none; }
    .nav-links { position:fixed; inset:0; z-index:1; width:100%; height:100dvh; min-height:100vh; padding:120px 28px 44px; overflow-y:auto; visibility:hidden; pointer-events:none; background:var(--cream); flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:20px; font-family:"Playfair Display"; font-size:clamp(2rem,11vw,3.5rem); line-height:1.05; opacity:0; transform:translateX(100%); transition:transform .3s,opacity .2s,visibility .3s; }
    .menu-open .nav-links { visibility:visible; pointer-events:auto; opacity:1; transform:none; }
    .nav-links .btn { flex-shrink:0; margin-top:10px; font-family:"DM Sans"; font-size:.9rem; }
    .hero { min-height:auto; padding-top:145px; }
    h1 { font-size:clamp(3.1rem,16vw,5rem); }
    section { padding:85px 0; }
    .trust { flex-wrap:wrap; gap:12px 24px; margin-top:60px; }
    .section-head,.content-intro,.about-grid,.premium-box,.contact-grid { grid-template-columns:1fr; }
    .section-head { gap:18px; }
    .section-head p { justify-self:start; }
    .service-grid { grid-template-columns:1fr; }
    .package-grid { grid-template-columns:1fr; max-width:560px; }
    .content-tier-grid { grid-template-columns:1fr; max-width:560px; }
    .package-card { min-height:620px; }
    .package-inner,.package-card.is-flipped .package-inner { -webkit-transform:none; transform:none; transform-style:flat; }
    .package-face { -webkit-transform:none; transform:none; transition:opacity .3s ease,visibility .3s ease; }
    .package-front { opacity:1; visibility:visible; }
    .package-back { opacity:0; visibility:hidden; }
    .package-card.is-flipped .package-front { opacity:0; visibility:hidden; }
    .package-card.is-flipped .package-back { opacity:1; visibility:visible; }
    .service-card { border-right:0; border-bottom:1px solid var(--line); padding-inline:8px; }
    .num { margin-bottom:30px; }
    .about-mark { max-width:430px; width:100%; margin:auto; }
    .premium-box { padding:38px 25px; gap:38px; }
    .premium-side { border-left:0; border-top:1px solid var(--line); padding:30px 0 0; }
}
@media(max-width:800px) { .legal-layout { grid-template-columns:1fr; } .legal-aside { position:static; } }
@media(max-width:520px) { form { grid-template-columns:1fr; } .field { grid-column:1; } .foot { flex-direction:column; align-items:flex-start; } .legal-links { justify-content:flex-start; } .social-links { margin-top:4px; } .company-facts { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } .reveal { opacity:1; transform:none; } }

/* Braelum 2026 home experience */
.braelum-home { --ink:#17151b; --muted:#665d58; --cream:#f2e9dc; --pink:#c4622d; --gold:#d4af37; --paper:#fffaf3; --line:rgba(23,21,27,.16); background:var(--paper); font-family:"DM Sans",sans-serif; overflow-x:hidden; }
.braelum-home h1,.braelum-home h2,.braelum-home h3 { font-family:"Syne",sans-serif; font-weight:700; }
.braelum-home .shell { width:min(1240px,calc(100% - 56px)); }
.braelum-home section { padding:130px 0; }
.braelum-home .eyebrow { color:var(--ink); font-size:.72rem; font-weight:700; letter-spacing:.17em; }
.braelum-home .btn { border:0; border-radius:10px; min-height:54px; padding:0 22px; }
.braelum-home .btn-dark { background:var(--ink); color:white; box-shadow:5px 5px 0 var(--gold); }
.braelum-home .btn:hover { box-shadow:8px 8px 0 var(--gold); }
.braelum-home header { height:88px; display:flex; align-items:center; }
.braelum-home header.scrolled { background:rgba(255,250,243,.88); }
.braelum-home nav { height:88px; }
.braelum-home .brand { font-family:"Syne",sans-serif; font-weight:800; letter-spacing:.15em; }
.braelum-home .brand img { width:44px;height:44px; }
.braelum-home .nav-links a:not(.btn)::after { height:3px; background:var(--pink); }
.cursor-glow { position:fixed; z-index:0; width:420px; height:420px; border-radius:50%; background:rgba(255,107,157,.11); filter:blur(40px); transform:translate(-50%,-50%); pointer-events:none; transition:opacity .3s; }
.braelum-home main,.braelum-home footer { position:relative; z-index:1; }
.braelum-home header { position:fixed; z-index:50; }
.braelum-home .hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:145px 0 68px; background:var(--cream); isolation:isolate; }
.braelum-home .hero::after { display:none; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:7vw; }
.hero-copy-wrap { position:relative; z-index:2; }
.status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(212,175,55,.2); }
.braelum-home h1 { max-width:760px; font-size:clamp(3.6rem,6.5vw,7.2rem); line-height:.92; letter-spacing:-.065em; }
.scribble { position:relative; display:inline-block; color:var(--pink); font-style:normal; }
.scribble::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:9px; border-top:4px solid var(--pink); border-radius:50%; transform:rotate(-1deg); }
.braelum-home .hero-copy { width:min(590px,100%); margin:34px 0; color:#55474a; font-size:1.15rem; }
.braelum-home .hero-actions { align-items:center; gap:28px; }
.text-link { font-weight:700; border-bottom:2px solid var(--ink); padding:8px 0; }
.text-link span { margin-left:8px; }
.hero-playground { position:relative; min-height:530px; perspective:1000px; }
.shape { position:absolute; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); font-family:"Syne",sans-serif; font-weight:800; box-shadow:10px 10px 0 rgba(23,21,27,.92); transition:transform .18s ease-out; will-change:transform; }
.shape-pink { inset:35px 35px auto auto; width:300px; height:300px; border-radius:50%; background:var(--pink); font-size:7.5rem; transform:rotate(9deg); }
.shape-cream { left:2%; bottom:24px; width:330px; height:132px; justify-content:space-around; background:var(--paper); transform:rotate(-7deg); font-size:.75rem; letter-spacing:.14em; }
.shape-cream span:nth-child(2) { font-size:2.2rem; }
.shape-dark { right:0; bottom:12px; width:175px; height:175px; color:var(--cream); background:var(--ink); border-radius:4px 70px 4px 4px; font-size:1.35rem; line-height:1.05; text-align:center; transform:rotate(8deg); }
.drag-note { position:absolute; top:35px; left:15px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; transform:rotate(-8deg); }
.hero-orbit { position:absolute; z-index:-1; border:1px solid rgba(23,21,27,.18); border-radius:50%; pointer-events:none; }
.orbit-one { width:520px; height:520px; right:-190px; top:-170px; }.orbit-two { width:230px;height:230px;left:-90px;bottom:40px; }
.ticker { width:100%; margin-top:auto; padding-top:60px; overflow:hidden; white-space:nowrap; }
.ticker div { width:max-content; padding:14px 0; border-block:2px solid var(--ink); font:700 .82rem/1 "Syne",sans-serif; letter-spacing:.15em; animation:ticker 22s linear infinite; }
@keyframes ticker { to { transform:translateX(-50%); } }
.braelum-home .section-head { grid-template-columns:1fr .7fr; align-items:end; margin-bottom:70px; }
.braelum-home .section-head h2 { font-size:clamp(2.8rem,5vw,5rem); }.braelum-home .section-head h2 span { color:var(--pink); }
.braelum-home .section-head>p { font-size:1.05rem; }
.braelum-home .services { background:var(--paper); }
.service-explorer { display:grid; grid-template-columns:.52fr 1.48fr; border:2px solid var(--ink); box-shadow:12px 12px 0 var(--cream); }
.service-tabs { display:flex; flex-direction:column; border-right:2px solid var(--ink); }
.service-tab { flex:1; display:flex; align-items:center; gap:22px; min-height:104px; padding:20px 26px; border:0; border-bottom:2px solid var(--ink); color:var(--ink); background:transparent; font:700 1.15rem "Syne",sans-serif; text-align:left; cursor:pointer; transition:.25s; }
.service-tab:last-child { border-bottom:0; }.service-tab span { font:600 italic .8rem "DM Sans",sans-serif; }
.service-tab:hover,.service-tab.active { background:var(--pink); padding-left:38px; }
.service-stage { min-height:420px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; padding:58px; background:var(--cream); }
.service-kicker { margin-bottom:20px; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.service-stage h3 { max-width:670px; margin-bottom:22px; font-size:clamp(2.2rem,4vw,4rem); line-height:1; }
.service-stage p:last-child { max-width:620px; color:#5e5051; }
.service-stamp { width:160px;height:160px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--pink); font:800 1.15rem/1.05 "Syne",sans-serif; text-align:center; transform:rotate(8deg); transition:.35s; }
.service-stage.is-changing .service-stamp { transform:rotate(25deg) scale(.85); }
.braelum-home .packages { background:var(--pink); }
.braelum-home .package-grid { gap:22px; perspective:1200px; }
.plan-card { min-height:540px; display:flex; flex-direction:column; padding:32px; border:2px solid var(--ink); background:var(--paper); box-shadow:8px 8px 0 var(--ink); transform-style:preserve-3d; transition:transform .16s ease,box-shadow .25s; }
.plan-card:hover { box-shadow:14px 14px 0 var(--gold); }.plan-featured { background:var(--cream); }
.plan-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:70px; font-weight:700; }
.plan-pill { padding:7px 12px; border:1px solid var(--ink); border-radius:100px; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }.plan-featured .plan-pill { background:var(--gold); }
.plan-card h3 { font-size:2.1rem; }.price { margin:12px 0 18px; font:700 2.6rem/1 "Syne",sans-serif; }.price small { font:500 .75rem "DM Sans",sans-serif; }
.plan-card>p:not(.price) { color:var(--muted); }.plan-card ul { display:grid; gap:11px; padding:25px 0 0; margin:25px 0; border-top:1px solid var(--line); list-style:none; }.plan-card li::before { content:"✦"; color:var(--pink); margin-right:9px; }.plan-featured li::before { color:#b92c5e; }
.plan-select { margin-top:auto; padding:0 0 8px; border:0; border-bottom:2px solid var(--ink); background:none; font:700 .9rem "DM Sans",sans-serif; text-align:left; cursor:pointer; }.plan-select span { float:right; font-size:1.2rem; }
.template-showcase { background:var(--cream); }
.template-strip { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:20px; align-items:start; }
.template-tile { display:block; }.template-tile:nth-child(2) { margin-top:75px; }.template-tile:nth-child(3) { margin-top:25px; }
.template-image { position:relative; aspect-ratio:4/3; overflow:hidden; border:2px solid var(--ink); background:var(--paper); box-shadow:8px 8px 0 var(--pink); }
.template-image img { width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.template-image::after { content:"";position:absolute;inset:0;background:rgba(23,21,27,.3);opacity:0;transition:.3s; }
.template-image span { position:absolute;z-index:2;right:18px;bottom:18px;padding:10px 15px;border-radius:100px;color:white;background:var(--ink);font-weight:700;opacity:0;transform:translateY(8px);transition:.3s; }
.template-tile:hover .template-image img { transform:scale(1.045); }.template-tile:hover .template-image::after,.template-tile:hover .template-image span { opacity:1;transform:none; }
.template-tile small { display:block;margin:20px 0 4px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em; }.template-tile h3 { font-size:1.45rem; }
.template-all { display:inline-flex;align-items:center;gap:14px;margin-top:55px;padding-bottom:7px;border-bottom:2px solid var(--ink);font-weight:700; }.template-all span { font-size:1.3rem;transition:.2s; }.template-all:hover span { transform:translate(4px,-4px); }
.video-section { color:var(--paper);background:var(--ink); }
.video-section .eyebrow { color:var(--cream); }.video-intro { display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;margin-bottom:65px; }.video-intro h2 { font-size:clamp(3rem,5vw,5.3rem); }.video-intro>div>p:not(.eyebrow) { max-width:540px;color:#c2b7bc; }
.video-devices { display:flex;align-items:end;gap:13px;margin-top:28px; }.screen { display:grid;place-items:center;border:2px solid var(--cream);color:var(--cream);font-size:.56rem;font-weight:700; }.screen.laptop { width:88px;height:53px;border-bottom-width:7px;border-radius:4px; }.screen.tablet { width:48px;height:62px;border-radius:7px; }.screen.phone { width:31px;height:57px;border-radius:8px; }
.video-plans { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }.video-plans article { position:relative;min-height:555px;display:flex;flex-direction:column;padding:30px;border:2px solid var(--cream);color:var(--ink);background:var(--paper); }.video-plans .video-featured { background:var(--pink);transform:translateY(-16px);box-shadow:8px 8px 0 var(--cream); }
.popular-tag { position:absolute;top:0;right:0;padding:8px 13px;color:var(--ink);background:var(--cream);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em; }.video-plan-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:45px; }.video-plan-head>span { font-style:italic; }.video-plan-head strong { font:700 1.5rem "Syne",sans-serif; }.video-price { font:700 2.25rem "Syne",sans-serif; }.video-price small { margin-left:6px;font:600 .7rem "DM Sans",sans-serif; }.video-count-new { display:flex;align-items:end;gap:14px;margin:28px 0;padding-block:22px;border-block:1px solid var(--line); }.video-count-new b { font:800 4rem/.8 "Syne",sans-serif; }.video-count-new span { color:var(--muted);font-size:.68rem;font-weight:700;text-transform:uppercase;line-height:1.25; }.video-plans ul { display:grid;gap:10px;margin:0 0 28px;padding:0;list-style:none;color:var(--muted);font-size:.84rem; }.video-plans li::before { content:"✦";margin-right:8px;color:var(--pink); }.video-featured li::before { color:var(--ink); }.video-plans button { margin-top:auto;padding:11px 0;border:0;border-bottom:2px solid var(--ink);background:none;font-weight:800;text-align:left;cursor:pointer; }.video-note { margin-top:28px;color:#9e9298;font-size:.75rem;text-align:center; }
.estimator { background:var(--ink); color:var(--paper); }.estimator-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:9vw; align-items:center; }.estimator h2 { margin-bottom:25px; font-size:clamp(3rem,5vw,5.2rem); }.estimator .eyebrow { color:var(--cream); }.estimator-grid>div>p:last-child { color:#b9adb2; max-width:510px; }
.estimate-card { padding:42px; color:var(--ink); background:var(--cream); box-shadow:12px 12px 0 var(--pink); }.estimate-card fieldset { margin:0 0 35px; padding:0; border:0; }.estimate-card legend { margin-bottom:16px; font:700 1rem "Syne",sans-serif; }
.choice-row { display:flex; flex-wrap:wrap; gap:8px; }.choice { padding:12px 16px; border:1px solid var(--ink); border-radius:100px; background:transparent; font:600 .8rem "DM Sans",sans-serif; cursor:pointer; }.choice.active,.choice:hover { color:white; background:var(--ink); }
#pace { appearance:none; width:100%; height:8px; padding:0; border:0; border-radius:20px; background:linear-gradient(90deg,var(--pink) 0 50%,rgba(23,21,27,.18) 50%); }.range-labels { display:flex; justify-content:space-between; margin-top:10px; font-size:.68rem; font-weight:700; text-transform:uppercase; }
.estimate-result { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:30px; border-top:2px solid var(--ink); }.estimate-result small { display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.12em; }.estimate-result strong { font:700 1.15rem "Syne",sans-serif; }.circle-btn { flex:0 0 54px; height:54px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--pink); font-size:1.5rem; transition:.2s; }.circle-btn:hover { transform:rotate(45deg); }
.braelum-home .about { color:var(--ink); background:var(--cream); }.braelum-home .about-grid { grid-template-columns:.7fr 1.3fr; }.about-badge { width:min(380px,100%); aspect-ratio:1; display:grid; place-content:center; border:2px solid var(--ink); border-radius:50%; background:var(--pink); box-shadow:15px 15px 0 var(--ink); text-align:center; transform:rotate(-5deg); }.about-badge span { font:800 9rem/.75 "Syne",sans-serif; }.about-badge p { margin-top:24px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; }.braelum-home .about h2 { font-size:clamp(3rem,5vw,5.5rem); }.braelum-home .about-grid>div>p:not(.eyebrow) { max-width:650px; color:#5d5050; font-size:1.1rem; }.skills-cloud { display:flex; flex-wrap:wrap; gap:10px; margin-top:35px; }.skills-cloud span { padding:10px 17px; border:1px solid var(--ink); border-radius:100px; font-weight:700; }
.braelum-home .contact { background:var(--paper); }.braelum-home .contact h2 { font-size:clamp(3rem,5.5vw,5.7rem); }.braelum-home .contact-grid { grid-template-columns:1fr 1fr; gap:8vw; }.email-link { display:inline-flex; gap:12px; margin-top:42px; padding-bottom:5px; border-bottom:2px solid var(--pink); font-weight:700; }.braelum-home form { padding:40px; border:2px solid var(--ink); background:var(--cream); box-shadow:10px 10px 0 var(--pink); }.braelum-home input,.braelum-home textarea { border-bottom:2px solid var(--ink); }.braelum-home input:focus,.braelum-home textarea:focus { border-color:var(--pink); }.braelum-home footer { background:var(--ink); color:var(--paper); }.braelum-home .foot { min-height:110px; }.braelum-home .foot .brand { color:var(--cream); }.braelum-home .legal-links,.braelum-home .social-links { height:auto; }.braelum-home .social-links a { color:var(--paper); border-color:#4f4751; }
@media(max-width:900px) { .hero-grid,.service-explorer,.estimator-grid,.braelum-home .about-grid,.braelum-home .contact-grid,.video-intro { grid-template-columns:1fr; }.hero-playground { min-height:470px; max-width:550px; width:100%; margin:auto; }.service-tabs { border-right:0; border-bottom:2px solid var(--ink); flex-direction:row; }.service-tab { border-bottom:0; border-right:2px solid var(--ink); font-size:.9rem; }.service-tab:last-child { border-right:0; }.service-stage { min-height:390px; }.braelum-home .package-grid,.video-plans { grid-template-columns:1fr;max-width:620px; }.plan-card { min-height:480px; }.video-plans .video-featured { transform:none; }.template-strip { grid-template-columns:1fr 1fr; }.template-tile:nth-child(2),.template-tile:nth-child(3) { margin-top:0; }.template-tile:nth-child(3) { grid-column:1/-1;width:calc(50% - 10px); }.about-badge { width:310px; }.braelum-home .foot { flex-wrap:wrap; } }
@media(max-width:800px) { .braelum-home .shell { width:min(100% - 32px,1240px); }.braelum-home header { z-index:100; }.braelum-home.menu-open header { align-items:flex-start; }.braelum-home .brand,.braelum-home .menu { position:relative; z-index:102; }.braelum-home .nav-links { z-index:101; background:var(--cream); font-family:"Syne",sans-serif; }.braelum-home section { padding:90px 0; }.braelum-home .section-head { grid-template-columns:1fr; }.service-tabs { flex-direction:column; }.service-tab { border-right:0; border-bottom:2px solid var(--ink); }.service-stage { grid-template-columns:1fr; padding:36px 26px; }.service-stamp { width:110px;height:110px;font-size:.8rem; }.cursor-glow { display:none; } }
@media(max-width:560px) { .braelum-home h1 { font-size:clamp(3.2rem,16vw,4.9rem); }.hero-playground { min-height:380px; }.shape-pink { width:230px;height:230px;font-size:5.5rem;right:10px; }.shape-cream { width:245px;height:100px; }.shape-dark { width:135px;height:135px; }.template-strip { grid-template-columns:1fr; }.template-tile:nth-child(3) { grid-column:auto;width:auto; }.estimate-card,.braelum-home form { padding:26px 20px; }.choice-row { flex-direction:column; }.choice { width:100%; }.about-badge { width:250px; }.about-badge span { font-size:7rem; }.braelum-home .foot { align-items:flex-start; }.braelum-home .legal-links { justify-content:flex-start; } }

/* Templates and portfolio page */
.page-header { padding:170px 0 85px; background:var(--cream); }
.page-header h1 { max-width:900px; }
.page-header .hero-copy { margin-bottom:0; }
.portfolio { padding-top:90px; }
.filter-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:45px; }
.filter { border:1px solid var(--line); border-radius:100px; padding:9px 17px; background:transparent; color:var(--muted); font:inherit; font-size:.84rem; cursor:pointer; }
.filter.active,.filter:hover { color:white; border-color:var(--ink); background:var(--ink); }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:55px 28px; }
.project-card { display:block; }
.project-card[hidden] { display:none !important; }
.project-open { width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.project-visual { aspect-ratio:16/10; position:relative; overflow:hidden; display:grid; place-items:center; background:#e7decc; }
.project-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 55%,rgba(255,255,255,.34)); }
.project-card:nth-child(2) .project-visual { background:#252c29; color:#f2e9dc; }
.project-card:nth-child(3) .project-visual { background:#d8d2cb; }
.project-card:nth-child(4) .project-visual { background:#c8af86; }
.project-monogram { position:relative; z-index:1; font-family:"Playfair Display"; font-size:clamp(3rem,8vw,6rem); font-style:italic; }
.project-visual img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.project-open:hover .project-visual img { transform:scale(1.025); }
.project-info { display:flex; justify-content:space-between; align-items:start; gap:24px; padding-top:18px; }
.project-info h2 { font-size:1.55rem; letter-spacing:-.02em; }
.project-info p { color:var(--muted); font-size:.86rem; }
.project-arrow { font-size:1.3rem; transition:.2s; }
.project-card:hover .project-arrow { transform:translate(4px,-4px); }
.portfolio-note { margin-top:75px; padding:45px; border:1px solid var(--gold-soft); text-align:center; background:var(--cream); }
.portfolio-note h2 { margin-bottom:12px; font-size:clamp(2rem,4vw,3.3rem); }
.portfolio-note p { max-width:600px; margin:0 auto 24px; color:var(--muted); }
.template-modal { width:min(1000px,calc(100% - 28px)); max-height:90vh; padding:0; border:0; background:var(--paper); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.35); }
.template-modal::backdrop { background:rgba(20,20,18,.78); backdrop-filter:blur(5px); }
.modal-close { position:absolute; z-index:2; top:14px; right:14px; width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); font-size:1.6rem; line-height:1; cursor:pointer; box-shadow:0 4px 15px rgba(0,0,0,.16); }
.modal-image { width:100%; max-height:58vh; object-fit:cover; object-position:top; background:#ddd; }
.modal-content { padding:32px 38px 38px; }
.modal-content h2 { margin-bottom:12px; font-size:clamp(2rem,4vw,3.1rem); }
.modal-content>p:not(.eyebrow) { color:var(--muted); margin-bottom:24px; }
@media(max-width:700px) { .page-header { padding:145px 0 70px; } .project-grid { grid-template-columns:1fr; gap:42px; } .portfolio-note { padding:35px 20px; } }

/* Templates collection — new Braelum system */
.template-page { --ink:#17151b;--muted:#665d58;--cream:#f2e9dc;--pink:#c4622d;--gold:#d4af37;--paper:#fffaf3;--line:rgba(23,21,27,.16);margin:0;color:var(--ink);background:var(--paper);font-family:"DM Sans",sans-serif; }
.template-page h1,.template-page h2,.template-page h3 { font-family:"Syne",sans-serif;font-weight:700; }
.template-page .shell { width:min(1240px,calc(100% - 56px)); }
.template-page header { position:fixed;z-index:50;height:88px;display:flex;align-items:center; }.template-page header.scrolled { background:rgba(255,250,243,.9); }
.template-page nav { height:88px; }.template-page .brand { font-family:"Syne",sans-serif;font-weight:800;letter-spacing:.15em; }.template-page .brand img { width:44px;height:44px; }
.template-page .btn { border:0;border-radius:10px; }.template-page .btn-dark { background:var(--ink);box-shadow:5px 5px 0 var(--gold); }.template-page .btn:hover { box-shadow:8px 8px 0 var(--gold); }
.template-page .page-header { position:relative;padding:190px 0 115px;background:var(--cream);overflow:hidden; }.template-page .page-header::after { content:"BR";position:absolute;right:-2vw;bottom:-7vw;color:transparent;-webkit-text-stroke:2px rgba(23,21,27,.12);font:800 28vw/.75 "Syne",sans-serif;pointer-events:none; }
.template-page .page-header .shell { position:relative;z-index:1; }.template-page .eyebrow { color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.17em; }.template-page .page-header h1 { max-width:1000px;font-size:clamp(4rem,8vw,8rem);line-height:.88;letter-spacing:-.065em; }.template-page .page-header h1 span { color:var(--pink); }.template-page .page-header .hero-copy { max-width:610px;margin:34px 0 0;color:#55474a;font-size:1.1rem; }
.template-page .portfolio { padding:95px 0 130px; }.template-page .filter-row { gap:10px;margin-bottom:60px; }.template-page .filter { padding:11px 18px;border:1px solid var(--ink);color:var(--ink);font-weight:700; }.template-page .filter.active,.template-page .filter:hover { color:white;background:var(--ink);box-shadow:4px 4px 0 var(--pink); }
.template-page .project-grid { grid-template-columns:repeat(2,1fr);gap:64px 24px; }.template-page .project-card { transition:transform .25s; }.template-page .project-card:hover { transform:translateY(-7px); }.template-page .project-visual { border:2px solid var(--ink);background:var(--cream);box-shadow:8px 8px 0 var(--gold); }.template-page .project-visual::after { background:linear-gradient(145deg,transparent 60%,rgba(212,175,55,.22)); }.template-page .project-info { padding:22px 8px 0; }.template-page .project-info h2 { font-size:1.55rem; }.template-page .project-arrow { width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:white;background:var(--ink); }
.template-page .portfolio-note { margin-top:100px;padding:70px 35px;border:2px solid var(--ink);background:var(--cream);box-shadow:10px 10px 0 var(--gold); }.template-page .portfolio-note h2 { font-size:clamp(2.6rem,5vw,4.8rem); }.template-page .template-modal { border:2px solid var(--ink);border-radius:0;background:var(--cream);box-shadow:12px 12px 0 var(--gold); }.template-page .modal-close { color:white;background:var(--ink); }.template-page footer { color:var(--paper);background:var(--ink); }.template-page .foot { min-height:110px; }
@media(max-width:800px) { .template-page .shell { width:min(100% - 32px,1240px); }.template-page header { z-index:100; }.template-page.menu-open header { height:100dvh;align-items:flex-start;background:var(--cream); }.template-page .brand,.template-page .menu { position:relative;z-index:102; }.template-page .nav-links { z-index:101;background:var(--cream);font-family:"Syne",sans-serif; }.template-page .page-header { padding:155px 0 85px; }.template-page .page-header h1 { font-size:clamp(3.4rem,15vw,6rem); }.template-page .portfolio { padding:70px 0 95px; }.template-page .project-grid { grid-template-columns:1fr; }.template-page .filter-row { margin-bottom:45px; }.template-page .portfolio-note { padding:50px 22px; }.template-page .foot { flex-direction:column;align-items:flex-start;justify-content:center; } }