/* eZephyr v2 — the six service pages (Milestone 4).
 * One shared structure, six compositions. Each page sets a theme (.sv--{key}),
 * a hero layout (split, mirror or band) with its own Mumbai illustration, and its
 * own treatment for "What's included" (.sv-caps--{variant}) and "How we work"
 * (.sv-approach--{variant}). Uses tokens.css and components.css. Scoped to .sv.
 */

.page-service { background: var(--ez-sky-light); }
.sv {
  --c: var(--ez-yellow);
  --on: var(--ez-ink);
  --mark: var(--ez-yellow);
  display: flow-root;
  background: var(--ez-paper);
  color: var(--ez-ink);
}
.sv--branding { --c: var(--ez-yellow); --mark: var(--ez-paper); }
.sv--social { --c: var(--ez-sky); }
.sv--performance { --c: var(--ez-red); --on: #fff; }
.sv--web { --c: var(--ez-sea); --on: #fff; }
.sv--commerce { --c: var(--ez-lilac); }
.sv--seo { --c: var(--ez-road); --on: #fff; }
.sv .s-sky { stroke: var(--ez-sky); }

.sv-h2 {
  font-family: var(--ez-font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.75rem);
  line-height: 0.95;
  text-transform: uppercase;
}

/* Buttons and links that sit on the theme colour */
.sv-btn { background: var(--ez-ink); color: var(--ez-yellow); box-shadow: 0 4px 0 var(--ez-yellow), 0 4px 0 2px var(--ez-ink); }
.sv-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ez-yellow), 0 7px 0 2px var(--ez-ink); }
.sv-btn:active { transform: translateY(1px); }
.sv--branding .sv-btn { box-shadow: 0 4px 0 var(--ez-paper), 0 4px 0 2px var(--ez-ink); }
.sv--branding .sv-link { text-decoration-color: var(--ez-paper); }
.sv--dark .sv-hero .sv-btn,
.sv--dark .sv-cta .sv-btn { background: var(--ez-yellow); color: var(--ez-ink); box-shadow: 0 4px 0 var(--ez-ink); }
.sv--dark .sv-hero .sv-btn:hover,
.sv--dark .sv-cta .sv-btn:hover { box-shadow: 0 7px 0 var(--ez-ink); }
.sv--dark .sv-hero .sv-link,
.sv--dark .sv-cta .sv-link { color: #fff; }
.sv--dark .sv-hero :focus-visible,
.sv--dark .sv-cta :focus-visible { outline-color: var(--ez-yellow); }

/* ================= Hero ================= */
.sv-hero { position: relative; overflow: hidden; background: var(--c); color: var(--on); }
.sv-hero__inner {
  display: grid;
  width: min(100% - 2 * var(--ez-gutter), var(--ez-max));
  margin-inline: auto;
  padding-top: clamp(20px, 3.5vw, 44px);
}
.sv--dark .sv-hero .breadcrumbs li,
.sv--dark .sv-hero .breadcrumbs li::before,
.sv--dark .sv-hero .breadcrumbs a { color: #fff; }
.sv--dark .sv-hero .breadcrumbs a { text-decoration-color: var(--ez-yellow); }
.sv--dark .sv-eyebrow,
.sv--dark .sv-cta .ez-eyebrow { background: var(--ez-yellow); color: var(--ez-ink); }
.sv-hero__title { margin-top: clamp(20px, 3vw, 36px); font-family: var(--ez-font-display); font-weight: 400; }
.sv-hero__line {
  display: block;
  font-size: clamp(2.6rem, 6.2vw, 5.75rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.sv-hero__word { display: inline-block; }
.sv-mark { display: inline-block; padding: 0.06em 0.1em 0; line-height: 0.9; background: var(--mark); color: var(--ez-ink); }
/* A platform line under the headline (e-commerce: Shopify), read before the lead */
.sv-hero__platform {
  max-width: 34rem;
  margin-top: clamp(16px, 2vw, 24px);
  padding: 2px 0 1px 14px;
  border-left: 6px solid var(--ez-ink);
  font: 400 clamp(1.125rem, 1.75vw, 1.5rem)/1.15 var(--ez-font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sv-hero__platform + .sv-hero__lead { margin-top: clamp(12px, 1.4vw, 18px); }
.sv--dark .sv-hero__platform { border-left-color: var(--ez-yellow); }
.sv-hero__lead { max-width: 34rem; margin-top: clamp(16px, 2vw, 26px); }
.sv-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(22px, 2.8vw, 32px); }

.sv-art { position: relative; width: min(100%, 440px); margin: clamp(28px, 5vw, 44px) auto 0; }
.sv-art svg { display: block; width: 100%; height: auto; }
/* Street and sea run on past the illustration to the hero's edges (the hero clips them). */
.sv-art--web svg, .sv-art--commerce svg, .sv-art--seo svg { overflow: visible; }
.sv-art-type { font: 400 128px var(--ez-font-display); fill: var(--ez-ink); }
.sv-art-sign { font: 400 15px var(--ez-font-display); letter-spacing: 1px; fill: var(--ez-red); }
/* Performance: the street's ads, shop sign and order notification */
.sv-art-adnote { font: 400 10px var(--ez-font-body); fill: var(--ez-ink-soft); }
.sv-art-adtag { font: 700 10px var(--ez-font-body); fill: var(--ez-ink); }
.sv-art-shop { font: 400 18px var(--ez-font-display); letter-spacing: 2px; fill: var(--ez-yellow); }
.sv-art-order { font: 700 14px var(--ez-font-body); fill: var(--ez-ink); }
/* Below 1024px the band shows only the middle of the 1440-wide scene (x ≈ 408–1032 on a phone):
   the billboard and the search-ad building stay, the shop and the growth tower at the edges go. */
@media (max-width: 1023px) {
  .sv-art--performance .sv-city--shop, .sv-art--performance .sv-city--growth { display: none; }
}
@media (min-width: 960px) {
  .sv-hero--split .sv-hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: end; }
  .sv-hero--mirror .sv-hero__inner { grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: end; }
  .sv-hero--mirror .sv-art { order: -1; margin: 0 auto 0 0; }
  .sv-hero--split .sv-art { margin: 0 0 0 auto; }
  .sv-hero--split .sv-art, .sv-hero--mirror .sv-art { width: 100%; max-width: 540px; }
  .sv-hero--split .sv-hero__copy, .sv-hero--mirror .sv-hero__copy { padding-bottom: clamp(56px, 7vw, 96px); }
}
/* Band: the illustration runs the full width under the copy. */
.sv-hero--band .sv-art { width: 100%; margin-top: clamp(28px, 4vw, 48px); }
.sv-hero--band .sv-art svg { height: clamp(200px, 46vw, 300px); }
@media (min-width: 1024px) { .sv-hero--band .sv-art svg { height: auto; aspect-ratio: 1440 / 320; } }
.sv-hero--band .sv-hero__lead { max-width: 40rem; }

/* ================= The service, explained ================= */
.sv-intro { padding-block: clamp(56px, 8vw, 112px); }
.sv-intro__inner { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) { .sv-intro__inner { grid-template-columns: 7fr 5fr; align-items: start; } }
.sv-prose { margin-top: clamp(16px, 2vw, 24px); }
.sv-prose p { max-width: 60ch; font-size: 1.1875rem; line-height: 1.6; }
.sv-prose p + p { margin-top: 1em; }
.sv-fit {
  padding: clamp(22px, 3vw, 32px);
  border: 3px solid var(--ez-ink);
  border-radius: var(--ez-radius);
  background: var(--c);
  color: var(--on);
  box-shadow: 8px 8px 0 var(--ez-ink);
}
.sv-fit__title { font: 400 clamp(1.5rem, 2.4vw, 1.875rem)/1.05 var(--ez-font-display); text-transform: uppercase; }
.sv-fit__list { display: grid; gap: 12px; margin-top: 16px; }
.sv-fit__list li { position: relative; padding-left: 36px; font-size: 1.0625rem; line-height: 1.45; }
.sv-fit__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ez-ink);
}
.sv-fit__list li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  width: 7px;
  height: 12px;
  border: solid var(--ez-yellow);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.sv--dark .sv-fit__list li::before { background: var(--ez-yellow); }
.sv--dark .sv-fit__list li::after { border-color: var(--ez-ink); }

/* ================= What's included: shared ================= */
.sv-caps { padding-block: clamp(56px, 8vw, 112px); scroll-margin-top: var(--header-h); }
.sv-caps__head { display: grid; gap: 14px 48px; margin-bottom: clamp(28px, 4vw, 48px); }
.sv-caps__intro { max-width: 30rem; }
@media (min-width: 1024px) {
  .sv-caps__head { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .sv-caps__intro { justify-self: end; }
}
.sv-caps__list { display: grid; gap: var(--ez-gap); }
@media (min-width: 640px) { .sv-caps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sv-caps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-cap { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); }
.sv-cap__num { font: 400 clamp(2rem, 3vw, 2.75rem)/1 var(--ez-font-display); }
.sv-cap__title { font: 400 clamp(1.4rem, 2vw, 1.75rem)/1.05 var(--ez-font-display); text-transform: uppercase; }
.sv-cap__text { font-size: 1.0625rem; line-height: 1.5; }

.sv-deliver { margin-top: clamp(32px, 4.5vw, 52px); }
.sv-deliver__title { font: 400 1.375rem/1.1 var(--ez-font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.sv-deliver__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sv-deliver__list li {
  padding: 7px 14px 6px;
  border: 2px solid var(--ez-ink);
  border-radius: 999px;
  background: var(--ez-paper);
  color: var(--ez-ink);
  font: 400 0.9375rem/1.2 var(--ez-font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Board (Branding): a brand board of coloured tiles */
@media (min-width: 1024px) {
  .sv-caps--board .sv-caps__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sv-caps--board .sv-cap { grid-column: span 2; }
  .sv-caps--board .sv-cap:nth-child(1) { grid-column: span 4; grid-row: span 2; justify-content: flex-end; }
  .sv-caps--board .sv-cap:nth-child(1) .sv-cap__num { font-size: clamp(5rem, 9vw, 8rem); margin-bottom: auto; }
  .sv-caps--board .sv-cap:nth-child(1) .sv-cap__title { font-size: clamp(2rem, 3.4vw, 3rem); }
}
.sv-caps--board .sv-cap { border: 3px solid var(--ez-ink); border-radius: var(--ez-radius); background: #fff; }
.sv-caps--board .sv-cap:nth-child(1) { background: var(--ez-yellow); }
.sv-caps--board .sv-cap:nth-child(2) { background: var(--ez-red); color: #fff; }
.sv-caps--board .sv-cap:nth-child(3) { background: var(--ez-sky); }
.sv-caps--board .sv-cap:nth-child(4) { background: var(--ez-lilac); }
.sv-caps--board .sv-cap:nth-child(5) { background: var(--ez-sea); color: #fff; }
.sv-caps--board .sv-cap__num { color: currentColor; }
@supports (-webkit-text-stroke: 2px black) {
  .sv-caps--board .sv-cap__num { color: transparent; -webkit-text-stroke: 2px currentColor; }
  .sv-caps--board .sv-cap:nth-child(2) .sv-cap__num, .sv-caps--board .sv-cap:nth-child(5) .sv-cap__num { -webkit-text-stroke-color: #fff; }
  .sv-caps--board .sv-cap:not(:nth-child(2)):not(:nth-child(5)) .sv-cap__num { -webkit-text-stroke-color: var(--ez-ink); }
}

/* Feed (Social): each capability is a post */
.sv-caps--feed { background: var(--ez-sky-light); }
.sv-caps--feed .sv-cap {
  padding-top: 70px;
  border: 3px solid var(--ez-ink);
  border-radius: 14px;
  background: #fff;
}
.sv-caps--feed .sv-cap::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 20px;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ez-ink);
  border-radius: 50%;
  background: var(--post, var(--ez-yellow));
}
.sv-caps--feed .sv-cap::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 64px;
  width: 92px;
  height: 10px;
  border-radius: 5px;
  background: var(--ez-sky-mid);
}
.sv-caps--feed .sv-cap:nth-child(3n+2) { --post: var(--ez-red); }
.sv-caps--feed .sv-cap:nth-child(3n) { --post: var(--ez-lilac); }
.sv-caps--feed .sv-cap__num {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 10px 3px;
  border-radius: 999px;
  background: var(--ez-sky);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

/* Tickets (Performance): BEST bus tickets, perforated and numbered */
.sv-caps--tickets .sv-cap {
  padding-top: 0;
  border: 3px solid var(--ez-ink);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.sv-caps--tickets .sv-cap__num {
  margin: 0 calc(-1 * clamp(20px, 2.4vw, 28px)) 10px;
  padding: 12px clamp(20px, 2.4vw, 28px) 14px;
  border-bottom: 3px dashed var(--ez-ink);
  background: var(--ez-red);
  color: #fff;
  font-size: 1.125rem;
  letter-spacing: 0.12em;
}
.sv-caps--tickets .sv-cap__num::before { content: 'No. '; }
.sv-caps--tickets .sv-cap::before,
.sv-caps--tickets .sv-cap::after {
  content: '';
  position: absolute;
  top: 34px;
  width: 22px;
  height: 22px;
  border: 3px solid var(--ez-ink);
  border-radius: 50%;
  background: var(--ez-paper);
}
.sv-caps--tickets .sv-cap::before { left: -14px; }
.sv-caps--tickets .sv-cap::after { right: -14px; }

/* Blueprint (Website): annotations on a blue drawing grid */
.sv-caps--blueprint {
  background-color: var(--ez-sea);
  background-image:
    linear-gradient(rgba(194, 242, 252, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194, 242, 252, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  color: #fff;
}
.sv-caps--blueprint .sv-cap { border: 2px dashed var(--ez-sky-light); border-radius: 2px; }
.sv-caps--blueprint .sv-cap::before,
.sv-caps--blueprint .sv-cap::after { content: ''; position: absolute; width: 14px; height: 14px; border: solid var(--ez-yellow); }
.sv-caps--blueprint .sv-cap::before { top: -6px; left: -6px; border-width: 3px 0 0 3px; }
.sv-caps--blueprint .sv-cap::after { bottom: -6px; right: -6px; border-width: 0 3px 3px 0; }
.sv-caps--blueprint .sv-cap__num { color: var(--ez-yellow); font-size: 1.125rem; letter-spacing: 0.12em; }
.sv-caps--blueprint .sv-cap__num::after { content: ' ———'; letter-spacing: -0.1em; }
.sv-caps--blueprint .sv-cap__text { color: var(--ez-sky-light); }
.sv-caps--blueprint .sv-deliver__title { color: #fff; }

/* Shelf (Commerce): stock boxes on shelves */
.sv-caps--shelf .sv-caps__list { row-gap: 44px; }
.sv-caps--shelf .sv-cap { border: 3px solid var(--ez-ink); border-radius: 4px; background: var(--box, var(--ez-paper)); }
.sv-caps--shelf .sv-cap::before { content: ''; position: absolute; top: -3px; left: 50%; width: 52px; height: 16px; margin-left: -26px; background: rgba(255, 250, 240, 0.75); border: solid var(--ez-ink); border-width: 0 2px 2px; }
.sv-caps--shelf .sv-cap::after { content: ''; position: absolute; left: -14px; right: -14px; bottom: -24px; height: 12px; border-radius: 2px; background: var(--ez-ink-soft); }
.sv-caps--shelf .sv-cap:nth-child(6n+1) { --box: var(--ez-yellow); }
.sv-caps--shelf .sv-cap:nth-child(6n+2) { --box: var(--ez-lilac); }
.sv-caps--shelf .sv-cap:nth-child(6n+3) { --box: var(--ez-sky); }
.sv-caps--shelf .sv-cap:nth-child(6n+4) { --box: #fff; }
.sv-caps--shelf .sv-cap:nth-child(6n+5) { --box: var(--ez-stone); }
.sv-caps--shelf .sv-cap:nth-child(6n) { --box: var(--ez-sky-light); }

/* Signs (SEO & maintenance): road signs on the night road */
.sv-caps--signs { background: var(--ez-road); color: #fff; }
.sv-caps--signs .sv-caps__list { row-gap: 0; }
.sv-caps--signs .sv-cap { display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 26px 0; border-top: 3px dashed var(--ez-yellow); }
.sv-caps--signs .sv-cap__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 1.375rem;
}
.sv-caps--signs .sv-cap:nth-child(3n+1) .sv-cap__num { border: 7px solid var(--ez-red); border-radius: 50%; background: #fff; color: var(--ez-ink); }
.sv-caps--signs .sv-cap:nth-child(3n+2) .sv-cap__num { padding-top: 14px; background: var(--ez-yellow); color: var(--ez-ink); clip-path: polygon(50% 0, 100% 92%, 0 92%); }
.sv-caps--signs .sv-cap:nth-child(3n) .sv-cap__num { border: 3px solid #fff; border-radius: 8px; background: var(--ez-sea); color: #fff; }
.sv-caps--signs .sv-cap__text { color: var(--ez-sky-light); }
.sv-caps--signs .sv-deliver__title { color: #fff; }
@media (min-width: 640px) { .sv-caps--signs .sv-caps__list { column-gap: clamp(24px, 4vw, 56px); } }

/* ================= How we work: shared ================= */
.sv-approach { padding-block: clamp(56px, 8vw, 112px); background: var(--ez-sky-light); }
.sv-approach__head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 52px); }
.sv-steps { display: grid; gap: 18px; }
.sv-step { position: relative; }
.sv-step__num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 3px solid var(--ez-ink);
  border-radius: 50%;
  background: var(--c);
  color: var(--on);
  font: 400 1.625rem/1 var(--ez-font-display);
}
.sv-step__title { margin-top: 14px; font: 400 clamp(1.5rem, 2.2vw, 1.875rem)/1.05 var(--ez-font-display); text-transform: uppercase; }
.sv-step__text { margin-top: 8px; max-width: 34ch; font-size: 1.0625rem; line-height: 1.5; }

/* Strip (Branding): left to right, joined by arrows */
@media (min-width: 900px) {
  .sv-approach--strip .sv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .sv-approach--strip .sv-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 26px;
    left: 70px;
    right: -22px;
    border-top: 4px solid var(--ez-ink);
  }
  .sv-approach--strip .sv-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 20px;
    right: -24px;
    border: 8px solid transparent;
    border-left: 12px solid var(--ez-ink);
  }
}
@media (max-width: 899px) {
  .sv-approach--strip .sv-steps { gap: 0; }
  .sv-approach--strip .sv-step { padding: 0 0 26px 76px; }
  .sv-approach--strip .sv-step__num { position: absolute; left: 0; top: 0; }
  .sv-approach--strip .sv-step__title { margin-top: 10px; }
  .sv-approach--strip .sv-step:not(:last-child)::after { content: ''; position: absolute; left: 26px; top: 58px; bottom: 0; border-left: 4px solid var(--ez-ink); }
}

/* Cycle (Social): four steps around a loop that comes back to the start */
.sv-approach--cycle { background: var(--ez-paper); }
.sv-steps__centre {
  margin-top: 24px;
  font: 400 clamp(1.75rem, 3vw, 2.5rem)/1 var(--ez-font-display);
  text-transform: uppercase;
}
.sv-steps__centre::before { content: '↻ '; color: var(--ez-ink-soft); }
.sv-approach--cycle .sv-step { padding: 22px; border: 3px solid var(--ez-ink); border-radius: 18px; background: #fff; }
/* Clockwise around a centre ring: 1 top left, 2 top right, 3 bottom right, 4 bottom left. */
@media (min-width: 900px) {
  .sv-approach--cycle .sv-steps-wrap { position: relative; }
  .sv-approach--cycle .sv-steps { grid-template-columns: 1fr 1fr; gap: 56px clamp(150px, 18vw, 220px); }
  .sv-approach--cycle .sv-step:nth-child(3) { grid-area: 2 / 2; }
  .sv-approach--cycle .sv-step:nth-child(4) { grid-area: 2 / 1; }
  .sv-approach--cycle .sv-steps__centre {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: clamp(150px, 16vw, 200px);
    aspect-ratio: 1;
    margin: 0;
    padding: 18px;
    border: 4px dashed var(--ez-ink);
    border-radius: 50%;
    background: var(--ez-sky);
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .sv-approach--cycle .sv-steps__centre::before { content: none; }
}

/* Stops (Performance): bus stops along one route */
.sv-approach--stops .sv-step__num { border-color: var(--ez-ink); background: #fff; color: var(--ez-ink); box-shadow: inset 0 0 0 6px var(--ez-red); }
@media (min-width: 900px) {
  .sv-approach--stops .sv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 70px; }
  .sv-approach--stops .sv-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 4px; background: var(--ez-road); }
  .sv-approach--stops .sv-steps::after { content: ''; position: absolute; left: 0; right: 0; top: 9px; border-top: 3px dashed var(--ez-yellow); }
  .sv-approach--stops .sv-steps { position: relative; }
  .sv-approach--stops .sv-step::before { content: ''; position: absolute; left: 25px; top: -48px; width: 6px; height: 48px; background: var(--ez-ink-soft); }
}
@media (max-width: 899px) {
  .sv-approach--stops .sv-step { padding: 0 0 26px 76px; }
  .sv-approach--stops .sv-step__num { position: absolute; left: 0; top: 0; }
  .sv-approach--stops .sv-step__title { margin-top: 10px; }
  .sv-approach--stops .sv-step:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 58px; bottom: 0; width: 14px; background: var(--ez-road); }
}

/* Floors (Website): a building that rises from step 1 at street level */
.sv-approach--floors .sv-steps { display: flex; flex-direction: column-reverse; gap: 0; max-width: 46rem; border: 4px solid var(--ez-ink); border-bottom-width: 10px; background: #fff; }
.sv-approach--floors .sv-step { display: grid; grid-template-columns: 72px 1fr; gap: 4px 18px; padding: 20px 22px; border-top: 4px solid var(--ez-ink); }
.sv-approach--floors .sv-step:last-child { border-top: 0; }
.sv-approach--floors .sv-step__num { display: flex; align-items: center; justify-content: center; grid-row: 1 / span 2; width: 64px; height: 48px; border-radius: 4px; background: var(--ez-ink); color: var(--ez-yellow); }
.sv-approach--floors .sv-step__num::before { content: 'L'; margin-right: 2px; font-size: 0.8em; opacity: 0.8; }
.sv-approach--floors .sv-step__title { margin-top: 0; }
.sv-approach--floors .sv-step__text { margin-top: 0; max-width: none; }
.sv-approach--floors .sv-step:nth-child(odd) { background: var(--ez-sky-light); }
.sv-approach--floors .sv-steps-wrap { position: relative; }
.sv-approach--floors .sv-steps-wrap::before { content: ''; display: block; width: min(60%, 26rem); height: 20px; margin-left: 28px; border: 4px solid var(--ez-ink); border-bottom: 0; background: var(--ez-yellow); }

/* Aisle (Commerce): signboards hanging from one rail */
.sv-approach--aisle .sv-steps { gap: 30px; }
.sv-approach--aisle .sv-step { padding: 22px; border: 3px solid var(--ez-ink); border-radius: 6px; background: #fff; }
.sv-approach--aisle .sv-step::before,
.sv-approach--aisle .sv-step::after { content: ''; position: absolute; top: -30px; width: 3px; height: 30px; background: var(--ez-ink); }
.sv-approach--aisle .sv-step::before { left: 22%; }
.sv-approach--aisle .sv-step::after { right: 22%; }
.sv-approach--aisle .sv-steps-wrap { padding-top: 30px; border-top: 10px solid var(--ez-ink-soft); }
.sv-approach--aisle .sv-step__num { background: var(--ez-yellow); color: var(--ez-ink); }
@media (min-width: 900px) {
  .sv-approach--aisle .sv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .sv-approach--aisle .sv-step:nth-child(even) { margin-top: 26px; }
  .sv-approach--aisle .sv-step:nth-child(even)::before,
  .sv-approach--aisle .sv-step:nth-child(even)::after { top: -56px; height: 56px; }
}

/* Log (SEO): a monthly checklist */
.sv-approach--log .sv-steps { gap: 0; max-width: 46rem; }
.sv-approach--log .sv-step { display: grid; grid-template-columns: 56px 1fr; gap: 4px 20px; padding: 0 0 28px; }
.sv-approach--log .sv-step__num { grid-row: 1 / span 2; background: var(--ez-yellow); color: var(--ez-ink); }
.sv-approach--log .sv-step:not(:last-child)::after { content: ''; position: absolute; left: 26px; top: 58px; bottom: 0; border-left: 4px dotted var(--ez-ink); }
.sv-approach--log .sv-step__title { margin-top: 10px; }
.sv-approach--log .sv-step__title::after {
  content: 'Monthly';
  display: inline-block;
  margin-left: 12px;
  padding: 3px 8px 2px;
  border-radius: 3px;
  background: var(--ez-road);
  color: #fff;
  font: 700 0.75rem/1.2 var(--ez-font-body);
  letter-spacing: 0.08em;
  vertical-align: 0.4em;
}

/* ================= Selected work (placeholders until verified) ================= */
.sv-work { padding-block: clamp(56px, 8vw, 112px); }
.sv-work__head, .sv-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3.4vw, 40px); }
.sv-work__list { display: grid; gap: var(--ez-gap); }
@media (min-width: 720px) { .sv-work__list { grid-template-columns: 1fr 1fr; } }
.sv-proj__inner { display: flex; flex-direction: column; height: 100%; border: 2px solid var(--ez-ink); border-radius: var(--ez-radius); overflow: hidden; background: #fff; }
.sv-proj__media { position: relative; aspect-ratio: 16 / 10; background: var(--c); border-bottom: 2px solid var(--ez-ink); }
.sv-proj__media[data-placeholder] { outline-offset: -10px; outline-color: rgba(49, 49, 50, 0.35); }
.sv--dark .sv-proj__media[data-placeholder] { outline-color: rgba(255, 255, 255, 0.5); }
.sv-proj__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(18px, 2.2vw, 26px); }
.sv-proj__cat { padding: 4px 10px 3px; border-radius: 3px; background: var(--c); color: var(--on); font: 400 0.875rem/1.2 var(--ez-font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.sv-proj__title { font: 400 var(--ez-text-h3)/1.05 var(--ez-font-display); text-transform: uppercase; }
.sv-proj__text { font-size: 1.0625rem; line-height: 1.45; }
.sv-proj__status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ez-ink-soft); }
.sv-proj__status::before { content: ''; width: 22px; border-top: 3px dashed currentColor; }

/* ================= Related services ================= */
.sv-related { padding-block: clamp(56px, 8vw, 104px); background: var(--ez-sky-light); }
.sv-related__list { display: grid; gap: var(--ez-gap); }
@media (min-width: 720px) { .sv-related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-rel {
  --rc: var(--ez-yellow);
  --ron: var(--ez-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 3px solid var(--ez-ink);
  border-radius: var(--ez-radius);
  background: var(--rc);
  color: var(--ron);
  transition: transform 0.3s var(--ez-ease-out), box-shadow 0.3s var(--ez-ease-out);
}
.sv-rel--social { --rc: var(--ez-sky); }
.sv-rel--performance { --rc: var(--ez-red); --ron: #fff; }
.sv-rel--web { --rc: var(--ez-sea); --ron: #fff; }
.sv-rel--commerce { --rc: var(--ez-stone); } /* was lilac; this card only is stone (founder, 2026-10-26); lilac stays elsewhere. Stone: distinct from the other four cards */
.sv-rel--seo { --rc: var(--ez-road); --ron: #fff; }
.sv-rel__name { font: 400 clamp(1.5rem, 2.2vw, 1.875rem)/1.05 var(--ez-font-display); text-transform: uppercase; }
.sv-rel__name a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sv-rel__name a::after { content: ''; position: absolute; inset: 0; }
.sv-rel__name a:focus-visible { outline: none; }
.sv-rel:has(a:focus-visible) { outline: 3px solid var(--ez-ink); outline-offset: 4px; }
.sv-rel__text { font-size: 1.0625rem; line-height: 1.45; }
.sv-rel__arrow { margin-top: auto; font: 400 1.75rem/1 var(--ez-font-display); }
@media (hover: hover) {
  .sv-rel:hover { box-shadow: 0 8px 0 var(--ez-ink); }
}

/* ================= Enquiry ================= */
.sv-cta { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); background: var(--c); color: var(--on); }
.sv-cta__inner { position: relative; }
.sv-cta__num {
  position: absolute;
  right: 0;
  top: 50%;
  font: 400 clamp(9rem, 26vw, 22rem)/0.8 var(--ez-font-display);
  color: currentColor;
  opacity: 0.12;
  transform: translateY(-50%);
  pointer-events: none;
}
@supports (-webkit-text-stroke: 2px black) {
  .sv-cta__num { color: transparent; -webkit-text-stroke: 3px var(--on); opacity: 0.35; }
}
@media (max-width: 719px) { .sv-cta__num { display: none; } }
.sv-cta__title { position: relative; max-width: 14ch; font: 400 var(--ez-text-h2)/0.95 var(--ez-font-display); text-transform: uppercase; }
.sv-cta__text { position: relative; max-width: 32rem; margin: 18px 0 28px; }
.sv-cta__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.sv--branding .sv-cta .sv-link { text-decoration-color: var(--ez-paper); }

/* ================= Motion ================= */
@media (prefers-reduced-motion: no-preference) {
  .sv-hero .ez-eyebrow { animation: ez-rise 0.6s var(--ez-ease-out) both; }
  .sv-hero__word { animation: ez-rise 0.8s var(--ez-ease-out) both 0.08s; }
  .sv-hero__word + .sv-hero__word { animation-delay: 0.18s; }
  .sv-hero__platform { animation: ez-rise 0.8s var(--ez-ease-out) both 0.26s; }
  .sv-hero__lead { animation: ez-rise 0.8s var(--ez-ease-out) both 0.32s; }
  .sv-hero__actions { animation: ez-rise 0.8s var(--ez-ease-out) both 0.42s; }
  .sv-art { animation: ez-rise-sm 1s var(--ez-ease-out) both 0.3s; }
  /* E-commerce, Performance Marketing and Social Media: the illustration's own one-off entrance always completes. The pause rules in
     components.css also matched [data-loop] itself, so pausing (off-screen at load, or the Pause
     button within the first second) froze the entrance at opacity 0 and hid the storefront. The
     loops inside it still pause. */
  .sv--commerce .sv-art[data-loop],
  .sv--performance .sv-art[data-loop],
  .sv--social .sv-art[data-loop] { animation-play-state: running !important; }

  /* Branding: the swatch fan opens and closes; the spark turns */
  .sv-swatch { transform-box: view-box; transform-origin: 123px 404px; animation: sv-fan 3.6s ease-in-out infinite alternate; }
  .sv-twinkle { transform-box: fill-box; transform-origin: center; animation: sv-spin 6s ease-in-out infinite; }
  /* Social: the feed scrolls; reactions float up */
  .sv-feed { animation: sv-scroll 18s linear infinite; }
  .sv-react { transform-box: fill-box; animation: sv-float 4.4s ease-out infinite var(--d, 0s); }
  /* Performance: the bus runs its route */
  .sv-bus { animation: sv-route 24s linear infinite -9s; }
  .sv-notify { animation: sv-bounce 3.2s ease-in-out infinite; }
  .sv-wheel { transform-box: fill-box; transform-origin: center; animation: sv-turn 0.9s linear infinite; }
  .sv-lane { animation: sv-lane 1.6s linear infinite; }
  /* Website: the crane lowers the top floor into place */
  .sv-load { animation: sv-lower 5s ease-in-out infinite alternate; }
  .sv-cable { transform-box: fill-box; transform-origin: 50% 0; animation: sv-cable 5s ease-in-out infinite alternate; }
  .sv-light { animation: ez-twinkle 2.4s ease-in-out infinite alternate var(--d, 0s); }
  /* Commerce: the OPEN sign swings, a bag bounces */
  .sv-sign { transform-box: fill-box; transform-origin: 50% -14px; animation: ez-sway 2.2s ease-in-out infinite alternate; }
  .sv-bag { animation: sv-bounce 2.4s ease-in-out infinite; }
  .sv-scooter { animation: sv-idle 0.6s ease-in-out infinite alternate; }
  /* SEO: the lighthouse beam sweeps; stars twinkle; the sea moves */
  .sv-beam { transform-box: view-box; transform-origin: 290px 136px; animation: sv-sweep 4s ease-in-out infinite; }
  .sv-beam--back { animation-delay: -2s; }
  .sv-star { animation: ez-twinkle 2.8s ease-in-out infinite alternate var(--d, 0s); }
  .sv-waves { animation: sv-waves 3.2s linear infinite; }
  .sv-boat { transform-box: fill-box; transform-origin: 50% 100%; animation: ez-sway 3s ease-in-out infinite alternate; }

  .sv-step, .sv-cap { transition-property: opacity, transform; }
  .sv-approach--aisle .sv-step { transform-origin: 50% -30px; }
  @media (hover: hover) {
    .sv-approach--aisle .sv-step:hover { transform: rotate(-2deg); transition: transform 0.4s var(--ez-ease-out); }
    .sv-rel:hover { transform: translateY(-4px); }
  }
}

/* Resting states when nothing moves */
.sv-swatch { transform-box: view-box; transform-origin: 123px 404px; transform: rotate(var(--r)); }
.sv-bus { transform: translateX(640px); }
.sv-beam--back { opacity: 0.5; }

/* Loops pause off-screen or on request (components.css); reduced motion stops everything. */
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { animation: none !important; transition: none !important; }
  .sv .ez-btn:hover, .sv .ez-btn:active { transform: none; }
}

@keyframes sv-fan { from { transform: rotate(calc(var(--r) * 0.3)); } to { transform: rotate(var(--r)); } }
@keyframes sv-spin { 0%, 70% { transform: rotate(0) scale(1); } 85% { transform: rotate(90deg) scale(1.2); } 100% { transform: rotate(90deg) scale(1); } }
@keyframes sv-scroll { to { transform: translateY(-450px); } }
@keyframes sv-float { 0% { opacity: 0; transform: translateY(24px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }
@keyframes sv-route { from { transform: translateX(-230px); } to { transform: translateX(1460px); } }
@keyframes sv-turn { to { transform: rotate(360deg); } }
@keyframes sv-lane { to { transform: translateX(-52px); } }
@keyframes sv-lower { 0%, 15% { transform: translateY(-48px); } 85%, 100% { transform: translateY(0); } }
@keyframes sv-cable { 0%, 15% { transform: scaleY(0.08); } 85%, 100% { transform: scaleY(1); } }
@keyframes sv-bounce { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(-10px); } }
@keyframes sv-idle { to { transform: translateY(-1.5px); } }
@keyframes sv-sweep { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.05); opacity: 0.3; } }
@keyframes sv-waves { from { transform: translateX(-40px); } to { transform: translateX(0); } }

/* ================= Milestones 6C–6D: real Selected work (Website Development) =================
 * As on /work/: the whole desktop screenshot in a browser frame (showcase.css), then
 * "View Project" (the card-wide link to the Project Showcase) and "Visit Live Website". */
.sv-proj__inner { position: relative; border-radius: 10px; transition: transform 0.3s var(--ez-ease-out), box-shadow 0.3s var(--ez-ease-out); }
.sv-proj__media.ez-stage { margin: 0; aspect-ratio: auto; }
.sv-proj__body { flex: 1 0 auto; }
.sv-proj__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sv-proj__meta { font-weight: 700; font-size: 0.9375rem; color: var(--ez-ink-soft); }
.sv-proj__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; width: 100%; margin-top: auto; padding-top: 12px; }
.sv-proj__cta { min-height: 48px; padding: 10px 20px; font-size: 1.0625rem; }
.sv-proj__cta, .sv-proj__cta:hover, .sv-proj__cta:active { transform: none; box-shadow: 0 4px 0 var(--ez-yellow), 0 4px 0 2px var(--ez-ink); }
.sv-proj__cta::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sv-proj__cta:focus-visible { outline: none; }
.sv-proj__inner:has(.sv-proj__cta:focus-visible) { outline: 3px solid var(--ez-ink); outline-offset: 4px; }
.sv-proj__ext {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  font-weight: 700;
  color: var(--ez-ink);
  text-decoration: underline;
  text-decoration-color: var(--ez-sea-light);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.sv-proj__ext:hover { text-decoration-color: var(--ez-ink); }
.sv-proj__ext:focus-visible { outline: 3px solid var(--ez-ink); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sv-proj--live .sv-proj__inner:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--ez-ink); }
}

/* ================= Branding & Creative: Selected work from client data =================
 * Written by tools/build-branding-work.js: a quiet, curated row of three. Each client's own logo,
 * whole (contained, never cropped or stretched) with generous space around it, on a white plate,
 * or an ink plate for a light logo (.sv-brand--dark, as on Clientele). Then the name and a small
 * label. A plate is a link only when the project page exists. .sv-preview is the "not for
 * publication" notice of a --preview build. */
.sv-brands { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 640px) { .sv-brands { grid-template-columns: repeat(3, 1fr); } }
.sv-brand figure { margin: 0; }
.sv-brand__plate {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(49, 49, 50, 0.16);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.25s var(--ez-ease-out), transform 0.25s var(--ez-ease-out);
}
@media (min-width: 640px) { .sv-brand__plate { aspect-ratio: 8 / 5; } }
.sv-brand--dark .sv-brand__plate { border-color: var(--ez-ink); background: var(--ez-ink); }
.sv-brand__plate img { position: absolute; inset: 22% 18%; width: 64%; height: 56%; object-fit: contain; }
.sv-brand__plate img[style*="--zoom"] { transform: scale(var(--zoom)); }
a.sv-brand__plate:hover { border-color: var(--ez-ink); }
a.sv-brand__plate:focus-visible { outline: 3px solid var(--ez-ink); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.sv-brand__plate:hover { transform: translateY(-2px); }
}
.sv-brand figcaption { display: grid; gap: 3px; margin-top: 12px; }
.sv-brand__name { font: 400 1.125rem/1.2 var(--ez-font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.sv-brand__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ez-ink-soft); }
.sv-preview {
  max-width: 62ch;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  padding: 10px 14px;
  border: 1px dashed var(--ez-ink-soft);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ez-ink-soft);
}

/* ================= E-commerce: Selected work from client data =================
 * Written by tools/build-service-work.js into the page's existing 16:10 project cards: a live-store
 * screenshot (16:10 itself, so shown whole), or, for a store eZephyr manages but did not build, the
 * store's own logo on its brand colour (--plate). Labels list eZephyr's confirmed work. */
.sv-proj__media--shot, .sv-proj__media--logo { margin: 0; overflow: hidden; }
.sv-proj__media--shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-proj__media--logo { display: grid; place-items: center; background: var(--plate, var(--c)); }
.sv-proj__media--logo img { width: 62%; height: 42%; object-fit: contain; }
.sv-proj__cats { display: flex; flex-wrap: wrap; gap: 6px; }

/* ================= Performance Marketing: compact logo cards (.sv-work--logos) =================
 * Written by tools/build-service-work.js performance. Three columns on desktop, two on tablets,
 * one on phones, in the shared .sv-proj card. Every logo sits in the same 2:1 area on its plate
 * (white, or the client's brand colour). The builder sizes each logo's box by area (--logo-w/-h,
 * so long and square marks carry similar weight) and caps it at the file's own pixel size
 * (--logo-max-w/-h), and object-fit: contain keeps it whole: never stretched, cropped or blown up. */
@media (min-width: 640px) { .sv-work--logos .sv-work__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sv-work--logos .sv-work__list { grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 1.8vw, 24px); } }
.sv-work--logos .sv-proj__media--logo { aspect-ratio: 2 / 1; }
.sv-work--logos .sv-proj__media--logo img {
  width: var(--logo-w, 50%);
  height: var(--logo-h, 40%);
  max-width: var(--logo-max-w, none);
  max-height: var(--logo-max-h, none);
  object-fit: contain;
}
.sv-work--logos .sv-proj__body { gap: 8px; padding: clamp(16px, 1.6vw, 20px); }
.sv-work--logos .sv-proj__title { font-size: clamp(1.375rem, 1.7vw, 1.625rem); }
.sv-work--logos .sv-proj__text { font-size: 1rem; }
/* A "View Performance" link to a page that is still a private preview says so on the button. */
.sv-proj__preview { margin-left: 4px; padding: 1px 6px 0; border: 1px dashed currentColor; border-radius: 3px; font-size: 0.75em; letter-spacing: 0.06em; }
/* Social Media Management: a card's own published posts (.sv-proj__media--posts), one to three tiles
   in the same 2:1 area as a logo card, each shown whole (contain), never cropped. */
.sv-work--logos .sv-proj__media--posts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  aspect-ratio: 2 / 1;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  background: var(--plate, #fff);
}
.sv-work--logos .sv-proj__media--posts img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }