/* =========================================================================
   Hitech revamp 2026 - the revamped design system on the original site:
   type tokens, kickers and buttons shared by every page, plus the revamped
   pages and sections: home "What Can We Do For You?" services, numbers band
   and testimonials, portfolio, project pages, service pages, About page, the
   request form (service pages + contact page), the blog, articles and site
   search, the contact page, text pages, error pages, the sign-in pages.
   Loaded on EVERY front page by the layout (layouts/front.blade.php ->
   includes/ht-assets.blade.php, once), after the original theme (venor.css);
   the sign-in pages load it through layouts/auth. Plain CSS, no build step.
   Every class starts with "ht-" so theme rules never collide; theme elements
   (header, menu, footer, ...) are restyled in hitech-chrome.css / hitech-ui.css.

   Look: wide Archivo headings, outlined icons, white rules on black; Signal
   blue only on hover/focus (where you can act).
   Type scale (use these, with a fallback): --ht-h1 page titles, --ht-h2-xl /
   --ht-h2-l section titles, --ht-h3 row headings, --ht-h4 block titles inside
   a row, --ht-item card titles, --ht-lead intros. Labels: .ht-kicker (on white
   bands .ht-kicker--light).
   Buttons: .ht-pill (solid white -> Signal), .ht-ghost / .ht-filter__btn /
   .ht-tag--link (outline -> white sweep).
   Motion (hitech.js): the heading "unfolds" (words rise and widen into the
   expanded cut), the intro lights up word by word, the cards rise in groups.
   Start states only apply under html.ht-motion, which the page sets when
   motion is allowed and removes if hitech.js never starts.
   ========================================================================= */

/* ---------- Font: Archivo, variable width (62-125%) + weight, SIL OFL ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../../fonts/archivo/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Archivo";
  src: url("../../fonts/archivo/archivo-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --ht-ink: #000000;
  --ht-paper: #ffffff;
  --ht-mist: #a7acb6;            /* secondary text on black (9.2:1) */
  --ht-signal: #4361ff;          /* hover / focus only */
  --ht-signal-soft: #9fb0ff;     /* Signal as text on black */
  --ht-line: rgba(255, 255, 255, .14);
  --ht-line-strong: rgba(255, 255, 255, .3);
  --ht-text: rgba(255, 255, 255, .8);    /* reading text on black */
  --ht-font: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ht-wide: 125%;
  --ht-semi: 112%;
  --ht-radius: 14px;
  --ht-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ht-ease-inout: cubic-bezier(.77, 0, .175, 1);
  /* Type scale: the same sizes for the same roles on every page. */
  --ht-h1: clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem);     /* page titles (hero h1) */
  --ht-h2-xl: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem);   /* section titles */
  --ht-h2-l: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);      /* smaller section titles */
  --ht-h3: clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem);   /* row headings */
  --ht-h4: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);   /* block titles inside a row (columns, challenge / solution, a single panel) */
  --ht-item: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem); /* card / item titles */
  --ht-lead: clamp(1.0625rem, .98rem + .4vw, 1.25rem); /* intros under a title */
  /* Top padding of the inner-page heroes: clears the original header (less on short windows, below). */
  --ht-hero-top: clamp(10rem, 15vw, 13rem);
  /* Glow of things you can act on (pills, CTAs) and of outline buttons. */
  --ht-glow: 0 0 0 1px rgba(67, 97, 255, .5), 0 14px 38px -12px rgba(67, 97, 255, .75);
  --ht-glow-soft: 0 12px 32px -14px rgba(67, 97, 255, .55);
}
/* Short laptop windows (1280 x 720, a 1366 x 768 screen minus the browser bars): the heroes start
   higher, so their own buttons are on the first screen (see also "Short windows" in the About part). */
@media (min-width: 992px) and (max-height: 820px) {
  :root { --ht-hero-top: clamp(7.5rem, 17vh, 10rem); }
}
/* Windows up to 860px tall: the page title size is capped by the window height too - on the token, so
   every page title that uses it (About, services, portfolio, blog, projects, search, text pages, the
   sign-in title in hitech-auth.css and the home hero in hitech-home.css) keeps the same size and each
   hero keeps its own buttons on the first screen (see "Taller heroes" further on). From 992px the contact
   page's one-line "Contact us" is sized by its column instead (.ht-cp__title), with the same 12.5vh cap. */
@media (min-width: 992px) and (max-height: 860px) {
  :root { --ht-h1: min(clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem), 12.5vh); }
}

/* ---------- Label ("kicker"): a short rule, then a small mist label ----------
   Above a section title, or as a small heading over a list. The rule draws in when the label
   (or the block around it) rises into place. On white bands: .ht-kicker--light. */
.ht-kicker,
.ht-req__subtitle {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  color: var(--ht-mist);
  font: 600 .875rem/1.3 var(--ht-font);
  font-stretch: var(--ht-semi);
  letter-spacing: 0;
  text-transform: none;
}
.ht-kicker::before,
.ht-req__subtitle::before {
  content: "";
  flex: none;
  align-self: flex-start;
  width: 2.25rem;
  height: 1px;
  margin-top: .65em; /* on the first line's middle, also when the label wraps */
  background: var(--ht-line-strong);
  transform-origin: 0 50%;
}
.rtl .ht-kicker::before,
.rtl .ht-req__subtitle::before { transform-origin: 100% 50%; }
.ht-kicker--light { color: #5b606d; }
.ht-kicker--light::before { background: rgba(11, 11, 16, .24); }
.ht-motion [data-ht-reveal]:not(.is-in) :is(.ht-kicker, .ht-req__subtitle)::before,
.ht-motion :is(.ht-kicker, .ht-req__subtitle)[data-ht-reveal]:not(.is-in)::before { transform: scaleX(0); }
.ht-motion [data-ht-reveal].is-in :is(.ht-kicker, .ht-req__subtitle)::before,
.ht-motion :is(.ht-kicker, .ht-req__subtitle)[data-ht-reveal].is-in::before {
  transition: transform .9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 150ms);
}

/* =========================================================================
   Motion hooks (set in home.blade.php, run by hitech.js)
     data-ht-split    heading: words rise out of the baseline and widen
     data-ht-lightup  paragraph: words brighten in a quick wave
     data-ht-reveal   block: rises into place
   --ht-d is the group delay, --i the word index (both set by hitech.js).
   ========================================================================= */
.ht-w,
.ht-w__i { display: inline-block; }
/* A word in its own box loses its kerning at the gaps; hitech.js (fitWords) gives the room back as a
   margin after the word and a word-spacing on the space (<ht-gap>), measured against the plain text
   on one line - .ht-fitting is only on for that moment - so a heading never changes height when split. */
.ht-fitting,
.ht-fitting * { white-space: nowrap !important; }
/* A heading's own wrap rules stay in force when it is split. A split word breaks only inside its own
   box, when it is wider than the line (overflow-wrap: anywhere, hyphens: auto - a long search term);
   hitech.js marks such a word .ht-w--wrap and it rises at its final width (below): unfolding from 70%
   would put it on one line for a moment, and the heading would lose a line and get it back mid-way. */

.ht-motion [data-ht-split]:not(.is-armed) { visibility: hidden; }
.ht-motion [data-ht-split].is-armed:not(.is-done) .ht-w { clip-path: inset(-.4em -.6em -.26em -.6em); }
.ht-motion [data-ht-split].is-armed .ht-w__i {
  opacity: 0;
  transform: translate3d(0, 128%, 0);
  font-stretch: 70%;
}
.ht-motion [data-ht-split].no-unfold .ht-w__i,
.ht-motion [data-ht-split] .ht-w--wrap .ht-w__i { font-stretch: inherit; }
.ht-motion [data-ht-split].is-in .ht-w__i {
  opacity: 1;
  transform: none;
  font-stretch: inherit;
  transition:
    opacity .4s linear calc(var(--ht-d, 0ms) + var(--i, 0) * 55ms),
    transform 1.1s var(--ht-ease-out) calc(var(--ht-d, 0ms) + var(--i, 0) * 55ms),
    font-stretch 1.3s var(--ht-ease-out) calc(var(--ht-d, 0ms) + var(--i, 0) * 55ms + 80ms);
}
/* Finished: drop the transitions so the words always end up in their final shape,
   even if the browser paused frames meanwhile (e.g. the tab was in the background). */
.ht-motion [data-ht-split].is-done .ht-w__i { transition: none; }
/* While hitech.js rearm() measures a heading again: words still moving stop at once, so they are
   measured in their real final shape (a reopened menu, a slide that comes back mid-unfold). */
.ht-motion [data-ht-split].is-still .ht-w__i { transition: none !important; }

.ht-motion [data-ht-lightup]:not(.is-split) { opacity: 0; }
.ht-motion [data-ht-lightup] .ht-lw { opacity: .16; }
.ht-motion [data-ht-lightup].is-in .ht-lw {
  opacity: 1;
  transition: opacity .9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + var(--i, 0) * 14ms);
}

.ht-motion [data-ht-reveal]:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
}
.ht-motion [data-ht-reveal].is-in {
  transition:
    opacity .9s var(--ht-ease-out) var(--ht-d, 0ms),
    transform 1.2s var(--ht-ease-out) var(--ht-d, 0ms);
}
.ht-motion [data-ht-reveal].is-instant { transition: none; } /* shown by the portfolio filter, which animates it itself */

/* Images: a black curtain lifts off while the picture settles. (An overlay, not a clip:
   browsers treat a fully clipped element as off-screen, so it would never be revealed.) */
.ht-motion [data-ht-reveal="media"] { position: relative; }
.ht-motion [data-ht-reveal="media"]:not(.is-in) {
  opacity: 1;
  transform: none;
}
.ht-motion [data-ht-reveal="media"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 6;
  background: var(--ht-ink);
  transform-origin: 50% 0;
  pointer-events: none;
}
.ht-motion [data-ht-reveal="media"].is-in::after {
  transform: scaleY(0);
  transition: transform 1.4s var(--ht-ease-inout) var(--ht-d, 0ms);
}
.ht-motion [data-ht-reveal="media"]:not(.is-in) img { transform: scale(1.18); }
.ht-motion [data-ht-reveal="media"].is-in img { transition: transform 2s var(--ht-ease-out) var(--ht-d, 0ms), scale 1.1s var(--ht-ease-out); }

/* Rich text from the CMS waits for its hooks (set by hitech.js) so nothing flashes. */
.ht-motion [data-ht-auto]:not(.is-ready) > * { opacity: 0; }

/* The stage: arrival animations that start by themselves wait for the loading screen to lift
   (hitech.js then sets html.ht-stage). If hitech.js never starts, the page's 3 s failsafe
   removes .ht-motion and they run as before. (Includes the "service chosen for you" flash of
   the request form, which can start while the contact page is still loading.) */
.ht-motion:not(.ht-stage) :is(.ht-folio__art img, .ht-sp__mark, .ht-ring--1, .ht-ring--2, .ht-ring--3, .ht-sp__orbit, .ht-404__code span,
  .ht-field--pick.is-flash .ht-field__control, .ht-field--pick.is-flash .ht-field__icon),
.ht-motion:not(.ht-stage) .ht-field--pick.is-flash::after {
  animation-play-state: paused;
}

/* =========================================================================
   Services section
   ========================================================================= */
.ht-services {
  --ht-cell-x: clamp(15px, 1.6vw, 1.5rem);  /* text inset inside a card */
  padding: clamp(5rem, 10vw, 8.5rem) 0;
  border-bottom: 1px solid #222227;         /* same divider as the theme's sections */
  background: var(--ht-ink);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-services :focus-visible {
  outline: 2px solid var(--ht-signal);
  outline-offset: 3px;
}
.ht-services :focus:not(:focus-visible) { outline: none; }

.ht-services__head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 992px) {
  .ht-services__head {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: 4rem;
  }
}
.ht-services__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 4.5rem);
  font-weight: 740;
  font-stretch: var(--ht-wide);
  line-height: .96;
  letter-spacing: -.035em;
}
.ht-services__title > span:not(.ht-w) { display: block; } /* CMS "<span>" = second line */
.ht-services__intro {
  max-width: 46ch;
  color: var(--ht-mist);
  font-size: clamp(1rem, .92rem + .35vw, 1.125rem);
  line-height: 1.6;
}
.ht-services__intro p { margin: 0; }

.ht-services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.5rem, 1.4vw, 1.25rem) clamp(1rem, 2.2vw, 2.25rem);
  margin: 0 calc(-1 * var(--ht-cell-x));  /* text lines up with the heading; rules run into the gutter */
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ht-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ht-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* One service: a top rule, outlined icon, wide title, four-line summary. */
.ht-svc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) var(--ht-cell-x) clamp(1.75rem, 2.6vw, 2.5rem);
  font-family: var(--ht-font);
}
.ht-svc::before,
.ht-svc--link::after {
  content: "";
  position: absolute;
  inset-block: 0 auto;
  inset-inline: 0 calc(-1 * var(--ht-run, 0px)); /* --ht-run: see "Floating buttons lane" */
  height: 1px;
  transform-origin: 0 50%;
  pointer-events: none;
}
.ht-svc::before { background: var(--ht-line-strong); }
.ht-svc--link::after {  /* draws in Signal blue on hover / keyboard focus, glowing (you can act here) */
  z-index: 1;
  height: 2px;
  background: var(--ht-signal);
  box-shadow: 0 0 18px rgba(67, 97, 255, .7), 0 0 4px rgba(67, 97, 255, .9);
  transform: scaleX(0);
  transition: transform .6s var(--ht-ease-out);
}
.rtl .ht-svc::before,
.rtl .ht-svc--link::after { transform-origin: 100% 50%; }
.ht-motion .ht-svc:not(.is-in)::before { transform: scaleX(0); }
.ht-motion .ht-svc.is-in::before { transition: transform 1.3s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 100ms); }

.ht-svc__icon {
  display: block;
  height: 1em;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  color: transparent;
  font-size: 2.25rem;
  line-height: 1;
  -webkit-text-stroke: 1px var(--ht-paper);
  transition: color .45s var(--ht-ease-out);
}
.ht-svc__icon i { display: block; line-height: 1; }

.ht-svc__title {
  margin: 0 0 .75rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem);
  font-weight: 650;
  font-stretch: var(--ht-wide);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.ht-svc__link,
.ht-svc__link:hover,
.ht-svc__link:focus { color: inherit; text-decoration: none; }
.ht-svc__link { transition: color .3s var(--ht-ease-out); } /* not the theme's "all 400ms": the focus ring shows at once */
.ht-svc__link::after { /* the whole card is the link */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0 calc(-1 * var(--ht-run, 0px));
  z-index: 2;
}

.ht-svc__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ht-mist);
  font-size: .9375rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.ht-svc__more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.5rem;
  padding-bottom: 3px;
  color: var(--ht-paper);
  font-size: .875rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.2;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ht-ease-out);
}
.rtl .ht-svc__more { background-position: 100% 100%; }

/* Hover surface: a soft light follows the pointer and uncovers the service photo.
   Only on devices with a mouse, so phones never download the photos. */
.ht-svc__media {
  position: absolute;
  inset-block: 0;
  inset-inline: 0 calc(-1 * var(--ht-run, 0px)); /* runs on with the rule (floating buttons lane) */
  z-index: -1;
  display: none;
  overflow: hidden;
  background:
    radial-gradient(26rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .07), transparent 62%),
    rgba(255, 255, 255, .025);
  opacity: 0;
  transition: opacity .5s var(--ht-ease-out);
}
.ht-svc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(.62);
  opacity: .5;
  transform: scale(1.08);
  transition: transform 1.4s var(--ht-ease-out);
  -webkit-mask-image: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), #000 0%, rgba(0, 0, 0, .3) 55%, transparent 80%);
          mask-image: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), #000 0%, rgba(0, 0, 0, .3) 55%, transparent 80%);
}
.rtl .ht-svc__media { background-position: var(--ht-run, 0px) 0; background-repeat: no-repeat; } /* light stays under the pointer */
.rtl .ht-svc__media img { -webkit-mask-position: var(--ht-run, 0px) 0; mask-position: var(--ht-run, 0px) 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@media (hover: hover) and (pointer: fine) {
  .ht-svc__media { display: block; }
  .ht-svc--link:hover .ht-svc__media { opacity: 1; }
  .ht-svc--link:hover .ht-svc__media img { transform: none; }
}
.ht-svc--link:hover::after,
.ht-svc--link:focus-within::after { transform: scaleX(1); }
.ht-svc--link:hover .ht-svc__icon,
.ht-svc--link:focus-within .ht-svc__icon { color: var(--ht-paper); }
.ht-svc--link:hover .ht-svc__more,
.ht-svc--link:focus-within .ht-svc__more { background-size: 100% 1px; }

/* =========================================================================
   Shared pieces for the portfolio and project pages
   ========================================================================= */
/* Wide container: 1360px like the original portfolio page, but never closer to the screen edge than
   the header (logo box 50px in): on 1200-1430px laptops the text keeps a 50px side margin. */
@media (min-width: 1200px) {
  .ht-folio .container,
  .ht-proj .container,
  .ht-next .container { max-width: min(1360px, calc(100% - 70px)); }
}

/* Browser frame around project screenshots: dots + the project's real domain. */
.ht-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  background: #000;
}
.ht-frame__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 34px;
  padding: 0 .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
}
.ht-frame__dots { display: inline-flex; flex: none; gap: 6px; }
.ht-frame__dots i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.ht-frame__url {
  overflow: hidden;
  max-width: 60%;
  margin-inline: auto;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--ht-mist);
  font: 500 .75rem/1 var(--ht-font);
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateX(-24px); /* optically centred despite the dots */
}
.ht-frame__shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1920 / 919;
  background: #0b0b0b;
}
.ht-frame__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: scale 1.2s var(--ht-ease-out);
}

/* Tilt toward the mouse (hitech.js sets --ht-rx / --ht-ry on the [data-ht-tilt] element). */
[data-ht-tilt] .ht-frame {
  transform: perspective(1400px) rotateX(var(--ht-rx, 0deg)) rotateY(var(--ht-ry, 0deg));
  transition: transform .8s var(--ht-ease-out), border-color .4s;
}
[data-ht-tilt].is-hover .ht-frame {
  border-color: rgba(255, 255, 255, .3);
  transition: transform .18s linear, border-color .4s;
}
[data-ht-tilt].is-hover .ht-frame__shot img { scale: 1.035; }

.ht-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  color: var(--ht-mist);
  font: 500 .875rem/1.4 var(--ht-font);
  list-style: none;
}
.ht-crumbs li { display: flex; gap: .6rem; }
.ht-crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, .32); }
.ht-crumbs a { color: var(--ht-mist); text-decoration: none; transition: color .3s var(--ht-ease-out); } /* focus ring at once */
.ht-crumbs a:hover { color: var(--ht-mist); text-decoration: none; } /* touch: a tapped crumb keeps :hover - it stays as it was */
@media (hover: hover) {
  .ht-crumbs a:hover { color: var(--ht-paper); text-decoration: underline; text-underline-offset: 4px; }
}
.ht-crumbs [aria-current] { color: var(--ht-paper); }

.ht-folio :focus-visible,
.ht-proj :focus-visible,
.ht-next :focus-visible {
  outline: 2px solid var(--ht-signal);
  outline-offset: 3px;
}
.ht-folio :focus:not(:focus-visible),
.ht-proj :focus:not(:focus-visible),
.ht-next :focus:not(:focus-visible) { outline: none; }

/* =========================================================================
   Portfolio page
   ========================================================================= */
.ht-folio {
  padding-bottom: clamp(5rem, 10vw, 9rem);
  background: var(--ht-ink);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-folio__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--ht-hero-top, clamp(10rem, 15vw, 13rem)) 0 clamp(3rem, 6vw, 5rem); /* clears the original header (--ht-hero-top: the shared top of the inner-page heroes, lower on short windows); /blog uses this hero too */
}
.ht-folio__art {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: -1;
}
.ht-folio__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
}
.ht-folio__art::after { /* fade the art into the black page */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 45%);
}
@media (max-width: 767.98px) {
  .ht-folio__art { inset: 0; }
  .ht-folio__art img { opacity: .35; }
}
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-folio__art img { animation: ht-art-in 2.4s var(--ht-ease-out) both; }
}
/* Portfolio hero art: leans slightly toward the mouse with a light where it points (hitech.js hero
   block: data-ht-hero / data-ht-art), and sinks slowly as the page scrolls. */
.ht-folio > .ht-folio__hero .ht-folio__art {
  transform: perspective(1400px) rotateX(calc(var(--ht-rx, 0deg) * .35)) rotateY(calc(var(--ht-ry, 0deg) * .35)) scale(1.04);
  transition: transform 1.4s var(--ht-ease-out);
}
.ht-folio > .ht-folio__hero .ht-folio__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(24rem circle at var(--mx, 60%) var(--my, 40%), rgba(255, 255, 255, .22), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--ht-ease-out);
}
.ht-folio > .ht-folio__hero .ht-folio__art.is-tracking::before { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ht-folio > .ht-folio__hero { view-timeline: --ht-folio block; }
    .ht-motion .ht-folio > .ht-folio__hero .ht-folio__art img {
      animation: ht-art-in 2.4s var(--ht-ease-out) both, ht-art-sink linear both;
      animation-timeline: auto, --ht-folio;
      animation-range: normal, exit;
    }
  }
}
@keyframes ht-art-sink {
  to { translate: 0 14%; scale: 1.1; }
}
@keyframes ht-art-in {
  from { opacity: 0; transform: scale(1.12); }
  to { opacity: .6; transform: none; }
}
@media (max-width: 767.98px) {
  @keyframes ht-art-in {
    from { opacity: 0; transform: scale(1.12); }
    to { opacity: .35; transform: none; }
  }
}

.ht-folio__title {
  max-width: 12ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  text-wrap: balance;
}
/* CMS "<span>" = an outlined second line, as on the original banner and the About title. */
.ht-folio__title > span:not(.ht-w) {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}
.ht-folio__intro {
  max-width: 50ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  color: var(--ht-text);
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}

/* Category filter */
.ht-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.ht-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 46px;
  padding: 0 .75rem 0 1.25rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ht-paper);
  font: 600 .9375rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  cursor: pointer;
  /* hover / focus: the white sweep of the outline buttons ("Buttons", project page part) */
}
.ht-filter__btn[aria-pressed="true"] {
  border-color: var(--ht-paper);
  background: var(--ht-paper);
  color: var(--ht-ink);
}
.ht-filter__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.ht-filter__count { transition: background-color .3s var(--ht-ease-out); }
.ht-filter__btn[aria-pressed="true"] .ht-filter__count,
.ht-filter__btn:focus-visible .ht-filter__count { background: rgba(0, 0, 0, .1); }
@media (hover: hover) {
  .ht-filter__btn:hover .ht-filter__count { background: rgba(0, 0, 0, .1); }
}

/* Project grid: two columns; with an odd number of cards the first one spans both. */
.ht-folio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 992px) {
  .ht-folio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ht-pcard.is-wide { grid-column: 1 / -1; }
}

.ht-pcard { position: relative; }
.ht-pcard[hidden] { display: none !important; }

