/* =====================================================
   HimanshuTech — Modern design layer
   Load AFTER style.css / style-responsive.css
   Palette taken from the brand flyer: orange + charcoal
   ===================================================== */

:root{
    --ht-orange: #ff5a0a;
    --ht-orange-2: #ff7a1a;
    --ht-orange-deep: #e04a00;
    --ht-ink: #12161d;
    --ht-ink-2: #1b212b;
    --ht-ink-3: #262d39;
    --ht-mist: #f5f6f8;
    --ht-line: rgba(18,22,29,.10);
    --ht-grad: linear-gradient(135deg, var(--ht-orange-2) 0%, var(--ht-orange) 55%, var(--ht-orange-deep) 100%);
    --ht-radius: 22px;
    --ht-shadow: 0 18px 50px rgba(18,22,29,.12);
    --ht-shadow-orange: 0 14px 34px rgba(255,90,10,.35);
    --color-primary-1: var(--ht-orange);
    --color-primary-1-a: var(--ht-orange-deep);
}

body{ color: var(--ht-ink); background:#fff; }
::selection{ background: var(--ht-orange); color:#fff; }

/* ---------- shared bits ---------- */
.ht-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color: var(--ht-orange);
    margin-bottom:18px;
}
.ht-eyebrow:before{ content:""; width:34px; height:3px; background:var(--ht-orange); border-radius:3px; }
.ht-title{
    font-size: clamp(32px, 4.4vw, 58px);
    font-weight:800; line-height:1.05; letter-spacing:-.035em;
    color: var(--ht-ink); margin-bottom:.4em;
}
.ht-title span{ color: var(--ht-orange); }
.ht-lead{ color:#5b6472; font-size:19px; line-height:1.65; max-width:640px; }
.ht-section{ position:relative; padding: 110px 0; }
.ht-section.alt{ background: var(--ht-mist); }
.ht-dots{
    position:absolute; width:180px; height:180px; pointer-events:none; opacity:.55;
    background-image: radial-gradient(var(--ht-orange) 1.6px, transparent 1.7px);
    background-size: 16px 16px;
}

.ht-btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 30px; border-radius:60px;
    font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    text-decoration:none !important; border:2px solid transparent;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.ht-btn-primary{ background: var(--ht-grad); color:#fff !important; box-shadow: var(--ht-shadow-orange); }
.ht-btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px rgba(255,90,10,.45); }
.ht-btn-ghost{ color:#fff !important; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); }
.ht-btn-ghost:hover{ background:#fff; color: var(--ht-ink) !important; border-color:#fff; }

/* ---------- navigation ---------- */
.main-nav.dark{ background: transparent; }
.main-nav.small-height, .main-nav.js-transparent.body-scrolled{ backdrop-filter: blur(14px); }
.main-nav.dark.small-height{ background: rgba(18,22,29,.92) !important; }
.inner-nav > ul.items-end li a{
    background: var(--ht-grad); color:#fff !important; padding:0 26px !important;
    height:44px !important; border-radius:40px; opacity:1 !important;
    display:inline-flex !important; align-items:center; box-shadow: var(--ht-shadow-orange);
}
.inner-nav > ul.items-end li a .link-hover-anim{ padding:0; font-size:14px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.inner-nav > ul > li > a.active{ color: var(--ht-orange-2) !important; }
.mn-sub{ border-radius:14px !important; background: rgba(18,22,29,.97) !important; border-top:3px solid var(--ht-orange); }

/* ---------- HERO ---------- */
.ht-hero{
    position:relative; overflow:hidden; color:#fff;
    min-height:100vh; min-height:100svh;
    display:flex; align-items:center;
    padding:130px 0 90px;
    background:
        radial-gradient(900px 500px at 8% 8%, rgba(255,90,10,.35), transparent 60%),
        linear-gradient(160deg, #12161d 0%, #1a212c 60%, #12161d 100%);
}
.ht-hero:before{ /* big orange diagonal like the flyer corner */
    content:""; position:absolute; top:-18%; left:-14%; width:46%; height:70%;
    background: var(--ht-grad); transform: rotate(-24deg);
    border-radius:0 0 60px 0; opacity:.95;
}
.ht-hero:after{ /* subtle grid */
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 75%);
}
.ht-hero .container{ position:relative; z-index:2; }
.ht-hero-kicker{
    display:inline-block; font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:#fff; margin-bottom:22px; padding:8px 18px; border-radius:40px;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
}
.ht-hero h1{
    font-size: clamp(44px, 6.4vw, 96px); font-weight:800; line-height:.98; letter-spacing:-.045em;
    color:#fff; margin-bottom:.25em; text-transform:uppercase;
}
.ht-hero h1 .accent{
    display:block; background: var(--ht-grad); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.ht-hero h1 .sub{ display:block; font-size:.42em; letter-spacing:-.02em; margin-top:.35em; color:#fff; }
.ht-hero-tag{ font-size:19px; color: rgba(255,255,255,.78); margin:26px 0 38px; max-width:520px; line-height:1.6; }
.ht-hero-tag b{ color:var(--ht-orange-2); font-weight:600; }
.ht-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* diamond collage */
.ht-collage{ position:relative; width:100%; max-width:620px; aspect-ratio:1/1; margin:0 auto; }
.ht-diamond{
    position:absolute; width:46%; aspect-ratio:1/1;
    transform: rotate(45deg); border-radius:26px; overflow:hidden;
    border:5px solid #fff; box-shadow: 0 22px 50px rgba(0,0,0,.45);
    background:#222;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.ht-diamond img{
    position:absolute; top:50%; left:50%; width:150%; height:150%;
    transform: translate(-50%,-50%) rotate(-45deg); object-fit:cover; max-width:none;
}
.ht-diamond:hover{ transform: rotate(45deg) scale(1.05); }
.ht-diamond.d1{ top:0; left:27%; border-color: var(--ht-orange); }
.ht-diamond.d2{ top:25%; left:54%; }
.ht-diamond.d3{ top:25%; left:0; }
.ht-diamond.d4{ top:50%; left:27%; border-color: var(--ht-orange); }
.ht-collage-badge{
    position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%);
    width:92px; height:92px; border-radius:50%; background:#fff; color:var(--ht-ink);
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-weight:800; font-size:12px; line-height:1.15; letter-spacing:.04em; text-transform:uppercase;
    box-shadow: 0 0 0 8px rgba(255,90,10,.9), 0 16px 40px rgba(0,0,0,.45);
}
.ht-hero-motto{
    position:absolute; right:30px; top:112px; z-index:3; text-align:left;
    font-size:13px; font-weight:800; letter-spacing:.14em; line-height:1.55; color:#fff;
}
.ht-hero-motto:after{ content:""; display:block; width:54px; height:3px; background:var(--ht-orange); margin-top:10px; }

/* feature strip under hero */
.ht-strip{ position:relative; z-index:6; margin-top:-70px; }
.ht-strip-inner{
    display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border-radius:var(--ht-radius);
    box-shadow: var(--ht-shadow); overflow:hidden;
}
.ht-strip-item{ display:flex; align-items:center; gap:20px; padding:34px 36px; position:relative; }
.ht-strip-item + .ht-strip-item:before{ content:""; position:absolute; left:0; top:24%; height:52%; width:1px; background:var(--ht-line); }
.ht-ico{
    flex:0 0 68px; width:68px; height:68px; border-radius:50%; background: var(--ht-grad);
    display:flex; align-items:center; justify-content:center; color:#fff;
    box-shadow: 0 10px 22px rgba(255,90,10,.35);
}
.ht-ico.dark{ background: var(--ht-ink); box-shadow: 0 10px 22px rgba(18,22,29,.3); }
.ht-ico svg{ width:32px; height:32px; }
.ht-strip-item h3{ font-size:16px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 4px; color:var(--ht-ink); }
.ht-strip-item p{ margin:0; font-size:14.5px; color:#667085; line-height:1.45; }

/* ---------- ABOUT ---------- */
.ht-about-img{ position:relative; padding:0 0 30px 30px; }
.ht-about-img:before{
    content:""; position:absolute; left:0; bottom:0; width:72%; height:72%;
    background: var(--ht-grad); border-radius:var(--ht-radius); z-index:0;
}
.ht-about-img img{
    position:relative; z-index:1; width:100%; border-radius:var(--ht-radius);
    clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);
    box-shadow: var(--ht-shadow);
}
.ht-about-card{
    display:flex; gap:20px; padding:26px 28px; background:#fff; border-radius:18px;
    border:1px solid var(--ht-line); margin-bottom:18px; transition:.3s;
}
.ht-about-card:hover{ transform:translateX(8px); box-shadow: var(--ht-shadow); border-color: transparent; }
.ht-about-card .ht-ico{ flex:0 0 56px; width:56px; height:56px; }
.ht-about-card h4{ font-size:20px; font-weight:800; margin:0 0 6px; }
.ht-about-card p{ margin:0; color:#5b6472; font-size:16px; line-height:1.6; }

/* stats band */
.ht-stats{ background: var(--ht-ink); color:#fff; position:relative; overflow:hidden; padding:70px 0; }
.ht-stats:before{
    content:""; position:absolute; right:-8%; top:-60%; width:38%; height:220%;
    background: var(--ht-grad); transform:rotate(24deg); opacity:.9;
}
.ht-stats .container{ position:relative; z-index:2; }
.ht-stat{ text-align:center; padding:10px 0; }
.ht-stat b{ display:block; font-size: clamp(38px,4.4vw,60px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; }
.ht-stat b em{ font-style:normal; color: var(--ht-orange-2); }
.ht-stat span{ display:block; margin-top:10px; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.7); font-weight:600; }

/* ---------- SERVICES ---------- */
.ht-svc{
    position:relative; display:block; height:100%; background:#fff; border-radius:var(--ht-radius);
    padding:34px 30px 30px; border:1px solid var(--ht-line); text-decoration:none !important; overflow:hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s;
}
.ht-svc:before{
    content:""; position:absolute; right:-60px; top:-60px; width:150px; height:150px; border-radius:50%;
    background: var(--ht-grad); opacity:.08; transition: .45s;
}
.ht-svc:hover{ transform: translateY(-10px); box-shadow: var(--ht-shadow); border-color: transparent; }
.ht-svc:hover:before{ transform: scale(3.2); opacity:.07; }
.ht-svc-num{ position:absolute; z-index:2; top:46px; left:48px; font-size:13px; font-weight:800; letter-spacing:.12em; color:#fff; background:rgba(18,22,29,.55); backdrop-filter:blur(6px); padding:5px 11px; border-radius:30px; border:1px solid rgba(255,255,255,.18); }
.ht-svc-img{
    width:100%; aspect-ratio: 4/3; margin-bottom:22px; border-radius:16px; background: var(--ht-ink);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ht-svc-img img{ width:100%; height:100%; object-fit:contain; transition: transform .5s ease; }
.ht-svc:hover .ht-svc-img img{ transform: scale(1.06); }
.ht-svc:hover .ht-svc-img{ box-shadow:0 18px 40px -18px rgba(255,90,10,.55); }
.ht-svc{ content-visibility:auto; contain-intrinsic-size:auto 480px; }
.ht-svc p{ font-size:14.5px; line-height:1.6; color:#5b6472; margin:0 0 18px; }
.ht-svc h3{ font-size:21px; font-weight:800; line-height:1.25; color:var(--ht-ink); margin:0 0 14px; letter-spacing:-.02em; }
.ht-svc .more{
    display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color: var(--ht-orange);
}
.ht-svc .more:after{ content:"→"; transition: transform .3s; }
.ht-svc:hover .more:after{ transform: translateX(6px); }

/* ---------- CTA ---------- */
.ht-cta{
    position:relative; overflow:hidden; color:#fff; padding:90px 0;
    background: linear-gradient(120deg, var(--ht-ink) 0%, var(--ht-ink-2) 100%);
}
.ht-cta:before{
    content:""; position:absolute; left:-6%; bottom:-70%; width:42%; height:220%;
    background: var(--ht-grad); transform: rotate(-24deg);
}
.ht-cta .container{ position:relative; z-index:2; }
.ht-cta h2{ font-size:clamp(28px,3.4vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:#fff; }
.ht-cta p{ color: rgba(255,255,255,.75); font-size:18px; line-height:1.7; max-width:760px; }

/* ---------- CLIENTS ---------- */
.ht-clients{ padding:70px 0; background:#fff; }
.ht-clients .logo-scroll-wrapper{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ht-clients .logo-grid-img{ filter: grayscale(1); opacity:.65; transition:.3s; }
.ht-clients .logo-grid-img:hover{ filter:none; opacity:1; }

/* ---------- PROJECTS ---------- */
.ht-projects{ background: var(--ht-ink); color:#fff; position:relative; overflow:hidden; }
.ht-projects .ht-title{ color:#fff; }
.ht-projects .ht-lead{ color: rgba(255,255,255,.7); }
.ht-projects .portfolio-4-image{ border-radius:20px; border:3px solid rgba(255,255,255,.12); transition:.4s; }
.ht-projects .portfolio-4-item > a:hover .portfolio-4-image{ border-color: var(--ht-orange); }
.ht-projects .portfolio-4-image img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.ht-projects .portfolio-4-descr{ color:#fff; font-weight:600; font-size:17px; padding-top:6px; }
.ht-projects .slider-strong .owl-prev, .ht-projects .slider-strong .owl-next{ border-color:#fff; color:#fff; }
.ht-projects .slider-strong .owl-prev:before, .ht-projects .slider-strong .owl-next:before{ background: var(--ht-orange); }

/* ---------- CONTACT ---------- */
.ht-contact{ background: var(--ht-mist); position:relative; }
.ht-contact-card{
    background: var(--ht-ink); color:#fff; border-radius:var(--ht-radius); padding:46px 40px; height:100%;
    position:relative; overflow:hidden;
}
.ht-contact-card:before{
    content:""; position:absolute; right:-30%; bottom:-30%; width:80%; height:80%;
    background: var(--ht-grad); transform: rotate(35deg); border-radius:40px; opacity:.9;
}
.ht-contact-card > *{ position:relative; z-index:2; }
.ht-contact-card h3{ color:#fff; font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.15; margin-bottom:30px; }
.ht-ci{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.ht-ci .ic{
    flex:0 0 46px; height:46px; border-radius:12px; background: var(--ht-grad);
    display:flex; align-items:center; justify-content:center; color:#fff;
}
.ht-ci .ic svg{ width:22px; height:22px; }
.ht-ci div{ font-size:16.5px; line-height:1.55; color: rgba(255,255,255,.88); }
.ht-ci a{ color:#fff; text-decoration:none; }
.ht-ci a:hover{ color: var(--ht-orange-2); }
.ht-form-box{ background:#fff; border-radius:var(--ht-radius); padding:46px 42px; box-shadow: var(--ht-shadow); height:100%; }
.ht-form-box h4{ font-size:28px; font-weight:800; letter-spacing:-.03em; margin-bottom:26px; }
.ht-form-box .form label{ font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--ht-ink); }
.ht-form-box .form input.form-control, .ht-form-box .form textarea.form-control{
    border:1.5px solid #e3e6eb; background:#fafbfc; border-radius:12px !important; font-size:16px;
}
.ht-form-box .form input.form-control:focus, .ht-form-box .form textarea.form-control:focus{
    border-color: var(--ht-orange); box-shadow: 0 0 0 4px rgba(255,90,10,.14); background:#fff;
}
.ht-form-box .btn-color{ background: var(--ht-grad); border-radius:60px !important; box-shadow: var(--ht-shadow-orange); border:none; }

/* ---------- FOOTER ---------- */
footer.footer.page-section{ background: var(--ht-ink) !important; color: rgba(255,255,255,.75); padding-top:100px; }
footer.footer .text-gray, footer.footer p, footer.footer .fw-menu li a{ color: rgba(255,255,255,.7) !important; }
footer.footer .fw-title{ color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:15px; position:relative; padding-bottom:14px; }
footer.footer .fw-title:after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; background:var(--ht-orange); }
footer.footer .fw-menu li a:hover, footer.footer .clearlinks a:hover{ color: var(--ht-orange-2) !important; }
footer.footer .clearlinks a{ color: rgba(255,255,255,.8) !important; }
footer.footer b, footer.footer a{ color:#fff; }
footer.footer img[alt="Image"]{ filter: brightness(0) invert(1); }
a.link-to-top:before{ background: var(--ht-grad) !important; }
a.link-to-top, a.link-to-top:hover{ color:#fff !important; }

/* ---------- responsive ---------- */
@media (max-width:991px){
    .ht-hero{ padding:120px 0 120px; text-align:left; }
    .ht-collage{ max-width:440px; margin-top:50px; }
    .ht-hero-motto{ display:none; }
    .ht-strip{ margin-top:-50px; }
    .ht-strip-inner{ grid-template-columns:1fr; }
    .ht-strip-item + .ht-strip-item:before{ left:8%; top:0; width:84%; height:1px; }
    .ht-section{ padding:80px 0; }
    .ht-about-img{ margin-bottom:50px; }
}
@media (max-width:575px){
    .ht-hero h1{ font-size:44px; }
    .ht-form-box, .ht-contact-card{ padding:32px 24px; }
    .ht-btn{ padding:14px 24px; }
    .ht-ico{ flex-basis:56px; width:56px; height:56px; }
    .ht-hero:before{ width:70%; }
}

/* =====================================================
   INNER PAGES (about, career, clients, ticket system)
   ===================================================== */
.ht-page-hero{
    position:relative; overflow:hidden; color:#fff; text-align:left;
    padding:170px 0 90px;
    background:
        radial-gradient(700px 380px at 90% 0%, rgba(255,90,10,.28), transparent 65%),
        linear-gradient(160deg, #12161d 0%, #1b222d 100%);
}
.ht-page-hero:before{
    content:""; position:absolute; left:-12%; top:-45%; width:38%; height:140%;
    background: var(--ht-grad); transform: rotate(-24deg); border-radius:0 0 50px 0; opacity:.95;
}
.ht-page-hero:after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image: radial-gradient(circle at 80% 50%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 70%);
}
.ht-page-hero .container{ position:relative; z-index:2; }
.ht-page-hero h1{
    font-size:clamp(34px,5vw,68px); font-weight:800; letter-spacing:-.04em; line-height:1.02;
    text-transform:uppercase; color:#fff; margin:0 0 22px; max-width:900px;
}
.ht-page-hero h1 span{ color: var(--ht-orange-2); }
.ht-crumbs{ display:inline-flex; align-items:center; gap:10px; padding:9px 20px; border-radius:40px;
    background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-size:14px; font-weight:600; letter-spacing:.05em; }
.ht-crumbs a{ color:#fff !important; text-decoration:none; opacity:.85; }
.ht-crumbs a:hover{ opacity:1; color: var(--ht-orange-2) !important; }
.ht-crumbs i{ font-style:normal; color: var(--ht-orange-2); }
.ht-crumbs b{ color: var(--ht-orange-2); font-weight:700; }

/* prose */
.ht-prose p{ color:#4a5361; font-size:18px; line-height:1.8; margin-bottom:1.3em; }
.ht-prose p:first-of-type{ font-size:20px; color: var(--ht-ink); }
.ht-prose strong{ color: var(--ht-ink); font-weight:700; }

/* chips */
.ht-chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.ht-chip{
    padding:11px 20px; border-radius:40px; background:#fff; border:1.5px solid var(--ht-line);
    font-size:15px; font-weight:600; color:var(--ht-ink); transition:.25s;
}
.ht-chip:hover{ background: var(--ht-grad); color:#fff; border-color:transparent; transform:translateY(-3px); box-shadow: var(--ht-shadow-orange); }

/* value cards */
.ht-value{
    height:100%; background:#fff; border-radius:var(--ht-radius); padding:34px 30px; border:1px solid var(--ht-line);
    transition: transform .35s, box-shadow .35s; position:relative; overflow:hidden;
}
.ht-value:hover{ transform:translateY(-8px); box-shadow: var(--ht-shadow); }
.ht-value:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:4px; background:var(--ht-grad); transition: width .4s; }
.ht-value:hover:after{ width:100%; }
.ht-value h4{ font-size:21px; font-weight:800; margin:18px 0 10px; letter-spacing:-.02em; }
.ht-value p{ color:#5b6472; margin:0; font-size:16px; line-height:1.65; }

/* side panel (about) */
.ht-side{ background: var(--ht-ink); color:#fff; border-radius:var(--ht-radius); padding:40px 34px; position:relative; overflow:hidden; }
.ht-side:before{ content:""; position:absolute; right:-35%; bottom:-30%; width:80%; height:70%; background:var(--ht-grad); transform:rotate(35deg); border-radius:40px; opacity:.9; }
.ht-side > *{ position:relative; z-index:2; }
.ht-side .num{ font-size:56px; font-weight:800; line-height:1; letter-spacing:-.04em; }
.ht-side .num em{ font-style:normal; color: var(--ht-orange-2); }
.ht-side p{ color: rgba(255,255,255,.75); margin:6px 0 26px; font-size:15px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }

/* ticket page */
.ht-ticket-img{ background:#fff; border-radius:var(--ht-radius); padding:30px; box-shadow: var(--ht-shadow); border:1px solid var(--ht-line); position:relative; }
.ht-ticket-img:before{ content:""; position:absolute; right:-14px; top:-14px; width:90px; height:90px; border-radius:20px; background:var(--ht-grad); z-index:-1; }
.ht-ticket-img img{ width:100%; height:auto; }
.ht-feat{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.ht-feat .ht-ico{ flex:0 0 44px; width:44px; height:44px; }
.ht-feat .ht-ico svg{ width:22px; height:22px; }
.ht-feat div{ font-size:16.5px; color:#3d4553; line-height:1.55; padding-top:2px; }

/* career */
.ht-job{
    height:100%; background:#fff; border-radius:var(--ht-radius); padding:34px 34px 30px;
    border:1px solid var(--ht-line); position:relative; overflow:hidden; transition: transform .35s, box-shadow .35s;
}
.ht-job:before{ content:""; position:absolute; left:0; top:0; width:6px; height:100%; background:var(--ht-grad); }
.ht-job:hover{ transform:translateY(-8px); box-shadow: var(--ht-shadow); }
.ht-job h3{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0 0 18px; color:var(--ht-ink); }
.ht-job dl{ margin:0 0 24px; }
.ht-job .row-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed var(--ht-line); font-size:16px; }
.ht-job .row-item:last-child{ border-bottom:none; }
.ht-job .row-item span{ flex:0 0 120px; color: var(--ht-orange); font-weight:700; text-transform:uppercase; font-size:12.5px; letter-spacing:.1em; padding-top:3px; }
.ht-job .row-item p{ margin:0; color:#3d4553; line-height:1.55; }
.ht-empty{ text-align:center; padding:60px 20px; border:2px dashed var(--ht-line); border-radius:var(--ht-radius); color:#667085; font-size:18px; }
.ht-modal .modal-content{ border:none; border-radius:var(--ht-radius); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.ht-modal .modal-header{ background: var(--ht-ink); color:#fff; border:none; padding:22px 28px; }
.ht-modal .modal-title{ font-weight:800; letter-spacing:-.02em; }
.ht-modal .btn-close{ filter: invert(1); opacity:.9; }
.ht-modal .modal-body{ padding:28px; }
.ht-modal .form-label{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.ht-modal .form-control{ border:1.5px solid #e3e6eb; border-radius:12px; padding:12px 16px; background:#fafbfc; }
.ht-modal .form-control:focus{ border-color:var(--ht-orange); box-shadow:0 0 0 4px rgba(255,90,10,.14); background:#fff; }
.ht-modal .modal-footer{ border:none; padding:0 28px 28px; }

/* clients grid */
.ht-client-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:22px; }
.ht-client-card{
    background:#fff; border:1px solid var(--ht-line); border-radius:20px; height:140px;
    display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.ht-client-card:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:4px; background:var(--ht-grad); transition:width .4s; }
.ht-client-card:hover{ transform:translateY(-6px); box-shadow: var(--ht-shadow); border-color:transparent; }
.ht-client-card:hover:after{ width:100%; }
.ht-client-card img{ max-width:100%; max-height:70px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.75; transition:.3s; margin:0; mix-blend-mode:multiply; }
.ht-client-card:hover img{ filter:none; opacity:1; }

@media (max-width:991px){
    .ht-page-hero{ padding:140px 0 70px; }
    .ht-job .row-item{ flex-direction:column; gap:2px; }
}

/* =====================================================
   FLOATING GLASS NAV  (fixes logo vs orange background)
   Dark pill + always-white logo so the orange "H" icon
   never blends into the orange hero shapes.
   ===================================================== */
:root{ --menu-bar-height: 76px; --menu-bar-height-scrolled: 66px; }

.main-nav,
.main-nav.transparent,
.main-nav.dark,
.main-nav.dark.transparent{
    top:14px !important; left:20px !important;
    width:calc(100% - 40px) !important;
    border-radius:60px !important;
    background: rgba(18,22,29,.80) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 16px 44px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.09) !important;
}
.main-nav:before{ /* thin orange glow line along the bottom edge */
    content:""; position:absolute; left:12%; right:12%; bottom:-1px; height:2px; border-radius:2px;
    background: linear-gradient(90deg, transparent, var(--ht-orange), transparent); opacity:.85; pointer-events:none;
}
.main-nav .main-nav-sub{ padding:0 10px 0 14px; }
.main-nav .nav-logo-wrap{ left:14px; }
.main-nav .nav-logo-wrap .logo{ height:var(--menu-bar-height); }
.main-nav.small-height .nav-logo-wrap .logo{ height:var(--menu-bar-height-scrolled); }

/* logo: always the white-text version, with a soft orange glow */
.main-nav .logo-dark{ display:none !important; }
.main-nav .logo-white{ display:block !important; }
.main-nav .nav-logo-wrap .logo img{
    max-height:46px; width:auto;
    filter: drop-shadow(0 0 12px rgba(255,122,26,.45));
}

/* links always light, whatever state the template JS puts the bar in */
.main-nav .inner-nav > ul > li > a,
.main-nav .inner-nav > ul > li > a .mi-chevron-down{ color:#fff !important; }
.main-nav .inner-nav > ul > li > a{ opacity:.82; }
.main-nav .inner-nav > ul > li > a:hover{ opacity:1; color:var(--ht-orange-2) !important; }
.main-nav .inner-nav > ul > li > a.active{ opacity:1; color:var(--ht-orange-2) !important; }
.main-nav .mobile-nav-icon,
.main-nav .mobile-nav-icon:before,
.main-nav .mobile-nav-icon:after{ background:#fff !important; }
.main-nav .mobile-nav.active .mobile-nav-icon{ background:transparent !important; }
.main-nav .inner-nav > ul.items-end{ right:6px; }

/* phones/tablets: shorter, less round so the dropdown fits nicely */
@media (max-width:991px){
    .main-nav, .main-nav.transparent, .main-nav.dark, .main-nav.dark.transparent{
        border-radius:26px !important; top:10px !important; left:12px !important; width:calc(100% - 24px) !important;
    }
    .main-nav.mobile-on .desktop-nav{ border-radius:0 0 26px 26px; overflow:hidden; top:calc(100% + 8px); }
    .main-nav.mobile-on .desktop-nav ul{ background:rgba(18,22,29,.98) !important; border-radius:22px; }
    .main-nav .nav-logo-wrap .logo img{ max-height:40px; }
}

/* the earlier "Contact Us" nav button: keep it orange on the dark pill */
.main-nav .inner-nav > ul.items-end li a{ color:#fff !important; opacity:1 !important; }

/* contact page quick-action strip */
a.ht-quick{ text-decoration:none !important; color:inherit; transition: background .3s, transform .3s; }
a.ht-quick:hover{ background: var(--ht-mist); }
a.ht-quick:hover .ht-ico{ transform: scale(1.08) rotate(-4deg); }
a.ht-quick .ht-ico{ transition: transform .3s; }
a.ht-quick p{ color:#667085; }

/* =====================================================
   v4 — layout corrections
   1) Orange corner shape no longer sits behind headlines
   2) Subtle motion on the hero collage
   ===================================================== */

/* corner shape (like the flyer): small trapezoid top-left, never behind text */
.ht-hero:before{
    top:0; left:0; width:min(44%, 640px); height:clamp(150px, 23vh, 230px);
    transform:none; border-radius:0;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
    opacity:1;
}
.ht-page-hero:before{
    top:0; left:0; width:min(42%, 600px); height:150px;
    transform:none; border-radius:0;
    clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
}
.ht-hero .container, .ht-page-hero .container{ z-index:3; }

/* thin orange accent line following the corner shape */
.ht-hero .ht-corner-line, .ht-page-hero .ht-corner-line{ display:none; }

/* make sure headline accent stays readable on any background */
.ht-hero h1 .accent{ filter: drop-shadow(0 6px 24px rgba(255,90,10,.25)); }

/* gentle floating motion on the collage */
@keyframes htFloat{
    0%,100%{ transform: rotate(45deg) translate(0,0); }
    50%{ transform: rotate(45deg) translate(-6px,-12px); }
}
@keyframes htPulse{
    0%{ box-shadow: 0 0 0 8px rgba(255,90,10,.9), 0 0 0 8px rgba(255,90,10,.5), 0 16px 40px rgba(0,0,0,.45); }
    70%{ box-shadow: 0 0 0 8px rgba(255,90,10,.9), 0 0 0 26px rgba(255,90,10,0), 0 16px 40px rgba(0,0,0,.45); }
    100%{ box-shadow: 0 0 0 8px rgba(255,90,10,.9), 0 0 0 26px rgba(255,90,10,0), 0 16px 40px rgba(0,0,0,.45); }
}
.ht-diamond{ animation: htFloat 7s ease-in-out infinite; }
.ht-diamond.d2{ animation-delay:-1.5s; }
.ht-diamond.d3{ animation-delay:-3s; }
.ht-diamond.d4{ animation-delay:-4.5s; }
.ht-diamond:hover{ animation-play-state:paused; }
.ht-collage-badge{ animation: htPulse 2.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce){
    .ht-diamond, .ht-collage-badge{ animation:none; }
}

/* contact page: strip overlaps hero cleanly on every width */
.ht-page-hero + .ht-strip{ margin-top:-46px; }
.ht-page-hero{ padding-bottom:110px; }
@media (max-width:991px){
    .ht-hero:before{ width:70%; height:130px; }
    .ht-page-hero:before{ width:66%; height:120px; }
    .ht-page-hero{ padding-top:150px; padding-bottom:90px; }
}

/* v5 — service illustration cards */
.ht-svc-img{ position:relative; z-index:1; }

/* v5 — service detail + listing pages */
.ht-hero-tag{ color:rgba(255,255,255,.8); font-size:19px; margin:-6px 0 22px; letter-spacing:.02em; }
.ht-media{ position:relative; background:#fff; border-radius:var(--ht-radius); padding:14px; box-shadow:var(--ht-shadow); border:1px solid var(--ht-line); }
.ht-media:before{ content:""; position:absolute; right:-14px; top:-14px; width:90px; height:90px; border-radius:20px; background:var(--ht-grad); z-index:-1; }
.ht-media img{ width:100%; height:auto; display:block; border-radius:calc(var(--ht-radius) - 8px); }
.ht-link-card{
    display:flex; flex-direction:column; height:100%; background:#fff; border-radius:var(--ht-radius); overflow:hidden;
    border:1px solid var(--ht-line); text-decoration:none !important; transition:transform .35s, box-shadow .35s, border-color .35s;
}
.ht-link-card:hover{ transform:translateY(-10px); box-shadow:var(--ht-shadow); border-color:transparent; }
.ht-lc-img{ position:relative; aspect-ratio:16/10; background:var(--ht-mist); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ht-lc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.ht-link-card:hover .ht-lc-img img{ transform:scale(1.07); }
.ht-lc-img .ht-svc-num{ top:14px; left:14px; }
.ht-lc-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.ht-lc-body h3{ font-size:20px; font-weight:800; line-height:1.3; color:var(--ht-ink); margin:0 0 10px; letter-spacing:-.02em; }
.ht-lc-body p{ font-size:15px; line-height:1.65; color:#5b6472; margin:0 0 18px; flex:1; }
.ht-lc-body .more{ display:inline-flex; gap:8px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ht-orange); }
.ht-lc-body .more:after{ content:"→"; transition:transform .3s; }
.ht-link-card:hover .more:after{ transform:translateX(6px); }

/* v5 — animated technical illustrations inside the hero diamonds */
.ht-art{ position:absolute; top:50%; left:50%; width:150%; height:150%; max-width:none; transform:translate(-50%,-50%) rotate(-45deg); display:block; }
.ht-art .bar{ transform-box:fill-box; transform-origin:50% 100%; animation:htBar 4s ease-in-out infinite; }
@keyframes htBar{ 0%{transform:scaleY(.15)} 40%,78%{transform:scaleY(1)} 100%{transform:scaleY(.15)} }
.ht-art .trend{ stroke-dasharray:240; animation:htDraw 4s ease-in-out infinite; }
@keyframes htDraw{ 0%,12%{stroke-dashoffset:240} 45%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:-240} }
.ht-art .ping{ transform-box:fill-box; transform-origin:center; animation:htArtPing 2.4s ease-out infinite; }
@keyframes htArtPing{ 0%{transform:scale(.25);opacity:.95} 100%{transform:scale(1);opacity:0} }
.ht-art .drift{ animation:htDrift 4s ease-in-out infinite; }
@keyframes htDrift{ 0%,100%{transform:translateY(0);opacity:.2} 50%{transform:translateY(-14px);opacity:1} }
.ht-art .sweep{ transform-origin:150px 150px; animation:htSpin 4s linear infinite; }
@keyframes htSpin{ to{transform:rotate(360deg)} }
.ht-art .blip{ animation:htBlip 4s ease-in-out infinite; }
@keyframes htBlip{ 0%,100%{opacity:.15} 15%{opacity:1} 45%{opacity:.15} }
.ht-art .win{ animation:htWin 3s steps(1) infinite; }
@keyframes htWin{ 0%{opacity:1} 40%{opacity:.2} 65%{opacity:1} 85%{opacity:.35} }
.ht-art .flame{ transform-box:fill-box; transform-origin:50% 100%; animation:htFlame 1.1s ease-in-out infinite alternate; }
@keyframes htFlame{ from{transform:scale(1,.9)} to{transform:scale(1.12,1.1)} }
.ht-art .flow{ stroke-dasharray:4 6; animation:htFlow 1.2s linear infinite; }
@keyframes htFlow{ to{stroke-dashoffset:-20} }
.ht-art .mer{ transform-box:fill-box; transform-origin:center; animation:htMer 6s linear infinite; }
@keyframes htMer{ 0%{transform:scaleX(1)} 50%{transform:scaleX(.02)} 100%{transform:scaleX(1)} }
.ht-art .pk, .ht-art .sat{ offset-rotate:0deg; animation:htTravel 2.7s linear infinite; }
.ht-art .sat{ animation-duration:7s; }
@keyframes htTravel{ from{offset-distance:0%} to{offset-distance:100%} }
@media (prefers-reduced-motion: reduce){ .ht-art *{ animation:none !important; } }