/* CAMERRA HEADER — retained styling plus first live hero. */
:root { --black:#080808; --panel:#11100e; --gold:#d4a953; --gold-light:#f2d18c; --white:#f7f5f0; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--black); color:var(--white); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--gold-light); outline-offset:3px; }
[hidden] { display:none !important; }
.site-header { position:relative; z-index:10; background:#050505; border-bottom:1px solid rgba(212,169,83,.52); }
.header-inner { max-width:1860px; min-height:90px; padding:10px clamp(16px,2.3vw,40px); margin:auto; display:flex; align-items:center; gap:clamp(10px,1.4vw,26px); }
.brand { display:block; flex:0 0 auto; }
.brand img { display:block; width:clamp(160px,16vw,260px); height:auto; max-height:76px; object-fit:contain; object-position:left center; }
.primary-menu { display:flex; align-items:center; justify-content:flex-end; gap:3px; margin-left:auto; }
.nav-group { position:relative; }
.nav-button,.nav-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px clamp(7px,.85vw,14px); border:1px solid transparent; border-radius:2px; background:transparent; color:var(--white); font:700 clamp(12px,.95vw,16px)/1.15 Arial,sans-serif; white-space:nowrap; letter-spacing:.1px; }
.nav-button:hover,.nav-link:hover,.nav-button[aria-expanded="true"] { border-color:var(--gold); color:var(--gold-light); }
.chevron { display:inline-block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid currentColor; border-bottom:0; margin-left:2px; }
.submenu { display:none; position:absolute; top:100%; left:0; min-width:225px; padding:8px; background:#101010; border:1px solid rgba(212,169,83,.5); box-shadow:0 18px 34px rgba(0,0,0,.6); }
.nav-group.is-open > .submenu { display:block; }
.submenu a { display:block; padding:12px 13px; color:#f7f5f0; font:600 14px/1.3 Arial,sans-serif; white-space:nowrap; }
.submenu a:hover,.submenu a:focus-visible { color:var(--gold-light); }
.header-actions { display:flex; align-items:center; gap:12px; margin-left:8px; }
.search-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid #332e26; border-radius:50%; background:#131313; color:var(--white); }
.search-button:hover { color:var(--gold-light); border-color:var(--gold); }
.search-button svg { fill:none; stroke:currentColor; stroke-width:2; }
.quote-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 17px; border:1px solid var(--gold); border-radius:3px; white-space:nowrap; color:var(--gold-light); font-weight:700; font-size:14px; }
.quote-button:hover { background:var(--gold); color:#090909; }
.search-panel { position:absolute; right:2%; top:100%; display:flex; flex-wrap:wrap; gap:10px; align-items:center; width:min(440px,95vw); padding:17px; background:#111; border:1px solid var(--gold); }
.search-panel label { width:100%; font-size:13px; }
.search-panel input { flex:1; min-width:140px; padding:10px; background:#191919; color:white; border:1px solid #76613c; }
.search-panel button { background:var(--gold); color:#080808; border:0; padding:11px 15px; font-weight:700; }
.search-message { width:100%; font-size:12px; color:var(--gold-light); margin:0; }
.mobile-menu-button { display:none; }
@media(max-width:1450px) { .header-inner { flex-wrap:wrap; justify-content:space-between; } .mobile-menu-button { display:flex; align-items:center; gap:8px; order:2; margin-left:auto; padding:10px 12px; background:#131313; color:white; border:1px solid var(--gold); } .header-actions { order:3; margin-left:0; } .primary-menu { display:none; order:4; flex:0 0 100%; margin:0; padding:12px 0; align-items:stretch; flex-direction:column; } .primary-menu.mobile-open { display:flex; } .nav-button,.nav-link { justify-content:space-between; width:100%; font-size:15px; } .submenu { position:static; box-shadow:none; width:100%; } }
@media(max-width:580px) { .brand img { width:155px; } .header-inner { gap:8px; } .quote-button { font-size:11px; padding:8px; } .search-button { width:38px; height:38px; } }
/* Hero-only live landing page: this section replaces the empty development <main>. */
.hero { position:relative; min-height: min(790px,88vh); display:flex; align-items:center; background:#0b0a08 url('assets/camerra-hero-tajima-v1.png') center center/cover no-repeat; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.87) 0%,rgba(0,0,0,.72) 25%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.05) 100%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 45%); z-index:-1; }
.hero-content { width:min(100%,1500px); padding:clamp(55px,8vw,130px) clamp(20px,5vw,78px); margin:auto; }
.hero-eyebrow { color:var(--gold-light); font-size:clamp(10px,1vw,13px); font-weight:700; letter-spacing:2px; }
.hero h1 { margin:18px 0; font:700 clamp(40px,5.3vw,79px)/1.03 Georgia,'Times New Roman',serif; letter-spacing:-1.5px; text-shadow:0 3px 12px #000; }
.hero h1 span { color:var(--gold-light); }
.hero-description { max-width:490px; color:#eee9de; font-size:clamp(15px,1.25vw,19px); line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-primary,.hero-secondary { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:12px 22px; border:1px solid var(--gold); border-radius:2px; font-size:13px; font-weight:800; letter-spacing:.35px; }
.hero-primary { background:linear-gradient(#f2d18c,#d4a953); color:#080808; }
.hero-secondary { background:rgba(0,0,0,.55); color:#fff; }
.hero-primary:hover,.hero-secondary:hover { filter:brightness(1.16); }
.temporary-contact { display:flex; gap:15px; justify-content:center; align-items:center; flex-wrap:wrap; padding:22px 15px; border-top:1px solid #6b5227; background:#070707; font-size:13px; color:#d7d0bf; }
.temporary-contact p { margin:0; } .temporary-contact a { color:var(--gold-light); text-decoration:underline; }
@media(max-width:700px) { .hero { min-height:650px; background-position:59% center; align-items:flex-end; } .hero::before { background:linear-gradient(0deg,rgba(0,0,0,.94),rgba(0,0,0,.72) 45%,rgba(0,0,0,.12)); } .hero-content { padding:70px 22px 45px; } .hero h1 { font-size:44px; } }