:root {
   --ht-ink: #170c24;
   --ht-muted: #655d70;
   --ht-line: #e5dff0;
   --ht-soft: #f7f3ff;
   --ht-violet: #8750f7;
   --ht-violet-dark: #5625bb;
   --ht-green: #16875b;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 96px;
}

body.light-mode {
   color: var(--ht-ink);
   overflow-x: hidden;
}

body.light-mode a,
body.light-mode a:hover,
body.light-mode a:focus,
body.light-mode a:active {
   text-decoration: none !important;
}

/* Remove the template's animated navigation underline. */
.tj-header-area .header-menu ul > li > a::before {
   display: none !important;
   content: none !important;
}

.whatsapp-float {
   display: grid;
   position: fixed;
   right: 50px;
   bottom: calc(116px + env(safe-area-inset-bottom, 0px));
   z-index: 100;
   width: 56px;
   height: 56px;
   border: 1px solid rgba(255, 255, 255, .72);
   border-radius: 50%;
   background: #25d366;
   box-shadow: 0 12px 30px rgba(18, 92, 53, .24);
   color: #f8fff9;
   font-size: 29px;
   line-height: 1;
   place-items: center;
   transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .25s ease,
      box-shadow .25s ease;
}

.whatsapp-float:hover {
   background: #1fbd5a;
   box-shadow: 0 16px 36px rgba(18, 92, 53, .32);
   color: #f8fff9;
   transform: translateY(-3px) scale(1.04);
}

.whatsapp-float:focus-visible {
   outline: 3px solid rgba(135, 80, 247, .42);
   outline-offset: 4px;
}

.whatsapp-tooltip {
   position: absolute;
   top: 50%;
   right: calc(100% + 12px);
   width: max-content;
   padding: 8px 11px;
   border-radius: 8px;
   background: var(--ht-ink);
   box-shadow: 0 8px 24px rgba(23, 12, 36, .16);
   color: #f8f5fc;
   font-family: var(--tj-ff-body);
   font-size: 12px;
   font-weight: 650;
   letter-spacing: .01em;
   opacity: 0;
   pointer-events: none;
   transform: translate(6px, -50%);
   transition: opacity .2s ease, transform .2s ease;
   white-space: nowrap;
}

.whatsapp-float:hover .whatsapp-tooltip,
.whatsapp-float:focus-visible .whatsapp-tooltip {
   opacity: 1;
   transform: translate(0, -50%);
}

.site-content section {
   scroll-margin-top: 92px;
}

.haseeb-brand-logo {
   object-fit: contain;
}

.tj-header-area .logo-box img {
   width: 52px;
   height: 52px;
}

.tj-header-area .header-menu ul > li > a {
   font-size: 14px;
}

.tj-header-area .header-menu ul {
   gap: 23px;
}

.section-header {
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: flex-start;
}

.section-header.text-center {
   align-items: center;
   margin-right: auto;
   margin-left: auto;
}

.section-kicker {
   display: inline-flex;
   width: fit-content;
   align-items: center;
   flex: 0 0 auto;
   gap: 10px;
   margin: 0 0 14px;
   color: var(--ht-violet-dark);
   font-size: 13px;
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: .12em;
   white-space: nowrap;
   text-transform: uppercase;
}

.section-kicker::before,
.section-kicker::after {
   display: block;
   position: static;
   width: 24px;
   height: 1px;
   flex: 0 0 24px;
   border-radius: 999px;
   background: currentColor;
   content: "";
}

.section-header .section-title {
   display: block;
   margin: 0;
   line-height: 1.15;
}

.section-header p {
   width: 100%;
   max-width: 680px;
   margin: 16px 0 0;
   line-height: 1.65;
}

.section-header.text-center .section-title,
.section-header.text-center p {
   text-align: center;
   margin-right: auto;
   margin-left: auto;
}

.section-heading-row .section-header {
   margin-bottom: 0;
}

.hero-section {
   min-height: 820px;
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-bottom: 14px;
   padding: 8px 13px;
   border: 1px solid rgba(135, 80, 247, .18);
   border-radius: 999px;
   background: rgba(255, 255, 255, .7);
   color: var(--ht-muted);
   font-size: 13px;
   font-weight: 600;
}

.status-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #21a56f;
   box-shadow: 0 0 0 5px rgba(33, 165, 111, .12);
}

