:root { --teal:#0d4550; --teal-deep:#082e35; --sand:#cbb99b; --ink:#202124; --muted:#5d625f; --paper:#f8f7f4; --line:#e6e2da; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
.skip-link { position:absolute; left:-999px; top:0; background:white; color:var(--teal); padding:1rem; z-index:20; }
.skip-link:focus { left:1rem; }
.header { height:84px; padding:0 clamp(1.25rem,5vw,5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); }
.brand img { display:block; width:178px; height:auto; }
nav { display:flex; align-items:center; gap:2rem; margin-left:auto; }
nav a { color:var(--ink); font-weight:650; text-decoration:none; font-size:.94rem; }
nav a:hover, .map-link:hover { color:var(--teal); }
.button { display:inline-flex; gap:.7rem; align-items:center; background:var(--teal); color:white; text-decoration:none; padding:.9rem 1.3rem; font-weight:700; border-radius:.35rem; box-shadow:0 8px 18px rgba(8,46,53,.17); transition:background .2s,transform .2s; }
.button:hover { background:var(--teal-deep); transform:translateY(-1px); }
.button-small { padding:.68rem 1rem; font-size:.9rem; }
.hero { min-height:590px; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(248,247,244,.97) 0%,rgba(248,247,244,.91) 34%,rgba(248,247,244,.26) 64%,rgba(8,46,53,.12) 100%); }
.hero-content { position:relative; max-width:650px; margin-left:clamp(1.25rem,10vw,10rem); padding:4rem 0; }
.eyebrow { color:var(--teal); font-size:.75rem; letter-spacing:.13em; font-weight:800; margin:0 0 1rem; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.6rem,5.5vw,5.3rem); letter-spacing:-.065em; line-height:.97; margin-bottom:1.5rem; max-width:650px; }
.hero-copy { max-width:500px; font-size:1.14rem; color:#333a39; margin-bottom:2rem; }
.section { padding:clamp(4rem,8vw,7.5rem) clamp(1.25rem,8vw,8rem); }
.advantages { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; background:white; }
.advantages article { display:flex; align-items:flex-start; gap:1rem; padding:1.4rem; border:1px solid var(--line); border-radius:.6rem; }
.advantages h2 { font-size:1rem; margin-bottom:.2rem; }
.advantages p { color:var(--muted); font-size:.92rem; margin:0; }
.icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; color:white; background:var(--teal); font-weight:800; }
.section-heading { max-width:720px; margin-bottom:3rem; }
.section-heading h2,.about h2,.contact h2 { font-size:clamp(2rem,3.6vw,3.45rem); letter-spacing:-.05em; line-height:1.05; margin-bottom:1rem; }
.section-heading > p:last-child,.about > div > p,.contact > div > p { color:var(--muted); font-size:1.05rem; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.product-card { min-height:240px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.6rem; border-radius:.6rem; background:linear-gradient(150deg,#e5dfd4,#f5f2ec); border:1px solid #ded6c9; }
.product-card:nth-child(2),.product-card:nth-child(4) { background:linear-gradient(150deg,#dce8e7,#eef3f1); border-color:#c7d8d6; }
.product-card span { align-self:flex-start; margin-bottom:auto; color:var(--teal); font-weight:800; }
.product-card h3 { font-size:1.25rem; margin-bottom:.45rem; }
.product-card p { color:var(--muted); font-size:.9rem; margin:0; }
.about { display:grid; grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr); gap:clamp(2rem,8vw,8rem); padding:clamp(4rem,8vw,7.5rem) clamp(1.25rem,14vw,14rem); background:var(--teal); color:white; }
.about-mark { width:min(18vw,180px); height:min(18vw,180px); min-width:120px; min-height:120px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.27); border-radius:50%; font-size:clamp(4rem,10vw,8rem); font-weight:800; color:var(--sand); }
.about .eyebrow { color:var(--sand); }
.about > div > p { color:#e3ecea; max-width:680px; }
dl { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2.2rem 0 0; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.24); }
dt { color:var(--sand); font-size:.75rem; text-transform:uppercase; font-weight:800; letter-spacing:.08em; }
dd { margin:.25rem 0 0; font-weight:600; font-size:.94rem; }
.contact { display:grid; grid-template-columns:1.2fr .8fr; gap:4rem; align-items:stretch; background:white; }
address { font-style:normal; font-weight:700; margin:1.7rem 0 .8rem; }
.map-link { color:var(--teal); text-decoration:none; font-weight:800; }
.email-link { display:block; width:max-content; max-width:100%; margin-top:1rem; color:var(--teal); text-decoration:none; font-weight:800; overflow-wrap:anywhere; }
.email-link:hover { color:var(--teal-deep); text-decoration:underline; }
.contact-panel { border-radius:.6rem; background:linear-gradient(145deg,var(--teal-deep),var(--teal)); padding:2rem; color:white; display:flex; flex-direction:column; min-height:290px; }
.contact .contact-panel .panel-label { font-size:.76rem; letter-spacing:.1em; font-weight:800; color:var(--sand); margin-bottom:auto; }
.contact .contact-panel .panel-title { color:white; font-size:1.5rem; line-height:1.2; font-weight:700; margin:.8rem 0 .35rem; }
.contact .contact-panel .panel-note { color:#d6e2df; font-size:.9rem; margin:0 0 1.1rem; }
.contact-form label { display:block; color:#eff5f3; font-size:.78rem; font-weight:700; margin-bottom:.7rem; }
.contact-form label span { color:#b9cbc7; font-weight:500; }
.contact-form input,.contact-form textarea { display:block; width:100%; margin-top:.25rem; padding:.58rem .65rem; color:var(--ink); background:#fff; border:1px solid #b8ccc8; border-radius:.28rem; font:inherit; font-size:.9rem; }
.contact-form textarea { resize:vertical; min-height:76px; }
.contact-form input:focus,.contact-form textarea:focus { outline:3px solid rgba(203,185,155,.65); outline-offset:1px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.form-submit { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:0; width:100%; padding:.75rem 1rem; margin-top:.1rem; background:var(--sand); color:#1d2928; border-radius:.3rem; font:inherit; font-weight:800; cursor:pointer; }
.form-submit:hover { background:#e1d0b3; }
.form-submit:disabled { opacity:.68; cursor:wait; }
.form-status { min-height:1.35em; margin:.65rem 0 0; color:#e2eeeb; font-size:.82rem; }
.honeypot { position:absolute; left:-9999px; opacity:0; pointer-events:none; }
footer { padding:2rem clamp(1.25rem,8vw,8rem); display:flex; align-items:center; justify-content:space-between; gap:1.25rem; background:#092d34; color:#d6e2df; font-size:.82rem; }
footer img { display:none; }
footer::before { content:"NABU"; color:white; font-weight:800; font-size:1.1rem; letter-spacing:.13em; }
footer p { margin:0; }
@media (max-width:850px) { .header { height:auto; padding-top:1rem; padding-bottom:1rem; flex-wrap:wrap; } nav { order:3; width:100%; justify-content:space-between; gap:.75rem; } .button-small { margin-left:auto; } .hero { min-height:600px; align-items:flex-end; } .hero-overlay { background:linear-gradient(0deg,rgba(248,247,244,.98) 5%,rgba(248,247,244,.86) 42%,rgba(248,247,244,.15) 100%); } .hero-content { margin:0 1.25rem; padding:3rem 0; } .advantages,.product-grid { grid-template-columns:repeat(2,1fr); } .about,.contact { grid-template-columns:1fr; } .about-mark { display:none; } }
@media (max-width:520px) { .brand img { width:138px; } .header .button-small { font-size:.78rem; padding:.6rem .7rem; } nav a { font-size:.84rem; } .advantages,.product-grid,.form-grid { grid-template-columns:1fr; } dl { grid-template-columns:1fr; } .section { padding-top:3.5rem; padding-bottom:3.5rem; } footer { display:block; } footer p { margin-top:1rem; } }