/* =========================================================================
   Hitech revamp 2026 - home page (home.blade.php): the hero slider, the
   About block with the team, the project slider, and the seams between them
   and the revamped bands (services, numbers, testimonials, blog strip).
   Loaded by home.blade.php (@section('styles')) after hitech.css, hitech-ui.css
   and hitech-chrome.css. Plain CSS, no build step. Motion: hitech-home.js.
   Same language as the rest of the revamp: wide Archivo, outlined CMS lines,
   white rules that draw in, Signal blue #4361FF only where you can act.
   Start states only apply under html.ht-motion (motion allowed, hitech.js
   running); without JavaScript and with reduced motion everything is still.
   ========================================================================= */

/* Arrival animations that start by themselves wait for the loading screen to lift
   (the stage, html.ht-stage), the same rule as hitech.css. */
.ht-motion:not(.ht-stage) :is(.ht-hero__img, .ht-hero__scroll, .ht-hero__scroll-line i, .ht-hero__controls) {
  animation-play-state: paused;
}

/* =========================================================================
   Hero (the theme's slider, owl carousel .slider-venor)
   ========================================================================= */
.ht-hero {
  position: relative;
  isolation: isolate;
  background: #000;
  color: #fff;
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-hero :focus-visible { outline: 2px solid var(--ht-signal); outline-offset: 4px; }
.ht-hero :focus:not(:focus-visible) { outline: none; }

/* One slide: full screen, the text in the theme's container, clear of the header and the
   social row / scroll cue at the bottom. */
.ht-hero .ht-hero__slide {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: auto;
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  padding: clamp(7.5rem, 15vh, 10rem) 0 clamp(7rem, 14vh, 9rem);
  background: #000;
}
.ht-hero .ht-hero__slide > .container { position: relative; z-index: 1; }
/* The text block shows once hitech.js has measured the title with Archivo (.is-armed: as soon as the
   font is in, at most ~0.9 s): if the font arrives after the first paint, the text would re-wrap and,
   centred in the slide, the block would jump - a layout shift Chrome counts even under the loading
   screen. A font later than that meets the title's stand-in face below ("Ht Hero Fallback"), which
   breaks the lines like Archivo. Never held longer (e.g. until the stage): the intro is the phones'
   largest paint (LCP). Without motion (reduced motion, no JavaScript, a script error) .ht-motion is
   gone and the text shows at once; like hitech.css's "[data-ht-split]:not(.is-armed)". */
.ht-motion .ht-hero__slide:not(:has(.ht-hero__title.is-armed)) > .container { visibility: hidden; }

/* Art: the slide's picture on its own layer, so it can drift and settle without moving the text.
   A scrim keeps white text readable on any picture; a soft white light follows the mouse. */
.ht-hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ht-hero__img {
  position: absolute;
  inset: -3%;
  background-color: #000;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(calc(var(--ht-px, 0) * -14px), calc(var(--ht-py, 0) * -10px), 0);
  transition: transform 1.4s var(--ht-ease-out);
}
.ht-hero__art::before { /* light under the mouse: colours brighten, black stays black */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(36rem circle at var(--mx, 70%) var(--my, 40%), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 64%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .8s var(--ht-ease-out);
}
.ht-hero.is-pointer .ht-hero__art::before { opacity: 1; }
.ht-hero__art::after { /* scrim */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 30%);
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ht-hero__img { background-position: 72% 50%; } /* portrait tablets see the coloured part of the art */
}
@media (max-width: 767.98px) {
  .ht-hero__img { background-position: 50% 100%; }
  .ht-hero__art::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .7) 100%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-hero__img { animation: ht-hero-art-in 2.6s var(--ht-ease-out) both; }
  .ht-motion .ht-hero__slide.is-entering .ht-hero__img { animation-name: ht-hero-art-next; }
}
@keyframes ht-hero-art-in {
  from { opacity: 0; scale: 1.14; }
  to { opacity: 1; scale: 1; }
}
@keyframes ht-hero-art-next { /* same, under another name so it plays again for a new slide */
  from { opacity: 0; scale: 1.08; }
  to { opacity: 1; scale: 1; }
}

/* Title: the slide's two CMS lines in wide Archivo, the second one outlined (the theme's "Say no more."). */
/* Stand-in while Archivo is still on its way (slow connections: later than hitech.js's ~0.9 s wait, so
   the text is shown before the font). The usual fallbacks are about a quarter narrower than wide
   Archivo: the title lost one or two lines and the whole hero text jumped when Archivo swapped in.
   Verdana Bold (Windows, macOS, iOS) scaled to Archivo's wide width and given Archivo's ascent and
   descent breaks the lines in the same places, so nothing moves at the swap. 109% matched the current
   title's line breaks at every common window size from 320 to 2560 px. Latin letters only (other scripts
   keep the site's fallbacks); devices without Verdana (Android) use the usual fallbacks. */
@font-face {
  font-family: "Ht Hero Fallback";
  src: local("Verdana Bold"), local("Verdana-Bold");
  font-style: normal;
  font-weight: 100 900;
  font-display: fallback; /* waits at most ~0.1 s for this local face (a few ms), never hides the title longer */
  size-adjust: 109%;
  ascent-override: 80.55%; /* Archivo .878 / 1.09 */
  descent-override: 19.27%; /* Archivo .210 / 1.09 */
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.ht-hero__title {
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-family: "Archivo", "Ht Hero Fallback", var(--ht-font);
  font-size: min(var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem)), 12.6vh);
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.ht-hero__outline { /* the CMS second line: outlined, on its own line */
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .9);
}
@media (max-width: 767.98px) {
  .ht-hero__title br { display: none; } /* the words wrap by themselves on phones */
  .ht-hero__outline { -webkit-text-stroke-width: 1.2px; }
}
/* The endless bits of the hero (outline glow, scroll cue light) rest while it is off screen or the
   tab is hidden: hitech-home.js sets .is-paused, and every loop reads its play state from this
   variable (an "animation" shorthand would otherwise reset a separate play-state rule). */