.hero-content-box .lead {
   max-width: 640px;
   font-size: 19px;
   line-height: 1.65;
}

.hero-content-box .text-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-left: 22px;
   color: var(--ht-ink);
   font-weight: 700;
}

.hero-content-box .text-link:hover {
   color: var(--ht-violet);
}

.hero-section .funfact-area .row > div {
   display: flex;
   justify-content: center;
}

.hero-section .funfact-item {
   width: 100%;
   justify-content: center;
}

.hero-section .funfact-item .text {
   min-width: 124px;
}

.services-section .service-item {
   cursor: default;
}

.services-section .service-item .right-box p {
   max-width: 610px;
}

.portfolio-section {
   overflow: hidden;
}

.project-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 28px;
}

.project-card {
   overflow: hidden;
   border: 1px solid var(--ht-line);
   border-radius: 24px;
   background: #fff;
   box-shadow: 0 16px 50px rgba(46, 22, 75, .06);
   transition: transform .3s ease, box-shadow .3s ease;
}

.project-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 24px 65px rgba(46, 22, 75, .12);
}

.project-card-featured {
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: 1.35fr 1fr;
}

.project-image {
   display: block;
   overflow: hidden;
   min-height: 300px;
   background: #e9e3f3;
}

.project-card-featured .project-image {
   min-height: 430px;
}

.project-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.project-card:hover .project-image img {
   transform: scale(1.025);
}

.project-content {
   display: flex;
   min-height: 280px;
   padding: 30px;
   flex-direction: column;
}

.project-card-featured .project-content {
   min-height: auto;
   justify-content: center;
   padding: 44px;
}

.project-meta,
.project-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
}

.project-meta {
   color: var(--ht-muted);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
}

.status {
   padding: 6px 10px;
   border-radius: 999px;
   font-size: 10px;
   letter-spacing: .08em;
}

.status.live {
   background: #e7f7f0;
   color: #08714a;
}

.status.development {
   background: #f0eaff;
   color: #6730cf;
}

.status.preview {
   background: #fff1dc;
   color: #985d05;
}

.project-content h3 {
   margin: 20px 0 12px;
   font-size: clamp(26px, 3vw, 36px);
}

.project-content p {
   color: var(--ht-muted);
}

.project-footer {
   margin-top: auto;
   padding-top: 24px;
   border-top: 1px solid var(--ht-line);
   color: var(--ht-muted);
   font-size: 13px;
}

.project-footer a {
   flex: none;
   color: var(--ht-violet-dark);
   font-weight: 700;
}

.experience-list {
   display: grid;
   gap: 20px;
}

.experience-card {
   display: grid;
   grid-template-columns: 250px minmax(0, 1fr);
   gap: 48px;
   padding: 38px;
   border: 1px solid var(--ht-line);
   border-radius: 22px;
   background: #fff;
}

.experience-aside {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--ht-line);
}

.experience-number {
   margin-bottom: auto;
   color: #d6cae9;
   font-size: 44px;
   font-weight: 700;
}

.experience-aside .time {
   color: var(--ht-violet-dark);
   font-weight: 700;
}

.experience-aside .location {
   margin-top: 5px;
   color: var(--ht-muted);
   font-size: 14px;
}

.experience-main .company {
   color: var(--ht-violet-dark);
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.experience-main h3 {
   margin: 7px 0 17px;
   font-size: 27px;
}

.experience-main ul {
   margin: 0;
   padding-left: 20px;
   color: var(--ht-muted);
}

.experience-main li {
   margin-top: 8px;
   line-height: 1.65;
}

.academic-section {
   padding: 120px 0;
   background: var(--ht-ink);
   color: #fff;
}

.academic-section .section-title,
.academic-section .section-side-copy {
   color: #fff;
}

.academic-section .section-kicker {
   color: #bda0ff;
}

.section-heading-row {
   margin-bottom: 45px;
}

.section-side-copy {
   color: rgba(255, 255, 255, .65) !important;
   line-height: 1.7;
}

.academic-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
}

.academic-card {
   display: grid;
   grid-template-columns: 60px 1fr;
   gap: 24px;
   min-height: 250px;
   padding: 30px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 20px;
   background: rgba(255, 255, 255, .05);
}

