/* Dedicated service pages (service-*.html, written by tools/gen-services.js): hero with the service's stone,
   what you get, the tabbed process (css/web-service.css), a portfolio grid of three per row,
   FAQ shown open, links to the other services and the contact form (css/closing.css). No carousels. */
.svc-page { --mono: var(--_font-default); --svc-ink: #e0e5ef; --svc-muted: #afb9cc; --svc-line: #e0e5ef24; --svc-accent: #c9b9ff; color: var(--svc-ink); }
.svc-section, .svc-hero__inner { width: 100%; max-width: 1760px; margin-inline: auto; }
.svc-section { padding: clamp(64px, 7vw, 120px) 3.2rem 0; }
.svc-eyebrow { margin: 0 0 18px; font: 400 clamp(11px, .85vw, 13px)/1.3 var(--_font-default); letter-spacing: .16em; text-transform: uppercase; color: #a79ac8; }
.svc-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid #a79ac866; }
.svc-head { max-width: 920px; margin-bottom: clamp(28px, 3vw, 48px); }
.svc-head h2 { margin: 0; font: 400 clamp(32px, 3.6vw, 64px)/1.02 var(--_font-default); letter-spacing: -.045em; color: var(--svc-ink); }
.svc-head h2 span { color: var(--svc-muted); }
.svc-head > p:last-child:not(.svc-eyebrow) { margin: 16px 0 0; font: 300 clamp(15px, 1.1vw, 18px)/1.55 var(--_font-default); color: var(--svc-muted); }

/* Hero: copy on the left, the animated stone of the service on the right, under the shared arc. */
.svc-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(150px, 15vw, 210px) 3.2rem clamp(40px, 5vw, 80px); }
.svc-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
.svc-hero h1 { margin: 0; font: 400 clamp(42px, 5.6vw, 104px)/.98 var(--_font-default); letter-spacing: -.055em; color: var(--svc-ink); }
.svc-hero h1 span { display: block; }
.svc-hero h1 span:first-child { font-weight: 300; color: #c9d2e2; }
.svc-hero h1 span:last-child { font-weight: 500; background: linear-gradient(180deg, #f4f5fa 30%, #b9acdf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc-hero__lead { max-width: 640px; margin: clamp(22px, 2.4vw, 36px) 0 0; font: 300 clamp(15px, 1.2vw, 19px)/1.6 var(--_font-default); color: var(--svc-muted); }
.svc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 2.6vw, 40px); }
/* minmax(0, 1fr): a full-width column from the first paint, so the stone's square (width 100%, aspect-ratio 1)
   is reserved before its video arrives; an auto column sized to the empty slot (0) made the hero jump ~400px. */
.svc-hero__stone { display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); }
.svc-hero__stone .medusa-web__stone { width: 100%; max-width: 520px; }

/* What you get: six glass cards. */
.svc-includes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); margin: 0; padding: 0; list-style: none; }
.svc-includes li, .svc-faq > div, .svc-stat {
  border: 1px solid var(--svc-line); border-radius: 22px; background: linear-gradient(145deg, #222c4a73, #0c122259);
  box-shadow: inset 1px 1px 0 #ffffff12; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.svc-includes li { padding: clamp(22px, 2vw, 32px); }
.svc-includes__num { display: block; margin-bottom: 18px; font: 400 12px/1 var(--_font-default); letter-spacing: .14em; color: var(--svc-accent); }
.svc-includes h3 { margin: 0 0 10px; font: 400 clamp(19px, 1.5vw, 24px)/1.15 var(--_font-default); letter-spacing: -.025em; color: var(--svc-ink); }
.svc-includes p { margin: 0; font: 300 15px/1.55 var(--_font-default); color: var(--svc-muted); }

.svc-section--process .medusa-web__block { margin-top: 0; }
.svc-section--process .medusa-web__block + .medusa-web__block { margin-top: clamp(48px, 5vw, 80px); }

/* Portfolio: three per row on desktop, two on tablets, one on phones. */
.svc-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px) clamp(14px, 1.6vw, 28px); margin: 0; padding: 0; list-style: none; }
.svc-work__item { min-width: 0; }
.svc-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.svc-card__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--svc-line); border-radius: 22px; background: #151d33; }
.svc-card__img--square { aspect-ratio: 1; }
.svc-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.svc-card:hover .svc-card__img img, .svc-card:focus-visible .svc-card__img img { transform: scale(1.04); }
.svc-card__meta { display: block; margin-top: 16px; font: 400 12px/1.3 var(--_font-default); letter-spacing: .14em; text-transform: uppercase; color: var(--svc-muted); }
.svc-card__name { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 400 clamp(20px, 1.7vw, 28px)/1.1 var(--_font-default); letter-spacing: -.03em; color: var(--svc-ink); }
.svc-card__name svg { width: 18px; height: 18px; flex: none; color: var(--svc-accent); transition: transform .3s; }
.svc-card:hover .svc-card__name svg { transform: translate(3px, -3px); }
.svc-work__item--brand .medusa-brand__visual { border-radius: 22px; }
/* Graphic design: business-card shaped boxes (7:4, like the 1050×600 card artwork), two per row. */
.svc-work--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-card__img--card { aspect-ratio: 7 / 4; border-radius: 14px; }
.svc-card__img--card img { object-position: center; }