.ht-pcard__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(40rem circle at var(--ht-gx, 50%) var(--ht-gy, 0%), rgba(255, 255, 255, .13), transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ht-ease-out);
}
[data-ht-tilt].is-hover .ht-pcard__glare { opacity: 1; } /* portfolio + post cards, next project, gallery */

.ht-pcard__cursor { /* "View project" label that follows the mouse over the screenshot */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  background: var(--ht-signal);
  color: var(--ht-paper);
  font: 600 .8125rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(calc(var(--ht-cx, 0px) - 50%), calc(var(--ht-cy, 0px) - 50%), 0) scale(.4);
  transition: opacity .25s ease, transform .22s var(--ht-ease-out);
}
[data-ht-tilt].is-over-frame .ht-pcard__cursor {
  opacity: 1;
  transform: translate3d(calc(var(--ht-cx, 0px) - 50%), calc(var(--ht-cy, 0px) - 50%), 0) scale(1);
}

.ht-pcard__body { padding-top: 1.35rem; }
.ht-pcard__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.25rem;
  margin: 0 0 .65rem;
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
.ht-pcard__time { display: inline-flex; align-items: center; gap: .45rem; }
.ht-pcard__time i { font-size: .8em; opacity: .8; }
/* Portfolio page: category and time side by side at the start, like the article cards' meta line
   (nothing at the card's far edge, where the floating buttons pass over the right-hand column). */
.ht-folio__grid .ht-pcard__meta { justify-content: flex-start; gap: .35rem 1.1rem; }
.ht-pcard__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem);
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.ht-pcard.is-wide .ht-pcard__title { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem); }
.ht-pcard__link,
.ht-pcard__link:hover,
.ht-pcard__link:focus {
  color: var(--ht-paper);
  text-decoration: none;
}
.ht-pcard__link {
  padding-bottom: .08em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .55s var(--ht-ease-out);
}
.ht-pcard__link::after { /* the whole card is the link */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}
.ht-pcard.is-hover .ht-pcard__link,
.ht-pcard__link:focus-visible { background-size: 100% 2px; }

/* Entry: a curtain lifts off the screenshot while it settles and the card rises.
   (An overlay, not a clip: clipped images would only start loading once revealed.) */
.ht-motion .ht-pcard .ht-frame__shot::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: #0b0b0b;
  transform-origin: 50% 0;
  pointer-events: none;
}
.ht-motion .ht-pcard.is-in .ht-frame__shot::after {
  transform: scaleY(0);
  transition: transform 1.3s var(--ht-ease-inout) calc(var(--ht-d, 0ms) + 120ms);
}
.ht-motion .ht-pcard:not(.is-in) .ht-frame__shot img { transform: scale(1.15); }
.ht-motion .ht-pcard.is-in .ht-frame__shot img {
  transition: transform 1.9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 120ms), scale 1.2s var(--ht-ease-out);
}

/* =========================================================================
   Project page
   ========================================================================= */
.ht-proj,
.ht-next {
  background: var(--ht-ink);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-proj__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: var(--ht-hero-top, clamp(10rem, 15vw, 13rem)) 0 clamp(2.5rem, 5vw, 4rem); /* clears the original header */
}
/* Ambient light: the project's own screenshot, blurred into a slow coloured glow behind the hero
   (ADwallet glows navy/violet, AD Build green/yellow, ...), plus a light that follows the mouse. */
.ht-proj__glow {
  position: absolute;
  z-index: -2;
  top: -12%;
  right: -14%;
  width: min(72vw, 1100px);
  height: 125%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
          mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
.ht-proj__glow img { /* brightness squeezed into a dark band (white pages and dark pages glow alike), colour boosted:
                        a navy screenshot still glows indigo, a white one a soft grey */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: contrast(.2) brightness(.42) saturate(8) blur(60px);
  transform: scale(1.1);
}
.rtl .ht-proj__glow { right: auto; left: -14%; } /* behind the facts card, which sits on the left in RTL */
@media (min-width: 768px) { /* the light is taller than the hero (which clips it): it fades out just inside the
                               hero's bottom edge (at 89.6% of its height), so no hard line beside the screenshot */
  .ht-proj__glow {
    -webkit-mask-image: radial-gradient(50% 44% at 50% 45%, #000 30%, transparent);
            mask-image: radial-gradient(50% 44% at 50% 45%, #000 30%, transparent);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-proj__glow { animation: ht-glow-in 2.4s var(--ht-ease-out) .1s backwards; }
  .ht-motion .ht-proj__glow img { animation: ht-ambient 16s ease-in-out 1s infinite alternate; }
  .ht-proj__hero.is-paused .ht-proj__glow img { animation-play-state: paused; }
}
.ht-motion:not(.ht-stage) :is(.ht-proj__glow, .ht-proj__glow img) { animation-play-state: paused; } /* waits for the loading screen */
@keyframes ht-glow-in {
  from { opacity: 0; }
}
@keyframes ht-ambient {
  0% { transform: scale(1.1) translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: scale(1.22) translate3d(-5%, 4%, 0) rotate(4deg); }
  100% { transform: scale(1.14) translate3d(4%, -3%, 0) rotate(-3deg); }
}
.ht-proj__hero::after { /* light under the mouse (hitech.js sets --mx / --my) */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(34rem circle at var(--mx, 75%) var(--my, 30%), rgba(255, 255, 255, .06), transparent 65%);
  pointer-events: none;
}
.rtl .ht-proj__hero::after { background-image: radial-gradient(34rem circle at var(--mx, 25%) var(--my, 30%), rgba(255, 255, 255, .06), transparent 65%); }
@media (max-width: 767.98px) {
  .ht-proj__glow { top: -4%; right: -40%; width: 120vw; height: 70%; opacity: .75; }
  .rtl .ht-proj__glow { right: auto; left: -40%; }
  .ht-proj__glow img { filter: contrast(.2) brightness(.42) saturate(8) blur(44px); }
}
.ht-proj__head {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 992px) {
  .ht-proj__head {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: end;
    gap: clamp(3rem, 6vw, 6rem);
  }
}
@media (max-width: 991.98px) { /* phones + tablets: the facts and the Visit button come right after the title */
  .ht-proj__intro { display: contents; }
  .ht-proj__intro > .ht-proj__cat { order: 1; justify-self: start; margin-bottom: 0; }
  .ht-proj__intro > .ht-proj__title { order: 2; }
  .ht-proj__side { order: 3; }
  .ht-proj__intro > .ht-proj__lead { order: 4; margin-top: 0; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .ht-proj__side { width: min(100%, 30rem); }
}
.ht-proj__cat { /* a tag link: outline pill (look: "Buttons" below) */
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: .5rem .95rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 999px;
  color: var(--ht-mist);
  font: 600 .8125rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  text-decoration: none;
}
.ht-proj__title {
  max-width: 15ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.ht-proj__lead {
  max-width: 62ch;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  color: var(--ht-text);
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}
.ht-proj__lead p { margin: 0; }
.ht-proj__lead p + p { margin-top: 1em; }

/* Facts + Visit: a glass card over the ambient light. */
.ht-proj__side {
  display: grid;
  gap: 1.25rem;
  align-content: end;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(8, 8, 12, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ht-proj__side { background: #0a0a0e; }
}
.ht-proj__side .ht-pill { width: 100%; }
.ht-facts { margin: 0; }
.ht-facts__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 0;
}
.ht-facts__row:first-child { padding-top: .15rem; }
.ht-facts__row + .ht-facts__row { border-top: 1px solid var(--ht-line); }
.ht-facts dt {
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.5;
}
.ht-facts dd { margin: 0; color: var(--ht-paper); font-weight: 600; line-height: 1.4; }

/* =========================================================================
   Buttons (every page)
     .ht-pill   solid white main action: the Signal fill sweeps in from the left, a light sheen
                passes over it, a Signal glow, the arrow nudges forward (up and out when the
                link opens another site: .ht-pill--ext).
     .ht-ghost, .ht-filter__btn, .ht-tag--link, .ht-proj__cat   outline: the theme's white fill
                sweeps in, the text turns ink, a soft glow.
   Explicit transition lists (the theme gives every a/button "all 400ms"); the magnetic pull of
   hitech-ui.js uses the separate "translate" property. The sign-in pages restyle .ht-pill /
   .ht-ghost in hitech-auth.css; the sheen skips them.
   ========================================================================= */
.ht-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(var(--ht-signal), var(--ht-signal)) no-repeat 0 0 / 0 100%, var(--ht-paper);
  color: var(--ht-ink);
  font: 600 1rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  text-decoration: none;
  cursor: pointer;
  transition: background-size .45s var(--ht-ease-out), color .15s ease-out, box-shadow .45s var(--ht-ease-out);
}
/* Touch screens keep :hover on a tapped link until the next tap: the buttons then stay as they were
   (not the theme's link blue). The hover looks below (mouse only) and the focus looks still win. */
.ht-pill:hover { color: var(--ht-ink); text-decoration: none; }
.ht-ghost:hover { color: var(--ht-paper); text-decoration: none; }
.ht-proj__cat:hover { color: var(--ht-mist); text-decoration: none; }
.ht-pill:focus-visible,
.ht-form.is-sending .ht-pill.ht-form__submit {
  background-size: 100% 100%;
  color: var(--ht-paper);
  text-decoration: none;
  box-shadow: var(--ht-glow);
  transition: background-size .45s var(--ht-ease-out), color .22s ease .12s, box-shadow .45s var(--ht-ease-out);
}
.ht-pill:not(.ht-auth *)::after { /* sheen: a soft light passes over the fill once */
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 85%);
  pointer-events: none;
  transform: translate3d(-115%, 0, 0);
}
.ht-pill:not(.ht-auth *):focus-visible::after {
  transform: translate3d(240%, 0, 0);
  transition: transform 1s var(--ht-ease-out) .12s;
}
.ht-pill svg {
  flex: none;
  fill: currentColor;
  transition: transform .35s var(--ht-ease-out);
}
.ht-pill:focus-visible svg { transform: translateX(4px); }
.ht-pill--ext svg { rotate: -45deg; } /* opens another site: the arrow points up and out (the nudge follows it) */
.ht-pill--lg { min-height: 60px; padding: 0 1.75rem; font-size: 1.0625rem; }
.ht-pill__host { font-size: .8125rem; font-weight: 500; opacity: .65; transition: opacity .15s ease-out; }
.ht-pill:focus-visible .ht-pill__host { opacity: 1; transition: opacity .22s ease .12s; } /* white on Signal: full strength (AA) */
.ht-pill__end { display: inline-flex; align-items: center; gap: .85rem; }
/* Right to left: the fill and the sheen come from the right, the arrow nudges to the left. */
.rtl .ht-pill { background-position: 100% 0, 0 0; }
.rtl .ht-pill:not(.ht-auth *)::after {
  left: auto;
  right: 0;
  background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 85%);
  transform: translate3d(115%, 0, 0);
}
.rtl .ht-pill:not(.ht-auth *):focus-visible::after { transform: translate3d(-240%, 0, 0); }
.rtl .ht-pill:focus-visible svg { transform: translateX(-4px); }

.ht-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 56px;
  padding: 0 1.4rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 999px;
  background-color: transparent;
  color: var(--ht-paper);
  font: 600 1rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  text-decoration: none;
  cursor: pointer;
}
.ht-ghost i { font-size: 1.2em; }
.ht-ghost svg { flex: none; fill: currentColor; } /* content round: the home hero's second button carries the arrow */
.ht-hero__actions .ht-ghost { gap: 1rem; } /* content round: same text-to-arrow space as the 'Start a project' pill beside it */
.ht-ghost,
.ht-filter__btn,
.ht-tag--link,
.ht-proj__cat {
  background-image: linear-gradient(var(--ht-paper), var(--ht-paper));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0 100%;
  transition: background-size .45s var(--ht-ease-out), color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out);
}
.rtl :is(.ht-ghost, .ht-filter__btn, .ht-tag--link, .ht-proj__cat) { background-position: 100% 0; }
:is(.ht-ghost, .ht-filter__btn:not([aria-pressed="true"]), .ht-tag--link, .ht-proj__cat):focus-visible {
  border-color: var(--ht-paper);
  background-image: linear-gradient(var(--ht-paper), var(--ht-paper));
  background-size: 100% 100%;
  color: var(--ht-ink);
  text-decoration: none;
  box-shadow: var(--ht-glow-soft);
}
@media (hover: hover) {
  .ht-pill:hover {
    background-size: 100% 100%;
    color: var(--ht-paper);
    text-decoration: none;
    box-shadow: var(--ht-glow);
    transition: background-size .45s var(--ht-ease-out), color .22s ease .12s, box-shadow .45s var(--ht-ease-out);
  }
  .ht-pill:not(.ht-auth *):hover::after {
    transform: translate3d(240%, 0, 0);
    transition: transform 1s var(--ht-ease-out) .12s;
  }
  .ht-pill:hover svg { transform: translateX(4px); }
  .ht-pill:hover .ht-pill__host { opacity: 1; transition: opacity .22s ease .12s; }
  .rtl .ht-pill:not(.ht-auth *):hover::after { transform: translate3d(-240%, 0, 0); }
  .rtl .ht-pill:hover svg { transform: translateX(-4px); }
  :is(.ht-ghost, .ht-filter__btn:not([aria-pressed="true"]), .ht-tag--link, .ht-proj__cat):hover {
    border-color: var(--ht-paper);
    background-image: linear-gradient(var(--ht-paper), var(--ht-paper));
    background-size: 100% 100%;
    color: var(--ht-ink);
    text-decoration: none;
    box-shadow: var(--ht-glow-soft);
  }
}
:is(.ht-pill, .ht-ghost, .ht-filter__btn, .ht-tag--link, .ht-proj__cat):focus-visible {
  outline: 2px solid var(--ht-signal);
  outline-offset: 3px;
}
.ht-pill[disabled],
.ht-ghost[disabled] { cursor: progress; }
/* Blocks that rise in (data-ht-reveal) and have hover transitions of their own: the reveal's
   transition list would replace theirs, so both are listed. */
.ht-motion :is(.ht-proj__cat, .ht-tag, .ht-chip, .ht-more__all)[data-ht-reveal].is-in {
  transition: opacity .9s var(--ht-ease-out) var(--ht-d, 0ms), transform 1.2s var(--ht-ease-out) var(--ht-d, 0ms),
    background-size .45s var(--ht-ease-out), background-color .3s var(--ht-ease-out), color .3s var(--ht-ease-out),
    border-color .3s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out);
}
.ht-motion :is(.ht-video, .ht-gallery__item)[data-ht-reveal].is-in {
  transition: opacity .9s var(--ht-ease-out) var(--ht-d, 0ms), transform 1.2s var(--ht-ease-out) var(--ht-d, 0ms),
    border-color .4s var(--ht-ease-out), box-shadow .5s var(--ht-ease-out);
}
.ht-motion .ht-quote[data-ht-reveal].is-in {
  transition: opacity .9s var(--ht-ease-out) var(--ht-d, 0ms), transform 1.2s var(--ht-ease-out) var(--ht-d, 0ms),
    border-color .4s var(--ht-ease-out), box-shadow .6s var(--ht-ease-out), translate .6s var(--ht-ease-out);
}

.ht-proj__show { padding-bottom: clamp(3rem, 7vw, 6rem); }
.ht-frame--lg { border-radius: 18px; }
.ht-frame--lg .ht-frame__bar { height: 42px; }
/* The screenshot drifts slightly while the page scrolls. The timeline is named on the frame: the
   frame and the shot clip their content (overflow), which would make view() watch them instead
   of the page, so the picture never moved. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ht-frame--lg { view-timeline: --ht-shot block; }
    .ht-frame--lg .ht-frame__shot img {
      scale: 1.08;
      animation: ht-drift linear both;
      animation-timeline: --ht-shot;
      animation-range: cover;
    }
  }
}
@keyframes ht-drift {
  from { translate: 0 -3%; }
  to { translate: 0 3%; }
}

/* Content rows: numbered label on the left (sticky), text on the right; feature rows use the full
   width. Same rows as the service and About pages (.ht-sp__label / .ht-sp__num). */
.ht-proj__content { padding-bottom: clamp(2rem, 4vw, 3rem); }
.ht-proj__row {
  display: grid;
  gap: 1.5rem 3rem;
  padding: clamp(2.75rem, 5.5vw, 5rem) 0;
  border-top: 1px solid var(--ht-line);
}
@media (min-width: 992px) {
  .ht-proj__row { grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr); }
  .ht-proj__row--wide { grid-template-columns: minmax(0, 1fr); }
  .ht-proj__row:not(.ht-proj__row--wide) > .ht-sp__label { position: sticky; top: 6.5rem; align-self: start; }
  .ht-proj__row--wide > .ht-sp__label + * { margin-top: clamp(.5rem, 1.5vw, 1.25rem); }
}
.ht-proj__label {
  max-width: 20ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h3, clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.ht-proj__row--wide .ht-proj__label { max-width: 30ch; }

.ht-prose {
  max-width: 68ch;
  color: var(--ht-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.75;
}
.ht-prose > * { margin: 0; }
.ht-prose > * + * { margin-top: 1.1em; }
.ht-prose--lead > p:first-child { color: var(--ht-paper); font-size: 1.2em; line-height: 1.55; }
.ht-prose--after { margin-top: 2rem; }
.ht-prose--results { color: var(--ht-paper); font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.45; }
.ht-prose [style*="text-align"] { text-align: start !important; }
.ht-prose strong,
.ht-prose b { color: var(--ht-paper); font-weight: 600; }
.ht-prose a { color: var(--ht-paper); text-decoration: underline; text-underline-offset: 3px; }
.ht-prose ul,
.ht-prose ol { padding: 0; list-style: none; }
.ht-prose li { position: relative; padding-inline-start: 1.6em; }
.ht-prose li + li { margin-top: .55em; }
.ht-prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .85em;
  width: .75em;
  height: 1px;
  background: var(--ht-mist);
}
.ht-prose h3 { color: var(--ht-paper); font-size: 1.125em; font-weight: 650; font-stretch: var(--ht-semi); }

/* Feature grid ("Label: text" lists). Same flat cards as the service pages (.ht-card): rule that
   draws in, light under the mouse, the rule glows where the mouse is (see "Numbered cards"). */
.ht-proj { --ht-cell-x: 15px; } /* = the container padding; the same inset as the service and About cards */
.ht-feats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 calc(-1 * var(--ht-cell-x));
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ht-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ht-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ht-feat {
  position: relative;
  isolation: isolate;
  padding: 1.5rem var(--ht-cell-x) 1.85rem;
}
.ht-feat__title {
  margin: 0 0 .55rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-item, clamp(1.1875rem, 1.05rem + .4vw, 1.375rem));
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.ht-feat__text { color: var(--ht-mist); font-size: .9375rem; line-height: 1.65; transition: color .4s var(--ht-ease-out); }

/* Challenge + solution side by side */
.ht-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .ht-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ht-pair__card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
}
.ht-pair__card--solution { background: rgba(255, 255, 255, .045); }
.ht-pair__title {
  margin: 0 0 1rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h4, clamp(1.375rem, 1.1rem + .9vw, 1.875rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.1;
  letter-spacing: -.02em;
}

/* Technologies */
.ht-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ht-chip {
  padding: .6rem 1.05rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 999px;
  color: var(--ht-paper);
  font: 600 .875rem/1.2 var(--ht-font);
  font-stretch: var(--ht-semi);
  transition: border-color .3s var(--ht-ease-out), background-color .3s var(--ht-ease-out);
}

/* Gallery (lightbox from the original theme: .gallery): a numbered row like the others. Each
   picture lifts its border and shows a "View" label at the mouse (hitech.js tilt block). */
.ht-proj__gallery { padding-bottom: clamp(4rem, 8vw, 7rem); }
.ht-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 768px) {
  .ht-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ht-gallery__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ht-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  aspect-ratio: 1920 / 919;
  cursor: zoom-in;
  transition: border-color .4s var(--ht-ease-out), box-shadow .5s var(--ht-ease-out);
}
.ht-gallery__item img,
.ht-proj .gallery img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: top center;
  transition: scale 1.1s var(--ht-ease-out);
}
.ht-gallery__item,
.ht-gallery__item:hover { color: var(--ht-paper); } /* not the theme's link blue (touch keeps :hover after a tap) */
.ht-gallery__item:focus-visible { border-color: var(--ht-paper); }
.ht-gallery__item:focus-visible img { scale: 1.04; }
@media (hover: hover) and (pointer: fine) {
  .ht-gallery__item:hover { border-color: var(--ht-line-strong); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
  .ht-gallery__item:hover img { scale: 1.04; }
}

/* Next project */
.ht-next {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--ht-line);
}
.ht-next__inner {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 992px) {
  .ht-next__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(3rem, 6vw, 6rem); }
}
.ht-next__label { margin-bottom: 1.1rem; } /* .ht-kicker */
.ht-next__title {
  margin: 0;
  font-family: var(--ht-font);
  font-size: var(--ht-h2-xl, clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ht-next__go { /* round arrow after the title: fills Signal while the block is hovered / focused */
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  color: var(--ht-paper);
  transition: background-color .4s var(--ht-ease-out), border-color .4s var(--ht-ease-out), box-shadow .5s var(--ht-ease-out);
}
.ht-motion .ht-next__go[data-ht-reveal].is-in { /* rises in, and keeps its own hover transitions */
  transition: opacity .9s var(--ht-ease-out) var(--ht-d, 0ms), transform 1.2s var(--ht-ease-out) var(--ht-d, 0ms),
    background-color .4s var(--ht-ease-out), border-color .4s var(--ht-ease-out), box-shadow .5s var(--ht-ease-out);
}
.ht-next__go svg { fill: currentColor; transition: transform .45s var(--ht-ease-out); }
.ht-next__inner.is-hover .ht-next__go,
.ht-next__inner:focus-within .ht-next__go {
  border-color: var(--ht-signal);
  background: var(--ht-signal);
  box-shadow: var(--ht-glow);
}
.ht-next__inner.is-hover .ht-next__go svg,
.ht-next__inner:focus-within .ht-next__go svg { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .ht-next__inner:hover .ht-next__go { border-color: var(--ht-signal); background: var(--ht-signal); box-shadow: var(--ht-glow); }
  .ht-next__inner:hover .ht-next__go svg { transform: translateX(3px); }
  .rtl .ht-next__inner:hover .ht-next__go svg { transform: translateX(-3px); }
}
.rtl .ht-next__inner.is-hover .ht-next__go svg,
.rtl .ht-next__inner:focus-within .ht-next__go svg { transform: translateX(-3px); }
.ht-next__link,
.ht-next__link:hover,
.ht-next__link:focus { color: var(--ht-paper); text-decoration: none; }
.ht-next__link::after { /* the whole block is the link */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.ht-next__inner.is-hover .ht-next__link,
.ht-next__link:focus-visible { color: var(--ht-signal-soft, #9fb0ff); }
.ht-next__link { transition: color .35s var(--ht-ease-out); }

/* =========================================================================
   Service pages (service.blade.php)
   ========================================================================= */
@media (min-width: 1200px) {
  .ht-sp .container { max-width: min(1360px, calc(100% - 70px)); } /* same width as the portfolio and project pages */
}
.ht-sp {
  --ht-cell-x: 15px; /* text inset of cards = the container padding; their rules run into the side space */
  position: relative;
  background: var(--ht-ink);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-sp :focus-visible,
.ht-formbox :focus-visible,
.ht-dock:focus-visible {
  outline: 2px solid var(--ht-signal);
  outline-offset: 3px;
}
.ht-sp :focus:not(:focus-visible),
.ht-formbox :focus:not(:focus-visible) { outline: none; }

/* (Buttons .ht-pill / .ht-ghost: "Buttons" above, in the project page part.) */

/* ---------- Hero ---------- */
.ht-sp__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--ht-hero-top, clamp(10rem, 15vw, 13rem)) 0 clamp(4rem, 8vw, 6.5rem); /* clears the original header */
}
.ht-sp__hero::before { /* faint light behind the icon: a circle as wide as the box, in a box as tall as the hero,
                          fading out over the hero's last 9rem - the hero never ends in a hard line (the light
                          used to be cut there by the hero's overflow while still ~4% white) */
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  right: -12%;
  width: min(80vw, 1100px);
  background: radial-gradient(circle min(40vw, 550px) at 50% min(40vw, 550px), rgba(255, 255, 255, .07), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 9rem), transparent);
          mask-image: linear-gradient(#000 calc(100% - 9rem), transparent);
  pointer-events: none;
}

/* The service icon, very large and outlined, inside thin rings. A soft light sweeps over it,
   and follows the mouse (hitech.js sets --mx / --my and the tilt --ht-rx / --ht-ry). */
.ht-sp__art {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(-5vw, -80px);
  width: min(46vw, 640px);
  aspect-ratio: 1;
  container-type: inline-size;
  pointer-events: none;
  transform: translateY(-44%) perspective(1400px) rotateX(var(--ht-rx, 0deg)) rotateY(var(--ht-ry, 0deg));
  transition: transform 1.2s var(--ht-ease-out);
}
@media (max-width: 991.98px) {
  .ht-sp__art {
    top: 5.5rem;
    right: -24vw;
    width: 80vw;
    opacity: .5;
    transform: none;
  }
}
.ht-sp__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ht-ring {
  fill: none;
  stroke: rgba(255, 255, 255, .13);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}
.ht-ring--1 { stroke: rgba(255, 255, 255, .26); stroke-dasharray: 2 10; }
.ht-ring--2,
.ht-ring--3 { transform: rotate(-90deg); } /* drawing starts at the top */
.ht-ring--3 { stroke: rgba(255, 255, 255, .08); }
.ht-sp__orbit {
  position: absolute;
  inset: 10.67%; /* same circle as ring 2 */
  border-radius: 50%;
}
.ht-sp__orbit i {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--ht-paper);
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, .55);
}
.ht-sp__mark { position: absolute; inset: 0; }
.ht-sp__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12rem;
  font-size: 34cqw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
}
.ht-sp__glyph i { display: block; line-height: 1; }
.ht-sp__glyph--scan,
.ht-sp__glyph--lit {
  color: rgba(255, 255, 255, .1);
  -webkit-text-stroke: 1.5px var(--ht-paper);
  transition: opacity .7s var(--ht-ease-out);
}
.ht-sp__glyph--scan {
  -webkit-mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .35) 55%, transparent);
          mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .35) 55%, transparent);
  -webkit-mask-size: 62% 62%;
          mask-size: 62% 62%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50% 40%;
          mask-position: 50% 40%;
}
.ht-sp__glyph--lit {
  opacity: 0;
  -webkit-mask-image: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 50%), #000, rgba(0, 0, 0, .4) 50%, transparent 78%);
          mask-image: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 50%), #000, rgba(0, 0, 0, .4) 50%, transparent 78%);
}
.ht-sp__art.is-tracking .ht-sp__glyph--lit { opacity: 1; }
.ht-sp__art.is-tracking .ht-sp__glyph--scan { opacity: 0; }

