/* =========================
   Base
   ========================= */
:root{
  --bg:#fff;
  --text:#0b1220;
  --muted:#475569;
  --card:#fff;
  --border:rgba(15,23,42,.10);
  --shadow:0 18px 45px rgba(2,8,23,.10);
  --blue:#2563eb;
  --blue-soft:rgba(37,99,235,.12);
  --radius:18px;
  --max:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* =========================
   Layout helpers
   ========================= */
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.section{padding:72px 0}
.grid{display:grid;gap:18px}
.grid.one{grid-template-columns:1fr}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.tight{gap:12px}

@media (max-width:900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
}

/* =========================
   Topbar (matches your HTML)
   ========================= */
.topbar{
  position:sticky;           /* main pages default */
  top:0;
  z-index:50;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.container.nav{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.topbar .brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}

.topbar .avatar{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#0b2a72,#0f4bd6);
  color:#fff;
  font-weight:800;
  letter-spacing:.4px;
}

.topbar .title strong{
  font-weight:800;
  line-height:1.1;
  display:block;
}

.topbar .title span{
  font-size:12px;
  letter-spacing:.22em;
  color:var(--muted);
  margin-top:2px;
  display:block;
}

.topbar .navlinks{
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:600;
  color:rgba(11,18,32,.75);
}

.topbar .navlinks a:hover{color:var(--text)}

.topbar .navlinks .cta{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.25);
  background:rgba(37,99,235,.06);
}

@media (max-width:900px){
  .topbar .navlinks{gap:14px;font-size:14px}
}

/* Subpages: header scrolls away */
body.subpage .topbar{position:static;top:auto}

/* =========================
   Section headings
   ========================= */
.section-kicker{
  font-size:12px;
  letter-spacing:.28em;
  color:rgba(71,85,105,.90);
  margin-bottom:10px;
}
.section-title{
  font-size:clamp(28px,4vw,40px);
  margin:0 0 10px 0;
}
.section-subtitle{
  margin:0 0 28px 0;
  margin-bottom: 12px;
  color:var(--muted);
  max-width:70ch;
  line-height:1.55;
}

.section-subtitle-2{
  margin:0 0 28px 0;
  margin-bottom: 20px;
  color:var(--muted);
  max-width:70ch;
  line-height:1.55;
}
.muted{color:var(--muted);line-height:1.55}
.mt{margin-top:18px}
.mt-sm{margin-top:10px}

/* =========================
   Hero
   ========================= */
.hero{
  position:relative;
  min-height:calc(100vh - 74px);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background-image:url("/assets/images/profile.jpeg"); /* <-- change filename here */
  background-size:cover;
  background-position:center;
  transform:scale(1.05);
  filter:blur(10px);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.75) 0%,
    rgba(255,255,255,.86) 55%,
    rgba(255,255,255,.94) 100%
  );
}

.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  padding:28px 18px;
}

.hero-eyebrow{
  letter-spacing:.38em;
  color:rgba(71,85,105,.95);
  font-weight:700;
  font-size:12px;
  margin-bottom:12px;
}

.hero-title{
  margin:0;
  font-weight:900;
  letter-spacing:.02em;
  line-height:.95;
  font-size:clamp(44px,8vw,96px);
}

.hero-accent-line{
  width:88px;height:4px;
  border-radius:999px;
  background:var(--blue);
  margin:20px auto 16px;
  box-shadow:0 10px 30px rgba(37,99,235,.25);
}

.hero-name{
  font-weight:800;
  letter-spacing:.28em;
  color:rgba(37,99,235,.95);
  font-size:14px;
}

.hero-actions{
  margin-top:26px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Optional: floating hero container (wrap hero-content in .hero-card) */
.hero-card{
  position:relative;
  will-change:transform;
  animation:heroFloat 6s ease-in-out infinite;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  border-radius:var(--radius);
}

.hero-card::after{
  content:"";
  position:absolute;
  left:8%;right:8%;
  bottom:-18px;
  height:26px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 70%);
  filter:blur(6px);
  z-index:-1;
}

@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@media (prefers-reduced-motion:reduce){
  .hero-card{animation:none}
}

/* =========================
   Cards / Buttons
   ========================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;

  /* equal-height behavior when inside grid.two */
  display:flex;
  flex-direction:column;
  height:100%;
}

.card h3{margin:0 0 10px 0;font-size:18px}

.bullets{
  margin:0;
  padding-left:18px;
  color:rgba(11,18,32,.88);
  line-height:1.6;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-weight:700;
  box-shadow:0 12px 30px rgba(2,8,23,.06);
}

.btn:hover{transform:translateY(-1px);transition:.15s ease}

.btn.primary{
  border-color:rgba(84, 127, 218, 0.3);
  background:var(--blue-soft);
}


.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.link{
  color:rgba(37,99,235,.95);
  font-weight:800;
}
.link:hover{text-decoration:underline}

/* “Read more” pinned to bottom */
.card-footer{margin-top:auto}
.readmore-link{
  font-weight:600;
  color:#2f66ff;
  text-decoration:none;
  transition:opacity .2s ease;
}
.readmore-link:hover{opacity:.7}

/* =========================
   Projects cards
   ========================= */
.project-card{padding:0;overflow:hidden}
.project-img{
  width:100%;
  height:190px;
  object-fit:cover;
  background:#f1f5f9;
}
.project-body{padding:16px 18px 18px}
.project-body p{
  margin:8px 0 12px;
  color:var(--muted);
  line-height:1.5;
}
.project-card.wide{
  display:grid;
  grid-template-columns:360px 1fr;
}
.wide-img{height:100%;min-height:220px}
@media (max-width:900px){
  .project-card.wide{grid-template-columns:1fr}
  .wide-img{min-height:190px}
}

