.hidden { display: none !important; }                
   .stage { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }
   
   /* ---------- section titles ---------- */
   .section__head--center { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
   .section__head--center p { margin: 0; max-width: 60ch; color: var(--muted); }
   .section__head--split { justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
   .section__head--split h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; }
   .seeall { color: var(--blue); font-size: 14px; font-weight: 700; }
   .seeall:hover { text-decoration: underline; }
   
   /* scroll-in reveal (the JS adds .is-in; without JS the noscript rule shows everything) */
   .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
   .reveal.is-in { opacity: 1; transform: none; }
   
   /* ---------- centred responsive card grid: N per row, last row stays centred, nothing stretches ---------- */
   .hgrid { --n: 1; --gap: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
   .hgrid > * { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; }
   @media (min-width: 360px)  { .hgrid { --n: 2; } }
   @media (min-width: 700px)  { .hgrid { --n: 3; } }
   @media (min-width: 960px)  { .hgrid { --n: 5; } }
   @media (min-width: 1360px) { .hgrid { --n: 7; } }
   @media (min-width: 1800px) { .hgrid { --n: 9; } }
   @media (min-width: 2300px) { .hgrid { --n: 11; } }
   .hgrid--svc { --gap: 14px; }
   
   /* service card */
   /* .svc-card__badge { position: absolute; top: 12px; left: 12px; padding: 4px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }
.svc-card__body p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.svc-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.svc-card__tags span { padding: 2px 10px; border-radius: 999px; background: var(--sky); color: var(--blue-dark); font-size: 12px; }
.svc-card__tags small { color: var(--muted); font-size: 12px; } */
   /* service chip (compact) */
   .svc-sm { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s, box-shadow .2s; }
   .svc-sm:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #0000001a; }
   .svc-sm img, .svc-sm__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sky); }
   .svc-sm__ph { display: grid; place-items: center; color: var(--blue); font-weight: 800; }
   .svc-sm b { padding: 10px 12px; font-size: 14px; line-height: 1.3; }
   .svc-sm:hover b { color: var(--blue); }
   
   /* ---------- hover product card ---------- */
   .hcard { container-type: inline-size; position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: box-shadow .2s, transform .2s; }
   .hcard:hover, .hcard:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 32px #00000020; }
   .hcard__img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; }
   .hcard__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
   .hcard:hover .hcard__img > img { transform: scale(1.05); }
   .hcard__more { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 10px 12px; overflow: hidden; background: #111; color: #fff; opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; }
   .hcard:hover .hcard__more, .hcard:focus-visible .hcard__more { opacity: 1; transform: none; }
   .hcard__title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; font-weight: 800; line-height: 1.25; }
   .hcard__ex { display: -webkit-box; margin-top: 4px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #e5e5e5; font-size: 13px; line-height: 1.4; }
   .hcard__feat { margin: 6px 0 0; }
   .hcard__feat li:nth-child(n+3) { display: none; }
   .hcard__feat li { position: relative; padding-left: 16px; color: #d4d4d4; font-size: 12px; line-height: 1.5; }
   .hcard__feat li::before { content: ''; position: absolute; left: 1px; top: 5px; width: 8px; height: 4px; border-left: 2px solid #4ade80; border-bottom: 2px solid #4ade80; transform: rotate(-45deg); }
   .hcard__price { display: block; font-size: 13px; }
   .hcard__price s { color: #a3a3a3; font-size: 12px; }
   .hcard__price b { color: #f9a8d4; }
   .hcard__cta { display: inline-block; margin-top: 4px; padding: 5px 14px; border-radius: 999px; background: var(--blue); font-size: 13px; font-weight: 700; }
   .hcard__name { display: block; padding: 10px 12px 0; overflow: hidden; color: var(--blue); font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
   .hcard__sub { display: block; padding: 2px 12px 12px; color: var(--muted); font-size: 14px; text-align: center; }
   @container (max-width: 190px) { .hcard__feat li:nth-child(n+2) { display: none; } .hcard__ex { -webkit-line-clamp: 1; } }
   @container (min-width: 191px) { .hcard__title { -webkit-line-clamp: 3; } }
   @media (hover: none) { .hcard__more { display: none; } }   /* phones: no hover, the card is simply tappable */
   
   /* ---------- hero slider ---------- */
   .hslide { display: flex; height: clamp(180px, 27vw, 460px); }
   .hslide__text { display: flex; flex: 0 0 40%; align-items: center; padding: 0 clamp(16px, 5vw, 96px); }
   .hslide__text h2 { margin-bottom: clamp(6px, 1vw, 16px); font-size: clamp(15px, 2.4vw, 40px); font-weight: 800; line-height: 1.12; }
   .hslide__text p { display: none; margin: 0 0 18px; max-width: 46ch; font-size: clamp(14px, 1.2vw, 18px); }
   @media (min-width: 768px) { .hslide__text p { display: block; } }
   .hslide__text .btn { min-height: 0; padding: 7px 16px; font-size: clamp(12px, 1.1vw, 16px); }
   @media (min-width: 768px) { .hslide__text .btn { padding: 11px 28px; } }
   .hslide__img { flex: 1; min-width: 0; }
   .hslide__img img { width: 100%; height: 100%; object-fit: cover; }
   
   .swiper { --swiper-theme-color: #fff; --swiper-navigation-size: 22px; }
   .swiper-pagination-bullet { width: 40px; height: 4px; margin: 0 4px !important; border-radius: 999px; background: #fff; opacity: .7; }
   .swiper-pagination-bullet-active { opacity: 1; }
   @media (max-width: 640px) { .swiper-button-prev, .swiper-button-next { display: none; } .swiper-pagination-bullet { width: 24px; } }
   
   /* ---------- category slider (dominant-colour backdrop) ---------- */
   .cslide { display: flex; flex-direction: column; min-height: 0; }
   .cslide__text { display: flex; flex: 1; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 48px); }
   .cslide__box { max-width: 520px; padding: clamp(18px, 2vw, 28px); border-radius: var(--radius); background: #fff; color: #000; }
   .cslide__box h2 { margin-bottom: 10px; font-size: clamp(24px, 3vw, 40px); font-weight: 800; }
   .cslide__box p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
   .cslide__img { height: 240px; }
   .cslide__img img { width: 100%; height: 100%; object-fit: cover; }
   @media (min-width: 768px) {
     .cslide { flex-direction: row; height: clamp(280px, 22vw, 400px); }
     .cslide__text { justify-content: flex-end; flex: 0 0 50%; }
     .cslide__img { flex: 1; height: auto; min-width: 0; }
   }
   
   /* ---------- icon + text blocks (promises, delivery) ---------- */
   .feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(24px, 3vw, 40px); }
   .feats--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
   .feat { text-align: center; }
   .feat__ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--bg, var(--sky)); color: var(--fg, var(--blue)); }
   .feat--lg .feat__ic { width: 80px; height: 80px; }
   .feat h3 { margin-bottom: 6px; font-size: 20px; font-weight: 800; }
   .feat p { margin: 0; color: var(--muted); font-size: 14px; }
   .feat a { display: inline-block; margin-top: 6px; color: var(--blue); font-weight: 700; }
   .feat a:hover { text-decoration: underline; }
   .tone-pink   { --bg: #fce7f3; --fg: #db2777; }
   .tone-purple { --bg: #f3e8ff; --fg: #9333ea; }
   .tone-yellow { --bg: #fef9c3; --fg: #ca8a04; }
   .tone-teal   { --bg: #ccfbf1; --fg: #0d9488; }
   .tone-orange { --bg: #ffedd5; --fg: #ea580c; }
   
   /* ---------- videos ---------- */
   .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
   .vcard { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: box-shadow .2s, transform .2s; }
   .vcard:hover { transform: translateY(-3px); box-shadow: 0 10px 26px #0000001a; }
   .vcard .thumbnail-container { position: relative; cursor: pointer; }
   .vcard .thumbnail-container img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
   .vcard__play { position: absolute; inset: 0; display: grid; place-items: center; background: #0000; transition: background .2s; }
   .vcard:hover .vcard__play { background: #0000004d; }
   .vcard__play i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #dc2626; color: #fff; opacity: .9; }
   .vcard__tag { position: absolute; top: 8px; left: 8px; padding: 2px 10px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 800; }
   .vcard .youtube-player { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
   .vcard__body { padding: 12px; }
   .vcard__body h3 { margin-bottom: 4px; overflow: hidden; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
   .vcard__body h3 a:hover { color: var(--blue); }
   .vcard__body small { display: block; margin-bottom: 10px; color: var(--muted); }
   .vcard__row { display: flex; gap: 8px; }
   .btn--xs { min-height: 0; padding: 5px 14px; font-size: 12px; }
   .back-to-thumbnail { background: #6b7280; color: #fff; }
   .btn--sm { min-height: 38px; padding: 7px 18px; font-size: 14px; }