/* The Carbon Script — Modern Premium v3 (balanced black/white/gold)
   Display font: Fraunces (premium modern serif). Body font: Manrope.
   If you later buy/install "Carina/Carena", replace the --serif font in :root.
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --ink:#0b0b0d;
  --ink2:#101116;
  --paper:#fbfaf7;
  --paper2:#f3f1ec;
  --paper3:#efece6;

  --gold:#b8923b;
  --gold2:#e6cf8a;

  --line:rgba(12,12,14,.12);
  --muted:rgba(12,12,14,.64);
  --muted2:rgba(12,12,14,.50);

  --radius:16px;
  --radius2:22px;
  --shadow: 0 16px 50px rgba(0,0,0,.10);
  --shadow2: 0 10px 26px rgba(0,0,0,.08);

  --max:1180px;
  --serif:"Fraunces", ui-serif, Georgia, serif;
  --sans:"Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 18% -10%, rgba(184,146,59,.12), transparent 60%),
    radial-gradient(900px 640px at 90% 0%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper2));
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{max-width:var(--max); margin:0 auto; padding:0 22px}

.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip:focus{left:22px; top:18px; width:auto; height:auto; padding:10px 12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; z-index:9999;}

header{
  position:sticky; top:0; z-index:50;
  background: rgba(251,250,247,.78);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; position:relative;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-badge{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, rgba(184,146,59,.22), rgba(0,0,0,.02));
  border:1px solid rgba(184,146,59,.35);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  position:relative; overflow:hidden;
}
.brand-badge:after{
  content:""; position:absolute; inset:-60%;
  background: linear-gradient(90deg, transparent, rgba(230,207,138,.65), transparent);
  transform: rotate(25deg) translateX(-45%);
  animation: shine 5s var(--ease) infinite;
  opacity:.55;
}
@keyframes shine{
  0%{transform: rotate(25deg) translateX(-45%)}
  55%{transform: rotate(25deg) translateX(45%)}
  100%{transform: rotate(25deg) translateX(45%)}
}
.brand-badge span{font-family:var(--serif); font-weight:700; letter-spacing:.02em; color:var(--ink);}
.brand-title{font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px;}
.brand-sub{margin-top:2px; font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase;}

.nav-links{display:flex; gap:6px; align-items:center}
.nav-links a{
  font-size:13px; color:var(--muted);
  padding:10px 12px; border-radius:14px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav-links a:hover{color:var(--ink); background: rgba(12,12,14,.05); transform: translateY(-1px);}
.nav-links a.active{
  color:var(--ink);
  background: rgba(184,146,59,.12);
  border:1px solid rgba(184,146,59,.22);
}

.nav-cta{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(12,12,14,.14);
  background: rgba(255,255,255,.65);
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.btn:hover{background: rgba(255,255,255,.85); transform: translateY(-1px)}
.btn.primary{
  border-color: rgba(184,146,59,.45);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(230,207,138,.45), transparent 55%),
    linear-gradient(145deg, rgba(184,146,59,.18), rgba(255,255,255,.75));
}
.btn.primary:hover{border-color: rgba(184,146,59,.62)}
.btn.ghost{background: transparent; border-color: rgba(12,12,14,.14);}

.menu-btn{display:none}

.section{padding:54px 0;}
.section.alt{
  background: linear-gradient(180deg, var(--paper2), var(--paper));
  border-top:1px solid rgba(12,12,14,.06);
  border-bottom:1px solid rgba(12,12,14,.06);
}
.section.dark{
  background:
    radial-gradient(850px 520px at 15% 0%, rgba(184,146,59,.16), transparent 55%),
    radial-gradient(900px 680px at 85% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0c0c10, #07070a);
  color: var(--paper);
}
.section.dark .muted{color: rgba(251,250,247,.72)}
.section.dark .card{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12)}
.section.dark .btn{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--paper)}
.section.dark .btn:hover{background: rgba(255,255,255,.08)}
.section.dark .btn.primary{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(230,207,138,.24), transparent 55%),
    linear-gradient(145deg, rgba(184,146,59,.20), rgba(255,255,255,.06));
  border-color: rgba(230,207,138,.34);
}

.kicker{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.kicker .dot{width:8px; height:8px; border-radius:999px; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0 0 7px rgba(184,146,59,.12);}

h1{margin:14px 0 10px; font-family:var(--serif); font-weight:700; letter-spacing:-.02em; font-size:clamp(38px,5vw,66px); line-height:1.05;}
h2{margin:0 0 12px; font-family:var(--serif); font-weight:650; letter-spacing:-.01em; font-size:30px;}
h3{margin:0 0 8px; font-size:15px;}

.lead{margin:0; color:var(--muted); font-size:16px; max-width:760px;}
.muted{color:var(--muted)}
.small{font-size:12px; color:var(--muted2)}

.hero-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:stretch; margin-top:22px;}
.hero-actions{margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;}

.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{transform: translateY(-2px); box-shadow: 0 20px 60px rgba(0,0,0,.12)}
.card.pad{padding:18px}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px;}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}

.service{position:relative;}
.service:before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(520px 260px at 10% 0%, rgba(184,146,59,.16), transparent 55%),
    radial-gradient(520px 260px at 90% 0%, rgba(12,12,14,.05), transparent 55%);
  opacity:.9; pointer-events:none;
}
.service > *{position:relative; z-index:1}

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(12,12,14,.10);
  background: rgba(255,255,255,.55);
  color:var(--muted);
  font-size:12px;
}
.pill .spark{width:8px; height:8px; border-radius:999px; background: linear-gradient(180deg, var(--gold2), var(--gold));}

.hr{border:none; border-top:1px solid rgba(12,12,14,.10); margin:18px 0;}
.list{margin:0; padding-left:18px; color:var(--muted);}
.list li{margin:8px 0}

.split{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start;}

.highlight{
  border:1px solid rgba(184,146,59,.25);
  background: rgba(184,146,59,.08);
  border-radius:18px;
  padding:12px;
  color: var(--muted);
  font-size:13px;
}

.hero-visual{
  min-height:420px;
  position:relative;
  background:
    radial-gradient(420px 320px at 20% 18%, rgba(184,146,59,.22), transparent 60%),
    radial-gradient(380px 280px at 78% 28%, rgba(12,12,14,.10), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.85), rgba(243,241,236,.75));
}
.hero-visual:after{
  content:""; position:absolute; inset:-1px;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(184,146,59,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 40%, rgba(12,12,14,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(12,12,14,.10) 0 2px, transparent 3px);
  opacity:.32; pointer-events:none;
}
.hero-visual .stack{position:absolute; inset:18px; display:grid; gap:12px;}

.tile{
  border-radius:18px;
  border:1px solid rgba(12,12,14,.10);
  background: rgba(255,255,255,.62);
  padding:14px;
  box-shadow: var(--shadow2);
}
.tile b{display:block; font-size:13px; margin-bottom:4px}
.tile span{display:block; font-size:12px; color:var(--muted)}
.tile .k{display:flex; gap:10px; align-items:center; justify-content:space-between;}

.chip{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(12,12,14,.55);
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(12,12,14,.10);
  background: rgba(255,255,255,.55);
}
.goldline{height:1px; width:100%; background: linear-gradient(90deg, transparent, rgba(184,146,59,.55), transparent); margin:10px 0;}

.form{display:grid; gap:12px}
.input{display:grid; gap:8px}
label{font-size:13px; color:var(--muted)}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(12,12,14,.14);
  background: rgba(255,255,255,.75);
  color:var(--ink);
  font-family: var(--sans);
  font-size:14px;
  outline:none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
textarea{min-height:140px; resize:vertical}
input:focus, textarea:focus{border-color: rgba(184,146,59,.55); background: rgba(255,255,255,.92);}

footer{border-top:1px solid rgba(12,12,14,.10); padding:26px 0; color:var(--muted); font-size:13px; background: var(--paper);}
.foot{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}

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

@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .span-4,.span-6,.span-8{grid-column: span 12}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .menu-btn{
    display:inline-flex;
    border:1px solid rgba(12,12,14,.14);
    background: rgba(255,255,255,.65);
    border-radius:14px;
    padding:10px 12px;
    color:var(--ink);
    font-size:13px;
    font-weight:800;
  }
  .nav.open .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    position:absolute;
    left:22px; right:22px; top:64px;
    padding:12px;
    border-radius:18px;
    background: rgba(251,250,247,.96);
    border:1px solid rgba(12,12,14,.12);
    box-shadow: var(--shadow);
  }
  .nav-cta{display:none}
}