/* ZeroSite base stylesheet.
 *
 * Structure for every block, in neutral form: enough that a page is correct and
 * readable on its own, with nothing that belongs to one theme's personality.
 * A layout theme (styles/themes/<id>.css) is concatenated after this at build
 * time and overrides from here.
 *
 * Consumes the CSS variables site.css emits (colours, fonts, radius), so a
 * colour preset repaints every theme without any theme knowing about it. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* How wide running text is allowed to get. Not in site.css because it's a
     legibility constant, not a brand choice. */
  --zs-measure: 46rem;

  /* Band colours, resolved once here so a band can redeclare the palette for
     everything inside it without repainting itself: these tokens compute
     against the root's palette, the redeclarations only reach descendants.
     A theme overrides these to say what its own "dark" actually is. */
  --zs-tone-soft: var(--zs-color-surface);
  --zs-tone-dark: var(--zs-color-secondary);
  --zs-tone-brand: var(--zs-color-primary);
  --zs-tone-on-dark: #f8fafc;
  /* Text on the brand colour: white on a dark brand, near-black on a light
     one (a lime or a yellow), worked out per site in site-css.ts. */
  --zs-on-primary: #fff;
  /* The accent, lightened enough to read on a dark band. A band can't derive
     this itself: redeclaring --zs-color-primary in terms of --zs-color-primary
     is a cycle, and CSS drops the whole declaration. */
  --zs-tone-accent-on-dark: color-mix(in srgb, var(--zs-color-primary) 40%, #fff);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--zs-font-body);
  font-size: var(--zs-font-size-base);
  line-height: 1.75;
  color: var(--zs-color-text);
  background: var(--zs-color-background);
  word-break: thai;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--zs-font-heading);
  line-height: 1.35;
  color: var(--zs-color-secondary);
  margin: 1.5em 0 0.5em;
}
h1 { font-size: 2.25rem; margin-top: 0.5em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

a { color: var(--zs-color-primary); }
a:hover { opacity: 0.85; }

.zs-container {
  max-width: var(--zs-container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header ---------- */
.zs-header {
  border-bottom: 1px solid color-mix(in srgb, var(--zs-color-muted) 25%, transparent);
  background: var(--zs-color-background);
}
.zs-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  position: relative;
}
.zs-logo { display: inline-flex; align-items: center; text-decoration: none; }
.zs-logo-text {
  font-family: var(--zs-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--zs-color-secondary);
}
.zs-nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.zs-nav-list a {
  text-decoration: none;
  color: var(--zs-color-text);
  font-weight: 500;
}
.zs-nav-list a:hover { color: var(--zs-color-primary); }
.zs-nav-list a[aria-current="page"] { color: var(--zs-color-primary); }

/* mobile nav (no JS — checkbox toggle) */
.zs-nav-toggle { display: none; }
.zs-nav-burger { display: none; cursor: pointer; padding: 0.5rem; }
.zs-nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  background: var(--zs-color-secondary);
}
@media (max-width: 720px) {
  .zs-nav-burger { display: block; }
  .zs-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--zs-color-background);
    border-bottom: 1px solid color-mix(in srgb, var(--zs-color-muted) 25%, transparent);
    padding: 1rem 1.25rem;
    z-index: 50;
  }
  .zs-nav-toggle:checked ~ .zs-nav { display: block; }
  .zs-nav-list { flex-direction: column; gap: 0.75rem; }
}

/* ---------- Content ---------- */
main { min-height: 60vh; padding: 2rem 0 4rem; }

/* A post is an essay: one column, capped at a comfortable measure. */
.zs-article { max-width: var(--zs-measure); margin: 0 auto; }
/* Scoped away from pages: this selector is more specific than .zs-article-page
   below, so without the :not it silently re-caps a page at 56rem and the
   sections inside it stop lining up with the full-bleed bands around them. */
.zs-width-wide .zs-article:not(.zs-article-page) {
  max-width: calc(var(--zs-measure) + 10rem);
}

/* A page is a layout, not an essay. Capping the whole article was quietly
   overruling the site's container width for everything below the header: a
   six-item service grid had 46rem to work with while the theme was set to
   1280px, so it rendered as three thumbnails in a narrow strip with dead space
   on both sides. The cap belongs on the running text, not on the layout. */
.zs-article-page { max-width: none; }

/* So the measure moves down to the prose blocks themselves, wherever they sit —
   loose in the article or inside a section — and centres in whatever box holds
   them. Composite blocks (grids, bands, media strips) are deliberately absent
   from this list: filling their container is the whole point of them. */
/* The page's own title is a sibling of .zs-content, not a child of it, so it
   needs naming separately — without this it was the one line on the page with
   no cap at all, running the full container width while every paragraph under
   it stopped at the measure. */
.zs-article-page > h1,
.zs-article-page .zs-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .zs-figure, .zs-table-wrap),
.zs-article-page .zs-section-stack > .zs-section-inner > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .zs-figure, .zs-table-wrap) {
  max-width: var(--zs-measure);
  margin-inline: auto;
}
/* Except where the author asked for edge-to-edge — a photo strip, a map. */
.zs-section-content-full > .zs-section-inner > * { max-width: none; }

.zs-content p { margin: 0 0 1.1em; }
.zs-content ul, .zs-content ol { padding-left: 1.5rem; margin: 0 0 1.1em; }
.zs-content blockquote {
  margin: 1.5em 0;
  padding: 0.5em 1.25em;
  border-left: 4px solid var(--zs-color-primary);
  background: var(--zs-color-surface);
  border-radius: 0 var(--zs-radius) var(--zs-radius) 0;
}
.zs-content pre {
  background: var(--zs-color-secondary);
  color: #f1f5f9;
  padding: 1rem 1.25rem;
  border-radius: var(--zs-radius);
  overflow-x: auto;
  font-size: 0.9em;
}
.zs-content code { font-family: ui-monospace, monospace; }
.zs-content p code {
  background: var(--zs-color-surface);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.zs-figure { margin: 1.75em 0; }
.zs-figure img, .zs-figure video {
  border-radius: var(--zs-radius);
  display: block;
  margin: 0 auto;
}
.zs-figure figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: var(--zs-color-muted);
  margin-top: 0.5rem;
}

.zs-table-wrap { overflow-x: auto; margin: 1.5em 0; }
.zs-table-wrap table { border-collapse: collapse; width: 100%; }
.zs-table-wrap th, .zs-table-wrap td {
  border: 1px solid color-mix(in srgb, var(--zs-color-muted) 30%, transparent);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.zs-table-wrap th { background: var(--zs-color-surface); }

/* ══════════ Composite layout blocks ══════════
   These lay themselves out and collapse to a single column on small screens, so
   a page built from them is responsive without any per-device settings. */

/* Break out of the article's reading column — sections span the page. */
.zs-hero,
.zs-cards-section,
.zs-imagetext,
.zs-ctaband {
  margin: 2.5em 0;
}

/* ---------- Hero ---------- */
.zs-hero-title {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  margin: 0 0 0.35em;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.zs-hero-sub {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  color: var(--zs-color-muted);
  margin: 0 0 1.8em;
  max-width: 40rem;
}
/* Short points under the hero's lead-in: a row of ticks, not a list. */
.zs-hero-points {
  list-style: none; margin: -.6rem 0 1.8rem !important; padding: 0 !important;
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
  font-size: .95rem; font-weight: 500;
}
.zs-hero-points li { display: inline-flex; align-items: center; gap: .4rem; }
.zs-hero-points svg { width: 1.05rem; height: 1.05rem; color: var(--zs-color-primary); flex: none; }
.zs-hero-center .zs-hero-points { justify-content: center; }
.zs-hero-center { text-align: center; }
.zs-hero-center .zs-hero-sub { margin-left: auto; margin-right: auto; }
.zs-hero-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.zs-hero-center .zs-hero-actions { justify-content: center; }
.zs-hero-right .zs-hero-actions { justify-content: flex-end; }

/* A hero carrying its own photo. The picture is a background rather than an
   <img> because the text has to sit on top of it and stay readable at every
   width — an overlay over a background does that with no positioning, and the
   image is decorative here, so nothing is lost from the document. */
.zs-hero-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
  padding-block: clamp(4.5rem, 2rem + 9vw, 9rem);
  display: flex;
  align-items: center;
}
.zs-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(2 6 23 / var(--zs-hero-veil-top, .55)),
    rgb(2 6 23 / var(--zs-hero-veil-bottom, .72))
  );
}
.zs-hero-overlay-light { --zs-hero-veil-top: .25; --zs-hero-veil-bottom: .42; }
.zs-hero-overlay-medium { --zs-hero-veil-top: .5; --zs-hero-veil-bottom: .68; }
.zs-hero-overlay-strong { --zs-hero-veil-top: .7; --zs-hero-veil-bottom: .85; }
/* A photo hero is edge-to-edge whatever it's wrapped in: it breaks out the same
   way a full-bleed section does, which is a no-op when the section already did
   it and the escape hatch when the author left the section boxed. */
.zs-hero-bg {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: 0;
}
.zs-hero-bg > .zs-hero-body {
  position: relative;
  width: 100%;
  max-width: var(--zs-container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.zs-hero-h-tall { min-height: 70vh; }
.zs-hero-h-full { min-height: 100svh; }

.zs-hero-media { margin-bottom: 1.75rem; }
.zs-hero-media img {
  width: 100%;
  border-radius: var(--zs-radius);
  aspect-ratio: 21/9;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .zs-hero-media img { aspect-ratio: 16/10; }
}

/* ---------- Cards ---------- */
.zs-section-title {
  text-align: center;
  margin: 0 0 1.2em;
}
.zs-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
}
.zs-cards-2 { --cols: 2; }
.zs-cards-3 { --cols: 3; }
.zs-cards-4 { --cols: 4; }
@media (max-width: 900px) {
  .zs-cards-3, .zs-cards-4 { --cols: 2; }
}
@media (max-width: 640px) {
  .zs-cards { --cols: 1; }
}
.zs-card {
  background: var(--zs-color-surface);
  border-radius: var(--zs-radius);
  padding: 1.4rem;
}
.zs-card h3 { margin: 0 0 0.4em; font-size: 1.05rem; }
.zs-card p { margin: 0; color: var(--zs-color-muted); font-size: 0.95rem; }

/* ---------- Image + text ---------- */
.zs-imagetext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
/* No picture yet — a template ships with the image slot empty, and half a grid
   is worse than no grid: the text stayed in a narrow column with a blank half
   beside it. One column, measured like any other prose, until an image lands. */
.zs-imagetext:not(:has(.zs-imagetext-media)) {
  grid-template-columns: 1fr;
}
.zs-imagetext:not(:has(.zs-imagetext-media)) .zs-imagetext-body {
  max-width: var(--zs-measure);
}
/* Source order puts the image first so it leads when stacked on mobile;
   on desktop, "right" simply moves it across. */
.zs-imagetext-right .zs-imagetext-media { order: 2; }
.zs-imagetext-media img {
  width: 100%;
  border-radius: var(--zs-radius);
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.zs-imagetext-body h2 { margin-top: 0; }
.zs-imagetext-body p { color: var(--zs-color-muted); }
/* …but the eyebrow is a label, not body text: it keeps its own colour. */
.zs-imagetext-body p.zs-eyebrow { color: var(--zs-eyebrow-color, var(--zs-color-primary)); }
@media (max-width: 720px) {
  .zs-imagetext { grid-template-columns: 1fr; gap: 1.25rem; }
  .zs-imagetext-right .zs-imagetext-media { order: 0; }
}

/* The pieces an "about us" section is made of, beyond a paragraph. */
.zs-imagetext-media { position: relative; }
.zs-imagetext-badge {
  position: absolute; right: -1rem; bottom: -1.25rem;
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 8.5rem; max-width: 12rem;
  margin: 0; padding: 1rem 1.25rem;
  background: var(--zs-tone-brand, var(--zs-color-primary)); color: var(--zs-on-primary);
  border-radius: var(--zs-radius);
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / .45);
  line-height: 1.3;
}
.zs-imagetext-right .zs-imagetext-badge { right: auto; left: -1rem; }
.zs-imagetext-badge strong { font-family: var(--zs-font-heading); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.05; }
.zs-imagetext-badge span { font-size: .88rem; opacity: .9; }
.zs-imagetext-body .zs-imagetext-badge { color: var(--zs-on-primary); }
@media (max-width: 720px) {
  .zs-imagetext-badge, .zs-imagetext-right .zs-imagetext-badge { right: .75rem; left: auto; bottom: -1rem; }
  .zs-imagetext:has(.zs-imagetext-badge) { row-gap: 2.25rem; }
}

.zs-imagetext .zs-checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .7rem; }
.zs-checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--zs-color-text); font-weight: 500; }
.zs-checklist-mark {
  flex: none; display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; margin-top: .1rem;
  border-radius: 50%;
  color: var(--zs-color-primary);
  border: 2px solid color-mix(in srgb, var(--zs-color-primary) 35%, transparent);
}
.zs-checklist-mark svg { width: .9rem; height: .9rem; }

.zs-imagetext-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0; }
.zs-textlink {
  color: var(--zs-color-secondary); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .35em;
  text-decoration-color: color-mix(in srgb, var(--zs-color-primary) 70%, transparent);
}
.zs-textlink:hover { color: var(--zs-color-primary); opacity: 1; }

/* Framed: a brand-coloured frame set behind the picture, offset down and out —
   depth without a shadow, and the photo reads as placed rather than pasted. */