.ht-hero.is-paused { --ht-hero-play: paused; }
/* The outline glows softly once it has landed (a light halo breathes around the strokes). */
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-hero__title.is-done .ht-hero__outline {
    animation: ht-hero-glow 4.8s ease-in-out .6s infinite;
    animation-play-state: var(--ht-hero-play, running);
  }
}
@keyframes ht-hero-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 255, 255, .5)); }
}
/* Leaving slide (2+ slides): its words drop out before the next slide's words rise. */
.ht-motion .ht-hero__slide.is-leaving .ht-hero__title .ht-w__i,
.ht-motion .ht-hero__slide.is-leaving .ht-hero__intro {
  opacity: 0;
  transform: translate3d(0, -30%, 0);
  transition: opacity .35s ease, transform .5s var(--ht-ease-out);
}

/* Text under the title: "Are you looking for <rotating word>", then the slide's bold line,
   then the rest. Words light up after the title (hitech.js data-ht-lightup). */
.ht-hero__intro {
  max-width: 41rem;
  margin-top: clamp(1.5rem, 3.6vh, 2.5rem);
  color: var(--ht-text);
  font-family: var(--ht-font);
  font-size: min(var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem)), 2.3vh + .5rem);
  font-weight: 400;
  line-height: 1.6;
}
.ht-hero__intro p { margin: 0; font: inherit; color: inherit; max-width: none; }
.ht-hero__intro strong { /* the slide's bold sentence: its own line */
  display: block;
  margin: .2rem 0 .1rem;
  color: #fff;
  font-weight: 600;
}
.ht-hero__intro .mt_typed-beforetext { color: #fff; }
@media (max-width: 767.98px) {
  .ht-hero__intro { font-size: 1rem; line-height: 1.62; }
}

/* Rotating word: every word sits in the same place (the widest one sets the width, so the line
   never moves); the current word narrows and lifts away while the next rises and widens. */
.ht-rot {
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 650;
  font-stretch: var(--ht-semi);
  white-space: nowrap;
  vertical-align: baseline;
}
.ht-rot__box {
  position: relative;
  display: inline-grid;
  padding-bottom: .12em;
  clip-path: inset(-.2em -.6em -.08em -.2em);
}
.ht-rot__size { display: inline-grid; visibility: hidden; }
.ht-rot__size > span { grid-area: 1 / 1; }
.ht-rot__w {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  font-stretch: 70%;
}
.ht-rot__w::after { /* a white rule draws in under the current word */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.02em;
  height: 2px;
  background: rgba(255, 255, 255, .55);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.ht-rot__w.is-on {
  opacity: 1;
  transform: none;
  font-stretch: var(--ht-semi);
  transition:
    opacity .5s ease .12s,
    transform .9s var(--ht-ease-out) .12s,
    font-stretch 1.1s var(--ht-ease-out) .2s;
}
.ht-rot__w.is-on::after {
  transform: scaleX(1);
  transition: transform .9s var(--ht-ease-out) .55s;
}
.ht-rot__w.is-out {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  font-stretch: 70%;
  transition:
    opacity .35s ease,
    transform .6s var(--ht-ease-inout),
    font-stretch .6s var(--ht-ease-inout);
}
.ht-rot__w.is-out::after { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s ease; }
.rtl .ht-rot__w { left: auto; right: 0; }
.rtl .ht-rot__w::after { transform-origin: 100% 50%; }
/* While the text is still dim (before it lights up), so is the word. */
.ht-motion .ht-hero__intro:not(.is-in) .ht-rot { opacity: .16; }
.ht-motion .ht-hero__intro.is-in .ht-rot {
  opacity: 1;
  transition: opacity .9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 56ms);
}

.ht-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1.75rem, 3.6vh, 2.5rem);
}

/* Social links (Header & Footer): rings at the bottom left, as in the theme. On hover / keyboard
   focus they fill Signal blue and glow (they are links). Hidden on phones, as in the theme. */
.ht-hero .ht-hero__social {
  position: absolute;
  left: 50px;
  right: auto;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 3;
}
.rtl .ht-hero .ht-hero__social { left: auto; right: 50px; }
.ht-hero__social ul {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ht-hero__social ul li { display: block; margin: 0; }
.ht-hero__social ul li a {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(0, 0, 0, .18);
  color: #fff;
  font-size: 14px;
  transition: background-color .35s var(--ht-ease-out), border-color .35s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out), color .35s;
}
.ht-hero__social ul li a em {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
  transition: transform .45s var(--ht-ease-out);
}
/* A touch screen keeps :hover on a tapped link (until the next tap elsewhere), so the Signal look is
   for mouse and trackpad only; a tapped ring keeps its resting look (not the theme's white hover). */
