/* ==========================================================================
   SoloTrace homepage layout. Page-level styles only; components live in
   solotrace.css. Requires tokens.css and solotrace.css.
   ========================================================================== */

/* Placeholder marker: content that arrives in a later brief part. */
.ph {
  color: var(--st-fg-muted);
  border-bottom: 1px dashed currentColor;
  font-style: normal;
}
.st-navy .ph { color: var(--st-ivory-75); }
.sample-note {
  font-size: var(--st-fs-small);
  color: var(--st-fg-muted);
  margin-top: var(--st-space-5);
}
.st-navy .sample-note { color: var(--st-ivory-75); }

/* --- Header -------------------------------------------------------------- */
.hp-header { position: sticky; top: 0; z-index: 20; background: rgb(248 246 242 / 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--st-greige); }
.hp-header .st-header__inner { gap: var(--st-space-4); }
.hp-header__right { display: flex; align-items: center; gap: var(--st-space-4); }
.hp-lang { display: inline-flex; gap: 0.125rem; padding: 0.2rem; border-radius: var(--st-radius-sm); background: var(--st-greige); }
.hp-lang a {
  display: inline-grid; place-items: center; min-width: 2.25rem; height: 2rem; padding-inline: 0.5rem;
  font-family: var(--st-font-heading); font-size: 0.8125rem; font-weight: var(--st-fw-bold); letter-spacing: 0.02em;
  border-radius: 6px; text-decoration: none; color: var(--st-fg-muted);
}
.hp-lang a[aria-current="true"] { background: var(--st-navy); color: var(--st-ivory); }
.hp-lang a[hidden] { display: none; } /* SV stays hidden until its review is done (Part 3) */
.hp-lang a:not([aria-current]):hover { color: var(--st-fg); }
.hp-header .st-btn--primary { display: none; }
/* Part 3: full menu on wide screens only; mobile and tablet use the side panel. */
.hp-header .st-nav { display: none; }
.hp-header .st-nav-toggle { display: inline-grid; }
@media (min-width: 1180px) {
  .hp-header .st-nav { display: flex; }
  .hp-header .st-btn--primary { display: inline-flex; }
  .hp-header .st-nav-toggle { display: none; }
}
@media (max-width: 480px) { .hp-header .hp-lang { display: none; } }
.hp-header .st-nav a { white-space: nowrap; }
html[lang="pt-PT"] .hp-header .st-nav { gap: var(--st-space-4); } /* longer Portuguese labels */

/* --- Side panel ------------------------------------------------------------ */
.hp-drawer { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.hp-drawer.is-open { visibility: visible; }
.hp-drawer__backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / 0.45); opacity: 0; transition: opacity var(--st-dur) var(--st-ease); }
.hp-drawer.is-open .hp-drawer__backdrop { opacity: 1; }
.hp-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(22rem, 88vw);
  background: var(--st-ivory); padding: var(--st-space-4) var(--st-space-5) var(--st-space-6);
  display: flex; flex-direction: column; gap: var(--st-space-6); overflow-y: auto;
  transform: translateX(100%); transition: transform var(--st-dur-slow) var(--st-ease);
}
.hp-drawer.is-open .hp-drawer__panel { transform: none; }
.hp-drawer__head { display: flex; justify-content: space-between; align-items: center; }
.hp-drawer__head img { width: 2.5rem; height: auto; }
.hp-drawer__links { display: grid; }
.hp-drawer__links a {
  display: block; padding-block: var(--st-space-3); border-bottom: 1px solid var(--st-greige);
  font-family: var(--st-font-heading); font-weight: var(--st-fw-bold); font-size: 1.25rem; text-decoration: none;
}
.hp-drawer__foot { margin-top: auto; display: grid; gap: var(--st-space-4); justify-items: start; }
.hp-drawer__foot .st-btn { width: 100%; }
.hp-no-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .hp-drawer__panel, .hp-drawer__backdrop { transition: none; } }

