:root{
  --bg:#FCFAF8; --surface:#FFFFFF; --ink:#1C2024; --muted:#6E6E73; --line:#E8E1D9;
  --accent:#D1B48A; --accent-ink:#2E2A26; --soft:#F6F1EA; --gold:#C8A67A; --danger:#D55C5A;
  --radius:18px; --shadow:0 14px 40px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.65 Inter,system-ui}
img{max-width:100%;height:auto;border-radius:14px}
a{color:inherit;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:0 20px}

/* Header / Nav */
.header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;flex-direction:column}
.brand .logo{font:700 28px/1 'Cormorant Garamond',serif;letter-spacing:.3px}
.brand .tag{font:400 12px/1 Inter;color:#8A8076;margin-top:6px}
.nav a{padding:10px 14px;border-radius:12px}
.nav a:hover{background:var(--soft)}
.cta{background:linear-gradient(180deg,#E8D7BD,#D1B48A);color:var(--accent-ink);border-radius:999px;padding:10px 16px;box-shadow:var(--shadow);border:1px solid #e2d1b6}
.cta:hover{opacity:.96}

/*linklist*/
.linksList li a { display:block; padding:6px 0; }
/*search*/
.searchBtn {
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
  padding:4px 10px;
  opacity:.75;
  transition:opacity .2s;
}
.searchBtn:hover { opacity:1; }
#searchModal {
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:none; justify-content:center; align-items:flex-start;
  padding-top:10vh;
  z-index:2000;
}
.searchBox {
  background:#fff;
  padding:24px;
  border-radius:12px;
  width:90%; max-width:480px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
}
.searchBox input {
  width:100%;
  padding:14px;
  font-size:16px;
  border:1px solid #ddd;
  border-radius:8px;
}
.searchResults {
  margin-top:16px;
}
.searchResults a {
  display:block;
  padding:8px 0;
  border-bottom:1px solid #eee;
}

/*breadcrumb*/

.breadcrumbs {
  font-size:13px;
  opacity:.7;
  margin:-10px 0 12px;
}
.breadcrumbs a { color:inherit; text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }

/* Hero */
.hero{padding:50px 0 24px;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
@media(max-width:980px){.hero{grid-template-columns:1fr}}
.h1{font:700 48px/1.05 'Cormorant Garamond',serif;margin:0 0 12px}
.sub{color:#545454;max-width:740px}
.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(180deg,#E8D7BD,#D1B48A);border-color:#e2d1b6;color:var(--accent-ink)}

/* Sections / Cards */
.section{padding:28px 0}
.kicker{color:#8A8076;text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin-bottom:10px}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font:600 18px/1.2 Inter}

/* Columns */
.columns{display:grid;gap:26px;grid-template-columns:1fr 1fr}
@media(max-width:980px){.columns{grid-template-columns:1fr}}

/* Table */
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border:1px solid var(--line);padding:12px;text-align:left;background:#fff}
.table th{background:#F4EEE6}

/* Prose */
.prose{max-width:880px}
.prose h1{font:700 36px/1.1 'Cormorant Garamond',serif;margin:0 0 12px}
.prose h2{font:700 22px/1.25 Inter;margin:28px 0 8px}
.prose h3{font:600 18px/1.25 Inter;margin:20px 0 8px}
.prose p{color:#333}

/* Form */
.form{display:grid;gap:14px}
.form input,.form textarea,.form select{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);outline:none}
.form input:focus,.form textarea:focus,.form select:focus{border-color:#dcc5a3;box-shadow:0 0 0 3px rgba(209,180,138,.25)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:740px){.form .row{grid-template-columns:1fr}}
.form button[type=submit]{background:linear-gradient(180deg,#E8D7BD,#D1B48A);color:var(--accent-ink);border:none;padding:12px 16px;border-radius:16px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}

/* Notices / Footer */
.notice{background:var(--soft);border:1px solid var(--line);padding:12px;border-radius:14px}
.footer{margin-top:48px;border-top:1px solid var(--line);padding:30px 0;color:#7a7a7a;text-align:center}

/* Cookie bar */
.cookiebar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.05);padding:12px 16px;display:none;z-index:60}
.cookiebar .wrap{max-width:1160px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between}
.cookiebar .txt{color:#4a4a4a}
.cookiebar .actions{display:flex;gap:8px}
.cookiebar button{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.cookiebar .accept{background:linear-gradient(180deg,#E8D7BD,#D1B48A);border-color:#e2d1b6;color:#2A2A2A;font-weight:700}

/* --- Mobile fixes --- */
@media (max-width: 768px) {

  /* Layout */
  body {
    padding: 0 14px;
    font-size: 16px;
  }

  .hero {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .hero .buttons {
    flex-direction: column;
    gap: 10px;
  }

  /* Cards */
  .grid3 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .card, .smallCard {
    padding: 18px;
    text-align: center;
  }

  .card img {
    max-width: 80px;
    margin: 0 auto;
  }

  /* Header */
  nav {
    flex-wrap: wrap;
    row-gap: 8px;
    font-size: 15px;
  }

  .searchBtn {
    font-size: 22px;
  }

  /* Breadcrumbs */
  .breadcrumbs {
    font-size: 12px;
    margin-bottom: 10px;
  }
}

/* Desktop nav */
.nav-desktop { display:flex; gap:18px; align-items:center; }

/* Hide desktop on mobile */
@media(max-width:768px){
  .nav-desktop { display:none; }
}

/* Hide mobile nav on desktop */
@media (min-width:769px) {
  .nav-mobile,
  .mobileMenu {
    display:none !important;
  }
}


/* Mobile header bar */
.nav-mobile {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:#fff; position:sticky; top:0; z-index:9000;
  border-bottom:1px solid #eee;
}

.hamburger {
  font-size:26px; background:none; border:0; cursor:pointer; padding:6px;
}

.logo-mobile {
  font-weight:600; font-size:17px;
}

/* Mobile menu panel */
.mobileMenu {
  display:none; flex-direction:column; gap:18px;
  background:#fff; padding:20px; border-bottom:1px solid #eee;
}

.mobileMenu a {
  font-size:18px; text-decoration:none;
}

/* Sticky CTA bottom */
.sticky-cta {
  display:none;
}

@media(max-width:768px){
  .sticky-cta {
    display:block;
    position:fixed; bottom:0; left:0; width:100%;
    background:#000; color:#fff; text-align:center;
    padding:14px; font-size:18px; z-index:9999;
    text-decoration:none; font-weight:600;
  }
  body { padding-bottom:70px; }
}


:root{
  --hdr: 56px;   /* mobile header height */
  --cta: 64px;   /* sticky CTA height (if enabled) */
}

@media (max-width: 768px){
  .nav-mobile{
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .mobileMenu{
    position: fixed;
    top: var(--hdr);
    left: 0;
    right: 0;
    bottom: 0;
    display: none;               /* toggled to flex via JS */
    flex-direction: column;
    gap: 18px;
    background: #fff;
    padding: 20px 16px;
    overflow-y: auto;            /* IMPORTANT: scroll long menus */
    z-index: 1001;               /* above header */
    padding-bottom: calc(20px + var(--cta)); /* keep above sticky CTA */
  }

  /* prevent background scroll when menu is open */
  body.menu-open{
    overflow: hidden;
    touch-action: none;
  }

  /* desktop/ mobile visibility guards */
  .nav-desktop{ display: none !important; }
}
@media (min-width: 769px){
  .nav-mobile, .mobileMenu{ display: none !important; }
}