.zs-imagetext.zs-variant-framed .zs-imagetext-media { isolation: isolate; margin: 0 1.25rem 1.25rem 0; }
.zs-imagetext.zs-variant-framed .zs-imagetext-media::before {
  content: ""; position: absolute; z-index: -1;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 3px solid var(--zs-color-primary);
  border-radius: var(--zs-radius);
}
.zs-imagetext-right.zs-variant-framed .zs-imagetext-media { margin: 0 0 1.25rem 1.25rem; }
.zs-imagetext-right.zs-variant-framed .zs-imagetext-media::before { inset: 1.25rem 1.25rem -1.25rem -1.25rem; }
.zs-imagetext.zs-variant-framed .zs-imagetext-media img { aspect-ratio: 5 / 4; }

/* ---------- CTA band ---------- */
.zs-ctaband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--zs-color-primary);
  color: var(--zs-on-primary);
  border-radius: var(--zs-radius);
  padding: 2rem 2.25rem;
}
.zs-ctaband h2 { color: var(--zs-on-primary); margin: 0 0 0.3em; }
.zs-ctaband p { margin: 0; color: rgb(255 255 255 / 0.85); }
/* Two classes: .zs-btn comes later in this file and would otherwise paint
   the button in the very colour of the band it sits on. */
.zs-btn.zs-btn-invert {
  background: #fff;
  color: var(--zs-color-primary);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .zs-ctaband { padding: 1.5rem; }
}

/* ---------- Spacer ---------- */
.zs-spacer-sm { height: 1.5rem; }
.zs-spacer-md { height: 3rem; }
.zs-spacer-lg { height: 5rem; }

/* ---------- FAQ ---------- */
.zs-faq {
  border: 1px solid color-mix(in srgb, var(--zs-color-muted) 30%, transparent);
  border-radius: var(--zs-radius);
  margin: 0.75em 0;
  background: var(--zs-color-surface);
}
.zs-faq summary {
  cursor: pointer;
  padding: 0.85em 1.1em;
  font-weight: 600;
  font-family: var(--zs-font-heading);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.zs-faq summary::-webkit-details-marker { display: none; }
.zs-faq summary::after {
  content: "+";
  font-size: 1.25em;
  line-height: 1;
  color: var(--zs-color-primary);
  transition: transform 150ms ease;
}
.zs-faq[open] summary::after { transform: rotate(45deg); }
.zs-faq-answer {
  padding: 0 1.1em 0.95em;
  color: var(--zs-color-text);
}

/* ---------- CTA ---------- */
.zs-cta { margin: 1.75em 0; }
.zs-cta-center { text-align: center; }
.zs-cta-left { text-align: left; }
.zs-cta-right { text-align: right; }

/* ---------- Embed (click-to-play poster, no third-party JS) ---------- */
.zs-embed-link {
  position: relative;
  display: block;
  border-radius: var(--zs-radius);
  overflow: hidden;
}
.zs-embed-link img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.zs-embed-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  background: rgb(0 0 0 / 0.35);
  transition: background 150ms ease;
}
.zs-embed-link:hover .zs-embed-play { background: rgb(0 0 0 / 0.5); }
.zs-embed-fallback { word-break: break-all; }

/* ---------- Breadcrumbs ---------- */
.zs-breadcrumbs { font-size: 0.875rem; margin-bottom: 1rem; }
.zs-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  color: var(--zs-color-muted);
}
.zs-breadcrumbs li + li::before { content: "›"; margin: 0 0.4rem; }
.zs-breadcrumbs a { color: var(--zs-color-muted); text-decoration: none; }
.zs-breadcrumbs a:hover { color: var(--zs-color-primary); }

/* ---------- Posts ---------- */
.zs-post-meta { color: var(--zs-color-muted); font-size: 0.9rem; }
.zs-cover img { width: 100%; }

.zs-list-header { text-align: center; margin-bottom: 2.5rem; }
.zs-post-grid { display: grid; gap: 1.5rem; }
.zs-postlist-cards .zs-post-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.zs-post-card {
  background: var(--zs-color-surface);
  border-radius: var(--zs-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* The list layout is for the article index. A latest-posts block keeps its
   own grid of cards: a row layout squeezed into a quarter-width column left
   every card but the first a thumbnail with no title beside it. */
.zs-postlist-list .zs-post-grid:not(.zs-latest-grid) .zs-post-card { flex-direction: row; gap: 1rem; }
.zs-post-card-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.zs-postlist-list .zs-post-grid:not(.zs-latest-grid) .zs-post-card-img { flex: 0 0 220px; }
.zs-post-card-body { padding: 1.25rem; }
.zs-post-card-media { position: relative; }
.zs-postlist-list .zs-post-grid:not(.zs-latest-grid) .zs-post-card-media { flex: 0 0 220px; }
.zs-post-badge {
  position: absolute; top: .75rem; right: .75rem;
  padding: .25rem .7rem;
  font-size: .78rem; font-weight: 600; line-height: 1.5;
  color: var(--zs-on-primary); background: var(--zs-tone-brand, var(--zs-color-primary));
  border-radius: min(var(--zs-radius), 999px);
  text-decoration: none;
}
.zs-post-badge:hover { opacity: 1; filter: brightness(1.1); }
/* Doubled up: themes colour every link in a card (.zs-post-card a), which
   left the badge's words dark on its dark fill. */
.zs-post-card .zs-post-badge { color: var(--zs-on-primary); }
.zs-post-cat { color: inherit; }
.zs-post-meta-cat-alt { display: none; }
.zs-postlist-list .zs-post-grid:not(.zs-latest-grid) .zs-post-meta-cat-alt { display: inline; }
.zs-postlist-list .zs-post-grid:not(.zs-latest-grid) .zs-post-badge { display: none; }
.zs-post-card :is(h2, h3) { margin: 0 0 0.5rem; font-size: 1.15rem; }
.zs-post-card :is(h2, h3) a { color: var(--zs-color-secondary); text-decoration: none; }
.zs-post-card :is(h2, h3) a:hover { color: var(--zs-color-primary); }
.zs-post-card p { margin: 0 0 0.5rem; font-size: 0.925rem; }

.zs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  color: var(--zs-color-muted);
}
.zs-pagination a { text-decoration: none; font-weight: 500; }

/* ---------- Buttons ---------- */
.zs-btn {
  display: inline-block;
  background: var(--zs-color-primary);
  color: var(--zs-on-primary);
  padding: 0.65rem 1.5rem;
  border-radius: var(--zs-radius-btn, var(--zs-radius));
  text-decoration: none;
  font-weight: 600;
}
.zs-btn:hover { opacity: 0.9; }

/* The outlined companion to the primary action. Declared after .zs-btn on
   purpose: same specificity, so source order is what decides. */
.zs-btn-ghost {
  background: transparent;
  color: currentColor;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
.zs-btn-ghost:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  opacity: 1;
}

/* ---------- Footer ---------- */
.zs-footer {
  border-top: 1px solid color-mix(in srgb, var(--zs-color-muted) 25%, transparent);
  background: var(--zs-color-surface);
  padding: 2.5rem 0;
  margin-top: 2rem;
}
.zs-footer-inner { display: grid; gap: 1.5rem; }
.zs-footer .zs-nav-list {
  display: grid;
  grid-template-columns: repeat(var(--zs-footer-columns), 1fr);
  gap: 0.5rem 2rem;
}
.zs-footer .zs-nav-list a { font-weight: 400; font-size: 0.925rem; }
.zs-copyright { color: var(--zs-color-muted); font-size: 0.875rem; margin: 0; }

/* ---------- 404 ---------- */
.zs-404 { text-align: center; padding: 4rem 0; }
.zs-404 h1 { font-size: 5rem; margin: 0; }

/* ---------- Sections ---------- */
/* A section is a band of the page holding blocks. Its layout options are
   classes here rather than generated per page, so they cost nothing per page
   and stay consistent across the site; only the free-form Style tab values
   compile into per-page rules. */
.zs-section { --zs-section-gap: 1.25rem; }
.zs-section-inner { display: flex; flex-direction: column; gap: var(--zs-section-gap); }

/* Boxed is a pass-through: the section sits inside the page's container and
   article, which already set the width and the side padding. Adding our own
   would inset the text a second time and shift every page that got wrapped
   into a section automatically. */

/* Full has to break OUT of those ancestors — a child can't be wider than its
   parent, so "full width" is only reachable by pulling the element back to the
   viewport's edges. Margins rather than a positioned left/right offset, so the
   section still takes part in normal vertical flow. */
.zs-section-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* 100vw counts the scrollbar's width, so a full-bleed section is a few pixels
   wider than what you can see and the page picks up a horizontal scrollbar.
   Clipping the overflow at the root is the cheap fix; it doesn't break sticky
   positioning the way overflow on <body> does. */
html { overflow-x: clip; }

/* With the section itself at viewport width, the content inside it either goes
   along or comes back to the page's normal width. Boxed is the default: a band
   of colour edge to edge with the text still lining up with everything above
   it, which is what a full-bleed section is almost always for. */
.zs-section-full > .zs-section-inner { padding: 0 1.25rem; }
.zs-section-full.zs-section-content-boxed > .zs-section-inner {
  max-width: var(--zs-container-max);
  margin-inline: auto;
}
/* Content set to full means full: the side padding above is the guard that
   keeps text off the screen edge, but choosing this explicitly is asking for
   edge-to-edge (a photo strip, a map) — so no padding to quietly re-inset it. */
.zs-section-full.zs-section-content-full > .zs-section-inner { padding: 0; }

/* ---------- Section tone: the bands a page is built from ----------
   A page reads as designed when its sections alternate rather than running as
   one uninterrupted sheet. Each tone repaints the palette for its own subtree,
   so everything inside — headings, muted captions, cards, buttons — follows
   without any block knowing which band it landed in. */
.zs-section-band {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
  color: var(--zs-color-text);
  background: var(--zs-band-bg);
}
/* The band supplies its own vertical space, so the blocks inside it shouldn't
   also push the usual gap against its padding. */
.zs-section-band > .zs-section-inner > :first-child { margin-top: 0; }
.zs-section-band > .zs-section-inner > :last-child { margin-bottom: 0; }

.zs-section-tone-soft { --zs-band-bg: var(--zs-tone-soft); }
/* Surface is the tint that cards sit on; inside a tinted band they'd vanish, so
   cards go back to the page colour and the tint becomes the backdrop. */
.zs-section-tone-soft { --zs-color-surface: var(--zs-color-background); }

.zs-section-tone-dark {
  --zs-band-bg: var(--zs-tone-dark);
  --zs-color-text: var(--zs-tone-on-dark);
  --zs-color-secondary: var(--zs-tone-on-dark);
  --zs-color-muted: color-mix(in srgb, var(--zs-tone-on-dark) 60%, transparent);
  --zs-color-surface: color-mix(in srgb, #fff 8%, transparent);
  --zs-color-background: color-mix(in srgb, #fff 6%, transparent);
  --zs-color-primary: var(--zs-tone-accent-on-dark);
}
.zs-section-tone-brand {
  --zs-band-bg: var(--zs-tone-brand);
  --zs-color-text: var(--zs-on-primary);
  --zs-color-secondary: var(--zs-on-primary);
  --zs-color-muted: color-mix(in srgb, var(--zs-on-primary) 72%, transparent);
  --zs-color-surface: color-mix(in srgb, #fff 12%, transparent);
  --zs-color-background: color-mix(in srgb, #fff 10%, transparent);
  /* On the brand band the accent IS the background, so it can only be the
     colour that reads on it. */
  --zs-color-primary: var(--zs-on-primary);
}
/* A solid button in the band's own colour is invisible against it. */
.zs-section-tone-brand .zs-btn {
  background: #fff;
  color: var(--zs-tone-brand);
}
.zs-section-tone-dark .zs-btn,
.zs-section-tone-brand .zs-btn { box-shadow: none; }
.zs-section-tone-dark :is(.zs-card, .zs-service, .zs-testimonial, .zs-plan, .zs-accordion-item),
.zs-section-tone-brand :is(.zs-card, .zs-service, .zs-testimonial, .zs-plan, .zs-accordion-item) {
  border-color: color-mix(in srgb, #fff 18%, transparent);
  box-shadow: none;
}

/* The page's own top padding would show as a light strip above a band that
   opens the page — a hero especially. Pull it off when that's the shape. */
main:has(.zs-content > .zs-section-band:first-child),
main:has(.zs-content > *:first-child .zs-hero-bg) { padding-top: 0; }
/* Consecutive bands of the same tone should read as one, not as a seam. */
.zs-section-band + .zs-section-band { margin-top: 0; }

/* ---------- Media band ----------
   Full bleed whatever the section it sits in: margins pull it back to the
   viewport's edges (and come out at zero inside a section that's already
   full width). The boxes stand on the photo's bottom edge, lined up with the
   page's content column. */
.zs-mediaband {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: flex;
  background: var(--zs-tone-dark, #111) center / cover no-repeat;
  color: #fff;
}
.zs-mediaband-h-lg { min-height: min(80vh, 42rem); }
.zs-mediaband-h-md { min-height: min(60vh, 28rem); }
.zs-mediaband::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgb(10 11 14 / .55) 0%, transparent 45%),
    linear-gradient(90deg, rgb(10 11 14 / .5) 0%, transparent 60%);
}
.zs-mediaband-inner {
  position: relative;
  width: 100%;
  max-width: var(--zs-container-max);
  margin-inline: auto;
  padding: clamp(2rem, 1rem + 4vw, 5rem) 1.25rem 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.zs-mediaband-text { max-width: 36rem; }
.zs-mediaband-text h2 { margin: 0 0 .4em; font-size: var(--zs-h-section); line-height: var(--zs-h-leading); }
.zs-mediaband-text p { margin: 0; color: rgb(255 255 255 / .85); }
/* Doubled class: .zs-content ul sets list margins and would otherwise win. */
.zs-mediaband .zs-mediaband-chips {
  list-style: none; margin: auto 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch;
}
.zs-chip > a, .zs-chip:not(:has(> a)) {
  display: flex; align-items: center; gap: 1rem;
  height: 100%;
  padding: 1.4rem 2rem;
  color: inherit; text-decoration: none;
}
.zs-chip { background: color-mix(in srgb, var(--zs-tone-dark, #111) 82%, transparent); backdrop-filter: blur(6px); color: #fff; }
.zs-chip:first-child { background: var(--zs-color-background); color: var(--zs-color-secondary); border-top-left-radius: var(--zs-radius); }
.zs-chip:last-child { border-top-right-radius: var(--zs-radius); }
.zs-chip > a:hover { opacity: 1; }
.zs-chip > a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.zs-chip-icon {
  flex: none; display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--zs-tone-brand, var(--zs-color-primary)); color: var(--zs-on-primary);
}
.zs-chip-icon svg { width: 1.35rem; height: 1.35rem; }
.zs-chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.zs-chip-text strong { font-family: var(--zs-font-heading); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.zs-chip:not(:first-child) .zs-chip-text strong { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.zs-chip-text span { font-size: .9rem; opacity: .8; }
@media (max-width: 640px) {
  /* nowrap: a wrapping column folds the second box into a column of its own, off the screen. */
  .zs-mediaband .zs-mediaband-chips { flex-direction: column; flex-wrap: nowrap; margin-inline: -1.25rem; }
  .zs-chip, .zs-chip:first-child, .zs-chip:last-child { border-radius: 0; }
}

/* Spacing: the room a section takes above and below. A band's room is its
   padding; a plain section's is the margins of the blocks inside it, so
   compact pulls those in and wide adds padding of its own. */
.zs-section-band.zs-section-space-compact { padding-block: clamp(2rem, 1rem + 2.5vw, 3.5rem); }
.zs-section-band.zs-section-space-wide { padding-block: clamp(4.5rem, 2rem + 7vw, 9rem); }
.zs-section-space-compact:not(.zs-section-band) > .zs-section-inner > * { margin-block: .75rem; }
.zs-section-space-wide:not(.zs-section-band) { padding-block: clamp(2rem, 1rem + 4vw, 5rem); }

/* Overlap: the section rides up over the foot of the one before it, above it
   in the stacking order. The section before has to have room to give — a
   photo hero or a band — which is the author's call, so the pull is a fixed
   step a theme can tune rather than a guess at the neighbour's height. */
.zs-section-overlap {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--zs-overlap, clamp(3rem, 1rem + 6vw, 7rem))) !important;
}
.zs-section-overlap.zs-section-band { padding-top: clamp(2rem, 1rem + 2.5vw, 3.5rem); }

/* A photo hero paints its own band and sets its own height, so the section's
   padding only shows up as a strip of flat colour above and below it. */
.zs-section-band:has(> .zs-section-inner > .zs-hero-bg:only-child) {
  padding-block: 0;
}

/* Columns collapse before the text gets too narrow to read, same as .zs-cards.
   The author picks the count; the collapse isn't theirs to break. */
.zs-section-cols > .zs-section-inner {
  display: grid;
  grid-template-columns: repeat(var(--zs-section-cols, 2), minmax(0, 1fr));
  align-items: start;
}
.zs-section-cols-2 { --zs-section-cols: 2; }
.zs-section-cols-3 { --zs-section-cols: 3; }
.zs-section-cols-4 { --zs-section-cols: 4; }

.zs-section-v-top > .zs-section-inner { justify-content: flex-start; }
.zs-section-v-center > .zs-section-inner { justify-content: center; }
.zs-section-v-bottom > .zs-section-inner { justify-content: flex-end; }
/* A min-height only means something if the inner box fills the section. */
.zs-section-v-center,
.zs-section-v-bottom { display: flex; flex-direction: column; }
.zs-section-v-center > .zs-section-inner,
.zs-section-v-bottom > .zs-section-inner { flex: 1; }

@media (max-width: 900px) {
  .zs-section-cols-3 { --zs-section-cols: 2; }
  .zs-section-cols-4 { --zs-section-cols: 2; }
}
@media (max-width: 640px) {
  .zs-section-cols > .zs-section-inner { --zs-section-cols: 1; }
}

/* Present for assistive tech and crawlers, absent from the visual layout —
   the standard clip-rect recipe. Used by the "show title" page setting. */
.zs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════ Content blocks ══════════
   Structure only: grids, rhythm, and the CSS that makes the interactive ones
   work without JS. Colour and character come from the theme layer. */

/* Shared section head + column counts. Every grid below collapses on the same
   two breakpoints, so a page reflows as one piece rather than block by block. */
.zs-blockhead { margin: 0 0 2.5rem; }
.zs-blockhead h2 {
  margin: 0 0 .35em;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem);
  letter-spacing: -0.015em;
}
.zs-blockhead-sub {
  margin: 0;
  color: var(--zs-color-muted);
  max-width: 44rem;
  font-size: 1.05rem;
}
/* The eyebrow is a label, not a sentence: small, spaced out, and paired with a
   short rule so it reads as a section marker rather than a lost line of text. */
.zs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 .7em;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zs-color-primary);
  font-weight: 700;
}
.zs-eyebrow::before {
  content: "";
  width: 1.8em;
  height: 2px;
  background: currentColor;
  opacity: .6;
}

/* ---------- Icons ----------
   One badge for every icon in the system: a tinted disc holding a monoline
   glyph. Emoji left over from older documents land in the same badge, so a page
   part-way through being updated doesn't look half-broken. */
.zs-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--zs-color-primary) 12%, transparent);
  color: var(--zs-color-primary);
  flex: none;
}
.zs-icon { width: 1.6rem; height: 1.6rem; display: block; }
.zs-icon-text { font-size: 1.5rem; line-height: 1; width: auto; height: auto; }
/* On a dark or brand band the tint has nothing to sit on, so the disc borrows
   the band's own light instead of the accent. */
.zs-section-tone-dark .zs-icon-badge,
.zs-section-tone-brand .zs-icon-badge {
  background: color-mix(in srgb, #fff 14%, transparent);
  color: var(--zs-color-text);
}

.zs-cols-1 { --zs-cols: 1; }
.zs-cols-2 { --zs-cols: 2; }
.zs-cols-3 { --zs-cols: 3; }
.zs-cols-4 { --zs-cols: 4; }
.zs-cols-5 { --zs-cols: 5; }
.zs-cols-6 { --zs-cols: 6; }

.zs-stats-grid, .zs-steps-list, .zs-team-grid, .zs-testimonial-grid,
.zs-services-grid, .zs-pricing-grid, .zs-gallery-grid, .zs-contactinfo-grid,
.zs-feature-items {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--zs-cols, 3), minmax(0, 1fr));
}
@media (max-width: 900px) {
  .zs-stats-grid, .zs-steps-list, .zs-team-grid, .zs-testimonial-grid,
  .zs-services-grid, .zs-pricing-grid, .zs-gallery-grid, .zs-contactinfo-grid {
    --zs-cols: 2;
  }
}
@media (max-width: 640px) {
  .zs-stats-grid, .zs-steps-list, .zs-team-grid, .zs-testimonial-grid,
  .zs-services-grid, .zs-pricing-grid, .zs-gallery-grid, .zs-contactinfo-grid,
  .zs-feature-items {
    --zs-cols: 1;
  }
}

.zs-stats, .zs-steps, .zs-team, .zs-testimonials, .zs-logos, .zs-services,
.zs-pricing, .zs-gallery, .zs-accordion, .zs-contactinfo, .zs-timeline,
.zs-tabs, .zs-featurelist { margin: 3em 0; }

/* ---------- Stats ---------- */
.zs-stat { text-align: center; }
.zs-stat-value {
  margin: 0;
  font-family: var(--zs-font-heading);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--zs-color-primary);
}
.zs-stat-suffix { font-size: .7em; }
.zs-stat-label { margin: .35em 0 0; color: var(--zs-color-muted); }