.ht-hero__social ul li a:hover {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(0, 0, 0, .18);
  color: #fff;
}
.ht-hero__social ul li a:hover em {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
.ht-hero__social ul li a:focus-visible {
  border-color: var(--ht-signal);
  background: var(--ht-signal);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(67, 97, 255, .18), 0 8px 24px rgba(67, 97, 255, .45);
}
.ht-hero__social ul li a:focus-visible em { transform: scale(1.12); }
@media (hover: hover) {
  .ht-hero__social ul li a:hover {
    border-color: var(--ht-signal);
    background: var(--ht-signal);
    box-shadow: 0 0 0 6px rgba(67, 97, 255, .18), 0 8px 24px rgba(67, 97, 255, .45);
  }
  .ht-hero__social ul li a:hover em { transform: scale(1.12); }
}
.ht-hero__social ul li a:focus-visible { outline: 2px solid var(--ht-signal); outline-offset: 3px; }
@media (max-width: 767.98px) {
  .ht-hero .ht-hero__social { display: none; }
}

/* Scroll cue: a link to the next section (the About block). A light runs down the line. */
.ht-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.2vh, 2.25rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: .75rem .7rem .45rem;
  border-radius: 999px; /* the focus ring is a pill, like the site's buttons */
  color: var(--ht-mist);
  font: 600 .75rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  letter-spacing: .02em;
  text-decoration: none;
  transform: translateX(-50%);
  transition: color .35s var(--ht-ease-out);
}
.ht-hero__scroll:hover { color: var(--ht-mist); text-decoration: none; } /* touch: no sticky (or Bootstrap blue) hover */
.ht-hero__scroll:focus-visible { color: #fff; text-decoration: none; }
.ht-hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(2.5rem, 6vh, 3.5rem);
  overflow: hidden;
  background: rgba(255, 255, 255, .22);
}
.ht-hero__scroll-line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 70%, rgba(255, 255, 255, 0));
  transform: translate3d(0, -100%, 0);
}
.ht-hero__scroll:focus-visible .ht-hero__scroll-line { background: rgba(255, 255, 255, .45); }
@media (hover: hover) {
  .ht-hero__scroll:hover { color: #fff; }
  .ht-hero__scroll:hover .ht-hero__scroll-line { background: rgba(255, 255, 255, .45); }
}
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-hero__scroll { animation: ht-hero-cue-in 1s var(--ht-ease-out) 1.9s both; }
  .ht-motion .ht-hero__scroll-line i {
    animation: ht-hero-cue 2.6s var(--ht-ease-inout) 2.4s infinite;
    animation-play-state: var(--ht-hero-play, running);
  }
}
@keyframes ht-hero-cue-in {
  from { opacity: 0; translate: 0 -.75rem; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ht-hero-cue {
  0% { transform: translate3d(0, -100%, 0); }
  70%, 100% { transform: translate3d(0, 100%, 0); }
}
/* Phones and portrait tablets: the line alone (clear of the social row, which ends close to the
   middle at 768-991 px), still a comfortable 44 px target. */
@media (max-width: 991.98px) {
  .ht-hero__scroll { justify-content: center; min-width: 44px; min-height: 44px; }
  .ht-hero__scroll-text { display: none; }
}
/* Small phones with two or more slides: the slide controls take the bottom row (the cue would sit on
   their "next" arrow, and the floating buttons hold the right corner). */
@media (max-width: 575.98px) {
  .ht-hero__controls:not([hidden]) ~ .ht-hero__scroll { display: none; }
}

/* Slide controls (only with two or more slides): arrows and a counter, on every width. At the
   right edge, half way down (where the theme had its arrows), clear of the floating buttons;
   on phones at the bottom left (the social row is hidden there). */
.ht-hero__controls {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 3vw, 3rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .4rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: #0a0a0e;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
  transform: translateY(-50%);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ht-hero__controls {
    background: rgba(8, 8, 12, .62);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
  }
}
.ht-hero__controls[hidden] { display: none; } /* until the slider runs (hitech-home.js): no dead arrows without it */
.ht-hero__controls .ht-hero__btn { width: 44px; height: 44px; }
/* They rise in after the title and before the scroll cue (held under the loading screen, see the top). */
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-hero__controls { animation: ht-hero-ctl-in 1s var(--ht-ease-out) 1.2s both; }
}
@keyframes ht-hero-ctl-in { /* "translate" adds to the controls' own centring transform */
  from { opacity: 0; translate: 0 1rem; }
  to { opacity: 1; translate: 0 0; }
}
.rtl .ht-hero__controls { right: auto; left: clamp(1rem, 3vw, 3rem); }
@media (max-width: 767.98px) {
  .ht-hero__controls,
  .rtl .ht-hero__controls {
    top: auto;
    right: auto;
    bottom: clamp(1.25rem, 3vh, 2rem);
    left: 15px;
    flex-direction: row;
    transform: none;
  }
  .rtl .ht-hero__controls { right: 15px; left: auto; }
}
.ht-hero__count {
  margin: 0;
  color: var(--ht-mist);
  font: 600 .875rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  font-variant-numeric: tabular-nums;
}
.ht-hero__count span { color: #fff; }
.ht-hero__btn,
.ht-homework__btn {
  --ht-dir: 1; /* the way the arrow points on screen: 1 = right, -1 = left */
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out), color .3s, scale .3s var(--ht-ease-out);
}
/* The glyph is turned with "rotate"; its hover nudge uses "translate", which works in screen space
   (outside the rotation), so every arrow nudges the way it points, also in RTL. */
.ht-hero__btn svg,
.ht-homework__btn svg {
  fill: currentColor;
  translate: calc(var(--ht-nudge, 0px) * var(--ht-dir, 1)) 0;
  transition: translate .35s var(--ht-ease-out), opacity .3s;
}
.ht-hero__btn[data-ht-hero-prev] svg,
.ht-homework__btn--prev svg { rotate: 180deg; }
.rtl .ht-hero__btn svg,
.rtl .ht-homework__btn svg { rotate: 180deg; }
.rtl .ht-hero__btn[data-ht-hero-prev] svg,
.rtl .ht-homework__btn--prev svg { rotate: 0deg; }
.ht-hero__btn[data-ht-hero-prev],
.ht-homework__btn--prev { --ht-dir: -1; }
.rtl .ht-hero__btn,
.rtl .ht-homework__btn { --ht-dir: -1; }
.rtl .ht-hero__btn[data-ht-hero-prev],
.rtl .ht-homework__btn.ht-homework__btn--prev { --ht-dir: 1; }
/* Keyboard focus, and hover with a mouse or trackpad: Signal fill, glow, the arrow nudges. (A touch
   screen keeps :hover on a tapped button until the next tap elsewhere: no hover look there.) */
.ht-hero__btn:focus-visible,
.ht-homework__btn:focus-visible {
  --ht-nudge: 3px;
  border-color: var(--ht-signal);
  background: var(--ht-signal);
  box-shadow: 0 0 0 6px rgba(67, 97, 255, .18), 0 10px 30px rgba(67, 97, 255, .35);
}
@media (hover: hover) {
  .ht-hero__btn:hover,
  .ht-homework__btn:hover {
    --ht-nudge: 3px;
    border-color: var(--ht-signal);
    background: var(--ht-signal);
    box-shadow: 0 0 0 6px rgba(67, 97, 255, .18), 0 10px 30px rgba(67, 97, 255, .35);
  }
}
/* A press (finger or mouse): the button flashes Signal and gives way a little, then lets go. */
.ht-hero__btn:active,
.ht-homework__btn:active:not([aria-disabled="true"]) {
  border-color: var(--ht-signal);
  background: var(--ht-signal);
}
@media (prefers-reduced-motion: no-preference) {
  .ht-hero__btn:active,
  .ht-homework__btn:active:not([aria-disabled="true"]) { scale: .93; }
}
/* Keyboard: one 2px Signal ring with a black gap (no outline on top of it). */
.ht-hero .ht-hero__btn:focus-visible,
.ht-homework .ht-homework__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ht-signal), 0 10px 30px rgba(67, 97, 255, .35);
}
/* At either end of the row the arrow dims; the button keeps its place and, when focused, its ring. */
.ht-homework__btn[aria-disabled="true"] {
  --ht-nudge: 0px;
  border-color: var(--ht-line);
  background: transparent;
  box-shadow: none;
  cursor: default;
}
.ht-homework__btn[aria-disabled="true"] svg { opacity: .3; }
.ht-homework .ht-homework__btn[aria-disabled="true"]:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ht-signal); }

