/* ADRIATA — Multi-page static site (modern, restrained, brighter accents) */
:root{
  --bg:#050505;
  --bg2:#0b0b0b;
  --surface: rgba(255,255,255,.05);
  --surface2: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.68);
  --muted2: rgba(255,255,255,.48);
  --gold: #c9ad78;
  --goldSoft: rgba(201,173,120,.28);
  --ivory: rgba(248,245,235,.14);
  --radius: 22px;
  --radius2: 30px;
  --max: 1180px;
  --shadow: 0 30px 90px rgba(0,0,0,.58);
  --ease: cubic-bezier(.2,.9,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 650px at 60% -10%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(780px 520px at 15% 25%, rgba(201,173,120,.14), transparent 62%),
    radial-gradient(820px 520px at 85% 38%, rgba(248,245,235,.10), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
::selection{background:rgba(201,173,120,.35); color:#fff}

/* subtle grain */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.07; pointer-events:none;
  mix-blend-mode:overlay;
}

/* header */
header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(12px);
  background: linear-gradient(to bottom, rgba(5,5,5,.92), rgba(5,5,5,.62));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.logoStack{
  display:flex; align-items:center; gap:10px;
  min-width: 320px;
}
.logoStack .stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  line-height:1;
}
.logoStack img{
  height:46px;
  width:auto;
  display:block;
  filter: brightness(1.03) contrast(1.02);
}
.logoStack .tag{
  font-size:10px;
  letter-spacing:.26em;
  color:rgba(255,255,255,.50);
  text-transform:uppercase;
}

nav{
  display:flex; gap:10px; align-items:center;
  font-size:11px; letter-spacing:.22em;
  color:rgba(255,255,255,.62); text-transform:uppercase;
}
nav a{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
nav a:hover{
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.06);
}
nav a.active{
  color:rgba(255,255,255,.92);
  border-color:rgba(201,173,120,.55);
  background: linear-gradient(180deg, rgba(201,173,120,.14), rgba(0,0,0,.12));
}

.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.16);
  color:rgba(255,255,255,.94);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{border-color:rgba(255,255,255,.50); transform: translateY(-1px)}
.btn.primary{
  border-color:rgba(201,173,120,.70);
  background: linear-gradient(180deg, rgba(201,173,120,.26), rgba(0,0,0,.16));
}
.btn.primary:hover{border-color:rgba(201,173,120,.98)}
.iconbtn{
  width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.16);
  display:grid; place-items:center;
}
.iconbtn:hover{border-color:rgba(255,255,255,.40)}
.hamburger{display:none}
@media (max-width: 1020px){
  nav{display:none}
  .hamburger{display:grid}
  .logoStack{min-width:auto}
  .logoStack img{height:42px}
}

/* drawer */
.drawer{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.62); display:none}
.drawer.open{display:block}
.drawer .panel{
  position:absolute; right:14px; top:14px;
  width:min(460px, calc(100vw - 28px));
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,10,.93);
  box-shadow: var(--shadow);
  padding:14px;
}
.drawer a{
  display:block; padding:14px 14px; border-radius:16px;
  border:1px solid transparent; color:rgba(255,255,255,.84);
  letter-spacing:.18em; text-transform:uppercase; font-size:12px;
}
.drawer a:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10)}
.drawer a.active{border-color:rgba(201,173,120,.60); background:rgba(201,173,120,.08)}
.drawer .row{display:flex; gap:10px; padding:12px 10px 8px}

/* layout helpers */
main{min-height:60vh}
.pageHead{padding:44px 0 10px}
.pageTitle{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size:44px;
  letter-spacing:-.02em;
  margin:0;
}
.pageSub{
  margin:12px 0 0;
  color:rgba(255,255,255,.70);
  line-height:1.85;
  max-width: 820px;
}