/* Information & consultations: the whole band links to the project lead's site. */
.svc-lead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 56px);
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3.4vw, 56px); border: 1px solid var(--svc-line); border-radius: 22px;
  background: radial-gradient(70% 120% at 0% 50%, #6d4bd62e, transparent 70%), linear-gradient(145deg, #222c4a73, #0c122259);
  box-shadow: inset 1px 1px 0 #ffffff12; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: inherit; text-decoration: none; transition: border-color .3s, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.svc-lead:hover, .svc-lead:focus-visible { border-color: #c9b9ff66; transform: translateY(-2px); }
.svc-lead__logo { display: grid; place-items: center; width: clamp(64px, 6vw, 96px); }
.svc-lead__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 18px #0009); }
.svc-lead__text { display: block; }
.svc-lead__text .svc-eyebrow { display: block; margin-bottom: 12px; }
.svc-lead__title { display: block; font: 300 clamp(20px, 1.9vw, 32px)/1.2 var(--_font-default); letter-spacing: -.02em; color: var(--svc-ink); }
.svc-lead__title strong { font-weight: 500; color: #fff; }
.svc-lead__sub { display: block; margin-top: 10px; font: 300 15px/1.55 var(--_font-default); color: var(--svc-muted); }
.svc-lead__cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--svc-line); border-radius: 99px;
  font: 400 14px/1 var(--_font-default); color: #eafdff; white-space: nowrap; transition: border-color .3s, background .3s;
}
.svc-lead__cta svg { width: 14px; height: 14px; color: var(--svc-accent); transition: transform .3s; }
.svc-lead:hover .svc-lead__cta { border-color: #c9b9ff80; background: #c9b9ff14; }
.svc-lead:hover .svc-lead__cta svg { transform: translate(3px, -3px); }

/* Campaign results. */
.svc-stat { display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 1.8vw, 30px); }
.svc-stat h3 { margin: 6px 0 8px; font: 400 clamp(22px, 1.8vw, 30px)/1.1 var(--_font-default); letter-spacing: -.03em; color: #f1f3f9; }
.svc-stat__headline { margin: 0 0 18px; font: 300 15px/1.45 var(--_font-default); color: var(--svc-muted); }
.svc-stat__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 20px; overflow: hidden; border: 1px solid #e0e5ef1a; border-radius: 14px; background: #e0e5ef1a; }
.svc-stat__metrics div { padding: 12px 14px; background: #0d1426; }
.svc-stat__metrics dt { margin-bottom: 6px; font: 400 10px/1.3 var(--_font-default); letter-spacing: .12em; text-transform: uppercase; color: #8f9ab0; }
.svc-stat__metrics dd { margin: 0; }
.svc-stat__metrics strong { display: block; font: 400 clamp(20px, 1.6vw, 26px)/1.05 var(--_font-default); letter-spacing: -.03em; color: #f1f3f9; }
.svc-stat__delta { display: block; margin-top: 4px; font: 400 12px/1.2 var(--_font-default); color: #b9a8ff; }
.svc-stat__delta.is-cost { color: #8f9ab0; }
.svc-stat__more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; color: #f1f3f9; font: 400 12px/1 var(--_font-default); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.svc-stat__more svg { width: 16px; height: 16px; color: var(--svc-accent); }

/* "Working together" console (web page): the process tabs without the animated form. Each panel is a
   heading with a short intro, then a grid: five numbered steps, three price cards or four services. */
.medusa-web__proc--guide .medusa-web__proc-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.medusa-web__guide-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: clamp(16px, 4vw, 64px); margin-bottom: clamp(22px, 2.6vw, 38px); }
.medusa-web__guide-head h4 { margin: 0; font: 300 clamp(28px, 2.8vw, 44px)/1.05 var(--_font-default); letter-spacing: -.04em; color: #f1f3f9; }
.medusa-web__guide-head p { max-width: 60ch; margin: 0; font: 300 clamp(14px, 1.1vw, 17px)/1.6 var(--_font-default); color: #aab6c8; }
.medusa-web__guide { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.medusa-web__guide--steps { --cols: 5; }
.medusa-web__guide--price { --cols: 3; }
.medusa-web__guide li { position: relative; padding: clamp(18px, 1.6vw, 24px); border: 1px solid #e0e5ef1f; border-radius: 4px; background: #ffffff06; }
.medusa-web__guide h5 { margin: 0 0 8px; font: 400 clamp(17px, 1.3vw, 20px)/1.2 var(--_font-default); letter-spacing: -.02em; color: #f1f3f9; }
.medusa-web__guide p { margin: 0; font: 300 14px/1.55 var(--_font-default); color: #aab6c8; }
.medusa-web__guide-num { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 400 12px/1 var(--mono); letter-spacing: .14em; color: #c9b9ff; }
.medusa-web__guide-num::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #c9b9ff66, transparent); }
.medusa-web__guide--price li { padding: clamp(22px, 2vw, 32px); }
.medusa-web__guide--price li:first-child { border-color: #a58cff88; background: linear-gradient(135deg, #3a2f6a73, #141a3699); }
.medusa-web__guide-value { display: block; margin: 0 0 12px; font: 300 clamp(24px, 2.2vw, 36px)/1.1 var(--_font-default); letter-spacing: -.03em; background: linear-gradient(90deg, #e6defc, #a9b4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1199px) {
  .medusa-web__proc--guide .medusa-web__proc-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .medusa-web__guide, .medusa-web__guide--steps { --cols: 2; }
  .medusa-web__guide--price { --cols: 3; }
}
@media (max-width: 767px) {
  .medusa-web__proc--guide .medusa-web__proc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medusa-web__guide-head { grid-template-columns: 1fr; }
  .medusa-web__guide, .medusa-web__guide--steps, .medusa-web__guide--price { --cols: 1; }
}

/* FAQ, shown open (no dropdowns). */
.svc-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); margin: 0; }
.svc-faq > div { padding: clamp(22px, 2vw, 30px); }
.svc-faq dt { margin-bottom: 10px; font: 400 clamp(18px, 1.35vw, 22px)/1.25 var(--_font-default); letter-spacing: -.02em; color: var(--svc-ink); }
.svc-faq dd { margin: 0; font: 300 15px/1.6 var(--_font-default); color: var(--svc-muted); }

/* Links to the other services. */
.svc-others ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.svc-others a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--svc-line); border-radius: 99px; background: linear-gradient(145deg, #222c4a73, #0c122259); color: #c9d2e2; font: 400 14px/1 var(--_font-default); text-decoration: none; transition: border-color .3s, color .3s; }
.svc-others a:hover, .svc-others a:focus-visible { border-color: #c9b9ff80; color: #fff; }
.svc-others svg { width: 14px; height: 14px; color: var(--svc-accent); }

@media (max-width: 1199px) {
  .svc-includes, .svc-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .svc-section, .svc-hero { padding-inline: 2.2rem; }
  .svc-hero__inner { grid-template-columns: 1fr; }
  .svc-hero__stone { order: -1; }
  .svc-hero__stone .medusa-web__stone { max-width: 260px; }
  .svc-includes, .svc-work, .svc-faq { grid-template-columns: 1fr; }
  .svc-lead { grid-template-columns: auto minmax(0, 1fr); }
  .svc-lead__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .svc-card__img img, .svc-card__name svg, .svc-lead, .svc-lead__cta svg { transition: none; } }