/* Hero depth while scrolling away: the text lifts and fades, the art sinks a little. The timeline
   is named on the section (the slider's overflow:hidden stage would break view()). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ht-hero { view-timeline: --ht-hero block; }
    .ht-hero__content {
      animation: ht-hero-depth linear both;
      animation-timeline: --ht-hero;
      animation-range: exit 0% exit 100%;
    }
    .ht-hero__art {
      animation: ht-hero-sink linear both;
      animation-timeline: --ht-hero;
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes ht-hero-depth {
  to { translate: 0 -14vh; opacity: .2; }
}
@keyframes ht-hero-sink {
  to { translate: 0 22vh; }
}

/* =========================================================================
   About block: a white band (light-section), like the theme's.
   ========================================================================= */
.ht-homeabout {
  --ht-l-ink: #0b0b10;
  --ht-l-mist: #5b606d;                    /* 6.3:1 on white */
  --ht-l-text: #3d414b;
  --ht-l-line: rgba(11, 11, 16, .12);
  --ht-l-line-strong: rgba(11, 11, 16, .24);
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) 0;
  overflow-x: clip; /* safety net: nothing in the band may widen the page */
  background: #fff;
  color: var(--ht-l-ink);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-homeabout :focus-visible { outline: 2px solid var(--ht-signal); outline-offset: 3px; }
.ht-homeabout :focus:not(:focus-visible) { outline: none; }

.ht-homeabout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3.5rem, 7vw, 6rem);
}
@media (min-width: 992px) {
  .ht-homeabout__grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-areas: "media body";
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .ht-homeabout__media { grid-area: media; }
  .ht-homeabout__body { grid-area: body; }
}

/* Kickers: the shared .ht-kicker / .ht-kicker--light (hitech.css); the rule draws in with the reveal. */

.ht-homeabout__title {
  margin: 0;
  color: var(--ht-l-ink);
  font-family: var(--ht-font);
  font-size: var(--ht-h2-l, clamp(2rem, 1.2rem + 2.6vw, 3.5rem));
  font-weight: 740;
  font-stretch: var(--ht-wide);
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ht-homeabout__title > span:not(.ht-w) { /* CMS "<span>" = an outlined second line */
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ht-l-ink);
}
@media (max-width: 991.98px) {
  .ht-homeabout__title { font-size: var(--ht-h2-xl, clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem)); }
}
@media (max-width: 575.98px) {
  .ht-homeabout__title { font-size: clamp(2.125rem, 1.2rem + 4.2vw, 2.5rem); }
  .ht-homeabout__title > span:not(.ht-w) { -webkit-text-stroke-width: 1.2px; }
}

