:root{
  --bg:#0a0a0b;
  --panel:#131212;
  --panel-2:#191615;
  --border:rgba(224,190,155,.18);
  --text:#f4eadf;
  --muted:#d2c1b2;
  --accent:#c79058;
  --accent-2:#8f603e;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --radius:18px;
  --radius-sm:10px;
  --container:min(1180px,calc(100% - 32px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(137,94,59,.20), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(199,144,88,.22), transparent 24%),
    radial-gradient(circle at 50% 110%, rgba(143,96,62,.18), transparent 34%),
    linear-gradient(180deg,#090909 0%,#130f0d 42%,#171210 100%);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:var(--container);margin:0 auto}
.serif,h1,h2,h3,.brand-word,.hero-title,.section-title,.page-title{font-family:"Playfair Display",Georgia,serif}
.site-shell{position:relative;overflow:hidden}
.site-shell:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.14) .5px, transparent .5px);
  background-size:4px 4px;mix-blend-mode:soft-light;
}
.topbar-wrap{padding:26px 0 0}
.topbar{
  border:1px solid var(--border);border-radius:28px 28px 0 0;backdrop-filter:blur(6px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar .inner{display:flex;align-items:center;gap:22px;justify-content:space-between;padding:18px 24px;position:relative}
.logo{display:flex;align-items:center;gap:14px;min-width:250px}
.logo-mark{
  width:64px;height:52px;position:relative;display:grid;place-items:center;color:var(--accent)
}
.logo-mark:before,.logo-mark:after{content:"";position:absolute;border:2px solid currentColor;border-radius:999px}
.logo-mark:before{width:32px;height:22px;bottom:10px;left:12px;border-right-color:transparent}
.logo-mark:after{width:16px;height:14px;right:10px;bottom:18px;border-left-width:2px}
.logo-steam,.logo-steam:before,.logo-steam:after{position:absolute;width:8px;height:22px;border-left:2px solid currentColor;border-radius:50%;top:2px}
.logo-steam{left:22px;transform:rotate(-8deg)}
.logo-steam:before,.logo-steam:after{content:"";top:0}
.logo-steam:before{left:10px;transform:rotate(10deg)}
.logo-steam:after{left:20px;transform:rotate(18deg)}
.logo-book{position:absolute;bottom:1px;left:6px;width:50px;height:20px;border-bottom:2px solid currentColor;border-radius:0 0 18px 18px}
.logo-book:before,.logo-book:after{content:"";position:absolute;bottom:-2px;width:24px;height:14px;border:2px solid currentColor;border-top:none}
.logo-book:before{left:0;border-right:none;transform:skewY(9deg)}
.logo-book:after{right:0;border-left:none;transform:skewY(-9deg)}
.logo-text small{display:block;letter-spacing:.34em;font-size:.9rem;color:var(--text)}
.logo-text strong{display:block;font-size:2.45rem;line-height:.9;color:var(--accent);font-family:"Playfair Display",Georgia,serif;font-weight:500}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:1.03rem;color:rgba(244,234,223,.92);position:relative;padding:8px 0}
.nav a.active:after,.nav a:hover:after{content:"";position:absolute;left:0;bottom:-10px;width:58px;height:3px;border-radius:999px;background:var(--accent)}
.cta-btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;
  border-radius:9px;font-weight:700;letter-spacing:.01em;transition:.28s ease;cursor:pointer;border:1px solid transparent
}
.cta-btn,.btn.primary{background:linear-gradient(180deg,#d2a06a,#ba7f4f);color:#26160f;box-shadow:0 12px 30px rgba(199,144,88,.18)}
.btn.secondary{background:rgba(18,14,13,.74);border-color:rgba(232,198,163,.55);color:var(--text)}
.btn:hover,.cta-btn:hover{transform:translateY(-2px)}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:1rem}
.mobile-nav{display:none}
.hero-frame{
  border:1px solid var(--border);border-top:none;border-radius:0 0 28px 28px;min-height:calc(100vh - 88px);
  position:relative;overflow:hidden;
  background:
   linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.14) 70%,rgba(0,0,0,.55) 100%),
   radial-gradient(circle at 70% 22%, rgba(199,144,88,.25), transparent 28%),
   radial-gradient(circle at 25% 66%, rgba(137,94,59,.22), transparent 18%),
   linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
