:root{
  --black: #0a0908;
  --black-2: #131110;
  --black-3: #1c1917;
  --gold: #cda349;
  --gold-light: #f0d68a;
  --gold-dim: #8a723c;
  --cream: #f2ecdd;
  --muted: #a89e8c;
  --line: rgba(205,163,73,.22);
  --serif: "Fraunces", "Georgia", serif;
  --sans: "Manrope", -apple-system, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

/* subtle grain overlay for texture, fixed so it never impacts scroll perf */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:var(--gold); color:var(--black)}

.eyebrow{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.32em; font-weight:700;
  color:var(--gold); text-transform:uppercase; margin-bottom:14px;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.01em}
h2 span, h1 span{color:var(--gold); font-style:italic; font-weight:500}
.muted{color:var(--muted); max-width:46ch}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  background:rgba(10,9,8,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:38px; height:38px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--line), 0 0 18px rgba(205,163,73,.35)}
.brand-text{font-family:var(--serif); font-size:1rem; letter-spacing:.06em}
.brand-text b{color:var(--gold)}

nav{display:flex; align-items:center; gap:clamp(16px,2vw,30px); font-size:.88rem}
nav a{color:var(--muted); transition:color .25s var(--ease); position:relative}
nav a:not(.pill):hover{color:var(--cream)}
nav a:not(.pill)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease);
}
nav a:not(.pill):hover::after{transform:scaleX(1); transform-origin:left}
nav .pill{
  border:1px solid var(--gold-dim); padding:9px 18px; border-radius:999px; color:var(--gold-light);
  font-weight:600; letter-spacing:.02em; transition:all .3s var(--ease);
}
nav .pill:hover{background:var(--gold); color:var(--black); border-color:var(--gold)}

.menu{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
.menu span{width:22px; height:2px; background:var(--gold); transition:all .3s var(--ease)}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center;
  padding:0 clamp(20px,5vw,56px); overflow:hidden;
}
.hero-glow{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:radial-gradient(60% 60% at 30% 30%, rgba(205,163,73,.16), transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; max-width:640px; padding:80px 0}
.hero .eyebrow{opacity:0; animation:rise .8s var(--ease) .1s forwards}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.04; opacity:0; animation:rise .9s var(--ease) .25s forwards}
.hero .lead{margin-top:22px; font-size:1.08rem; color:var(--muted); max-width:44ch; opacity:0; animation:rise .9s var(--ease) .45s forwards}
.actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; opacity:0; animation:rise .9s var(--ease) .6s forwards}
.trust{margin-top:46px; font-size:.78rem; letter-spacing:.05em; color:var(--gold-dim); opacity:0; animation:rise .9s var(--ease) .75s forwards}

.hero-emblem{
  position:absolute; right:clamp(-120px,4vw,60px); top:50%; transform:translateY(-50%);
  width:min(46vw,560px); opacity:.9; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  animation:float 7s ease-in-out infinite, fade-in 1.4s var(--ease) .3s backwards;
}
@media (max-width:900px){ .hero-emblem{ opacity:.16; width:70vw; right:-10vw } }

@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}
@keyframes fade-in{from{opacity:0} to{opacity:.9}}
@keyframes float{0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 14px))}}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:2px;
  border:1px solid var(--gold-dim); color:var(--cream); font-weight:600; font-size:.92rem;
  letter-spacing:.02em; transition:all .3s var(--ease);
}
.btn:hover{border-color:var(--gold); background:rgba(205,163,73,.08)}
.btn.gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-dim));
  color:#231a06; border:none;
}
.btn.gold:hover{filter:brightness(1.1); transform:translateY(-1px)}

/* ---------- sections ---------- */
.section{padding:120px clamp(20px,5vw,56px); position:relative}
.section > h2{font-size:clamp(1.8rem,3.4vw,2.7rem); max-width:16ch; margin-bottom:56px}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:translateY(0)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.cards article{
  background:var(--black); padding:44px 32px; transition:background .35s var(--ease);
}
.cards article.offset{background:var(--black-2)}
.cards article:hover{background:var(--black-3)}
.cards i{font-style:normal; font-size:1.6rem; color:var(--gold); display:block; margin-bottom:22px}
.cards h3{font-size:1.15rem; margin-bottom:10px}
.cards p{color:var(--muted); font-size:.92rem}

@media (max-width:900px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .cards{grid-template-columns:1fr} }

.portfolio{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px}
.portfolio div{
  aspect-ratio:3/4; border:1px dashed var(--gold-dim); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; font-family:var(--serif);
  font-size:1.3rem; color:var(--gold-dim); letter-spacing:.04em; gap:10px; transition:border-color .3s, color .3s;
}
.portfolio div:hover{border-color:var(--gold); color:var(--gold)}
.portfolio small{font-family:var(--sans); font-size:.68rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
@media (max-width:900px){ .portfolio{grid-template-columns:1fr 1fr} }

.offer{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:64px clamp(20px,5vw,56px); background:linear-gradient(120deg,var(--black-2),var(--black-3));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.offer h2{color:var(--gold-light); font-size:clamp(1.6rem,3vw,2.2rem); margin:6px 0}

.about{display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center}
.about .muted{margin-top:16px}
.seal{
  justify-self:center; width:min(280px,80%); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--line); padding:18px; box-shadow:0 0 60px rgba(205,163,73,.12);
}
.seal img{border-radius:50%}
@media (max-width:800px){ .about{grid-template-columns:1fr} .seal{order:-1} }

.contact-direct{display:flex; gap:36px; flex-wrap:wrap; margin:28px 0 44px}
.contact-line{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.15rem; color:var(--gold-light); border-bottom:1px solid transparent; transition:border-color .3s}
.contact-line i{font-style:normal; color:var(--gold)}
.contact-line:hover{border-color:var(--gold)}

form{max-width:720px; display:flex; flex-direction:column; gap:20px; margin-top:12px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:600px){ .row{grid-template-columns:1fr} }
label{display:flex; flex-direction:column; gap:8px; font-size:.8rem; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
input, select, textarea{
  font:1rem/1.4 var(--sans); color:var(--cream); background:var(--black-2);
  border:1px solid var(--line); padding:13px 14px; border-radius:2px; transition:border-color .25s;
}
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size:5px 5px; background-repeat:no-repeat;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold)}
textarea{resize:vertical}
form .btn{align-self:flex-start; margin-top:6px; cursor:pointer; font:inherit}

/* ---------- footer ---------- */
footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
  padding:40px clamp(20px,5vw,56px); border-top:1px solid var(--line); color:var(--muted); font-size:.85rem;
}
.footer-brand{display:flex; align-items:center; gap:12px; font-family:var(--serif); color:var(--cream)}
.footer-brand img{width:30px; height:30px; border-radius:50%}
.footer-brand b{color:var(--gold)}
.footer-contact{display:flex; gap:22px}
.footer-contact a:hover{color:var(--gold-light)}

/* ---------- responsive nav ---------- */
@media (max-width:820px){
  .menu{display:flex}
  nav{
    position:fixed; inset:66px 0 auto 0; background:var(--black-2); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; padding:24px clamp(20px,5vw,56px) 32px; gap:20px;
    transform:translateY(-120%); transition:transform .35s var(--ease); z-index:99;
  }
  nav.open{transform:translateY(0)}
  nav .pill{margin-top:6px}
}