/* CMS text: the paragraph rises, then the list items one by one (data-ht-auto="items"). */
.ht-homeabout__text { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.ht-homeabout__text p {
  margin: 0 0 1.5rem;
  color: var(--ht-l-text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
}
.ht-homeabout__text p strong { color: var(--ht-l-ink); font-weight: 600; }
.ht-homeabout__text a {
  color: var(--ht-l-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 11, 16, .35);
  text-underline-offset: 3px;
  transition: color .3s var(--ht-ease-out), text-decoration-color .3s var(--ht-ease-out);
}
.ht-homeabout__text a:hover,
.ht-homeabout__text a:focus-visible {
  color: var(--ht-signal);
  text-decoration-color: var(--ht-signal);
}
.ht-homeabout__text ul,
.ht-homeabout__text ol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) and (max-width: 991.98px), (min-width: 1200px) {
  /* two columns where the text column is wide enough (one column beside the team at 992-1199) */
  .ht-homeabout__text ul,
  .ht-homeabout__text ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ht-homeabout__text li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 1.4rem;
  color: var(--ht-l-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.35;
}
.ht-homeabout__text li::before { /* rule that draws in */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--ht-l-line-strong);
  transform-origin: 0 50%;
}
.ht-homeabout__text li::after { /* small outlined diamond, fills once the item is in */
  content: "";
  position: absolute;
  left: .1rem;
  top: calc(1rem + .43em);
  width: .5rem;
  height: .5rem;
  border: 1.5px solid var(--ht-l-ink);
  border-radius: 2px;
  rotate: 45deg;
  transition: background-color .6s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 500ms);
}
.ht-homeabout__text li.is-in::after,
html:not(.ht-motion) .ht-homeabout__text li::after { background: var(--ht-l-ink); }
.rtl .ht-homeabout__text li { padding: 1rem 1.4rem 1rem 0; }
.rtl .ht-homeabout__text li::after { left: auto; right: .1rem; }
.rtl .ht-homeabout__text li::before { transform-origin: 100% 50%; }
.ht-motion .ht-homeabout__text li:not(.is-in)::before { transform: scaleX(0); }
.ht-motion .ht-homeabout__text li.is-in::before { transition: transform 1.2s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 100ms); }

/* Call to action: the revamp pill (hitech.css: Signal sweep, sheen, glow, arrow nudge, focus ring)
   in ink on the white band. */
