@charset "UTF-8";


/* ============================================================
   THEME
============================================================ */

.portfolio {

  --background: #ffffff;
  --background-soft: #f6f8fb;

  --surface: #ffffff;
  --surface-elevated: #ffffff;

  --text: #121826;
  --text-secondary: #556070;
  --text-muted: #7b8492;

  --border: #e4e8ef;

  --primary: #2457e6;
  --primary-hover: #1747ce;

  --primary-soft: #edf2ff;

  --shadow:
    0 20px 60px rgba(26, 39, 65, 0.08);

  --nav-background:
    rgba(255, 255, 255, 0.86);

  background:
    var(--background);

  color:
    var(--text);

  min-height: 100vh;

  transition:
    background-color .25s ease,
    color .25s ease;

}


.portfolio[data-theme="dark"] {

  --background: #0c111b;
  --background-soft: #111827;

  --surface: #151d2a;
  --surface-elevated: #182231;

  --text: #f4f7fb;
  --text-secondary: #b1bac8;
  --text-muted: #8490a1;

  --border: #253044;

  --primary: #6f97ff;
  --primary-hover: #8baaff;

  --primary-soft:
    rgba(111, 151, 255, 0.12);

  --shadow:
    0 25px 70px rgba(0, 0, 0, .28);

  --nav-background:
    rgba(12, 17, 27, 0.84);

}


/* ============================================================
   GLOBAL
============================================================ */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background: #fff;

}


.portfolio a {
  color: inherit;
}


.section-container {

  width:
    min(1180px, calc(100% - 48px));

  margin:
    0 auto;

}


.section {

  padding:
    120px 0;

}


.section-soft {

  background:
    var(--background-soft);

}


/* ============================================================
   NAVBAR
============================================================ */

.navbar {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    var(--nav-background);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid var(--border);

}


.nav-inner {

  width:
    min(1180px, calc(100% - 48px));

  min-height:
    76px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    30px;

}


.brand {

  font-size:
    18px;

  font-weight:
    750;

  letter-spacing:
    -0.03em;

  text-decoration:
    none;

}


.nav-links {

  display:
    flex;

  align-items:
    center;

  gap:
    30px;

}


.nav-links a {

  color:
    var(--text-secondary);

  font-size:
    13px;

  font-weight:
    550;

  text-decoration:
    none;

  transition:
    color .2s ease;

}


.nav-links a:hover {

  color:
    var(--primary);

}


.nav-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    15px;

}


.nav-linkedin {

  padding:
    10px 16px;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  font-size:
    12px;

  font-weight:
    650;

  text-decoration:
    none;

  transition:
    border-color .2s ease,
    background .2s ease;

}


.nav-linkedin:hover {

  border-color:
    var(--primary);

  background:
    var(--primary-soft);

}


/* ============================================================
   THEME TOGGLE
============================================================ */

.theme-toggle {

  position:
    relative;

  width:
    52px;

  height:
    30px;

  padding:
    0;

  border:
    1px solid var(--border);

  border-radius:
    999px;

  background:
    var(--background-soft);

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  transition:
    border-color .2s ease;

}


.theme-toggle:hover {

  border-color:
    var(--primary);

}


.theme-toggle::after {

  content: "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    22px;

  height:
    22px;

  border-radius:
    50%;

  background:
    var(--surface);

  box-shadow:
    0 2px 8px rgba(0, 0, 0, .14);

  transition:
    transform .25s ease;

}


.portfolio[data-theme="dark"]
.theme-toggle::after {

  transform:
    translateX(22px);

}


.theme-icon {

  z-index:
    1;

  width:
    25px;

  text-align:
    center;

  font-size:
    12px;

  color:
    var(--text-muted);

}


/* ============================================================
   HERO
============================================================ */

.hero {

  min-height:
    calc(100vh - 76px);

  display:
    grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:
    clamp(60px, 8vw, 110px);

  align-items:
    center;

  padding-top:
    75px;

  padding-bottom:
    90px;

}


.availability {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    8px 13px;

  border:
    1px solid var(--border);

  border-radius:
    100px;

  background:
    var(--surface);

  color:
    var(--text-secondary);

  font-size:
    12px;

  font-weight:
    600;

}


.availability-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #16a36a;

  box-shadow:
    0 0 0 4px rgba(22, 163, 106, .12);

}


.hero h1 {

  max-width:
    780px;

  margin:
    30px 0 26px;

  font-size:
    clamp(54px, 6.5vw, 88px);

  line-height:
    1.02;

  letter-spacing:
    -0.055em;

  font-weight:
    760;

}


.hero h1 span {

  display:
    block;

  color:
    var(--primary);

}


.hero-description {

  max-width:
    670px;

  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    clamp(17px, 1.5vw, 21px);

  line-height:
    1.7;

}


.hero-actions {

  display:
    flex;

  gap:
    13px;

  margin-top:
    35px;

  flex-wrap:
    wrap;

}


.primary-button,
.secondary-button {

  min-height:
    48px;

  padding:
    0 20px;

  border-radius:
    11px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    13px;

  font-weight:
    650;

  text-decoration:
    none;

  transition:
    .2s ease;

}


.primary-button {

  background:
    var(--primary);

  color:
    white !important;

  border:
    1px solid var(--primary);

}


.primary-button:hover {

  background:
    var(--primary-hover);

  transform:
    translateY(-2px);

}


.secondary-button {

  background:
    var(--surface);

  border:
    1px solid var(--border);

}


.secondary-button:hover {

  border-color:
    var(--primary);

  color:
    var(--primary);

  transform:
    translateY(-2px);

}


.hero-highlights {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  margin-top:
    65px;

  max-width:
    680px;

  border-top:
    1px solid var(--border);

}


.hero-highlights > div {

  padding:
    22px 20px 0 0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


.hero-highlights strong {

  font-size:
    16px;

}


.hero-highlights span {

  color:
    var(--text-muted);

  font-size:
    11px;

}


/* ============================================================
   PHOTO
============================================================ */

.hero-visual {

  position:
    relative;

  max-width:
    440px;

  margin-left:
    auto;

}


.photo-glow {

  position:
    absolute;

  width:
    95%;

  height:
    85%;

  right:
    -12%;

  top:
    5%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--primary) 32%,
        transparent
      ),
      transparent 68%
    );

  filter:
    blur(30px);

  opacity:
    .55;

}


.photo-container {

  position:
    relative;

  border-radius:
    28px;

  overflow:
    hidden;

  box-shadow:
    var(--shadow);

  background:
    var(--surface);

}


.profile-photo {

  width:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  object-position:
    50% 26%;

  display:
    block;

}


.floating-role {

  position:
    absolute;

  left:
    -40px;

  bottom:
    35px;

  max-width:
    260px;

  padding:
    15px 18px;

  border:
    1px solid var(--border);

  border-radius:
    13px;

  background:
    var(--surface);

  box-shadow:
    var(--shadow);

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.floating-role-label {

  color:
    var(--primary);

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .12em;

}


.floating-role strong {

  font-size:
    12px;

}


/* ============================================================
   SECTION TITLES
============================================================ */

.section-header {

  max-width:
    850px;

  margin-bottom:
    65px;

}


.section-eyebrow {

  color:
    var(--primary);

  font-size:
    11px;

  font-weight:
    750;

  letter-spacing:
    .12em;

}


.section-header h2 {

  margin:
    15px 0 0;

  font-size:
    clamp(38px, 4.5vw, 60px);

  line-height:
    1.1;

  letter-spacing:
    -0.045em;

  font-weight:
    720;

}


/* ============================================================
   ABOUT
============================================================ */

.about-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    9vw;

}


.about-primary p {

  margin:
    0;

  font-size:
    clamp(27px, 3vw, 42px);

  line-height:
    1.25;

  letter-spacing:
    -0.035em;

}


.about-secondary {

  color:
    var(--text-secondary);

  font-size:
    17px;

  line-height:
    1.8;

}


.about-secondary p:first-child {

  margin-top:
    0;

}


/* ============================================================
   IMPACT
============================================================ */

.impact-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    20px;

}