.hero{padding:52px 0 34px}
.grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:34px; align-items:stretch}
@media (max-width: 1020px){.grid{grid-template-columns:1fr}}
.kicker{color:rgba(255,255,255,.62); font-size:11px; letter-spacing:.28em; text-transform:uppercase}
h1.heroTitle{
  margin:14px 0 0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size:58px; line-height:1.04; font-weight:500; letter-spacing:-.02em;
}
@media (max-width: 520px){h1.heroTitle{font-size:42px}}
.lead{margin:16px 0 0; color:rgba(255,255,255,.72); font-size:16px; line-height:1.85; max-width: 660px}
.heroActions{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap}
.badges{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.badge{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:10px 12px; border-radius:999px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.badge i{display:inline-block; width:6px; height:6px; border-radius:999px; background:rgba(201,173,120,.92); margin-right:10px; position:relative; top:-1px}

.mediaCard{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 320px at 25% 18%, rgba(201,173,120,.16), transparent 62%),
    radial-gradient(520px 320px at 75% 42%, rgba(248,245,235,.10), transparent 62%),
    rgba(255,255,255,.03);
  padding:14px;
  box-shadow: 0 25px 75px rgba(0,0,0,.45);
}
.media{
  border-radius:calc(var(--radius2) - 8px);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.26);
  overflow:hidden;
  aspect-ratio: 4 / 5;
  position:relative;
}
.media img{width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.03); filter: contrast(1.03) saturate(1.02)}
.media:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 380px at 50% 25%, rgba(0,0,0,.05), rgba(0,0,0,.58)),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
  pointer-events:none;
}
.metaRow{
  padding:12px 4px 0;
  color:rgba(255,255,255,.50);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.metaRow b{color:rgba(255,255,255,.82); font-weight:600}

section{padding:74px 0; border-top:1px solid rgba(255,255,255,.06)}
.sectionGrid{display:grid; grid-template-columns: .42fr .58fr; gap:30px}
@media (max-width: 1020px){.sectionGrid{grid-template-columns:1fr}}
.h2{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.56)}
.copy{color:rgba(255,255,255,.72); line-height:1.9; font-size:15px}
hr.gold{border:0; height:1px; margin:16px 0 0; background: linear-gradient(90deg, transparent, rgba(201,173,120,.90), transparent); opacity:.70}

.cards{margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 720px){.cards{grid-template-columns:1fr}}
.card{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:18px;
}
.card .t{font-family: ui-serif, Georgia, "Times New Roman", Times, serif; font-size:18px; color:rgba(255,255,255,.94)}
.card .d{margin-top:8px; color:rgba(255,255,255,.60); font-size:13.5px; line-height:1.75}

/* gallery */
.gallery{margin-top:18px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px}
@media (max-width: 1020px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.gallery{grid-template-columns:1fr}}
.tile{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  min-height:220px;
}
.tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .28s var(--ease), filter .28s var(--ease);
  filter: contrast(1.02) saturate(1.02);
}
.tile:hover img{transform: scale(1.06)}
.tile:after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62)); pointer-events:none}
.tile .cap{
  position:absolute; left:16px; right:16px; bottom:14px;
  display:flex; justify-content:space-between; gap:12px; align-items:flex-end;
  color:rgba(255,255,255,.78);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.tile .cap em{font-style:normal; color:rgba(255,255,255,.46); letter-spacing:.18em}

/* forms */
.formCard{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 320px at 20% 15%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(520px 320px at 70% 42%, rgba(201,173,120,.12), transparent 62%),
    rgba(255,255,255,.03);
  padding:22px;
}
.formGrid{display:grid; grid-template-columns: .45fr .55fr; gap:20px}
@media (max-width: 1020px){.formGrid{grid-template-columns:1fr}}
.formTitle{font-family: ui-serif, Georgia, "Times New Roman", Times, serif; font-size:28px}
.formDesc{margin-top:10px; color:rgba(255,255,255,.64); line-height:1.8; font-size:14px}
form{margin-top:14px; display:grid; gap:12px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 720px){.row2{grid-template-columns:1fr}}
input, textarea, select{
  width:100%; border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  padding:12px 14px; color:rgba(255,255,255,.92);
  outline:none; font-size:14px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
input:focus, textarea:focus, select:focus{border-color: rgba(201,173,120,.75); background: rgba(0,0,0,.24)}
textarea{min-height:120px; resize:vertical}
.small{color:rgba(255,255,255,.44); font-size:11px; letter-spacing:.08em; line-height:1.6}
.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pill{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color:rgba(255,255,255,.70);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* modal */
.modal{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.72); display:none}
.modal.open{display:block}
.modal .box{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(1040px, calc(100vw - 28px));
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal .bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.74);
  letter-spacing:.18em; text-transform:uppercase; font-size:11px;
}
.modal .close{
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  cursor:pointer; display:grid; place-items:center;
}
.modal .close:hover{border-color:rgba(255,255,255,.40)}
.modal .body{padding:18px}
.modal .preview{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  overflow:hidden;
}
.modal .preview img{width:100%; height:auto; display:block}

/* footer */
footer{
  padding:30px 0 36px;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.44);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.footerRow{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center}
.footerLinks{display:flex; gap:14px; color:rgba(255,255,255,.48)}
.footerLinks a:hover{color:rgba(255,255,255,.86)}

/* reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.show{opacity:1; transform:none}