.ht-motion .ht-sp__mark { animation: ht-mark-in 1.8s var(--ht-ease-out) .1s backwards; }
.ht-motion .ht-sp__glyph--scan { animation: ht-scan 12s ease-in-out 1s infinite alternate; }
.ht-motion .ht-ring--2,
.ht-motion .ht-ring--3 {
  stroke-dasharray: 1;
  animation: ht-ring-draw 2.2s var(--ht-ease-inout) .2s backwards;
}
.ht-motion .ht-ring--3 { animation-delay: .45s; }
.ht-motion .ht-ring--1 { animation: ht-fade-in 1.6s ease .7s backwards, ht-spin 90s linear infinite; }
.ht-motion .ht-sp__orbit { animation: ht-fade-in 1s ease 1.8s backwards, ht-spin 22s linear infinite; }
.ht-sp__hero.is-paused .ht-sp__glyph--scan,
.ht-sp__hero.is-paused .ht-ring--1,
.ht-sp__hero.is-paused .ht-sp__orbit { animation-play-state: paused; }

@keyframes ht-mark-in {
  from { opacity: 0; transform: translateY(6%) scale(.92); }
}
@keyframes ht-ring-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes ht-fade-in {
  from { opacity: 0; }
}
@keyframes ht-spin {
  to { transform: rotate(360deg); }
}
@keyframes ht-scan {
  0%   { -webkit-mask-position: 18% 22%; mask-position: 18% 22%; }
  33%  { -webkit-mask-position: 84% 34%; mask-position: 84% 34%; }
  66%  { -webkit-mask-position: 36% 84%; mask-position: 36% 84%; }
  100% { -webkit-mask-position: 74% 66%; mask-position: 74% 66%; }
}

.ht-sp__intro { position: relative; max-width: 820px; }
@media (min-width: 992px) {
  .ht-sp__intro { max-width: min(64%, 840px); }
}
.ht-sp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.5rem;
  color: var(--ht-mist);
  font: 600 .875rem/1.3 var(--ht-font); /* the kicker's type, with the service icon instead of the rule */
  font-stretch: var(--ht-semi);
  font-variant-numeric: tabular-nums;
}
.ht-sp__eyebrow-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  color: var(--ht-paper);
  font-size: 1.05rem;
}
.ht-sp__title {
  max-width: 13ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (max-width: 359.98px) {
  .ht-sp__title { font-size: 1.875rem; } /* long single words ("Intelligence") still fit */
}
@media (min-width: 992px) { /* a long word stays whole ("Programming" at ~1044-1188px runs on into the intro's free room) */
  .ht-sp__title { overflow-wrap: normal; }
}
.ht-sp__lead {
  max-width: 56ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  color: var(--ht-text);
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}
.ht-sp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
@media (max-width: 479.98px) {
  .ht-sp__actions > * { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Moving band: what the service includes ---------- */
.ht-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  border-top: 1px solid var(--ht-line);
  border-bottom: 1px solid var(--ht-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-user-select: none;
          user-select: none;
}
.ht-marquee__track { display: flex; width: max-content; }
.ht-marquee__group { display: flex; flex: none; align-items: center; }
.ht-marquee__item {
  flex: none;
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(1.75rem, 1rem + 2.8vw, 3.75rem);
  font-weight: 740;
  font-stretch: var(--ht-wide);
  line-height: 1.15;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.ht-marquee__item:nth-child(4n+1) { /* every other word outlined */
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .6);
}
.ht-marquee__sep {
  flex: none;
  width: .5rem;
  height: .5rem;
  background: var(--ht-mist);
  transform: rotate(45deg);
}
.ht-motion .ht-marquee__track { animation: ht-marquee var(--ht-marquee-time, 45s) linear infinite; }
.ht-marquee:hover .ht-marquee__track,
.ht-marquee.is-paused .ht-marquee__track { animation-play-state: paused; }
/* Keyboard (client logos): while a logo has the focus ring the band stands still at its start, where
   the real logos are (the moving copies take no focus), the browser scrolls the focused one into
   view (hitech.js scrolls back when the focus leaves) and the edges do not fade the ring. */
.ht-marquee:has(:focus-visible) .ht-marquee__track { animation: none; }
.ht-marquee:has(:focus-visible) { -webkit-mask-image: none; mask-image: none; }
.rtl .ht-marquee__track { animation-direction: reverse; }
@keyframes ht-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Content blocks ---------- */
.ht-sp__content { padding-bottom: clamp(2rem, 4vw, 3rem); }
.ht-sp__row {
  display: grid;
  gap: 1.5rem 3rem;
  padding: clamp(2.75rem, 5.5vw, 5rem) 0;
  border-top: 1px solid var(--ht-line);
}
.ht-sp__row:first-child { border-top: 0; }
@media (min-width: 992px) {
  .ht-sp__row { grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr); }
  .ht-sp__row:not(.ht-sp__row--wide) > .ht-sp__label { position: sticky; top: 6.5rem; align-self: start; }
  .ht-sp__full { grid-column: 1 / -1; }
}
.ht-sp__row--wide .ht-sp__full { margin-top: clamp(.5rem, 1.5vw, 1.25rem); }
.ht-sp__label { display: grid; gap: .9rem; align-content: start; }
.ht-sp__num {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ht-mist);
  font: 600 .8125rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  transition: color .5s var(--ht-ease-out);
}
.ht-sp__num::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--ht-line-strong);
  transform-origin: 0 50%;
  transition: scale .6s var(--ht-ease-out), background-color .5s var(--ht-ease-out);
}
.rtl .ht-sp__num::after { transform-origin: 100% 50%; }
/* Entry: the number rises with its heading and its rule draws in. */
.ht-motion .ht-sp__num[data-ht-reveal]:not(.is-in)::after { transform: scaleX(0); }
.ht-motion .ht-sp__num[data-ht-reveal].is-in {
  transition: opacity .9s var(--ht-ease-out) var(--ht-d, 0ms), transform 1.2s var(--ht-ease-out) var(--ht-d, 0ms), color .5s var(--ht-ease-out);
}
.ht-motion .ht-sp__num[data-ht-reveal].is-in::after {
  transition: transform 1.1s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 200ms), scale .6s var(--ht-ease-out), background-color .5s var(--ht-ease-out);
}
/* The row being read (hitech.js marks it while it crosses the middle of the screen): white
   number, a longer white rule. Works with any input (it follows the scroll position). */
.is-current > .ht-sp__label .ht-sp__num { color: var(--ht-paper); }
.is-current > .ht-sp__label .ht-sp__num::after { background: var(--ht-paper); scale: 1.56 1; }
.ht-sp__heading {
  max-width: 20ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h3, clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.ht-sp .ht-sp__side > * + * { margin-top: 1.75rem; }

/* Flat cards: numbered cards ("Label: text" lists), "Why choose" reasons, project features and
   columns. A top rule draws in on entry. They are not links, so no Signal blue: under the mouse a
   white light follows the pointer and the rule glows brightest right above it (hitech.js sets
   --mx / --my through data-ht-spot). The last row of a grid is never left half empty. */
.ht-cards,
.ht-reasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 calc(-1 * var(--ht-cell-x));
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ht-cards,
  .ht-reasons,
  .ht-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.ht-cards, .ht-reasons, .ht-feats) > :nth-child(2n+1):last-child { grid-column: 1 / -1; } /* odd one out: full row */
}
@media (min-width: 1100px) {
  /* three per row on a 6-column grid: a last row of two shares the width; a last row of one
     becomes two rows of two */
  .ht-cards,
  .ht-feats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(.ht-cards, .ht-feats) > *,
  :is(.ht-cards, .ht-feats) > :nth-child(2n+1):last-child { grid-column: span 2; }
  :is(.ht-cards, .ht-feats) > :nth-child(3n+1):nth-last-child(2),
  :is(.ht-cards, .ht-feats) > :nth-child(3n+1):nth-last-child(2) ~ *,
  :is(.ht-cards, .ht-feats) > :nth-child(3n+1):nth-last-child(4),
  :is(.ht-cards, .ht-feats) > :nth-child(3n+1):nth-last-child(4) ~ * { grid-column: span 3; }
  .ht-reasons[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ht-reasons[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ht-reasons[data-count="3"] > :nth-child(n),
  .ht-reasons[data-count="4"] > :nth-child(n) { grid-column: auto; }
}
/* Owner's go-ahead (2026-11-02): reasons side by side share their number, title and text lines
   (subgrid), so the texts start level even when one title takes two lines. Browsers without
   subgrid keep the plain layout. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .ht-reason {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
}
.ht-card,
.ht-reason,
.ht-feat,
.ht-col {
  position: relative;
  isolation: isolate;
}
.ht-card,
.ht-reason { padding: 1.75rem var(--ht-cell-x) 2.25rem; }
:is(.ht-card, .ht-reason, .ht-feat, .ht-col)::before { /* the top rule (--ht-run: see "Floating buttons lane") */
  content: "";
  position: absolute;
  inset-block: 0 auto;
  inset-inline: 0 calc(-1 * var(--ht-run, 0px));
  height: 1px;
  background-color: var(--ht-line-strong);
  background-repeat: no-repeat;
  transform-origin: 0 50%;
  transition: background-color .4s var(--ht-ease-out), filter .5s var(--ht-ease-out);
}
.rtl :is(.ht-card, .ht-reason, .ht-feat, .ht-col)::before { transform-origin: 100% 50%; }
.ht-motion :is(.ht-card, .ht-reason, .ht-feat, .ht-col):not(.is-in)::before { transform: scaleX(0); }
.ht-motion :is(.ht-card, .ht-reason, .ht-feat, .ht-col).is-in::before {
  transition: transform 1.3s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 100ms), background-color .4s var(--ht-ease-out), filter .5s var(--ht-ease-out);
}
:is(.ht-card, .ht-reason, .ht-feat, .ht-col, .ht-solo)::after { /* soft white light under the mouse */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0 calc(-1 * var(--ht-run, 0px));
  z-index: -1;
  background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .085), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ht-ease-out);
}
/* (right to left, a rule that runs on starts further left: keep the light under the pointer) */
.rtl :is(.ht-card, .ht-reason, .ht-feat, .ht-col)::before,
.rtl :is(.ht-card, .ht-reason, .ht-feat, .ht-col)::after { background-position: var(--ht-run, 0px) 0; }
.ht-card__num { /* outlined numeral (the row number above the heading stays the small label) */
  display: block;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  color: transparent;
  font: 760 clamp(2rem, 1.6rem + 1vw, 2.75rem)/1 var(--ht-font);
  font-stretch: var(--ht-wide);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .45);
  transition: color .5s var(--ht-ease-out), -webkit-text-stroke-color .5s var(--ht-ease-out);
}
.ht-motion .ht-card.is-in .ht-card__num { animation: ht-num-flash 1.8s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 450ms) backwards; }
.ht-card__title,
.ht-reason__title {
  margin: 0 0 .7rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-item, clamp(1.1875rem, 1.05rem + .4vw, 1.375rem));
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.ht-card__text,
.ht-reason__text {
  color: var(--ht-mist);
  font-size: .9375rem;
  line-height: 1.65;
  transition: color .4s var(--ht-ease-out);
}
.ht-card__text > *,
.ht-reason__text > * { margin: 0; }
.ht-reason__num { /* large outlined number that lights up once on entry, and on hover */
  display: block;
  margin-bottom: 1.25rem;
  color: transparent;
  font-family: var(--ht-font);
  font-size: clamp(3.25rem, 2.2rem + 3vw, 5.5rem);
  font-weight: 760;
  font-stretch: var(--ht-wide);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
  transition: color .5s var(--ht-ease-out);
}
.ht-motion .ht-reason.is-in .ht-reason__num { animation: ht-num-flash 1.8s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 450ms) backwards; }
@keyframes ht-num-flash {
  0%, 100% { color: transparent; }
  40% { color: rgba(255, 255, 255, .95); }
}
@media (hover: hover) and (pointer: fine) {
  :is(.ht-card, .ht-reason, .ht-feat, .ht-col, .ht-solo):hover::after { opacity: 1; }
  :is(.ht-card, .ht-reason, .ht-feat, .ht-col):hover::before { /* the rule glows right above the pointer */
    background-color: rgba(255, 255, 255, .34);
    background-image: radial-gradient(14rem circle at var(--mx, 50%) 0, #fff 0%, rgba(255, 255, 255, .55) 35%, rgba(255, 255, 255, 0) 75%);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85));
  }
  .ht-card:hover .ht-card__num,
  .ht-reason:hover .ht-reason__num { color: var(--ht-paper); -webkit-text-stroke-color: var(--ht-paper); }
  :is(.ht-card, .ht-reason, .ht-feat):hover :is(.ht-card__text, .ht-reason__text, .ht-feat__text) { color: var(--ht-text); }
}

/* A single item (e.g. the AI plan): one highlighted panel with its own request button. */
.ht-solo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--ht-line-strong);
  border-radius: var(--ht-radius);
  background: rgba(255, 255, 255, .03);
}
@media (min-width: 768px) {
  .ht-solo { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
.ht-solo__title {
  margin: 0 0 .75rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h4, clamp(1.375rem, 1.1rem + .9vw, 1.875rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.ht-solo__text { max-width: 62ch; color: var(--ht-text); line-height: 1.7; }
.ht-solo__text > * { margin: 0; }

/* Tags (lists of short items) */
.ht-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ht-tag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .55rem 1.15rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 999px;
  color: var(--ht-paper);
  font: 600 .9375rem/1.25 var(--ht-font);
  font-stretch: var(--ht-semi);
  /* links (.ht-tag--link) also sweep white: see "Buttons" */
  transition: background-size .45s var(--ht-ease-out), background-color .3s var(--ht-ease-out), color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out);
}
.ht-tag::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ht-mist);
  transition: background-color .3s var(--ht-ease-out);
}
.ht-tag--more { border-style: dashed; color: var(--ht-mist); }
.ht-tag--more::before { display: none; }
@media (hover: hover) and (pointer: fine) { /* not links: a white light only */
  .ht-tag:not(.ht-tag--link):hover,
  .ht-chip:hover { border-color: var(--ht-paper); background-color: rgba(255, 255, 255, .06); }
  .ht-tag:not(.ht-tag--link):hover::before { background-color: var(--ht-paper); }
}

/* Columns (a heading with sub-headings, e.g. Web / Mobile / Systems programming): flat cards
   (rule, light under the mouse); the item under the mouse gets a white rule on its edge. */
.ht-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 calc(-1 * var(--ht-cell-x));
}
@media (min-width: 768px) {
  .ht-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ht-cols > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .ht-cols[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ht-cols[data-count="3"] > :nth-child(n) { grid-column: auto; }
}
.ht-col { padding: 1.5rem var(--ht-cell-x) 1.75rem; }
.ht-col__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.ht-col__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h4, clamp(1.375rem, 1.1rem + .9vw, 1.875rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.ht-col__count {
  color: var(--ht-mist);
  font: 600 .8125rem/1 var(--ht-font);
  font-variant-numeric: tabular-nums;
}
.ht-col__intro { margin-bottom: 1rem; }
.ht-col__list { margin: 0; padding: 0; list-style: none; }
.ht-col__item {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: 1rem 0;
  border-top: 1px solid var(--ht-line);
}
.ht-col__item:first-child { padding-top: 0; border-top: 0; }
.ht-col__item::before { /* white rule on the edge of the item under the mouse */
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  inset-inline-start: calc(-1 * var(--ht-cell-x));
  width: 2px;
  background: var(--ht-paper);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .45s var(--ht-ease-out);
}
.ht-col__item:first-child::before { top: 0; }
.ht-col__name { /* a list level below the column title: the item-title cut, one step smaller */
  color: var(--ht-paper);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.ht-col__text { color: var(--ht-mist); font-size: .9375rem; line-height: 1.6; transition: color .4s var(--ht-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ht-col__item:hover::before { transform: none; }
  .ht-col__item:hover .ht-col__text { color: var(--ht-text); }
}

/* ---------- Floating buttons lane ----------
   The back-to-top ring, Call and WhatsApp float in one column at the screen edge (hitech-fab.css:
   --ht-fab-edge + --ht-fab-main wide). From 768px, whatever sits at the inline end of a section
   keeps out of that lane, so no text passes under the buttons while the page scrolls:
   - wide flat grids (cards, reasons, features, columns, other services, home services, numbers):
     the grid gives the lane up (every column a little narrower) and the last card of each row lets
     its top rule (and its light) run on (--ht-run), so the rules still end in the gutter;
   - heads, tags and chips end at the lane; prose stays 68ch at most and never enters it;
   - boxed cards at the end of a row (testimonials, challenge / solution, the single plan): the box
     still runs to the edge, its text keeps out of the lane (a wider inner padding).
   --ht-lane = how far the lane reaches into the container: 0 once the space beside the container
   (--ht-free) is wide enough (~1540 px with the 1360 px container, ~1360 px with the theme's
   1180 px one). The sections below define both (containers 720 / 960 px wide, then 1360 on the
   revamped pages and About's wide bands, 1180 on the home page), so everything inside them can use
   var(--ht-lane, 0px); elsewhere it is 0. The grids' own "padding: 0" comes later in this file,
   hence the two-class selectors. */
@media (min-width: 768px) {
  .ht-sp, .ht-proj, .ht-next, .ht-home, .ht-services, .ht-stats, .ht-quotes {
    --ht-free: max(0px, (100vw - 720px) / 2);
    --ht-lane: max(0px, var(--ht-fab-edge, 24px) + var(--ht-fab-main, 56px) + 1.5rem - 15px - var(--ht-free));
  }
  :is(.ht-cards, .ht-reasons, .ht-feats, .ht-cols, .ht-more .ht-more__grid, .ht-services .ht-services__grid, .ht-stats__grid),
  :is(.ht-more__head, .ht-services__head, .ht-stats__head, .ht-quotes__head, .ht-sp__side > .ht-tags, .ht-proj__row > .ht-chips) {
    padding-inline-end: var(--ht-lane, 0px);
  }
  :is(.ht-sp, .ht-proj) :is(.ht-sp__row, .ht-sp__side, .ht-proj__row, .ht-about__statement) > .ht-prose {
    max-width: min(68ch, 100% - var(--ht-lane, 0px));
  }
  .ht-pair > :nth-child(2n) { --ht-run: var(--ht-lane, 0px); }
  .ht-quotes__grid[data-count="1"] > *,
  .ht-quotes__grid:not([data-count="1"]) > :nth-child(2n) { --ht-run: var(--ht-lane, 0px); }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* one column: these run to the edge */
  .ht-next__text { padding-inline-end: var(--ht-lane, 0px); }
  .ht-req .ht-req__text { max-width: min(68ch, 100% - var(--ht-lane, 0px)); }
}
@media (min-width: 992px) {
  .ht-sp, .ht-proj, .ht-next, .ht-home, .ht-services, .ht-stats, .ht-quotes { --ht-free: max(0px, (100vw - 960px) / 2); }
}
@media (min-width: 1200px) {
  .ht-home, .ht-services, .ht-stats, .ht-quotes { --ht-free: max(0px, (100vw - 1180px) / 2); } /* the theme's container */
  .ht-sp, .ht-proj, .ht-next, .ht-stats--wide, .ht-quotes--wide { --ht-free: max(0px, (100vw - min(1360px, 100vw - 70px)) / 2); } /* the wide container */
  :is(.ht-quotes__grid[data-count="3"], .ht-quotes__grid[data-count="5"], .ht-quotes__grid[data-count="6"]) > :nth-child(2n) { --ht-run: 0px; }
  :is(.ht-quotes__grid[data-count="3"], .ht-quotes__grid[data-count="5"], .ht-quotes__grid[data-count="6"]) > :nth-child(3n) { --ht-run: var(--ht-lane, 0px); }
}
/* boxed cards at the end of a row, and the single plan (always at the end of its row); a testimonial
   keeps its divider and name row across the card, only the quote itself steps out of the lane */
.ht-pair__card { padding-inline-end: max(clamp(1.5rem, 3vw, 2.5rem), var(--ht-run, 0px)); }
.ht-quote .ht-quote__text { margin-inline-end: max(0px, var(--ht-run, 0px) - clamp(1.75rem, 3.5vw, 3rem)); } /* minus the card's padding */
.ht-solo { padding-inline-end: max(clamp(1.75rem, 3.5vw, 2.75rem), var(--ht-lane, 0px)); }
/* the last card of each row: two per row ... */
@media (min-width: 768px) and (max-width: 1099.98px) {
  :is(.ht-cards, .ht-feats, .ht-reasons:not([data-count="5"]), .ht-cols) > :is(:nth-child(2n), :nth-child(2n+1):last-child),
  .ht-more__grid > :nth-child(2n) { --ht-run: var(--ht-lane); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ht-services__grid > :nth-child(2n) { --ht-run: var(--ht-lane); }
}
@media (min-width: 1024px) {
  .ht-services__grid > :nth-child(3n) { --ht-run: var(--ht-lane); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ht-reasons[data-count="5"] > :is(:nth-child(2n), :nth-child(2n+1):last-child),
  .ht-stats__grid > :nth-child(2n) { --ht-run: var(--ht-lane); }
}
@media (min-width: 992px) {
  .ht-stats__grid:not([data-count="3"]) > :nth-child(4n),
  .ht-stats__grid[data-count="3"] > :nth-child(3n) { --ht-run: var(--ht-lane); }
}
@media (min-width: 1100px) {
  :is(.ht-reasons:not([data-count="3"], [data-count="4"], [data-count="5"]), .ht-cols:not([data-count="3"])) > :is(:nth-child(2n), :nth-child(2n+1):last-child),
  /* ... three per row on the 6-column grid (a last row of two, or two rows of two) ... */
  :is(.ht-cards, .ht-feats) > :nth-child(3n):not(:nth-last-child(2)),
  :is(.ht-cards, .ht-feats) > :nth-child(3n+1):nth-last-child(4) + *,
  :is(.ht-cards, .ht-feats) > :last-child:not(:first-child),
  /* ... four per row ("Explore other services") ... */
  .ht-more__grid > :nth-child(4n),
  /* ... or all in one row */
  :is(.ht-reasons[data-count="3"], .ht-reasons[data-count="4"], .ht-cols[data-count="3"]) > :last-child { --ht-run: var(--ht-lane); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ht-reasons[data-count="5"] > :is(:nth-child(3), :nth-child(5)) { --ht-run: var(--ht-lane); }
}
@media (min-width: 1200px) {
  .ht-reasons[data-count="5"] > :last-child { --ht-run: var(--ht-lane); }
}

/* ---------- Request block ---------- */
.ht-req {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* clips the glow without breaking the sticky form */
  padding: clamp(5rem, 10vw, 8.5rem) 0;
  border-top: 1px solid var(--ht-line);
  scroll-margin-top: 3.5rem;
}
.ht-req::before { /* soft blue light behind the form: this is where you act */
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  right: -12%;
  width: min(75vw, 950px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(67, 97, 255, .16), transparent 70%);
  pointer-events: none;
}
.ht-req__grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 992px) {
  .ht-req__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "intro panel" "aside panel";
    grid-template-rows: auto 1fr;
    gap: 3rem clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .ht-req__intro { grid-area: intro; }
  .ht-req__panel { grid-area: panel; }
  .ht-req__aside { grid-area: aside; }
}
@media (min-width: 992px) and (min-height: 780px) {
  .ht-req__panel { position: sticky; top: 5.5rem; } /* the form stays in view while the left side scrolls */
}
.ht-req__label { margin-bottom: 1.5rem; } /* .ht-kicker */
.ht-req__title {
  max-width: 20ch;
  margin: 0;
  color: var(--ht-paper);
  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: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ht-req__text { margin-top: 1.5rem; color: var(--ht-mist); }
.ht-req__text strong,
.ht-req__text b { color: var(--ht-paper); }
/* .ht-req__subtitle ("What happens next", "Prefer to talk directly?"): the kicker look, see the top */

.ht-steps {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ht-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.ht-step__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  background: var(--ht-ink);
  color: var(--ht-paper);
  font: 650 .9375rem/1 var(--ht-font);
  font-variant-numeric: tabular-nums;
}
.ht-step:not(:last-child)::after { /* line to the next step */
  content: "";
  position: absolute;
  top: 2.5rem;
  bottom: -1.5rem;
  left: calc(1.25rem - .5px);
  width: 1px;
  background: var(--ht-line-strong);
  transform-origin: 50% 0;
}
.rtl .ht-step:not(:last-child)::after { left: auto; right: calc(1.25rem - .5px); }
.ht-motion .ht-step:not(.is-in)::after { transform: scaleY(0); }
.ht-motion .ht-step.is-in::after { transition: transform .9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 300ms); }
.ht-step__title { display: block; margin: .4rem 0 .3rem; color: var(--ht-paper); font-size: var(--ht-item, clamp(1.1875rem, 1.05rem + .4vw, 1.375rem)); font-weight: 650; font-stretch: var(--ht-semi); line-height: 1.25; letter-spacing: -.01em; }
.ht-step__text { display: block; color: var(--ht-mist); font-size: .9375rem; line-height: 1.55; }

.ht-direct {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ht-line);
}
.ht-direct__list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ht-direct__link {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .45rem 0;
  color: var(--ht-paper);
  text-decoration: none;
  transition: color .3s var(--ht-ease-out);
}
.ht-direct__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  font-size: 1rem;
  transition: background-color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), color .3s var(--ht-ease-out);
}
.ht-direct__name {
  display: block;
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
.ht-direct__value { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ht-direct__link:hover,
.ht-direct__link:focus-visible { color: var(--ht-paper); text-decoration: none; }
.ht-direct__link:focus-visible .ht-direct__icon {
  border-color: var(--ht-signal);
  background: var(--ht-signal);
  color: var(--ht-paper);
}
@media (hover: hover) { /* touch: a tapped row keeps :hover - no stuck Signal icon */
  .ht-direct__link:hover .ht-direct__icon {
    border-color: var(--ht-signal);
    background: var(--ht-signal);
    color: var(--ht-paper);
  }
}

/* ---------- Other services (cards reuse the home page .ht-svc look) ---------- */
.ht-more {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--ht-line);
}
.ht-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ht-more__title {
  margin: 0;
  color: var(--ht-paper);
  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: .98;
  letter-spacing: -.035em;
}
.ht-more__all {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: 4px;
  color: var(--ht-paper);
  font: 600 .9375rem/1.2 var(--ht-font);
  font-stretch: var(--ht-semi);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ht-ease-out), color .3s;
}
.ht-more__all svg { fill: currentColor; transition: transform .35s var(--ht-ease-out); }
.ht-more__all:hover { color: var(--ht-paper); text-decoration: none; } /* touch: a tapped link keeps :hover - its line stays */
.ht-more__all:focus-visible { color: var(--ht-paper); text-decoration: none; background-size: 0 1px; }
@media (hover: hover) {
  .ht-more__all:hover { background-size: 0 1px; }
  .ht-more__all:hover svg { transform: translateX(4px); }
  .rtl .ht-more__all:hover svg { transform: translateX(-4px); }
}
.ht-more__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.5rem, 1.4vw, 1.25rem) clamp(1rem, 2.2vw, 2.25rem);
  margin: 0 calc(-1 * var(--ht-cell-x));
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ht-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ht-more__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) { /* phones: swipe sideways instead of a long list */
  .ht-more__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ht-more__grid::-webkit-scrollbar { display: none; }
  .ht-more__grid > * { scroll-snap-align: start; }
}
.ht-more .ht-svc__icon { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); font-size: 2rem; }
.ht-more .ht-svc__title { /* the item-title role, as the other cards on the service page */
  font-size: var(--ht-item, clamp(1.1875rem, 1.05rem + .4vw, 1.375rem));
  font-stretch: var(--ht-semi);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.ht-more .ht-svc__text { -webkit-line-clamp: 3; line-clamp: 3; }

/* ---------- Floating "Request this service" button ----------
   Centred at the bottom, on one line with the floating WhatsApp button (hitech-fab.css sets
   --ht-fab-*; it also moves up while the cookie notice is open). */
.ht-dock {
  position: fixed;
  bottom: calc(var(--ht-fab-bottom, 18px) + (var(--ht-fab-main, 56px) - 52px) / 2); /* centre = WhatsApp's centre */
  left: 50%;
  z-index: 990;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  max-width: calc(100vw - 2 * (var(--ht-fab-edge, 24px) + var(--ht-fab-main, 56px) + var(--ht-fab-gap, 12px)));
  min-height: 52px;
  padding: 0 1.3rem 0 .45rem;
  border-radius: 999px;
  background: linear-gradient(var(--ht-signal), var(--ht-signal)) no-repeat 0 0 / 0 100%, var(--ht-paper); /* the pill's Signal sweep */
  color: var(--ht-ink);
  font: 600 .9375rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, 160%, 0);
  transition: transform .6s var(--ht-ease-out), opacity .4s var(--ht-ease-out), visibility 0s linear .6s, background-size .45s var(--ht-ease-out), color .3s, box-shadow .45s var(--ht-ease-out), bottom .5s var(--ht-ease-out);
}
.ht-dock.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0);
  transition: transform .6s var(--ht-ease-out), opacity .4s var(--ht-ease-out), visibility 0s, background-size .45s var(--ht-ease-out), color .3s, box-shadow .45s var(--ht-ease-out), bottom .5s var(--ht-ease-out);
}
.ht-dock:hover { color: var(--ht-ink); text-decoration: none; } /* touch: a tapped dock keeps :hover - no theme link blue */
.ht-dock:focus-visible {
  background-size: 100% 100%;
  color: var(--ht-paper);
  text-decoration: none;
  box-shadow: var(--ht-glow);
}
@media (hover: hover) {
  .ht-dock:hover {
    background-size: 100% 100%;
    color: var(--ht-paper);
    text-decoration: none;
    box-shadow: var(--ht-glow);
  }
  .ht-dock:hover > svg { transform: translateX(4px); }
}
.ht-dock svg { flex: none; fill: currentColor; transition: transform .35s var(--ht-ease-out); }
.ht-dock:focus-visible > svg { transform: translateX(4px); }
.rtl .ht-dock { background-position: 100% 0, 0 0; } /* right to left: the fill comes from the right, the arrow nudges left */
.rtl .ht-dock:focus-visible > svg { transform: translateX(-4px); }
@media (hover: hover) {
  .rtl .ht-dock:hover > svg { transform: translateX(-4px); }
}
.ht-dock__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ht-ink);
  color: var(--ht-paper);
  font-size: .95rem;
}
.ht-dock__text { overflow: hidden; text-overflow: ellipsis; }
.ht-dock__short { display: none; }
@media (max-width: 479.98px) { /* phones: short text, still clear of the WhatsApp button */
  .ht-dock {
    bottom: calc(var(--ht-fab-bottom, 16px) + (var(--ht-fab-main, 52px) - 48px) / 2);
    min-height: 48px;
    padding: 0 1.1rem;
    gap: .5rem;
    font-size: .875rem;
  }
  .ht-dock__icon,
  .ht-dock__long { display: none; }
  .ht-dock__short { display: inline; }
}
.menu-open .ht-dock,
html.ht-hs-lock .ht-dock { opacity: 0 !important; visibility: hidden !important; }

/* =========================================================================
   Request form (includes/ht-request-form.blade.php): service pages + contact page
   ========================================================================= */
@property --ht-beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.ht-formbox {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ht-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)), #050506;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  scroll-margin-top: 6rem;
}
.ht-formbox::before { /* a light that runs along the border; pauses while the visitor types */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--ht-beam), transparent 0deg 220deg, rgba(67, 97, 255, 0) 235deg, rgba(67, 97, 255, .9) 300deg, rgba(255, 255, 255, .95) 322deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ht-ease-out);
}
.ht-motion .ht-formbox::before { opacity: 1; animation: ht-beam 6s linear infinite; }
.ht-formbox:focus-within::before { opacity: .3; animation-play-state: paused; }
.ht-formbox.is-paused::before { animation-play-state: paused; }
@keyframes ht-beam {
  to { --ht-beam: 360deg; }
}

.ht-form {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.ht-form__row { display: grid; gap: 1rem; }
@media (min-width: 576px) {
  .ht-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ht-field { position: relative; margin: 0; }
.ht-field__control {
  display: block;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 1.6rem 1rem .5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .035);
  color: var(--ht-paper);
  font: 500 1rem/1.4 var(--ht-font);
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color .25s var(--ht-ease-out), background-color .25s var(--ht-ease-out), box-shadow .25s var(--ht-ease-out);
}
.ht-field__control:hover { border-color: rgba(255, 255, 255, .32); }
.ht-field__control:focus {
  border-color: var(--ht-signal);
  outline: none;
  background-color: rgba(67, 97, 255, .07);
  box-shadow: 0 0 0 3px rgba(67, 97, 255, .28);
}
.ht-field__control:-webkit-autofill,
.ht-field__control:-webkit-autofill:hover,
.ht-field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ht-paper);
  -webkit-box-shadow: 0 0 0 100px #15161b inset;
  caret-color: var(--ht-paper);
  transition: background-color 9999s;
}
textarea.ht-field__control {
  min-height: 150px;
  padding: 1.85rem 1rem .75rem;
  resize: vertical;
}
.ht-field--select .ht-field__control {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: right 1.1rem center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ht-field__control option { background: #121214; color: var(--ht-paper); }
.ht-field__label {
  position: absolute;
  top: 1.2rem;
  right: 1rem;
  left: 1rem;
  margin: 0;
  overflow: hidden;
  color: var(--ht-mist);
  font: 500 1rem/1.2 var(--ht-font);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .25s var(--ht-ease-out), color .25s var(--ht-ease-out);
}
.rtl .ht-field__label { transform-origin: 100% 0; }
.ht-field__control:focus + .ht-field__label,
.ht-field__control:not(:placeholder-shown) + .ht-field__label,
.ht-field__control:-webkit-autofill + .ht-field__label,
.ht-field--select .ht-field__label { transform: translateY(-.62rem) scale(.78); }
.ht-field__control:focus + .ht-field__label { color: var(--ht-signal-soft); }
.ht-field__opt { color: rgba(255, 255, 255, .55); font-weight: 400; } /* AA on the field (~6:1) */
.ht-field.is-invalid .ht-field__control { border-color: #ff8a8a; }
.ht-field.is-invalid .ht-field__control:focus { box-shadow: 0 0 0 3px rgba(255, 110, 110, .25); }
.ht-field.is-invalid .ht-field__label { color: #ffb8b8; }
.ht-field__error {
  display: block;
  margin-top: .45rem;
  color: #ffb0b0;
  font-size: .8125rem;
  line-height: 1.4;
}
.ht-field__error:empty { display: none; }

.ht-form__captcha { min-height: 78px; }
.ht-form__captcha .g-recaptcha { min-height: 78px; }
.ht-form__captcha.is-invalid .g-recaptcha iframe { border-radius: 4px; box-shadow: 0 0 0 2px #ff8a8a; }
@media (max-width: 359.98px) {
  .ht-form__captcha .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
}
.ht-form__alert {
  padding: .9rem 1rem;
  border: 1px solid rgba(255, 138, 138, .55);
  border-radius: 12px;
  background: rgba(255, 80, 80, .08);
  color: #ffd2d2;
  font-size: .9375rem;
  line-height: 1.5;
}
.ht-form__foot { display: grid; gap: 1rem; margin-top: .25rem; }
.ht-form__submit {
  justify-content: center;
  gap: .75rem;
  width: 100%;
  min-height: 60px;
  border: 0;
  font-size: 1.0625rem;
  cursor: pointer;
}
.ht-form__submit[disabled] { cursor: progress; opacity: .9; }
.ht-form__busy {
  display: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ht-spin .7s linear infinite;
}
.ht-form.is-sending .ht-form__busy { display: inline-block; }
.ht-form.is-sending .ht-pill__arrow { display: none; }
.ht-form__legal {
  margin: 0;
  color: var(--ht-mist);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
}
.ht-form__legal a {
  color: var(--ht-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s var(--ht-ease-out); /* not the theme's "all": the focus ring shows at once */
}
.ht-form__legal a:hover { color: var(--ht-paper); } /* touch: no stuck hover, no theme link blue */
@media (hover: hover) {
  .ht-form__legal a:hover { color: var(--ht-signal-soft); }
}

/* Sent: a check draws itself, then the thanks and what was asked for. */
.ht-form__done {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  text-align: center;
}
.ht-form__done:focus { outline: none; }
.ht-form__check { width: 76px; height: 76px; }
.ht-form__check circle { fill: rgba(67, 97, 255, .12); stroke: var(--ht-signal); stroke-width: 2; stroke-dasharray: 151; }
.ht-form__check path { fill: none; stroke: var(--ht-paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; }
.ht-motion .ht-form__done:not([hidden]) .ht-form__check circle { animation: ht-check-ring .9s var(--ht-ease-out) .1s backwards; }
.ht-motion .ht-form__done:not([hidden]) .ht-form__check path { animation: ht-check-tick .5s var(--ht-ease-out) .75s backwards; }
@keyframes ht-check-ring { from { stroke-dashoffset: 151; fill: rgba(67, 97, 255, 0); } }
@keyframes ht-check-tick { from { stroke-dashoffset: 36; } }
.ht-form__done-title {
  margin: .5rem 0 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 720;
  font-stretch: var(--ht-wide);
  letter-spacing: -.02em;
}
.ht-form__done-text { max-width: 40ch; margin: 0; color: var(--ht-text); line-height: 1.6; }
.ht-form__done-service {
  margin: 0;
  padding: .55rem 1.1rem;
  border: 1px solid var(--ht-line);
  border-radius: 999px;
  color: var(--ht-mist);
  font-size: .875rem;
}
.ht-form__done-service strong { color: var(--ht-paper); font-weight: 600; }
.ht-form__done-actions { display: grid; justify-items: center; gap: 1rem; margin-top: .75rem; }
.ht-form__done-wa {
  color: var(--ht-mist);
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s;
}
.ht-form__done-wa:hover { color: var(--ht-paper); }

/* Heading inside the form (contact page): a row heading (--ht-h3). */
.ht-form__title {
  margin: 0 0 .5rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h3, clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Service field: the chosen service's icon inside the field (it changes with the choice), "Change"
   once something is chosen, and a short note when the link the visitor followed chose it. */
.ht-field--pick .ht-field__control { padding-left: 3.85rem; }
.ht-field--pick .ht-field__label { left: 3.85rem; }
.rtl .ht-field--pick .ht-field__control { padding-left: 2.75rem; padding-right: 3.85rem; }
.rtl .ht-field--pick .ht-field__label { left: 1rem; right: 3.85rem; }
.ht-field__icon {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: .8rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  color: var(--ht-mist);
  font-size: .875rem;
  pointer-events: none;
  transition: background-color .35s var(--ht-ease-out), border-color .35s var(--ht-ease-out), color .35s var(--ht-ease-out);
}
.rtl .ht-field__icon { left: auto; right: .8rem; }
.ht-field--pick.is-chosen .ht-field__icon {
  border-color: var(--ht-paper);
  background: var(--ht-paper);
  color: var(--ht-ink);
}
.ht-field--pick:hover .ht-field__icon { border-color: var(--ht-paper); }
.ht-field__icon i.is-swap { animation: ht-pick-swap .55s var(--ht-ease-out); }
@keyframes ht-pick-swap {
  from { opacity: 0; transform: scale(.4) rotate(-30deg); }
}
.ht-field__change {
  position: absolute;
  top: 30px;
  right: 2.6rem;
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  pointer-events: none;
  transition: opacity .3s var(--ht-ease-out), color .3s;
}
.rtl .ht-field__change { right: auto; left: 2.6rem; }
.ht-field--pick.is-chosen .ht-field__change { opacity: 1; }
.ht-field--pick.is-chosen .ht-field__control { padding-right: 6.5rem; }
.ht-field--pick:hover .ht-field__change,
.ht-field--pick:focus-within .ht-field__change { color: var(--ht-paper); }
@media (max-width: 419.98px) {
  .ht-field__change { display: none; }
  .ht-field--pick.is-chosen .ht-field__control { padding-right: 2.75rem; }
}
.ht-field__hint {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
  color: var(--ht-signal-soft);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
}
.ht-field__hint i { font-size: .75rem; }
.ht-field.is-invalid .ht-field__hint { display: none; }

/* Arrived with a service already chosen: a light runs through the field once it is seen. */
.ht-field--pick::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(100deg, transparent 35%, rgba(159, 176, 255, .3) 50%, transparent 65%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
}
.ht-motion .ht-field--pick.is-flash::after { animation: ht-pick-sweep 1.5s var(--ht-ease-inout) .25s; }
.ht-motion .ht-field--pick.is-flash .ht-field__control { animation: ht-pick-glow 2.4s var(--ht-ease-out) .25s backwards; }
.ht-motion .ht-field--pick.is-flash .ht-field__icon { animation: ht-pick-pop .9s var(--ht-ease-out) .3s backwards; }
@keyframes ht-pick-sweep {
  0% { opacity: 1; background-position: 130% 0; }
  85% { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}
@keyframes ht-pick-glow {
  0%, 35% { border-color: var(--ht-signal); box-shadow: 0 0 0 3px rgba(67, 97, 255, .3), 0 0 36px -4px rgba(67, 97, 255, .55); }
}
@keyframes ht-pick-pop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.12); }
}

/* =========================================================================
   Contact page (contact.blade.php): title, the ways to reach us, the request form, what
   happens next, the map and the client logos. Shares the form, the steps (.ht-step) and the
   logos (.ht-logos) with the service and About pages.
   ========================================================================= */
@media (min-width: 1200px) { /* same width as the service and About pages, never closer than 50px to the screen edge */
  .ht-cp .container { max-width: min(1360px, 100% - 70px); }
}
.ht-cp {
  position: relative;
  background: var(--ht-ink);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-cp :focus-visible {
  outline: 2px solid var(--ht-signal);
  outline-offset: 3px;
}
.ht-cp :focus:not(:focus-visible) { outline: none; }

.ht-cp__top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(10rem, 15vw, 13rem) 0 clamp(4.5rem, 9vw, 7rem); /* clears the original header */
}
.ht-cp__top::before { /* soft Signal light behind the form: this is where you act */
  content: "";
  position: absolute;
  z-index: -2;
  top: 4%;
  right: -16%;
  width: min(85vw, 1100px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(67, 97, 255, .16), transparent 70%);
  pointer-events: none;
}

/* Waves: thin rings grow out from behind the form, like a signal. */
.ht-cp__waves {
  position: absolute;
  z-index: -1;
  top: 34rem;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
@media (min-width: 992px) {
  .ht-cp__waves { top: 26rem; left: 74%; }
}
.ht-cp__waves i {
  position: absolute;
  top: 0;
  left: 0;
  width: min(92vw, 980px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.35);
}
.ht-cp__waves i:nth-child(2) { transform: translate(-50%, -50%) scale(.55); }
.ht-cp__waves i:nth-child(3) { transform: translate(-50%, -50%) scale(.75); }
.ht-cp__waves i:nth-child(4) { transform: translate(-50%, -50%) scale(.95); }
.ht-motion .ht-cp__waves i { opacity: 0; animation: ht-wave 14s linear infinite; }
.ht-motion .ht-cp__waves i:nth-child(2) { animation-delay: -3.5s; }
.ht-motion .ht-cp__waves i:nth-child(3) { animation-delay: -7s; }
.ht-motion .ht-cp__waves i:nth-child(4) { animation-delay: -10.5s; }
.ht-cp__top.is-paused .ht-cp__waves i { animation-play-state: paused; }
@keyframes ht-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

/* Layout. Phones: title, ways, form, next steps. Computers: title + ways left, form right,
   next steps across. */
.ht-cp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "ways" "panel" "next";
  gap: clamp(2.5rem, 7vw, 3.5rem);
}
.ht-cp__intro { grid-area: intro; }
.ht-cp__ways { grid-area: ways; }
.ht-cp__panel { grid-area: panel; scroll-margin-top: 1.5rem; }
.ht-cp__next { grid-area: next; }
@media (min-width: 992px) {
  .ht-cp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    grid-template-areas: "intro panel" "ways panel" "next next";
    grid-template-rows: auto 1fr auto;
    gap: clamp(2.5rem, 4vw, 3.5rem) clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .ht-cp__ways { align-self: end; }
  /* "/contact#request": the form is in the first screen, so the page opens at the top. */
  .ht-cp__panel { scroll-margin-top: 100vh; }
  .ht-cp__next {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid var(--ht-line);
  }
}

.ht-cp__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (min-width: 992px) { /* "Contact us" stays on one line next to the form: sized by its column */
  .ht-cp__intro { container-type: inline-size; }
  .ht-cp__title { font-size: min(6.25rem, 6.6vw); font-size: min(6.25rem, 15.4cqi); }
}
@media (min-width: 992px) and (max-height: 860px) { /* short windows: the same height cap as the other page titles (--ht-h1) */
  .ht-cp__title { font-size: min(6.25rem, 6.6vw, 12.5vh); font-size: min(6.25rem, 15.4cqi, 12.5vh); }
}
.ht-cp__lead {
  max-width: 44ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  color: var(--ht-text);
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}

/* Ways to reach us: call, WhatsApp, email, address. Each row is one big link; the light follows
   the mouse, the icon fills, a Signal rule draws in under it. Phone and email can be copied. */
.ht-ways {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ht-line);
  list-style: none;
}
.ht-way {
  position: relative;
  border-bottom: 1px solid var(--ht-line);
}
.ht-way::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--ht-signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ht-ease-out);
  pointer-events: none;
}
.rtl .ht-way::after { transform-origin: 100% 50%; }
@media (hover: hover) {
  .ht-way:hover::after { transform: scaleX(1); }
}
.ht-way:has(:focus-visible)::after { transform: scaleX(1); } /* keyboard: a tapped or clicked row keeps no rule */
@supports not selector(:has(*)) {
  .ht-way:focus-within::after { transform: scaleX(1); }
}
.ht-way--whatsapp::after { background: #25d366; }
.ht-way__link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem .25rem;
  color: var(--ht-paper);
  text-decoration: none;
  transition: color .3s var(--ht-ease-out); /* not the theme's "all": the focus ring shows at once */
}
.ht-way--copy .ht-way__link { padding-right: 3.6rem; }
.rtl .ht-way--copy .ht-way__link { padding-right: .25rem; padding-left: 3.6rem; }
.ht-way__link::before { /* light under the mouse */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .06), transparent 65%);
  opacity: 0;
  transition: opacity .4s var(--ht-ease-out);
  pointer-events: none;
}
.ht-way__link:hover,
.ht-way__link:focus-visible {
  color: var(--ht-paper);
  text-decoration: none;
}
.ht-way__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  font-size: 1.125rem;
  transition: background-color .35s var(--ht-ease-out), border-color .35s var(--ht-ease-out), color .35s var(--ht-ease-out), transform .6s var(--ht-ease-out);
}
.ht-way__label { /* under the mouse it turns into what the link does ("Call now", "Get directions") */
  display: block;
  height: 1.3em;
  overflow: hidden;
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
.ht-way__label-in {
  display: flex;
  flex-direction: column;
  transition: transform .55s var(--ht-ease-out);
}
.ht-way__label-in > span { display: block; height: 1.3em; white-space: nowrap; }
.ht-way__label-go { color: var(--ht-signal-soft); }
.ht-way--whatsapp .ht-way__label-go { color: #5ee69a; }
@media (hover: hover) {
  .ht-way__link:hover .ht-way__label-in { transform: translate3d(0, -50%, 0); }
}
.ht-way__link:focus-visible .ht-way__label-in { transform: translate3d(0, -50%, 0); }
.ht-way__value {
  display: block;
  margin-top: .2rem;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.4375rem);
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.28;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  transition: transform .6s var(--ht-ease-out);
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ht-way__value { font-size: 1.0625rem; } /* narrow column next to the form */
}
.ht-way__go { display: inline-flex; align-items: center; }
.ht-way__go svg { flex: none; fill: currentColor; transition: transform .4s var(--ht-ease-out); }
.ht-way__link:focus-visible .ht-way__icon {
  border-color: var(--ht-signal);
  background: var(--ht-signal);
  color: var(--ht-paper);
  transform: rotate(-10deg);
}
.ht-way--whatsapp .ht-way__link:focus-visible .ht-way__icon {
  border-color: #1da851;
  background: #1da851;
}
@media (hover: hover) { /* touch: a tapped row keeps :hover - no stuck light, fill or nudge */
  .ht-way__link:hover::before { opacity: 1; }
  .ht-way__link:hover .ht-way__icon {
    border-color: var(--ht-signal);
    background: var(--ht-signal);
    color: var(--ht-paper);
    transform: rotate(-10deg);
  }
  .ht-way--whatsapp .ht-way__link:hover .ht-way__icon {
    border-color: #1da851;
    background: #1da851;
  }
  .ht-way__link:hover .ht-way__value { transform: translate3d(6px, 0, 0); }
  .ht-way__link:hover .ht-way__go svg { transform: translateX(4px); }
}
@media (max-width: 575.98px) {
  .ht-way__link { gap: .9rem; padding: 1rem 0; }
  .ht-way__icon { width: 2.875rem; height: 2.875rem; font-size: 1rem; }
}

/* Copy button (phone, email; the address in the map card): only where the browser can copy. */
.ht-copy {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--ht-line);
  border-radius: 50%;
  background: transparent;
  color: var(--ht-mist);
  font-size: .875rem;
  cursor: pointer;
  isolation: isolate;
  transform: translateY(-50%);
  transition: color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out);
}
.rtl .ht-copy { right: auto; left: 0; }
.ht-copy::before { /* outline circle: the white fill grows from the middle, the icon turns ink, a soft glow */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--ht-paper);
  transform: scale(0);
  transition: transform .4s var(--ht-ease-out);
}
.ht-copy:focus-visible {
  border-color: var(--ht-paper);
  color: var(--ht-ink);
  box-shadow: var(--ht-glow-soft, 0 12px 32px -14px rgba(67, 97, 255, .55));
}
.ht-copy:focus-visible::before { transform: scale(1); }
@media (hover: hover) {
  .ht-copy:hover {
    border-color: var(--ht-paper);
    color: var(--ht-ink);
    box-shadow: var(--ht-glow-soft, 0 12px 32px -14px rgba(67, 97, 255, .55));
  }
  .ht-copy:hover::before { transform: scale(1); }
}
.ht-copy .fa-check,
.ht-where__copy .fa-check { display: none; }
.ht-copy.is-done,
.ht-where__copy.is-done { border-color: var(--ht-signal); color: var(--ht-signal-soft); }
.ht-copy.is-done { box-shadow: none; }
.ht-copy.is-done::before { transform: scale(0); }
.ht-copy.is-done .fa-copy,
.ht-where__copy.is-done .fa-copy { display: none; }
.ht-copy.is-done .fa-check,
.ht-where__copy.is-done .fa-check { display: inline-block; animation: ht-pick-swap .45s var(--ht-ease-out); }
.ht-copy__tip { /* small label above the button */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: .3rem .6rem;
  border-radius: 6px;
  background: var(--ht-paper);
  color: var(--ht-ink);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-50%, 4px, 0);
  pointer-events: none;
  transition: opacity .25s var(--ht-ease-out), transform .35s var(--ht-ease-out);
}
.ht-copy:hover .ht-copy__tip,
.ht-copy:focus-visible .ht-copy__tip,
.ht-copy.is-done .ht-copy__tip {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
@media (hover: none) {
  .ht-way .ht-copy { display: none; } /* phones: tap the row to call or write */
  .ht-way--copy .ht-way__link { padding-right: 0; }
}

/* The form panel and what happens next. */
.ht-cp__panel .ht-form__title { margin-bottom: .75rem; }
/* lane: the form box still runs to the edge; its fields and "Send request" keep out of the floating buttons */
.ht-cp__panel .ht-formbox { padding-inline-end: max(clamp(1.5rem, 3vw, 2.5rem), var(--ht-lane, 0px)); }
.ht-cp__next .ht-req__subtitle { margin-bottom: 1.5rem; }
@media (min-width: 768px) {
  .ht-steps--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  /* A stepper: the number on top, the words under it; the line runs from circle to circle on the
     circles' middle line (so it never crosses a title) and draws in as the step rises. */
  .ht-steps--row .ht-step { /* rows packed at the top: a shorter step keeps its title level with the others */
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 1.15rem;
  }
  .ht-steps--row .ht-step:not(:last-child)::after {
    top: calc(1.25rem - .5px);
    right: calc(-2rem + .75rem);
    bottom: auto;
    left: calc(2.5rem + .75rem);
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--ht-line-strong), rgba(255, 255, 255, .12));
    transform-origin: 0 50%;
  }
  .rtl .ht-steps--row .ht-step:not(:last-child)::after {
    right: calc(2.5rem + .75rem);
    left: calc(-2rem + .75rem);
    background: linear-gradient(270deg, var(--ht-line-strong), rgba(255, 255, 255, .12));
    transform-origin: 100% 50%;
  }
  .ht-motion .ht-steps--row .ht-step:not(.is-in)::after { transform: scaleX(0); }
  /* Once drawn, a soft light runs along each line from one step to the next (request -> review ->
     answer), and the next number glows as it arrives. White, not Signal: nothing to act on here.
     Only with motion; paused off screen (ol.ht-steps--row[data-ht-live], see below). */
  .ht-steps--row .ht-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(1.25rem - .5px);
    right: calc(-2rem + .75rem);
    left: calc(2.5rem + .75rem);
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
    box-shadow: 0 0 10px rgba(255, 255, 255, .35);
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
  }
  .rtl .ht-steps--row .ht-step:not(:last-child)::before {
    right: calc(2.5rem + .75rem);
    left: calc(-2rem + .75rem);
    background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
  }
  .ht-steps--row .ht-step__title { margin-top: 0; }
  .ht-steps--row .ht-step__body { padding-right: 1rem; }
  .rtl .ht-steps--row .ht-step__body { padding-right: 0; padding-left: 1rem; }
  .ht-cp .ht-steps--row > .ht-step:last-child .ht-step__body { padding-inline-end: max(1rem, var(--ht-lane, 0px)); } /* lane: the last step's words keep out of the floating buttons */
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .ht-steps--row .ht-step__n::after { /* a soft ring as the light arrives */
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(255, 255, 255, .28);
    opacity: 0;
    pointer-events: none;
  }
  /* All three steps get .is-in at the same moment, so these delays keep them in step: the light
     reaches number 2 at 30% of a 5.6 s round, then runs on to number 3. */
  .ht-motion .ht-steps--row .ht-step.is-in:not(:last-child)::before { animation: ht-step-flow 5.6s var(--ht-ease-inout) 1.6s infinite; }
  .ht-motion .ht-steps--row .ht-step.is-in:nth-child(2)::before { animation-delay: 3.28s; }
  .ht-motion .ht-steps--row .ht-step.is-in:nth-child(2) .ht-step__n::after { animation: ht-step-ping 5.6s var(--ht-ease-out) 3.2s infinite; }
  .ht-motion .ht-steps--row .ht-step.is-in:nth-child(3) .ht-step__n::after { animation: ht-step-ping 5.6s var(--ht-ease-out) 4.88s infinite; }
  .ht-motion .rtl .ht-steps--row .ht-step.is-in:not(:last-child)::before { animation-name: ht-step-flow-rtl; }
  /* Paused while the steps are off screen (the list is [data-ht-live]). These two selectors must stay
     MORE specific than the animation shorthands above, which reset the play state to running. */
  .ht-motion .ht-steps--row.is-paused > .ht-step.is-in:not(:last-child)::before,
  .ht-motion .ht-steps--row.is-paused > .ht-step.is-in:nth-child(n) .ht-step__n::after { animation-play-state: paused; }
}
@keyframes ht-step-flow {
  0% { clip-path: inset(0 100% 0 0); }
  30% { clip-path: inset(0 0 0 0); }
  52%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes ht-step-flow-rtl {
  0% { clip-path: inset(0 0 0 100%); }
  30% { clip-path: inset(0 0 0 0); }
  52%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes ht-step-ping {
  0% { opacity: 0; transform: scale(1); }
  5% { opacity: 1; }
  24%, 100% { opacity: 0; transform: scale(1.5); }
}

/* Where we are: the map in the site's dark look, in colour under the mouse; the address card. */
.ht-where {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--ht-line);
}
.ht-where__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.ht-where__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  font-weight: 740;
  font-stretch: var(--ht-wide);
  line-height: 1;
  letter-spacing: -.03em;
}
.ht-where__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--ht-line);
  border-radius: 20px;
  background: #0b0b0d;
}
.ht-where__map {
  position: relative;
  width: 100%; /* a definite width: the ratio only sets the height (otherwise the grid item takes its
                  width from min-height x ratio and Google's controls and credits are cut on the right) */
  min-height: 340px;
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .ht-where__map { aspect-ratio: 21 / 9; min-height: 440px; }
}
.ht-where__map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(.92) contrast(.9) brightness(.95);
  transition: filter .9s var(--ht-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ht-where__stage:hover .ht-where__map iframe { filter: none; }
}
.ht-where__map p { margin: 0; } /* map HTML that is not a Google map, as stored */
.ht-where__card {
  position: relative;
  display: grid;
  gap: .35rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--ht-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)), #08080a;
}
@media (min-width: 1200px) { /* top right: Google's own place card, controls and credits stay free */
  .ht-where__card { /* glass, as the header and the cookie card: the map shows softly through */
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: min(430px, calc(100% - 3rem));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: #0a0a0e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .9);
    transition: background-color .9s var(--ht-ease-out), border-color .6s var(--ht-ease-out);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ht-where__card {
      background: rgba(8, 8, 12, .7);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
              backdrop-filter: blur(16px) saturate(140%);
    }
    /* The map turns to colour (light) under the mouse: the glass darkens with it, so the address
       stays easy to read. */
    .ht-where__stage:hover .ht-where__card { background: rgba(8, 8, 12, .78); border-color: rgba(255, 255, 255, .16); }
  }
}
.ht-where__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .5rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  font-size: 1rem;
}
.ht-where__label {
  margin: 0;
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
}
.ht-where__address {
  margin: 0;
  color: var(--ht-paper);
  font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
.ht-where__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.1rem;
}
.ht-where__actions .ht-pill,
.ht-where__actions .ht-ghost { min-height: 48px; padding: 0 1.2rem; font-size: .9375rem; }
.ht-where__actions .ht-pill svg { fill: currentColor; }
.ht-where__copy i { font-size: .95em; }

/* =========================================================================
   Light sections: numbers band + testimonials (home page and About page).
   White, like the original theme's light sections (the theme's "light-section"
   class also turns the floating chat / scroll buttons dark over them).
   ========================================================================= */
.ht-stats,
.ht-quotes {
  --ht-l-ink: #0b0b10;
  --ht-l-mist: #5b606d;                    /* 6.3:1 on white */
  --ht-l-line: rgba(11, 11, 16, .12);
  --ht-l-line-strong: rgba(11, 11, 16, .24);
  padding: clamp(5rem, 10vw, 8rem) 0;
  background: #fff;
  color: var(--ht-l-ink);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ht-stats :focus-visible,
.ht-quotes :focus-visible { outline: 2px solid var(--ht-signal); outline-offset: 3px; }
/* Width: the theme's container (home page) unless the page asks for the wide one (About page:
   @include(..., ['htWide' => true]) adds --wide). */
@media (min-width: 1200px) {
  .ht-stats--wide .container,
  .ht-quotes--wide .container { max-width: min(1360px, calc(100% - 70px)); } /* the page's wide container */
}
.ht-stats__head,
.ht-quotes__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 992px) {
  .ht-stats__head,
  .ht-quotes__head {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    gap: 4rem;
  }
}
.ht-stats__title,
.ht-quotes__title {
  margin: 0;
  color: var(--ht-l-ink);
  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;
}
.ht-stats__intro,
.ht-quotes__intro {
  max-width: 46ch;
  margin: 0;
  color: #3d414b; /* the lead colour on white */
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}

/* ---------- Numbers band ---------- */
.ht-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
}
@media (min-width: 992px) {
  .ht-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ht-stats__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ht-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding-top: 1.5rem;
}
.ht-stat::before { /* rule that draws in (--ht-run: see "Floating buttons lane") */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  inset-inline: 0 calc(-1 * var(--ht-run, 0px));
  height: 1px;
  background: var(--ht-l-line-strong);
  transform-origin: 0 50%;
}
.rtl .ht-stat::before { transform-origin: 100% 50%; }
.ht-motion .ht-stat:not(.is-in)::before { transform: scaleX(0); }
.ht-motion .ht-stat.is-in::before { transition: transform 1.3s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 100ms); }
.ht-stat__value {
  order: -1; /* number above its label (the label still comes first for screen readers) */
  margin: 0;
  color: var(--ht-l-ink);
  font-family: var(--ht-font);
  font-size: clamp(3.25rem, 1.5rem + 5.4vw, 7rem);
  font-weight: 760;
  font-stretch: var(--ht-wide);
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1.5px var(--ht-l-ink);
  transition: color .7s var(--ht-ease-out);
}
.ht-motion .ht-stat:not(.is-counted) .ht-stat__value { color: transparent; } /* outlined while counting, then fills */
.ht-stat__label {
  display: flex;
  align-items: flex-start; /* a long label wraps beside its icon: the four icons stay on one line */
  gap: .6rem;
  margin: 0;
  color: var(--ht-l-mist);
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
.ht-stat__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ht-l-line-strong);
  border-radius: 50%;
  color: var(--ht-l-ink);
  font-size: .8rem;
  transition: background-color .4s var(--ht-ease-out), color .4s var(--ht-ease-out), border-color .4s var(--ht-ease-out);
}
.ht-stat__name { /* its first line is centred on the 2rem icon */
  min-width: 0;
  padding-top: calc((2rem - 1.3em) / 2);
  overflow-wrap: break-word;
}
@media (max-width: 575.98px) { /* phones: every icon above its label, so no word has to break */
  .ht-stat__label { flex-direction: column; gap: .75rem; }
  .ht-stat__name { padding-top: 0; }
}
.ht-stat.is-counted .ht-stat__icon {
  border-color: var(--ht-l-ink);
  background: var(--ht-l-ink);
  color: #fff;
  transition-delay: .2s;
}

/* ---------- Testimonials ---------- */
.ht-quotes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .ht-quotes__grid:not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ht-quotes__grid[data-count="3"],
  .ht-quotes__grid[data-count="5"],
  .ht-quotes__grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ht-quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--ht-l-line);
  border-radius: 18px;
  background: #f5f5f7;
  transition: border-color .4s var(--ht-ease-out), box-shadow .6s var(--ht-ease-out), translate .6s var(--ht-ease-out);
}
.ht-quote::after { /* soft light under the mouse */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 0%), #fff, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ht-ease-out);
}
.ht-quote__fig {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.ht-quote__mark {
  display: block;
  height: .55em;
  margin-bottom: .75rem;
  color: transparent;
  font: 800 clamp(5rem, 4rem + 3vw, 7rem)/1 var(--ht-font);
  font-stretch: var(--ht-wide);
  -webkit-text-stroke: 1.5px var(--ht-l-ink);
  transition: color .5s var(--ht-ease-out);
}
.ht-quote__text {
  margin: 0 0 2.25rem;
  padding: 0;
  border: 0;
  color: var(--ht-l-ink);
  font-family: var(--ht-font);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.ht-quote__text p { margin: 0; }
.ht-quote__text p + p { margin-top: .8em; }
.ht-quote__who {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ht-l-line);
}
.ht-quote__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.ht-quote__avatar--initials {
  display: grid;
  place-items: center;
  background: var(--ht-l-ink);
  color: #fff;
  font: 700 1rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
}
.ht-quote__name {
  display: block;
  color: var(--ht-l-ink);
  font-size: 1.0625rem;
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
.ht-quote__role { display: block; color: var(--ht-l-mist); font-size: .875rem; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .ht-quote:hover {
    border-color: var(--ht-l-line-strong);
    box-shadow: 0 34px 60px -34px rgba(11, 11, 16, .35);
    translate: 0 -4px;
  }
  .ht-quote:hover::after { opacity: 1; }
  .ht-quote:hover .ht-quote__mark { color: var(--ht-l-ink); }
}

/* =========================================================================
   About page (about.blade.php). Shares the service page pieces (.ht-sp).
   ========================================================================= */
.ht-about__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--ht-hero-top, clamp(10rem, 15vw, 13rem)) 0 clamp(4rem, 8vw, 6.5rem); /* clears the original header */
}
.ht-about__hero::before { /* faint light behind the video */
  content: "";
  position: absolute;
  z-index: -1;
  top: 5%;
  right: -15%;
  width: min(85vw, 1100px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent 72%);
  pointer-events: none;
}
.rtl .ht-about__hero::before { right: auto; left: -15%; }
.ht-about__head { display: grid; gap: clamp(2.75rem, 6vw, 4rem); align-items: center; }
@media (min-width: 992px) {
  .ht-about__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 6rem); }
}
.ht-about__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  text-wrap: balance;
}
/* A CMS "<span>" in these headings = an outlined line, as on the original About page. */
.ht-about__title > span:not(.ht-w),
.ht-about__heading > span:not(.ht-w),
.ht-team__title > span:not(.ht-w) {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}
.ht-about__lead {
  max-width: 52ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  color: var(--ht-text);
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}
.ht-about__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* Short windows (service, project, About and portfolio heroes): with the higher start (--ht-hero-top)
   the gaps tighten a little too, so the project's Visit button is on the first screen of a 1280 x 720
   or 1366 x 650 window (the taller heroes get more, below). */