.impact-card {

  position:
    relative;

  padding:
    32px;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    var(--surface);

  overflow:
    hidden;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;

}


.impact-card:hover {

  transform:
    translateY(-5px);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 45%,
      var(--border)
    );

  box-shadow:
    var(--shadow);

}


.impact-accent {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      transparent
    );

}


.impact-card h3 {

  margin:
    8px 0 15px;

  font-size:
    21px;

  line-height:
    1.3;

}


.impact-card p {

  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    14px;

  line-height:
    1.75;

}


/* ============================================================
   EXPERIENCE
============================================================ */

.experience-list {

  border-top:
    1px solid var(--border);

}


.experience-item {

  display:
    grid;

  grid-template-columns:
    180px 1fr;

  gap:
    60px;

  padding:
    45px 0;

  border-bottom:
    1px solid var(--border);

}


.experience-period {

  color:
    var(--text-muted);

  font-size:
    12px;

  font-weight:
    600;

}


.experience-period span {

  margin:
    0 4px;

}


.experience-heading {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    25px;

}


.experience-heading h3 {

  margin:
    0;

  font-size:
    clamp(21px, 2vw, 29px);

  letter-spacing:
    -0.03em;

}


.experience-company {

  margin:
    5px 0 0;

  color:
    var(--primary);

  font-weight:
    650;

}


.current-badge {

  padding:
    6px 10px;

  border-radius:
    100px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  font-size:
    10px;

  font-weight:
    700;

}


.experience-description {

  max-width:
    800px;

  margin:
    20px 0 0;

  color:
    var(--text-secondary);

  line-height:
    1.75;

}


/* ============================================================
   WORK
============================================================ */

.section-header-wide {

  max-width:
    none;

  display:
    grid;

  grid-template-columns:
    1fr 380px;

  gap:
    90px;

  align-items:
    end;

}


.section-header-wide > p {

  color:
    var(--text-secondary);

  line-height:
    1.7;

}


.work-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    22px;

}


.work-card {

  min-height:
    360px;

  padding:
    30px;

  border:
    1px solid var(--border);

  border-radius:
    20px;

  background:
    var(--surface);

  display:
    flex;

  flex-direction:
    column;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;

}


.work-card:hover {

  transform:
    translateY(-5px);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 40%,
      var(--border)
    );

  box-shadow:
    var(--shadow);

}


.work-card-header {

  display:
    flex;

  justify-content:
    flex-end;

}


.work-icon {

  width:
    38px;

  height:
    38px;

  border-radius:
    10px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.work-card-body {

  margin-top:
    35px;

}


.work-card h3 {

  margin:
    0 0 17px;

  font-size:
    clamp(25px, 2.7vw, 35px);

  letter-spacing:
    -0.035em;

}


.work-card p {

  margin:
    0;

  color:
    var(--text-secondary);

  line-height:
    1.75;

}


.work-stack {

  margin-top:
    auto;

  padding-top:
    30px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

}


.work-stack span {

  padding:
    6px 10px;

  border:
    1px solid var(--border);

  border-radius:
    7px;

  color:
    var(--text-secondary);

  font-size:
    11px;

}


/* ============================================================
   EXPERTISE
============================================================ */

.expertise-section {

  background:
    var(--background-soft);

}


.expertise-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    20px;

}


.expertise-card {

  padding:
    28px;

  border:
    1px solid var(--border);

  border-radius:
    17px;

  background:
    var(--surface);

}


.expertise-card h3 {

  margin:
    0 0 20px;

  font-size:
    18px;

}


.expertise-skills {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}


.expertise-skills span {

  color:
    var(--text-secondary);

  font-size:
    13px;

}


/* ============================================================
   EDUCATION
============================================================ */

.education-list {

  border-top:
    1px solid var(--border);

}


.education-item {

  display:
    grid;

  grid-template-columns:
    1fr 1fr auto;

  gap:
    50px;

  padding:
    35px 0;

  border-bottom:
    1px solid var(--border);

}


.education-item h3 {

  margin:
    0;

}


.education-item p {

  margin:
    6px 0 0;

  color:
    var(--text-secondary);

}