/* --- Hero ---------------------------------------------------------------- */
.hp-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(1rem, 2.5vw, 2rem); position: relative; overflow-x: clip; }
/* Open hero: no panel, mark sits on the ivory page. Line and shadow are page-level, so 3D and fallback share them. */
.st-hero3d--open { background: transparent; border-radius: 0; overflow: visible; }
.hp-hero__line {
  position: absolute; top: 0; left: 0; height: 100%; width: 170%; pointer-events: none;
}
.hp-hero__shadow {
  position: absolute; left: 18%; top: 72%; width: 64%; height: 14%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(15 23 42 / 0.26) 0%, rgb(15 23 42 / 0.1) 40%, transparent 70%);
  filter: blur(14px);
}
.st-hero3d--open canvas, .st-hero3d--open .st-hero3d__fallback { z-index: 1; }
@media (max-width: 959px) { .hp-hero__line { width: 120%; left: -10%; } }
.hp-hero__tagline {
  font-family: var(--st-font-heading); font-weight: var(--st-fw-light); font-size: 1.125rem;
  letter-spacing: -0.01em; color: var(--st-fg-muted);
}
.hp-hero__tagline b { font-weight: var(--st-fw-bold); color: var(--st-fg); }

/* --- Section headers ----------------------------------------------------- */
.hp-section-head { max-width: 40rem; margin-bottom: var(--st-space-7); }
.hp-section-head p { margin-top: var(--st-space-3); }
.hp-section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--st-space-4); max-width: none; }
.hp-section-head--row > div { max-width: 40rem; }

/* --- What we do ---------------------------------------------------------- */
.hp-cat .st-card {
  display: flex; flex-direction: column; min-height: 17rem; position: relative; overflow: hidden;
  transition: transform var(--st-dur) var(--st-ease), background-color var(--st-dur) var(--st-ease);
}
.hp-cat .st-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--st-blue); }
.hp-cat .st-card:hover { background: var(--st-blue); transform: translateY(-3px); }
.hp-cat .st-card:hover .st-muted { color: var(--st-navy); }
.hp-cat .st-card:hover::before { background: var(--st-navy); }
@media (prefers-reduced-motion: reduce) { .hp-cat .st-card:hover { transform: none; } }
.hp-cat .st-card p { flex: 1; }
.hp-cat { grid-template-columns: 1fr; grid-auto-rows: 1fr; } /* equal card height in every layout */
@media (min-width: 600px) and (max-width: 1023.98px) { .hp-cat { grid-template-columns: 1fr 1fr; } .hp-cat > :nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .hp-cat { grid-template-columns: repeat(3, 1fr); } }
.hp-cat .st-card a { font-family: var(--st-font-heading); font-weight: var(--st-fw-bold); text-decoration: none; }
.hp-cat .st-card a::after { content: " \2192"; }
.hp-cat .st-card a:hover { text-decoration: underline; }

/* --- Why band ------------------------------------------------------------ */
.hp-why { display: grid; gap: var(--st-space-7); }
@media (min-width: 960px) { .hp-why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--st-space-9); align-items: start; } }
.hp-why__intro p { margin-top: var(--st-space-4); color: var(--st-ivory-75); max-width: 36ch; }
.hp-why__link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--st-space-4); color: var(--st-ivory); font-family: var(--st-font-heading); font-weight: var(--st-fw-bold); text-decoration: none; }
.hp-why__link::after { content: " \2192"; margin-left: 0.3em; }
.hp-why__link:hover { text-decoration: underline; }
.hp-why__link:focus-visible { outline-color: var(--st-ring); }
.hp-why__list { display: grid; gap: var(--st-space-5); }
@media (min-width: 640px) { .hp-why__list { grid-template-columns: 1fr 1fr; } }
.hp-why__item { padding-top: var(--st-space-4); border-top: 1px solid var(--st-ivory-a24); }
.hp-why__item h3 { font-size: 1.125rem; color: var(--st-ivory); margin-bottom: var(--st-space-2); }
.hp-why__item p { color: var(--st-ivory-75); font-size: var(--st-fs-small); line-height: 1.6; }
.hp-why__num { font-family: var(--st-font-heading); font-size: var(--st-fs-label); font-weight: var(--st-fw-bold); letter-spacing: var(--st-tracking-label); color: var(--st-blue); display: block; margin-bottom: var(--st-space-3); }