@media (min-width: 992px) and (max-height: 820px) {
  :is(.ht-sp__hero, .ht-proj__hero, .ht-about__hero, .ht-folio__hero) .ht-crumbs ol { margin-bottom: 1.5rem; }
  .ht-sp__eyebrow { margin-bottom: 1.15rem; }
  .ht-proj__hero .ht-proj__cat { margin-bottom: 1.15rem; }
  .ht-proj__lead { margin-top: 1.25rem; }
}
/* Taller heroes (About, service pages, portfolio and blog): on windows up to 860px tall (just above the
   820px step of --ht-hero-top these heroes are at their tallest) the gaps tighten, and the page title
   is capped by the window height (on the --ht-h1 token, so the page titles keep the same size). A hero
   button row that still ends up in the bottom 8% of the window, where the scroll reveal does not look,
   rises in with the first screen anyway (hitech.js, "Hero buttons on the first screen"). */
@media (min-width: 992px) and (max-height: 860px) {
  :is(.ht-about__lead, .ht-sp__lead) { margin-top: 1.25rem; }
  :is(.ht-about__actions, .ht-sp__actions) { margin-top: 1.5rem; }
  .ht-folio__hero { padding-bottom: 2.5rem; }
}
/* The About title runs to three lines beside the video: below 1440px wide its text column gets more
   room, so the lead keeps to three lines. */
@media (min-width: 992px) and (max-width: 1439.98px) and (max-height: 860px) {
  .ht-about__head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* Company video: photo cover, big play button with a pulse; opens in the theme's lightbox. */
.ht-video {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--ht-line);
  border-radius: 20px;
  background: #0b0b0b;
  aspect-ratio: 16 / 9;
  color: var(--ht-paper);
  text-decoration: none;
  transition: border-color .4s var(--ht-ease-out);
}
.ht-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--ht-ease-out);
}
.ht-video::before { /* darkens the bottom for the label */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}
.ht-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(68px, 7vw, 92px);
  height: clamp(68px, 7vw, 92px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--ht-ink);
  font-size: clamp(1.1rem, 1.4vw, 1.45rem);
  transform: translate(-50%, -50%);
  transition: transform .5s var(--ht-ease-out), background-color .3s var(--ht-ease-out), color .3s var(--ht-ease-out), box-shadow .5s var(--ht-ease-out);
}
.ht-video__play i { margin-left: .2em; } /* optical centre of the triangle */
.ht-video__play::before,
.ht-video__play::after { /* two rings pulsing out */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  pointer-events: none;
}
.ht-motion .ht-video__play::before { animation: ht-pulse 2.6s var(--ht-ease-out) infinite; }
.ht-motion .ht-video__play::after { animation: ht-pulse 2.6s var(--ht-ease-out) 1.3s infinite; }
.ht-about__hero.is-paused .ht-video__play::before,
.ht-about__hero.is-paused .ht-video__play::after { animation-play-state: paused; } /* off screen (data-ht-live) */
@keyframes ht-pulse {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.9); }
}
.ht-video__label {
  position: absolute;
  bottom: 1.1rem;
  left: 1.35rem;
  z-index: 2;
  color: var(--ht-paper);
  font: 600 .9375rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
}
.ht-video:hover { color: var(--ht-paper); text-decoration: none; } /* touch: after the lightbox closes, the tapped card stays as it was */
.ht-video:focus-visible { border-color: var(--ht-line-strong); color: var(--ht-paper); }
.ht-video:focus-visible img { scale: 1.04; }
.ht-video:focus-visible .ht-video__play {
  background: var(--ht-signal);
  color: var(--ht-paper);
  box-shadow: var(--ht-glow);
  transform: translate(-50%, -50%) scale(1.08);
}
@media (hover: hover) {
  .ht-video:hover { border-color: var(--ht-line-strong); }
  .ht-video:hover img { scale: 1.04; }
  .ht-video:hover .ht-video__play {
    background: var(--ht-signal);
    color: var(--ht-paper);
    box-shadow: var(--ht-glow);
    transform: translate(-50%, -50%) scale(1.08);
  }
}
.ht-video__play { box-shadow: 0 0 0 0 rgba(67, 97, 255, 0); }
/* With a mouse the play button glides part of the way toward the pointer (hitech.js tilt block sets
   --ht-cx / --ht-cy and .is-hover on the card), and springs back when the mouse leaves. */
.ht-video[data-ht-tilt] { container-type: size; }
.ht-video[data-ht-tilt] .ht-video__play {
  transition: transform .5s var(--ht-ease-out), background-color .3s var(--ht-ease-out), color .3s var(--ht-ease-out),
    box-shadow .5s var(--ht-ease-out), translate .7s var(--ht-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ht-video.is-hover .ht-video__play {
    translate: calc((var(--ht-cx, 50cqw) - 50cqw) * .32) calc((var(--ht-cy, 50cqh) - 50cqh) * .32);
  }
}
/* The theme styles every a.popup-vimeo-video as its own floating play icon (absolute, 70% opacity,
   z-index 99, 74px text, grows on hover). The lightbox still needs the class (venor.js binds
   Magnific to it), so its look is put back here - with or without the motion classes. */
a.ht-video.popup-vimeo-video {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: auto;
  opacity: 1;
  font-size: inherit;
  line-height: inherit;
  text-align: start;
  transform: none;
  transition: border-color .4s var(--ht-ease-out);
}
a.ht-video.popup-vimeo-video:hover,
a.ht-video.popup-vimeo-video:focus-visible { transform: none; }

/* Story */
.ht-about__story {
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
  border-top: 1px solid var(--ht-line);
}
.ht-about__statement {
  display: grid;
  gap: 1.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Computers: the kicker and the heading across the page, the intro under it in the text column of
   the rows below (the same grid as .ht-sp__row), so every paragraph of the story starts on one line. */
@media (min-width: 992px) {
  .ht-about__statement {
    grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr);
    gap: 0 3rem;
    align-items: start;
  }
  .ht-about__kicker,
  .ht-about__heading { grid-column: 1 / -1; }
  .ht-about__text { grid-column: 2; margin-top: clamp(2rem, 3.5vw, 3rem); }
}
.ht-about__kicker { margin: 0 0 1.5rem; } /* .ht-kicker */
.ht-about__heading {
  max-width: 16ch;
  margin: 0;
  color: var(--ht-paper);
  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-about__heading br { display: none; } /* the outlined span already starts a new line */
@media (min-width: 1200px) {
  .ht-reasons[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ht-reasons[data-count="5"] > :nth-child(n) { grid-column: auto; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { /* three, then two sharing the row */
  .ht-reasons[data-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ht-reasons[data-count="5"] > :nth-child(n) { grid-column: span 2; }
  .ht-reasons[data-count="5"] > :nth-child(n+4) { grid-column: span 3; }
}

/* Team */
.ht-team {
  padding: clamp(5rem, 10vw, 8rem) 0;
  border-top: 1px solid var(--ht-line);
}
.ht-team__title {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  color: var(--ht-paper);
  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;
}
.ht-team__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { /* tablets and up: one row of three (never a lone card on a half-empty row) */
  .ht-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ht-team__grid:is([data-count="2"], [data-count="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .ht-team__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) { /* phones: one row to swipe through, the next card peeks in */
  .ht-team__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 1rem;
    margin: 0 -15px;
    padding: 0 15px .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ht-team__grid::-webkit-scrollbar { display: none; }
  .ht-team__grid > * { scroll-snap-align: start; }
  .ht-team__grid:focus-visible { outline-offset: -2px; } /* a tab stop while it scrolls (hitech.js); the row runs to the screen edges */
}
@media (max-width: 767.98px) and (pointer: fine) { /* a mouse (or a zoomed-in computer): a thin scrollbar to drag */
  .ht-team__grid { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .32) rgba(255, 255, 255, .06); }
  .ht-team__grid::-webkit-scrollbar { display: block; height: 6px; background: rgba(255, 255, 255, .06); }
  .ht-team__grid::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, .32); }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .ht-team__grid { grid-auto-columns: 44%; } /* two cards and the edge of the next */
}
.ht-member { position: relative; }
.ht-member__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ht-line);
  border-radius: 18px;
  background: #0c0c0f;
  aspect-ratio: 4 / 5;
  transition: border-color .5s var(--ht-ease-out);
}
/* The studio photos: a dark black-and-white look (their white backgrounds sink into the page);
   under the mouse the photo shows in colour where the light falls (.ht-member__lit, the same
   picture, masked around --mx / --my from hitech.js). */
.ht-member__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  filter: grayscale(1) contrast(1.15) brightness(.6);
  transition: filter .9s var(--ht-ease-out), scale 1.4s var(--ht-ease-out);
}
.ht-member__frame::before { /* vignette + top and bottom shade */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 85% at 50% 32%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .72));
  pointer-events: none;
  transition: opacity .9s var(--ht-ease-out);
}
.ht-member__frame .ht-member__lit {
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: none;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0, 0, 0, .5) 48%, transparent 74%);
          mask-image: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0, 0, 0, .5) 48%, transparent 74%);
  transition: opacity .6s var(--ht-ease-out), scale 1.4s var(--ht-ease-out);
}
.ht-member__frame .ht-member__lit { display: none; } /* phones and tablets: never needed */
@media (hover: hover) and (pointer: fine) {
  .ht-member__frame .ht-member__lit { display: block; }
}
.ht-member__initials { /* member without a photo */
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .09), transparent 62%);
  color: transparent;
  font: 760 clamp(5rem, 3rem + 8vw, 9rem)/1 var(--ht-font);
  font-stretch: var(--ht-wide);
  letter-spacing: -.04em;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
  transition: color .6s var(--ht-ease-out), -webkit-text-stroke-color .6s var(--ht-ease-out);
}
.ht-member__num {
  position: absolute;
  top: .9rem;
  left: 1rem;
  z-index: 2;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: var(--ht-paper);
  font: 600 .75rem/1 var(--ht-font);
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.ht-member__name {
  margin: 1.35rem 0 .35rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  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-member__role { margin: 0; color: var(--ht-mist); font-size: .9375rem; font-weight: 500; line-height: 1.45; }
.ht-member__links { display: flex; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ht-member__links a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  color: var(--ht-paper);
  font-size: .9rem;
  transition: background-color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out);
}
.ht-member__links a:hover,
.ht-member__links a:focus-visible { border-color: var(--ht-signal); background: var(--ht-signal); color: var(--ht-paper); }
@media (hover: hover) and (pointer: fine) {
  .ht-member:hover .ht-member__frame { border-color: var(--ht-line-strong); }
  .ht-member:hover .ht-member__frame img { filter: grayscale(1) contrast(1.15) brightness(.72); scale: 1.035; }
  .ht-member:hover .ht-member__frame .ht-member__lit { opacity: 1; filter: none; }
  .ht-member:hover .ht-member__frame::before { opacity: .75; }
  .ht-member:hover .ht-member__initials { color: rgba(255, 255, 255, .92); -webkit-text-stroke-color: rgba(255, 255, 255, .92); }
}

/* Client logos */
.ht-logos {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--ht-line);
}
.ht-logos__label { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); } /* .ht-kicker */
.ht-marquee--logos { padding: .5rem 0; border: 0; }
.ht-logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 15vw, 210px);
  height: 84px;
  margin: 0 clamp(1rem, 2.4vw, 2.5rem);
  opacity: .55;
  transition: opacity .35s var(--ht-ease-out);
}
.ht-logo img {
  display: block;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter .35s var(--ht-ease-out);
}
a.ht-logo:hover,
a.ht-logo:focus-visible { opacity: 1; }
a.ht-logo:hover img,
a.ht-logo:focus-visible img { filter: none; }

/* =========================================================================
   Blog page, article pages and site search (blog.blade.php, article.blade.php,
   search.blade.php; cards: includes/ht-post-card). Dark, like the original blog.
   The blog hero reuses the portfolio hero (.ht-folio__hero / __art / __title / __intro),
   the cards reuse the portfolio cards (.ht-pcard: tilt, glare, cursor label, curtain).
   ========================================================================= */
.ht-blog,
.ht-art,
.ht-related,
.ht-search,
.ht-doc,
.ht-404,
.ht-homeblog {
  background: var(--ht-ink);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1200px) { /* the portfolio's 1360px, but never closer than 50px to the screen edge (the header logo's line) */
  .ht-blog .container,
  .ht-art .container,
  .ht-related .container,
  .ht-search .container,
  .ht-doc .container,
  .ht-404 .container { max-width: min(1360px, 100% - 70px); }
}
/* Floating buttons lane (the idea: P1's "Floating buttons lane" block). --ht-lane = how far the
   back-to-top ring / Call / WhatsApp column reaches into the container (0 once the space beside
   the container is wide enough: ~900, ~1140 and ~1540px). From 768px whatever sits at the end
   of a row on these pages (incl. the contact page) keeps out of it; see "lane" in the parts below. */
@media (min-width: 768px) {
  .ht-blog, .ht-art, .ht-related, .ht-search, .ht-doc, .ht-404, .ht-cp {
    --ht-free: max(0px, (100vw - 720px) / 2);
    --ht-lane: max(0px, var(--ht-fab-edge, 24px) + var(--ht-fab-main, 56px) + 1.5rem - 15px - var(--ht-free));
  }
}
@media (min-width: 992px) {
  .ht-blog, .ht-art, .ht-related, .ht-search, .ht-doc, .ht-404, .ht-cp { --ht-free: max(0px, (100vw - 960px) / 2); }
}
@media (min-width: 1200px) {
  .ht-blog, .ht-art, .ht-related, .ht-search, .ht-doc, .ht-404, .ht-cp { --ht-free: max(0px, (100vw - min(1360px, 100vw - 70px)) / 2); }
}
.ht-blog :focus-visible,
.ht-art :focus-visible,
.ht-related :focus-visible,
.ht-search :focus-visible,
.ht-doc :focus-visible,
.ht-404 :focus-visible,
.ht-homeblog :focus-visible {
  outline: 2px solid var(--ht-signal);
  outline-offset: 3px;
}
.ht-blog :focus:not(:focus-visible),
.ht-art :focus:not(:focus-visible),
.ht-related :focus:not(:focus-visible),
.ht-search :focus:not(:focus-visible),
.ht-doc :focus:not(:focus-visible),
.ht-404 :focus:not(:focus-visible),
.ht-homeblog :focus:not(:focus-visible) { outline: none; }
.ht-blog { padding-bottom: clamp(5rem, 10vw, 8rem); }

/* Small labels ("In this article", "Share", "Explore", "Error 404"): the shared .ht-kicker (top of
   this file) is in the markup. Labels that come inside Admin HTML or article text (the blog boxes'
   titles, "Conclusion") and the home blog strip's label get the same look here, rule draw-in included. */
.ht-widget .widget-title,
.ht-homeblog__kicker,
.ht-read .ht-close__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  color: var(--ht-mist);
  font: 600 .875rem/1.3 var(--ht-font);
  font-stretch: var(--ht-semi);
  letter-spacing: 0;
  text-transform: none;
}
.ht-widget .widget-title::before,
.ht-homeblog__kicker::before,
.ht-read .ht-close__title::before {
  content: "";
  flex: none;
  align-self: flex-start;
  width: 2.25rem;
  height: 1px;
  margin-top: .65em;
  background: var(--ht-line-strong);
  transform-origin: 0 50%;
}
.rtl :is(.ht-widget .widget-title, .ht-homeblog__kicker, .ht-read .ht-close__title)::before { transform-origin: 100% 50%; }
.ht-motion [data-ht-reveal]:not(.is-in) :is(.widget-title, .ht-homeblog__kicker, .ht-close__title)::before,
.ht-motion .ht-homeblog__kicker[data-ht-reveal]:not(.is-in)::before { transform: scaleX(0); }
.ht-motion [data-ht-reveal].is-in :is(.widget-title, .ht-homeblog__kicker, .ht-close__title)::before,
.ht-motion .ht-homeblog__kicker[data-ht-reveal].is-in::before {
  transition: transform .9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 150ms);
}

/* ---------- Blog hero: the CMS "<span>" = an outlined second line, as on the original banner ---------- */
.ht-blog__title > span:not(.ht-w) {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}
/* The background art behaves as on the portfolio hero: it leans toward the mouse with a light where
   it points (hitech.js [data-ht-hero] / [data-ht-art]: mouse only, not with less motion; touch keeps
   it still) and sinks slowly as the page scrolls. KEEP IN STEP with ".ht-folio > .ht-folio__hero
   .ht-folio__art" (P1's "Portfolio hero art" block): same values; change both together (only the
   timeline name differs). */
.ht-blog > .ht-blog__hero .ht-folio__art {
  transform: perspective(1400px) rotateX(calc(var(--ht-rx, 0deg) * .35)) rotateY(calc(var(--ht-ry, 0deg) * .35)) scale(1.04);
  transition: transform 1.4s var(--ht-ease-out);
}
.ht-blog > .ht-blog__hero .ht-folio__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(24rem circle at var(--mx, 60%) var(--my, 40%), rgba(255, 255, 255, .22), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--ht-ease-out);
}
.ht-blog > .ht-blog__hero .ht-folio__art.is-tracking::before { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ht-blog > .ht-blog__hero { view-timeline: --ht-blogart block; }
    .ht-motion .ht-blog > .ht-blog__hero .ht-folio__art img {
      animation: ht-art-in 2.4s var(--ht-ease-out) both, ht-art-sink linear both;
      animation-timeline: auto, --ht-blogart;
      animation-range: normal, exit;
    }
  }
}

/* ---------- Search field (blog hero + search page) ---------- */
.ht-searchbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 640px;
  min-height: 64px;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 6px 6px 6px 1.4rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: border-color .35s var(--ht-ease-out), background-color .35s var(--ht-ease-out), box-shadow .35s var(--ht-ease-out);
}
.ht-searchbox:hover { border-color: rgba(255, 255, 255, .55); }
.ht-searchbox:focus-within {
  border-color: var(--ht-paper);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 4px rgba(67, 97, 255, .3); /* Signal: this is where you act */
}
.ht-searchbox__icon {
  flex: none;
  color: var(--ht-mist);
  font-size: 1rem;
  transition: color .3s var(--ht-ease-out);
}
.ht-searchbox:focus-within .ht-searchbox__icon { color: var(--ht-paper); }
.ht-searchbox .ht-searchbox__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  margin: 0;
  padding: 0 .25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ht-paper);
  font: 500 1.0625rem/1.2 var(--ht-font);
  outline: none;
  -webkit-appearance: none;
          appearance: none;
}
.ht-searchbox .ht-searchbox__input:focus-visible { outline: none; }
.ht-searchbox__input::placeholder { color: var(--ht-mist); opacity: 1; }
.ht-searchbox__input::-webkit-search-cancel-button { filter: invert(1) brightness(1.4); cursor: pointer; }
/* The button is a .ht-pill (Signal sweep, sheen, glow, arrow nudge: "Buttons"); only its size here. */
.ht-searchbox__btn.ht-pill {
  flex: none;
  justify-content: center;
  gap: .65rem;
  height: 50px;
  min-height: 50px;
  padding: 0 1.4rem;
  font-size: .9375rem;
}
.ht-searchbox__btn svg { flex: none; fill: currentColor; }
@media (max-width: 479.98px) {
  .ht-searchbox { padding-left: 1.1rem; }
  .ht-searchbox__btn.ht-pill { width: 50px; padding: 0; }
  .ht-searchbox__btn span { /* hidden from view only: it stays the button's name for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Filter bars (blog, search, portfolio): the pill that glides ----------
   hitech.js puts one white layer over the bar (.ht-filter__glide) and cuts it to the pressed
   button's shape; a change of filter slides that shape to the new button. The layer inverts what is
   under it (difference, inside the isolated bar), so the label turns ink exactly where the pill is,
   also while it slides over other buttons. The pressed button's own fill steps aside meanwhile.
   (The buttons' look: .ht-filter__btn. Without JavaScript or with less motion: no layer.) */
.ht-filter.has-glide {
  position: relative;
  isolation: isolate;
}
.ht-filter__glide {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ht-paper);
  mix-blend-mode: difference;
  clip-path: inset(0 100% 100% 0 round 999px);
  pointer-events: none;
  transition: clip-path .62s var(--ht-ease-out), opacity .3s;
}
.ht-filter.has-glide .ht-filter__btn[aria-pressed="true"] {
  border-color: transparent;
  background: transparent;
  color: var(--ht-paper);
  box-shadow: none;
  transition: box-shadow .45s var(--ht-ease-out); /* colours change at once: under the pill they show inverted */
}
.ht-filter.has-glide .ht-filter__btn[aria-pressed="true"] .ht-filter__count { background: rgba(255, 255, 255, .12); transition: none; }
/* The chosen button that already showed its white fill (mouse over it, keyboard focus) keeps it,
   above the pill, until the pill has arrived under it (hitech.js .is-landing; never on touch). */
.ht-filter.has-glide .ht-filter__btn.is-landing[aria-pressed="true"] {
  position: relative;
  z-index: 3;
  border-color: var(--ht-paper);
  background: var(--ht-paper);
  color: var(--ht-ink);
}
.ht-filter.has-glide .ht-filter__btn.is-landing[aria-pressed="true"] .ht-filter__count { background: rgba(0, 0, 0, .1); }

/* ---------- Post cards: image, category · date · reading time, title, first lines ---------- */
.ht-posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 2.6vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ht-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ht-posts > .ht-post.is-lead { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { /* rows of three; "half" cards complete a row of two */
  .ht-posts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ht-posts > .ht-post { grid-column: span 2; }
  .ht-posts > .ht-post.is-half { grid-column: span 3; }
  .ht-posts > .ht-post.is-lead { grid-column: 1 / -1; }
}
@media (min-width: 992px) { /* the newest post: picture and text side by side */
  .ht-post.is-lead {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }
  .ht-post.is-lead .ht-pcard__body { padding-top: 0; }
}
/* "Keep reading" / "Latest articles": one row of three; phones swipe sideways. */
@media (min-width: 768px) {
  .ht-posts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ht-posts--row > .ht-post { grid-column: auto; }
}
@media (max-width: 767.98px) {
  .ht-posts--row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ht-posts--row::-webkit-scrollbar { display: none; }
  .ht-posts--row > * { scroll-snap-align: start; }
}
/* Lane: the text of the card at the end of each row keeps out of the floating buttons (pictures
   stay in line). Cards hidden by the filter do not count ("of :not([hidden])"); each rule stands
   alone, so a browser without "of" or :has only skips that rule. */
@media (min-width: 768px) {
  :is(.ht-blog, .ht-search) .ht-posts > .ht-post.is-lead > .ht-post__body { padding-inline-end: var(--ht-lane, 0px); }
  :is(.ht-related, .ht-search) .ht-posts--row > .ht-post:nth-child(3n) > .ht-post__body { padding-inline-end: var(--ht-lane, 0px); }
}
@media (min-width: 768px) and (max-width: 1099.98px) { /* two per row, under the large first card */
  .ht-blog .ht-posts > .ht-post:not(.is-lead):nth-child(2n + 1 of :not([hidden])) > .ht-post__body { padding-inline-end: var(--ht-lane, 0px); }
}
@media (min-width: 768px) and (max-width: 1099.98px) { /* two cards only (no large card) */
  .ht-blog .ht-posts:not(:has(> .is-lead)) > .ht-post:nth-child(2n of :not([hidden])) > .ht-post__body { padding-inline-end: var(--ht-lane, 0px); }
}
@media (min-width: 1100px) { /* three per row ... */
  .ht-blog .ht-posts > .ht-post:not(.is-lead):not(.is-half):nth-child(3n + 1 of :not([hidden])) > .ht-post__body { padding-inline-end: var(--ht-lane, 0px); }
}
@media (min-width: 1100px) { /* ... then the halves, two per row */
  .ht-blog .ht-posts > .ht-post.is-half:nth-last-child(2n + 1 of :not([hidden])) > .ht-post__body { padding-inline-end: var(--ht-lane, 0px); }
}

.ht-post__shot { aspect-ratio: 3 / 2; }
.ht-post__shot img { object-position: center; }
.ht-post__ph { /* a post without a picture: its first letter, outlined */
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .09), transparent 62%);
  color: transparent;
  font: 760 clamp(4rem, 3rem + 4vw, 7rem)/1 var(--ht-font);
  font-stretch: var(--ht-wide);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .5);
}
.ht-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .85rem;
  margin: 0 0 .75rem;
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
/* Small dot between the facts: it sits in the middle of the .85rem gap before each fact, so a fact
   that starts a new line has its dot outside the box, where it is cut off (no line starts with a dot). */