/* ---------- Steps ---------- */
.zs-steps-list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.zs-step { position: relative; padding-top: .5rem; }
.zs-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--zs-color-primary);
  color: var(--zs-on-primary);
  font-weight: 700;
  margin-bottom: .75rem;
}
/* With an icon present the position number becomes a chip on its corner —
   two discs in a row read as two separate things, which they aren't. */
.zs-step:has(.zs-step-icon) .zs-step-num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 1.6rem;
  height: 1.6rem;
  font-size: .78rem;
  box-shadow: 0 0 0 3px var(--zs-color-background);
}
.zs-step:has(.zs-step-icon) .zs-step-icon { margin-left: .4rem; margin-top: .4rem; }

.zs-step h3 { margin: 0 0 .4em; font-size: 1.2rem; }
.zs-step p { margin: 0; color: var(--zs-color-muted); font-size: 1rem; }

/* A step with a photo: the picture is a disc, the number a chip on its rim. */
.zs-step-photo {
  display: block; width: 8.5rem; aspect-ratio: 1; margin-bottom: 1.1rem;
  border-radius: 50%; overflow: hidden;
  border: 5px solid var(--zs-color-background);
  box-shadow: 0 18px 36px -22px rgb(0 0 0 / .55);
}
.zs-step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zs-step-has-photo .zs-step-num {
  position: absolute; top: .6rem; left: .2rem; z-index: 1;
  width: 2.1rem; height: 2.1rem; font-size: .85rem;
  box-shadow: 0 0 0 4px var(--zs-color-background);
}

/* Photo variant: centred, the discs joined by a dashed path — the reference
   "workflow" row. The path runs from one disc's edge to the next one's, across
   the grid gap, and only where the steps sit side by side. */
.zs-steps.zs-variant-photo .zs-blockhead { text-align: center; }
.zs-steps.zs-variant-photo .zs-blockhead :is(h2, .zs-blockhead-sub) { margin-inline: auto; }
.zs-steps.zs-variant-photo .zs-step { text-align: center; }
.zs-steps.zs-variant-photo .zs-step-photo { width: 9.5rem; margin-inline: auto; }
.zs-steps.zs-variant-photo .zs-step-has-photo .zs-step-num { left: calc(50% - 4.75rem + .2rem); }
.zs-steps.zs-variant-photo .zs-step-icon { margin-inline: auto; }
@media (min-width: 901px) {
  .zs-steps.zs-variant-photo .zs-step-has-photo:not(:last-child)::after {
    content: ""; position: absolute;
    top: calc(.5rem + 4.75rem);
    left: calc(50% + 5.5rem);
    right: calc(-50% - 1.5rem + 5.5rem);
    border-top: 2px dashed color-mix(in srgb, var(--zs-color-primary) 45%, transparent);
  }
}

/* ---------- Team ---------- */
.zs-team-card { text-align: center; }
.zs-team-photo { margin-bottom: .85rem; }
.zs-team-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  /* A portrait cropped to a square or a circle keeps the face: it sits in
     the upper third of nearly every portrait, so crop from there rather than
     the middle, which kept the shirt and cut the head off. A focal point set
     on the image still wins (it's inline). */
  object-position: 50% 18%;
  border-radius: var(--zs-radius);
  display: block;
}
.zs-team-card h3 { margin: 0 0 .2em; font-size: 1.05rem; }
.zs-team-role { margin: 0; color: var(--zs-color-muted); font-size: .9rem; }
.zs-team-link { display: inline-block; margin-top: .5rem; font-size: .85rem; }

/* ---------- Testimonials ---------- */
.zs-testimonial {
  margin: 0;
  padding: 1.5rem;
  background: var(--zs-color-surface);
  border-radius: var(--zs-radius);
}
.zs-testimonial blockquote {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.02rem;
}
.zs-testimonial figcaption { display: flex; align-items: center; gap: .75rem; }
.zs-testimonial-avatar img {
  width: 44px; height: 44px; border-radius: 999px; object-fit: cover; display: block;
}
.zs-testimonial-role { display: block; color: var(--zs-color-muted); font-size: .85rem; }
.zs-rating { margin: 0 0 .5rem; color: var(--zs-color-accent); letter-spacing: .1em; }

/* A slider is a scroll-snap strip: swipeable and keyboard-scrollable with no
   JS. The runtime script only adds auto-advance on top of this. */
.zs-slider {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.zs-slider > * {
  flex: 0 0 min(100%, 26rem);
  scroll-snap-align: start;
}
.zs-slider::-webkit-scrollbar { height: 6px; }
.zs-slider::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--zs-color-muted) 40%, transparent);
  border-radius: 999px;
}

/* ---------- Logos ---------- */
.zs-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.zs-logo img { max-height: 44px; width: auto; display: block; }

