*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#111827;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;border-bottom:1px solid #eef0f3;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);z-index:10}.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.14em}.spark{color:#6875ff;font-size:24px}.nav nav{display:flex;gap:26px;font-size:13px;font-weight:600}.nav-pill{background:#111827;color:white;padding:11px 19px;border-radius:999px;font-size:13px;font-weight:700}.hero{min-height:650px;padding:65px 6vw 45px;display:grid;grid-template-columns:1fr 1fr;gap:30px;overflow:hidden}.hero-copy{align-self:center;max-width:700px}.hello{font-size:19px;font-weight:700;margin:0 0 15px}.roles,.section-label,.subsection-label{font-size:12px;font-weight:800;letter-spacing:.08em}.roles{color:#6b7280;margin:0 0 24px}.hero h1{font-size:clamp(58px,6.2vw,92px);line-height:.98;letter-spacing:-.055em;margin:0 0 28px;font-weight:800}.rainbow{background:linear-gradient(90deg,#f28a36,#f16c83 23%,#9c63dc 50%,#4e88e8 75%,#2aa88d);-webkit-background-clip:text;background-clip:text;color:transparent}.intro{font-size:18px;max-width:600px;color:#374151}.tagline{font-size:20px;font-weight:700;max-width:590px;background:linear-gradient(90deg,#4d69e8,#2aa88d,#e79b38);-webkit-background-clip:text;background-clip:text;color:transparent;margin:22px 0}.buttons{display:flex;gap:14px;margin-top:24px}.button{display:inline-flex;gap:10px;align-items:center;padding:13px 21px;border-radius:999px;font-weight:700;font-size:14px}.primary,.dark{background:#111827;color:#fff}.secondary{border:1px solid #cbd1da}.hero-art{position:relative;min-height:500px;display:flex;align-items:flex-end;justify-content:center}.hero-art img{width:min(100%,560px);height:560px;object-fit:cover;object-position:center 18%;border-radius:36px;position:relative;z-index:2;box-shadow:0 30px 80px rgba(60,70,110,.16)}.orb{position:absolute;width:580px;height:580px;border-radius:50%;background:linear-gradient(135deg,#b8d5ff,#d8c4f6 40%,#c9f0e2 70%,#fff0c9);top:0;right:0;opacity:.9}.dots{position:absolute;width:100px;height:100px;right:0;bottom:35px;background-image:radial-gradient(#9eb4ef 1.5px,transparent 1.5px);background-size:14px 14px}.star{position:absolute;color:#7d70e9;font-size:27px;z-index:4}.star-one{top:80px;right:70px}.star-two{top:130px;left:35px}.card-section{margin:0 4vw 75px;padding:48px 58px;background:linear-gradient(110deg,#f4f9ff,#fbfffc);border:1px solid #edf0f5;border-radius:26px;display:block}.about-copy{max-width:820px}.about-photo img{width:100%;height:280px;object-fit:cover;border-radius:22px}.about-copy{max-width:720px}.section-label{color:#111827;margin:0 0 25px}.about-copy h2,.contact h2{font-size:40px;line-height:1.05;letter-spacing:-.04em;margin:8px 0 20px}.about-copy p{color:#4b5563}.text-link{font-weight:700;color:#4f65e8}.what,.work,.experience,.education{padding:0 6vw 80px}.pillars{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #e8ebf0;border-bottom:1px solid #e8ebf0}.pillars article{padding:28px 18px;border-right:1px solid #e8ebf0}.pillars article:last-child{border-right:0}.icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:24px;margin-bottom:15px}.lavender{background:#e6e1ff}.green{background:#d7f1e3}.blue{background:#dce9ff}.pink{background:#ffddea}.peach{background:#ffe5c7}.rose{background:#f8dff0}.pillars h3,.work-card h3{margin:0 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.02em}.pillars p,.work-card p{font-size:13px;color:#4b5563}.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.work-card{min-height:285px;border-radius:22px;padding:25px;position:relative;overflow:hidden;color:white;display:flex;flex-direction:column;justify-content:flex-end}.work-card p{color:rgba(255,255,255,.9);margin:0;max-width:260px}.blue-card{background:linear-gradient(145deg,#5b6eea,#3159bc)}.green-card{background:linear-gradient(145deg,#348a75,#176b57)}.purple-card{background:linear-gradient(145deg,#8b72df,#6550bc)}.orange-card{background:linear-gradient(145deg,#efa14e,#d77825)}.work-icon{position:absolute;top:24px;left:24px;font-size:42px;opacity:.9}.arrow{position:absolute;right:20px;bottom:20px;width:38px;height:38px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center}.timeline{display:grid;grid-template-columns:repeat(9,1fr);position:relative;border-top:1px solid #dfe3e9}.timeline article{padding:24px 14px 0;position:relative;min-width:0}.dot{position:absolute;top:-6px;left:14px;width:12px;height:12px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #d8dde6}.dot.blue{background:#4e73d8}.dot.green{background:#45a77d}.dot.purple{background:#806de0}.dot.pink{background:#e67ca2}.dot.orange{background:#e9953c}.date{font-size:12px;font-weight:600;color:#6b7280}.timeline h3{font-size:16px;line-height:1.25;margin:5px 0}.timeline article>p:last-child{font-size:12px;color:#6b7280;min-height:38px}.education-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.education-card{min-height:245px;border:1px solid #e8ebf0;border-radius:22px;padding:25px;position:relative;overflow:hidden}.education-primary{background:linear-gradient(145deg,#f2efff,#fff)}.education-secondary{background:linear-gradient(145deg,#eef9f4,#fff)}.education-tertiary{background:linear-gradient(145deg,#eef4ff,#fff)}.education-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:23px;margin-bottom:18px;background:#fff;border:1px solid rgba(17,24,39,.08)}.credential-type,.subsection-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin:0 0 7px}.education-card h3{font-size:20px;line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}.education-card p:not(.credential-type){font-size:13px;color:#4b5563;margin:0;max-width:380px}.credential-date{display:inline-block;margin-top:18px;font-size:12px;font-weight:700;color:#4f65e8}.certifications{margin-top:55px;padding-top:28px;border-top:1px solid #e8ebf0;display:grid;grid-template-columns:.8fr 1.5fr;gap:50px}.cert-intro{font-size:14px;color:#6b7280;max-width:360px;margin:8px 0 0}.cert-list{display:grid}.cert-item{padding:15px 0;border-bottom:1px solid #e8ebf0;display:flex;flex-direction:column;gap:3px}.cert-item:first-child{padding-top:0}.cert-item strong{font-size:14px;line-height:1.35}.cert-item span{font-size:12px;color:#6b7280}.contact{margin:0 4vw 24px;padding:45px 55px;border-radius:28px;background:linear-gradient(105deg,#bfcfff,#e1d7fb 38%,#d9f0df 67%,#ffe6bd);display:grid;grid-template-columns:1.4fr 1fr;gap:35px;align-items:center}.contact h2{margin:5px 0 8px}.contact p:not(.section-label){color:#374151}.contact-links{display:flex;flex-direction:column;gap:15px;font-size:14px;font-weight:600}.dark{margin-top:14px}footer{text-align:center;padding:8px 0 25px;color:#6b7280;font-size:12px}
@media(max-width:1200px){.nav nav{gap:16px}.pillars{grid-template-columns:repeat(3,1fr)}.pillars article:nth-child(3){border-right:0}.timeline{grid-template-columns:repeat(4,1fr);row-gap:28px}}
@media(max-width:900px){.nav nav{display:none}.hero{grid-template-columns:1fr;padding-top:50px}.hero-art{min-height:430px}.hero-art img{height:450px}.orb{width:450px;height:450px}.card-section{grid-template-columns:1fr}.pillars{grid-template-columns:repeat(2,1fr)}.pillars article:nth-child(2n){border-right:0}.work-grid{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:1fr 1fr}.education-grid{grid-template-columns:1fr}.certifications{grid-template-columns:1fr;gap:25px}.contact{grid-template-columns:1fr}}
@media(max-width:560px){.nav{padding:0 20px}.nav-pill{display:none}.hero{padding:40px 20px 20px}.hero h1{font-size:52px}.hero-art{min-height:370px}.hero-art img{height:380px}.orb{width:370px;height:370px}.card-section,.contact{margin-left:15px;margin-right:15px;padding:25px}.what,.work,.experience,.education{padding-left:20px;padding-right:20px}.pillars,.work-grid,.timeline{grid-template-columns:1fr}.pillars article{border-right:0;border-bottom:1px solid #e8ebf0}.work-card{min-height:250px}.contact{gap:22px}}
.chat-icon svg{width:27px;height:27px;display:block;fill:#7a4f75}.chat-icon{color:#7a4f75}

.icon-outline svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.education-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:12px;background:#f1f4f3;color:#536d68}
.education-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.work-lightbulb svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.outline-icon{display:grid;place-items:center}
.outline-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.education-icon.outline-icon svg{width:27px;height:27px}

/* Final icon polish */
.what .icon.outline-icon{color:#46545a;font-size:0}
.what .icon.outline-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.what .icon.lavender.outline-icon{background:#eeeafc;color:#46545a}
.what .icon.green.outline-icon{background:#e6f4ee;color:#46545a}
.education-icon.outline-icon{background:#f7f8f7;border:1px solid rgba(17,24,39,.10);color:#46545a;font-size:0}
.education-icon.outline-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Selected Work Accessibility: white outline to match the other work icons */
.work-icon.accessibility-white {
  color: #fff !important;
  font-size: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}
.work-icon.accessibility-white svg {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Selected Work card layout fix:
   keep copy comfortably inside each card and clear of the arrow button. */
.work-card{
  padding:25px 25px 28px;
}
.work-card h3{
  max-width:calc(100% - 48px);
  line-height:1.2;
}
.work-card p{
  max-width:calc(100% - 48px)!important;
  line-height:1.45;
  padding-right:8px;
}
@media(max-width:1200px){
  .work-card h3,.work-card p{max-width:calc(100% - 42px)!important}
}
@media(max-width:900px){
  .work-card{min-height:260px}
  .work-card h3,.work-card p{max-width:calc(100% - 34px)!important}
}
@media(max-width:560px){
  .work-card{min-height:245px;padding:22px 20px 25px}
  .work-card h3,.work-card p{max-width:calc(100% - 22px)!important}
  .work-card p{font-size:13px;line-height:1.4}
}

/* Selected Work — raise the text into a balanced visual position.
   The icon stays at the top and the arrow stays at the bottom. */
.work-card{
  justify-content:center;
  padding:100px 25px 70px;
}
.work-card h3{
  margin-bottom:10px;
}
.work-card p{
  margin:0;
  line-height:1.5;
}
@media(max-width:900px){
  .work-card{
    padding:90px 22px 62px;
  }
}
@media(max-width:560px){
  .work-card{
    min-height:245px;
    padding:78px 20px 58px;
  }
  .work-card h3{
    margin-bottom:8px;
    line-height:1.2;
  }
  .work-card p{
    line-height:1.4;
  }
}

/* What I Do Accessibility — match Selected Work's clean person-in-circle outline */
.same-accessibility-icon {
  font-size: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #4b5563 !important;
}
.same-accessibility-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Through My Lens — added to the existing V16 site */
.photography {
  padding: 90px 7vw 70px;
}
.lens-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 10px 0 28px;
}
.lens-heading h2 {
  margin: 0;
}
.lens-heading p {
  margin: 10px 0 0;
  color: #6f737a;
  font-size: 18px;
}
.lens-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  grid-template-rows: 250px 250px 250px;
  gap: 16px;
}
.lens-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #eee;
}
.lens-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}
.lens-photo:hover img {
  transform: scale(1.035);
}
.lens-feature {
  grid-row: span 2;
}
.lens-photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #25282d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
@media (max-width: 900px) {
  .lens-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 220px 220px 220px;
  }
  .lens-feature {
    grid-column: span 2;
    grid-row: span 1;
  }
}
@media (max-width: 600px) {
  .photography {
    padding: 65px 6vw 55px;
  }
  .lens-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 250px);
  }
  .lens-feature {
    grid-column: span 1;
  }
}


/* Through My Lens — action shot: reveal a little more of the photographer */
.lens-action-photo{object-position:center 58%;}

/* LinkedIn — ensure the profile link is clickable */
.linkedin-link {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  cursor: pointer;
}

/* Bottom LinkedIn link — explicit clickable layer */
.contact-links .linkedin-bottom {
  position: relative;
  z-index: 100;
  display: inline-block;
  pointer-events: auto !important;
  cursor: pointer;
  text-decoration: none;
}

/* Photography section: avoid repeating the title and subtly lower the window-cat framing */
.lens-cat-profile-photo { object-position: center 40%; }

/* Through My Lens — slightly lower the straight-on cat framing */
.lens-cat-straight-photo {
  object-position: center 56%;
}

/* Specialist timeline dot — intentionally darker for better contrast */
.timeline article:nth-child(7) .dot {
  background: #806DE0;
}

/* Header navigation — ensure the top-right Say Hi pill is tappable */
.nav {
  z-index: 1000;
}
.nav-pill {
  position: relative;
  z-index: 1001;
  pointer-events: auto;
  cursor: pointer;
}

#contact {
  scroll-margin-top: 88px;
}