.education-year {

  color:
    var(--primary);

  font-weight:
    700;

}


/* ============================================================
   CONTACT
============================================================ */

.contact-section {

  padding:
    100px 0;

  background:
    var(--background);

}


.contact-card {

  padding:
    clamp(35px, 6vw, 70px);

  border-radius:
    28px;

  background:
    var(--primary);

  color:
    white;

  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    70px;

  align-items:
    end;

}


.contact-eyebrow {

  color:
    rgba(255,255,255,.72);

}


.contact-card h2 {

  max-width:
    730px;

  margin:
    15px 0;

  font-size:
    clamp(38px, 5vw, 65px);

  line-height:
    1.08;

  letter-spacing:
    -0.045em;

}


.contact-card p {

  max-width:
    620px;

  color:
    rgba(255,255,255,.78);

  line-height:
    1.7;

}


.contact-actions {

  min-width:
    190px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

}


.contact-primary,
.contact-secondary {

  padding:
    14px 18px;

  border-radius:
    10px;

  text-align:
    center;

  font-size:
    12px;

  font-weight:
    700;

  text-decoration:
    none;

}


.contact-primary {

  background:
    white;

  color:
    #16213b !important;

}


.contact-secondary {

  border:
    1px solid rgba(255,255,255,.35);

  color:
    white !important;

}


/* ============================================================
   FOOTER
============================================================ */

.footer {

  padding:
    30px 0;

  border-top:
    1px solid var(--border);

  background:
    var(--background);

}


.footer-inner {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  color:
    var(--text-muted);

  font-size:
    11px;

}


.footer-inner > div:first-child {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


.footer-inner strong {

  color:
    var(--text);

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 960px) {

  .nav-links {
    display: none;
  }


  .nav-inner {

    grid-template-columns:
      1fr auto;

  }


  .hero {

    grid-template-columns:
      1fr 380px;

    gap:
      45px;

  }


  .hero h1 {

    font-size:
      clamp(52px, 7vw, 70px);

  }


  .impact-grid {

    grid-template-columns:
      1fr;

  }


  .section-header-wide {

    grid-template-columns:
      1fr;

    gap:
      20px;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 720px) {

  .section-container,
  .nav-inner {

    width:
      min(100% - 36px, 1180px);

  }


  .nav-linkedin {

    display:
      none;

  }


  .navbar {

    position:
      sticky;

  }


  .hero {

    grid-template-columns:
      1fr;

    min-height:
      auto;

    padding-top:
      45px;

    padding-bottom:
      75px;

  }


  .hero-copy {

    order:
      2;

  }


  .hero-visual {

    order:
      1;

    max-width:
      290px;

    margin:
      0;

  }


  .floating-role {

    left:
      25px;

    bottom:
      -25px;

  }


  .hero h1 {

    margin-top:
      30px;

    font-size:
      clamp(46px, 14vw, 70px);

  }


  .hero-highlights {

    grid-template-columns:
      1fr;

  }


  .hero-highlights > div {

    padding:
      16px 0;

    border-bottom:
      1px solid var(--border);

  }


  .section {

    padding:
      80px 0;

  }


  .section-header {

    margin-bottom:
      45px;

  }


  .about-grid,
  .work-grid,
  .expertise-grid {

    grid-template-columns:
      1fr;

  }


  .about-grid {

    gap:
      35px;

  }


  .experience-item {

    grid-template-columns:
      1fr;

    gap:
      15px;

  }


  .experience-heading {

    flex-direction:
      column;

    gap:
      12px;

  }


  .current-badge {

    align-self:
      flex-start;

  }


  .education-item {

    grid-template-columns:
      1fr;

    gap:
      18px;

  }


  .contact-card {

    grid-template-columns:
      1fr;

    gap:
      35px;

  }


  .footer-inner {

    flex-direction:
      column;

  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  * {
    transition: none !important;
  }

}



/* ============================================================
   PORTFOLIO RESPONSIVE PRODUCTION PATCH
============================================================ */


/*
   Ensure long content never creates horizontal scrolling.
*/

html,
body,
.portfolio {

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

}


img {

  max-width: 100%;

  height: auto;

}


/* ============================================================
   MOBILE NAVIGATION
============================================================ */

.mobile-menu-toggle {

  display: none;

  width: 40px;

  height: 40px;

  padding: 10px;

  border:

    1px solid
    var(--border);

  border-radius: 10px;

  background:

    var(--surface);

  cursor: pointer;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 4px;

}


.mobile-menu-toggle span {

  display: block;

  width: 18px;

  height: 2px;

  border-radius: 100px;

  background:

    var(--text);

  transition:

    transform .2s ease,
    opacity .2s ease;

}


.mobile-menu-toggle-open
span:nth-child(1) {

  transform:

    translateY(6px)
    rotate(45deg);

}


.mobile-menu-toggle-open
span:nth-child(2) {

  opacity: 0;

}


.mobile-menu-toggle-open
span:nth-child(3) {

  transform:

    translateY(-6px)
    rotate(-45deg);

}


.mobile-menu {

  display: none;

}


/* ============================================================
   LARGE DESKTOPS
============================================================ */

@media (min-width: 1440px) {

  .section-container,
  .nav-inner {

    width:

      min(
        1240px,
        calc(100% - 80px)
      );

  }


  .hero {

    min-height:

      calc(100vh - 76px);

  }

}


/* ============================================================
   NORMAL LAPTOPS
============================================================ */

@media
(max-width: 1200px) {

  .section-container,
  .nav-inner {

    width:

      min(
        1120px,
        calc(100% - 56px)
      );

  }


  .hero {

    gap: 55px;

  }


  .hero h1 {

    font-size:

      clamp(
        52px,
        6vw,
        78px
      );

  }


  .floating-role {

    left: -20px;

  }

}


/* ============================================================
   TABLETS / SMALL LAPTOPS
============================================================ */

@media
(max-width: 960px) {

  .hero {

    grid-template-columns:

      minmax(0, 1fr)
      340px;

    gap: 40px;

  }


  .hero-highlights {

    gap: 10px;

  }


  .hero-highlights > div {

    padding-right: 10px;

  }


  .impact-grid {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));

  }


  .work-grid {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));

  }


  .expertise-grid {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));

  }


  .section-header-wide {

    grid-template-columns:

      1fr;

    gap: 20px;

  }


  .section-header-wide > p {

    max-width: 620px;

  }

}