.ht-post__meta,
.ht-art__facts,
.ht-doc__facts,
.ht-result__meta { overflow: hidden; }
.ht-post__meta > *,
.ht-art__facts > *,
.ht-doc__facts > *,
.ht-result__meta > * { position: relative; }
.ht-post__meta > * + *::before,
.ht-art__facts > * + *::before,
.ht-doc__facts > * + *::before,
.ht-result__meta > * + *::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  inset-inline-start: calc(-.425rem - 1.5px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.ht-post__cat { color: var(--ht-paper); }
.ht-post .ht-post__title {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-stretch: var(--ht-semi);
  line-height: 1.2;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.ht-post.is-half .ht-post__title { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.12; }
.ht-post.is-lead .ht-post__title {
  font-size: clamp(1.625rem, 1rem + 1.7vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.ht-post__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: .85rem 0 0;
  color: var(--ht-mist);
  font-size: .9375rem;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.ht-post.is-lead .ht-post__excerpt {
  margin-top: 1.1rem;
  color: var(--ht-text);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.ht-post__more {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
  color: var(--ht-paper);
  font: 600 .875rem/1.2 var(--ht-font);
  font-stretch: var(--ht-semi);
  transition: color .35s var(--ht-ease-out);
}
.ht-post__more svg { flex: none; fill: currentColor; transition: transform .4s var(--ht-ease-out); }
.ht-post.is-hover .ht-post__more,
.ht-post:focus-within .ht-post__more { color: var(--ht-signal-soft); }
.ht-post.is-hover .ht-post__more svg,
.ht-post:focus-within .ht-post__more svg { transform: translateX(5px); }

/* ---------- Blog boxes (Admin > Blog settings > HTML sidebar), restyled ---------- */
.ht-widgets { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(4rem, 8vw, 6.5rem); }
.ht-widgets--card { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 992px) {
  .ht-widgets--band[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ht-widget {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid var(--ht-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .03);
  color: var(--ht-text);
}
.ht-widget::after { /* soft light under the mouse */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .06), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ht-ease-out);
}
.ht-widget .textwidget { display: grid; gap: 1.25rem; align-items: center; }
.ht-widget .textwidget > a:first-child { /* the picture link: own transition list (not the theme's "all"), so the focus ring shows at once */
  display: block;
  overflow: hidden;
  border-radius: 14px;
  transition: color .3s var(--ht-ease-out);
}
.ht-widget img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(1) brightness(.9);
  transition: filter .9s var(--ht-ease-out), scale 1.4s var(--ht-ease-out);
}
.ht-widget p {
  margin: 0;
  color: var(--ht-paper);
  font: 650 clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.25 var(--ht-font);
  font-stretch: var(--ht-semi);
  letter-spacing: -.015em;
}
.ht-widget .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: .6rem;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 50px;
  padding: 0 1.4rem;
  overflow: visible;
  border: 1px solid var(--ht-line-strong);
  border-radius: 999px;
  background: linear-gradient(var(--ht-paper), var(--ht-paper)) no-repeat 0 0 / 0 100%;
  box-shadow: none;
  color: var(--ht-paper);
  font: 600 .9375rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  letter-spacing: 0;
  text-decoration: none;
  transform: none;
}
.ht-widget .btn.btn { /* doubled class: hitech-ui.css (loaded later) gives theme buttons a list without the sweep */
  transition: background-size .45s var(--ht-ease-out), color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out), scale .3s var(--ht-ease-out);
}
.rtl .ht-widget .btn { background-position: 100% 0; }
.ht-widget .btn::before { display: none; } /* the theme's dark sweep: here the white one is the background */
/* An outline button (the theme's "Read More"): the white fill sweeps in, the text turns ink, a soft
   glow; the keyboard ring is a box-shadow (the theme forces outline: 0). Doubled class: beats the
   theme's own .btn.btn-style1 hover colours. */
.ht-widget .btn.btn:focus-visible {
  border-color: var(--ht-paper);
  background-color: transparent;
  background-size: 100% 100%;
  color: var(--ht-ink);
  text-decoration: none;
  box-shadow: 0 0 0 2px var(--ht-ink), 0 0 0 4px var(--ht-signal), var(--ht-glow-soft, 0 12px 32px -14px rgba(67, 97, 255, .55));
}
@media (hover: hover) {
  .ht-widget .btn.btn:hover {
    border-color: var(--ht-paper);
    background-color: transparent;
    background-size: 100% 100%;
    color: var(--ht-ink);
    text-decoration: none;
    box-shadow: var(--ht-glow-soft, 0 12px 32px -14px rgba(67, 97, 255, .55));
  }
}
@media (hover: hover) and (pointer: fine) {
  .ht-widget:hover::after { opacity: 1; }
  .ht-widget:hover img { filter: none; scale: 1.04; }
}
@media (min-width: 768px) {
  .ht-widgets--band .ht-widget .textwidget {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto;
    gap: 1.75rem clamp(2rem, 5vw, 4.5rem);
  }
  .ht-widgets--band .ht-widget .textwidget > a:first-child { grid-row: 1 / span 2; }
  .ht-widgets--band .ht-widget .textwidget > p { align-self: end; }
  .ht-widgets--band .ht-widget .textwidget > .btn { align-self: start; }
  .ht-widgets--card .ht-widget .textwidget {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: 1fr auto;
    gap: 1.25rem 1.75rem;
  }
  .ht-widgets--card .ht-widget .textwidget > a:first-child { grid-row: 1 / span 2; }
  .ht-widgets--card .ht-widget .textwidget > p { align-self: end; }
  .ht-widgets--card .ht-widget .textwidget > .btn { align-self: start; }
  .ht-widgets--card .ht-widget p { font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem); }
  /* lane: a box at the end of its row still runs to the edge, its words keep out of the floating buttons */
  .ht-blog .ht-widgets--band > .ht-widget:last-child { padding-inline-end: max(clamp(1.5rem, 3.5vw, 2.75rem), var(--ht-lane, 0px)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ht-blog .ht-widgets--band > .ht-widget { padding-inline-end: max(clamp(1.5rem, 3.5vw, 2.75rem), var(--ht-lane, 0px)); }
}

/* ---------- Article: reading progress line ---------- */
.ht-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001; /* above the theme's fixed header */
  height: 3px;
  pointer-events: none;
}
.ht-progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .4), #fff);
  transform: scaleX(var(--ht-progress, 0));
  transform-origin: 0 50%;
}
.rtl .ht-progress__bar { transform-origin: 100% 50%; }

/* ---------- Article: hero ---------- */
.ht-art .ht-crumbs ol { flex-wrap: nowrap; }
.ht-art .ht-crumbs li { flex: none; }
.ht-art .ht-crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.ht-art .ht-crumbs li:last-child span { /* a long title ends with "…": the full title is right below */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ht-art__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(10rem, 15vw, 13rem) 0 clamp(3rem, 6vw, 5rem); /* clears the original header */
  view-timeline: --ht-art block; /* the picture's scroll drift (below) follows the page, not its own clipping box */
}
/* Hero light of the article, search and text pages: a faint glow sized by the hero itself (so the
   hero's lower edge never cuts it into a "shelf") and a second light that follows the mouse
   ([data-ht-spot] sets --mx / --my; it fades out toward the hero's lower edge). */
.ht-art__hero::before,
.ht-search__hero::before,
.ht-doc__hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22%;
  right: -14%;
  height: 144%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .075), transparent 72%);
  pointer-events: none;
}
.ht-art__hero::after,
.ht-search__hero::after,
.ht-doc__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(36rem circle at var(--mx, 72%) var(--my, 30%), rgba(255, 255, 255, .065), transparent 62%);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 11rem), transparent);
          mask-image: linear-gradient(#000 calc(100% - 11rem), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s var(--ht-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ht-art__hero:hover::after,
  .ht-search__hero:hover::after,
  .ht-doc__hero:hover::after { opacity: 1; }
}
.ht-404::before { /* faint light behind the big code; never taller than the section, so its lower edge never cuts it */
  content: "";
  position: absolute;
  z-index: -1;
  top: 5%;
  right: -15%;
  height: min(85vw, 1100px, 100%);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent 72%);
  pointer-events: none;
}
.ht-art__head { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 992px) {
  .ht-art__head {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
  .ht-art__head--solo { grid-template-columns: minmax(0, 1fr); }
}
.ht-art__title { /* the page title, semi-wide (112%) so long article titles and words always fit */
  max-width: 20ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(2.125rem, 1rem + 3vw, 4.25rem);
  font-weight: 750;
  font-stretch: var(--ht-semi);
  line-height: 1;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.ht-art__head--solo .ht-art__title { font-size: clamp(2.25rem, 1rem + 4vw, 5.25rem); }
@media (max-width: 399.98px) {
  .ht-art__title { -webkit-hyphens: auto; hyphens: auto; }
}
.ht-art__byline {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.ht-art__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1);
}
.ht-art__author { margin: 0; color: var(--ht-paper); font-size: .9375rem; font-weight: 600; line-height: 1.3; }
/* Meta lines (date, reading time, last update): one style, as on the cards (.ht-post__meta). */
.ht-art__facts,
.ht-doc__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .85rem;
  margin: .25rem 0 0;
  color: var(--ht-mist);
  font: 600 .8125rem/1.4 var(--ht-font);
  font-stretch: var(--ht-semi);
}
.ht-art__facts time,
.ht-doc__facts time { color: var(--ht-paper); }
/* The picture: a curtain lifts off it, it leans toward the mouse anywhere over the hero, with a
   soft glare under the mouse (hitech.js [data-ht-hero] / [data-ht-art]: --ht-rx / --ht-ry, --mx /
   --my, .is-tracking; mouse only, not with less motion), and drifts slightly while the page scrolls. */
.ht-art__visual {
  position: relative;
  transform: perspective(1400px) rotateX(calc(var(--ht-rx, 0deg) * .4)) rotateY(calc(var(--ht-ry, 0deg) * .4));
  transition: transform 1.1s var(--ht-ease-out);
}
.ht-art__media {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--ht-line);
  border-radius: 20px;
  background: #0b0b0b;
  aspect-ratio: 3 / 2;
}
.ht-art__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ht-art__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(34rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .15), transparent 46%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ht-ease-out);
}
.ht-art__visual.is-tracking .ht-art__glare { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ht-art__media img { /* drifts while the hero scrolls away (timeline: .ht-art__hero) */
      scale: 1.08;
      animation: ht-drift linear both;
      animation-timeline: --ht-art;
      animation-range: exit 0% exit 100%;
    }
  }
}

/* ---------- Article: layout (side column + text) ---------- */
.ht-art__layout {
  display: grid;
  gap: 2.5rem;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4.5rem, 9vw, 7rem);
  border-top: 1px solid var(--ht-line);
}
.ht-art__aside { display: none; }
.ht-art__main { min-width: 0; max-width: 760px; max-width: min(760px, 100% - var(--ht-lane, 0px)); } /* lane: the column never reaches under the floating buttons */
@media (min-width: 992px) {
  .ht-art__layout {
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6.5rem);
  }
  .ht-art__aside { display: block; }
  .ht-art__sticky { position: sticky; top: 6.5rem; }
  .ht-art__share-end { display: none; }
}
.ht-art__sticky > * + * {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ht-line);
}

/* "In this article": the current section is white, with a line that glides to it (hitech.js). */
.ht-toc { position: relative; }
.ht-toc__list {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--ht-line);
  list-style: none;
}
.rtl .ht-toc__list { border-left: 0; border-right: 1px solid var(--ht-line); }
.ht-toc__link {
  position: relative;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  gap: .3rem;
  padding: .5rem 0 .5rem 1.1rem;
  color: var(--ht-mist);
  font: 500 .875rem/1.4 var(--ht-font);
  text-decoration: none;
  transition: color .35s var(--ht-ease-out);
}
.rtl .ht-toc__link { padding: .5rem 1.1rem .5rem 0; }
.ht-toc__link::before { /* hover / keyboard: a Signal bar grows on the line, where "you are here" glides */
  content: "";
  position: absolute;
  top: .3rem;
  bottom: .3rem;
  left: -1.5px;
  width: 2px;
  border-radius: 2px;
  background: var(--ht-signal);
  transform: scaleY(0);
  transition: transform .45s var(--ht-ease-out);
  pointer-events: none;
}
.rtl .ht-toc__link::before { left: auto; right: -1.5px; }
.ht-toc__text { transition: translate .45s var(--ht-ease-out); }
/* The hover look only where there is a mouse (a tap on a touch screen must not leave it stuck); this
   plain :hover only keeps the theme's link blue away. */
.ht-toc__link:hover { color: var(--ht-mist); text-decoration: none; }
.ht-toc__link:focus-visible,
.ht-toc__link.is-active { color: var(--ht-paper); text-decoration: none; }
.ht-toc__link:focus-visible::before { transform: scaleY(1); }
.ht-toc__link:focus-visible .ht-toc__text { translate: 4px 0; }
.rtl .ht-toc__link:focus-visible .ht-toc__text { translate: -4px 0; }
@media (hover: hover) {
  .ht-toc__link:hover { color: var(--ht-paper); }
  .ht-toc__link:hover::before { transform: scaleY(1); }
  .ht-toc__link:hover .ht-toc__text { translate: 4px 0; }
  .rtl .ht-toc__link:hover .ht-toc__text { translate: -4px 0; }
}
.ht-toc__n {
  color: rgba(255, 255, 255, .55); /* 6.2:1 on black */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color .35s var(--ht-ease-out);
}
.ht-toc__link.is-active .ht-toc__n { color: var(--ht-paper); }
.ht-toc__link:not(.is-active):focus-visible .ht-toc__n { color: var(--ht-signal-soft); }
@media (hover: hover) {
  .ht-toc__link:not(.is-active):hover .ht-toc__n { color: var(--ht-signal-soft); }
}
.ht-toc__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: var(--ht-bar-h, 0px);
  background: var(--ht-paper);
  opacity: 0;
  transform: translate3d(-.5px, var(--ht-bar-y, 0px), 0);
  transition: transform .55s var(--ht-ease-out), height .55s var(--ht-ease-out), opacity .3s;
  pointer-events: none;
}
.rtl .ht-toc__bar { left: auto; right: 0; transform: translate3d(.5px, var(--ht-bar-y, 0px), 0); }
.ht-toc.has-active .ht-toc__bar { opacity: 1; }

/* Share buttons (outline circles): the white fill grows from the middle, the icon turns ink, a soft
   glow and a small lift; a small label shows under the button on hover / focus (never over "Share"). */
.ht-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ht-share__btn {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ht-paper);
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), box-shadow .45s var(--ht-ease-out), transform .4s var(--ht-ease-out);
}
.ht-share__btn::before { /* the white fill */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--ht-paper);
  transform: scale(0);
  transition: transform .45s var(--ht-ease-out);
}
.ht-share__btn > span[aria-hidden] { position: relative; z-index: 1; } /* the icon, over the fill */
.ht-share__btn svg { display: block; }
/* Touch: a tapped button keeps :hover - it stays as it was (no theme link blue, no stuck fill or
   label). Before the focus / done states, so those still win. */
.ht-share__btn:hover { color: var(--ht-paper); text-decoration: none; }
.ht-share__btn:focus-visible,
.ht-share__btn.is-done {
  border-color: var(--ht-paper);
  color: var(--ht-ink);
  text-decoration: none;
  box-shadow: var(--ht-glow-soft, 0 12px 32px -14px rgba(67, 97, 255, .55));
  transform: translateY(-2px);
}
.ht-share__btn:focus-visible::before,
.ht-share__btn.is-done::before { transform: scale(1); }
@media (hover: hover) {
  .ht-share__btn:hover {
    border-color: var(--ht-paper);
    color: var(--ht-ink);
    text-decoration: none;
    box-shadow: var(--ht-glow-soft, 0 12px 32px -14px rgba(67, 97, 255, .55));
    transform: translateY(-2px);
  }
  .ht-share__btn:hover::before { transform: scale(1); }
  .ht-share__btn:hover::after { opacity: 1; transform: translate(-50%, 0); } /* the label (below) */
}
.ht-share__btn::after {
  content: attr(data-tip);
  content: attr(data-tip) / ""; /* a picture label only: the button's name is its hidden text */
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 3;
  padding: .45rem .7rem;
  border-radius: 8px;
  background: var(--ht-paper);
  color: var(--ht-ink);
  font: 600 .75rem/1 var(--ht-font);
  font-stretch: var(--ht-semi);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity .25s var(--ht-ease-out), transform .3s var(--ht-ease-out);
}
.ht-share__btn:focus-visible::after,
.ht-share__btn.is-done::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Article text: made for reading ---------- */
.ht-read {
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  font-stretch: 100%;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.ht-read ::selection { background: var(--ht-signal); color: #fff; }
.ht-read > * { margin: 0; }
.ht-read p { margin-bottom: 0; } /* the theme's paragraph margin; the gap comes from the rule below */
.ht-read > * + * { margin-top: 1.35em; }
.ht-read .ht-lead {
  color: var(--ht-paper);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  line-height: 1.6;
}
.ht-read h2 { /* a row heading (--ht-h3) */
  margin-top: 2.2em;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h3, clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.ht-read h3,
.ht-read h4 {
  margin-top: 1.8em;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.ht-read h4 { font-size: 1.125em; }
.ht-read h2,
.ht-read h3,
.ht-read h4 { scroll-margin-top: 7rem; } /* clear of the fixed header after a jump */
.ht-read h2 + *,
.ht-read h3 + *,
.ht-read h4 + * { margin-top: .9em; }
.ht-hnum { /* "01" of a numbered heading, outlined */
  display: inline-block;
  margin-right: .3em;
  color: transparent;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .6);
}
.ht-read strong,
.ht-read b { color: var(--ht-paper); font-weight: 650; }
.ht-read a {
  color: var(--ht-paper);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .3s var(--ht-ease-out), text-decoration-color .3s var(--ht-ease-out);
}
.ht-read a:hover { color: var(--ht-signal-soft); text-decoration-color: currentColor; }
.ht-read ul:not(.ht-points),
.ht-read ol:not(.ht-points) { padding-left: 1.35em; }
.rtl .ht-read ul:not(.ht-points),
.rtl .ht-read ol:not(.ht-points) { padding-left: 0; padding-right: 1.35em; }
.ht-read li + li { margin-top: .5em; }
.ht-read li::marker { color: var(--ht-mist); }
.ht-read blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: .25em 0 .25em 1.5em;
  border-left: 2px solid var(--ht-paper);
  color: var(--ht-paper);
  font-size: 1.2em;
  font-stretch: var(--ht-semi);
  line-height: 1.5;
}
.ht-read img { max-width: 100%; height: auto; border-radius: 14px; }
.ht-read figure { margin-left: 0; margin-right: 0; }
.ht-read figcaption { margin-top: .75rem; color: var(--ht-mist); font-size: .875rem; }
.ht-read hr { height: 1px; border: 0; background: var(--ht-line); }
.ht-read code,
.ht-read kbd {
  padding: .1em .35em;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: var(--ht-paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
.ht-read pre {
  overflow-x: auto;
  padding: 1.25rem;
  border: 1px solid var(--ht-line);
  border-radius: 12px;
  background: #0b0b0e;
  color: var(--ht-paper);
  font-size: .9em;
  line-height: 1.6;
}
.ht-read pre code { padding: 0; background: none; }
.ht-read .ht-table { overflow-x: auto; }
.ht-read table { width: 100%; border-collapse: collapse; font-size: .95em; }
.ht-read th,
.ht-read td { padding: .75rem .9rem; border-bottom: 1px solid var(--ht-line); text-align: start; vertical-align: top; }
.ht-read th { color: var(--ht-paper); font-weight: 600; }
.ht-read .ht-embed { position: relative; overflow: hidden; border-radius: 14px; background: #0b0b0b; aspect-ratio: 16 / 9; }
.ht-read .ht-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Key points ("Label: text" lists): big outlined number, rule that draws in, title, text.
   The point being read gets a white number (hitech.js). */
.ht-read .ht-points {
  display: grid;
  margin-top: 2em;
  padding: 0;
  list-style: none;
}
.ht-read .ht-points + * { margin-top: 2em; }
.ht-point {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.25rem, 2.6rem + 2.4vw, 4.75rem) minmax(0, 1fr);
  gap: 0 clamp(1rem, 2vw, 1.75rem);
  padding: 1.6rem 0 1.9rem;
}
.ht-read .ht-point + .ht-point { margin-top: 0; }
.ht-point::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--ht-line-strong);
  transform-origin: 0 50%;
  transition: background-color .5s var(--ht-ease-out);
}
.rtl .ht-point::before { transform-origin: 100% 50%; }
.ht-motion .ht-point:not(.is-in)::before { transform: scaleX(0); }
.ht-motion .ht-point.is-in::before {
  transition: transform 1.3s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 100ms), background-color .5s var(--ht-ease-out);
}
.ht-point__num {
  display: block;
  padding-top: .15rem;
  color: transparent;
  font: 760 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1 var(--ht-font);
  font-stretch: var(--ht-wide);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
  transition: color .5s var(--ht-ease-out), -webkit-text-stroke-color .5s var(--ht-ease-out);
}
.ht-motion .ht-point.is-in .ht-point__num { animation: ht-num-flash 1.8s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 450ms) backwards; }
.ht-point.is-current::before { background: var(--ht-paper); }
.ht-point.is-current .ht-point__num { color: var(--ht-paper); -webkit-text-stroke-color: var(--ht-paper); }
.ht-motion .ht-point.is-current .ht-point__num { animation: none; } /* no flash on the point being read */
@media (hover: hover) and (pointer: fine) {
  .ht-point:hover .ht-point__num { color: var(--ht-paper); }
}
.ht-point__body { min-width: 0; }
.ht-point__body > * + * { margin-top: .9em; }
.ht-read .ht-point__title {
  margin: 0 0 .55rem;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem);
  font-weight: 650;
  font-stretch: var(--ht-semi);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.ht-points--bullets .ht-point { grid-template-columns: 1.5rem minmax(0, 1fr); }
