/* Reset and base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#151515;background:#ffffff}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}

/* Theme variables */
:root{
  --color-bg:#ffffff;
  --color-text:#151515;
  --color-muted:#666666;
  --color-primary:#101820;
  --color-accent:#CBA135;
  --color-surface:#F8F5F0;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;

  --container:1152px;
  --shadow-1:0 4px 16px rgba(0,0,0,.08);
}

/* Layout */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Typography */
.h1{font-size:clamp(32px,4vw,56px);line-height:1.1;letter-spacing:-.02em}
.h2{font-size:clamp(24px,3vw,36px);line-height:1.15}
.h3{font-size:clamp(18px,2.2vw,24px);line-height:1.2}
.lead{font-size:clamp(16px,2vw,18px);color:var(--color-muted)}

/* UI */
.button{display:inline-block;padding:.9rem 1.25rem;border-radius:var(--radius-md);background:var(--color-accent);color:#000;font-weight:600;box-shadow:var(--shadow-1);transition:transform .1s ease}
.button:hover{transform:translateY(-1px)}
.button.outline{background:transparent;color:var(--color-accent);border:1px solid var(--color-accent);box-shadow:none}

.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #eee;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px var(--space-5)}
.nav__logo{font-weight:800;letter-spacing:.02em}
.nav__menu{display:flex;gap:20px}
@media (max-width:900px){.nav__menu{display:none}}

.hero{padding:var(--space-8) 0;background:linear-gradient(180deg,var(--color-surface),#fff)}
.hero__card{background:#fff;border:1px solid #eee;padding:var(--space-6);border-radius:var(--radius-lg)}

.section{padding:var(--space-8) 0}
.section--dark{background:var(--color-primary);color:#fff}
.section--dark .lead{color:#d9d9d9}

.input{width:100%;padding:.85rem 1rem;border:1px solid #ddd;border-radius:10px;background:#fff}
.textarea{min-height:140px}

/* Contact page helpers */
.contact-cards{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
.contact-card{background:#fff;border:1px solid #eee;padding:var(--space-5);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.muted{color:var(--color-muted);font-size:15px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sticky translucent header with scroll state */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color(display-p3 1 1 1 / 0.85);
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: box-shadow .2s ease, padding .2s ease, background-color .2s ease;
}

/* Default nav sizing */
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px var(--space-5)}

/* On scroll, add depth and slightly reduce vertical padding for a premium feel */
.header.is-scrolled{
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.header.is-scrolled .nav{
  padding: 8px var(--space-5);
}

/* Optional: active link styling */
.nav__menu a[aria-current="page"], .nav__menu a.active{
  color: var(--color-accent);
  font-weight: 600;
}