/* ---------- Services ---------- */
.zs-service {
  display: block;
  padding: 1.5rem;
  background: var(--zs-color-surface);
  border-radius: var(--zs-radius);
  text-decoration: none;
  color: inherit;
}
.zs-service-link:hover { background: color-mix(in srgb, var(--zs-color-primary) 8%, var(--zs-color-surface)); }
.zs-service-media { margin: -1.5rem -1.5rem 1rem; }
.zs-service-media img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  border-radius: var(--zs-radius) var(--zs-radius) 0 0;
}
.zs-service h3 { margin: 0 0 .45em; font-size: 1.25rem; letter-spacing: -.01em; }
.zs-service p { margin: 0; color: var(--zs-color-muted); font-size: 1rem; }
.zs-service .zs-service-sub { margin: -.25em 0 .5em; color: var(--zs-color-primary); font-weight: 600; font-size: .95rem; }
.zs-service-arrow { display: none; }

/* Strip: the points a band of icons makes — icon left, words right, all in one
   row inside one panel, divided by hairlines. Wraps to two, then one, column. */
.zs-services.zs-variant-strip .zs-services-grid {
  gap: 0; padding: 1.1rem .5rem;
  background: var(--zs-color-surface);
  border: 1px solid color-mix(in srgb, var(--zs-color-text) 12%, transparent);
  border-radius: var(--zs-radius);
  grid-template-columns: repeat(var(--zs-strip-cols, var(--zs-cols, 3)), minmax(0, 1fr));
}
.zs-services.zs-variant-strip .zs-service {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-content: start;
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: .4rem 1.1rem;
}
.zs-services.zs-variant-strip .zs-service + .zs-service { border-left: 1px solid color-mix(in srgb, var(--zs-color-text) 14%, transparent); }
.zs-services.zs-variant-strip .zs-service-icon { grid-row: 1 / span 4; margin: 0; width: 2.75rem; height: 2.75rem; background: none !important; color: var(--zs-color-primary); box-shadow: none !important; }
.zs-services.zs-variant-strip .zs-service-icon svg { width: 2.1rem; height: 2.1rem; }
.zs-services.zs-variant-strip .zs-service > :not(.zs-service-icon) { grid-column: 2; }
.zs-services.zs-variant-strip .zs-service-media { display: none; }
.zs-services.zs-variant-strip .zs-service h3 { font-size: 1rem; margin: 0 0 .15em; }
.zs-services.zs-variant-strip .zs-service p { font-size: .88rem; line-height: 1.55; }
.zs-services.zs-variant-strip .zs-service:hover { transform: none; }
@media (max-width: 900px) {
  .zs-services.zs-variant-strip .zs-services-grid { --zs-strip-cols: 2; row-gap: .8rem; }
  .zs-services.zs-variant-strip .zs-service:nth-child(odd) { border-left: 0; }
}
@media (max-width: 640px) {
  .zs-services.zs-variant-strip .zs-services-grid { --zs-strip-cols: 1; row-gap: 0; }
  .zs-services.zs-variant-strip .zs-service { border-left: 0 !important; padding-block: .9rem; }
  .zs-services.zs-variant-strip .zs-service + .zs-service { border-top: 1px solid color-mix(in srgb, var(--zs-color-text) 14%, transparent); }
}

/* Rows: a list of services, each a wide card — photo left, words right, an
   arrow saying it leads somewhere. One per row however many columns are set. */
.zs-services.zs-variant-rows .zs-services-grid { grid-template-columns: 1fr; gap: 1rem; }
.zs-services.zs-variant-rows .zs-service {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  grid-template-rows: auto auto 1fr; column-gap: 1.5rem; align-items: start;
  padding: 0; overflow: hidden;
}
.zs-services.zs-variant-rows .zs-service-media { grid-row: 1 / span 3; grid-column: 1; margin: 0; height: 100%; }
.zs-services.zs-variant-rows .zs-service-media img { height: 100%; min-height: 9.5rem; aspect-ratio: auto; border-radius: 0; }
.zs-services.zs-variant-rows .zs-service-icon { grid-row: 1 / span 3; grid-column: 1; align-self: end; justify-self: start; margin: 0 0 .8rem .8rem !important; position: relative; z-index: 1; }
.zs-services.zs-variant-rows .zs-service h3 { grid-column: 2; margin: 1.25rem 0 .3em; }
.zs-services.zs-variant-rows .zs-service .zs-service-sub { grid-column: 2; }
.zs-services.zs-variant-rows .zs-service .zs-service-text { grid-column: 2; margin-bottom: 1.25rem; }
.zs-services.zs-variant-rows .zs-service-arrow {
  display: grid; place-items: center; grid-column: 3; grid-row: 1 / span 3; align-self: center;
  width: 2.5rem; height: 2.5rem; margin-right: 1.25rem; color: var(--zs-color-text);
}
.zs-services.zs-variant-rows .zs-service-arrow svg { width: 1.4rem; height: 1.4rem; }
.zs-services.zs-variant-rows .zs-service:hover .zs-service-arrow { color: var(--zs-color-primary); transform: translateX(3px); }
@media (max-width: 640px) {
  .zs-services.zs-variant-rows .zs-service { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; column-gap: .9rem; }
  .zs-services.zs-variant-rows .zs-service h3 { margin-top: .9rem; font-size: 1.05rem; }
  .zs-services.zs-variant-rows .zs-service .zs-service-text { font-size: .88rem; margin-bottom: .9rem; }
  .zs-services.zs-variant-rows .zs-service-arrow { margin-right: .5rem; }
}

/* ---------- Pricing ---------- */
.zs-plan {
  padding: 1.75rem;
  background: var(--zs-color-surface);
  border-radius: var(--zs-radius);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.zs-plan-featured { border-color: var(--zs-color-primary); }
.zs-plan h3 { margin: 0; font-size: 1.05rem; }
.zs-plan-price {
  margin: 0;
  font-family: var(--zs-font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}
.zs-plan-period { font-size: .9rem; font-weight: 400; color: var(--zs-color-muted); }
.zs-plan-features { list-style: none; padding: 0; margin: 0; flex: 1; }
.zs-plan-features li { padding-left: 1.4em; position: relative; margin-bottom: .4em; }
.zs-plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--zs-color-primary);
}
.zs-plan .zs-btn { align-self: flex-start; }

/* ---------- Gallery ---------- */
.zs-gallery-item { margin: 0; }
.zs-gallery-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: var(--zs-radius);
}
.zs-gallery-item figcaption {
  margin-top: .4rem; font-size: .85rem; color: var(--zs-color-muted);
}

/* ---------- Accordion ---------- */
.zs-accordion-list { display: grid; gap: .6rem; }
.zs-accordion-item {
  background: var(--zs-color-surface);
  border-radius: var(--zs-radius);
  padding: .9rem 1.1rem;
}
.zs-accordion-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.zs-accordion-item summary::-webkit-details-marker { display: none; }
.zs-accordion-item summary::after { content: "+"; color: var(--zs-color-primary); }
.zs-accordion-item[open] summary::after { content: "−"; }
.zs-accordion-answer { padding-top: .7rem; color: var(--zs-color-muted); }

/* ---------- Contact info ---------- */
.zs-contact-item { text-align: center; }
.zs-contact-icon { margin-inline: auto; margin-bottom: .75rem; }
.zs-contact-label {
  margin: 0 0 .2em; font-weight: 600; font-size: .95rem;
}
.zs-contact-value { margin: 0; color: var(--zs-color-muted); }
.zs-contact-value a { text-decoration: none; }

/* List: the contact sheet beside a photo — icon, small label, the value large,
   one per line with a rule between. */
.zs-contactinfo.zs-variant-list .zs-contactinfo-grid { grid-template-columns: 1fr; gap: 0; }
.zs-contactinfo.zs-variant-list .zs-contact-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center;
  text-align: left; padding: .85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--zs-color-text) 14%, transparent);
}
.zs-contactinfo.zs-variant-list .zs-contact-item:last-child { border-bottom: 0; }
.zs-contactinfo.zs-variant-list .zs-contact-icon { grid-row: 1 / span 2; margin: 0; }
.zs-contactinfo.zs-variant-list .zs-contact-label { margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.zs-contactinfo.zs-variant-list .zs-contact-value { color: var(--zs-color-secondary); font-weight: 600; font-size: 1.1rem; }

/* ---------- Timeline ---------- */
.zs-timeline-list { list-style: none; padding: 0; margin: 0; }
.zs-timeline-item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  padding: 0 0 1.75rem 0;
  position: relative;
}
/* The rail is drawn on the item, not a pseudo-element on the list, so the last
   entry can stop it rather than leaving a line hanging into whitespace. */
.zs-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(7rem - .75rem);
  top: .6rem;
  bottom: -.6rem;
  width: 2px;
  background: color-mix(in srgb, var(--zs-color-muted) 25%, transparent);
}
.zs-timeline-item:last-child::before { display: none; }
.zs-timeline-year {
  margin: 0;
  font-weight: 700;
  color: var(--zs-color-primary);
  font-family: var(--zs-font-heading);
}
.zs-timeline-body h3 { margin: 0 0 .3em; font-size: 1.05rem; }
.zs-timeline-body p { margin: 0; color: var(--zs-color-muted); }
@media (max-width: 640px) {
  .zs-timeline-item { grid-template-columns: 1fr; gap: .4rem; }
  .zs-timeline-item::before { display: none; }
}

/* ---------- Tabs (radio-driven, no JS) ---------- */
.zs-tabs-wrap { display: flex; flex-wrap: wrap; }
.zs-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.zs-tab-label {
  order: -1;
  cursor: pointer;
  padding: .6rem 1.1rem;
  border-bottom: 2px solid transparent;
  color: var(--zs-color-muted);
  font-weight: 600;
}
.zs-tab-panel { display: none; width: 100%; padding-top: 1.25rem; }
.zs-tab-input:checked + .zs-tab-label {
  color: var(--zs-color-primary);
  border-bottom-color: var(--zs-color-primary);
}
.zs-tab-input:checked + .zs-tab-label + .zs-tab-panel { display: block; }
/* Keyboard users must see which tab has focus — the label is the only visible
   control, since the input itself is off-screen. */
.zs-tab-input:focus-visible + .zs-tab-label {
  outline: 2px solid var(--zs-color-primary);
  outline-offset: 2px;
}
.zs-tab-media img { width: 100%; border-radius: var(--zs-radius); display: block; margin-bottom: 1rem; }

/* ---------- Feature list ---------- */
.zs-feature-items { list-style: none; padding: 0; margin: 0; gap: .6rem 2rem; }
.zs-feature-items li { padding-left: 1.6em; position: relative; }
.zs-feature-items li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--zs-color-primary);
  font-weight: 700;
}

/* ---------- Buttons ---------- */
.zs-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5em 0; }
.zs-buttons-center { justify-content: center; }
.zs-buttons-right { justify-content: flex-end; }
.zs-btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--zs-color-primary);
}