/* --- Demo sites ---------------------------------------------------------- */
.hp-demo { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: var(--st-radius-md); overflow: hidden; background: var(--st-greige); transition: transform var(--st-dur) var(--st-ease); }
.hp-demo:hover { transform: translateY(-3px); }
.hp-demo__badge {
  position: absolute; top: var(--st-space-3); left: var(--st-space-3); z-index: 1;
  font-family: var(--st-font-body); font-size: 0.6875rem; font-weight: var(--st-fw-medium); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border-radius: 6px; background: var(--st-navy); color: var(--st-ivory);
}
.hp-demo__shot { aspect-ratio: 4 / 3; padding: 12% 10% 0; flex: none; }
.hp-demo__shot--img { padding: 0; overflow: hidden; }
.hp-demo__shot--img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hp-demo__win { height: 100%; border-radius: 10px 10px 0 0; background: var(--st-ivory); padding: 10px; display: grid; gap: 8px; grid-template-rows: 10px 1fr; }
.hp-demo__bar { display: flex; gap: 5px; }
.hp-demo__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--st-greige); }
.hp-demo__body { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; grid-template-rows: 1.1fr 0.6fr 0.6fr; }
.hp-demo__body i { display: block; border-radius: 6px; background: var(--st-beige); }
.hp-demo__body i:first-child { grid-column: 1 / -1; }
.hp-demo--a .hp-demo__body i:first-child { background: var(--st-blue); }
.hp-demo--b .hp-demo__body i:first-child { background: var(--st-navy); }
.hp-demo--c .hp-demo__body i:nth-child(2) { background: var(--st-blue); }
.hp-demo--d .hp-demo__body i:first-child { background: var(--st-beige); } .hp-demo--d .hp-demo__body i:nth-child(3) { background: var(--st-navy); }
.hp-demo--e .hp-demo__body i:first-child { background: var(--st-navy); } .hp-demo--e .hp-demo__body i:nth-child(4) { background: var(--st-blue); }
.hp-demo--f .hp-demo__body i:nth-child(5) { background: var(--st-blue); }
.hp-demo__meta { margin-top: auto; padding: var(--st-space-4) var(--st-space-5) var(--st-space-5); display: flex; justify-content: space-between; align-items: baseline; gap: var(--st-space-3); }
.hp-demo__meta h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-demo__meta h3 { font-size: 1.0625rem; }
.hp-demo__meta span { font-size: var(--st-fs-small); color: var(--st-fg-muted); white-space: nowrap; }

/* --- Packages ------------------------------------------------------------ */
.hp-pkg__group + .hp-pkg__group { margin-top: var(--st-space-7); }
.hp-pkg__group-title { font-size: var(--st-fs-h4); margin-bottom: var(--st-space-4); padding-bottom: var(--st-space-3); border-bottom: 1px solid var(--st-greige); }
.hp-pkg .st-card { display: flex; flex-direction: column; gap: var(--st-space-4); }
.hp-pkg .st-card > * + * { margin-top: 0; }
.hp-pkg__price { font-family: var(--st-font-heading); font-size: 2rem; font-weight: var(--st-fw-extrabold); letter-spacing: -0.02em; line-height: 1; }
.hp-pkg__price { display: grid; gap: var(--st-space-2); }
.hp-pkg__price small { display: block; font-family: var(--st-font-body); font-size: var(--st-fs-small); font-weight: var(--st-fw-regular); letter-spacing: 0; color: var(--st-fg-muted); margin-top: 0; line-height: 1.5; }
.hp-pkg__amount { display: block; font-variant-numeric: tabular-nums; }
.hp-pkg__regular { font-family: var(--st-font-body); font-size: var(--st-fs-body); font-weight: var(--st-fw-regular); letter-spacing: 0; line-height: 1.5; }
.hp-pkg__price .hp-pkg__intro { margin-top: var(--st-space-1); }
.hp-pkg__terms { max-width: 60ch; margin-top: var(--st-space-6); }
.hp-pkg__terms a { white-space: nowrap; }
.hp-pkg__list { display: grid; gap: var(--st-space-2); font-size: var(--st-fs-small); flex: 1; }
.hp-pkg__list li { padding-left: 1.4em; position: relative; }
.hp-pkg__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--st-navy); }
.hp-pkg .st-btn { align-self: flex-start; }