.academic-card-featured {
   grid-column: 1 / -1;
   min-height: 290px;
   background: linear-gradient(135deg, rgba(135, 80, 247, .26), rgba(255, 255, 255, .05));
}

.academic-index,
.project-type {
   color: #bda0ff;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
}

.academic-card h3 {
   margin: 12px 0 14px;
   color: #fff;
   font-size: 25px;
}

.academic-card p {
   margin: 0;
   color: rgba(255, 255, 255, .68);
   line-height: 1.7;
}

.education-section {
   padding: 120px 0;
}

.education-list {
   display: grid;
   gap: 18px;
}

.education-card {
   padding: 30px;
   border-left: 4px solid var(--ht-violet);
   border-radius: 0 18px 18px 0;
   background: var(--ht-soft);
}

.education-date {
   color: var(--ht-violet-dark);
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .08em;
}

.education-card h3 {
   margin: 9px 0 6px;
   font-size: 25px;
}

.education-institute {
   color: var(--ht-ink) !important;
   font-weight: 650;
}

.education-card p {
   margin-bottom: 8px;
   color: var(--ht-muted);
   line-height: 1.65;
}

.certification-panel {
   height: 100%;
   padding: 38px;
   border-radius: 24px;
   background: linear-gradient(145deg, #6f39dc, #361374);
   color: #fff;
}

.certification-panel .section-kicker {
   color: #d9caff;
}

.certification-panel h3 {
   margin-bottom: 27px;
   color: #fff;
   font-size: 29px;
}

.certification-list {
   display: grid;
   gap: 13px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.certification-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 15px;
   border: 1px solid rgba(255, 255, 255, .13);
   border-radius: 12px;
   background: rgba(255, 255, 255, .07);
}

.certification-list i {
   color: #d9caff;
}

.contact-form-box {
   padding: 46px;
}

.tj-contact-form .form_group label {
   display: block;
   margin-bottom: 8px;
   color: var(--ht-ink);
   font-size: 13px;
   font-weight: 700;
}

.tj-contact-form .form_group label span {
   color: var(--ht-muted);
   font-weight: 400;
}

.tj-contact-form select {
   width: 100%;
   height: 60px;
   padding: 0 20px;
   border: 1px solid var(--tj-theme-accent-2);
   border-radius: 8px;
   background: var(--tj-theme-accent-1);
   color: var(--ht-ink);
}

.form-note {
   display: inline-block;
   margin: 0 0 0 14px;
   color: var(--ht-muted);
   font-size: 12px;
}

.form-note.is-error {
   color: #ad2f38;
}

.availability-note {
   margin-bottom: 35px;
   padding: 18px 20px;
   border: 1px solid var(--ht-line);
   border-radius: 15px;
   background: #fff;
   color: var(--ht-muted);
   font-size: 14px;
   line-height: 1.6;
}

.availability-note .status-dot {
   margin-right: 9px;
}

.contact-info-list .text-box a {
   overflow-wrap: anywhere;
}

/* Compact desktop hero: preserve the portrait without letting its intrinsic
   dimensions dictate the height of the entire section. */
@media (min-width: 768px) {
   .hero-section {
      min-height: auto;
      padding-top: clamp(135px, 10vw, 165px);
      padding-bottom: clamp(42px, 4vw, 58px);
   }

   .hero-section .hero-image-box {
      width: min(100%, clamp(360px, 32vw, 470px));
      aspect-ratio: 4 / 5;
      margin-right: auto;
      margin-left: auto;
      border-radius: 34px;
      overflow: hidden;
   }

   .hero-section .hero-image-box img,
   .hero-section .hero-image-box img:hover {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      border-radius: inherit;
      object-fit: cover;
      object-position: center;
      transform: none;
   }

   .hero-section .funfact-area {
      margin-top: clamp(48px, 4vw, 60px);
   }
}

@media (max-width: 1199px) {
   .tj-header-area .header-menu ul {
      gap: 15px;
   }

   .tj-header-area .header-menu ul > li > a {
      font-size: 13px;
   }

}

@media (max-width: 991px) {
   .hero-section {
      min-height: auto;
   }

   .project-card-featured {
      display: block;
   }

   .project-card-featured .project-image {
      min-height: 350px;
   }

   .experience-card {
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 28px;
   }

   .certification-panel {
      height: auto;
      margin-top: 35px;
   }

   .contact-form-box {
      padding: 32px;
   }
}

@media (max-width: 767px) {
   html {
      scroll-padding-top: 72px;
   }

   .whatsapp-float {
      right: 20px;
      bottom: calc(80px + env(safe-area-inset-bottom, 0px));
      width: 52px;
      height: 52px;
      font-size: 27px;
   }

   .whatsapp-tooltip {
      display: none;
   }

   .section-kicker {
      margin-bottom: 11px;
      font-size: 12px;
      letter-spacing: .1em;
      white-space: normal;
   }

   .section-header p {
      margin-top: 13px;
   }

   .hero-eyebrow {
      align-items: flex-start;
      border-radius: 15px;
      line-height: 1.45;
   }

   .hero-content-box .lead {
      font-size: 17px;
   }

   .hero-section .hero-image-box {
      width: min(92%, 360px);
      margin-right: auto;
      margin-left: auto;
   }

   .hero-section .hero-image-box img {
      width: 100%;
      max-width: 100%;
      transform: rotate(3deg);
   }

   .hero-content-box .text-link {
      margin: 18px 0 0;
   }

   .hero-section .funfact-area .row > div:last-child {
      margin-top: 25px;
   }

   .project-grid,
   .academic-grid {
      grid-template-columns: 1fr;
   }

   .project-card-featured,
   .academic-card-featured {
      grid-column: auto;
   }

   .project-image,
   .project-card-featured .project-image {
      min-height: 250px;
   }

   .project-card-featured .project-content,
   .project-content {
      padding: 24px;
   }

   .project-footer {
      align-items: flex-start;
      flex-direction: column;
   }

   .experience-card {
      grid-template-columns: 1fr;
      gap: 22px;
      padding: 26px;
   }

   .experience-aside {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3px 16px;
      padding-bottom: 20px;
      border-right: 0;
      border-bottom: 1px solid var(--ht-line);
   }

   .experience-number {
      grid-row: 1 / 3;
      margin: 0;
   }

   .academic-section,
   .education-section {
      padding: 80px 0;
   }

   .academic-card {
      grid-template-columns: 1fr;
      min-height: auto;
   }

   .contact-form-box {
      padding: 25px 20px;
   }

   .form-note {
      display: block;
      margin: 12px 0 0;
   }
}

@media (prefers-reduced-motion: reduce) {
   .whatsapp-float,
   .whatsapp-tooltip {
      transition: none;
   }
}

@media (max-width: 575px) {
   .tj-header-area .header-button {
      display: none;
   }

   .tj-header-area .logo-box img {
      width: 46px;
      height: 46px;
   }
}

@media (max-width: 390px) {
   .hero-section .hero-title {
      font-size: 46px;
   }

   .project-meta {
      align-items: flex-start;
      flex-direction: column;
   }
}

/* Mobile application shell */
.mobile-drawer-backdrop,
.mobile-app-drawer {
   display: none;
}

.project-image picture,
.hero-image-box picture {
   display: block;
   width: 100%;
   height: 100%;
}

@media (max-width: 991px) {
   body.mobile-drawer-open {
      overflow: hidden;
      touch-action: none;
   }

   .tj-header-area.header-2 {
      display: none !important;
   }

   .tj-header-area.header-absolute {
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1000;
      min-height: calc(68px + env(safe-area-inset-top, 0px));
      padding: calc(9px + env(safe-area-inset-top, 0px)) 0 9px;
      border-bottom: 1px solid rgba(86, 37, 187, .09);
      background: rgba(248, 245, 252, .96);
      box-shadow: 0 8px 30px rgba(42, 18, 70, .07);
      backdrop-filter: blur(14px);
   }

   .tj-header-area.header-absolute .header-info-list,
   .tj-header-area.header-absolute .header-menu,
   .tj-header-area.header-absolute .header-button,
   .tj-header-area.header-absolute .mobile-menu {
      display: none !important;
   }

   .tj-header-area.header-absolute .logo-box {
      margin: 0;
   }

   .tj-header-area.header-absolute .logo-box a {
      display: flex;
      width: 50px;
      height: 50px;
      align-items: center;
      justify-content: center;
   }

   .tj-header-area.header-absolute .logo-box img {
      width: 46px;
      height: 46px;
   }

   .tj-header-area.header-absolute .menu-bar {
      display: block !important;
      margin-left: auto;
   }

   .tj-header-area .menu-bar button {
      width: 48px;
      height: 48px;
      padding: 12px;
      border: 1px solid rgba(135, 80, 247, .15);
      border-radius: 14px;
      background: var(--ht-soft);
      justify-content: center;
      gap: 5px;
      touch-action: manipulation;
   }

   .tj-header-area .menu-bar button span,
   .tj-header-area .menu-bar button span:nth-child(2),
   .tj-header-area .menu-bar button span:nth-child(3) {
      width: 24px;
      height: 2px;
      margin: 0;
      border-radius: 999px;
      background: var(--ht-violet);
      transition: transform .2s ease, opacity .2s ease;
   }

   .tj-header-area .menu-bar button span:nth-child(4) {
      display: none;
   }

   .mobile-drawer-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 1090;
      background: rgba(23, 12, 36, .48);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
   }

   .mobile-drawer-backdrop.is-open {
      opacity: 1;
      pointer-events: auto;
   }

   .mobile-app-drawer {
      display: flex;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 1100;
      width: min(88vw, 360px);
      height: 100vh;
      height: 100dvh;
      padding: calc(18px + env(safe-area-inset-top, 0px)) 18px
         calc(18px + env(safe-area-inset-bottom, 0px));
      flex-direction: column;
      border-left: 1px solid rgba(135, 80, 247, .12);
      background: #fbf9fe;
      box-shadow: -24px 0 70px rgba(23, 12, 36, .2);
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translateX(104%);
      transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
      visibility: hidden;
   }

   .mobile-app-drawer.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
      visibility: visible;
   }

   .mobile-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--ht-line);
   }

   .mobile-drawer-brand {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 11px;
      color: var(--ht-ink);
   }

   .mobile-drawer-brand img {
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      object-fit: contain;
   }

   .mobile-drawer-brand span {
      display: flex;
      min-width: 0;
      flex-direction: column;
   }

   .mobile-drawer-brand strong {
      font-size: 15px;
      line-height: 1.25;
   }

   .mobile-drawer-brand small {
      margin-top: 2px;
      color: var(--ht-muted);
      font-size: 11px;
      line-height: 1.3;
   }

   .mobile-drawer-close {
      display: grid;
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      border: 1px solid var(--ht-line);
      border-radius: 14px;
      background: #fff;
      color: var(--ht-ink);
      font-size: 20px;
      place-items: center;
   }

   .mobile-drawer-nav {
      display: grid;
      gap: 6px;
      margin: 18px -2px;
      padding: 0 2px;
      overflow-y: auto;
      overscroll-behavior: contain;
   }

   .mobile-drawer-nav a {
      display: grid;
      min-height: 52px;
      padding: 7px 12px;
      grid-template-columns: 38px 1fr;
      align-items: center;
      border: 1px solid transparent;
      border-radius: 14px;
      color: var(--ht-muted);
      font-size: 15px;
      font-weight: 650;
      transition: transform .14s ease, color .2s ease, background-color .2s ease,
         border-color .2s ease;
   }

   .mobile-drawer-nav a i {
      display: grid;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(135, 80, 247, .07);
      color: var(--ht-violet-dark);
      font-size: 15px;
      place-items: center;
   }

   .mobile-drawer-nav a.is-active {
      border-color: rgba(135, 80, 247, .15);
      background: #f0e8ff;
      color: var(--ht-violet-dark);
   }

   .mobile-drawer-nav a:active,
   .mobile-drawer-close:active,
   .mobile-drawer-cta:active {
      transform: scale(.98);
   }

   .mobile-drawer-foot {
      margin-top: auto;
      padding: 16px;
      border: 1px solid rgba(135, 80, 247, .15);
      border-radius: 18px;
      background: var(--ht-soft);
   }

   .mobile-drawer-foot p {
      margin: 0 0 9px;
      color: var(--ht-muted);
      font-size: 12px;
   }

   .mobile-drawer-cta {
      display: flex;
      min-height: 46px;
      padding: 0 15px;
      align-items: center;
      justify-content: space-between;
      border-radius: 13px;
      background: var(--ht-violet-dark);
      color: #faf7ff;
      font-size: 14px;
      font-weight: 750;
      transition: transform .14s ease, background-color .2s ease;
   }
}

@media (max-width: 767px) {
   html {
      scroll-padding-top: calc(78px + env(safe-area-inset-top, 0px));
   }

   body.light-mode {
      background: #fbf9fe;
      font-size: 16px;
   }

   .site-content section {
      scroll-margin-top: calc(78px + env(safe-area-inset-top, 0px));
   }

   .container {
      padding-right: 16px;
      padding-left: 16px;
   }

   .section-header {
      max-width: 100%;
      margin-bottom: 30px;
   }

   .section-header .section-title {
      font-size: clamp(28px, 8vw, 34px);
      line-height: 1.13;
   }

   .section-header p,
   .section-side-copy {
      font-size: 15px;
      line-height: 1.65;
   }

   .section-kicker {
      gap: 8px;
      font-size: 11px;
   }

   .section-kicker::before,
   .section-kicker::after {
      width: 18px;
      flex-basis: 18px;
   }

   .hero-section {
      min-height: auto;
      padding: calc(100px + env(safe-area-inset-top, 0px)) 0 48px;
   }

   .hero-section .intro_text {
      opacity: .45;
   }

   .hero-content-box {
      display: flex;
      flex-direction: column;
   }

   .hero-eyebrow {
      max-width: 100%;
      margin-bottom: 14px;
      padding: 8px 11px;
      align-self: flex-start;
      font-size: 12px;
   }

   .hero-sub-title {
      font-size: 20px;
      line-height: 1.3;
   }

   .hero-section .hero-title {
      margin-top: 6px;
      font-size: clamp(42px, 12.4vw, 54px);
      line-height: 1.05;
      letter-spacing: -.035em;
   }

   .hero-section .hero-image-box {
      width: 100%;
      max-width: 430px;
      aspect-ratio: 4 / 5;
      margin: 24px auto 22px;
      border-radius: 26px;
      box-shadow: 0 20px 55px rgba(23, 12, 36, .16);
      overflow: hidden;
      transform: none;
   }

   .hero-section .hero-image-box img {
      width: 100%;
      height: 100%;
      max-width: none;
      border-radius: inherit;
      object-fit: cover;
      object-position: center;
      transform: none;
   }

   .hero-content-box .lead {
      margin: 0;
      font-size: 16px;
      line-height: 1.7;
   }

   .hero-content-box .button-box {
      display: grid !important;
      width: 100%;
      margin-top: 24px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
   }

   .hero-content-box .button-box .btn,
   .hero-content-box .text-link {
      display: flex;
      min-height: 50px;
      margin: 0;
      padding: 0 13px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 15px;
      font-size: 13px;
      text-align: center;
   }

   .hero-content-box .text-link {
      border: 1px solid var(--ht-line);
      background: #fff;
      text-decoration: none;
   }

   .hero-content-box .button-box a:active {
      transform: scale(.98);
   }

   .hero-section .funfact-area {
      margin-top: 36px;
      margin-right: -16px;
      margin-left: -16px;
      padding: 0 16px 5px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
   }

   .hero-section .funfact-area::-webkit-scrollbar {
      display: none;
   }

   .hero-section .funfact-area .row {
      width: max-content;
      margin: 0;
      flex-wrap: nowrap;
      gap: 10px;
   }

   .hero-section .funfact-area .row > div,
   .hero-section .funfact-area .row > div:last-child {
      display: block;
      width: 152px;
      max-width: none;
      margin: 0;
      padding: 0;
      flex: 0 0 152px;
      scroll-snap-align: start;
   }

   .hero-section .funfact-item {
      display: flex !important;
      min-height: 92px;
      margin: 0;
      padding: 15px;
      align-items: center !important;
      justify-content: flex-start;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 10px;
      border: 1px solid var(--ht-line);
      border-radius: 18px;
      background: #fff;
   }

   .hero-section .funfact-item .number {
      flex: 0 0 auto;
      font-size: 32px;
      line-height: 1;
   }

   .hero-section .funfact-item .text {
      min-width: 0;
      margin: 0;
      font-size: 11px;
      line-height: 1.45;
   }

   .services-section,
   .portfolio-section,
   .resume-section,
   .skills-section,
   .academic-section,
   .education-section,
   .contact-section {
      padding-top: 72px;
      padding-bottom: 72px;
   }

   .services-widget {
      display: grid;
      gap: 12px;
   }

   .services-widget .service-item,
   .services-widget .service-item.current {
      display: block !important;
      padding: 20px;
      border: 1px solid var(--ht-line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 8px 26px rgba(23, 12, 36, .05);
   }

   .services-widget .service-item .left-box {
      width: 100%;
      padding: 0;
      gap: 11px;
   }

   .services-widget .service-item .number {
      display: grid;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border-radius: 11px;
      background: var(--ht-soft);
      color: var(--ht-violet-dark) !important;
      font-size: 12px;
      place-items: center;
   }

   .services-widget .service-item .service-title,
   .services-widget .service-item.current .service-title {
      color: var(--ht-ink);
      font-size: 18px;
      line-height: 1.3;
   }

   .light-mode .services-widget .service-item.current .left-box .service-title,
   .light-mode .services-widget .service-item:hover .left-box .service-title {
      color: var(--ht-ink);
   }

   .services-widget .service-item .right-box {
      width: 100%;
      margin-top: 13px;
      padding: 0;
   }

   .services-widget .service-item p,
   .services-widget .service-item.current p {
      margin: 0;
      color: var(--ht-muted);
      font-size: 14px;
      line-height: 1.65;
   }

   .light-mode .services-widget .service-item.current .right-box p,
   .light-mode .services-widget .service-item:hover .right-box p {
      color: var(--ht-muted);
   }

   .services-widget .service-item > i,
   .services-widget .active-bg {
      display: none;
   }

   .project-grid {
      gap: 16px;
   }

   .project-card,
   .project-card-featured {
      display: block;
      border-radius: 20px;
      box-shadow: 0 10px 34px rgba(23, 12, 36, .07);
      transform: none;
   }

   .project-card:hover {
      transform: none;
   }

   .project-image,
   .project-card-featured .project-image {
      min-height: 0;
      aspect-ratio: 16 / 10;
   }

   .project-image img {
      object-position: top center;
      transform: none !important;
   }

   .project-content,
   .project-card-featured .project-content {
      min-height: 0;
      padding: 20px;
   }

   .project-meta {
      align-items: flex-start;
      gap: 8px;
      font-size: 11px;
      line-height: 1.35;
   }

   .project-content h3 {
      margin: 17px 0 9px;
      font-size: 26px;
   }

   .project-content p {
      font-size: 14px;
      line-height: 1.65;
   }

   .project-footer {
      gap: 12px;
      padding-top: 18px;
      font-size: 12px;
   }

   .project-footer a {
      display: inline-flex;
      min-height: 44px;
      padding: 0 14px;
      align-items: center;
      gap: 7px;
      border-radius: 12px;
      background: var(--ht-soft);
   }

   .project-footer a:active {
      transform: scale(.98);
   }

   .experience-list {
      gap: 14px;
   }

   .experience-card {
      gap: 17px;
      padding: 20px;
      border-radius: 18px;
      box-shadow: 0 8px 28px rgba(23, 12, 36, .045);
   }

   .experience-aside {
      gap: 4px 13px;
      padding-bottom: 17px;
   }

   .experience-number {
      font-size: 38px;
      line-height: 1;
   }

   .experience-aside .time,
   .experience-aside .location {
      font-size: 12px;
   }

   .experience-main .company {
      font-size: 11px;
      line-height: 1.45;
   }

   .experience-main h3 {
      margin: 7px 0 13px;
      font-size: 21px;
      line-height: 1.3;
   }

   .experience-main ul {
      padding-left: 18px;
      font-size: 14px;
   }

   .experience-main li {
      margin-top: 7px;
      line-height: 1.6;
   }

   .skills-widget {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch !important;
      gap: 12px;
   }

   .skills-widget .skill-item {
      width: 100%;
      max-width: none;
   }

   .skills-widget .skill-inner {
      display: flex;
      min-height: 150px;
      padding: 19px 12px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-radius: 18px;
   }

   .skills-widget .skill-item .icon-box {
      width: 54px;
      height: 54px;
      margin: 0 auto 13px;
   }

   .skills-widget .skill-item .number {
      font-size: 17px;
   }

   .skills-widget .skill-item > p {
      margin-top: 9px;
      font-size: 13px;
   }

   .section-heading-row {
      margin-bottom: 28px;
   }

   .section-heading-row .section-side-copy {
      margin: 15px 0 0;
   }

   .academic-grid {
      gap: 12px;
   }

   .academic-card,
   .academic-card-featured {
      min-height: 0;
      padding: 20px;
      gap: 14px;
      border-radius: 18px;
   }

   .academic-card h3 {
      margin: 9px 0 10px;
      font-size: 21px;
      line-height: 1.3;
   }

   .academic-card p {
      font-size: 14px;
      line-height: 1.65;
   }

   .education-list {
      gap: 13px;
   }

   .education-card {
      padding: 20px;
      border: 1px solid var(--ht-line);
      border-radius: 18px;
   }

   .education-card h3 {
      font-size: 21px;
      line-height: 1.3;
   }

   .education-card p {
      font-size: 14px;
   }

   .certification-panel {
      margin-top: 22px;
      padding: 22px;
      border-radius: 20px;
   }

   .certification-panel h3 {
      margin-bottom: 20px;
      font-size: 25px;
   }

   .certification-list {
      gap: 9px;
   }

   .certification-list li {
      min-height: 46px;
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.4;
   }

   .contact-section {
      padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
   }

   .contact-section .row {
      row-gap: 24px;
   }

   .contact-info-list {
      width: 100%;
      margin-bottom: 4px;
   }

   .availability-note {
      margin-bottom: 18px;
      padding: 15px 16px;
   }

   .contact-info-list li {
      min-height: 60px;
      margin-bottom: 12px;
      padding: 5px 0 5px 62px;
   }

   .contact-info-list .icon-box {
      top: 5px;
      width: 50px;
      height: 50px;
      line-height: 58px;
   }

   .contact-info-list .text-box p {
      font-size: 12px;
   }

   .contact-info-list .text-box a {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      font-size: 16px;
   }

   .contact-form-box {
      padding: 22px 18px;
      border: 1px solid var(--ht-line);
      border-radius: 22px;
   }

   .tj-contact-form .form_group {
      margin-bottom: 18px;
   }

   .tj-contact-form .form_group label {
      margin-bottom: 7px;
      font-size: 12px;
   }

   .tj-contact-form .form_group input,
   .tj-contact-form .form_group select {
      min-height: 52px;
      padding: 0 15px;
      border-radius: 13px;
      font-size: 16px;
   }

   .tj-contact-form .form_group textarea {
      min-height: 148px;
      padding: 15px;
      border-radius: 13px;
      font-size: 16px;
      line-height: 1.5;
   }

   .tj-contact-form .form_btn .btn {
      width: 100%;
      min-height: 54px;
      padding: 0 18px;
      border-radius: 15px;
   }

   .tj-footer-area {
      padding: 42px 0 calc(108px + env(safe-area-inset-bottom, 0px));
   }

   .footer-logo-box {
      margin-bottom: 24px;
   }

   .footer-menu ul {
      display: grid;
      margin-bottom: 24px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
   }

   .footer-menu ul li a {
      display: flex;
      min-height: 44px;
      padding: 0 12px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--ht-line);
      border-radius: 12px;
      background: rgba(255, 255, 255, .5);
      font-size: 13px;
   }

   .copy-text p {
      font-size: 12px;
      line-height: 1.6;
   }

   .btn,
   .project-card,
   .skill-item,
   .education-card,
   .academic-card {
      -webkit-tap-highlight-color: transparent;
   }

   .wow {
      animation-duration: .45s !important;
      animation-delay: .04s !important;
   }

   .project-card:nth-child(even),
   .experience-card:nth-child(even),
   .academic-card:nth-child(even),
   .skill-item:nth-child(even) {
      animation-delay: .1s !important;
   }
}

@media (max-width: 360px) {
   .hero-content-box .button-box {
      grid-template-columns: 1fr;
   }

   .project-meta {
      flex-direction: column;
   }

   .mobile-app-drawer {
      width: 92vw;
   }
}

@media (max-width: 767px) and (orientation: landscape) {
   .mobile-app-drawer {
      width: min(76vw, 340px);
   }

   .hero-section .hero-image-box {
      max-width: 330px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .mobile-app-drawer,
   .mobile-drawer-backdrop,
   .mobile-drawer-nav a,
   .mobile-drawer-close,
   .mobile-drawer-cta,
   .hero-content-box .button-box a,
   .project-footer a {
      scroll-behavior: auto;
      transition: none !important;
   }

   .wow {
      animation: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
   }
}