/* ---------- Marquee ---------- */
.zs-marquee {
  overflow: hidden;
  margin: 3em 0;
  padding: .9rem 0;
  background: var(--zs-color-secondary);
  color: #fff;
}
.zs-marquee-track { display: flex; width: max-content; animation: zs-marquee 26s linear infinite; }
.zs-marquee-run { display: flex; }
.zs-marquee-word {
  padding: 0 2rem;
  font-family: var(--zs-font-heading);
  font-weight: 600;
  white-space: nowrap;
}
.zs-marquee-word::after { content: "•"; margin-left: 2rem; opacity: .45; }
@keyframes zs-marquee {
  from { transform: translateX(0); }
  /* Exactly one run's width, so the second copy lands where the first started. */
  to { transform: translateX(-50%); }
}
/* Motion that never stops is a genuine accessibility problem, so respect the
   system setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  .zs-marquee-track { animation: none; }
  .zs-slider { scroll-behavior: auto; }
}

/* ---------- Page header ---------- */
.zs-pageheader {
  padding: 3.5rem 1.25rem;
  background: var(--zs-color-surface);
  background-size: cover;
  background-position: center;
  border-radius: var(--zs-radius);
  margin: 0 0 2.5em;
}
.zs-pageheader-image { position: relative; color: #fff; }
/* The scrim is a pseudo-element so the author's background image stays a single
   background declaration and the text keeps its contrast over any photo. */
.zs-pageheader-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .45);
  border-radius: inherit;
}
.zs-pageheader-inner { position: relative; }
.zs-pageheader-image .zs-pageheader-title { color: #fff; }
.zs-pageheader-title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.zs-pageheader-sub { margin: .5em 0 0; opacity: .9; }
/* A logo with no file yet — keeps the row from collapsing while a site is
   still being filled in. */
.zs-logo-name {
  font-family: var(--zs-font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--zs-color-muted);
  letter-spacing: .01em;
}

/* ══════════ Header variants ══════════
   Seven arrangements of the same four pieces — logo, menu, contact, CTA. Each
   is a modifier on .zs-header rather than its own block, so the mobile nav,
   the sticky behaviour and the edge treatment are written once and every
   variant inherits them. Below 720px they all collapse to logo + burger. */

/* Doubled class on purpose. A theme is concatenated after this file and styles
   .zs-header directly — logistics gives it a 3px accent border — so a
   single-class rule here loses on source order and the author's "no edge"
   choice silently does nothing. */
.zs-header.zs-header-sticky { position: sticky; top: 0; z-index: 40; }
.zs-header.zs-header-edge-none { border-bottom: 0; box-shadow: none; }
.zs-header.zs-header-edge-shadow {
  border-bottom: 0;
  box-shadow: 0 1px 3px rgb(15 23 42 / .06), 0 8px 24px -16px rgb(15 23 42 / .2);
}
.zs-header-cta { margin-left: .75rem; padding: .5rem 1.1rem; font-size: .95rem; }

/* The strip above the header: contact details on the left, social on the right. */
.zs-topbar {
  background: var(--zs-tone-dark);
  color: var(--zs-tone-on-dark);
  font-size: .85rem;
}
.zs-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  flex-wrap: wrap;
}
.zs-topbar a { color: inherit; text-decoration: none; }
.zs-topbar-contact { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.zs-headbar-item { display: inline-flex; align-items: center; gap: .4em; }
.zs-headbar-item .zs-icon { width: 1em; height: 1em; }

.zs-social { display: inline-flex; align-items: center; gap: .6rem; }
.zs-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.zs-social-link:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.zs-social-link .zs-icon { width: 1rem; height: 1rem; }

/* Logo centred with the menu split around it. The two halves are separate
   <nav>s on desktop and a single one on mobile — splitting a list in half is a
   visual arrangement, so the mobile view gets the whole menu back in order. */
.zs-header-v-centered .zs-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.zs-header-v-centered .zs-nav-half:first-of-type .zs-nav-list { justify-content: flex-end; }
.zs-header-v-centered .zs-nav-mobile { display: none; }

/* Two rows, both centred. */
.zs-header-v-stacked .zs-header-inner {
  flex-direction: column;
  gap: .5rem;
  padding-block: 1rem;
}

/* Transparent over the hero until scrolled. The page must not reserve space
   for it, hence the negative margin pulling the content up underneath. */
/* Light type on a dark surface, without being a band.
   Repeats the dark band's palette flip rather than reusing
   .zs-section-tone-dark, because a theme hangs decoration off that class —
   logistics draws a 3px accent rule along the top of every dark band, which on
   a header or a hero reads as a stray line across the page. */
.zs-on-dark {
  --zs-color-text: var(--zs-tone-on-dark);
  --zs-color-secondary: var(--zs-tone-on-dark);
  --zs-color-muted: color-mix(in srgb, var(--zs-tone-on-dark) 60%, transparent);
  --zs-color-primary: var(--zs-tone-accent-on-dark);
  color: var(--zs-color-text);
}
.zs-header.zs-header-overlay {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  transition: background .2s, box-shadow .2s;
}
body:has(.zs-header-overlay) main { margin-top: calc(-1 * var(--zs-header-h, 4rem)); }
body:has(.zs-header-overlay) main > .zs-container > .zs-article-page > .zs-content > :first-child {
  padding-top: var(--zs-header-h, 4rem);
}
.zs-header.zs-header-overlay.zs-header-solid {
  background: var(--zs-color-background);
  box-shadow: 0 1px 3px rgb(15 23 42 / .08);
  /* Solid means back on the page's own palette, not the dark-band one —
     every colour .zs-on-dark repainted, taken back from the page (inherit
     works for custom properties). Leaving primary on the on-dark accent
     made a text logo a pale pink on white once you scrolled. */
  --zs-color-text: inherit;
  --zs-color-secondary: inherit;
  --zs-color-muted: inherit;
  --zs-color-primary: inherit;
}

/* Logo left, menu centre, contact + CTA right. */
.zs-header-v-contact .zs-header-inner { gap: 1.5rem; }
.zs-header-v-contact .zs-nav { margin-inline: auto; }
.zs-header-contact {
  display: flex;
  gap: 1.25rem;
  font-size: .85rem;
  color: var(--zs-color-muted);
}
.zs-header-contact a { color: inherit; text-decoration: none; }
@media (max-width: 1080px) { .zs-header-contact { display: none; } }

/* Menu always behind the burger, at every width. */
.zs-header-v-minimal .zs-nav-burger { display: block; }
.zs-header-v-minimal .zs-nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 14rem;
  background: var(--zs-color-background);
  box-shadow: 0 12px 32px -12px rgb(15 23 42 / .3);
  padding: 1rem 1.25rem;
  z-index: 50;
}
.zs-header-v-minimal .zs-nav-toggle:checked ~ .zs-nav { display: block; }
.zs-header-v-minimal .zs-nav-list { flex-direction: column; gap: .75rem; }

@media (max-width: 720px) {
  .zs-topbar-inner { justify-content: center; }
  .zs-header-v-centered .zs-header-inner { display: flex; }
  .zs-header-v-centered .zs-nav-half { display: none; }
  .zs-header-v-centered .zs-nav-mobile { display: none; }
  .zs-header-v-centered .zs-nav-toggle:checked ~ .zs-nav-mobile { display: block; }
  .zs-header-v-stacked .zs-header-inner { flex-direction: row; }
  .zs-header-cta { display: none; }
}

/* ══════════ Footer variants ══════════ */

.zs-footer-v-minimal .zs-footer-inner { text-align: center; }
.zs-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2.5rem;
  align-items: start;
}
.zs-footer-brand { display: grid; gap: .75rem; justify-items: start; }
.zs-footer-about { margin: 0; color: var(--zs-color-muted); max-width: 32rem; }
.zs-footer-col h3 { margin: 0 0 .8em; font-size: 1rem; }
.zs-footer-col .zs-nav-list { flex-direction: column; gap: .55rem; align-items: flex-start; }
.zs-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.zs-footer-contact li { display: flex; gap: .6em; align-items: start; color: var(--zs-color-muted); }
.zs-footer-contact a { color: inherit; text-decoration: none; }
.zs-footer-contact .zs-icon { width: 1.1em; height: 1.1em; flex: none; margin-top: .2em; }
.zs-copyright { margin: 2rem 0 0; color: var(--zs-color-muted); font-size: .9rem; }
.zs-footer-v-minimal .zs-copyright { margin: 0; }

/* The CTA band overlaps the footer's top edge, which is what makes it read as
   a card sitting on the seam rather than another stripe. */
.zs-footer-cta { padding-top: 2rem; }
.zs-footer-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--zs-tone-brand);
  color: var(--zs-on-primary);
  border-radius: calc(var(--zs-radius) * 1.5);
  padding: 2.5rem 2.5rem;
  margin-bottom: -3rem;
  position: relative;
  z-index: 1;
}
.zs-footer-cta-inner h2 { margin: 0 0 .3em; color: var(--zs-on-primary); }
.zs-footer-cta-inner p { margin: 0; color: rgb(255 255 255 / .8); }
.zs-footer-cta-inner .zs-btn { background: #fff; color: var(--zs-tone-brand); }
.zs-footer-v-cta { padding-top: 5rem; }

@media (max-width: 900px) {
  .zs-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .zs-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .zs-footer-cta-inner { padding: 1.75rem; }
}

/* ---------- Phase 6: latest posts, contact form, map ---------- */
.zs-latest-grid { grid-template-columns: repeat(var(--zs-cols, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .zs-latest-grid { --zs-cols: 2; } }
@media (max-width: 640px) { .zs-latest-grid { --zs-cols: 1; } }
.zs-latest { width: 100%; }
.zs-latest-more { text-align: center; margin-top: 1.75rem; }

/* width:100% — inside a stacked section the block would otherwise shrink to its content. */
.zs-form { width: 100%; max-width: 46rem; margin-inline: auto; }
.zs-form-body { display: grid; gap: 1.25rem; }
.zs-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.zs-form-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .zs-form-grid { grid-template-columns: 1fr; } }
.zs-form-field { display: grid; gap: 0.35rem; }
.zs-form-field label { font-weight: 600; font-size: 0.95rem; }
.zs-form-req { color: #dc2626; }
.zs-form-field :is(input, select, textarea) {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--zs-color-text) 22%, transparent);
  border-radius: var(--zs-radius);
  background: var(--zs-color-background);
  color: var(--zs-color-text);
}
.zs-form-field :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--zs-color-primary);
  outline-offset: 1px;
  border-color: var(--zs-color-primary);
}
.zs-form-field textarea { resize: vertical; min-height: 7rem; }
.zs-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.zs-form-actions .zs-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.zs-form-actions .zs-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.zs-form-note { color: var(--zs-color-muted); font-size: 0.85rem; }
/* Off-screen rather than display:none — some bots skip fields they can tell are hidden. */
/* Footer sign-up: one field and a button, sized for a footer column. */
.zs-newsletter-text { margin: 0 0 .9rem; font-size: .92rem; color: var(--zs-color-muted); }
.zs-newsletter-form { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; }
.zs-newsletter-form input[type="email"] {
  flex: 1 1 12rem; min-width: 0;
  padding: .7rem .9rem; font: inherit; font-size: .95rem;
  color: var(--zs-color-text);
  background: var(--zs-color-background);
  border: 1px solid color-mix(in srgb, var(--zs-color-text) 22%, transparent);
  border-radius: var(--zs-radius);
}
.zs-newsletter-form input[type="email"]:focus-visible { outline: 2px solid var(--zs-color-primary); outline-offset: 1px; }
.zs-newsletter-form .zs-btn { flex: 0 0 auto; }
.zs-newsletter .zs-form-msg { font-size: .9rem; }
.zs-form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The worker redirects back to #zsf-<id>-sent / -failed; :target shows the message. */
.zs-form-msg { display: none; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: var(--zs-radius); margin: 0 0 1rem; }
.zs-form-msg:target { display: flex; scroll-margin-top: 6rem; }
.zs-form-sent { background: color-mix(in srgb, #16a34a 12%, transparent); color: #166534; }
.zs-form-failed { background: color-mix(in srgb, #dc2626 10%, transparent); color: #991b1b; }
.zs-form-sent:target ~ .zs-form-body { display: none; }

.zs-map { display: grid; gap: 1rem; width: 100%; }
.zs-map-info { display: grid; gap: 0.5rem; }
.zs-map-line { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; white-space: pre-line; }
.zs-map-line .zs-icon { flex: 0 0 auto; margin-top: 0.2rem; color: var(--zs-color-primary); }
.zs-map-frame summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--zs-color-primary);
  padding: 0.5rem 0;
}
.zs-map-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 280px; border: 0; border-radius: var(--zs-radius); }

/* ---------- announcement bar ---------- */
.zs-announce { font-size: 0.9rem; }
.zs-announce-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.75rem; padding: 0.55rem 0; text-align: center; }
.zs-announce a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.zs-announce-brand { background: var(--zs-tone-brand); color: var(--zs-on-primary); }
.zs-announce-dark { background: var(--zs-tone-dark); color: var(--zs-tone-on-dark); }
.zs-announce-accent { background: var(--zs-color-accent); color: #111827; }

/* ---------- floating contact buttons ---------- */
.zs-float {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.zs-float-right { right: 1rem; }
.zs-float-left { left: 1rem; }
.zs-float-btn {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.22);
  transition: transform 0.15s ease;
}
.zs-float-btn:hover { transform: scale(1.06); }
.zs-float-btn:focus-visible { outline: 3px solid var(--zs-color-text); outline-offset: 2px; }
.zs-float-btn .zs-icon { width: 1.6rem; height: 1.6rem; }
.zs-float-line { background: #06c755; }
.zs-float-messenger { background: #0866ff; }
.zs-float-phone { background: var(--zs-color-primary); }
@media print { .zs-float, .zs-announce { display: none; } }

/* ==========================================================================
   Layout variants (Phase 7). The renderer adds zs-variant-<name> to a block's
   root; "default" adds nothing, so every page made before variants existed
   looks exactly as it did. Themes may restyle any of these.
   ========================================================================== */

/* ---------- hero ---------- */
/* split: words left, a tall picture right. Falls back to the plain hero when
   there's no image, rather than leaving half the row empty. */
.zs-hero.zs-variant-split.zs-hero-has-image {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  text-align: left;
}
.zs-hero.zs-variant-split .zs-hero-media { order: 2; margin: 0; }
.zs-hero.zs-variant-split .zs-hero-media img { aspect-ratio: 4 / 5; max-height: 34rem; border-radius: calc(var(--zs-radius) * 1.5); }
.zs-hero.zs-variant-split .zs-hero-sub { margin-inline: 0; }
.zs-hero.zs-variant-split .zs-hero-actions { justify-content: flex-start; }
@media (max-width: 800px) {
  .zs-hero.zs-variant-split.zs-hero-has-image { grid-template-columns: 1fr; }
  .zs-hero.zs-variant-split .zs-hero-media { order: 0; }
  .zs-hero.zs-variant-split .zs-hero-media img { aspect-ratio: 16 / 10; }
}

/* minimal: type does all the work — big, left, one accent rule. */
.zs-hero.zs-variant-minimal { text-align: left; padding-block: clamp(2rem, 1rem + 4vw, 5rem); }
.zs-hero.zs-variant-minimal .zs-hero-media { display: none; }
.zs-hero.zs-variant-minimal .zs-hero-title { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem); max-width: 18ch; }
.zs-hero.zs-variant-minimal .zs-hero-sub { margin-inline: 0; }
.zs-hero.zs-variant-minimal .zs-hero-actions { justify-content: flex-start; }
.zs-hero.zs-variant-minimal .zs-hero-body::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--zs-color-primary);
  margin-bottom: 1.5rem;
}

/* boxed: the photo hero, kept inside the page as a rounded card. */
.zs-hero-bg.zs-variant-boxed {
  width: auto;
  margin-inline: 0;
  margin-block: 1.5rem;
  border-radius: calc(var(--zs-radius) * 2.5);
  overflow: hidden;
  padding-inline: clamp(1.25rem, 1rem + 4vw, 4rem);
}
.zs-hero-bg.zs-variant-boxed > .zs-hero-body { padding-inline: 0; }

/* ---------- cards ---------- */
.zs-cards-section.zs-variant-numbered .zs-cards { counter-reset: zs-card; }
.zs-cards-section.zs-variant-numbered .zs-card { counter-increment: zs-card; position: relative; padding-top: 3.4rem; }
.zs-cards-section.zs-variant-numbered .zs-card::before {
  content: counter(zs-card, decimal-leading-zero);
  position: absolute;
  top: 1.1rem;
  left: 1.4rem;
  font-family: var(--zs-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--zs-color-primary);
  opacity: .85;
}
.zs-cards-section.zs-variant-bordered .zs-card {
  background: var(--zs-color-background);
  border: 1px solid color-mix(in srgb, var(--zs-color-text) 10%, transparent);
  border-top: 3px solid var(--zs-color-primary);
}

/* ---------- image + text ---------- */
.zs-imagetext.zs-variant-overlap:has(.zs-imagetext-media) { gap: 0; }
.zs-imagetext.zs-variant-overlap .zs-imagetext-body {
  position: relative;
  z-index: 1;
  background: var(--zs-color-background);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: calc(var(--zs-radius) * 1.5);
  box-shadow: 0 18px 40px -24px rgb(15 23 42 / .35);
  margin-left: -3rem;
}
.zs-imagetext-right.zs-variant-overlap .zs-imagetext-body { margin-left: 0; margin-right: -3rem; }
.zs-imagetext.zs-variant-overlap .zs-imagetext-media img { aspect-ratio: 5 / 4; }
@media (max-width: 720px) {
  .zs-imagetext.zs-variant-overlap .zs-imagetext-body,
  .zs-imagetext-right.zs-variant-overlap .zs-imagetext-body { margin: -2.5rem 1rem 0; }
}

/* ---------- CTA band ---------- */
.zs-ctaband.zs-variant-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.zs-ctaband.zs-variant-soft {
  background: color-mix(in srgb, var(--zs-color-primary) 7%, var(--zs-color-background));
  color: var(--zs-color-text);
  border-left: 4px solid var(--zs-color-primary);
}
.zs-ctaband.zs-variant-soft h2 { color: var(--zs-color-secondary); }
.zs-ctaband.zs-variant-soft p { color: var(--zs-color-muted); }
.zs-ctaband.zs-variant-soft .zs-btn-invert { background: var(--zs-color-primary); color: var(--zs-on-primary); }

/* ---------- stats ---------- */
.zs-stats.zs-variant-band {
  background: var(--zs-tone-brand);
  color: var(--zs-on-primary);
  border-radius: calc(var(--zs-radius) * 1.5);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.zs-stats.zs-variant-band :is(h2, .zs-eyebrow, .zs-blockhead-sub) { color: var(--zs-on-primary); }
.zs-stats.zs-variant-band .zs-stat-value { color: var(--zs-on-primary); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); }
.zs-stats.zs-variant-band .zs-stat-label { color: rgb(255 255 255 / .82); }
.zs-stats.zs-variant-band .zs-stat + .zs-stat { border-left: 1px solid rgb(255 255 255 / .22); }
@media (max-width: 640px) {
  .zs-stats.zs-variant-band .zs-stat + .zs-stat { border-left: 0; border-top: 1px solid rgb(255 255 255 / .22); padding-top: 1rem; }
}

/* ---------- testimonials ---------- */
/* featured: the first review leads, full width and larger; the rest follow. */
/* Two followers share the row between them rather than leave a third of it empty. */
@media (min-width: 641px) {
  .zs-testimonials.zs-variant-featured .zs-testimonial-grid:has(> .zs-testimonial:nth-child(3):last-child) { --zs-cols: 2; }
}
.zs-testimonials.zs-variant-featured .zs-testimonial-grid > .zs-testimonial:first-child {
  grid-column: 1 / -1;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--zs-tone-brand);
  color: var(--zs-on-primary);
  text-align: center;
}
.zs-testimonials.zs-variant-featured .zs-testimonial-grid > .zs-testimonial:first-child blockquote {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-family: var(--zs-font-heading);
  max-width: 44rem;
  margin-inline: auto;
}
.zs-testimonials.zs-variant-featured .zs-testimonial-grid > .zs-testimonial:first-child figcaption { justify-content: center; }
.zs-testimonials.zs-variant-featured .zs-testimonial-grid > .zs-testimonial:first-child .zs-testimonial-role { color: rgb(255 255 255 / .8); }
.zs-testimonials.zs-variant-featured .zs-testimonial-grid > .zs-testimonial:first-child .zs-rating { color: #fde68a; }
/* minimal: no boxes, a rule and the words. */
/* Spotlight: the section head on the left, one testimonial at a time on the
   right with the customer's face large beside their words. */
@media (min-width: 901px) {
  .zs-testimonials.zs-variant-spotlight {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
  }
  .zs-testimonials.zs-variant-spotlight > .zs-blockhead { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .zs-testimonials.zs-variant-spotlight > :is(.zs-slider, .zs-testimonial-grid, .zs-slider-nav) { grid-column: 2; }
}
.zs-testimonials.zs-variant-spotlight .zs-testimonial-grid { --zs-cols: 1; }
.zs-testimonials.zs-variant-spotlight .zs-slider > * { flex-basis: 100%; }
.zs-testimonials.zs-variant-spotlight .zs-testimonial {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.75rem; align-items: center;
  background: none; border: 0; box-shadow: none; padding: .5rem 0;
}
.zs-testimonials.zs-variant-spotlight .zs-testimonial > :not(.zs-testimonial-photo) { grid-column: 2; }
.zs-testimonial-photo {
  grid-column: 1; grid-row: 1 / span 3;
  width: clamp(6.5rem, 4rem + 6vw, 10rem); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  border: 5px solid var(--zs-color-background);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zs-color-primary) 30%, transparent), 0 20px 40px -24px rgb(0 0 0 / .5);
}
.zs-testimonial-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.zs-testimonials.zs-variant-spotlight .zs-testimonial blockquote {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.7; color: var(--zs-color-text);
}
@media (max-width: 560px) {
  .zs-testimonials.zs-variant-spotlight .zs-testimonial { grid-template-columns: 1fr; }
  .zs-testimonials.zs-variant-spotlight .zs-testimonial > * { grid-column: 1 !important; }
  .zs-testimonial-photo { grid-row: auto; margin-bottom: 1rem; }
}
.zs-slider-nav { display: flex; gap: .5rem; margin-top: 1rem; }
.zs-slider-nav[hidden] { display: none; }
.zs-slider-nav button {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--zs-color-secondary) 25%, transparent);
  background: var(--zs-color-background); color: var(--zs-color-secondary);
}
.zs-slider-nav button:hover { background: var(--zs-tone-brand, var(--zs-color-primary)); color: var(--zs-on-primary); border-color: transparent; }
.zs-slider-nav button:focus-visible { outline: 2px solid var(--zs-color-primary); outline-offset: 2px; }
.zs-slider-nav button svg { width: 1.1rem; height: 1.1rem; }
.zs-slider-nav [data-zs-slide="prev"] svg { transform: scaleX(-1); }

.zs-testimonials.zs-variant-minimal .zs-testimonial {
  background: none;
  border-radius: 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--zs-color-primary);
}
.zs-testimonials.zs-variant-minimal .zs-testimonial blockquote { font-size: 1.15rem; font-family: var(--zs-font-heading); }

/* ---------- services ---------- */
/* list: icon left, words right, one row each — for longer descriptions. */
.zs-services.zs-variant-list .zs-services-grid { --zs-cols: 1; max-width: 52rem; margin-inline: auto; gap: .75rem; }
.zs-services.zs-variant-list .zs-service {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  align-items: start;
}
.zs-services.zs-variant-list .zs-service > :not(.zs-service-icon):not(.zs-service-media) { grid-column: 2; }
.zs-services.zs-variant-list .zs-service-icon { grid-row: 1 / span 3; margin: 0; }
.zs-services.zs-variant-list .zs-service-media { grid-row: 1 / span 3; margin: -1.5rem 0 -1.5rem -1.5rem; width: 9rem; }
.zs-services.zs-variant-list .zs-service-media img { height: 100%; aspect-ratio: auto; border-radius: var(--zs-radius) 0 0 var(--zs-radius); }
/* plain: no card at all; the icon carries the shape. */
.zs-services.zs-variant-plain .zs-service { background: none; padding: 0; }
.zs-services.zs-variant-plain .zs-service-link:hover { background: none; }
.zs-services.zs-variant-plain .zs-service-link:hover h3 { color: var(--zs-color-primary); }
.zs-services.zs-variant-plain .zs-service-media { margin: 0 0 1rem; }
.zs-services.zs-variant-plain .zs-service-media img { border-radius: var(--zs-radius); }

/* ---------- scroll reveal (theme setting) ----------
   .zs-reveal is set on <html> by a head script only when motion is welcome and
   the observer exists; without it nothing here applies. The animation on the
   hidden state is a safety net: whatever happens to the script, every section
   is visible after 2.5s. */
.zs-reveal .zs-content > .zs-section:not(.zs-in) {
  opacity: 0;
  transform: translateY(18px);
}
/* Only while the observer hasn't checked in: once it has, sections wait to be
   scrolled to; if it never does, they all appear after 2.5s. */
.zs-reveal:not(.zs-reveal-ready) .zs-content > .zs-section:not(.zs-in) {
  animation: zs-reveal-fallback 0s 2.5s forwards;
}
.zs-reveal .zs-content > .zs-section {
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
@keyframes zs-reveal-fallback { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .zs-reveal .zs-content > .zs-section:not(.zs-in) { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   Craft (theme overhaul). The details every theme was missing, at base level
   so a theme only has to say what makes it itself: type that wraps like a
   designer set it, buttons that answer a hover, pictures that frame cards
   instead of sitting on top of them, and a footer that is a section rather
   than a line of small print. Themes override freely.
   ========================================================================== */

h1, h2, h3, .zs-hero-title, .zs-pageheader-title { text-wrap: balance; }
/* A Thai phrase (see phrases.tsx) moves to the next line whole. */
.zs-ph { display: inline-block; }
/* *Starred* words in a heading (see phrases.tsx): the accent colour. */
/* Inline-block keeps a starred phrase on one line ("ดูแลง่าย", not "ดูแล /
   ง่าย"); one longer than the line still wraps inside itself. */
.zs-accent { color: var(--zs-color-primary); display: inline-block; }
p, li, blockquote { text-wrap: pretty; }
/* One type scale for every heading that opens a section, so a page doesn't
   have a 3rem services title next to a 1.6rem "about us" one. A theme sets
   the variables; the selectors stay here. Thai stacks vowels and tone marks
   above and below the line, so the leading can't go as tight as Latin. */
:root {
  --zs-h-display: clamp(2.4rem, 1.2rem + 4.2vw, 4.4rem);
  --zs-h-section: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem);
  --zs-h-leading: 1.22;
}
.zs-hero-title { font-size: var(--zs-h-display); }
.zs-blockhead h2, .zs-imagetext-body h2, .zs-section-title {
  font-size: var(--zs-h-section);
  line-height: var(--zs-h-leading);
  letter-spacing: -0.015em;
  margin-bottom: .45em;
}
.zs-ctaband h2 { font-size: calc(var(--zs-h-section) * .8); line-height: var(--zs-h-leading); }
.zs-hero-title, .zs-blockhead h2, .zs-imagetext-body h2, .zs-section-title, .zs-ctaband h2 { font-weight: 700; }
.zs-imagetext-body p { font-size: 1.05rem; }

/* Buttons: a little lift and a visible focus. */
.zs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  line-height: 1.4;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.zs-btn:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--zs-color-primary) 70%, transparent); }
.zs-btn:active { transform: none; }
:is(a, button, summary, label):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--zs-color-primary) 55%, transparent);
  outline-offset: 3px;
}
.zs-hero-actions .zs-btn { padding: .8rem 1.7rem; font-size: 1.02rem; }

/* Header: a menu that looks like one, with a quiet hover. */
.zs-nav-list a { text-decoration: none; color: var(--zs-color-text); font-weight: 500; transition: color .15s ease; }
.zs-nav-list a:hover { color: var(--zs-color-primary); opacity: 1; }
/* A text logo's mark: an icon in a brand-coloured tile, sized off the text. */
.zs-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.zs-logo-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem;
  border-radius: min(var(--zs-radius), .6rem);
  background: var(--zs-tone-brand, var(--zs-color-primary)); color: var(--zs-on-primary);
}
.zs-logo-mark svg { width: 1.3rem; height: 1.3rem; }
.zs-logo-text { font-family: var(--zs-font-heading); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--zs-color-secondary); }
.zs-logo { text-decoration: none; }

/* Split hero: the opener every reference uses — tall, the picture given real
   weight, the words vertically centred against it. */
.zs-hero.zs-variant-split.zs-hero-has-image { padding-block: clamp(1.5rem, .5rem + 3vw, 3.5rem); }
.zs-hero.zs-variant-split .zs-hero-media img { max-height: 38rem; box-shadow: 0 30px 60px -30px rgb(15 23 42 / .35); }
.zs-hero.zs-variant-split .zs-hero-title { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem); }

/* Service cards with a photo: the icon sits on the photo's lower edge, tying
   the two halves of the card together. */