/* --- Founder ------------------------------------------------------------- */
.hp-founder { max-width: 40rem; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: var(--st-space-4); }
.hp-founder h2 { max-width: 18ch; }
.hp-founder p { max-width: 50ch; }
.hp-founder__more { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.6rem; font-family: var(--st-font-heading); font-weight: var(--st-fw-bold); text-decoration: none; }
.hp-founder__more::after { content: " \2192"; margin-left: 0.3em; }
.hp-founder__more:hover { text-decoration: underline; }

/* --- Process ------------------------------------------------------------- */
.hp-steps { display: grid; gap: var(--st-space-5); counter-reset: step; }
@media (min-width: 640px) { .hp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hp-steps { grid-template-columns: repeat(3, 1fr); gap: var(--st-space-5) var(--st-space-6); } }
.hp-step { counter-increment: step; padding-top: var(--st-space-4); border-top: 2px solid var(--st-navy); }
.hp-step::before { content: "0" counter(step); display: block; font-family: var(--st-font-heading); font-weight: var(--st-fw-extrabold); font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: var(--st-space-3); }
.hp-step h3 { font-size: 1.0625rem; margin-bottom: var(--st-space-2); }
.hp-step p { font-size: var(--st-fs-small); color: var(--st-fg-muted); }
.hp-step a { color: inherit; }

/* --- FAQ ----------------------------------------------------------------- */
.hp-faq { max-width: 46rem; }
.hp-faq details { border-top: 1px solid var(--st-greige); }
.hp-faq details:last-of-type { border-bottom: 1px solid var(--st-greige); }
.hp-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: flex-start; align-items: center; gap: var(--st-space-4);
  padding-block: var(--st-space-4); font-family: var(--st-font-heading); font-weight: var(--st-fw-bold); font-size: 1.0625rem;
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; flex: none; margin-left: auto; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--st-greige); font-weight: var(--st-fw-regular); font-size: 1.25rem; transition: transform var(--st-dur) var(--st-ease); }
.hp-faq details[open] summary::after { transform: rotate(45deg); }
.hp-faq details > p { padding-bottom: var(--st-space-5); color: var(--st-fg-muted); max-width: 60ch; }
.hp-faq__all { margin-top: var(--st-space-5); }
.hp-faq__wrap { display: grid; gap: var(--st-space-7); }
@media (min-width: 960px) { .hp-faq__wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--st-space-9); align-items: start; } .hp-faq__wrap .hp-section-head { margin-bottom: 0; } }

/* --- Closing ------------------------------------------------------------- */
.hp-closing {
  border-radius: var(--st-radius-lg); background: var(--st-beige); padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center; display: grid; justify-items: center; gap: var(--st-space-4);
}
.hp-closing h2 { max-width: 20ch; }
.hp-closing p { max-width: 50ch; }
.hp-closing .st-btn { margin-top: var(--st-space-2); }

/* --- Contact page panel (shared with contact.html) ----------------------- */
.hp-contact { border-radius: var(--st-radius-lg); background: var(--st-beige); padding: clamp(1.75rem, 5vw, 4rem); display: grid; gap: var(--st-space-7); }
@media (min-width: 960px) { .hp-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--st-space-9); } }
.hp-contact__ways { display: grid; gap: var(--st-space-4); margin-top: var(--st-space-6); }
.hp-contact__ways li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--st-space-3); align-items: start; }
.hp-contact__ways svg { width: 2.5rem; height: 2.5rem; padding: 0.6rem; border-radius: var(--st-radius-sm); background: var(--st-navy); color: var(--st-ivory); }
.hp-contact__ways strong { display: block; font-family: var(--st-font-heading); font-size: var(--st-fs-small); }
.hp-contact__ways a, .hp-contact__ways span.ph { font-size: var(--st-fs-small); }
.hp-form { display: grid; gap: var(--st-space-4); }
.hp-form__row { display: grid; gap: var(--st-space-4); }
@media (min-width: 640px) { .hp-form__row { grid-template-columns: 1fr 1fr; } }
.hp-form label { display: grid; gap: var(--st-space-2); font-size: var(--st-fs-small); font-weight: var(--st-fw-medium); }
.hp-form input, .hp-form textarea, .hp-form select {
  width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--st-radius-sm); border: 1.5px solid var(--st-greige); background: var(--st-ivory); font-size: var(--st-fs-body);
}
.hp-form input:focus-visible, .hp-form textarea:focus-visible, .hp-form select:focus-visible { border-color: var(--st-navy); }
.hp-form textarea { min-height: 7.5rem; resize: vertical; }
.hp-form__foot { display: flex; flex-wrap: wrap; gap: var(--st-space-4); align-items: center; justify-content: space-between; }

/* --- Footer (navy, see tokens.css .st-navy remap) ------------------------ */
.hp-footer { padding-block: var(--st-space-7) var(--st-space-5); font-size: var(--st-fs-small); }
/* Three equal columns from 768 px, aligned to the top: brand, Let's talk, Company. One column below, with Company as an accordion. */
.hp-footer__grid { display: grid; gap: var(--st-space-6); }
@media (min-width: 768px) { .hp-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-space-8); align-items: start; } }
.hp-footer__brand img { height: 2.75rem; width: auto; margin-bottom: var(--st-space-4); }
.hp-footer__brand p, .hp-footer__talk p { color: var(--st-ivory-75); max-width: 32ch; }
.hp-footer h3 { font-size: var(--st-fs-label); letter-spacing: var(--st-tracking-label); text-transform: uppercase; font-family: var(--st-font-body); font-weight: var(--st-fw-medium); color: var(--st-blue); margin-bottom: var(--st-space-3); }
.hp-footer ul { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.hp-footer a:not(.st-btn) { text-decoration: none; color: var(--st-ivory); display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.25rem; }
@media (pointer: coarse), (max-width: 767.98px) { .hp-footer a:not(.st-btn) { min-height: 2.75rem; } }
.hp-footer__legal a:not(.st-btn), .hp-footer__bottom a:not(.st-btn) { min-height: 2.75rem; min-width: 0; }
.hp-footer a:not(.st-btn):hover { text-decoration: underline; }
.hp-footer a:focus-visible, .hp-footer .st-btn:focus-visible { outline-color: var(--st-ring); }
.hp-footer__talk .st-btn { margin-top: var(--st-space-4); }
.hp-footer__talk h3 { margin-bottom: var(--st-space-3); }
/* Company group: a plain heading and list on desktop, an accordion on phones (site.js opens or closes it per viewport). */
.hp-footer__group summary { list-style: none; cursor: default; display: flex; align-items: center; justify-content: space-between; gap: var(--st-space-3); }
.hp-footer__group summary::-webkit-details-marker { display: none; }
.hp-footer__group summary h3 { margin-bottom: var(--st-space-3); }
.hp-footer__group summary::after { content: ""; display: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--st-ivory-75); border-bottom: 2px solid var(--st-ivory-75); transform: rotate(45deg); margin-right: 0.3rem; margin-bottom: 0.9rem; transition: transform 120ms ease; }
@media (min-width: 768px) { .hp-footer__group summary { pointer-events: none; } }
@media (max-width: 767.98px) {
  .hp-footer__group summary { cursor: pointer; min-height: 2.75rem; border-radius: var(--st-radius-sm); }
  .hp-footer__group summary h3 { margin-bottom: 0; }
  .hp-footer__group summary::after { display: block; margin-bottom: 0; }
  .hp-footer__group[open] summary::after { transform: rotate(-135deg); margin-top: 0.4rem; }
  .hp-footer__group[open] summary { margin-bottom: var(--st-space-2); }
}
.hp-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; }
.hp-footer__bottom { display: grid; gap: var(--st-space-3); margin-top: var(--st-space-6); padding-top: var(--st-space-5); border-top: 1px solid var(--st-ivory-a24); color: var(--st-ivory-75); }
.hp-footer__bottom .ph { color: var(--st-ivory-75); }