.ht-homeabout__action { margin-top: clamp(2rem, 4vw, 2.75rem); }
.ht-homeabout .ht-pill.ht-homeabout__cta { background-color: var(--ht-l-ink); color: #fff; }

/* Team: three framed portraits (Home settings), light curtain, light under the mouse, a slow drift
   while scrolling. Names: a caption on every portrait; while a mouse is over a portrait, its name
   follows the pointer as a label instead (hitech-home.js). */
.ht-homeabout__media {
  --ht-team-gap: clamp(.75rem, 1.6vw, 1.25rem);
  --ht-team-drop: clamp(1.5rem, 3vw, 2.75rem);
  position: relative;
}
.ht-homeabout__team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ht-team-gap);
  margin: 0;
  padding: 0 0 var(--ht-team-drop);
  list-style: none;
}
.ht-homeabout__member { min-width: 0; margin: 0; }
.ht-homeabout__member:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.ht-homeabout__member:nth-child(2) { grid-column: 2; grid-row: 1; }
.ht-homeabout__member:nth-child(3) { grid-column: 2; grid-row: 2; }
.ht-homeabout__member:nth-child(n+2) { translate: 0 var(--ht-team-drop); }
.ht-homeabout__team[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.ht-homeabout__team[data-count="2"] .ht-homeabout__member { grid-row: auto; align-self: start; }
.ht-homeabout__team[data-count="2"] .ht-homeabout__member:nth-child(2) { grid-column: 2; }

.ht-homeabout__photo {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--ht-l-line);
  border-radius: 18px;
  background: #f5f5f7;
  transition: border-color .45s var(--ht-ease-out), box-shadow .6s var(--ht-ease-out);
}
.ht-homeabout__photo img {
  position: absolute;
  inset: -7% 0;
  display: block;
  width: 100%;
  height: 114%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 14%;
}
.ht-homeabout [data-ht-reveal="media"]::after { background: #f5f5f7; } /* a light curtain on the white band */
.ht-homeabout__light { /* light under the mouse */
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(17rem circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ht-ease-out);
}
.ht-homeabout__photo.is-lit { border-color: var(--ht-l-line-strong); box-shadow: 0 30px 60px -34px rgba(11, 11, 16, .45); }
.ht-homeabout__photo.is-lit .ht-homeabout__light { opacity: 1; }

.ht-homeabout__who { /* caption: a frosted chip */
  position: absolute;
  left: .65rem;
  bottom: .65rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  max-width: calc(100% - 1.3rem);
  margin: 0;
  padding: .55rem .75rem .6rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 30px -18px rgba(11, 11, 16, .55);
  color: var(--ht-l-ink);
  transition: opacity .4s var(--ht-ease-out) .18s, transform .5s var(--ht-ease-out) .18s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ht-homeabout__who { /* frosted, yet light enough for small text over the dark suits (AA) */
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
            backdrop-filter: blur(10px) saturate(140%);
  }
}
.rtl .ht-homeabout__who { left: auto; right: .65rem; }
/* Arrival: the light curtain lifts off the portrait (hitech.css data-ht-reveal="media"), then the
   caption rises in. "backwards" fill only, so the hover hand-off below keeps working afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-homeabout__photo.is-in .ht-homeabout__who {
    animation: ht-who-in .9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 700ms) backwards;
  }
}
@keyframes ht-who-in {
  from { opacity: 0; translate: 0 .75rem; }
}
.ht-homeabout__name {
  font-size: .875rem;
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.2;
}
.ht-homeabout__role {
  color: var(--ht-l-text);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
}
/* Captions show by default. Only while the name label follows a mouse over a portrait
   (hitech-home.js: .has-cursor) do they step aside, at once; they come back a moment after it goes,
   so crossing the gap between two portraits does not flicker them. Screen readers always read them. */
.ht-homeabout__team.has-cursor .ht-homeabout__who {
  opacity: 0;
  transform: translate3d(0, .5rem, 0);
  transition-delay: 0s;
}
@media (max-width: 575.98px) {
  .ht-homeabout__who { left: .45rem; bottom: .45rem; max-width: calc(100% - .9rem); padding: .45rem .6rem .5rem; border-radius: 10px; }
  .ht-homeabout__name { font-size: .8125rem; }
  .ht-homeabout__role { font-size: .6875rem; }
}

.ht-homeabout__cursor { /* "Name / role" label that follows the mouse over the portraits */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem 1rem .75rem;
  border-radius: 14px;
  background: var(--ht-l-ink);
  box-shadow: 0 18px 40px -18px rgba(11, 11, 16, .7);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  /* --cx/--cy: the label's top left corner (hitech-home.js keeps it beside the pointer and inside
     the window: it flips to the left of / above the pointer near the right / bottom edge). */
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(.6);
  transform-origin: 0 0;
  transition: opacity .25s ease, transform .28s var(--ht-ease-out);
}
.ht-homeabout__cursor.is-left { transform-origin: 100% 0; }
.ht-homeabout__cursor.is-up { transform-origin: 0 100%; }
.ht-homeabout__cursor.is-left.is-up { transform-origin: 100% 100%; }
.ht-homeabout__cursor.is-on {
  opacity: 1;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(1);
}
.ht-homeabout__cursor b { font: 650 .875rem/1.2 var(--ht-font); font-stretch: var(--ht-semi); }
.ht-homeabout__cursor span { color: #b9bdc7; font: 500 .75rem/1.3 var(--ht-font); }

/* The experience number: counts up outlined, then fills (the numbers band's .ht-stat). */
.ht-homeabout__exp { margin: 0; }
.ht-homeabout .ht-homeabout__stat .ht-stat__value { font-size: clamp(3rem, 1.6rem + 3.4vw, 5rem); }
.ht-homeabout__years { text-transform: lowercase; }
.ht-homeabout__years::first-letter { text-transform: uppercase; }
/* Below the first portrait, level with the bottom of the last one. */
.ht-homeabout__exp {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(50% - var(--ht-team-gap, 1rem) / 2);
}
.rtl .ht-homeabout__exp { left: auto; right: 0; }
@media (min-width: 576px) and (max-width: 991.98px) {
  /* Tablets: the three portraits in one row, the number under them. */
  .ht-homeabout__team { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 0; }
  .ht-homeabout__member:nth-child(n) { grid-column: auto; grid-row: auto; align-self: start; translate: none; }
  .ht-homeabout__member:nth-child(2) { translate: 0 var(--ht-team-drop); }
  .ht-homeabout__exp { position: static; width: auto; max-width: 22rem; margin-top: calc(var(--ht-team-drop) + 2.5rem); }
}
@media (max-width: 575.98px) {
  .ht-homeabout__media { --ht-team-drop: 1.5rem; }
}
@media (max-width: 359.98px) {
  .ht-homeabout__exp { position: static; width: auto; margin-top: 2rem; }
}
/* Slow drift of the pictures inside their frames while the page scrolls (named timeline: the
   frame clips its picture, which would otherwise capture view()). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ht-homeabout__photo { view-timeline: --ht-face block; }
    .ht-homeabout__photo img {
      animation: ht-face-drift linear both;
      animation-timeline: --ht-face;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes ht-face-drift {
  from { translate: 0 -5%; }
  to { translate: 0 5%; }
}

/* =========================================================================
   Projects: the portfolio page's cards in a slider (owl carousel, started by
   hitech-home.js), with the theme's big outlined numbers.
   ========================================================================= */
.ht-homework {
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) 0;
  overflow-x: clip;
  background: #000;
  color: #fff;
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-homework :focus-visible { outline: 2px solid var(--ht-signal); outline-offset: 3px; }
.ht-homework :focus:not(:focus-visible) { outline: none; }
.ht-homework__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.ht-homework__title {
  margin: 0;
  color: #fff;
  font-family: var(--ht-font);
  font-size: var(--ht-h2-xl, clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem));
  font-weight: 740;
  font-stretch: var(--ht-wide);
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ht-homework__title > span:not(.ht-w) { /* CMS "<span>" mid-line ("Premium"): outlined in place */
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}
@media (max-width: 575.98px) {
  .ht-homework__title > span:not(.ht-w) { -webkit-text-stroke-width: 1.2px; }
}

/* The row of cards. Without JavaScript (or if the slider cannot start) it scrolls sideways: the
   next card peeks in at the edge and a thin scrollbar shows, so mouse users can reach every card. */
.ht-homework__rail { position: relative; }
.ht-homework__rail:not(.owl-loaded):not(.owl-loading) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 1rem;
  padding-bottom: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .32) rgba(255, 255, 255, .06);
}
.ht-homework__rail:not(.owl-loaded) > .ht-homework__card { scroll-snap-align: start; }
@media (min-width: 640px) {
  .ht-homework__rail:not(.owl-loaded):not(.owl-loading) { grid-auto-columns: calc((100% - 1.5rem) / 2.25); gap: 1.5rem; }
}
@media (min-width: 1200px) {
  .ht-homework__rail:not(.owl-loaded):not(.owl-loading) { grid-auto-columns: calc((100% - 3.5rem) / 3.3); gap: 1.75rem; }
}
/* With JavaScript the slider takes over within moments (hitech-home.js, under the loading screen).
   Until then the row already has the slider's columns and gaps (owl: 1 / 2 / 3 cards, 16 / 24 / 28 px
   apart), so its height does not change, and it is NOT a scroll container: Chrome counts the
   take-over of a scroll container as a large layout shift (CLS 0.30 on every load). No scrollbar
   meanwhile. If the slider is missing (.is-native) the scroller above stays. */