.zs-service { transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.zs-service:has(.zs-service-media) .zs-service-icon {
  position: relative;
  margin-top: -3.1rem;
  background: var(--zs-color-primary);
  color: var(--zs-on-primary);
  box-shadow: 0 0 0 5px var(--zs-color-surface);
}
.zs-service-media { overflow: hidden; }
.zs-service-media img, .zs-gallery-item img, .zs-post-card-img img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.zs-service:hover .zs-service-media img,
.zs-gallery-item:hover img,
.zs-post-card:hover .zs-post-card-img img { transform: scale(1.05); }
.zs-gallery-item, .zs-post-card-img { overflow: hidden; border-radius: var(--zs-radius); }

/* Logos read as a row of partners, not a row of thumbnails. */
.zs-logos .zs-blockhead h2 { font-size: 1rem; font-weight: 600; color: var(--zs-color-muted); letter-spacing: 0; text-align: center; }
.zs-logos .zs-blockhead { margin-bottom: 1.5rem; text-align: center; }
.zs-logos-row img { filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.zs-logos-row a:hover img, .zs-logos-row img:hover { filter: none; opacity: 1; }

/* Stats: the number carries the block. */
.zs-stat-value { letter-spacing: -.02em; }

/* Footer: a closing section. */
.zs-footer { padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem; margin-top: 0; }
/* The tone classes repaint the palette for what's inside, but the footer's own
   background was the surface colour — which a dark or brand tone turns into a
   faint white wash, leaving light text on a white page. Paint the band. */
.zs-footer[class*="zs-section-tone-"] { background: var(--zs-band-bg); color: var(--zs-color-text); }
.zs-footer-grid { gap: 2.5rem; }
.zs-footer .zs-logo-text { font-size: 1.35rem; }
.zs-footer-col h3 { font-size: .95rem; letter-spacing: .02em; }
.zs-footer .zs-nav-list a { color: var(--zs-color-muted); font-weight: 400; }
.zs-footer .zs-nav-list a:hover { color: var(--zs-color-text); }
.zs-copyright { padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--zs-color-muted) 22%, transparent); }
main:has(.zs-content > :last-child.zs-section-band) { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* A filled button on a dark band or photo keeps the brand's own colour. The
   band lightens --zs-color-primary so links stay readable on dark, but a
   button already has its own background to read against, and the lightened
   tint turned every hero's main action pastel. */
:is(.zs-section-tone-dark, .zs-on-dark) .zs-btn:not(.zs-btn-ghost, .zs-btn-invert) {
  background: var(--zs-tone-brand);
  color: var(--zs-on-primary);
}

/* An overlay header over a photo hero: the hero itself runs up under the
   header, rather than the section holding it padding down a strip of plain
   page for the header to sit on (where its light type disappears). */
body:has(.zs-header-overlay) main > .zs-container > .zs-article-page > .zs-content > :first-child:has(> .zs-section-inner > .zs-hero-bg:first-child) {
  padding-top: 0;
}

/* The footer grid's template mixed a flexible first column with an auto-fit
   repeat, which CSS forbids — the whole declaration was dropped and every
   footer stacked into one column. The brand column is set; the rest are
   implicit, one per group, however many there are. */
@media (min-width: 901px) {
  .zs-footer-grid {
    grid-template-columns: minmax(0, 1.6fr);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* A CTA box inside a band of colour: the band already is the colour. Inside a
   brand band the box's own background resolved to white (the band sets the
   primary to white for its type), and white type sat on it unseen. */
:is(.zs-section-tone-brand, .zs-section-tone-dark) .zs-ctaband:not(.zs-variant-soft) {
  background: transparent;
  padding-inline: 0;
  box-shadow: none;
}
.zs-section-tone-brand .zs-ctaband .zs-btn-invert { background: #fff; color: var(--zs-tone-brand); }

/* Restates the phone rule that .zs-btn's display above would otherwise undo:
   below this width the header CTA gives its room to the logo and menu. */
@media (max-width: 720px) {
  .zs-header-cta { display: none; }
}

/* services/overlay: the photograph is the card — tall, numbered in the
   corner, the words in white over a dark foot. Without a picture an item
   falls back to a dark tile, so the row never breaks. */
.zs-services.zs-variant-overlay .zs-services-grid { counter-reset: zs-svc; }
.zs-services.zs-variant-overlay .zs-service {
  counter-increment: zs-svc;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(18rem, 14rem + 10vw, 25rem);
  padding: 1.5rem;
  border: 0;
  background: var(--zs-color-secondary);
  color: #fff;
  overflow: hidden;
  box-shadow: none;
}
.zs-services.zs-variant-overlay .zs-service-media { position: absolute; inset: 0; margin: 0; z-index: -2; }
.zs-services.zs-variant-overlay .zs-service-media img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.zs-services.zs-variant-overlay .zs-service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .05) 35%, rgb(0 0 0 / .8) 100%);
}
.zs-services.zs-variant-overlay .zs-service::after {
  content: counter(zs-svc, decimal-leading-zero);
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  font-family: var(--zs-font-heading);
  font-weight: 700;
  font-size: .95rem;
  opacity: .85;
}
.zs-services.zs-variant-overlay .zs-service-icon,
.zs-services.zs-variant-overlay .zs-service:has(.zs-service-media) .zs-service-icon {
  margin: 0 0 1rem;
  background: rgb(255 255 255 / .14);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.zs-services.zs-variant-overlay .zs-service h3 { color: #fff; font-size: 1.35rem; }
.zs-services.zs-variant-overlay .zs-service p { color: rgb(255 255 255 / .82); }
.zs-services.zs-variant-overlay .zs-service:hover { transform: none; }

/* ══════════ Motion set ══════════
   What a template's page does as you use it: the header steps back once
   you're reading, cards answer the pointer, and there's a way back up.
   All of it is decoration on top of a page that works without it, and
   reduced-motion visitors get the end states without the travel. */

/* A sticky header slims down once the page is scrolled (the scroll script
   adds .zs-header-scrolled). Stacked headers keep their two rows. */
.zs-header-inner { transition: min-height .25s ease, padding .25s ease; }
.zs-header.zs-header-sticky.zs-header-scrolled:not(.zs-header-v-stacked) .zs-header-inner { min-height: 3.6rem; }
.zs-header.zs-header-sticky.zs-header-scrolled { box-shadow: 0 8px 24px -18px rgb(0 0 0 / .45); }
.zs-header .zs-logo-mark, .zs-header .zs-logo img { transition: transform .25s ease; transform-origin: left center; }
.zs-header.zs-header-scrolled:not(.zs-header-v-stacked, .zs-header-v-centered) :is(.zs-logo-mark, .zs-logo img) { transform: scale(.88); }

/* Back to top. */
.zs-totop {
  position: fixed; z-index: 55;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--zs-tone-brand, var(--zs-color-primary)); color: var(--zs-on-primary);
  box-shadow: 0 8px 22px -10px rgb(0 0 0 / .5);
  opacity: 0; transform: translateY(.75rem); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.zs-totop[hidden] { display: none; }
.zs-totop-right { right: 1rem; }
.zs-totop-left { left: 1rem; }
.zs-totop.zs-totop-on { opacity: 1; transform: none; pointer-events: auto; }
.zs-totop:hover { opacity: 1; filter: brightness(1.1); }
.zs-totop:focus-visible { outline: 3px solid var(--zs-color-text); outline-offset: 2px; }
.zs-totop svg { width: 1.2rem; height: 1.2rem; transform: rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.zs-totop) { scroll-behavior: smooth; }
}

/* Cards answer the pointer: photos ease in, people's portraits too, and the
   full-photo service cards hold their description back until you reach for
   one — the description is the detail, the photo and title the invitation.
   Only where a pointer can hover; on touch everything is simply shown. */
.zs-team-photo { overflow: hidden; }
.zs-team-photo img, .zs-step-photo img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.zs-team-card:hover .zs-team-photo img, .zs-step:hover .zs-step-photo img { transform: scale(1.06); }
.zs-services.zs-variant-overlay .zs-service-media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zs-services.zs-variant-overlay .zs-service:hover .zs-service-media img { transform: scale(1.07); }
  .zs-services.zs-variant-overlay .zs-service .zs-service-text {
    max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease .05s;
  }
  .zs-services.zs-variant-overlay .zs-service:is(:hover, :focus-within) .zs-service-text { max-height: 8rem; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-header-inner, .zs-totop, .zs-team-photo img, .zs-step-photo img,
  .zs-services.zs-variant-overlay .zs-service-media img { transition: none; }
}

/* Hero slides: stacked photo layers under the veil, one shown at a time. */
.zs-hero-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.zs-hero-slide {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  opacity: 0; transition: opacity 1.2s ease;
}
.zs-hero-slide.zs-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .zs-hero-slide.zs-on { animation: zs-hero-drift 9s ease-out both; }
}
@keyframes zs-hero-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .zs-hero-slide { transition: none; } }
.zs-hero-nav {
  position: absolute; z-index: 1; left: 1rem; right: 1rem; top: 50%;
  display: flex; justify-content: space-between; margin: 0;
  transform: translateY(-50%); pointer-events: none;
}
.zs-hero-nav[hidden] { display: none; }
.zs-hero-nav button {
  pointer-events: auto;
  background: rgb(255 255 255 / .12); color: #fff;
  border-color: rgb(255 255 255 / .35);
  backdrop-filter: blur(4px);
}
@media (max-width: 720px) { .zs-hero-nav { display: none; } }

/* ---------- Menu ----------
   Read like a printed menu: a dish, a dotted leader, its price, the
   description underneath. Categories head their own run of dishes. The cards
   variant is the same data as photo cards with the price on the picture. */
.zs-menu { margin: 3em 0; }
.zs-menu-group + .zs-menu-group { margin-top: 2.5rem; }
.zs-menu-cat {
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  font-size: 1.25rem;
  color: var(--zs-color-primary);
  border-bottom: 2px solid color-mix(in srgb, var(--zs-color-primary) 30%, transparent);
}
/* Through .zs-menu: ".zs-content ul" would otherwise indent it like prose. */
.zs-menu .zs-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem 3rem;
  grid-template-columns: repeat(var(--zs-cols, 2), minmax(0, 1fr));
}
@media (max-width: 760px) { .zs-menu-list { --zs-cols: 1; } }
.zs-dish { position: relative; display: flex; gap: 1rem; align-items: flex-start; }
.zs-dish-body { flex: 1; min-width: 0; }
.zs-dish-media { flex: 0 0 4.5rem; aspect-ratio: 1; overflow: hidden; border-radius: var(--zs-radius); }
.zs-dish-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Wraps rather than squeezes: a long price ("เล็ก 380 / ใหญ่ 650") drops to
   its own line on a phone instead of breaking the dish name word by word. */