/* Small personal-brand additions */
.currently {
  margin: 14px 0 0;
  font-size: 14px;
  color: #667085;
}
.currently strong {
  color: #111827;
}


/* Keep hero typography floating above the decorative circle as it moves. */
.hero-copy,
.hero-content,
.hero-text,
.hero-intro,
.hero h1,
.hero .eyebrow {
  position: relative;
  z-index: 5;
}

.hero-circle,
.hero .circle,
.hero-bg-circle,
.hero .decorative-circle {
  z-index: 1;
}


/* Decorative orb stays behind the hero copy and image. */
.hero-art .orb {
  position: absolute;
  z-index: 1;
}

/* As Seen Elsewhere */
.elsewhere { padding: 100px 6vw; background: #f7f8fb; }
.elsewhere .section-head { max-width: 850px; margin: 0 auto 48px; text-align: center; }
.elsewhere-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.elsewhere-card { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 18px 55px rgba(30,40,70,.08); }
.elsewhere-media { aspect-ratio: 16 / 9; overflow: hidden; background: #eef1f7; }
.elsewhere-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uci-media img { object-position: center 48%; }
.uci-instagram-media img { object-position: center; }
.youtube-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.elsewhere-content { padding: 26px 28px 30px; }
.elsewhere-source { margin: 0 0 7px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #667085; }
.elsewhere-content h3 { margin: 0 0 10px; font-size: 28px; line-height: 1.1; }
.elsewhere-content p:not(.elsewhere-source) { margin: 0 0 18px; color: #667085; line-height: 1.55; }
.elsewhere-content a { font-weight: 750; text-decoration: none; }
.elsewhere-content a span { margin-left: 5px; }
@media (max-width: 820px) {
  .elsewhere-grid { grid-template-columns: 1fr; }
  .elsewhere { padding: 75px 6vw; }
}

.uci-meeting-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 1050px) {
  .elsewhere-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .elsewhere-grid { grid-template-columns: 1fr; }
}

/* Expandable UCI meeting photo */
.photo-expand{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;border-radius:inherit}
.photo-expand img{display:block;width:100%;height:100%;object-fit:cover}
.photo-expand:focus-visible{outline:3px solid rgba(128,109,224,.7);outline-offset:-3px}
.photo-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(12,12,20,.82);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.photo-lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.photo-lightbox img{max-width:min(1100px,92vw);max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.photo-lightbox-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#171717;font-size:30px;line-height:1;cursor:pointer}
body.lightbox-open{overflow:hidden}