/* ============================================================
   MOBILE NAVIGATION BREAKPOINT
============================================================ */

@media
(max-width: 720px) {

  .desktop-nav {

    display: none;

  }


  .nav-actions {

    gap: 10px;

  }


  .mobile-menu-toggle {

    display: flex;

  }


  .mobile-menu {

    position: fixed;

    left: 18px;

    right: 18px;

    top: 82px;

    z-index: 99;

    padding: 12px;

    border:

      1px solid
      var(--border);

    border-radius: 16px;

    background:

      var(--surface);

    box-shadow:

      var(--shadow);

    opacity: 0;

    visibility: hidden;

    transform:

      translateY(-10px);

    transition:

      opacity .2s ease,
      transform .2s ease,
      visibility .2s ease;

  }


  .mobile-menu-open {

    display: flex;

    flex-direction: column;

    opacity: 1;

    visibility: visible;

    transform:

      translateY(0);

  }


  .mobile-menu a {

    padding:

      13px
      12px;

    border-radius: 9px;

    color:

      var(--text-secondary);

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

  }


  .mobile-menu a:hover {

    background:

      var(--background-soft);

    color:

      var(--primary);

  }


  /*
     Hero
  */

  .hero {

    grid-template-columns:

      minmax(0, 1fr);

    gap: 65px;

  }


  .hero-visual {

    width: 100%;

    max-width: 340px;

  }


  .profile-photo {

    aspect-ratio: 4 / 5;

  }


  .floating-role {

    left: 20px;

    right: -10px;

    bottom: -25px;

    max-width: 250px;

  }


  .hero-copy {

    width: 100%;

  }


  .hero-description {

    max-width: 100%;

  }


  .hero-highlights {

    grid-template-columns:

      1fr;

  }


  /*
     Content
  */

  .impact-grid,
  .work-grid,
  .expertise-grid {

    grid-template-columns:

      minmax(0, 1fr);

  }


  .impact-card,
  .work-card,
  .expertise-card {

    width: 100%;

  }


  .work-card {

    min-height: auto;

  }


  .experience-item {

    grid-template-columns:

      minmax(0, 1fr);

  }


  .experience-period {

    margin-bottom: 4px;

  }


  .education-item {

    grid-template-columns:

      minmax(0, 1fr);

  }


  .contact-card {

    grid-template-columns:

      minmax(0, 1fr);

  }


  .contact-actions {

    width: 100%;

  }


  .contact-primary,
  .contact-secondary {

    width: 100%;

  }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media
(max-width: 480px) {

  .section-container,
  .nav-inner {

    width:

      calc(100% - 32px);

  }


  .nav-inner {

    min-height: 68px;

  }


  .brand {

    font-size: 16px;

  }


  .theme-toggle {

    width: 48px;

    height: 28px;

  }


  .theme-toggle::after {

    width: 20px;

    height: 20px;

  }


  .portfolio[data-theme="dark"]
  .theme-toggle::after {

    transform:

      translateX(20px);

  }


  .hero {

    padding-top: 35px;

    padding-bottom: 65px;

  }


  .hero-visual {

    max-width: 280px;

  }


  .availability {

    font-size: 10px;

    padding: 7px 10px;

  }


  .hero h1 {

    font-size:

      clamp(
        42px,
        13.5vw,
        58px
      );

    line-height: 1.03;

  }


  .hero-description {

    font-size: 16px;

  }


  .hero-actions {

    flex-direction: column;

  }


  .primary-button,
  .secondary-button {

    width: 100%;

  }


  .section {

    padding:

      68px 0;

  }


  .section-header {

    margin-bottom: 38px;

  }


  .section-header h2 {

    font-size:

      clamp(
        32px,
        10vw,
        43px
      );

  }


  .about-primary p {

    font-size:

      clamp(
        24px,
        8vw,
        34px
      );

  }


  .impact-card,
  .work-card,
  .expertise-card {

    padding: 23px;

  }


  .experience-item {

    padding:

      32px 0;

  }


  .contact-section {

    padding:

      65px 0;

  }


  .contact-card {

    padding:

      28px 22px;

    border-radius: 20px;

  }


  .contact-card h2 {

    font-size:

      clamp(
        32px,
        10vw,
        45px
      );

  }


  .footer-inner {

    font-size: 10px;

  }

}


/* ============================================================
   VERY SMALL DEVICES
============================================================ */

@media
(max-width: 360px) {

  .section-container,
  .nav-inner {

    width:

      calc(100% - 24px);

  }


  .hero h1 {

    font-size: 40px;

  }


  .floating-role {

    position: relative;

    left: auto;

    right: auto;

    bottom: auto;

    margin-top: 12px;

    max-width: none;

  }


  .nav-actions {

    gap: 6px;

  }


  .theme-toggle {

    transform:

      scale(.92);

  }


  .mobile-menu-toggle {

    width: 37px;

    height: 37px;

  }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

a:focus-visible,
button:focus-visible {

  outline:

    3px solid
    var(--primary);

  outline-offset: 3px;

}


/*
   Avoid accidental horizontal overflow from long URLs
   or unusually long technology names.
*/

p,
h1,
h2,
h3,
strong,
span {

  overflow-wrap: break-word;

}



/* ============================================================
   FINAL RESPONSIVE HOSTINGER PATCH
============================================================ */


/*
   Global layout safety
*/

html,
body,
.portfolio {

  width: 100%;

  max-width: 100%;

  overflow-x: hidden;

}


img {

  max-width: 100%;

  height: auto;

}


.section-container,
.nav-inner {

  box-sizing: border-box;

}


/*
   Desktop
*/

@media (min-width: 1440px) {

  .section-container,
  .nav-inner {

    width:
      min(
        1240px,
        calc(100% - 80px)
      );

  }

}


/*
   Laptop
*/

@media
(max-width: 1200px) {

  .section-container,
  .nav-inner {

    width:
      min(
        1120px,
        calc(100% - 56px)
      );

  }


  .hero {

    gap: 55px;

  }


  .floating-role {

    left: -20px;

  }

}


/*
   Tablets
*/

@media
(max-width: 960px) {

  .hero {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 340px);

    gap: 40px;

  }


  .impact-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .work-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .expertise-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .section-header-wide {

    grid-template-columns:
      minmax(0, 1fr);

    gap: 20px;

  }

}


/*
   Phones
*/

@media
(max-width: 720px) {

  .section-container,
  .nav-inner {

    width:
      calc(100% - 36px);

  }


  .hero {

    grid-template-columns:
      minmax(0, 1fr);

    min-height: auto;

    gap: 65px;

    padding-top: 40px;

    padding-bottom: 75px;

  }


  .hero-visual {

    width: 100%;

    max-width: 320px;

    margin:
      0 auto;

  }


  .hero-copy {

    width: 100%;

  }


  .profile-photo {

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    object-position:
      50% 26%;

  }


  .floating-role {

    left: 20px;

    right: -8px;

    bottom: -24px;

    max-width: 250px;

  }


  .hero h1 {

    font-size:
      clamp(
        45px,
        14vw,
        68px
      );

  }


  .hero-description {

    max-width: 100%;

    font-size: 16px;

  }


  .hero-actions {

    width: 100%;

  }


  .hero-highlights {

    grid-template-columns:
      minmax(0, 1fr);

  }


  .hero-highlights > div {

    padding: 15px 0;

    border-bottom:
      1px solid var(--border);

  }


  .section {

    padding:
      78px 0;

  }


  .section-header h2 {

    font-size:
      clamp(
        34px,
        10vw,
        46px
      );

  }


  .about-grid,
  .impact-grid,
  .work-grid,
  .expertise-grid {

    grid-template-columns:
      minmax(0, 1fr);

  }


  .experience-item {

    grid-template-columns:
      minmax(0, 1fr);

    gap: 14px;

  }


  .education-item {

    grid-template-columns:
      minmax(0, 1fr);

    gap: 18px;

  }


  .contact-card {

    grid-template-columns:
      minmax(0, 1fr);

  }


  .contact-actions {

    width: 100%;

  }


  .contact-primary,
  .contact-secondary {

    width: 100%;

  }

}


/*
   Small phones
*/

@media
(max-width: 480px) {

  .section-container,
  .nav-inner {

    width:
      calc(100% - 30px);

  }


  .navbar {

    min-width: 0;

  }


  .brand {

    font-size: 15px;

  }


  .hero {

    padding-top: 30px;

  }


  .hero-visual {

    max-width: 270px;

  }


  .hero h1 {

    font-size:
      clamp(
        40px,
        13vw,
        55px
      );

  }


  .availability {

    font-size: 10px;

  }


  .hero-actions {

    flex-direction: column;

  }


  .primary-button,
  .secondary-button {

    width: 100%;

  }


  .section {

    padding:
      65px 0;

  }


  .impact-card,
  .work-card,
  .expertise-card {

    padding: 23px;

  }


  .work-card {

    min-height: auto;

  }


  .contact-card {

    padding:
      28px 22px;

    border-radius: 20px;

  }

}


/*
   Very narrow screens
*/

@media
(max-width: 360px) {

  .section-container,
  .nav-inner {

    width:
      calc(100% - 22px);

  }


  .hero h1 {

    font-size: 39px;

  }


  .floating-role {

    position: relative;

    left: auto;

    right: auto;

    bottom: auto;

    max-width: none;

    margin-top: 10px;

  }

}


/*
   Protect against overflow caused by large strings.
*/

p,
h1,
h2,
h3,
h4,
strong,
span,
a {

  overflow-wrap: break-word;

}


/*
   Keyboard accessibility
*/

a:focus-visible,
button:focus-visible {

  outline:
    3px solid
    var(--primary);

  outline-offset:
    3px;

}