:root{
  --bg1: #ffffff;
  --accent: #2563eb; /* blue similar to original */
  --muted: #6b7280;
  --card: #ffffff;
  --max-width: 56rem; /* match original max-w-4xl (~896px) */
}
*{box-sizing:border-box}
html,body{height:100%;}
@font-face{
  font-family: 'RalewayCustom';
  src: url('assets/fonts/630c17af355fa44e-s.p.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

body{
  margin:0;
  font-family: 'RalewayCustom', Arial, Helvetica, sans-serif;
  background: var(--bg1);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:#000;color:#fff;border-bottom:1px solid rgba(255,255,255,0.04);z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:700;color:#fff;text-decoration:none}
.nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:500}
.hero{padding:48px 0;background:var(--bg1)}
.hero-grid{display:flex;flex-direction:column;gap:24px;align-items:flex-start;max-width:var(--max-width);margin:0 auto;padding:0 20px}
.hero-text .name{font-size:2.25rem;margin:0 0 8px;line-height:1}
.hero-text .name{margin-bottom:0.75rem}
.subtitle{color:var(--muted);margin:0 0 12px;font-size:0.95rem;line-height:1.25}
.lead{color:#111827;max-width:100%;margin-bottom:18px}
.cta-row{display:flex;gap:12px}
.btn{display:inline-block;padding:10px 16px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.08);color:var(--accent)}
.hero-media{display:block}
/* make image behave like original: portrait card */
.avatar-wrap{width:14rem;height:18rem;overflow:hidden;position:relative;border-radius:6px;box-shadow:0 8px 30px rgba(2,6,23,0.08)}
.avatar{position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;display:block}
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,#fbfbff, #ffffff)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;list-style:none;padding:0;margin:18px 0 0}
.cards li{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(12,18,30,0.04)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.site-footer{padding:18px 0;background:#000;color:#fff;border-top:1px solid rgba(255,255,255,0.04)}

@media (min-width:768px){
  .hero-grid{flex-direction:row;align-items:center;gap:48px;justify-content:space-between}
  .hero-text{flex:1 1 0%;max-width:60%}
  .hero-media{flex:0 0 14rem;margin-left:auto;display:block}
  /* move avatar: 2cm left, 1cm down (desktop) */
  .avatar-wrap{transform:translate(-2cm, 1cm) !important;margin-left:0}
  /* shift hero text down by 1cm on desktop as requested */
  .hero-text{transform:translateY(1cm) !important}
  /* move only the title (name) 1cm up while keeping subtitle fixed */
  .hero-text .name{transform:translateY(-1cm) !important}
}

@media (max-width:900px){
  .hero-grid{gap:18px}
  .avatar-wrap{width:12rem;height:14rem;margin:0}
}
:root{--accent:#0A6CF0;--muted:#6b7280;--bg:#ffffff}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;margin:0;color:#071028;background:var(--bg);line-height:1.5}
.container{max-width:1000px;margin:0 auto;padding:1.5rem}
.site-header{border-bottom:1px solid #eef2f7}
.header .container,.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{height:48px;width:auto}
.nav a{margin-left:1rem;color:var(--muted);text-decoration:none}
.hero{padding:1.25rem 0;text-align:center}
.hero h1{font-size:clamp(1.6rem,2.5vw,2.25rem);margin:0 0 .25rem}
.lead{color:var(--muted);max-width:780px;margin:0 auto}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none}
.site-footer{padding:1.5rem 0;border-top:1px solid #f1f5f9;color:var(--muted);text-align:center}
@media (max-width:700px){.nav{display:none}.container{padding:1rem}}

/* Force hero title closer to the top (override other rules) */
.hero{padding-top:0.4rem !important;padding-bottom:1rem !important}
.hero-text{margin-top:-0.6rem}
@media (max-width:900px){
  .hero{padding-top:0.6rem !important}
  .hero-text{margin-top:-0.2rem}
}