:root{
--bg-canvas:#3b0d1a;--bg-surface:#2a0912;--bg-surface-hover:#4a1424;--text-primary:#f7f0e3;--text-muted:#dccbb0;--accent-primary:#e8d5a8;--accent-secondary:#b8737f;--border-subtle:rgba(232,213,168,.22);--ink:#120308;
--ease-kinetic:cubic-bezier(0.16,1,0.3,1);--shadow-elevation:0 12px 32px -4px rgba(0,0,0,.35);--glow-accent:0 0 24px -4px var(--accent-primary);--glass-backdrop:blur(16px) saturate(180%);
--head:system-ui,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-canvas);color:var(--text-primary);font:1.0625rem/1.75 Georgia,'Times New Roman',serif;overflow-wrap:anywhere;hyphens:auto}
h1,h2,h3,h4{font-family:var(--head);font-weight:800;letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere;hyphens:auto}
a{color:var(--accent-primary);text-underline-offset:3px}
a:hover{color:#fff}
img{display:block;max-width:100%;height:auto;border-radius:0}
:focus-visible{outline:3px solid var(--accent-primary);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.skip{position:absolute;left:-999px;top:0;background:var(--accent-primary);color:var(--bg-surface);padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem}
/* Header */
.site-header{position:relative;z-index:30}
.site-header.is-overlay{position:absolute;top:0;left:0;right:0;background:transparent}
.site-header.is-solid{background:var(--bg-canvas);border-bottom:1px solid var(--border-subtle)}
.header-inner{display:flex;align-items:center;gap:1rem;padding-top:1.1rem;padding-bottom:1.1rem;position:relative}
.brand{display:flex;align-items:center;gap:.6rem;font:800 1.15rem/1 var(--head);letter-spacing:-.02em;color:var(--text-primary);text-decoration:none;margin-right:auto}
.brand-mark{width:1.7rem;height:1.7rem;border:2px solid var(--accent-primary);display:grid;place-items:center;flex-shrink:0}
.brand-mark::after{content:"";width:.5rem;height:.8rem;background:var(--accent-primary);clip-path:polygon(20% 0,80% 0,80% 45%,100% 100%,0 100%,20% 45%)}
.site-nav{display:flex;gap:1.35rem}
.site-nav a{color:var(--text-primary);text-decoration:none;font:600 .95rem var(--head);padding:.3rem 0;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.site-nav a:hover,.site-nav a[aria-current=page]{border-color:var(--accent-primary);color:var(--accent-primary)}
.menu-btn{display:none;background:transparent;border:1px solid var(--border-subtle);color:var(--accent-primary);font:800 1.5rem/1 var(--head);width:2.7rem;height:2.7rem;cursor:pointer}
/* Hero */
.hero,.page-hero{position:relative;isolation:isolate;background:linear-gradient(135deg,#3b0d1a,#5e1428,#7a1f35,#2a0912);background-size:200% 200%;animation:gradientShift 12s ease infinite}
.hero::before,.page-hero::before,.dots-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(232,213,168,.16) 1.2px,transparent 1.3px);background-size:22px 22px;z-index:-1;pointer-events:none}
.hero{min-height:90vh;display:flex;align-items:center;padding:8rem 0 5rem}
.hero h1{font-size:clamp(3rem,9vw,7.4rem);color:var(--accent-primary);letter-spacing:-.045em;line-height:.95;max-width:13ch;margin:1rem 0 1.6rem}
.hero .lede{max-width:52ch;margin-bottom:2.2rem}
.page-hero{padding:4.5rem 0 3.5rem}
.page-hero h1{font-size:clamp(2.3rem,6vw,4.6rem);color:var(--accent-primary);letter-spacing:-.04em;max-width:18ch;margin:.8rem 0 1rem}
.orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.3;background:var(--accent-primary);animation:float 14s ease-in-out infinite;z-index:-1;pointer-events:none}
.orb-a{width:320px;height:320px;top:12%;right:6%}
.orb-b{width:220px;height:220px;bottom:6%;left:38%;background:var(--accent-secondary);animation-delay:-6s}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,24px)}}
.eyebrow{display:inline-block;font:700 .78rem var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-primary)}
.lede{font-size:1.2rem;color:var(--text-muted)}
/* Sections */
.section{padding:5.5rem 0;position:relative;isolation:isolate}
.section.alt{background:var(--bg-surface)}
.section.dots-bg{background-color:var(--bg-surface)}
.section h2{font-size:clamp(1.9rem,4vw,3rem);margin:.5rem 0 1rem}
p+p{margin-top:1rem}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.split.flip .split-media{order:-1}
.split-media{position:relative;isolation:isolate}
.split-media::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--accent-primary);z-index:-1}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-text .btn{margin-top:1.6rem}
.drawer-no{font:800 .8rem var(--head);letter-spacing:.14em;color:var(--accent-secondary);text-transform:uppercase}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:3rem}
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);display:flex;flex-direction:column;transition:transform .5s var(--ease-kinetic),box-shadow .5s var(--ease-kinetic),background .3s}
.section.alt .card,.section.dots-bg .card{background:var(--bg-canvas)}
.card:hover{transform:translateY(-5px) scale(1.015);box-shadow:var(--shadow-elevation),var(--glow-accent);background:var(--bg-surface-hover)}
.card-media{position:relative}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.badge{position:absolute;left:1.2rem;bottom:0;transform:translateY(50%);background:var(--accent-primary);color:var(--bg-surface);font:800 .72rem var(--head);letter-spacing:.14em;text-transform:uppercase;padding:.4rem .75rem}
.card-body{padding:2rem 1.4rem 1.6rem;flex:1;display:flex;flex-direction:column}
.card h3{font-size:1.35rem;margin-bottom:.5rem}
.card p{color:var(--text-muted);font-size:.98rem}
.card .more{margin-top:auto;padding-top:1rem;font:700 .9rem var(--head);text-decoration:none}
/* Buttons */
.btn{display:inline-block;background:var(--accent-primary);color:var(--bg-surface);font:800 1rem var(--head);padding:.95rem 1.6rem;text-decoration:none;border:0;border-radius:0;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .2s var(--ease-kinetic),box-shadow .2s var(--ease-kinetic)}
.btn:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);color:var(--bg-surface)}
/* Prose */
.prose{max-width:70ch;margin:0 auto}
.prose h2{margin:2.8rem 0 1rem;font-size:clamp(1.6rem,3vw,2.2rem)}
.prose h3{margin:1.8rem 0 .6rem;font-size:1.3rem;color:var(--accent-primary)}
.prose ul{padding-left:1.2rem;margin:1rem 0}
.prose li+li{margin-top:.4rem}
.note{border-left:3px solid var(--accent-primary);background:var(--bg-surface);padding:1.2rem 1.4rem;margin:2rem 0;color:var(--text-muted)}
/* Table */
table{width:100%;border-collapse:collapse;min-width:600px;margin-top:1.5rem}
th,td{padding:.85rem 1rem;border-bottom:1px solid var(--border-subtle);text-align:left;vertical-align:top}
th{font-family:var(--head);background:var(--bg-surface);color:var(--accent-primary)}
/* Tabs */
.tablist{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.tab{background:transparent;color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:0;padding:.7rem 1.2rem;font:700 .95rem var(--head);cursor:pointer;transition:background .3s}
.tab:hover{background:var(--bg-surface-hover)}
.tab[aria-selected=true]{background:var(--accent-primary);color:var(--bg-surface);border-color:var(--accent-primary)}
.tabpanel{border:1px solid var(--border-subtle);padding:2rem;background:var(--bg-canvas);margin-top:-1px}
.tabpanel h3{font-size:1.4rem;margin-bottom:.6rem;color:var(--accent-primary)}
/* Accordion */
.accordion{margin-top:2rem;border-top:1px solid var(--border-subtle)}
.acc-item{border-bottom:1px solid var(--border-subtle)}
.acc-btn{width:100%;text-align:left;background:none;border:0;color:var(--text-primary);font:800 1.1rem/1.4 var(--head);padding:1.2rem 2.5rem 1.2rem 0;position:relative;cursor:pointer}
.acc-btn::after{content:"+";position:absolute;right:.3rem;top:.9rem;color:var(--accent-primary);font-size:1.6rem;transition:transform .3s var(--ease-kinetic)}
.acc-btn[aria-expanded=true]::after{transform:rotate(45deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-kinetic)}
.acc-panel>div{overflow:hidden}
.acc-panel.open{grid-template-rows:1fr}
.acc-panel p{padding-bottom:1.2rem;color:var(--text-muted)}
/* Checklist */
.checklist{list-style:none;counter-reset:pack;display:grid;gap:1rem;margin-top:1.5rem}
.checklist li{counter-increment:pack;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1rem 1.2rem;background:var(--bg-surface);border-left:3px solid var(--accent-primary)}
.checklist li::before{content:counter(pack,decimal-leading-zero);font:800 1.5rem/1.2 var(--head);color:var(--accent-primary)}
/* Contact tool */
.contact-tool{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.tag-form{position:relative;background:var(--accent-primary);color:var(--bg-surface);padding:2.4rem 2rem 2.2rem 4rem;clip-path:polygon(2.6rem 0,100% 0,100% 100%,2.6rem 100%,0 calc(100% - 2.6rem),0 2.6rem)}
.tag-form::before{content:"";position:absolute;left:1.1rem;top:50%;width:16px;height:16px;transform:translateY(-50%);background:var(--bg-canvas);border:3px solid #a8844a}
.tag-form h2{font-size:1.5rem;margin-bottom:.4rem}
.tag-form label{display:block;font:800 .78rem var(--head);letter-spacing:.12em;text-transform:uppercase;margin:1rem 0 .35rem}
.tag-form input,.tag-form textarea{width:100%;padding:.75rem .9rem;border:2px solid var(--bg-surface);border-radius:0;background:var(--text-primary);color:var(--bg-surface);font:1rem Georgia,serif}
.tag-form textarea{min-height:150px;resize:vertical}
.preview{background:var(--bg-surface);border:1px solid var(--border-subtle);padding:1.6rem}
.preview h2{font-size:1.3rem;margin-bottom:1rem;color:var(--accent-primary)}
.preview pre{white-space:pre-wrap;overflow-wrap:anywhere;font:.93rem/1.6 ui-monospace,Menlo,Consolas,monospace;color:var(--text-primary);min-height:280px}
.tool-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.tool-status{margin-top:1rem;color:var(--accent-primary);min-height:1.6em;font-family:var(--head)}
/* Footer */
.site-footer{background:#1f060d;border-top:1px solid var(--border-subtle);padding:4rem 0 2.5rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.footer-note,.footer-legal{color:var(--text-muted);font-size:.95rem;margin-top:1rem}
.footer-title{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-primary);margin-bottom:1rem}
.footer-links{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem 1.5rem;font-family:var(--head)}
.footer-links a,.legal-line a{color:var(--text-primary);text-decoration:none}
.footer-links a:hover,.legal-line a:hover{color:var(--accent-primary)}
.legal-line{display:flex;flex-wrap:wrap;gap:1.5rem;border-top:1px solid var(--accent-primary);margin-top:1.6rem;padding-top:1rem;font:600 .9rem var(--head)}
/* Reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-kinetic),transform .7s var(--ease-kinetic)}
.js .reveal.reveal-visible{opacity:1;transform:translateY(0)}
/* Responsive */
@media(min-width:1025px){.hero h1{font-size:clamp(5rem,8vw,7.4rem)}}
@media(max-width:1024px){.split{gap:2.5rem}.site-nav{gap:1rem}}
@media(max-width:768px){
.menu-btn{display:block}
.site-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-surface);border-top:2px solid var(--accent-primary);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .45s var(--ease-kinetic),visibility .45s;box-shadow:var(--shadow-elevation)}
.site-nav.open{max-height:32rem;visibility:visible}
.site-nav a{padding:.95rem 1.5rem;border-bottom:1px solid var(--border-subtle)}
.split,.contact-tool,.footer-grid{grid-template-columns:1fr}
.split.flip .split-media{order:0}
.section{padding:4rem 0}
.hero{min-height:auto;padding:7rem 0 4rem}}
@media(max-width:480px){.wrap{padding:0 1.1rem}.footer-links{grid-template-columns:1fr}.tag-form{padding:2rem 1.2rem 2rem 3rem}.tabpanel{padding:1.4rem}.split-media::after{inset:8px -8px -8px 8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}