/* =========================
   Media (leadership images)
   ========================= */
.media{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  margin:12px 0;
  object-fit:cover;
}

/* =========================
   About: header row (text + photo)
   ========================= */
/* =========================
   About: header row (text + photo) — improved spacing
   ========================= */
.about-header-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:32px;
  align-items:start;
  margin-bottom:40px;
}

.about-header-text{
  max-width: 70ch;       /* matches section-subtitle rhythm */
  padding-right: 10px;   /* subtle breathing room from photo */
}

.about-header-photo{
  display:flex;
  justify-content:flex-end;
}

@media (max-width:900px){
  .about-header-row{
    grid-template-columns:1fr;
    gap:20px;
  }
  .about-header-photo{
    justify-content:flex-start;
  }
  .about-header-text{
    padding-right:0;
    max-width:none;
  }
}
.photo-card{
  position:relative;
  width:100%;
  max-width:420px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 18px 45px rgba(15,23,42,.12);
}

.photo-img{
  display:block;
  width:100%;
  height:320px;
  object-fit:cover;
}

/* subtle gradient overlay (NO blur) */
.photo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.18) 100%
  );
  pointer-events:none;
}

@media (max-width:900px){
  .about-header-row{grid-template-columns:1fr}
  .about-header-photo{justify-content:flex-start}
  .photo-img{height:260px}
}

/* =========================
   Page spacing helper
   ========================= */
.page{padding-top:96px}
.back-link{display:inline-block;margin:10px 0 18px}

/* =========================
   Footer
   ========================= */
.site-footer{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--border);
  color:rgba(71,85,105,.90);
  font-weight:600;
}

/* ===== Nav micro-interactions ===== */
.topbar .navlinks a{
  position: relative;
  padding: 6px 2px;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

.topbar .navlinks a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: rgba(37,99,235,0.85);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  border-radius: 999px;
  opacity: .9;
}

.topbar .navlinks a:hover{
  transform: translateY(-1px);
  color: var(--text);
}

.topbar .navlinks a:hover::after{
  transform: scaleX(1);
}

/* CTA: slightly “pill pop” */
.topbar .navlinks .cta{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.topbar .navlinks .cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37,99,235,0.16);
  background: rgba(37,99,235,0.10);
}


/* ===== Contact Buttons w/ Icons ===== */

/* =========================
   Contact Buttons (centered, smaller, hover-fill + ripple)
   ========================= */

.contact-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:28px;
}

/* Smaller than before; slightly bigger than footer text */
.contact-btn{
  position:relative;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:12px 18px;
  min-width: 178px;

  border-radius:999px;
  border:2px solid rgba(37,99,235,0.85);
  background:transparent;

  color:rgba(37,99,235,0.95);
  font-weight:800;
  letter-spacing:0.14em;
  font-size:13px;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

/* icon sizing */
.contact-btn .icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.contact-btn svg{
  width:18px;
  height:18px;
  stroke:currentColor;
}

/* Hover = autofill */
.contact-btn:hover{
  background:rgba(37,99,235,0.92);
  color:#fff;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 28px rgba(37,99,235,0.18);
}

/* tiny bounce back */
.contact-btn:active{
  transform: translateY(0) scale(0.99);
  box-shadow:none;
}

/* Ripple effect */
.contact-btn::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.65);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}

.contact-btn:active::after{
  animation: contactRipple .55s ease-out;
}

@keyframes contactRipple{
  0%   { transform:translate(-50%,-50%) scale(0); opacity:.55; }
  100% { transform:translate(-50%,-50%) scale(22); opacity:0; }
}

/* Mobile: allow tighter layout */
@media (max-width: 600px){
  .contact-btn{ min-width: 160px; }
}

/* =========================
   Project Story Styles (style1/2/3)
   Reusable section patterns
   ========================= */

/* Generic helpers (used by all styles) */
.story{
  margin-top: 22px;
}

.story p{ margin: 0 0 12px; }
.story h3{ margin: 0 0 10px; font-size: 18px; }
.story .caption{
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* Clean image frame (no “card” look, but consistent borders) */
.story .frame{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.story .frame img{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive gallery */
.gallery{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.gallery.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gallery.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){
  .gallery.grid-2, .gallery.grid-3{ grid-template-columns: 1fr; }
}

/* Two-column split */
.split{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}

/* Callout boxes (white boxes like your UAV “My Role / Engineering Focus”) */
.callouts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 900px){
  .callouts{ grid-template-columns: 1fr; }
}
.callouts .callout{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.callouts .callout ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  color: rgba(11,18,32,.88);
}

/* =========================
   STYLE 1
   a) Split (text left + photo right), then narrative full-width,
      then diagrams gallery auto (2-col on desktop)
   ========================= */
.style1 .diag-grid{
  margin-top: 12px;
}

/* =========================
   STYLE 2
   b) Two full-width images with captions, then two callout boxes
   ========================= */
.style2 .top-media{
  margin-top: 12px;
}
.style2 .top-media .frame{ margin-bottom: 14px; }

/* =========================
   STYLE 3
   c) Hybrid / “mesh”
   Lead image full-width, then split text/media, then callouts, then gallery
   ========================= */
.style3 .lead{
  margin-top: 12px;
}
.style3 .lead .frame{ margin-bottom: 10px; }