:root{
  --bg-main: #eef4ed; 
  --bg-alt: #f8f9fa; 
  --bg-dark: #0b2545; 
  --bg-dark-rgb: 11, 37, 69;
  --text-dark: #13315c; 
  --text-light: #eef4ed;
  --accent-primary: #134074; 
  --accent-secondary: #8da9c4;
  --powder-blue: #8da9c4;
  --berkeley-blue: #13315c;
  --text-body: #1d3557;
  --font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-family);background:var(--bg-alt);color:var(--text-dark);line-height:1.7;font-size:16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a{color:var(--accent-primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--berkeley-blue)}
img{max-width:100%;height:auto; display: block;}
.container{max-width:1140px;margin:auto;padding:0 20px}
header{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);padding:14px 0;position:sticky;top:0;z-index:99;border-bottom: 1px solid #eee; box-shadow:0 2px 10px rgba(0,0,0,.05)}
.brand{font-size:22px;font-weight:700;color:var(--text-dark)}
nav{display:flex;gap:24px;align-items:center}
nav a{color:var(--text-body);font-weight:600;position:relative;padding-bottom:4px}
nav a:not(.btn)::after{content:'';position:absolute;width:0;height:2px;bottom:0;left:0;background:var(--accent-primary);visibility:hidden;transition:all .3s}
nav a:not(.btn):hover::after{visibility:visible;width:100%}
.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:700;text-align:center;transition: all .3s ease;}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn.primary{background:var(--accent-primary);color:var(--text-light)}
.btn.secondary{background:transparent;border:2px solid var(--accent-primary);color:var(--accent-primary)}
.btn.secondary:hover{background:var(--accent-primary);color:var(--text-light)}
.hero{background:var(--accent-secondary) url('<?= esc($person['hero_image']) ?>') center/cover no-repeat;padding:140px 20px;text-align:center;color:#fff;background-blend-mode:multiply;background-color:rgba(var(--bg-dark-rgb),.85)}
.hero h1{font-size: clamp(2.5rem, 5vw, 3.5rem);margin-bottom:12px;font-weight:800;text-shadow:0 3px 10px rgba(0,0,0,.5); letter-spacing: -1px;}
.hero p{max-width:680px;margin:0 auto 24px;font-size: clamp(1.1rem, 3vw, 1.25rem);opacity:.95;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.section{padding:50px 0}
.section:nth-of-type(even){background:transparent}

.section > .container {
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(19, 49, 92, 0.1);
}

h2{font-size:clamp(2.2rem, 4vw, 2.5rem);margin-bottom:16px;text-align:center;font-weight:700; letter-spacing: -0.5px;}
h3{font-size:24px;margin-bottom:16px;color:var(--text-dark); font-weight: 700;}
.section-subtitle { text-align: center; max-width: 600px; margin: 0 auto 40px; font-size: 18px; color: var(--text-body); }
.grid{display:grid;gap:30px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#experience .grid-2 { grid-template-columns: 1fr; }
#experience .grid-2 > div:first-child { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #eee; }
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#fff;border-radius:0;text-align:left;box-shadow:0 4px 25px rgba(0,0,0,.07);transition:transform .3s,box-shadow .3s;overflow:hidden;display:flex;flex-direction:column}
.card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(11, 37, 69,.15)}
.card-content{padding:30px;display:flex;flex-direction:column;gap:10px; flex-grow: 1;}
.card .btn{align-self:flex-start;margin-top:auto}
.service-img{width:100%;height:220px;object-fit:cover; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);}
.headshot-container { position: relative; max-width: 420px; margin: auto; }
.headshot-container::before { content: ''; position: absolute; top: -15px; left: -15px; right: 15px; bottom: 15px; border: 3px solid var(--accent-secondary); z-index: 0; transition: all .3s ease; }
.headshot-container:hover::before { top: 0; left: 0; right: 0; bottom: 0; }
.headshot-img { position: relative; z-index: 1; width: 100%; display: block; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
ul{list-style:none;padding-left:0}
ul li{margin-bottom:10px;font-size:17px;color:var(--text-body)}
ul li::before{content:'✔';color:var(--accent-primary);font-weight:700;margin-right:12px;font-size:18px}
/* Improved Skill Cards Styling */
.skills-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }
.skills-list li { list-style: none; }
.skills-list li::before { display: none; }
.skill-card-new { width: 100%; height: 65px; background: #fff; display: flex; justify-content: center; align-items: center; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); cursor: pointer; border: 1px solid #eee; transition: all .3s ease; clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%, 0 85%); }
.skill-card-new:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(19, 49, 92, 0.15); border-color: var(--accent-secondary); background: var(--bg-alt); }
.skill-card-new .content { padding: 10px; color: var(--text-body); text-align: center; }
.skill-card-new .content h4 { color: var(--text-dark); font-size: 15px; font-weight: 600; margin: 0; line-height: 1.3; }
.experience-item,.certification-item{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid #ddd}
.experience-item:last-child,.certification-item:last-child{border-bottom:none}
.experience-item h4,.certification-item h4{font-size:20px;color:var(--text-dark); font-weight: 700;}
.experience-item .period,.certification-item .issuer{font-style:italic;color:#666;margin:6px 0}
.certification-item{display:flex;justify-content:space-between;align-items:center;gap:12px}
/* Default Form Styling */
#contact { background: transparent; }
#contact > .container { background: var(--bg-dark); }
#contact h2, #contact .section-subtitle { color: var(--text-light); }
#contactForm { margin-top: 20px; text-align: left; }
#contactForm label { color: var(--text-light); font-weight: 600; margin-bottom: 5px; display: block; }
#contactForm input, #contactForm textarea { width: 100%; padding: 12px; border: 1px solid var(--accent-primary); border-radius: 8px; background: var(--text-dark); color: var(--text-light); outline: none; font-size: 16px; font-family: var(--font-family); margin-bottom: 15px; transition: border-color .3s, box-shadow .3s; }
#contactForm input:focus, #contactForm textarea:focus { border-color: var(--accent-secondary); box-shadow: 0 0 0 3px rgba(141, 169, 196, 0.35); }
#contactForm button { width: 100%; height: auto; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--powder-blue); color: var(--bg-dark); transition: 0.3s; padding: 14px; }
#contactForm button:hover { background: var(--text-light); }
#contactForm .footer-links { color: var(--powder-blue); }
#contactForm .footer-links a { color: var(--powder-blue); font-weight: 600; text-decoration: none; transition: color 0.3s ease; }
#contactForm .footer-links a:hover { text-decoration: underline; color: var(--text-light); }
footer{background:var(--bg-dark);text-align:center;padding:40px 20px;font-size:14px;color:var(--text-light);margin-top:0}
footer a { color: var(--powder-blue); font-weight: 600; text-decoration: none; transition: color 0.3s ease; border-bottom: 1px solid transparent; padding-bottom: 2px; }
footer a:hover { color: var(--text-light); border-bottom-color: var(--text-light); }
.form-success, .form-error { padding:15px; border-radius:8px; font-weight:700; margin-bottom: 20px; }
.form-success { color:green; background:#e8f5e9; }
.form-error { color:var(--accent-primary); background:#fce4e4; }
/* Header nav (mobile) */
.menu-toggle{display:none;background:0 0;border:none;width:30px;height:30px;position:relative;cursor:pointer}
.menu-toggle .bar{display:block;width:100%;height:3px;background:var(--text-dark);border-radius:3px;position:absolute;left:0;transition:all .3s}
.menu-toggle .bar:nth-child(1){top:5px}
.menu-toggle .bar:nth-child(2){top:13.5px}
.menu-toggle .bar:nth-child(3){top:22px}
.menu-toggle[aria-expanded=true] .bar:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] .bar:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
@media(max-width:900px){
  .menu-toggle{display:block}
  nav{position:absolute;top:100%;left:0;width:100%;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);flex-direction:column;align-items:center;padding:10px 0;transform:translateY(-120%);transition:transform .4s;visibility:hidden}
  nav.open{transform:translateY(0);visibility:visible}
  nav a{padding:12px 20px;width:100%;text-align:center; color: var(--text-dark);}
  nav a:not(.btn)::after{display:none}
  .skills-list { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}
/* Skip link */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;background:#000;color:#fff;padding:10px;border-radius:8px;z-index:100}