/* ==========================================================================
   Mobile only, below 768 px. Nothing in this block applies to desktop.
   Controls that exist only for the mobile layouts are hidden by default
   and switched on inside the media query.
   ========================================================================== */
.hp-pkg__toggle, .hp-dots, .hp-pkg__all, .hp-work__toggle { display: none; }

@media (max-width: 767.98px) {
  /* Tap targets: 44 px minimum */
  .hp-lang a { min-width: 2.75rem; height: 2.75rem; }
  .hp-cat .st-card a { display: inline-block; padding-block: 0.6rem; }
  .hp-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .hp-contact__ways a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .hp-footer ul { gap: 0; }

  /* Packages: "Websites | Stores" toggle, one scroll-snap carousel, dots, "See all packages" */
  .hp-pkg__toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem; padding: 0.2rem;
    border-radius: var(--st-radius-sm); background: var(--st-greige); margin-bottom: var(--st-space-5);
  }
  .hp-pkg__toggle button {
    min-height: 2.75rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
    font-family: var(--st-font-heading); font-weight: var(--st-fw-bold); font-size: 0.9375rem; color: var(--st-fg-muted);
  }
  .hp-pkg__toggle button[aria-pressed="true"] { background: var(--st-navy); color: var(--st-ivory); }
  #packages[data-pkg-active] .hp-pkg__group-title { display: none; }
  #packages[data-pkg-active] .hp-pkg__group + .hp-pkg__group { margin-top: 0; }
  #packages[data-pkg-active="web"] .hp-pkg__group[data-pkg="store"],
  #packages[data-pkg-active="store"] .hp-pkg__group[data-pkg="web"] { display: none; }
  .hp-pkg {
    position: relative; display: flex; gap: var(--st-space-4);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--st-gutter)); padding-inline: var(--st-gutter); padding-block: var(--st-space-2);
    scroll-padding-inline: var(--st-gutter); scrollbar-width: none;
  }
  .hp-pkg::-webkit-scrollbar { display: none; }
  .hp-pkg > .st-card { flex: 0 0 85vw; max-width: 85vw; scroll-snap-align: start; }
  .hp-dots { display: flex; justify-content: center; margin-top: var(--st-space-2); }
  .hp-dots button { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
  .hp-dots button::before {
    content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--st-blue);
    transition: transform var(--st-dur) var(--st-ease), background-color var(--st-dur) var(--st-ease);
  }
  .hp-dots button[aria-current="true"]::before { background: var(--st-navy); transform: scale(1.4); }
  .hp-pkg__all { display: inline-flex; width: 100%; margin-top: var(--st-space-5); }
  #packages .sample-note a { display: none; }

  /* Demo sites: title, one line and a button; the six cards open into one column (owner, 2 November 2026) */
  #work .hp-section-head { margin-bottom: var(--st-space-5); }
  #work .hp-section-head--row > .st-btn--secondary { display: none; }
  .hp-work__toggle { display: inline-flex; width: 100%; }
  .hp-work__grid[data-collapsed] { display: none; }
  .hp-work__grid:not([data-collapsed]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--st-space-4); }

  /* Our process: compact list, number + title + one line */
  .hp-steps { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--st-greige); }
  .hp-step {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--st-space-3); align-items: baseline;
    padding-block: var(--st-space-3); border-top: 0; border-bottom: 1px solid var(--st-greige);
  }
  .hp-step::before { grid-row: 1 / span 2; font-size: 1.125rem; margin: 0; }
  .hp-step h3 { font-size: 1rem; margin-bottom: 0.125rem; }
  .hp-step p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* FAQ preview: the first five questions, then "See all FAQs" */
  .hp-faq details:nth-of-type(n + 6) { display: none; }
  .hp-faq__all { width: 100%; }

  /* Footer: stacked, no accordions */
  .hp-footer__grid { gap: var(--st-space-5); }
}

