/* ============================================================
   BASE – shared across all pages
   Font paths are relative to the output directory (assets/css/)
   ============================================================ */

@font-face {
    font-family: 'UTILO Sans';
    src: url('UTILO-Sans-Regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: optional;
}
@font-face {
    font-family: 'UTILO Sans';
    src: url('UTILO-Sans-Bold.woff') format('woff');
    font-weight: 700; font-style: normal; font-display: optional;
}

:root {
    --y: #ffdd00;
    --yg: rgba(255,221,0,0.18);
    --bg: #f7f6f1;
    --bg-alt: #eeecea;
    --card: #ffffff;
    --tx: #1a1914;
    --tm: #6b6858;
    --border: rgba(26,25,20,0.1);
    --shadow: 0 2px 20px rgba(26,25,20,0.07);
    --shadow-hover: 0 8px 40px rgba(26,25,20,0.13);
    --tr: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family:'UTILO Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    background-color:var(--bg);
    color:var(--tx); line-height:1.6; overflow-x:hidden;
}
.skip-link { position:absolute; top:-40px; left:0; background:var(--y); color:var(--tx); padding:8px 16px; text-decoration:none; z-index:10000; font-weight:bold; }
.skip-link:focus { top:0; }
header {
    position:fixed; top:0; width:100%;
    background:rgba(255,255,255,0.96); backdrop-filter:blur(20px) saturate(180%);
    z-index:1000; border-bottom:1px solid var(--border);
}
nav { max-width:1200px; margin:0 auto; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; }
.logo { display:block; text-decoration:none; line-height:0; }
.logo img { height:60px; width:auto; }
.nav-links { display:flex; gap:0.5rem; list-style:none; }
.nav-links a { color:var(--tm); text-decoration:none; font-weight:500; font-size:0.9rem; letter-spacing:0.03em; transition:var(--tr); padding:0.5rem 1rem; border-radius:0 1rem 0 1rem; }
.nav-links a:hover, .nav-links a:focus { color:var(--tx); background:var(--yg); outline:none; }
.mobile-menu-btn { display:none; background:none; border:1.5px solid var(--border); color:var(--tx); font-size:1.2rem; cursor:pointer; padding:0.4rem 0.8rem; border-radius:0 8px 0 8px; }
main { margin-top:80px; }
.fade-in { opacity:0; transform:translateY(20px); transition:opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }
footer { background:var(--tx); color:#b8b6af; }
footer p { color:inherit; }
footer a, .footer-link { color:#f7f6f1; text-decoration:none; font-weight:500; }
footer a:hover { color:var(--y); }
.footer-main { max-width:1200px; margin:0 auto; padding:4rem 2rem 2rem; }
.footer-top { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(247,246,241,0.1); }
.footer-logo img { height:48px; width:auto; }
.footer-contact-top { display:flex; justify-content:flex-end; align-items:flex-start; }
.footer-office-img { border-radius:0 24px 0 24px; box-shadow:0 4px 25px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.05); transition:var(--tr); max-width:100%; height:auto; }
.footer-office-img:hover { transform:translateY(-4px); box-shadow:0 12px 45px rgba(0,0,0,0.3); }
.footer-tagline { margin-top:1rem; font-size:0.9rem; line-height:1.6; color:#b8b6af; }
.footer-heading { color:#f7f6f1; font-size:0.85rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1.25rem; }
.footer-contact-line { font-size:0.9rem; margin-bottom:0.5rem; color:#b8b6af; }
.footer-contact-line strong { color:#8c8a84; font-size:0.75rem; display:block; margin-bottom:0.15rem; }
.footer-contact-link { color:#f7f6f1; text-decoration:none; }
.footer-contact-link:hover { color:var(--y); }
.footer-social { display:flex; gap:0.75rem; margin-top:1.25rem; }
.footer-social-btn { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(247,246,241,0.15); border-radius:0 0.75rem 0 0.75rem; color:#b8b6af; transition:var(--tr); }
.footer-social-btn:hover { background:var(--y); border-color:var(--y); color:var(--tx); }
.footer-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-bottom:3rem; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:0.6rem; }
.footer-col ul li a { color:#b8b6af; font-size:0.9rem; font-weight:400; }
.footer-col ul li a:hover { color:var(--y); }
.footer-bottom { border-top:1px solid rgba(247,246,241,0.1); padding:1.5rem 2rem; text-align:center; font-size:0.82rem; color:#b8b6af; max-width:1200px; margin:0 auto; }
*:focus-visible { outline:2px solid var(--y); outline-offset:4px; }
@media(max-width:768px) {
    .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(20px); flex-direction:column; padding:2rem; border-bottom:1px solid var(--border); }
    .nav-links.active { display:flex; }
    .mobile-menu-btn { display:block; }
    .footer-top { grid-template-columns:1fr; gap:2rem; }
    .footer-nav { grid-template-columns:1fr 1fr; gap:1.5rem; }
}