.zs-dish-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.zs-dish-price { margin-left: auto; }
.zs-dish-name { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.zs-dish-dots {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted color-mix(in srgb, var(--zs-color-text) 30%, transparent);
  transform: translateY(-.3em);
}
.zs-dish-price {
  font-family: var(--zs-font-heading);
  font-weight: 700;
  color: var(--zs-color-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.zs-dish-desc { margin: .2rem 0 0; color: var(--zs-color-muted); font-size: .92rem; line-height: 1.6; }
.zs-dish-tags { margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.zs-dish-tag {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .05rem .5rem;
  font-size: .75rem; line-height: 1.6;
  border-radius: 999px;
  background: var(--zs-color-surface);
  color: var(--zs-color-muted);
}
.zs-dish-tag-hot { color: var(--zs-color-accent); background: color-mix(in srgb, var(--zs-color-accent) 10%, transparent); }
.zs-dish-tag svg { width: .9em; height: .9em; }
/* The stamp: "order this one", inked on beside the name. */
.zs-dish-stamp {
  flex: none;
  align-self: center;
  font-size: .68rem; font-weight: 700; line-height: 1;
  padding: .28rem .4rem;
  color: var(--zs-color-accent);
  border: 1.5px solid currentColor;
  border-radius: .3rem;
  transform: rotate(-5deg);
}
.zs-menu-note { margin: 2rem 0 0; font-size: .85rem; color: var(--zs-color-muted); text-align: center; }

.zs-menu.zs-variant-cards .zs-menu-list { gap: 1.75rem; }
@media (max-width: 900px) { .zs-menu.zs-variant-cards .zs-menu-list { --zs-cols: 2; } }
@media (max-width: 560px) { .zs-menu.zs-variant-cards .zs-menu-list { --zs-cols: 1; } }
.zs-menu.zs-variant-cards .zs-dish { flex-direction: column; gap: 0; }
.zs-menu.zs-variant-cards .zs-dish-media { flex: none; width: 100%; aspect-ratio: 4 / 3; margin-bottom: .9rem; }
.zs-menu.zs-variant-cards .zs-dish-body { width: 100%; }
.zs-menu.zs-variant-cards .zs-dish-name { font-size: 1.15rem; }
.zs-menu.zs-variant-cards .zs-dish-line { flex-wrap: wrap; column-gap: .75rem; }
.zs-menu.zs-variant-cards .zs-dish-name { flex: 1 1 auto; }
.zs-menu.zs-variant-cards .zs-dish-dots { display: none; }
/* On a card the stamp goes on the photo's corner. */
.zs-menu.zs-variant-cards .zs-dish-stamp {
  position: absolute; top: .75rem; left: .75rem;
  background: var(--zs-color-background);
  font-size: .8rem; padding: .45rem .55rem;
}
/* On a dark band the stamp and leaders need the band's own light. */
.zs-section-tone-dark .zs-dish-stamp { background: transparent; }

/* Theme: ขนส่งหนัก (heavy)
 *
 * Heavy haulage, at night. The whole site is near-black and the one colour is
 * the brand's — a lime or safety yellow — used the way it's used on the trucks:
 * as a stripe, a number, a word, never as a wash. Type is Chakra Petch, cut
 * and squared like a stencil on a machine, set in capitals for anything
 * English; headings come in two tones (white, then *the accent*). The memorable
 * thing is the slash: three slanted bars — accent, grey, white — that close
 * the footer and mark the hero, the livery stripe of the fleet.
 *
 * A light band (tone "soft") is kept for the one place a sheet of facts reads
 * better on paper than on black: the contact details.
 */

:root {
  --zs-tone-dark: #060607;
  --zs-tone-soft: #ededee;
  --zs-tone-brand: var(--zs-color-primary);
  --zs-tone-on-dark: #f3f3f4;
  --zs-tone-accent-on-dark: var(--zs-color-primary);
  --zs-line: rgb(255 255 255 / .1);
  --zs-h-section: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  --zs-h-display: clamp(2.6rem, 1.3rem + 5vw, 5.4rem);
  --zs-h-leading: 1.15;
  --zs-slash: linear-gradient(115deg,
    transparent 0 8%, var(--zs-color-primary) 8% 30%, transparent 30% 36%,
    #8d8d92 36% 58%, transparent 58% 64%, #fff 64% 86%, transparent 86%);
}

body { background: var(--zs-color-background); }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }
.zs-hero-title, .zs-blockhead h2, .zs-pageheader-title { text-transform: uppercase; }
.zs-eyebrow { color: var(--zs-color-primary); letter-spacing: .14em; font-weight: 600; text-transform: uppercase; font-family: var(--zs-font-heading); }
.zs-eyebrow::before { display: none; }

/* Buttons: the accent, squared off, words in capitals. */
.zs-btn {
  border-radius: .35rem; font-family: var(--zs-font-heading); font-weight: 700; letter-spacing: .02em;
  padding: .8rem 1.5rem; box-shadow: 0 0 0 0 transparent;
}
.zs-btn:hover { box-shadow: 0 0 24px -4px color-mix(in srgb, var(--zs-color-primary) 60%, transparent); }
:is(.zs-section-tone-dark, .zs-on-dark) .zs-btn:not(.zs-btn-ghost, .zs-btn-invert) { color: var(--zs-on-primary); }
.zs-btn-ghost { border: 1px solid color-mix(in srgb, var(--zs-color-primary) 70%, transparent); color: var(--zs-color-text); background: transparent; }

/* Header: black bar, capitals, the page you're on underlined in the accent. */
.zs-header, .zs-header.zs-header-overlay.zs-header-solid {
  background: #000; border-bottom: 1px solid var(--zs-line); box-shadow: none;
  --zs-color-text: #fff; --zs-color-secondary: #fff;
}
.zs-header-inner { min-height: 4.5rem; }
.zs-header .zs-logo img { max-height: 56px; }
.zs-nav-list a {
  font-family: var(--zs-font-heading); font-weight: 600; font-size: .9rem; letter-spacing: .03em;
  text-transform: uppercase; color: #fff; position: relative; padding-block: .4rem;
}
.zs-nav-list > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px;
  background: var(--zs-color-primary); transform: scaleX(0); transition: transform .2s ease;
}
.zs-nav-list > li > a:hover::after, .zs-nav-list > li > a[aria-current="page"]::after { transform: scaleX(1); }
.zs-nav-list a[aria-current="page"] { color: var(--zs-color-primary); }
.zs-nav-burger span { background: var(--zs-color-primary); }

/* Hero: the truck on the right, the words on black on the left. A short
   accent bar under the title; the points as a row of ticks. */
/* Brand photography here is wide and low, like the trucks: a hero as tall as
   the screen blew it up two and a half times. */
.zs-hero-bg { min-height: clamp(26rem, 18rem + 22vw, 38rem); padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) clamp(5rem, 3rem + 5vw, 7rem); }
.zs-hero-bg.zs-hero-h-tall { min-height: clamp(28rem, 20rem + 24vw, 40rem); }
.zs-hero-bg::before {
  background:
    linear-gradient(90deg, rgb(0 0 0 / .94) 0%, rgb(0 0 0 / .78) 32%, rgb(0 0 0 / .15) 70%, rgb(0 0 0 / 0) 100%),
    linear-gradient(0deg, var(--zs-color-background) 0%, transparent 28%);
}
.zs-hero-bg, .zs-hero-slide { background-position: right center; }
.zs-hero-title { line-height: 1.04; max-width: 13ch; }
.zs-hero-title::after { content: ""; display: block; width: 2.75rem; height: 3px; margin-top: .4em; background: var(--zs-color-primary); }
.zs-hero-sub { color: rgb(255 255 255 / .86); font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); max-width: 30rem; }
.zs-hero-points li { color: #fff; font-family: var(--zs-font-heading); text-transform: uppercase; letter-spacing: .02em; }
.zs-hero-points li { border-bottom: 1px solid rgb(255 255 255 / .18); padding-bottom: .2rem; }
.zs-hero.zs-variant-split .zs-hero-title::after { margin-top: .3em; }
/* The light split hero (contact): words on paper, photo beside them. */
.zs-section-tone-soft .zs-hero-title { color: #0b0b0c; }
.zs-section-tone-soft .zs-hero-sub { color: var(--zs-color-muted); }
.zs-section-tone-soft .zs-eyebrow { color: #0b0b0c; }
.zs-hero.zs-variant-split .zs-hero-media img { border-radius: .5rem; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.zs-section-tone-soft { --zs-color-text: #1b1b1e; --zs-color-secondary: #0b0b0c; --zs-color-muted: #55555b; --zs-color-surface: #fff; --zs-color-background: #fff; }

/* A strip of points straight after the hero rides up over its foot. Only a
   strip: a section with a heading would cover the photo with its title. */
.zs-content > .zs-section:first-child + .zs-section:has(> .zs-section-inner > .zs-services.zs-variant-strip:first-child) { position: relative; z-index: 2; margin-top: -4.5rem; }

/* Section heads: the eyebrow centred over a white title, with a short rule. */
.zs-blockhead h2 { color: var(--zs-color-secondary); }
.zs-blockhead .zs-eyebrow { font-size: .85rem; }
.zs-blockhead .zs-eyebrow::after { content: ""; display: block; width: 2rem; height: 2px; margin: .45rem 0 0; background: var(--zs-color-primary); }

/* Cards: dark panels, a hairline rim, the accent in round badges. */
.zs-card, .zs-service, .zs-testimonial, .zs-plan, .zs-accordion-item, .zs-faq {
  background: var(--zs-color-surface); border: 1px solid var(--zs-line); border-radius: .5rem; box-shadow: none;
}
.zs-icon-badge { background: var(--zs-color-primary); color: var(--zs-on-primary); }
.zs-service-link:hover { background: color-mix(in srgb, var(--zs-color-primary) 6%, var(--zs-color-surface)); border-color: color-mix(in srgb, var(--zs-color-primary) 45%, transparent); }
.zs-service h3 { font-family: var(--zs-font-heading); text-transform: uppercase; letter-spacing: .01em; }
.zs-service:has(.zs-service-media) .zs-service-icon { box-shadow: 0 0 0 5px var(--zs-color-surface); }

/* Strip: a black panel of points, accent icons, hairline dividers. */
.zs-services.zs-variant-strip .zs-services-grid { background: rgb(14 14 16 / .92); border-color: var(--zs-line); backdrop-filter: blur(6px); }
.zs-services.zs-variant-strip .zs-service h3 { text-transform: none; font-family: var(--zs-font-body); font-weight: 600; }
.zs-services.zs-variant-strip .zs-service + .zs-service { border-left-color: var(--zs-line); }

/* Rows: white cards on black would shout; dark cards with the accent arrow. */
.zs-services.zs-variant-rows .zs-service h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem); }
.zs-services.zs-variant-rows .zs-service-arrow { color: var(--zs-color-primary); }

/* Photo cards: title in the accent, the second line in white; the
   description stays visible (these are labels, not teasers). The corner
   number is for sets that are a sequence — add the class zs-numbered. */
.zs-services.zs-variant-overlay .zs-service { border-radius: .5rem; min-height: 15rem; }
.zs-services.zs-variant-overlay .zs-service h3 { color: var(--zs-color-primary); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.zs-services.zs-variant-overlay .zs-service .zs-service-sub { color: #fff; font-weight: 500; margin: 0 0 .35em; }
.zs-services.zs-variant-overlay .zs-service::after { display: none; }
.zs-services.zs-variant-overlay.zs-numbered .zs-service::after {
  display: block; color: var(--zs-color-primary); font-family: var(--zs-font-heading); font-weight: 700;
  font-size: 2.2rem; opacity: 1; top: 1rem; left: 1.25rem; right: auto;
}
.zs-services.zs-variant-overlay .zs-service-icon,
.zs-services.zs-variant-overlay .zs-service:has(.zs-service-media) .zs-service-icon {
  background: rgb(0 0 0 / .55); color: var(--zs-color-primary); border: 1.5px solid var(--zs-color-primary);
}
.zs-services.zs-variant-overlay.zs-numbered .zs-service-icon { margin-top: 3.2rem !important; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zs-services.zs-variant-overlay .zs-service .zs-service-text { max-height: none; opacity: 1; }
}

/* Image + text: a dark card around the map/photo story. */
.zs-imagetext { background: var(--zs-color-surface); border: 1px solid var(--zs-line); border-radius: .5rem; padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); }
.zs-imagetext-media img { border-radius: .35rem; }
.zs-imagetext-body h2 { text-transform: none; }

/* The call card: dark, a rim, the phone number big in the accent. */
.zs-ctaband.zs-variant-soft { background: var(--zs-color-surface); border: 1px solid var(--zs-line); border-left: 4px solid var(--zs-color-primary); }
.zs-ctaband.zs-variant-soft h2 { color: #fff; }
.zs-ctaband .zs-btn-invert { background: var(--zs-color-primary); color: var(--zs-on-primary); }

/* The contact sheet's head is the page's title: display size, in capitals. */
.zs-section-tone-soft .zs-contactinfo .zs-blockhead h2 { font-size: var(--zs-h-display); line-height: 1.02; color: #0b0b0c; }
.zs-section-tone-soft .zs-contactinfo .zs-blockhead h2::after { content: ""; display: block; width: 2.75rem; height: 3px; margin-top: .35em; background: var(--zs-color-primary); }
.zs-section-tone-soft .zs-contactinfo .zs-blockhead .zs-eyebrow { color: #0b0b0c; }
.zs-section-tone-soft .zs-figure img, .zs-section-tone-soft .zs-section-inner > figure img { border-radius: .5rem; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .55); }
/* Beside the contact sheet the photo stands as tall as the sheet. */
@media (min-width: 901px) {
  .zs-section-tone-soft.zs-section-cols .zs-section-inner > :is(.zs-figure, figure) img { width: 100%; min-height: 32rem; object-fit: cover; object-position: 65% center; }
}
/* A photo card of two (the fleet) wants more height than a row of seven. */
.zs-services.zs-variant-overlay .zs-cols-2 .zs-service { min-height: clamp(18rem, 12rem + 14vw, 26rem); }

/* Contact sheet on paper: black icon discs with the accent glyph. */
.zs-contactinfo.zs-variant-list .zs-contact-icon { background: #0b0b0c; color: var(--zs-color-primary); width: 3rem; height: 3rem; }
.zs-contactinfo.zs-variant-list .zs-contact-value { font-family: var(--zs-font-heading); font-size: 1.2rem; }
.zs-contactinfo.zs-variant-list .zs-contact-value a { color: inherit; }

/* Footer: black, the tagline spaced out, the slash in the corner. */
.zs-footer { --zs-band-bg: #000; border-top: 1px solid var(--zs-line); position: relative; }
.zs-footer::after {
  content: ""; position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 1.4rem;
  width: 7rem; height: 1.6rem; background: var(--zs-slash);
}
.zs-footer-about { font-family: var(--zs-font-heading); letter-spacing: .08em; text-transform: uppercase; color: #fff !important; }
.zs-footer-col h3 { color: var(--zs-color-primary); font-family: var(--zs-font-heading); text-transform: uppercase; letter-spacing: .08em; }
.zs-footer .zs-logo img { max-height: 52px; }

/* Stats on black: accent numerals. */
.zs-stat-value { color: var(--zs-color-primary); font-family: var(--zs-font-heading); }

/* Gallery on black: square-ish frames, captions in capitals. */
.zs-gallery-item img { border-radius: .4rem; }
.zs-gallery-item figcaption { color: #fff; font-family: var(--zs-font-heading); text-transform: uppercase; letter-spacing: .03em; }

/* Mobile: the hero words over a darker veil, the strip stacks, photo labels
   two to a row as in a catalogue. */
@media (max-width: 640px) {
  .zs-services.zs-variant-overlay .zs-cols-4, .zs-services.zs-variant-overlay .zs-cols-3 { --zs-cols: 2; gap: .75rem; }
  .zs-services.zs-variant-overlay .zs-service { min-height: 11.5rem; padding: 1rem; }
  .zs-services.zs-variant-overlay .zs-service h3 { font-size: 1rem; }
  .zs-services.zs-variant-overlay .zs-service .zs-service-sub { font-size: .82rem; }
  .zs-services.zs-variant-overlay .zs-service .zs-service-text { font-size: .8rem; }
}
@media (max-width: 720px) {
  .zs-hero-bg::before { background: linear-gradient(180deg, rgb(0 0 0 / .55), rgb(0 0 0 / .8) 60%, var(--zs-color-background)); }
  .zs-content > .zs-section:first-child + .zs-section:has(> .zs-section-inner > .zs-services.zs-variant-strip:first-child) { margin-top: -2.5rem; }
}