/* EMUSMAN: one shared palette and interaction system across every page. */
:root { --brand-red: #ef394b; --brand-ink: #081114; --brand-line: rgba(66,200,220,.2); }
::selection { background: var(--tj-theme-primary); color: var(--brand-ink); }
.tj-btn-primary { background: var(--tj-theme-primary); color: var(--brand-ink); font-weight: 700; }
.tj-btn-primary:hover, .tj-btn-primary:focus-visible { background: var(--brand-red); color: var(--brand-ink); }
.tj-btn-secondary:hover, .social-icons li a:hover { color: var(--brand-ink); }
.social-icons li a:hover { border-color: var(--brand-red); }
.social-icons li a:hover::before { background: var(--brand-red); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--tj-theme-primary); outline-offset: 5px; }
.tj-header-area .header-menu ul li a::before { background: var(--brand-red); }
.services-widget .active-bg, .portfolio-filter .button-group .active-bg { background: var(--tj-theme-primary); }
.services-widget .service-item.current, .services-widget .service-item.current .left-box .number,
.services-widget .service-item.current .left-box .service-title, .services-widget .service-item.current .right-box p,
.services-widget .service-item.current > i, .portfolio-filter .button-group button.active { color: var(--brand-ink); }
.services-widget .service-item .left-box .service-title { overflow-wrap: anywhere; }
.services-widget .service-item .left-box { flex-wrap: nowrap !important; }
.services-widget .service-item .left-box .number { flex-shrink: 0; }
.services-widget .service-item .left-box .service-title { min-width: 0; }
.resume-widget .resume-item::before { background: var(--tj-theme-secondary); }
.skills-widget .skill-item:hover .skill-inner { background: var(--tj-theme-secondary); border-color: var(--tj-theme-primary); }
.contact-info-list .icon-box { background: var(--tj-theme-primary); color: var(--brand-ink); }
.progress-wrap::after { color: var(--tj-theme-primary); }
.progress-wrap svg.progress-circle path { stroke: var(--tj-theme-primary); }
.service-modal.popup_content_area { width: calc(100% - 32px); max-width: 880px; border: 1px solid var(--brand-line); border-radius: 24px; background: var(--tj-theme-accent-1); box-shadow: 0 28px 100px rgba(0,0,0,.55); overflow: hidden; }
.service-modal-banner { display: flex; align-items: center; gap: 20px; padding: 30px 44px; padding-right: 84px; border-bottom: 1px solid var(--brand-line); background: linear-gradient(120deg, var(--tj-theme-secondary), var(--tj-theme-accent-1)); }
.service-modal-icon { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px; background: var(--tj-theme-primary); color: var(--brand-ink); font-size: 28px; }
.service-modal-number { color: var(--tj-theme-primary); font-size: 12px; font-weight: 700; letter-spacing: .18em; }
.service-modal .popup_modal_content { padding: 36px 44px 40px; background: transparent; }
.service-modal .service_details { padding: 0; }
.service-modal .service_info .subtitle { color: var(--tj-theme-primary); font-size: 11px; letter-spacing: .2em; margin-bottom: 14px; }
.service-modal .service_info h2.title { color: var(--tj-white); font-size: clamp(28px,4vw,42px); line-height: 1.2; margin-bottom: 20px; overflow-wrap: anywhere; }
.service-modal .service_info h3.title { color: var(--tj-white); font-size: 19px; margin: 30px 0 16px; }
.service-modal .service_info .desc { color: var(--tj-body); font-weight: 400; line-height: 1.8; margin: 0; }
.service-modal .service_info ul { columns: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.service-modal .service_info ul li { color: var(--tj-body); background: var(--tj-theme-accent-2); border: 1px solid var(--brand-line); border-radius: 12px; padding: 18px 18px 18px 44px; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.6; }
.service-modal .service_info ul li::before { left: 18px; top: 19px; color: var(--tj-theme-primary); }
.service-modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--brand-line); padding-top: 24px; margin-top: 30px; }
.service-modal-footer > span { color: var(--tj-white); font-size: 15px; }
.service-modal .mfp-close { top: 20px; right: 20px; width: 42px; height: 42px; background: var(--tj-theme-accent-1); border: 1px solid var(--brand-line); color: var(--tj-white); transform: none; }
.service-modal .mfp-close:hover, .service-modal .mfp-close:focus-visible { background: var(--brand-red); color: var(--brand-ink); transform: none; }
@media (max-width: 767px) {
 .popup-mfp .mfp-container { padding: 24px 0; }
 .service-modal-banner { padding: 24px; padding-right: 72px; gap: 14px; }
 .service-modal .popup_modal_content { padding: 28px 24px; }
 .service-modal-icon { width: 52px; height: 52px; font-size: 24px; border-radius: 14px; }
 .service-modal-number { font-size: 10px; letter-spacing: .1em; }
 .service-modal .mfp-close { top: 18px; right: 16px; }
 .service-modal .service_info ul { grid-template-columns: 1fr; }
 .service-modal-footer { align-items: stretch; flex-direction: column; }
 .service-modal-footer .tj-btn-primary { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
 .service-modal, .service-modal * { animation: none !important; transition: none !important; }
}
/* Service text returns to white as soon as its hover/focus ends. */
.services-widget .active-bg { display: none; }
.services-widget .service-item { background: transparent; transition: background-color .2s ease; }
.services-widget .service-item .left-box .service-title,
.services-widget .service-item .right-box p,
.services-widget .service-item > i { color: var(--tj-white); }
.services-widget .service-item:is(:hover, :focus-within) { background: var(--tj-theme-primary); }
.services-widget .service-item:is(:hover, :focus-within) .left-box .service-title,
.services-widget .service-item:is(:hover, :focus-within) .right-box p,
.services-widget .service-item:is(:hover, :focus-within) > i { color: var(--tj-black); }
.service-modal .popup_modal_content { padding-top: 48px; }
.service-modal .service_info h2.title { padding-right: 36px; }
@media (max-width: 767px) {
 .service-modal .popup_modal_content { padding-top: 36px; }
}
/* Service-based work gallery: readable cards and wrapping filters. */
#works-section .work-note { color: var(--tj-grey-2); font-size: 13px; margin-top: 18px; line-height: 1.7; }
#works-section .portfolio-filter .button-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; background: transparent; padding: 0; }
#works-section .portfolio-filter .button-group button { border: 1px solid var(--brand-line); border-radius: 30px; padding: 12px 18px; line-height: 1.4; transition: background-color .2s, color .2s; }
#works-section .portfolio-filter .button-group button.active,
#works-section .portfolio-filter .button-group button:hover { background: var(--tj-theme-primary); color: var(--brand-ink); border-color: var(--tj-theme-primary); }
#works-section .portfolio-box .portfolio-item { padding: 0; overflow: hidden; border: 1px solid var(--brand-line); border-radius: 20px; }
.work-preview { height: 220px; padding: 28px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: linear-gradient(135deg,var(--tj-theme-secondary),var(--tj-theme-accent-1)); border-bottom: 1px solid var(--brand-line); }
.work-preview-label { color: var(--tj-theme-primary); font-size: 10px; letter-spacing: .13em; max-width: 100%; }
.work-preview > i { color: var(--tj-theme-primary); font-size: 54px; line-height: 1; }
.work-preview-lines { display: flex; gap: 8px; align-items: end; position: absolute; right: 28px; bottom: 70px; height: 60px; }
.work-preview-lines span { display: block; width: 14px; height: 24px; background: var(--tj-theme-primary); border-radius: 4px; opacity: .25; }
.work-preview-lines span:nth-child(2) { height: 42px; opacity: .5; }
.work-preview-lines span:nth-child(3) { height: 60px; opacity: .8; }
.work-sample { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; padding: 6px 10px; border: 1px solid var(--brand-line); border-radius: 6px; color: var(--tj-body); }
#works-section .portfolio-item .content-box { position: static; width: 100%; padding: 28px; margin: 0; opacity: 1; visibility: visible; transform: none; background: transparent; border-radius: 0; }
.work-category { display: block; color: var(--tj-theme-primary); font-size: 12px; font-weight: 500; margin-bottom: 12px; }
#works-section .portfolio-item .content-box .portfolio-title { font-size: clamp(20px,2.3vw,27px); line-height: 1.35; min-height: 2.7em; }
#works-section .portfolio-item .content-box p { font-size: 14px; line-height: 1.8; color: var(--tj-body); min-height: 5.4em; }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.work-tags span { border: 1px solid var(--brand-line); border-radius: 6px; padding: 5px 8px; color: var(--tj-body); font-size: 10px; }
.work-open { display: flex; justify-content: space-between; align-items: center; color: var(--tj-theme-primary); font-size: 13px; font-weight: 500; }
#works-section .portfolio-item .content-box .work-open i { position: static; transform: none; color: inherit; font-size: 17px; }
#works-section .portfolio-item:hover, #works-section .portfolio-item:focus-within { border-color: var(--tj-theme-primary); }
#works-section .portfolio-item:hover .work-open, #works-section .portfolio-item:focus-within .work-open { color: var(--brand-red); }
#works-section .portfolio-item .portfolio-link:focus-visible { outline-offset: -5px; border-radius: 18px; }
@media (max-width: 767px) {
 #works-section .portfolio-filter .button-group { gap: 6px; }
 #works-section .portfolio-filter .button-group button { font-size: 12px; padding: 10px 12px; }
 #works-section .portfolio-box .portfolio-sizer, #works-section .portfolio-box .portfolio-item { width: 100%; }
 #works-section .portfolio-box .gutter-sizer { width: 0; }
 #works-section .portfolio-item .content-box { padding: 24px; }
 #works-section .portfolio-item .content-box .portfolio-title, #works-section .portfolio-item .content-box p { min-height: 0; }
 .work-preview { height: 200px; padding: 24px; }
}
/* Readable resume titles and dates at every breakpoint. */
#resume-section .resume-column { min-width: 0; }
#resume-section .section-header { margin-bottom: 28px; }
#resume-section .section-title { font-size: clamp(28px,3.3vw,42px); }
#resume-section .resume-item { padding: 24px 28px; margin-bottom: 16px; border: 1px solid var(--brand-line); border-radius: 16px; }
#resume-section .resume-item::before { border-radius: 16px; }
#resume-section .resume-title { font-size: clamp(18px,1.9vw,24px); text-transform: none; line-height: 1.4; overflow-wrap: anywhere; margin-bottom: 6px; }
#resume-section .time { font-size: 15px; font-weight: 700; line-height: 1.6; margin-bottom: 10px; }
#resume-section .institute { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
#resume-section .resume-item:hover::before { background: var(--tj-theme-secondary); }
#resume-section .resume-item:hover .time { color: var(--tj-theme-primary); }
#resume-section .resume-courses-heading { font-size: clamp(20px,2vw,25px); line-height: 1.4; margin: 32px 0 20px; }
@media (max-width: 767px) {
 #resume-section .resume-column + .resume-column { margin-top: 40px; }
 #resume-section .resume-item { padding: 20px; }
 #resume-section .section-header { margin-bottom: 22px; }
}
/* Skill carousel retains the template's icon and hover treatment. */
.skills-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; }
.skills-controls button { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; color: var(--tj-theme-primary); border: 1px solid var(--brand-line); border-radius: 50%; transition: background-color .2s, color .2s; }
.skills-controls .skills-toggle { width: auto; min-width: 78px; padding: 0 16px; border-radius: 24px; font-size: 12px; }
.skills-controls button:hover { background: var(--tj-theme-primary); color: var(--brand-ink); }
#skills-section .skills-carousel .skill-item { max-width: none; width: 100%; }
#skills-section .skills-carousel .skill-inner { padding: 32px 12px 24px; }
#skills-section .skills-carousel .icon-box { height: 60px; display: grid; place-items: center; margin-bottom: 24px; }
#skills-section .skills-carousel .icon-box img { width: 60px; height: 60px; object-fit: contain; }
#skills-section .skills-carousel .number { font-size: 12px; line-height: 1.5; min-height: 3em; display: grid; place-items: center; }
#skills-section .skills-carousel .skill-item > p { font-size: 15px; }
#skills-section .skills-carousel .owl-stage { display: flex; }
#skills-section .skills-carousel .owl-item { flex-shrink: 0; }
#skills-section .skills-carousel:not(.owl-loaded) { display: flex; overflow: auto; gap: 20px; }
#skills-section .skills-carousel:not(.owl-loaded) .skill-item { flex: 0 0 160px; }
@media (max-width: 575px) {
 #skills-section .skills-carousel .skill-inner { padding: 28px 10px 20px; }
 #skills-section .skills-carousel .number { font-size: 11px; }
}
/* Keep navigation alongside the automatically moving skills row. */
.skills-slider { position: relative; padding: 0 58px; }
.skills-controls { position: static; margin: 0; }
.skills-controls .skills-prev, .skills-controls .skills-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.skills-controls .skills-prev { left: 0; }
.skills-controls .skills-next { right: 0; }
#skills-section .skills-carousel .icon-box { margin-bottom: 0; }
#skills-section .skills-carousel .skill-inner { padding: 36px 12px; }
@media (max-width: 575px) {
 .skills-slider { padding: 0 38px; }
 .skills-controls button { width: 30px; height: 36px; font-size: 13px; }
 #skills-section .skills-carousel .skill-inner { padding: 28px 8px; }
}
/* Client story concepts and editorial cards share the brand palette. */
.story-note { font-size: 12px; line-height: 1.8; color: var(--tj-grey-2); margin-top: 20px; }
.testimonials-widget .story-card { padding: 28px; border: 1px solid var(--brand-line); border-radius: 18px; }
.story-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.story-top > i { color: var(--tj-theme-primary); font-size: 28px; }
.story-top > span { color: var(--tj-theme-primary); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.story-card h3 { font-size: 21px; line-height: 1.4; margin-bottom: 18px; }
.testimonials-widget .story-card .quote { font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
.story-approach { font-size: 12px; line-height: 1.8; color: var(--tj-grey-2); border-top: 1px solid var(--brand-line); padding-top: 18px; margin: 0; }
.insight-card { height: 100%; border: 1px solid var(--brand-line); border-radius: 18px; overflow: hidden; background: var(--tj-theme-accent-2); display: flex; flex-direction: column; }
.insight-visual { min-height: 190px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 28px; text-decoration: none; background: linear-gradient(130deg,var(--tj-theme-secondary),var(--tj-theme-accent-1)); color: var(--tj-theme-primary); }
.insight-visual > i { font-size: 48px; }
.insight-visual > span { font-size: 12px; }
.insight-content { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.insight-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; color: var(--tj-grey-2); line-height: 1.6; }
.insight-content h3 { font-size: 21px; line-height: 1.45; margin: 16px 0 12px; }
.insight-content h3 a { color: var(--tj-white); text-decoration: none; }
.insight-content h3 a:hover { color: var(--tj-theme-primary); }
.insight-content p { font-size: 14px; line-height: 1.8; margin-bottom: 24px; }
.insight-read { display: inline-flex; align-items: center; gap: 10px; color: var(--tj-theme-primary); text-decoration: none; font-size: 13px; font-weight: 500; }
.insight-content .insight-read { margin-top: auto; }
.insight-read:hover { color: var(--brand-red); }
.insight-page { padding-top: 160px; background: var(--tj-theme-accent-1); }
.insight-article { max-width: 850px; padding-top: 40px; padding-bottom: 80px; }
.insight-article-header { padding: 36px 0; border-bottom: 1px solid var(--brand-line); margin-bottom: 32px; }
.insight-article-header h1 { font-size: clamp(30px,4.5vw,48px); line-height: 1.25; overflow-wrap: anywhere; }
.insight-body { font-size: 17px; line-height: 1.9; }
.insight-body p { margin-bottom: 22px; }
.insight-body h2 { font-size: clamp(22px,3vw,28px); line-height: 1.4; margin-top: 36px; margin-bottom: 16px; }
@media (max-width: 767px) {
 .insight-page { padding-top: 120px; }
 .insight-page .blog-section { padding-top: 40px; }
 .insight-article { padding-top: 24px; padding-bottom: 50px; }
 .insight-body { font-size: 16px; }
 .testimonials-widget .story-card { padding: 24px; }
}
.footer-heart { color: var(--brand-red); display: inline-block; }

/* Contact and footer finishing touches. */
.tj-footer-area { padding: 62.5px 0 25px; }
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 100; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-theme-primary); color: var(--brand-ink); border: 1px solid var(--brand-line); box-shadow: 0 6px 24px rgba(0,0,0,.3); text-decoration: none; font-size: 27px; transition: background-color .2s, transform .2s; }
.whatsapp-float:hover { color: var(--brand-ink); background: var(--brand-red); transform: translateY(-3px); }
.progress-wrap { right: 23px; bottom: 86px; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-status { margin: 18px 0 0; font-size: 14px; line-height: 1.7; }
.contact-status:empty { display: none; }
.contact-status[data-state="error"] { color: #ff9da6; }
.contact-status[data-state="success"] { color: var(--tj-theme-primary); }
#contact-form button:disabled { opacity: .6; cursor: wait; }
#contact-section { scroll-margin-top: 100px; }
.contact-info-list .text-box { min-width: 0; }
.contact-info-list .text-box a { overflow-wrap: anywhere; }
@media (max-width: 575px) {
 .whatsapp-float { right: 16px; bottom: 16px; width: 44px; height: 44px; font-size: 25px; }
 .progress-wrap { right: 15px; bottom: 76px; }
}
/* Align the resume columns from their headings to their final cards. */
@media (min-width: 768px) {
 #resume-section .resume-column { display: flex; flex-direction: column; }
 #resume-section .resume-column > .section-header { flex-shrink: 0; }
 #resume-section .resume-widget[aria-label="Work experience"] { display: flex; flex-direction: column; flex: 1; }
 #resume-section .resume-widget[aria-label="Work experience"] > .resume-item { flex: 1; display: flex; flex-direction: column; justify-content: center; }
 #resume-section .resume-column > .resume-widget:last-child > .resume-item:last-child { margin-bottom: 0; }
}
.hero-content-box .hero-specialties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.hero-specialties li { display: flex; align-items: baseline; gap: 12px; font-size: clamp(15px,1.5vw,18px); line-height: 1.6; }
.hero-specialties li > span { flex: 0 0 24px; text-align: center; }
@media (min-width: 768px) and (max-width: 991px), (max-width: 379px) {
 .hero-content-box .hero-specialties { column-gap: 10px; }
 .hero-specialties li { gap: 7px; font-size: 13px; }
 .hero-specialties li > span { flex-basis: 20px; }
}
/* Responsive audit: compact headers, consistent section rhythm, safe wrapping. */
.hero-specialties .specialty-label { min-width: 0; overflow-wrap: anywhere; }
.hero-specialties li > .specialty-label { flex: 1 1 auto; text-align: left; }
.contact-info-list { min-width: 0; max-width: 100%; }
.contact-info-list .text-box { width: 100%; }
.contact-info-list .text-box a { display: inline-block; max-width: 100%; }
#contact-form textarea { resize: vertical; min-height: 160px; }
.skills-controls button, .social-icons li a { min-width: 44px; min-height: 44px; }
.service-modal .mfp-close { width: 44px; height: 44px; }
.tj-header-area .menu-bar button { min-width: 44px; min-height: 44px; justify-content: center; gap: 6px; }
.tj-header-area .menu-bar button span:nth-child(4) { top: 5px; }
@media (max-width: 991px) {
 .tj-header-area .header-menu { min-height: 0; height: auto; max-height: calc(100dvh - 90px); overscroll-behavior: contain; }
 .tj-header-area .header-menu:not(.opened) { visibility: hidden; pointer-events: none; }
 .tj-header-area .header-menu.opened { visibility: visible; pointer-events: auto; }
}
@media (max-width: 767px) {
 .tj-header-area .col-12 { flex-wrap: nowrap !important; gap: 12px; }
 .tj-header-area .logo-box { flex: 0 1 140px; min-width: 90px; margin-right: 0; }
 .tj-header-area .header-button { flex-shrink: 0; margin-left: auto; }
 .tj-header-area .header-button .btn { padding: 13px 16px; font-size: 13px; line-height: 1.4; }
 .tj-header-area .menu-bar { margin-left: 0; flex-shrink: 0; }
 .hero-section { padding-top: 120px; }
 .hero-title { font-size: clamp(28px,7.5vw,35px); line-height: 1.25; overflow-wrap: anywhere; }
 .hero-section .funfact-area { margin-top: 40px; }
 .funfact-item { gap: 8px; }
 .funfact-item .text { margin-top: 0; }
 .services-section, .portfolio-section, .resume-section, .skills-section,
 .testimonial-section, .blog-section, .contact-section { padding-top: 56px; padding-bottom: 56px; }
 .section-header { margin-bottom: 28px; }
 .section-header .section-title { line-height: 1.3; }
 .section-header p { margin-top: 12px; font-size: 15px; line-height: 1.8; }
 .services-widget .service-item .right-box p { font-size: 15px; line-height: 1.75; }
 .services-widget .service-item > i { top: 32px; }
 #works-section .portfolio-box { padding-top: 28px; }
 #works-section .portfolio-box .portfolio-item { margin-bottom: 24px; }
 #resume-section .resume-column + .resume-column { margin-top: 24px; }
 #contact-section .row { row-gap: 28px; }
 .contact-form-box { margin-top: 0; padding: 28px 20px; }
 #contact-form .row { row-gap: 0; }
 .contact-info-list li { margin-bottom: 24px; }
 .contact-info-list .text-box a { font-size: 16px; line-height: 1.6; }
 .footer-menu ul { gap: 8px 18px; }
 .footer-menu a { display: inline-flex; align-items: center; min-height: 44px; }
 .copy-text p { font-size: 12px; line-height: 1.9; }
 .tj-footer-area { padding-bottom: 76px; }
 .insight-page .blog-section { padding-top: 28px; }
}
@media (max-width: 575px) {
 .skills-slider { padding-left: 50px; padding-right: 50px; }
 .skills-controls button { width: 44px; height: 44px; }
 .service-modal .service_info h2.title { font-size: 25px; }
 .service-modal .popup_modal_content { padding-left: 20px; padding-right: 20px; }
 .whatsapp-float { bottom: max(16px,env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
 .tj-header-area .col-12 { gap: 8px; }
 .tj-header-area .logo-box { max-width: 100px; }
 .tj-header-area .header-button .btn { padding-left: 12px; padding-right: 12px; }
}