:root {
  --bg: #090909;
  --panel: #101010;
  --panel-2: #151515;
  --line: #242424;
  --text: #f4f4f4;
  --muted: #a6a6a6;
  --red: #e21b23;
  --red-dark: #b80e16;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.section-pad { padding-left: clamp(22px, 6vw, 72px); padding-right: clamp(22px, 6vw, 72px); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 10px clamp(22px, 6vw, 72px);
  background: rgba(9,9,9,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 54px; height: 54px; object-fit: contain; }
.brand-copy { display: inline-flex; flex-direction: column; gap: 2px; }
.brand-main { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.12rem; letter-spacing: .06em; }
.brand-main span { color: var(--red); }
.brand-sub { font-size: .48rem; letter-spacing: .30em; color: #c9c9c9; }

.nav { display: flex; align-items: center; gap: 34px; font-size: .91rem; }
.nav > a, .dropdown-toggle { position: relative; padding: 10px 0; color: #ddd; }
.nav > a::after, .dropdown-toggle::after {
  content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 2px; background: var(--red); transition: .2s;
}
.nav > a:hover::after, .nav > a.active::after, .dropdown-toggle:hover::after { width: 100%; }
.dropdown-toggle { border: 0; background: none; cursor: pointer; color: #ddd; }
.nav-dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 42px; left: -14px; min-width: 225px; padding: 8px; background: #111; border: 1px solid var(--line); display: none;
}
.nav-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 10px 12px; color: #ccc; }
.dropdown-menu a:hover { background: #1a1a1a; color: #fff; }

.menu-toggle { display: none; width: 42px; height: 42px; background: transparent; border: 0; padding: 8px; }
.menu-toggle span { display:block; height:2px; background:#fff; margin:6px 0; }

.hero {
  min-height: 640px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.eyebrow, .mini-title { color: #c8c8c8; font-size: .72rem; letter-spacing: .22em; font-weight: 700; }
.eyebrow span { color: var(--red); margin: 0 8px; }
h1,h2,h3 { font-family: "Space Grotesk", sans-serif; margin: 0; letter-spacing: -.03em; }
h1 { font-size: clamp(3rem, 6vw, 5.6rem); line-height: .95; max-width: 760px; }
h1 span, .idea-copy h2 span { color: var(--red); }
.hero-text { color: #d0d0d0; font-size: clamp(1rem, 1.6vw, 1.2rem); margin: 28px 0 30px; max-width: 620px; }
.btn { display: inline-flex; align-items: center; gap: 20px; padding: 15px 22px; font-weight: 800; font-size: .82rem; letter-spacing: .04em; }
.btn-primary { background: var(--red); }
.btn-primary:hover { background: var(--red-dark); }
.btn-outline { border: 1px solid #555; }
.btn-outline:hover { border-color: var(--red); color: var(--red); }

.hero-visual { position: relative; min-height: 490px; display:flex; align-items:center; justify-content:center; }
.red-glow { position:absolute; width:82%; height:68%; background: radial-gradient(circle, rgba(226,27,35,.34), rgba(226,27,35,0) 70%); filter: blur(20px); }
.hero-image {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid #292929;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.section { padding-top: 82px; padding-bottom: 82px; border-bottom: 1px solid var(--line); }
.section-heading { margin-bottom: 30px; }
.section-heading h2, .idea-copy h2, .contact-strip h2 { font-size: clamp(2rem, 3.2vw, 3.4rem); }
.section-heading p:last-child, .idea-copy p, .contact-strip p { color: var(--muted); }
.mini-title { display:flex; align-items:center; gap:14px; }
.mini-title::before { content:""; width:32px; height:2px; background:var(--red); }

.category-grid { display:grid; grid-template-columns: 1.35fr 1fr 1fr; gap:14px; }
.category-card { border:1px solid #2b2b2b; background:#0d0d0d; transition:.2s transform,.2s border-color; min-width: 0; }
.category-card:hover { transform:translateY(-4px); border-color:#4a4a4a; }
.category-visual { aspect-ratio: 1.12; position:relative; overflow:hidden; background: radial-gradient(circle at 65% 35%, #2b2b2b, #101010 62%); }
.image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.category-card:hover .image-card img { transform: scale(1.025); }
.category-card-wide .image-card img { object-position: 58% 50%; }
.placeholder-card { display:grid; place-items:center; }
.placeholder-card::before { content:""; position:absolute; width:58%; height:14%; border-radius:999px; background:var(--red); transform:rotate(-25deg); opacity:.85; box-shadow:0 0 28px rgba(226,27,35,.35); }
.placeholder-card::after { content:""; position:absolute; width:58%; height:48%; border:2px solid #555; border-radius:48% 52% 26% 36%; transform:rotate(-8deg); }
.placeholder-card span { position:relative; z-index:2; font-family:"Space Grotesk"; font-size:3rem; color:#3c3c3c; }
.category-label { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; font-size:.78rem; }
.category-label span { color:var(--red); font-size:1.2rem; }

.idea-section { position:relative; overflow:hidden; }
.idea-copy { max-width: 560px; position:relative; z-index:2; }
.red-line { width:38px; height:3px; background:var(--red); margin:20px 0; }
.about-logo { position:absolute; right:5%; top:13%; width:min(520px, 42vw); opacity:.34; }
.about-logo img { width:100%; filter: saturate(.9); }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:70px; position:relative; z-index:2; }
.feature { display:flex; align-items:center; gap:15px; padding-right:20px; border-right:1px solid #252525; }
.feature:last-child { border-right:0; }
.icon { width:42px; height:42px; border:1px solid #555; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; }
.feature strong { display:block; font-size:.76rem; letter-spacing:.08em; }
.feature span { display:block; color:#8f8f8f; font-size:.76rem; margin-top:3px; }

.featured-section { background: #0b0b0b; }
.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.project-card { border:1px solid #292929; background:#0f0f0f; overflow:hidden; }
.project-card > img { width:100%; aspect-ratio: 3 / 2; object-fit:cover; }
.project-copy { padding:22px; }
.project-type { margin:0 0 8px; color:var(--red); font-size:.67rem; letter-spacing:.18em; font-weight:800; }
.project-copy h3 { font-size:1.3rem; }
.project-copy p:last-child { color:var(--muted); margin-bottom:0; }

.contact-strip { display:flex; justify-content:space-between; align-items:center; gap:30px; padding-top:54px; padding-bottom:54px; border-bottom:1px solid var(--line); }
.footer { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:28px; padding-bottom:28px; color:#777; font-size:.75rem; }
.footer-logo-wrap { width: 150px; }
.footer-logo { width:100%; }

@media (max-width: 980px) {
  .menu-toggle { display:block; cursor:pointer; }
  .nav { display:none; position:absolute; top:82px; left:0; right:0; background:#0b0b0b; border-bottom:1px solid #222; padding:18px 22px 24px; flex-direction:column; align-items:flex-start; gap:6px; }
  .nav.open { display:flex; }
  .nav > a, .dropdown-toggle { width:100%; padding:11px 0; }
  .nav-dropdown { width:100%; }
  .dropdown-menu { position:static; display:block; border:0; background:transparent; padding:0 0 0 14px; }
  .dropdown-menu a { color:#999; padding:8px 0; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:42px; gap:30px; }
  .hero-visual { min-height:0; order:-1; }
  .category-grid { grid-template-columns:repeat(2,1fr); }
  .category-card-wide { grid-column: 1 / -1; }
  .category-card-wide .category-visual { aspect-ratio: 2.25 / 1; }
  .about-logo { opacity:.17; width:64%; right:-7%; }
  .features { grid-template-columns:1fr; }
  .feature { border-right:0; border-bottom:1px solid #252525; padding-bottom:18px; }
  .feature:last-child { border-bottom:0; }
}

@media (max-width: 620px) {
  .site-header { min-height:72px; padding-top:8px; padding-bottom:8px; }
  .brand-mark { width:44px; height:44px; }
  .brand-main { font-size:.95rem; }
  .brand-sub { font-size:.40rem; }
  .nav { top:72px; }
  .hero { padding-top:22px; padding-bottom:52px; }
  .hero-image { width:100%; }
  h1 { font-size:clamp(2.55rem, 13vw, 4rem); }
  .hero-text br { display:none; }
  .category-grid { grid-template-columns:1fr; gap:12px; }
  .category-card-wide { grid-column:auto; }
  .category-visual, .category-card-wide .category-visual { aspect-ratio: 1.55 / 1; }
  .category-label { font-size:.70rem; padding:12px 11px; }
  .section { padding-top:58px; padding-bottom:58px; }
  .about-logo { display:none; }
  .project-grid { grid-template-columns:1fr; }
  .contact-strip { flex-direction:column; align-items:flex-start; }
  .footer { flex-direction:column; align-items:flex-start; }
}

/* Multi-page additions */
body{background:#08090b;color:#f5f5f5}a{color:inherit}.brand{text-decoration:none}.nav>a,.nav-dropdown>a{text-decoration:none}.nav-dropdown .dropdown-menu a{text-decoration:none}.nav .active{color:#ff3442}.section-pad{scroll-margin-top:90px}.hero-copy h1{font-size:clamp(2.5rem,5.3vw,5.7rem)}.hero-text{max-width:560px}.service-grid,.business-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.business-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.info-card{background:#121417;border:1px solid #282b30;padding:28px;border-radius:6px}.info-card h3{margin:10px 0 12px;font-size:1.18rem}.info-card p{color:#c3c4c8;line-height:1.65}.info-card .num{color:#f32938;font-size:.85rem;letter-spacing:.2em}.section-heading{max-width:760px}.section-heading p{line-height:1.65}.page-intro{padding-top:120px;padding-bottom:55px;background:radial-gradient(circle at 80% 20%,#391015 0,transparent 40%)}.page-intro h1{font-size:clamp(2.5rem,6vw,5rem);margin:12px 0}.page-intro p{color:#ccc;max-width:680px;line-height:1.7}.text-block{max-width:860px;color:#ccc;line-height:1.8}.text-block h2{color:white;margin-top:35px}.contact-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.contact-links a{border:1px solid #45474a;padding:13px 17px;text-decoration:none}.contact-links a:hover{border-color:#ee2433}.category-card{text-decoration:none}.project-card{overflow:hidden}.project-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.project-copy p{line-height:1.55}.footer a{color:#eee}.footer-note{color:#aaa;font-size:.85rem}.mini-title{color:#ef2636}.btn{text-decoration:none}.category-visual.placeholder-card{background:linear-gradient(135deg,#202328,#101115)}.nav-dropdown .dropdown-menu{z-index:30}.pill{display:inline-block;border:1px solid #6c252b;color:#ff8e96;padding:5px 10px;font-size:.75rem;letter-spacing:.07em;margin-bottom:14px}
@media(max-width:800px){.service-grid,.business-grid{grid-template-columns:1fr}.page-intro{padding-top:100px}.info-card{padding:22px}.hero-copy h1{font-size:clamp(2.4rem,9vw,4rem)}}

/* Revision: simple gallery and external shop link */
.footer-external{font-size:.92rem;color:#c9c9c9;margin:10px 0}.footer-external a{text-decoration:underline;text-underline-offset:3px}.project-grid{margin-top:26px}.project-card{background:#121417;border:1px solid #282b30}.project-copy{padding:18px 20px 22px}.project-copy h3{margin:0 0 10px}.project-copy p{margin:0;color:#c4c6cb}