.ht-points--bullets .ht-point__body { grid-column: 2; }
.ht-points--bullets .ht-point::after { /* diamond marker instead of a number */
  content: "";
  position: absolute;
  top: calc(1.6rem + .6em);
  left: .1rem;
  width: 7px;
  height: 7px;
  background: var(--ht-mist);
  transform: rotate(45deg);
}

/* Closing panel ("Conclusion") */
.ht-read .ht-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 2.75em;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--ht-line-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
}
.ht-read .ht-close::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -25%;
  width: 75%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .08), transparent 70%);
  pointer-events: none;
}
.ht-read .ht-close > * { margin: 0; }
.ht-read .ht-close > * + * { margin-top: 1em; }
.ht-read .ht-close__title { margin: 0 0 1.25rem; } /* the label look: "Small labels", start of the blog part */
.ht-read .ht-close__title + * { margin-top: 0; }
.ht-read .ht-close p { color: var(--ht-paper); font-size: 1.06em; line-height: 1.7; }

/* End of the article: category, back to the blog, share (phones) */
.ht-art__end {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--ht-line);
}
.ht-art__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.ht-art__tags .ht-proj__cat { margin-bottom: 0; }

/* ---------- "Keep reading" ---------- */
.ht-related {
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--ht-line);
}

/* ---------- Search page ---------- */
.ht-search { padding-bottom: clamp(5rem, 10vw, 8rem); }
.ht-search__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(10rem, 15vw, 13rem) 0 clamp(3rem, 6vw, 4.5rem); /* clears the original header */
}
.ht-search__title {
  max-width: 16ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ht-search__title > span:not(.ht-w) { /* the words searched for, outlined */
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}
.ht-search__intro {
  max-width: 50ch;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  color: var(--ht-text);
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}
.ht-results {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ht-line);
  list-style: none;
}
.ht-result {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(0rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid var(--ht-line);
}
.ht-result[hidden] { display: none !important; }
@media (min-width: 768px) {
  .ht-result {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    padding-inline-end: max(clamp(0rem, 1.5vw, 1.25rem), var(--ht-lane, 0px)); /* lane: the arrow circle keeps out of the floating buttons */
  }
  /* lane: filter buttons, "Nothing found" and the "Browse" links wrap before the floating buttons */
  :is(.ht-blog, .ht-search) .ht-filter,
  .ht-search__none,
  .ht-search .ht-explore { padding-inline-end: var(--ht-lane, 0px); }
}
.ht-result::after { /* soft light under the mouse */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(30rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .055), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ht-ease-out);
}
.ht-result__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ht-line);
  border-radius: 12px;
  background: #0b0b0e;
  aspect-ratio: 3 / 2;
}
.ht-result__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .7s var(--ht-ease-out), scale 1s var(--ht-ease-out);
}
.ht-result__media--icon { display: grid; place-items: center; }
.ht-result__icon { color: var(--ht-mist); font-size: 2rem; line-height: 1; transition: color .4s var(--ht-ease-out); }
.ht-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .85rem;
  margin: 0 0 .55rem;
  color: var(--ht-mist);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: var(--ht-semi);
  line-height: 1.3;
}
.ht-result__type { color: var(--ht-paper); }
.ht-result__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem);
  font-weight: 680;
  font-stretch: var(--ht-semi);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.ht-result__link,
.ht-result__link:hover,
.ht-result__link:focus { color: var(--ht-paper); text-decoration: none; }
.ht-result__link {
  padding-bottom: .06em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .55s var(--ht-ease-out);
}
.ht-result__link::after { /* the whole row is the link */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.ht-result__text {
  max-width: 78ch;
  margin: .6rem 0 0;
  color: var(--ht-mist);
  font-size: .9375rem;
  line-height: 1.65;
}
/* The words searched for: a white highlight (not Signal: nothing to act on) that sweeps in as each
   result rises into place; on the row under the mouse (a link) it turns Signal-soft. The highlight
   is its own layer behind the word (each mark is one word, SiteSearch::mark), so the sweep is a
   scale only. */
.ht-search mark {
  position: relative;
  z-index: 0;
  padding: 0 .12em;
  border-radius: 4px;
  background: none;
  color: var(--ht-paper);
  transition: color .4s var(--ht-ease-out);
}
.ht-search mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .17);
  transform-origin: 0 50%;
  pointer-events: none;
}
.rtl .ht-search mark::before { transform-origin: 100% 50%; }
.ht-motion .ht-result:not(.is-in) mark::before { transform: scaleX(0); }
.ht-motion .ht-result.is-in mark::before { transition: transform .9s var(--ht-ease-out) calc(var(--ht-d, 0ms) + 380ms); }
.ht-motion .ht-result.is-instant mark::before { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .ht-result:hover mark { color: var(--ht-signal-soft); }
}
.ht-result__go {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--ht-line-strong);
  border-radius: 50%;
  color: var(--ht-paper);
  transition: background-color .3s var(--ht-ease-out), border-color .3s var(--ht-ease-out), transform .45s var(--ht-ease-out);
}
.ht-result__go svg { fill: currentColor; }
@media (max-width: 767.98px) { /* phones: text only, the whole row stays the link */
  .ht-result__media,
  .ht-result__go { display: none; }
}
.ht-result:hover .ht-result__link,
.ht-result__link:focus-visible { background-size: 100% 2px; }
.ht-result:hover .ht-result__go,
.ht-result:focus-within .ht-result__go { border-color: var(--ht-signal); background: var(--ht-signal); transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .ht-result:hover::after { opacity: 1; }
  .ht-result:hover .ht-result__media img { filter: none; scale: 1.05; }
  .ht-result:hover .ht-result__icon { color: var(--ht-paper); }
}
.ht-search__none {
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--ht-line);
}
.ht-search__none-title { /* a row heading (--ht-h3) */
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h3, clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem));
  font-weight: 700;
  font-stretch: var(--ht-wide);
  line-height: 1.05;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ht-search__none-text { max-width: 60ch; margin: 1rem 0 0; color: var(--ht-mist); line-height: 1.65; }
.ht-explore { padding-top: clamp(2rem, 4vw, 2.75rem); }
.ht-tag--link,
.ht-tag--link:hover,
.ht-tag--link:focus { color: var(--ht-paper); text-decoration: none; } /* hover / focus look: "Buttons" (white sweep) */
.ht-search__latest {
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--ht-line);
}

/* ---------- Home page blog strip (home.blade.php; cards: includes/ht-post-card) ---------- */
.ht-homeblog { padding: clamp(5rem, 10vw, 8rem) 0; }
.ht-homeblog__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.5rem);
}
.ht-homeblog__title {
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(2.5rem, 1.2rem + 4.4vw, 4.5rem);
  font-weight: 740;
  font-stretch: var(--ht-wide);
  line-height: .96;
  letter-spacing: -.035em;
}
.ht-homeblog__title > span:not(.ht-w) { /* CMS "<span>" = an outlined second line */
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85);
}

/* ---------- Error page "not found" (errors/ht-404.blade.php) ---------- */
.ht-404 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(10rem, 15vw, 13rem) 0 clamp(5rem, 10vw, 8rem); /* clears the original header */
}
.ht-404::after { /* soft light that follows the mouse; it fades out toward the section's lower edge (as on the heroes) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(34rem circle at var(--mx, 70%) var(--my, 20%), rgba(255, 255, 255, .05), transparent 65%);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 11rem), transparent);
          mask-image: linear-gradient(#000 calc(100% - 11rem), transparent);
  pointer-events: none;
}
.ht-404__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 992px) {
  .ht-404__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .ht-404__main { grid-row: 1; grid-column: 1; }
  .ht-404__code { grid-row: 1; grid-column: 2; justify-content: flex-end; margin: 0; }
}
.ht-404__code {
  display: flex;
  margin: 0;
  color: transparent;
  font-family: var(--ht-font);
  font-size: clamp(6rem, 2rem + 14vw, 15rem);
  font-weight: 780;
  font-stretch: var(--ht-wide);
  line-height: .82;
  letter-spacing: -.05em;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .85);
  -webkit-user-select: none;
          user-select: none;
}
.ht-404__code span {
  position: relative;
  isolation: isolate;
  display: inline-block;
}
/* The digits glow: a filled copy of each digit (data-ht-glyph) behind its outline fades in and out,
   so only opacity animates. Paused before the loader lifts and while off screen (the code is
   [data-ht-live]). */
.ht-404__code span::after {
  content: attr(data-ht-glyph);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(255, 255, 255, .14);
  -webkit-text-stroke: 0;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ht-motion .ht-404__code span { animation: ht-404-rise 1.1s var(--ht-ease-out) both; }
  .ht-motion .ht-404__code span:nth-child(2) { animation-delay: .08s; }
  .ht-motion .ht-404__code span:nth-child(3) { animation-delay: .16s; }
  .ht-motion .ht-404__code span::after { animation: ht-404-glow 3.6s ease-in-out 1.4s infinite; }
  .ht-motion .ht-404__code span:nth-child(2)::after { animation-delay: 1.7s; }
  .ht-motion .ht-404__code span:nth-child(3)::after { animation-delay: 2s; }
  .ht-motion:not(.ht-stage) .ht-404__code span::after,
  .ht-motion .ht-404__code.is-paused span::after { animation-play-state: paused; }
}
@keyframes ht-404-rise {
  from { opacity: 0; transform: translate3d(0, 40%, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes ht-404-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.ht-404__label { margin-bottom: 1.25rem; }
.ht-404__title { /* the big outlined code is the display line; the title uses the section-title size */
  max-width: 18ch;
  margin: 0;
  color: var(--ht-paper);
  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: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ht-404__path { margin: 1.25rem 0 0; }
.ht-404__path code {
  display: inline-block;
  max-width: 100%;
  padding: .35rem .75rem;
  border: 1px solid var(--ht-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--ht-mist);
  font: 500 .875rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.ht-404__text {
  max-width: 56ch;
  margin: 1.25rem 0 0;
  color: var(--ht-text);
  font-size: var(--ht-lead, clamp(1.0625rem, .98rem + .4vw, 1.25rem));
  line-height: 1.6;
}
.ht-404__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* ---------- Text pages: Privacy Policy, Terms, GDPR, ... (page.blade.php) ----------
   Numbered sections like the service and About pages: heading on the left (sticky), text right. */
.ht-doc { padding-bottom: clamp(4rem, 8vw, 7rem); }
.ht-doc__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(10rem, 15vw, 13rem) 0 clamp(2.5rem, 5vw, 4rem); /* clears the original header */
}
.ht-doc__title {
  max-width: 16ch;
  margin: 0;
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: var(--ht-h1, clamp(2.5rem, 1.2rem + 5.6vw, 6.75rem));
  font-weight: 750;
  font-stretch: var(--ht-wide);
  line-height: .93;
  letter-spacing: -.04em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (max-width: 399.98px) {
  .ht-doc__title { -webkit-hyphens: auto; hyphens: auto; } /* "Regulation", "conditions" on small phones */
}
.ht-doc__facts { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); } /* the look: meta lines, article part */

/* A page with nothing written yet: the site search and the main sections, in the hero. */
.ht-doc__hero--empty { padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.ht-doc__empty { max-width: 640px; }
.ht-doc__empty .ht-searchbox { margin-top: clamp(2rem, 4vw, 3rem); }
.ht-doc__empty .ht-explore { padding-top: clamp(2rem, 4vw, 2.5rem); }
.ht-doc__intro { max-width: 760px; max-width: min(760px, 100% - var(--ht-lane, 0px)); margin-top: clamp(2rem, 4vw, 3rem); } /* lane: see the blog part */
.ht-doc__intro > p:first-child { color: var(--ht-paper); font-size: 1.15em; line-height: 1.65; }

.ht-doc__toc {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.ht-doc__index {
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 768px) { .ht-doc__index { columns: 2; padding-inline-end: var(--ht-lane, 0px); } } /* lane: the columns give the floating buttons room */
@media (min-width: 1200px) { .ht-doc__index { columns: 3; } }
.ht-doc__index li { break-inside: avoid; }
/* In columns the rows slide in from the side (same fade, timing and stagger as the rise). WebKit
   (Safari) maps a row that waits 2rem lower across the end of its column into two columns, never
   reports it as visible and so never reveals it; a sideways start stays inside its column. */
@media (min-width: 768px) {
  .ht-motion .ht-doc__index li[data-ht-reveal]:not(.is-in) { transform: translate3d(-1.5rem, 0, 0); }
  .ht-motion .rtl .ht-doc__index li[data-ht-reveal]:not(.is-in) { transform: translate3d(1.5rem, 0, 0); }
}
/* Index links: on hover / keyboard focus a Signal rule draws in over the hairline, the words move
   in a little and the number turns Signal-soft. (Group titles keep the same row height, so the
   hairlines of the columns stay level.) */
.ht-doc__index-link {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .35rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--ht-line);
  color: var(--ht-mist);
  font: 500 .9375rem/1.4 var(--ht-font);
  text-decoration: none;
  transition: color .3s var(--ht-ease-out);
}
.ht-doc__index-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--ht-signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ht-ease-out);
  pointer-events: none;
}
.rtl .ht-doc__index-link::after { transform-origin: 100% 50%; }
.ht-doc__index-link > span:last-child { transition: translate .45s var(--ht-ease-out); }
.ht-doc__index-link:hover { color: var(--ht-mist); text-decoration: none; } /* touch: no stuck hover, no theme link blue */
.ht-doc__index-link:focus-visible { color: var(--ht-paper); text-decoration: none; }
.ht-doc__index-link:focus-visible::after { transform: scaleX(1); }
.ht-doc__index-link:focus-visible > span:last-child { translate: 4px 0; }
.rtl .ht-doc__index-link:focus-visible > span:last-child { translate: -4px 0; }
.ht-doc__index-link:focus-visible .ht-toc__n { color: var(--ht-signal-soft); }
@media (hover: hover) {
  .ht-doc__index-link:hover { color: var(--ht-paper); }
  .ht-doc__index-link:hover::after { transform: scaleX(1); }
  .ht-doc__index-link:hover > span:last-child { translate: 4px 0; }
  .rtl .ht-doc__index-link:hover > span:last-child { translate: -4px 0; }
  .ht-doc__index-link:hover .ht-toc__n { color: var(--ht-signal-soft); }
}
.ht-doc__index .is-group .ht-doc__index-link {
  grid-template-columns: minmax(0, 1fr);
  color: var(--ht-paper);
  font-weight: 650;
  font-stretch: var(--ht-semi);
}

/* Each section: a faint light follows the mouse ([data-ht-spot], mouse only; kept very soft so long
   legal text stays calm to read). */
.ht-sp__row.ht-doc__row {
  position: relative;
  isolation: isolate;
}
.ht-doc__row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(32rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .04), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ht-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ht-doc__row:hover::after { opacity: 1; }
}

.ht-sp__row.ht-doc__row { padding: clamp(2.25rem, 4.5vw, 3.75rem) 0; }
.ht-doc__body > .ht-sp__row:first-child { border-top: 1px solid var(--ht-line); } /* same width as the index lines */
.ht-sp__heading.ht-doc__heading { /* the row-heading size (--ht-h3), semi-wide: long legal headings in the side column */
  max-width: 22ch;
  font-size: var(--ht-h3, clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem));
  font-stretch: var(--ht-semi);
  line-height: 1.08;
}
.ht-doc__heading,
.ht-doc__group { scroll-margin-top: 7rem; } /* clear of the fixed header after a jump */
.ht-doc__group {
  margin: 0;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--ht-line-strong);
  color: var(--ht-paper);
  font-family: var(--ht-font);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  font-weight: 740;
  font-stretch: var(--ht-wide);
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ht-doc__body > .ht-doc__group:first-child { border-top: 0; }
.ht-doc__text { max-width: 760px; max-width: min(760px, 100% - var(--ht-lane, 0px)); } /* lane: the text never reaches under the floating buttons */
.ht-doc__group { padding-inline-end: var(--ht-lane, 0px); }
.ht-doc__row--contact .ht-doc__text {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--ht-line-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
}
.ht-doc__row--contact .ht-read ul {
  padding: 0;
  list-style: none;
}
.ht-doc__row--contact .ht-read li { color: var(--ht-paper); }
.ht-doc__row--contact .ht-read li + li { margin-top: .2em; }

/* ---------- Reduced motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .ht-post__more svg,
  .ht-share__btn,
  .ht-share__btn::before,
  .ht-copy,
  .ht-copy::before,
  .ht-toc__bar,
  .ht-toc__link::before,
  .ht-toc__text,
  .ht-doc__index-link::after,
  .ht-doc__index-link > span:last-child,
  .ht-widget img,
  .ht-widget .btn,
  .ht-result__go,
  .ht-result__media img,
  .ht-search mark,
  .ht-search mark::before,
  .ht-art__visual,
  .ht-art__glare,
  .ht-blog > .ht-blog__hero .ht-folio__art,
  .ht-where__card,
  .ht-searchbox__btn svg { transition: none !important; }
  .ht-share__btn:hover,
  .ht-share__btn:focus-visible,
  .ht-share__btn.is-done { transform: none; }
  .ht-toc__link:hover .ht-toc__text,
  .ht-toc__link:focus-visible .ht-toc__text,
  .ht-doc__index-link:hover > span:last-child,
  .ht-doc__index-link:focus-visible > span:last-child { translate: none !important; } /* incl. the .rtl variants */
  /* Lights that follow the mouse: off (the still light behind each hero stays). */
  .ht-art__hero::after,
  .ht-search__hero::after,
  .ht-doc__hero::after,
  .ht-doc__row::after,
  .ht-404::after { display: none; }
}
@media print { /* on paper: no filter bar (it only works on screen), no lights, no glare */
  .ht-filter,
  .ht-filter__glide,
  .ht-art__glare,
  .ht-art__hero::after,
  .ht-search__hero::after,
  .ht-doc__hero::after,
  .ht-doc__row::after { display: none !important; }
  .ht-art__visual { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-svc__icon,
  .ht-svc__more,
  .ht-svc__media,
  .ht-svc__media img,
  .ht-svc--link::after,
  .ht-frame__shot img,
  .ht-gallery__item img,
  .ht-pcard__link,
  .ht-sp__art,
  .ht-pill svg,
  .ht-card::after,
  .ht-reason::after,
  .ht-solo::after,
  .ht-quote,
  .ht-video img,
  .ht-member__frame img { transition: none !important; }
  /* P1 polish: buttons fill at once (no sweep, no sheen), hovers and the current row change at once */
  .ht-pill,
  .ht-ghost,
  .ht-filter__btn,
  .ht-tag,
  .ht-proj__cat,
  .ht-chip,
  .ht-gallery__item,
  .ht-next__go,
  .ht-next__go svg,
  .ht-video__play,
  .ht-sp__num,
  .ht-sp__num::after,
  .ht-col__item::before,
  .ht-col__text,
  .ht-feat::after,
  .ht-col::after,
  :is(.ht-card, .ht-reason, .ht-feat, .ht-col)::before,
  :is(.ht-card__text, .ht-reason__text, .ht-feat__text),
  .ht-card__num,
  .ht-member__frame,
  .ht-member__frame::before,
  .ht-member__frame .ht-member__lit,
  .ht-member__initials,
  .ht-kicker::before,
  .ht-req__subtitle::before,
  .ht-pill__host { transition: none !important; }
  /* Lights that follow the mouse stand still: hitech.js writes no --mx / --my then, so the project
     hero keeps its resting light, the flat cards a light and a glowing rule at their top centre, and
     a hovered team photo shows the face in colour (the defaults in their var() fallbacks). */
  .ht-pill::after { display: none; }
  .ht-pill:hover svg,
  .ht-pill:focus-visible svg,
  .ht-dock:hover > svg,
  .ht-next__inner:hover .ht-next__go svg,
  .rtl .ht-pill:hover svg,
  .rtl .ht-pill:focus-visible svg,
  .rtl .ht-dock:hover > svg,
  .rtl .ht-next__inner:hover .ht-next__go svg { transform: none; }
  .ht-quote:hover { translate: none; }
  .ht-svc__media img { transform: none; }
  .ht-sp__art { transform: translateY(-44%); }
  .ht-dock,
  .ht-dock.is-shown { transform: translate3d(-50%, 0, 0); transition: opacity .2s, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 991.98px) {
  .ht-sp__art { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-way::after,
  .ht-way__icon,
  .ht-way__value,
  .ht-way__label-in,
  .ht-way__go svg,
  .ht-where__map iframe { transition: none !important; }
  .ht-way__link:hover .ht-way__icon,
  .ht-way__link:hover .ht-way__value { transform: none; }
  .ht-field__icon i.is-swap,
  .ht-copy.is-done .fa-check,
  .ht-where__copy.is-done .fa-check { animation: none; }
}
@media print {
  .ht-motion [data-ht-reveal],
  .ht-motion [data-ht-split],
  .ht-motion [data-ht-lightup],
  .ht-motion [data-ht-auto] > *,
  .ht-motion .ht-pcard .ht-frame__shot,
  .ht-motion .ht-w__i,
  .ht-motion .ht-lw {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
  }
  .ht-motion [data-ht-reveal="media"]::after,
  .ht-motion .ht-pcard .ht-frame__shot::after { display: none !important; }
  .ht-dock,
  .ht-sp__art,
  .ht-marquee,
  .ht-formbox::before,
  .ht-cp__waves,
  .ht-copy,
  .ht-where__copy,
  .ht-proj__glow,
  .ht-proj__hero::after,
  .ht-pill::after,
  .ht-pcard__cursor,
  .ht-pcard__glare,
  .ht-member__lit { display: none !important; }
  .ht-motion .ht-sp__num::after,
  .ht-motion :is(.ht-kicker, .ht-req__subtitle)::before,
  .ht-motion :is(.ht-card, .ht-reason, .ht-feat, .ht-col)::before { transform: none !important; }
  .ht-proj__side { background: none !important; box-shadow: none !important; }
  .ht-motion .ht-stat .ht-stat__value { color: inherit !important; }
  .ht-progress,
  .ht-art__aside,
  .ht-art__share-end,
  .ht-searchbox,
  .ht-related,
  .ht-widgets { display: none !important; }
  .ht-motion .ht-point::before { transform: none !important; }
  .ht-art__layout { display: block !important; }
}