.hero-grid{display:grid;grid-template-columns:1fr minmax(420px,540px) 1fr;align-items:end;gap:8px;padding:26px 22px 34px;min-height:calc(100vh - 120px)}
.hero-center{align-self:center;text-align:center;position:relative;z-index:2;padding:80px 0 54px}
.hero-brand{margin:0 auto 20px;max-width:520px}
.hero-brand .mini-mark{width:125px;height:100px;margin:0 auto 16px;position:relative;color:var(--accent)}
.hero-brand .mini-mark:before{content:"";position:absolute;left:31px;top:24px;width:62px;height:43px;border:4px solid currentColor;border-right-color:transparent;border-radius:0 0 22px 22px}
.hero-brand .mini-mark:after{content:"";position:absolute;right:21px;top:36px;width:24px;height:20px;border:4px solid currentColor;border-left-width:4px;border-radius:999px}
.hero-brand .mini-book{position:absolute;left:12px;right:12px;bottom:6px;height:30px}
.hero-brand .mini-book:before,.hero-brand .mini-book:after{content:"";position:absolute;bottom:0;width:48px;height:20px;border-bottom:4px solid currentColor}
.hero-brand .mini-book:before{left:18px;border-left:4px solid currentColor;transform:skewY(13deg)}
.hero-brand .mini-book:after{right:18px;border-right:4px solid currentColor;transform:skewY(-13deg)}
.hero-brand .mini-steam,.hero-brand .mini-steam:before,.hero-brand .mini-steam:after{content:"";position:absolute;top:-4px;width:12px;height:38px;border-left:4px solid currentColor;border-radius:50%}
.hero-brand .mini-steam{left:44px;transform:rotate(-10deg)}
.hero-brand .mini-steam:before{left:16px;transform:rotate(10deg)}
.hero-brand .mini-steam:after{left:34px;transform:rotate(20deg)}
.hero-brand .small-line{display:block;font-size:1rem;letter-spacing:.28em;color:var(--text);margin-bottom:8px}
.hero-brand .big-line{display:block;font-size:5.3rem;line-height:.9;color:var(--accent);font-weight:500}
.hero-title{font-size:4.75rem;line-height:.98;margin:0 auto 18px;max-width:760px;font-weight:500}
.hero-copy{font-size:1.48rem;line-height:1.5;color:var(--muted);max-width:620px;margin:0 auto 34px}
.hero-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.scene{position:relative;min-height:520px}
.device-laptop,.device-monitor,.cup-stack,.phone-prop,.smoke{position:absolute}
.device-laptop{left:6px;bottom:52px;width:410px;height:266px;transform:rotate(-4deg)}
.device-monitor{right:8px;bottom:78px;width:360px;height:435px;transform:rotate(2deg)}
.device-laptop .lid,.device-monitor .screen{
  position:absolute;inset:0;border-radius:18px;background:linear-gradient(145deg,#6f6966,#262222);padding:14px;box-shadow:var(--shadow)
}
.device-laptop .display,.device-monitor .display{height:100%;border-radius:12px;background:linear-gradient(180deg,#0f0c0b,#241814);border:1px solid rgba(216,164,120,.18);overflow:hidden;position:relative}
.display .mock-nav{display:flex;justify-content:space-between;padding:14px 16px 10px;color:#cda57c;font-size:.78rem;letter-spacing:.06em}
.display .mock-title{font-family:"Playfair Display",Georgia,serif;font-size:2.1rem;color:var(--text);padding:46px 22px 4px}
.display .mock-text{padding:0 22px;color:#cfbba7;font-size:.9rem;line-height:1.5;max-width:260px}
.display .mock-btn{margin:16px 22px;background:#c79058;color:#24150e;border-radius:7px;padding:10px 16px;display:inline-block;font-weight:700}
.display .mock-grid{position:absolute;right:16px;top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:150px}
.display .mock-grid span,.display .project-cards span{display:block;background:linear-gradient(180deg,#4c3629,#2d211c);border-radius:8px;height:58px;border:1px solid rgba(223,188,151,.12)}
.device-laptop .base{position:absolute;left:16px;right:16px;bottom:-34px;height:70px;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#79716e,#3d3836)}
.device-laptop .trackpad{position:absolute;left:150px;bottom:-14px;width:110px;height:10px;border-radius:99px;background:#c9c1bc}
.device-monitor .screen{border-radius:24px;padding:20px}
.device-monitor .display .mock-title{font-size:1.65rem;padding-top:32px}
.device-monitor .stand{position:absolute;left:130px;bottom:-26px;width:90px;height:26px;border-radius:0 0 16px 16px;background:#3c3734}
.device-monitor .foot{position:absolute;left:96px;bottom:-44px;width:156px;height:16px;border-radius:99px;background:#2b2724}
.display .project-cards{padding:18px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.display .project-cards span{height:72px}
.cup-stack{display:flex;align-items:flex-end;gap:0;bottom:18px}
.cup-stack.left{left:220px}.cup-stack.right{right:288px;bottom:24px}
.books{width:150px}
.books span{display:block;height:24px;border-radius:6px;background:linear-gradient(180deg,#7c685c,#5b4b43);margin-bottom:2px}
.books span:nth-child(1){width:112px;margin-left:28px}.books span:nth-child(2){width:150px}.books span:nth-child(3){width:124px;margin-left:18px}
.cup{width:84px;height:96px;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#755b4e,#5f4a40);position:relative;margin-left:-6px}
.cup:before{content:"";position:absolute;inset:-6px -8px auto -8px;height:16px;border-radius:50%;background:#342822}.cup:after{content:"";position:absolute;right:-24px;top:18px;width:24px;height:30px;border:8px solid #5f4a40;border-left:none;border-radius:0 99px 99px 0}
.phone-prop{right:170px;bottom:8px;width:112px;height:28px;border-radius:10px;background:linear-gradient(180deg,#242324,#111214);transform:rotate(-14deg);box-shadow:0 18px 26px rgba(0,0,0,.35)}
.smoke{width:180px;height:180px;filter:blur(10px);opacity:.34}
.smoke:before,.smoke:after{content:"";position:absolute;border-radius:50%;border:12px solid rgba(240,225,213,.46);border-color:rgba(240,225,213,.42) transparent transparent transparent;transform:rotate(20deg)}
.smoke:before{width:90px;height:120px;left:30px;top:24px}.smoke:after{width:70px;height:98px;left:56px;top:0}
.smoke.left{left:88px;bottom:198px}.smoke.mid{left:306px;bottom:168px}.smoke.right{right:290px;bottom:192px}
.section{padding:90px 0}.section.compact{padding:72px 0}
.section-card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:26px;padding:28px;box-shadow:var(--shadow)}
.eyebrow{display:block;color:#d5b08b;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;margin-bottom:12px}
.section-title,.page-title{font-size:3rem;line-height:1.08;margin:0 0 14px;font-weight:500}
.section-copy,.page-copy{font-size:1.08rem;line-height:1.8;color:var(--muted);max-width:760px}
.grid-3,.grid-4,.grid-2{display:grid;gap:22px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}
.feature-card,.service-card,.portfolio-card,.testimonial,.faq-item,.stat-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.icon-badge{width:52px;height:52px;border:1px solid rgba(223,188,151,.26);border-radius:14px;display:grid;place-items:center;color:var(--accent);font-size:1.4rem;margin-bottom:18px}
.card-title{font-family:"Playfair Display",Georgia,serif;font-size:1.55rem;margin:0 0 10px;font-weight:500}
.card-copy{color:var(--muted);line-height:1.7}
.meta{color:#d5b08b;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.page-hero{padding:58px 0 34px}
.page-hero .section-card{padding:44px;background:
 linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),
 radial-gradient(circle at 90% 0%,rgba(199,144,88,.18),transparent 32%),
 radial-gradient(circle at 10% 100%,rgba(143,96,62,.18),transparent 32%)}
.service-list{display:grid;gap:22px}
.service-row{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;padding:26px;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.02)}
.service-row .left h3{margin:10px 0 0;font-size:1.75rem;font-family:"Playfair Display",Georgia,serif;font-weight:500}
.bullets{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.8}
.portfolio-thumb{height:220px;border-radius:16px;margin-bottom:18px;background:
 linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5)),
 radial-gradient(circle at 75% 18%, rgba(199,144,88,.28), transparent 23%),
 linear-gradient(140deg,#221713,#0f0d0c);border:1px solid rgba(223,188,151,.12);position:relative;overflow:hidden}
.portfolio-thumb:before{content:"";position:absolute;left:22px;right:22px;top:22px;height:16px;border-radius:8px;background:#2e1f1a;box-shadow:0 32px 0 #2a1d19,0 78px 0 #2a1d19}
.portfolio-thumb:after{content:"";position:absolute;left:22px;top:56px;width:120px;height:84px;border-radius:12px;background:#473227;box-shadow:160px 0 0 #473227,320px 0 0 #473227}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.full{grid-column:1/-1}
label{display:block;font-weight:600;margin-bottom:8px;color:var(--text)}
input,select,textarea{width:100%;padding:14px 16px;border-radius:12px;background:#110f0e;border:1px solid rgba(223,188,151,.16);color:var(--text);font:inherit}
textarea{min-height:180px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(199,144,88,.75);box-shadow:0 0 0 4px rgba(199,144,88,.12)}
.form-response{margin-top:14px;color:#dfc3aa;font-size:.95rem}
/* Honeypot: visually hidden but accessible to bots that ignore CSS */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;tabindex:-1}
.contact-detail{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.02)}
.contact-detail strong{display:block;margin-bottom:4px}
.stat-card h3{font-size:2.2rem;margin:0 0 8px;font-family:"Playfair Display",Georgia,serif;font-weight:500;color:var(--accent)}
.cta-band{padding:80px 0 100px}.cta-panel{padding:42px;border:1px solid var(--border);border-radius:26px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.footer{padding:26px 0 40px;color:#cab6a5}.footer .section-card{padding:24px}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.small-links{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding-bottom:40px}
  .scene{display:none}
  .hero-center{padding:72px 0}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .service-row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav,.cta-desktop{display:none}
  .menu-toggle{display:block}
  .mobile-nav{display:none;padding:0 24px 18px;gap:12px;flex-direction:column}
  .mobile-nav.open{display:flex}
  .mobile-nav a{padding:10px 0;border-top:1px solid rgba(223,188,151,.12)}
  .logo{min-width:auto}.logo-text small{font-size:.72rem}.logo-text strong{font-size:1.8rem}
  .hero-brand .big-line{font-size:3.45rem}.hero-title{font-size:3.1rem}.hero-copy{font-size:1.1rem}
  .section-title,.page-title{font-size:2.35rem}
  .grid-3,.grid-4,.grid-2,.form-grid{grid-template-columns:1fr}
  .section-card{padding:22px}
  .topbar .inner{padding:16px 18px}
  .hero-frame{min-height:auto}
}