.ht-js .ht-homework__rail:not(.is-native):not(.owl-loaded):not(.owl-loading) {
  grid-auto-columns: 100%;
  gap: 16px;
  padding-bottom: 0;
  overflow: hidden; /* browsers without "clip" */
  overflow: clip;
  scroll-snap-type: none;
}
@media (min-width: 640px) {
  .ht-js .ht-homework__rail:not(.is-native):not(.owl-loaded):not(.owl-loading) { grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; }
}
@media (min-width: 1200px) {
  .ht-js .ht-homework__rail:not(.is-native):not(.owl-loaded):not(.owl-loading) { grid-auto-columns: calc((100% - 56px) / 3); gap: 28px; }
}
.ht-homework__rail:focus-visible { outline-offset: 8px; border-radius: 4px; }
/* The slider: the next card peeks in from the right (dimmed until it slides in). */
.ht-homework__rail.owl-loaded .owl-stage-outer {
  overflow: visible;
  clip-path: inset(-12rem -100vw -12rem 0);
}
.rtl .ht-homework__rail.owl-loaded .owl-stage-outer { clip-path: inset(-12rem 0 -12rem -100vw); }
.ht-homework__rail .owl-item { transition: opacity .7s var(--ht-ease-out); }
.ht-homework__rail .owl-item:not(.active) { opacity: .32; }
.ht-homework__rail.owl-grab .owl-item { cursor: grab; }
@media (max-width: 639.98px) {
  .ht-js .ht-homework__rail:not(.is-native) { width: 86%; } /* set before the slider measures it; a row without the slider keeps the full width */
}

.ht-homework__card { position: relative; height: 100%; }
.ht-homework__media { position: relative; }
.ht-homework .ht-frame__shot { aspect-ratio: 1920 / 919; }
.ht-homework__zoom { position: absolute; inset: 0; }
.ht-homework .ht-frame__shot::before { /* the number stays readable over light screenshots */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .28) 34%, rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
  transition: opacity .6s var(--ht-ease-out);
}
.ht-homework__card.is-hover .ht-frame__shot::before { opacity: .55; }
.ht-homework__zoom img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ht-homework__num { /* the theme's big outlined number, half over the screenshot */
  position: absolute;
  left: clamp(.85rem, 1.6vw, 1.25rem);
  bottom: 0;
  z-index: 5;
  color: transparent;
  font: 780 clamp(3.25rem, 2rem + 3vw, 5.25rem)/.8 var(--ht-font);
  font-stretch: var(--ht-wide);
  letter-spacing: -.045em;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
  pointer-events: none;
  translate: 0 48%;
  transition: color .6s var(--ht-ease-out), -webkit-text-stroke-color .6s var(--ht-ease-out);
}
.rtl .ht-homework__num { left: auto; right: clamp(.85rem, 1.6vw, 1.25rem); }
.ht-homework__card.is-hover .ht-homework__num,
.ht-homework__card:focus-within .ht-homework__num {
  color: rgba(255, 255, 255, .1);
  -webkit-text-stroke-color: #fff;
}
.ht-homework__body {
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 2rem + 1.6vw, 3.4rem) clamp(.85rem, 1.6vw, 1.25rem) 0;
}
/* category and time side by side at the start, as on the portfolio and blog cards (nothing at the
   card's far edge, where the floating buttons pass over the last card) */
.ht-homework .ht-pcard__meta { justify-content: flex-start; gap: .35rem 1.1rem; margin-bottom: .6rem; }
.ht-homework .ht-pcard__title {
  font-size: var(--ht-item, clamp(1.1875rem, 1.05rem + .4vw, 1.375rem));
  font-weight: 700;
  font-stretch: var(--ht-semi);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.ht-homework__more {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.1rem;
  color: var(--ht-mist);
  font: 600 .875rem/1.2 var(--ht-font);
  font-stretch: var(--ht-semi);
  transition: color .4s var(--ht-ease-out);
}
.ht-homework__more svg { fill: currentColor; transition: transform .4s var(--ht-ease-out); }
.ht-homework__card.is-hover .ht-homework__more,
.ht-homework__card:focus-within .ht-homework__more { color: #fff; }
.ht-homework__card.is-hover .ht-homework__more svg,
.ht-homework__card:focus-within .ht-homework__more svg { transform: translateX(4px); }
.rtl .ht-homework__more svg { rotate: 180deg; }
.ht-homework__card:focus-within .ht-frame { border-color: rgba(255, 255, 255, .3); }

/* Under the row: where you are (first card shown / all), a bar showing the visible part, arrows.
   It rises with the cards (data-ht-reveal) and its track draws in from the start edge. */
.ht-homework__bar { margin-top: clamp(2.25rem, 4.4vw, 3.25rem); }
.ht-homework__bar[hidden] { display: none; }
/* With JavaScript the bar keeps its place (unseen) until the slider shows it, so the bands below never
   move when it appears (after a reload half-way down the page they would jump). .is-none (set by
   hitech-home.js): the bar is not needed - every card fits, or there is no slider. (!important: Bootstrap
   hides every [hidden] with !important.) */
.ht-js .ht-homework__bar[hidden]:not(.is-none) { display: block !important; visibility: hidden; }
/* ...except where every card fits and the bar will never show (the slider shows 1 / 2 / 3 cards from
   0 / 640 / 1200 px; data-count = the number of projects): no place is kept there, or the bands below
   would move up when the slider starts. */
.ht-js .ht-homework__bar[hidden][data-count="1"] { display: none !important; }
@media (min-width: 640px) {
  .ht-js .ht-homework__bar[hidden][data-count="2"] { display: none !important; }
}
@media (min-width: 1200px) {
  .ht-js .ht-homework__bar[hidden][data-count="3"] { display: none !important; }
}
.ht-homework__controls {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.ht-homework__count {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0;
  color: var(--ht-mist);
  font: 600 .875rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  font-variant-numeric: tabular-nums;
}
.ht-homework__count [data-ht-work-from] { color: #fff; font-size: 1.125rem; }
.ht-homework__track {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: var(--ht-line);
  transform-origin: 0 50%;
}
.rtl .ht-homework__track { transform-origin: 100% 50%; }
.ht-motion .ht-homework__controls:not(.is-in) .ht-homework__track { scale: 0 1; }
.ht-motion .ht-homework__controls.is-in .ht-homework__track { transition: scale 1.3s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 250ms); }
.ht-homework__track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  transform: translate3d(0, 0, 0);
  transition: transform .7s var(--ht-ease-out);
}
.rtl .ht-homework__track i { left: auto; right: 0; }
.ht-homework__nav { display: flex; gap: .625rem; }

/* Card arrival: the cards rise as one group, the screenshot curtain lifts (hitech.css .ht-pcard). */
/* Screenshots settle while the row scrolls into view (named timeline above the slider's clip). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ht-homework__rail { view-timeline: --ht-work block; }
    .ht-homework__zoom {
      animation: ht-work-zoom linear both;
      animation-timeline: --ht-work;
      animation-range: entry 0% cover 60%;
    }
  }
}
@keyframes ht-work-zoom {
  from { scale: 1.12; }
  to { scale: 1; }
}

/* =========================================================================
   Seams: one rhythm for every band of the home page (the theme's and the
   revamped ones): same container, same vertical padding, same title scale.
   ========================================================================= */
@media (min-width: 1200px) {
  .ht-home .ht-stats .container,
  .ht-home .ht-quotes .container { max-width: 1180px; }
}
.ht-home .ht-services { padding: clamp(5rem, 10vw, 8rem) 0; }
.ht-home .ht-services__title,
.ht-home .ht-homeblog__title { font-size: var(--ht-h2-xl, clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem)); }

/* Floating buttons lane (see hitech.css "Floating buttons lane"; --ht-lane is set on .ht-home from
   768 px and is 0 once the space beside the container is wide enough, ~1380 px): the text, links and
   arrows that reach the inline end of a home band keep out from under the back-to-top / Call /
   WhatsApp column. The About grid and the blog row give the lane up like the services grid (every
   column a little narrower); the project cards still run to the edge (their meta line sits at the
   start). The hero is left as it is. */
@media (min-width: 768px) {
  .ht-homeabout__grid,
  .ht-homework__head,
  .ht-homework__bar,
  .ht-home .ht-homeblog__head,
  .ht-home .ht-homeblog .ht-posts { padding-inline-end: var(--ht-lane, 0px); }
}

/* =========================================================================
   Reduced motion and print
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .ht-hero__img,
  .ht-hero__art::before,
  .ht-rot__w,
  .ht-rot__w::after,
  .ht-hero__scroll,
  .ht-hero__social ul li a,
  .ht-hero__social ul li a em,
  .ht-homeabout__photo,
  .ht-homeabout__light,
  .ht-homeabout__who,
  .ht-homeabout__text li::after,
  .ht-homework__rail .owl-item,
  .ht-homework__num,
  .ht-homework__more,
  .ht-homework__more svg,
  .ht-homework__track i,
  .ht-hero__btn,
  .ht-homework__btn,
  .ht-hero__btn svg,
  .ht-homework__btn svg { transition: none !important; }
  .ht-hero__img,
  .ht-hero__scroll,
  .ht-hero__scroll-line i,
  .ht-hero__controls,
  .ht-homeabout__who,
  .ht-hero__outline { animation: none !important; }
  .ht-hero__img { transform: none; }
  .ht-hero__social ul li a:hover em,
  .ht-hero__social ul li a:focus-visible em { transform: none; }
  .ht-hero__scroll-line i { transform: none; opacity: .5; }
}
@media print {
  .ht-hero__art,
  .ht-hero__scroll,
  .ht-hero__social,
  .ht-hero__controls,
  .ht-homework__bar,
  .ht-homeabout__cursor { display: none !important; }
  .ht-rot__w:not(.is-on) { display: none; }
  .ht-homeabout__team.has-cursor .ht-homeabout__who { opacity: 1; transform: none; }
}