/* Touch devices at any width (tablets included): 44 px tap targets without changing the mouse/desktop style. */
@media (pointer: coarse) {
  .hp-lang a { min-width: 2.75rem; height: 2.75rem; }
  .hp-header .st-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .hp-cat .st-card a { display: inline-block; padding-block: 0.6rem; }
  .hp-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .hp-footer ul { gap: 0; }
  .hp-contact__ways a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* --- Hero floating words (2 November 2026, third version) -----------------
   The word layer covers the whole hero (a direct child of .hp-hero, clipped by it). Words spawn at the centre of the
   mark behind the canvas (z-index 0), move outward at a constant speed and switch in front of the mark (z-index 2)
   once they have cleared its outline. The copy column sits above the words (z-index 3), so words pass behind the
   headline and buttons and never rest on them. Deep Navy text; opacity fades from about 65 % near the mark to 25 % at
   the edge. On phones a light version runs with two or three smaller words. */
.hp-words { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.hp-hero { overflow: clip; }
.hp-hero .st-hero__copy { position: relative; z-index: 3; }
.hp-word {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%;
  display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; text-decoration: none; pointer-events: auto;
  font-family: var(--st-font-body); font-weight: var(--st-fw-medium); font-size: 1.1rem; letter-spacing: -0.005em;
  color: var(--st-navy); padding: 0.15em 0.2em; border-radius: 999px; z-index: 0;
}
.hp-word__text { display: inline-block; transition: transform var(--st-dur) var(--st-ease); }
.hp-word__go { font-size: 0.8em; font-weight: var(--st-fw-medium); color: inherit; display: none; }
.hp-word.is-focus { opacity: 1 !important; z-index: 3 !important; }
.hp-word.is-focus .hp-word__text { transform: scale(1.1); }
.hp-word.is-focus .hp-word__go { display: inline; }
.hp-word.is-static { opacity: 0.65; }
.st-hero3d--open canvas, .st-hero3d--open .st-hero3d__fallback { pointer-events: none; }
.hp-hero__explore {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; padding: 0.4rem 0.2rem; margin-top: var(--st-space-3);
  font-family: var(--st-font-heading); font-weight: var(--st-fw-bold); font-size: 0.95rem; color: var(--st-fg-muted); text-decoration: none;
  border-radius: var(--st-radius-sm); transition: color var(--st-dur) var(--st-ease);
}
.hp-hero__explore:hover, .hp-hero__explore:focus-visible { color: var(--st-navy); text-decoration: underline; text-underline-offset: 0.25em; }
/* Pause toggle: a 36px circle inside a 44px touch area, bottom-right of the hero, at least 24px from the edges.
   Thin Deep Navy border at 25 %, icon at 55 %; both go to full navy on hover and keyboard focus (owner, 2 Nov 2026). */
.hp-float__toggle {
  position: absolute; right: clamp(1.5rem, 2vw, 2rem); bottom: 1.5rem; z-index: 3;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: rgb(15 23 42 / 0.55);
  transition: color 120ms ease;
}
.hp-float__toggle::before { content: ""; position: absolute; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--st-ivory); border: 1px solid rgb(15 23 42 / 0.25); transition: border-color 120ms ease; }
.hp-float__toggle:hover, .hp-float__toggle:focus-visible { color: var(--st-navy); }
.hp-float__toggle:hover::before, .hp-float__toggle:focus-visible::before { border-color: var(--st-navy); }
.hp-float__toggle svg { position: relative; width: 0.875rem; height: 0.875rem; }
.hp-float__toggle .ico-play, .hp-float__toggle.is-paused .ico-pause { display: none; }
.hp-float__toggle.is-paused .ico-play { display: block; }
/* Phones: a light version, smaller words, same motion; nothing heavy. */
@media (max-width: 767.98px) { .hp-word { font-size: 0.85rem; } .hp-float__toggle { bottom: 1.5rem; right: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .hp-word__text, .hp-hero__explore, .hp-float__toggle, .hp-float__toggle::before { transition: none; }
  .hp-word.is-focus .hp-word__text { transform: none; }
}